<HTML>
<HEAD>
<TITLE> Vježba iz fizike 8 - ELEKTRIČNA STRUJA</TITLE>
<style>
.prov{
background:#aaaaff;
width:200px;
font-size:15px;
font-weight: bold;
padding:10px;
}
}
/* Modalni okvir (pozadina) */
.modal {  
    display: none; /* Skriveno u pocetku */
    position: fixed; /* Ostaje na mjestu */
    margin: 5% auto;
    z-index: 1; /* Iznad pozadine */
    width: 80%; /* 100% je puna širina */
    height: 30%; /* 100% je puna visina  */
    align-items: center;
    background-color: rgb(100,0,2); /* Fallback color */
    background-color: rgba(0,0,0,0.1); /* Black w/ opacity */
}

/* Modalni sadržaj - unutarnji okvir */
.modal-content {
    background-color: #dca; /* boja pozadine na kojoj je tekst */
    display:none;
    position:fixed;
    margin: 15% auto; /* 15% od vrha i centrirano */
    padding: 20px;
    border: 3px solid #88b;
    width: 80%; /* Vrijednost širine ovisi o promjeru ekrana */
    height:20%;
    font-size:16px;
    font-family: Arial;
    text-align: center;
    font-weight: bold;
    color:black;
}

/* Botun izborDA-NE */
.dane { 
  border-radius: 10px;
  background-color: #226644; 
  border: double;
  color: white;
  width: 100px;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}
input:hover
{
color: yellow;
cursor: pointer;
}

/* Botun zatvori */
.zatvori {
    color: #66aadd;
    background-color:darkblue;
    border: 1px solid #5588ee;
    padding: 5px;
    //float: right;
    margin: 5%;
    font-size: 18px;
    font-weight: bold;
}
.zatvori:hover,
.zatvori:focus {
    color: yellow;
    text-decoration: none;
    cursor: pointer;
}
</style>
<script>
var opseg=9;
var n=Math.round(9*Math.random());
var kradio0=0;
var kradio1=0;
var kradio2=0;
//mijesanje indeksa
a = new Array; //niz pomijesanih indeksa, 0-9
//popunjavanje niza pitanja od 0 do opseg (a)
for (var i=0;i<=opseg;i++){ 
  a[i]=i;
}
//miješanje 4 redna broja, u rasponu od a=0 do a=opseg
  var a=[];
  while(a.length<=opseg){
    var r=Math.round(Math.random()*opseg);
    if(a.indexOf(r)===-1) a.push(r);
    }

pitanje1 = new Array("električni naboj", "električna struja", "ampermetar", "voltmetar", "električno polje", "električni izvor", "trošilo", "sklopka", "magnetski polovi", "kemijski izvor", "elektroliza", "učinci električne struje", "dijelovi strujnog kruga", "električki negativno tijelo", "električki pozitivno tijelo", "električki neutralno tijelo");
odgovor1 = new Array("svojstvo tijela da privlači i odbija", "usmjereno gibanje električnih naboja", "instrument koji mjeri električnu struju", "instrument koji mjeri električni napon", "prostor oko električnog naboja", "pretvara druge oblike energije u električnu", "pretvara elekričnu energiju u druge oblike", "otvara i zatvara strujni krug", "sjever i jug", "baterija i akumulator", "rastavljanje kemijskog spoja pomoću istosmjerne struje", "svjetlosni, toplinski, magnetski, kemijski", "izvor, trošilo, vodiči, sklopka", "ima više negativnih naboja nego pozitivnih", "ima više pozitivnih naboja nego negativnih", "ima jednako pozitivnih i negativnih naboja");
pitanje2 = new Array("električna struja", "napon", "otpor", "snaga", "energija", "vrijeme", "električni naboj", "duljina", "masa", "frekvencija");
odgovor2 = new Array("amper, A","volt, V", "om, &#937;", "vat, W", "džul, J", "sekunda, s", "kulon, C", "metar, m", "kilogram, kg", "herc, Hz");
pitanje3 = new Array("napon", "snaga", "energija", "otpor", "vrijeme", "električna struja", "duljina", "masa", "električni naboj", "frekvencija");
odgovor3 = new Array("<i>U</i>",  "<i>P</i>", "<i>E</i>", "<i>R</i>", "<i>t</i>", "<i>I</i>", "<i>l</i>", "<i>m</i>", "<i>Q</i>", "<i>f</i>");

</script>
</HEAD>

<BODY bgcolor="#eecfae">

<!-- Modalni prozor sa sadrzajem i botunom -->
<div class="modal-content" id="myModal">  
  <center><div class="modal-body" id="modalbody"><p></div>
  <div class="modal-footer">
    <p><span><input type="button" class="dane" value="Zatvori"></span>
  </div>
</div></center>
</div>

<center><h2>Fizika za 8. razred</h2>
<h3><font color="red">1. cjelina - ELEKTRIČNA STRUJA</font></h3>
- Osnovni pojmovi - 
</center>

