<!DOCTYPE HTML>
<html>
<head>
  <title>Pitagorin poucak 2</title>

<STYLE TYPE="text/css">
.radical {
    position: relative;
    font-size: 1.6em;
    vertical-align: middle;
}
.n-root {
    position: absolute;
    top: -0.333em;
    left: 0.333em;
    font-size: 45%;
}
.radicand { 
    padding: 0.25em 0.25em;
    border-top: thin black solid;
}
.botun {
    color: #66aadd;
    background-color:#112266;
    border: 3px solid #22aadd;
    border-radius:10px;
    padding: 10px;
    width:120px;
    font-size: 15px;
    font-weight: bold;
  }
  .botun:hover {  
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  }
  .botun:hover,
  .botun:focus {
    color: yellow;
    text-decoration: none;
    cursor: pointer;
  }
</STYLE>

</head>
<body bgcolor="#aabbcc">
<h2>Pitagorin poučak - pravokutni trokut</h2>
<canvas id="okvir1" width="200" height="160"></canvas>

<script>
var hipotenuza=new Array("x","2x","4y","x+2","y+3","z+1");
var kateta1=new Array("6","10","12","x","8","16");
var kateta2=new Array("8","24","16","x+1","15","30");
var c = document.getElementById("okvir1");
var ctx = c.getContext("2d");

//miješanje rednih brojeva, u rasponu od 0 do 5
var z = []
while(z.length<5){
    var r = Math.floor(Math.random()*5);
    if(z.indexOf(r) === -1) z.push(r);
}

ctx.moveTo(0,100);
ctx.lineTo(130,100);
ctx.lineTo(130,0);
ctx.lineTo(0,100);
ctx.stroke();

ctx.font='15px Arial';
ctx.fillText(hipotenuza[z[1]],50,40);
ctx.fillText(kateta1[z[1]],140,60);
ctx.fillText(kateta2[z[1]],60,120);
</script>
<p>

<FORM NAME = "forma1">
<ol>
<script>
var kradio1=0, kradio2=0, kradio3=0, tocno1, tocno2, tocno3;
slovo = new Array();
slovo[0] = "a) ";
slovo[1] = "b) ";
slovo[2] = "c) ";
odgovor1=new Array();
odgovor1[0]="("+hipotenuza[z[1]]+")<sup>2</sup> = "+"("+kateta1[z[1]]+")<sup>2</sup> + "+"("+kateta2[z[1]]+")<sup>2</sup>";
odgovor1[1]="("+hipotenuza[z[0]]+")<sup>2</sup> = "+"("+kateta1[z[1]]+"y)<sup>2</sup> + "+"("+kateta2[z[2]]+")<sup>2</sup>";
odgovor1[2]="("+hipotenuza[z[1]]+")<sup>2</sup> = "+"("+kateta1[z[0]]+")<sup>2</sup> + "+"("+kateta2[z[1]]+")<sup>2</sup>";
odgovor2=new Array();
odgovor2[0]="<div class='eq-c'>"+hipotenuza[z[1]]+" = <span class='radical'>&radic;</span><span class='radicand'>("+kateta1[z[1]]+")<sup>2</sup> + ("+kateta2[z[1]]+")</span><sup>2</sup></div>";
odgovor2[1]="<div class='eq-c'>"+hipotenuza[z[2]]+" = <span class='radical'>&radic;</span><span class='radicand'>("+kateta1[z[2]]+")<sup>2</sup> + ("+kateta2[z[2]]+")</span><sup>2</sup></div>";
odgovor2[2]="<div class='eq-c'>"+hipotenuza[z[0]]+" = <span class='radical'>&radic;</span><span class='radicand'>("+kateta1[z[0]]+")<sup>2</sup> + ("+kateta2[z[0]]+")</span><sup>2</sup></div>";
odgovor3=new Array();
odgovor3[0]="<div class='eq-c'>"+kateta1[z[1]]+"=<span class='radical'>&radic;</span><span class='radicand'>(2y)<sup>2</sup> - "+kateta2[z[1]]+"</span><sup>2</sup></div>";
odgovor3[1]="<div class='eq-c'>"+kateta1[z[0]]+"=<span class='radical'>&radic;</span><span class='radicand'>3x<sup>2</sup> - "+kateta2[z[0]]+"<sup>2</sup></span></div>";
odgovor3[2]="<div class='eq-c'>"+kateta1[z[2]]+"=<span class='radical'>&radic;</span><span class='radicand'>(2y)<sup>2</sup> - "+kateta2[z[2]]+"<sup>2</sup></span></div>";

function provjeri(form){
  var bodovi = 0;
  if (document.forma1.izbor1[kradio1].checked) 
     {alert("1. Ispravno!")
     bodovi = bodovi + 1} 
    else 
  alert("1. Pogrešno! Odgovor je: "+tocno1);
   if (document.forma1.izbor2[kradio2].checked) 
     {alert("2. Ispravno!") 
     bodovi = bodovi + 1} 
    else 
  alert("2. Pogrešno! Odgovor je: "+tocno2);
   if (document.forma1.izbor3[kradio3].checked) 
      {alert("3. Ispravno!") 
      bodovi = bodovi + 1} 
    else 
  alert("3. Pogrešno! Odgovor je: "+tocno3);
  alert ("ukupan broj bodova: " + bodovi + "\n");
  location.href="mat8-pitagora1.htm";
}

document.write("<BR><li>Napišite formulu Pitagorina poučka za trokut na slici: ");  
// prvo pitanje
//miješanje rednih brojeva, 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);
}
for(i=0;i<3;i++){
if(s[i]==0) {kradio1=i;tocno1=slovo[i];}
document.write("<BR><INPUT TYPE='radio' NAME='izbor1' VALUE=''> " + slovo[i] + odgovor1[s[i]]);
}
document.write("<p>")

document.write("<BR><li>Kako bi glasila formula za računanje hipotenuze trokuta na slici: ");  
// drugo pitanje
//miješanje rednih brojeva, 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);
}
for(i=0;i<3;i++){
if(s[i]==0) {kradio2=i;tocno2=slovo[i];}
document.write("<BR><INPUT TYPE='radio' NAME='izbor2' VALUE=''> " + slovo[i] + odgovor2[s[i]]);
}
document.write("<p>")

document.write("<BR><li>Kako biste izračunali duljinu manje katete trokuta na slici: ");  
// trece pitanje
//miješanje rednih brojeva, 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);
}
for(i=0;i<3;i++){
if(s[i]==0) {kradio3=i;tocno3=slovo[i];}
document.write("<BR><INPUT TYPE='radio' NAME='izbor3' VALUE=''> " + slovo[i] + odgovor3[s[i]]);
}
document.write("<p>")

</script>
</ol>
</FORM>

<FORM>
<br><INPUT TYPE="button" VALUE="Provjeri" class="botun" onClick="provjeri(forma1)">
</FORM>

</body>
</html>