<html>
<head><title>Razlomci - uvod</title>  
<style>
  .prov{
  background:#aaaaff;
  width:150px;
  font-size:15px;
  font-weight: bold;
  padding:10px;
  }
 .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;}
 }
</style>
<script>
var n,k,broj1;
n=0;k=0;broj1=0;
n=Math.round(4*Math.random());
var naz=[2,3,6,9,18];
var naz1,broj1,raz1,naz2;
do{
broj1=1+Math.round(16*Math.random());
}while(broj1>=naz[n]);
naz1=naz[n];
k=2+Math.round(10*Math.random());
naz2=k*naz1;
raz1="<b><font size='5' color='red'><div class='razlomak'><span>"+broj1+"</span><span class='dolje'>"+naz1+"</span></div></font></b>";
odg1=new Array;
odg1[0]="<div class='razlomak'><span>"+eval(naz1-broj1)+"</span><span class='dolje'>"+naz1+"</span></div>";
odg1[1]="<div class='razlomak'><span>"+broj1+"</span><span class='dolje'>"+eval(naz1+1)+"</span></div>";
odg1[2]="<div class='razlomak'><span>"+eval(broj1+1)+"</span><span class='dolje'>"+eval(naz1+1)+"</span></div>";
odg2=new Array;
odg2[0]="<div class='razlomak'><span>"+eval(k*broj1)+"</span><span class='dolje'>"+naz2+"</span></div>";
odg2[1]="<div class='razlomak'><span>"+eval(naz1+naz2)+"</span><span class='dolje'>"+naz2+"</span></div>";
odg2[2]="<div class='razlomak'><span>"+eval(naz2+1)+"</span><span class='dolje'>"+naz2+"</span></div>";

var poruka=[];
var brojnik=(18/naz1)*broj1;
function provjeri(form){
if(klikovi==brojnik) poruka[0]="1. Ispravno"; else poruka[0]="1. Pogrešno";
if (document.forma1.izbor1[radio1].checked) 
     poruka[1]="2. Ispravno!";
    else poruka[1]="2. Pogrešno!";
  if (document.forma1.izbor2[radio2].checked) 
     poruka[2]="3. Ispravno!";
    else poruka[2]="3. Pogrešno!";
  alert(poruka[0]+"\n"+poruka[1]+"\n"+poruka[2]+"\n___________");
}

</script>
</head>

<body bgcolor="#feeacb">
<form name="forma1">
<table>
<tr>
<td valign="top">
<b><center><p>MATEMATIKA 5.
<p>RAZLOMCI</center></b>
<p>ZADATAK 1: Zadani razlomak prikažite pomoću nacrtanog pravokutnika!
<p><center><script>
document.write(raz1);
</script>
<p>UPUTA: Polja možete obojiti tako da kliknete mišem na njih! Jednom obojeno polje ne možete vratiti, možete samo odabrati naredbu NOVO.
</center>

<script>
var radio1,tocno1;
//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);
}

if(s[0]==0) radio1=0;tocno1="a)";
if(s[1]==0) radio1=1;tocno1="b)";
if(s[2]==0) radio1=2;tocno1="c)";

document.write("<br>ZADATAK 2: Za koliko je taj razlomak manji od 1:");
document.write("<BR><INPUT TYPE='radio' NAME='izbor1' VALUE=''> a) "+odg1[s[0]]);
document.write("<BR><INPUT TYPE='radio' NAME='izbor1' VALUE=''> b) "+odg1[s[1]]);
document.write("<BR><INPUT TYPE='radio' NAME='izbor1' VALUE=''> c) "+odg1[s[2]]);

var radio2,tocno2;
//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);
}

if(s[0]==0) radio2=0;tocno2="a)";
if(s[1]==0) radio2=1;tocno2="b)";
if(s[2]==0) radio2=2;tocno2="c)";

document.write("<br>ZADATAK 3: Zapiši ovaj razlomak s nazivnikom "+naz2);
document.write("<BR><INPUT TYPE='radio' NAME='izbor2' VALUE=''> a) "+odg2[s[0]]);
document.write("<BR><INPUT TYPE='radio' NAME='izbor2' VALUE=''> b) "+odg2[s[1]]);
document.write("<BR><INPUT TYPE='radio' NAME='izbor2' VALUE=''> c) "+odg2[s[2]]);
</script>
</td>

<td valign="top">
<script>
var podjela=50;
var brojx=8; // 400/50
var brojy=6; // 300/50
var klikovi=0;

function prav_klik(evt){
var pravokutnik = evt.target;
if (pravokutnik.getAttribute("fill")=="white"){
 pravokutnik.setAttribute("fill", "red");
 klikovi=klikovi+1;}
}

document.write("<svg width='400' height='300'>");
document.write("<rect x='0' y='0' width='300' height='120' fill='#faa' stroke-width='2' stroke='black' />");

for(j=0;j<3;j++){
  for(i=0;i<6;i++){
  document.write("<rect fill='white' stroke-width='3' stroke='#a0a' x='"+podjela*i+"'y='"+podjela*j+"' width='50' height='50' onclick='prav_klik(evt)' />");
  }
}

document.write("</svg>");
</script>

<P><input type="button" value="Provjeri" class="prov" onclick="provjeri(form)">
<input type="button" value="Novo" class="prov" onclick="location.reload()">

</td>
</tr>
</table>
</form>
</body>
</html>