<!DOCTYPE HTML>
  <head><title>Razlomci - uvod</title>  
  <style>
 .razlomak {
   display: inline-block;
   position: relative;
   vertical-align: middle;
   margin: 0 0.2em 0.4ex;
   letter-spacing: 0.001em;
   text-align: center;
 }
 .razlomak span {
   display: block;
   padding-top: 0.15em;
 }
 .razlomak span.dolje {border-top: thin solid black;
 .razlomak span.bar {display: none;}
 }

  .botun {
    color: #66aadd;
    background-color:#112266;
    border: 3px solid #22aadd;
    border-radius:10px;
    padding: 10px;
    width:120px;
    font-size: 15px;
    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: yellow;
    text-decoration: none;
    cursor: pointer;
  }
 
</style>
  </head>

<body>
<h2>Uvod u razlomke - vježba</h2>
UPUTA. U svakom zadatku za prepoznavanje razlomaka trebate odgovoriti na 4 pitanja. U svakom pitanju imate tri ponuđena odgovora od kojih je samo jedan točan!<p>
<canvas id="razl" width="300" height="200"></canvas>
<FORM name="forma1">

<script>
var m,sirina, visina, sirinap, visinap, broj,naz,broj1,naz1;
sirina=300; visina=200;
sirinap=0; visinap=0;
broj=0;naz=0;broj1=0;naz1=0;
poruka=new Array();
var canvas = document.getElementById('razl'); 
var ctx = canvas.getContext('2d');
ctx.strokeRect(0,0,sirina,visina); //okvir

boja=new Array("5","6","7","8","9","a","b","c","d","e","f");
var boja1;boja1="";
//miješanje rednih brojeva za boje, u rasponu od n=0 do 11
var n = []
while(n.length<=11){
    var r = Math.floor(Math.random()*11);
    n.push(r);
}
for(i=0;i<6;i++)
  boja1=boja1+boja[n[i]];
boja1="#"+boja1;

m=2+Math.floor(Math.random()*10);

//Euklidov algoritam za trazenje najveceg zajednickog djelitelja
function euklid(prvi,drugi){
var prvi,drugi,pomocni;
while(drugi!=0)
  {
  pomocni=prvi%drugi;
  prvi=drugi;
  drugi=pomocni;
  }
return prvi;
}

broj=1+Math.floor(Math.random()*10);
do{   
   naz=2*(2+Math.floor(Math.random()*7));}
while(broj==naz||broj>naz)

broj1=broj/euklid(broj,naz);
naz1=naz/euklid(broj,naz);

raz1=new Array;
raz1[0]="<div class='razlomak'><span>"+broj1+"</span><span class='dolje'>"+naz1+"</span></div>";
raz1[1]="<div class='razlomak'><span>"+broj+"</span><span class='dolje'>"+(naz+1)+"</span></div>";
raz1[2]="<div class='razlomak'><span>"+(broj+1)+"</span><span class='dolje'>"+(naz+2)+"</span></div>";

function razlomak(broj,naz){  
    ctx.fillStyle=boja1;
    sirinap=sirina/(naz/2);visinap=visina/2;   
    if(broj>naz/2){
       ctx.fillRect(0,0,(naz/2)*sirinap,visinap);
       ctx.fillRect(0,visinap,(broj-naz/2)*sirinap,visinap);
    }
    else{
       ctx.fillRect(0,0,broj*sirinap,visinap);
    }     
    ctx.moveTo(0,visinap);ctx.lineTo(sirina,visinap);
    for(i=0;i<naz;i++){
    ctx.moveTo(i*sirinap,0);ctx.lineTo(i*sirinap,visinap*2);  
    ctx.stroke();}        
}

//Zadatak1
document.write("<br>1. Koji je razlomak prikazan na slici?");
var radio1,tocno1;
radio1=0; tocno1=0;
slovo1=new Array();
slovo1[0] = "a) ";
slovo1[1] = "b) ";
slovo1[2] = "c) ";
razlomak(broj,naz);
//miješanje rednih brojeva za odgovore, u rasponu od 0 do 2
var s = []
while(s.length<=2){
    var r = Math.floor(Math.random()*3);
    if(s.indexOf(r) === -1) s.push(r);
}
for(i=0;i<3;i++){
if(s[i]==0) {radio1=i;tocno1=slovo1[i];}
document.write("<BR><INPUT TYPE='radio' NAME='izbor1' VALUE=''> "+slovo1[i]+raz1[s[i]]);
}