<hr>
<form name="forma1">
<p>UPUTE: U sljedećim zadacima pronađite koji član na desnoj strani odgovara članu na lijevoj strani. Samo jedan odgovor je točan. Klikom na tipku "Provjeri" vidjet ćete jeste li točno odgovorili na postavljene zadatke.

<p>1. ZADATAK. Povežite pojam i njegovu kratku definiciju:
<table>
<tr><td width="30%" bgcolor="white"><b><font size="4" color="red" face="Arial"> <script>document.write(pitanje1[a[0]]);</script> </font></b></td><td width=200></td>
<td width="50%">
<script>
//miješanje indeksa radio botuna b od 0-2
  var b=[];
  while(b.length<=2){
    var r=Math.round(Math.random()*2);
    if(b.indexOf(r)===-1) b.push(r);
    }
document.write("<br><INPUT TYPE='radio' NAME='izbor0' VALUE=''>"+odgovor1[a[b[0]]]);
if(b[0]==0) kradio0=0;
document.write("<br><INPUT TYPE='radio' NAME='izbor0' VALUE=''>"+odgovor1[a[b[1]]]);
if(b[1]==0) kradio0=1;
document.write("<br><INPUT TYPE='radio' NAME='izbor0' VALUE=''>"+odgovor1[a[b[2]]]);
if(b[2]==0) kradio0=2;
</script>
</td></tr>
</table>

<p>2. ZADATAK. Fizikalnoj veličini na lijevoj strani pridružite odgovarajuću mjernu jedinicu na desnoj strani:
<table>
<tr><td width="30%" bgcolor="white"><b><font size="4" color="red" face="Arial"><script> document.write(pitanje2[a[0]]);</script> </font></b></td><td width=200></td>
<td width="50%">
<script>
//miješanje indeksa radio botuna b od 0-2
  var b=[];
  while(b.length<=2){
    var r=Math.round(Math.random()*2);
    if(b.indexOf(r)===-1) b.push(r);
    }
document.write("<br><INPUT TYPE='radio' NAME='izbor1' VALUE=''>"+odgovor2[a[b[0]]]);
if(b[0]==0) kradio1=0;
document.write("<br><INPUT TYPE='radio' NAME='izbor1' VALUE=''>"+odgovor2[a[b[1]]]);
if(b[1]==0) kradio1=1;
document.write("<br><INPUT TYPE='radio' NAME='izbor1' VALUE=''>"+odgovor2[a[b[2]]]);
if(b[2]==0) kradio1=2;
</script>
</td></tr>
</table>

<p>3. ZADATAK. Fizikalnoj veličini na lijevoj strani pridružite odgovarajuću oznaku:
<table>
<tr><td width="30%" bgcolor="white"><b><font size="4" color="red" face="Arial"><script> document.write(pitanje3[a[0]]);</script> </font></b></td><td width=200></td>
<td width="50%">
<script>
//miješanje indeksa radio botuna b od 0-2
  var b=[];
  while(b.length<=2){
    var r=Math.round(Math.random()*2);
    if(b.indexOf(r)===-1) b.push(r);
    }
document.write("<br><INPUT TYPE='radio' NAME='izbor2' VALUE=''>"+odgovor3[a[b[0]]]);
if(b[0]==0) kradio2=0;
document.write("<br><INPUT TYPE='radio' NAME='izbor2' VALUE=''>"+odgovor3[a[b[1]]]);
if(b[1]==0) kradio2=1;
document.write("<br><INPUT TYPE='radio' NAME='izbor2' VALUE=''>"+odgovor3[a[b[2]]]);
if(b[2]==0) kradio2=2;
</script>
</td></tr>
</table>

<SCRIPT LANGUAGE="JavaScript">
var n, k
var bodovi=0;
var poruka=[];

function provjeri(){
var okvir=document.getElementById("myModal");
var sadrzaj=document.getElementById("modalbody");
// Prijavi <span> element koji zatvara modalni okvir
var zatvori=document.getElementsByClassName("dane")[0];

  if (document.forma1.izbor0[kradio0].checked) {poruka[0]="1. točno";} else poruka[0]="1. netočno, rješenje je po redu: "+eval(kradio0+1)+".";
  if (document.forma1.izbor1[kradio1].checked) {poruka[1]="2. točno";} else poruka[1]="2. netočno, rješenje je po redu: "+eval(kradio1+1)+".";
  if (document.forma1.izbor2[kradio2].checked) {poruka[2]="3. točno";} else poruka[2]="3. netočno, rješenje je po redu: "+eval(kradio2+1)+".";
 
  sadrzaj.innerText=poruka[0]+"\n"+poruka[1]+"\n"+poruka[2]; 
  okvir.style.display = "block";
  // Kada korisnik klikne na <span>(Zatvori), zatvara se modalni okvir
  zatvori.onclick = function() {
    okvir.style.display = "none";
    }
}
</SCRIPT>

<P><input type="button" value="Provjeri" class="prov" onclick="provjeri()">
<input type="button" value="Novo" class="prov" onclick="location.reload()">
</FORM>

</BODY>
</HTML>