<!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>- Serijski spoj otpornika -</b></center>
<form name="forma">

<p>ZADATAK: Zadan je serijski spoj dvaju otpornika s jednom baterijom. Podaci su prikazani na slici. 
<p>a) Odredite ukupan otpor u ovom krugu.
<br>R = <input type="text" value="" name="tekst1" size=10> &#937;
<p>d) Kolika ukupna struja teče ovim strujnim krugom?
<br>I = <input type="text" value="" name="tekst2" size=10> A
<p>b) Koliki je napon na otporniku R<sub>1</sub>? 
<br>U<sub>1</sub> = <input type="text" value="" name="tekst3" size=10> V
<p>c) Koliki je napon na otporniku R<sub>2</sub>?
<br>U<sub>2</sub> = <input type="text" value="" name="tekst4" size=10> V
</form>
</td>
<td valign="top"><canvas id="okvir" width="300" height="320"></canvas></td>
<script>
  var R,R1,R2,k,I,U,U1,U2;
  R1=10+10*Math.round(10*Math.random());
  R2=10+20*Math.round(10*Math.random());
  R=R1+R2;
  k=1.5*(2+2*Math.round(20*Math.random()));
  k=Math.round(100*k/10)/100;
  I=Math.round(100*k/10)/100;
  U=Math.round(1000*I*R/10)/100;
  U1=Math.round(1000*I*R1)/1000;
  U2=Math.round(1000*I*R2)/1000;

  var canvas = document.getElementById('okvir');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle='#000000';
  ctx.lineWidth=1;
  ctx.moveTo(35,180); ctx.lineTo(35,65);ctx.lineTo(260,65);ctx.lineTo(260,180);
  ctx.moveTo(35,180);ctx.lineTo(140,180);
  ctx.moveTo(155,180);ctx.lineTo(260,180);
  ctx.moveTo(140,150);ctx.lineTo(140,210);
  ctx.stroke();
  
  ctx.beginPath();
  ctx.lineWidth=4; // baterija minus
  ctx.moveTo(155,165);ctx.lineTo(155,195);
  ctx.stroke();

  ctx.font="20px Arial";
  ctx.fillText("U = "+U+" V",110,240);
  ctx.fillText("R  = "+R1+String.fromCharCode(0x03A9),110,265);
  ctx.fillText("R  = "+R2+String.fromCharCode(0x03A9),110,290);
  ctx.fillText(String.fromCharCode(0x2190),80,170);
  ctx.fillText(" I = ?",70,150);
  ctx.font = "15px Arial";
  ctx.fillText
("1",123,265);
  ctx.fillText
("2",123,290);
  
  //prvi otpornik    
  var x1,y1; //koordinate prve točke gore lijevo na pravokutniku
  x1=60,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
("R1",x1+25,y1-5);

  //drugi otpornik    
  var x1,y1; //koordinate prve točke gore lijevo na pravokutniku
  x1=165,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
("R2",x1+25,y1-5);
  
var poruka=[];
function provjeri(){
if (forma.tekst1.value==R) poruka[0]="\n1. točno"; else poruka[0]="\n1. pogrešno, ukupna otpor je: "+R+String.fromCharCode(0x03A9);
if (forma.tekst2.value==I) poruka[1]="\n3. točno"; else poruka[1]="\n4. pogrešno, ukupna struja je I = "+I+" A";
if (forma.tekst3.value==U1) poruka[2]="\n2. točno"; else poruka[2]="\n2. pogrešno, napon na prvom otporniku, U1 = "+U1+" V";
if (forma.tekst4.value==U2) poruka[3]="\n3. točno"; else poruka[3]="\n3. pogrešno, napon na drugom otporniku, U2 = "+U2+" V";

alert("REZULTATI:"+poruka[0]+poruka[1]+poruka[2]+poruka[3]);
location.reload();
}
</script>
</td></tr>
</table>
<p>Napomena: Rezultat po potrebi zaokružite na dvije decimale!
<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>