//Zadatak2
document.write("<br>2. Kako možemo napisati ovaj razlomak s nazivnikom "+m*naz1+"?");
var radio2,tocno2;
radio2=0; tocno2=0;
slovo2 = new Array();
slovo2[0] = "a) ";
slovo2[1] = "b) ";
slovo2[2] = "c) ";
raz2=new Array();
raz2[0]="<div class='razlomak'><span>"+m*broj1+"</span><span class='dolje'>"+m*naz1+"</span></div>";
raz2[1]="<div class='razlomak'><span>"+(m*broj1+1)+"</span><span class='dolje'>"+m*naz1+"</span></div>";
raz2[2]="<div class='razlomak'><span>"+(m*broj1+2)+"</span><span class='dolje'>"+m*naz1+"</span></div>";

//miješanje rednih brojeva za odgovore, u rasponu od 0 do 2
var s = []
while(s.length<=2){
    var r = Math.floor(Math.random()*3);
    if(s.indexOf(r) === -1) s.push(r);
}
for(i=0;i<3;i++){
if(s[i]==0) {radio2=i;tocno2=slovo2[i];}
document.write("<BR><INPUT TYPE='radio' NAME='izbor2' VALUE=''> "+slovo2[i]+raz2[s[i]]);
}

//Zadatak3
document.write("<br>3. Kako biste napisali ovaj razlomak s brojnikom "+(m+1)*broj1+"?");
var radio3,tocno3;
radio3=0; tocno3=0;
slovo3 = new Array();
slovo3[0] = "a) ";
slovo3[1] = "b) ";
slovo3[2] = "c) ";
raz3=new Array();
raz3[0]="<div class='razlomak'><span>"+(m+1)*broj1+"</span><span class='dolje'>"+(m+1)*naz1+"</span></div>";
raz3[1]="<div class='razlomak'><span>"+(m+1)*broj1+"</span><span class='dolje'>"+(m+2)*naz1+"</span></div>";
raz3[2]="<div class='razlomak'><span>"+(m+1)*broj1+"</span><span class='dolje'>"+m*naz1+"</span></div>";

//miješanje rednih brojeva za odgovore, u rasponu od 0 do 2
var s = []
while(s.length<=2){
    var r = Math.floor(Math.random()*3);
    if(s.indexOf(r) === -1) s.push(r);
}
for(i=0;i<3;i++){
if(s[i]==0) {radio3=i;tocno3=slovo3[i];}
document.write("<BR><INPUT TYPE='radio' NAME='izbor3' VALUE=''> "+slovo3[i]+raz3[s[i]]);
}

//Zadatak4
document.write("<br>4. Za koliko je ovaj razlomak manji od 1");
var radio4,tocno4;
radio4=0; tocno4=0;
slovo4 = new Array();
slovo4[0] = "a) za ";
slovo4[1] = "b) za ";
slovo4[2] = "c) za ";

raz4=new Array();
raz4[0]="<div class='razlomak'><span>"+(naz1-broj1)+"</span><span class='dolje'>"+naz1+"</span></div>";
raz4[1]="<div class='razlomak'><span>"+(naz1-broj1+1)+"</span><span class='dolje'>"+(naz1+1)+"</span></div>";
raz4[2]="<div class='razlomak'><span>"+(naz1-broj1+2)+"</span><span class='dolje'>"+(naz1+2)+"</span></div>";

//miješanje rednih brojeva za odgovore, u rasponu od 0 do 2
var s = []
while(s.length<=2){
    var r = Math.floor(Math.random()*3);
    if(s.indexOf(r) === -1) s.push(r);
}

for(i=0;i<3;i++){
if(s[i]==0) {radio4=i;tocno4=slovo4[i];}
document.write("<BR><INPUT TYPE='radio' NAME='izbor4' VALUE=''> "+slovo4[i]+raz4[i]);
}

function provjeri(form){  
  if (document.forma1.izbor1[radio1].checked) 
     poruka[0]="1. Ispravno!";
    else poruka[0]="1. Pogrešno!";
  if (document.forma1.izbor2[radio2].checked) 
     poruka[1]="2. Ispravno!";
    else poruka[1]="2. Pogrešno!";
  if (document.forma1.izbor3[radio3].checked) 
     poruka[2]="3. Ispravno!";
    else poruka[2]="3. Pogrešno!";
  if (document.forma1.izbor4[radio4].checked) 
     poruka[3]="4. Ispravno!";
    else poruka[3]="4. Pogrešno!";
  alert(poruka[0]+"\n"+poruka[1]+"\n"+poruka[2]+"\n"+poruka[3]);
  window.location.reload();
}

</script>
</FORM>

<FORM name="forma2">
<br><INPUT TYPE="button" class="botun" VALUE="Provjeri" onClick="provjeri(forma1)">
</FORM>

</body>
</html>