<!DOCTYPE html>
<head><title>Elastična sila</title>  
<style>
canvas{
background-color:#bbff88;
color:blue;
border:2px;
}
/* Botun provjeri */
.botun {
    color: #66aadd;
    background-color:darkblue;
    border: 3px solid #5588ee;
    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>
<canvas id="koord" width="400" height="400"></canvas>
</td>
<td valign="top" width="40%">
<font color="red"><h2>Elastična sila - vježba </h2></font>
<p>Dijagram prikazuje ovisnost duljine <i>l</i> neke opruge o sili <i>F</i> koja je rasteže. Prema podacima sa slike odgovorite na ova pitanja:
<p><form name="forma">
<p>1. Kolika je duljina nerastegnute opruge?  
<br><input type="text" value="" name="tekst1" size=10> cm
<script>
var k=9; //broj crta na osi y
var sila1=0,duljina0=0,duljina1=0,dy=0,konstanta=0;
var n1=1+Math.round(5*Math.random()); /* redni broj na osi y - točka A; prva crta odozdo=k-n1=9-8, zadnja crta=k-n1=9-1=8, n1 je broj od 1 do 8 */
var n2=1+Math.round(3+Math.random()); // faktor kojim se množi n za silu
var dy=1+Math.round(2*Math.random()); //povećanje osi y za točku B
var n=1+Math.round(5*Math.random()); //faktor proporcionalnosti
duljina0=n1*n; 
var konstanta=Math.round(100*n2*8/dy)/100;
sila1=n2*n*8; //sila za točku B je na 8. crti od ishodišta
duljina1=duljina0+dy*n;

document.write("<p>2. Kolika je duljina opruge kada je rasteže sila od "+sila1+" N?"); 
document.write("<br><input type='text' value='' name='tekst2' size=10> cm");
document.write("<p>3. Koliko je produljenje opruge kad je rasteže sila od "+sila1*2+"N?");
document.write("<br><input type='text' value='' name='tekst3' size=10> cm");
document.write("<p>4. Kolika sila djeluje na oprugu ako je njezina duljina "+duljina1+" cm?"); 
document.write("<br><input type='text' value='' name='tekst4' size=10> N");
document.write("<p>5. Odredite konstantu elastičnosti ove opruge, prema podacima sa slike. Po potrebi, zaokruži na dvije decimale (ne više)."); 
document.write("<br><input type='text' value='' name='tekst5' size=10> N/cm");
var sirina_podjele = 40; //razmak među mrežnim pravcima (broj pixela)
var x_os_pocetna_tocka=0;
var y_os_pocetna_tocka=0;
var koordx=1; //na kojem pravcu je os x
var koordy=1; //na kojem pravcu je os y
var nx=1; //broj točaka na osi x
var ny=1; //broj točaka na osi y

var c = document.getElementById("koord");
var ctx = c.getContext("2d");
ctx.backgroundColor = "#88bbee";
ctx.stroke();

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/sirina_podjele);
// broj horizontalnih mreznih pravaca
var broj_pravaca_y = Math.floor(okvir_sirina/sirina_podjele);

var broj_podjela_x = Math.floor(okvir_visina/sirina_podjele); //broj podjela na osi x
var broj_podjela_y = Math.floor(okvir_sirina/sirina_podjele); //broj podjela na osi y
var xmax=broj_podjela_x-1; //najveći broj na osi x
var ymax=broj_podjela_y-1; //najveći broj na osi y

var srediste_xA=0,srediste_yA=0; //središte kružnice koja predstavlja točku A
var srediste_xB=0,srediste_yB=0; //središte kružnice koja predstavlja točku B
srediste_xA=sirina_podjele; //početna točka je na drugom pravcu slijeva
srediste_yA=sirina_podjele*(k-n1);
srediste_xB=sirina_podjele*k;  //druga točka ima prvu koordinatu uvijek jednaku xB
srediste_yB=(ymax-n1-dy)*sirina_podjele; // visina druge točke - duljina1 

koordx=broj_podjela_x-1; //redni broj vodoravnog pravca koji je koordinatna os x
koordy=1; //redni broj okomitog pravca koji je koordinatna os y
nx=broj_podjela_x-2; //broj oznaka na osi x
ny=broj_podjela_y-2;

