<!DOCTYPE HTML>
  <head><title>Koordinatni sustav</title>  
<style>
  .botun {
    color: #66aadd;
    background-color:#112266;
    border: 3px solid #44bbee;
    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>
<h2>Koordinatni sustav u ravnini</h2>
<TABLE><TR><TD valign='top'>
<canvas id="koord" width="500" height="500"></canvas>
<FORM name="forma1">
<script>
var velicina_mreze = 50; //razmak među mrežnim pravcima
var x_os_razmak_mrezni_pravci = 5;  //
var y_os_razmak_mrezni_pravci = 5;
var x_os_pocetna_tocka=0;
var y_os_pocetna_tocka=0;
var srediste_x,srediste_y;

var c = document.getElementById("koord");
var ctx = c.getContext("2d");

var okvir_sirina = c.width;  // širina okvira 
var okvir_visina = c.height;  // visina okvira

// broj vertikalnih mreznih pravaca
var broj_pravaca_x = Math.floor(okvir_visina/velicina_mreze);

// broj horizontalnih mreznih pravaca
var broj_pravaca_y = Math.floor(okvir_sirina/velicina_mreze);

// Crtaj pravce mreze po X-osi
for(var i=0; i<=broj_pravaca_x; i++) {
    ctx.beginPath();
    ctx.lineWidth = 1;
    
    // Ako pravac predstavlja X-os crtaj drugom bojom
    if(i == Math.floor(broj_pravaca_x/2)) 
        ctx.strokeStyle = "#000000";
    else
        ctx.strokeStyle = "#e9aae9";
    
    if(i == broj_pravaca_x) {
        ctx.moveTo(0, velicina_mreze*i);
        ctx.lineTo(okvir_sirina, velicina_mreze*i);
    }
    else {
        ctx.moveTo(0, velicina_mreze*i+0.5);
        ctx.lineTo(okvir_sirina, velicina_mreze*i+0.5);
    }
    ctx.stroke();
}

// Crtaj pravce mreze po Y-osi
for(i=0; i<=broj_pravaca_y; i++) {
    ctx.beginPath();
    ctx.lineWidth = 1;
    
    // Ako pravac predstavlja Y-os, crtaj drugom bojom
    if(i == Math.floor(broj_pravaca_x/2)) 
        ctx.strokeStyle = "#000000"
    else
        ctx.strokeStyle = "#e9aae9";
    
    if(i == broj_pravaca_y) {
        ctx.moveTo(velicina_mreze*i, 0);
        ctx.lineTo(velicina_mreze*i, okvir_visina);
    }
    else {
        ctx.moveTo(velicina_mreze*i+0.5, 0);
        ctx.lineTo(velicina_mreze*i+0.5, okvir_visina);
    }
    ctx.stroke();
}

// crtice po pozitivnoj X-osi
for(i=1; i<(broj_pravaca_y); i++) {
    
    // Tekst na toj tocki
    ctx.font = '11px Arial';
    ctx.textAlign = 'start';
    ctx.fillText(x_os_pocetna_tocka+i, velicina_mreze*i+okvir_sirina/2-3, okvir_visina/2-3);
}

// crtice po negativnoj X-osi
for(i=1; i<(broj_pravaca_y); i++) {

    // Tekst na toj tocki
    ctx.font = '11px Arial';
    ctx.textAlign = 'start';
    ctx.fillText(x_os_pocetna_tocka-i, okvir_sirina/2-velicina_mreze*i, okvir_visina/2-3);
}

// crtice po pozitivnoj Y-osi
for(i=1; i<broj_pravaca_x; i++) {
    
    // Tekst na toj tocki
    ctx.font = '11px Arial';
    ctx.textAlign = 'start';
    ctx.fillText(y_os_pocetna_tocka+i, okvir_sirina/2+3,okvir_visina/2-velicina_mreze*i);
}

// crtice po negativnoj Y-osi
for(i=1; i<broj_pravaca_x; i++) {

    // Tekst na toj tocki
    ctx.font = '11px Arial';
    ctx.textAlign = 'start';
    ctx.fillText(y_os_pocetna_tocka-i, okvir_sirina/2+3,okvir_visina/2+velicina_mreze*i);
}

//strelica na x-osi
//ctx.moveTo(okvir_sirina-15,okvir_visina/2-5);
//ctx.lineTo(okvir_visina-5,okvir_visina/2-5);

//strelica na y-osi
//ctx.moveTo(okvir_sirina/2-5, 10);
//ctx.lineTo(okvir_sirina/2,0);

//Crtaj nepoznatu točku A na slučajno izabranim koordinatama
ctx.beginPath();
ctx.fillStyle = "Red";
srediste_x=velicina_mreze*Math.round(8*Math.random()+1);
srediste_y=velicina_mreze*Math.round(7*Math.random()+1);
ctx.arc(srediste_x, srediste_y, 3, 0, (Math.PI/180)*360, false);
ctx.fill();
ctx.closePath();
ctx.font = '18px Arial';
ctx.fillText("A",srediste_x-3,srediste_y-10);

//koordinate točke A
var xA,yA;
xA=0;yA=0;
xA=srediste_x/velicina_mreze-(broj_pravaca_y/2);
yA=-srediste_y/velicina_mreze+(broj_pravaca_x/2);
</script>
</TD>
<TD valign='top'>
<script>
//Zadatak1
document.write("<P>Zadatak 1. Koje koordinate ima točka A na slici?");
var radio1,bodovi, tocno1;
radio1=0; bodovi=0; tocno1=0;
slovo = new Array();
slovo[0] = "a) ";
slovo[1] = "b) ";
slovo[2] = "c) ";

odgovori=new Array();
odgovori[0]="("+xA+", "+yA+")";
odgovori[1]="("+(xA-1)+", "+(-yA)+")";
odgovori[2]="("+(yA+1)+", "+xA+")";

//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) {radio1=i;tocno1=slovo[i];}
document.write("<BR><INPUT TYPE='radio' NAME='izbor1' VALUE=''> "+slovo[i]+odgovori[s[i]]);
}

