<!DOCTYPE html>
<html>
<head>
<title>Mjerenje duljine</title>
<STYLE>
body{
background-image: linear-gradient(to left, lightyellow , #acedba);
}
canvas{
  background-color:#eeffff;
  border: 4px solid #66bbee;
  }
.botun {
    color: #aaeedd;
    background-color:darkblue;
    border: 3px solid #22ddbb;
    border-radius:10px;
    padding: 15px;
    width:360px;
    font-size: 30px;
    font-weight: bold;
  }
  .botun:hover {  
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  }
  .botun:hover,
  .botun:focus {
    color: white;
    background-color:blue;
    text-decoration: none;
    cursor: pointer;
  }
.botun1 {
    color: #aaeeff;
    background-color:darkgreen;
    border: 3px solid #22ddbb;
    border-radius:10px;
    padding: 25px;
    width:180px;
    font-size: 24px;
    font-weight: bold;
  }
  .botun1:hover {  
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  }
  .botun1:hover,
  .botun1:focus {
    color: yellow;
    background-color:green;
    text-decoration: none;
    cursor: pointer;
  }
</STYLE>
</head>

<body onload='uvod()'>
<h2><font color='Blue'>Pretvaranje jedinica za duljinu - vježbe </font></h2>
<p>UPUTA. Kad kliknete na tipku KRENI! u lijevom okviru dobijete zadatak u žutom pravokutniku koji se polako spušta dolje. Izaberite jedan od četiri ponuđena odgovora. 
<br>Kada se žuti pravokutnik spusti izvan okvira, dolazi novi zadatak. Imate ukupno <b><font color='Blue'>10 zadataka</font></b>, nakon čega  u desnom okviru dobijete popis rezultata.
<p>Kada želite novi ispit, kliknite na tipku NOVO.
<table id='tbl'>
<tr>
<td valign='top' width='40%' border='10px'><canvas id="slika" width="500" height="500" style='border:4px solid #000044;'></canvas></td>
<td valign='top' width='35%' border='10px'>

<FORM name="forma">
<script>
var a=0;
var b=[];
var c=[];
var odg=[];
var k=0;
var r=0;
var bodovi=0;
var krenulo=0;
var odgovoreno=0;
var polozaj = 0;
var tocno='';
var redni=0;
var rez=[];
var tablica=document.getElementById("tbl");

rez[1]="Neriješeno";rez[2]="Neriješeno";rez[3]="Neriješeno";rez[4]="Neriješeno";rez[5]="Neriješeno";
rez[6]="Neriješeno";rez[7]="Neriješeno";rez[8]="Neriješeno";rez[9]="Neriješeno";rez[10]="Neriješeno";

document.write("<p><input type='button' class='botun' id='bot0' value=' ' onclick='provjeri(this.id)'>");
document.write("<p><input type='button' class='botun' id='bot1' value=' ' onclick='provjeri(this.id)'>");
document.write("<p><input type='button' class='botun' id='bot2' value=' ' onclick='provjeri(this.id)'>");
document.write("<p><input type='button' class='botun' id='bot3' value=' ' onclick='provjeri(this.id)'>");
document.write("_____________________________________________");
document.write("<p><input type='button' class='botun1' id='bot' value='KRENI!' onclick='kreni()'>");
document.write("  <input type='button' class='botun1' id='bot' value='NOVO' onclick='location.reload()'>");

function uvod(){    
 var slika = document.getElementById("slika");
 var ctx = slika.getContext("2d");

 ctx.clearRect(0, 0,500, 500);
 tablica.rows[0].cells[2].style.fontWeight="bold";
 tablica.rows[0].cells[2].style.textAlign="left";
 tablica.rows[0].cells[2].style.fontSize="20px"; 
 tablica.rows[0].cells[2].style.color="blue"; 
}

function ponovi(){
   odgovoreno=0;
   document.getElementById('bot0').style.backgroundColor = 'darkblue'; 
   document.getElementById('bot1').style.backgroundColor = 'darkblue'; 
   document.getElementById('bot2').style.backgroundColor = 'darkblue'; 
   document.getElementById('bot3').style.backgroundColor = 'darkblue'; 
   a=2+Math.round(10*Math.random());
   b=['mm','cm','dm','km','m'];
   c=['metara','metara','milimetara','decimetara','centimetara'];
   k=Math.round(4*Math.random());
   switch(k){
    case 0: //mm u m
      odg[0]=a/1000;
      odg[1]=a/100;
      odg[2]=a*10;
      odg[3]=a/10;
      break; 
   case 1: //cm u m
      odg[0]=a/100;
      odg[1]=a*10;
      odg[2]=a*100;
      odg[3]=a/10;
      break; 
  case 2:  //dm u mm
      odg[0]=a*100;
      odg[1]=a/10;
      odg[2]=a*10;
      odg[3]=a/100;
      break; 
  case 3: //km u dm
      odg[0]=a*10000;
      odg[1]=a*1000;
      odg[2]=a*100;
      odg[3]=a*10;
      break; 
  case 4: //m u cm
      odg[0]=a*100;
      odg[1]=a/10;
      odg[2]=a*10;
      odg[3]=a/100;
      break; 
  }

   var opseg=3;
   var n=[];
   //miješanje 4 redna broja, u rasponu od n=0 do n=opseg   
   while(n.length<=opseg){
     r=Math.round(Math.random()*opseg);
     if(n.indexOf(r)===-1) n.push(r);
   }
   document.getElementById('bot0').value=odg[n[0]];
   document.getElementById('bot1').value=odg[n[1]];
   document.getElementById('bot2').value=odg[n[2]];
   document.getElementById('bot3').value=odg[n[3]];
   redni=redni+1;
}

function kreni(){
   clearInterval(interv1);
   redni=0;
   tablica.rows[0].cells[2].innerText="Rezultati:\n_________________";
   document.getElementById('bot0').value="";
   document.getElementById('bot1').value="";
   document.getElementById('bot2').value="";
   document.getElementById('bot3').value="";

   if(krenulo==1) {alert("Već smo krenuli!\nZa novi ispit pritisni NOVO!");}
   krenulo=1;
   var slika = document.getElementById("slika");
   var ctx1 = slika.getContext("2d");  
   ctx1.clearRect(0, 0,500, 500);
   ponovi(); 
   redni=1;
   var pocetak = function () {
     if (polozaj > 500) {
       polozaj = 0;
       ponovi();
     }
     if(redni>10){
       krenulo=0;
       clearInterval(interv1);
       tablica.rows[0].cells[2].innerText="REZULTATI:"+"\n________________________"+"\n1. zadatak: "+rez[1]+"\n2. zadatak: "+rez[2]+"\n3. zadatak: "+rez[3]+"\n4. zadatak: "+rez[4]+"\n5. zadatak: "+rez[5]+"\n6. zadatak: "+rez[6]+"\n7. zadatak: "+rez[7]+"\n8. zadatak: "+rez[8]+"\n9. zadatak: "+rez[9]+"\n10. zadatak: "+rez[10]+"\n_______________________"+"\nTočno riješeno zadataka: "+bodovi;
     ctx.clearRect(0,0,500,500);
     }
     polozaj=polozaj+3; 
     ctx1.lineWidth = 3;
     ctx1.fillStyle = "Gold";
     ctx1.clearRect(0,0,500,500);
     ctx1.strokeStyle = "Green";
     ctx1.fillRect(90,polozaj,320,70);
     ctx1.strokeRect(90,polozaj,320,70);
     ctx1.stroke();
     ctx1.fillStyle = "Blue";
     ctx1.font = "20px Arial";
     ctx1.fillText("Koliko ima "+c[k]+" u "+a+" "+ b[k]+"?", 120, polozaj+40);
     ctx1.fillStyle = "Blue";
     ctx1.font = "30px Arial";
     ctx1.fillText(redni+". zadatak: ", 90, polozaj-10);  
   }
   var interv1 = setInterval(pocetak,120);
}

function provjeri(obj){ 
  if(odgovoreno==1) {alert("Ovo pitanje je već odgovoreno");return;}
  if(krenulo==0) {alert("Pritisni tipku KRENI!");return;}
  else{
    odgovoreno=1;
    if(document.getElementById(obj).value==odg[0])
      {alert("TOČNO");bodovi++;
      document.getElementById(obj).style.backgroundColor = 'green';
      rez[redni]="TOČNO!";
      tablica.rows[0].cells[2].innerText=redni+". zadatak: TOČNO!\n";
      return;}
    else 
      {alert("POGREŠNO");
      document.getElementById(obj).style.backgroundColor = 'red';
      tablica.rows[0].cells[2].innerText=redni+". zadatak: POGREŠNO!\n";
      rez[redni]="POGREŠNO!";
      return;}
  }
}

</script>
</FORM>
</td>
<td valign='top' width='35%'>
</td>
</tr>
</table>

</body>
</html>