<!DOCTYPE html>
  <head>
  <title>Koordinatni sustav - jednadžba pravca</title>  
  <style>
  .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>
<h2>Jednadžba pravca - vježba</h2>
1. Kako glasi jednadžba pravca nacrtanog na slici?  
(Uputa: posluži se točkama pravca na slici.)<p>

<canvas id="koord" width="500" height="500"></canvas>
<FORM name="forma1">
<script>
var razmak_pravaca = 50; //razmak među mrežnim pravcima (jednako i na x-osi i na y-osi )
var x_os_pocetna_tocka=0;
var y_os_pocetna_tocka=0;

var x,y;
var a,b; //koeficijenti jednadžbe pravca
izbor_a=[0,1,2,3,4,5,-1,-2,-3,-4,-5];
izbor_b=[0,1,2,3,4,-1,-2,-3,-4];
a=izbor_a[Math.round(9*Math.random())];
b=izbor_b[Math.round(8*Math.random())];

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 = broj točaka na osi x
var broj_pravaca_x = Math.floor(okvir_visina/razmak_pravaca);

// broj horizontalnih mreznih pravaca = broj točaka na osi y
var broj_pravaca_y = Math.floor(okvir_sirina/razmak_pravaca);

// 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, razmak_pravaca*i);
        ctx.lineTo(okvir_sirina, razmak_pravaca*i);
    }
    else {
        ctx.moveTo(0, razmak_pravaca*i+0.5);
        ctx.lineTo(okvir_sirina, razmak_pravaca*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(razmak_pravaca*i, 0);
        ctx.lineTo(razmak_pravaca*i, okvir_visina);
    }
    else {
        ctx.moveTo(razmak_pravaca*i+0.5, 0);
        ctx.lineTo(razmak_pravaca*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, razmak_pravaca*i+okvir_sirina/2-3, okvir_visina/2-2);
}

// 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-razmak_pravaca*i, okvir_visina/2-2);
}

// 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+2,okvir_visina/2-razmak_pravaca*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+2,okvir_visina/2+razmak_pravaca*i);
}

//Crtanje pravca u koordinatnom sustavu
ctx.beginPath();
ctx.lineWidth = 3;
ctx.strokeStyle = '#55aa33';

var x_max=Math.round(broj_pravaca_x/2);
var x_min=-x_max; //minimalna vrijednost na osi x
var y_max=Math.round(broj_pravaca_y/2);
var y_min=-y_max; //minimalna vrijednost na osi y
//min. x-koordinata s lijeve strane od koje crtamo pravac = 0 za canvas
y=a*x_min+b; // početna y-koordinata s lijeve strane
if(y<y_min){
x=(b-y)/y_min;
y=y_min;
}
else{
x=0;
y=(y+y_max)*razmak_pravaca; //početna vrijednost za y-os za canvas 
}
ctx.moveTo(x,y);

for(i=x_min;i<x_max;i++) {
  y=a*i+b; // jednadžba pravca
  x=(i+x_max)*razmak_pravaca; //vrijednost x-koordinate za canvas
  y=(-y+y_max)*razmak_pravaca; //vrijednost y-koordinate za canvas
  ctx.lineTo(x, y);
  }
ctx.stroke();
ctx.closePath();

//Zadatak1
var radio1,bodovi, tocno1;
radio1=0; bodovi=0; tocno1=0;
slovo1 = new Array();
slovo1[0] = "a) ";
slovo1[1] = "b) ";
slovo1[2] = "c) ";

odgovori1=new Array();
if (b<0) odgovori1[0]="y= "+a+"x - "+(-b);
if(b==0) odgovori1[0]="y= "+a+"x";
if(b>0) odgovori1[0]="y= "+a+"x + "+b;
if(a==0) odgovori1[0]="y= "+b;

odgovori1[1]="y= "+(a+1)+"x + "+(b+4);
odgovori1[2]="y= "+a+"x + "+(b+3);

//miješanje rednih brojeva za odgovore, 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=slovo1[i];}
document.write("<BR><INPUT TYPE='radio' NAME='izbor1' VALUE=''> " + slovo1[i] + odgovori1[s[i]]);
}

//Zadatak2
document.write("<P>2. U kojoj točki ovaj pravac siječe os x?");
var radio2,tocno2,x0;
radio2=0; tocno2=0,x0=0;
slovo2 = new Array();
odgovori2=new Array();
slovo2[0] = "a) ";
slovo2[1] = "b) ";
slovo2[2] = "c) ";
if(a==0) {
odgovori2[0]="pravac je usporedan s osi x";
odgovori2[1]="pravac je okomit na os x";
odgovori2[2]="pravac je usporedan s osi y";
}
else if(b==0) {
odgovori2[0]="pravac prolazi kroz ishodište";
odgovori2[1]="pravac siječe os x";
odgovori2[2]="pravac siječe os y";
}
else{
x0=-Math.round(100*b/a)/100;
odgovori2[0]="("+x0+", 0)";
odgovori2[1]="(0, "+(-x0)+")";
odgovori2[2]="("+(-x0)+", 0)";
}
//miješanje rednih brojeva za odgovore, 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=slovo2[i];}
document.write("<BR><INPUT TYPE='radio' NAME='izbor2' VALUE=''> "+slovo2[i]+odgovori2[s[i]]);
}

//Zadatak3
document.write("<P>3. U kojoj točki ovaj pravac siječe os y?");
var radio3,tocno3;
radio3=0; tocno3=0;
slovo3 = new Array();
slovo3[0] = "a) ";
slovo3[1] = "b) ";
slovo3[2] = "c) ";

odgovori3=new Array();
odgovori3[0]="(0, "+b+")";
odgovori3[1]="("+(-b)+", 0)";
odgovori3[2]="(1, "+b+")";

//miješanje rednih brojeva za odgovore, 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]]);
}

var poruka=[];
function provjeri(form){
  if (document.forma1.izbor1[radio1].checked) 
     poruka[1]="1. Ispravno!";
    else 
  poruka[1]="1. Pogrešno! Pravac ima jednadžbu: "+odgovori1[0];
  if (document.forma1.izbor2[radio2].checked) 
     poruka[2]="2. Ispravno!";
    else 
  poruka[2]="2. Pogrešno! Pravac siječe os x u točki: "+odgovori2[0];
  if (document.forma1.izbor3[radio3].checked) 
     poruka[3]="3. Ispravno!";
    else 
  poruka[3]="3. Pogrešno! Pravac siječe os y u točki: "+odgovori3[0];
  alert("Rezultati:\n"+poruka[1]+"\n"+poruka[2]+"\n"+poruka[3]);
  window.location.reload();
}
</script>
</FORM>

<FORM name="forma2">
<br><INPUT TYPE="button" class="botun" VALUE="PROVJERI" onClick="provjeri(forma1)">
</FORM>

</body>
</html>