<!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">Spajanje otpornika</font></h2>
- SERIJSKI SPOJ -</center>
<form name="forma">
<p>ZADATAK 1: Zadan je serijski spoj otpornika s podacima kao na slici. Odredite njihov ukupan otpor! 
<br><input type="text" value="" name="tekst1" size=10> &#937;
<p>ZADATAK 2: Izrazite njihov ukupan otpor u kiloomima: 
<br><input type="text" value="" name="tekst2" size=10> k&#937;
<p>ZADATAK 3: Ako svaki otpor povećamo dva puta, koliki bi bio ukupan otpor: 
<br><input type="text" value="" name="tekst3" size=10> &#937;
</form>
</td>
<td valign="top"><canvas id="okvir" width="400" height="240"></canvas></td>
<script>
  var R1,R2,R3,R;
  R1=10+Math.round(20*Math.random());
  R2=11+Math.round(22*Math.random());
  R3=12+Math.round(21*Math.random());
  R=R1+R2+R3;
  var canvas = document.getElementById('okvir');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle='#000000';
  ctx.moveTo(55,180); ctx.lineTo(55,65);ctx.lineTo(340,65);ctx.lineTo(340,180);ctx.stroke();
  //prvi otpornik    
  var x1,y1; //koordinate prve točke gore lijevo na pravokutniku
  x1=80,y1=50;
  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+5,y1-5)
 
  ctx.font = "10px Arial";
  ctx.fillText("1",x1+15,y1-5)
  ctx.font = "15px Arial";
  ctx.fillText("= "+R1+String.fromCharCode(0x03A9),x1+25,y1-5) 

  //drugi otpornik
  x1=160,y1=50;
  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+5,y1-5)
 
  ctx.font = "10px Arial";
  ctx.fillText("2",x1+15,y1-5)
  ctx.font = "15px Arial";
  ctx.fillText("= "+R2+String.fromCharCode(0x03A9),x1+25,y1-5) 
  
  //treći otpornik
  x1=240,y1=50;
  ctx.fillStyle='#ffffff';
  ctx.fillRect(x1,y1,70,30); // prazni pravokutnik
  ctx.fillStyle='#000000';
  ctx.strokeRect(x1,y1,70,30); // puni bijeli pravokutnik
  ctx.font = "15px Arial";
  ctx.fillText("R",x1+5,y1-5)
 
  ctx.font = "10px Arial";
  ctx.fillText("3",x1+15,y1-5)
  ctx.font = "15px Arial";
  ctx.fillText("= "+R3+String.fromCharCode(0x03A9),x1+25,y1-5)

var poruka=[];
function provjeri(){
if (forma.tekst1.value==R) poruka[0]="\n1. točno"; else poruka[0]="\n1. pogrešno, ukupan otpor je: "+R+String.fromCharCode(0x03A9);
if (forma.tekst2.value==R/1000) poruka[1]="\n2. točno"; else poruka[1]="\n2. pogrešno, ukupan otpor je: "+R/1000+" k"+String.fromCharCode(0x03A9);
if (forma.tekst3.value==2*R) poruka[2]="\n3. točno"; else poruka[2]="\n3. pogrešno, ukupan otpor je tada: "+2*R+String.fromCharCode(0x03A9);
alert("REZULTATI:"+poruka[0]+poruka[1]+poruka[2]);
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>