// 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 == koordx) {
        ctx.lineWidth = 2;
        ctx.strokeStyle = "#000088";}
    else
        ctx.strokeStyle = "#448866";
    
    if(i == broj_pravaca_x) {
        ctx.moveTo(0, sirina_podjele*i);
        ctx.lineTo(okvir_sirina, sirina_podjele*i);
    }
    else {
        ctx.moveTo(0, sirina_podjele*i+0.5);
        ctx.lineTo(okvir_sirina, sirina_podjele*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 == koordy){ 
        ctx.lineWidth = 2;
        ctx.strokeStyle = "#000088";}
    else
        ctx.strokeStyle = "#448866";
    
    if(i == broj_pravaca_y) {
        ctx.moveTo(sirina_podjele*i, 0);
        ctx.lineTo(sirina_podjele*i, okvir_visina);
    }
    else {
        ctx.moveTo(sirina_podjele*i+0.5, 0);
        ctx.lineTo(sirina_podjele*i+0.5, okvir_visina);
    }
    ctx.stroke();
}

var poruka=[];

// natpisi po pozitivnoj X-osi - sila
for(i=1;i<xmax;i++){ 
  ctx.font = "14px Arial";
  ctx.fillText(n2*n*i,i*40+30,okvir_visina-sirina_podjele+15);   
}

// natpisi po pozitivnoj Y-osi - duljina opruge
for(i=0;i<ymax;i++) {
  ctx.font = "14px Arial";
  ctx.fillText(n*i,sirina_podjele-25,(koordy+ny-i)*40); 
}

//Natpisi na osima
ctx.font = '15px Arial';
ctx.fillText("duljina (cm)",5,sirina_podjele-15);
ctx.fillText("sila (N)",okvir_sirina-sirina_podjele*2,okvir_visina-sirina_podjele+30);

//Crtaj točku A na slučajno izabranim koordinatama (0,yA)
ctx.beginPath();
ctx.arc(srediste_xA, srediste_yA, 3, 0, (Math.PI/180)*360, false);
ctx.strokeStyle = "#dd8866";
ctx.fill();
ctx.closePath();
ctx.font = '16px Arial';
ctx.fillText("A",srediste_xA+5,srediste_yA-10);

//Crtaj točku B na slučajno izabranim koordinatama (xB,yB)
ctx.beginPath();
ctx.arc(srediste_xB, srediste_yB, 3, 0, (Math.PI/180)*360, false);
ctx.strokeStyle = "#dd8866";
ctx.fill();
ctx.closePath();
ctx.font = '16px Arial';
ctx.fillText("B",srediste_xB+5,srediste_yB-9);

//crtaj pravac od točke A do točke B
ctx.lineWidth = 3;
ctx.strokeStyle = "#dd8866";
ctx.moveTo(srediste_xA,srediste_yA);ctx.lineTo(srediste_xB,srediste_yB);
ctx.stroke();

function provjeri(){
  if (forma.tekst1.value==duljina0) poruka[0]="\n1. točno"; else poruka[0]="\n1. pogrešno, početna duljina je: "+duljina0; 
  if (forma.tekst2.value==duljina1) poruka[1]="\n2. točno"; else poruka[1]="\n2. pogrešno, nova duljina je: "+duljina1;
  if (forma.tekst3.value==dy*n*2) poruka[2]="\n3. točno"; else poruka[2]="\n3. pogrešno, produljenje je: "+dy*n*2;
  if (forma.tekst4.value==sila1) poruka[3]="\n4. točno"; else poruka[3]="\n4. pogrešno, sila je: "+sila1;
  if (forma.tekst5.value==konstanta) poruka[4]="\n5. točno"; else poruka[4]="\n5. pogrešno, konstanta elastičnosti je: "+konstanta;
  alert("REZULTATI:"+poruka[0]+poruka[1]+poruka[2]+poruka[3]+poruka[4]);
  location.reload();
}
</script>

</form>
</td></tr>
</table>

<br><b>Pritiskom na tipku 'Provjeri', dobit ćete poruku o vašim rezultatima, a nakon toga dobivate iste takve zadatke, ali s drugim brojevima.</b>
<center><p><INPUT TYPE="button" class="botun" VALUE="PROVJERI" onClick="provjeri(forma)"> </center>
</body>
</html>