document.write("<P>Zadatak 2. Koje koordinate ima točka B, osnosimetrična zadanoj točki A s obzirom na os x?");
//Zadatak2
var radio2,tocno2;
radio2=0; tocno2=0;
slovo2 = new Array();
slovo2[0] = "a) ";
slovo2[1] = "b) ";
slovo2[2] = "c) ";
odgovori2=new Array();
odgovori2[0]="("+xA+", "+(-yA)+")";
odgovori2[1]="("+(-xA-1)+", "+(-yA)+")";
odgovori2[2]="("+(yA-1)+", "+xA+")";

//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) {radio2=i;tocno2=slovo[i];}
document.write("<BR><INPUT TYPE='radio' NAME='izbor2' VALUE=''> "+slovo[i]+odgovori2[s[i]]);
}

document.write("<P>Zadatak 3. Koje koordinate ima točka C, osnosimetrična zadanoj točki A s obzirom na os y?");
//Zadatak3
var radio3,tocno3;
radio3=0; tocno3=0;
slovo3 = new Array();
slovo3[0] = "a) ";
slovo3[1] = "b) ";
slovo3[2] = "c) ";

odgovori3=new Array();
odgovori3[0]="("+(-xA)+", "+yA+")";
odgovori3[1]="("+(xA-1)+", "+(-yA)+")";
odgovori3[2]="("+(yA+1)+", "+xA+")";

//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) {radio3=i;tocno3=slovo3[i];}
document.write("<BR><INPUT TYPE='radio' NAME='izbor3' VALUE=''> "+slovo3[i]+odgovori3[s[i]]);
}

document.write("<P>Zadatak 4. Koje koordinate ima točka D, osnosimetrična zadanoj točki A s obzirom na ishodište?");
//Zadatak4
var radio4,tocno4;
radio4=0; tocno4=0;
slovo4 = new Array();
slovo4[0] = "a) ";
slovo4[1] = "b) ";
slovo4[2] = "c) ";

odgovori4=new Array();
odgovori4[0]="("+(-xA)+", "+(-yA)+")";
odgovori4[1]="("+(xA+1)+", "+(-yA)+")";
odgovori4[2]="("+(yA-1)+", "+xA+")";

