<!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>- Jednostavni strujni krug -</b></center>
<form name="forma">

<p>ZADATAK 1: Zadan je jednostavni strujni krug s jednim otpornikom i baterijom. Podaci su prikazani na slici. Odredite struju u krugu.
<br><input type="text" value="" name="tekst1" size=10> A
<p>ZADATAK 2: Izrazite struju u miliamperima: 
<br><input type="text" value="" name="tekst2" size=10> mA
<script>
var n=2+Math.round(3*Math.random());
document.write("<p>ZADATAK 3: Ako vrijednost otpora povećamo "+n+" puta, kolika bi tada bila struja u krugu?"); 
document.write("<br><input type='text' value='' name='tekst3' size=10> mA");
</script>
</form>
</td>
<td valign="top"><canvas id="okvir" width="300" height="300"></canvas></td>
<script>
  var R,k,I,U;
  R=20+20*Math.round(10*Math.random());
  k=1.5*(3+3*Math.round(20*Math.random()));
  k=Math.round(10*k)/100;
  I=Math.round(100*k)/1000;
  U=Math.round(1000*I*R)/1000;

  var canvas = document.getElementById('okvir');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle='#000000';
  ctx.lineWidth=1;
  ctx.moveTo(55,180); ctx.lineTo(55,65);ctx.lineTo(240,65);ctx.lineTo(240,180);
  ctx.moveTo(55,180);ctx.lineTo(140,180);
  ctx.moveTo(155,180);ctx.lineTo(240,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(String.fromCharCode(0x2190),80,170);
  ctx.fillText(" I = ?",70,150);
  
  
  //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+10,y1-5);
  ctx.fillText(" = "+R+String.fromCharCode(0x03A9),x1+20,y1-5); 
  
var poruka=[];
function provjeri(){
if (forma.tekst1.value==I) poruka[0]="\n1. točno"; else poruka[0]="\n1. pogrešno, struja u krugu je: "+I+" A";
if (forma.tekst2.value==I*1000) poruka[1]="\n2. točno"; else poruka[1]="\n2. pogrešno, struja u miliamperima je: "+I*1000+" mA";
if (forma.tekst3.value==Math.round(10000*I/n)/10) poruka[2]="\n3. točno"; else poruka[2]="\n3. pogrešno, struja bi se smanjila "+n+" puta, I = "+Math.round(10000*I/n)/10+" mA";
alert("REZULTATI:"+poruka[0]+poruka[1]+poruka[2]);
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>