<!DOCTYPE HTML>
<html>
<head>
<style>
canvas{
background-color:#bbeeff;
border: 2px solid #6688ee;
}
/* Botun provjeri */
.botun {
    color: #66aadd;
    background-color:darkblue;
    border: 3px solid #22bbdd;
    padding: 10px;
    width:120px;
    font-size: 15px;
    font-weight: bold;
}
.botun:hover,
.botun:focus {
    color: yellow;
    text-decoration: none;
    cursor: pointer;
}
</style>
</head>

<body>
<table>
<tr>
<td valign="top">
<center><h2><font color="red">Ohmov zakon</font>
</h2>
<b>- Paralelni spoj otpornika -</b></center>
<form name="forma">

<p>ZADATAK: Zadan je paralelni spoj dvaju otpornika s jednom baterijom. Podaci su prikazani na slici. 
<p>a) Kolika struja teče kroz otpornik R<sub>1</sub>?
<br><input type="text" value="" name="tekst1" size=10> A
<p>b) Kolika struja teče kroz otpornik R<sub>2</sub>? 
<br><input type="text" value="" name="tekst2" size=10> A
<p>c) Kolika je ukupna struja u krugu? 
<br><input type="text" value="" name="tekst3" size=10> A
<p>d) Izračunajte ukupan otpor strujnog kruga? 
<br><input type="text" value="" name="tekst4" size=10> &#937;
<p><i>Napomena: Rezultat po potrebi zaokružite na dvije decimale!</i>
</form>
</td>
<td valign="top"><canvas id="okvir" width="300" height="340"></canvas></td>
<script>
  var R,R1,R2,m,n,I,U,I1,I2;
  m=1+Math.round(3*Math.random());
  n=2+2*Math.round(20*Math.random());
  R1=120+120*Math.round(10*Math.random());
  R2=m*R1;
  R=m*R1/(m+1);
  n=Math.round(100*n/10)/100;
  I=Math.round(100*n/10)/100;
  U=Math.round(100*I*R)/100;
  I1=Math.round(100*U/R1)/100;
  I2=Math.round(100*U/R2)/100;

  var canvas = document.getElementById('okvir');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle='#000000';
  ctx.lineWidth=1;
  ctx.moveTo(55,220); ctx.lineTo(55,65);ctx.lineTo(240,65);ctx.lineTo(240,220);
  ctx.moveTo(55,220);ctx.lineTo(140,220); //spoj s baterijom
  ctx.moveTo(155,220);ctx.lineTo(240,220);
  ctx.moveTo(140,190);ctx.lineTo(140,250); //baterija plus
  ctx.moveTo(55,135);ctx.lineTo(240,135);
  ctx.stroke();
  
  ctx.beginPath();
  ctx.lineWidth=4; // baterija minus
  ctx.moveTo(155,210);ctx.lineTo(155,230);
  ctx.stroke();
  
  ctx.font="18px Arial";
  ctx.fillText("U = "+U+" V",110,270);
  ctx.fillText("R1 = "+R1+String.fromCharCode(0x03A9),110,295);
  ctx.fillText("R2 = "+R2+String.fromCharCode(0x03A9),110,320);
  ctx.fillText(String.fromCharCode(0x2190),65,210);
  ctx.fillText(" I = ?",70,190);

  ctx.font = "20px Arial";
  ctx.fillText
(String.fromCharCode(0x2190)+" I",65,60)
 
  ctx.font = "10px Arial";
  ctx.fillText
("1",97,60);

  ctx.font = "20px Arial";
  ctx.fillText
(String.fromCharCode(0x2190)+" I",65,130)
 
  ctx.font = "10px Arial";
  ctx.fillText
("2",97,130);
  
  //prvi otpornik    
  var x1,y1; //koordinate prve točke gore lijevo na pravokutniku
  x1=110,y1=50;
  ctx.lineWidth=1;
  ctx.fillStyle='#ffffff';
  ctx.fillRect(x1,y1,70,30); // puni bijeli pravokutnik
  ctx.fillStyle='#000000';
  ctx.strokeRect(x1,y1,70,30); // prazni pravokutnik
  ctx.font = "15px Arial";
  ctx.fillText
("R",x1+25,y1-5)
 
  ctx.font = "10px Arial";
  ctx.fillText
("1",x1+35,y1-5)
 
  //drugi otpornik
  x1=110,y1=120;
  ctx.fillStyle='#ffffff';
  ctx.fillRect(x1,y1,70,30); // puni bijeli pravokutnik
  ctx.fillStyle='#000000';
  ctx.strokeRect(x1,y1,70,30); // prazni pravokutnik
  ctx.font = "15px Arial";
  ctx.fillText
("R",x1+25,y1-5)
 
  ctx.font = "10px Arial";
  ctx.fillText
("2",x1+35,y1-5)
    
  
var poruka=[];
function provjeri(){
if (forma.tekst1.value==I1) poruka[0]="\n1. točno"; else poruka[0]="\n1. pogrešno, struja kroz R1 je: "+I1+" A";
if (forma.tekst2.value==I2) poruka[1]="\n2. točno"; else poruka[1]="\n2. pogrešno, struja kroz R2 je: "+I2+" A";
if (forma.tekst3.value==I/2) poruka[2]="\n3. točno"; else poruka[2]="\n3. pogrešno, ukupna struja je: I = "+I+" A";
if (forma.tekst4.value==I/2) poruka[2]="\n3. točno"; else poruka[3]="\n3. pogrešno, ukupan otpor je: R = "+R+String.fromCharCode(0x03A9);
alert("REZULTATI:"+poruka[0]+poruka[1]+poruka[2]+poruka[3]);
location.reload();
}
</script>
</td></tr>
</table>
<p><b>Pritiskom na tipku 'Provjeri', dobit ćete rezultate i zatim novi ispit s istim zadacima, ali s drugim brojevima.</b>
<center><p><INPUT TYPE="button" class="botun" VALUE="PROVJERI!" onClick="provjeri(forma)"> </center>
</body>
</html>