//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) {radio4=i;tocno4=slovo4[i];}
document.write("<BR><INPUT TYPE='radio' NAME='izbor4' VALUE=''> "+slovo4[i]+odgovori4[s[i]]);
}

document.write("<P>Zadatak 5. Kolika je udaljenost zadane točke A od točke B koja joj je osnosimetrična s obzirom na os x?");
//Zadatak5
var radio5,tocno5;
radio5=0; tocno5=0;
slovo5 = new Array();
slovo5[0] = "a) ";
slovo5[1] = "b) ";
slovo5[2] = "c) ";

odgovori5=new Array();
odgovori5[0]= 2*Math.abs(yA);
odgovori5[1]= Math.abs(xA)+2*Math.abs(yA)+2;
odgovori5[2]= Math.abs(xA)+2*Math.abs(yA)+1;

//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) {radio5=i;tocno5=slovo5[i];}
document.write("<BR><INPUT TYPE='radio' NAME='izbor5' VALUE=''> "+slovo5[i]+odgovori5[s[i]]);
}

document.write("<P>Zadatak 6. Kolika je udaljenost zadane točke A od točke C koja joj je osnosimetrična s obzirom na os y?");
//Zadatak6
var radio6,tocno6;
radio6=0; tocno6=0;
slovo6 = new Array();
slovo6[0] = "a) ";
slovo6[1] = "b) ";
slovo6[2] = "c) ";

odgovori6=new Array();
odgovori6[0]= 2*Math.abs(xA);
odgovori6[1]=2*Math.abs(xA)+1;
odgovori6[2]=2*Math.abs(xA)+2;

//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) {radio6=i;tocno6=slovo6[i];}
document.write("<BR><INPUT TYPE='radio' NAME='izbor6' VALUE=''> "+slovo6[i]+odgovori6[s[i]]);
}

function provjeri(form){
  if (document.forma1.izbor1[radio1].checked) 
     {alert("1. zadatak: Ispravno!");bodovi++;}
    else 
  alert("1. zadatak: Pogrešno! Odgovor je: "+"Točka A ima koordinate: ("+xA+", "+yA+")");
  if (document.forma1.izbor2[radio2].checked) 
     {alert("2. zadatak: Ispravno!");bodovi++;}
    else 
  alert("2. zadatak: Pogrešno! Odgovor je: "+"Točka B ima koordinate: ("+xA+", "+(-yA)+")");

  if (document.forma1.izbor3[radio3].checked) 
     {alert("3. zadatak: Ispravno!");bodovi++;}
    else 
  alert("3. zadatak: Pogrešno! Odgovor je: "+"Točka C ima koordinate: ("+(-xA)+", "+yA+")");

  if (document.forma1.izbor4[radio4].checked) 
     {alert("4. zadatak: Ispravno!");bodovi++;}
    else 
  alert("4. zadatak: Pogrešno! Odgovor je: "+"Točka D ima koordinate: ("+(-xA)+", "+(-yA)+")");

  if (document.forma1.izbor5[radio5].checked) 
     {alert("5. zadatak: Ispravno!");bodovi++;}
    else 
  alert("5. zadatak: Pogrešno! Odgovor je: "+"Udaljenost od točke B je: "+odgovori5[0]);

  if (document.forma1.izbor6[radio6].checked) 
     {alert("6. zadatak: Ispravno!");bodovi++;}
    else 
  alert("6. zadatak: Pogrešno! Odgovor je: "+"Udaljenost od točke C je: "+odgovori6[0]);
  if(bodovi==6) alert("BRAVO! \n Sve je točno riješeno!")
  else alert("Ukupno riješeno zadataka: "+bodovi)
  window.location.reload();
}
</script>
</FORM>
</TD></TR></TABLE>

<FORM name="forma2">
<br><INPUT TYPE="button" class="botun" VALUE="Provjeri" onClick="provjeri(forma1)">
<INPUT TYPE="button" class="botun" VALUE="Novo" onClick="location.reload()">
</FORM>

</body>
</html>