<HTML>
<HEAD>
<TITLE> Vježba iz fizike 8 - GIBANJE I SILA</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("30 s", "10 min", "2 h", "0.5 h", "0.75 h", "2.5 h", "2 dana", "tjedan dana", "1 dan", "1 h 20 min");
odgovor1 = new Array("0.5 min", "600 s", "120 min", "1800 s", "45 min", "150 min", "48 h", " 168 h", "1440 min", "4800 s");
pitanje2 = new Array("100 m","200 m","2000 m","40 000 dm","1200 m","5000 m","0.4 km", "1.5 km","20 km","100 km");
odgovor2 = new Array("0.1 km","2000 dm","2 km","4 km","1.2 km","5 km","4000 dm", "1500 m", "20 000 m","1 000 000 dm");
pitanje3 = new Array("2 m/s","4 m/s","10 m/s","15 m/s","30 m/s","18 km/h","63 km/h","72 km/h","144 km/h","126 km/h");
odgovor3 = new Array("7.2 km/h","14.4 km/h","36 km/h","54 km/h","108 km/h","5 m/s","17.5 m/s","20 m/s","40 m/s","35 m/s");
</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">2. cjelina - GIBANJE I SILA</font></h3>
- povezivanje parova (vježba) - 
</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 jednake vrijednosti za vremenski interval na lijevoj i desnoj strani, koje su napisane na dva načina:
<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. Svakoj vrijednosti prijeđenog puta na lijevoj strani pridružite odgovarajuću vrijednost puta 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. Svakoj brzini tijela na lijevoj strani pridružite odgovarajuću brzinu na desnoj strani, izraženu u drugoj mjernoj jedinici:
<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>