<!DOCTYPE html>
<head><title>2. Gibanje i sila - s-t graf</title>  
<style>
canvas{
background-color:#ddffee;
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;
}
/* Modalni okvir (pozadina) */
.modal {  
    display: none; /* Skriveno u pocetku */
    position: fixed; /* Ostaje na mjestu */
    margin: 5% auto;
    z-index: 1; /* Iznad pozadine */
    width: 60%; /* 100% je puna širina */
    height: 30%; /* 100% je puna visina  */
    align-items: center;
    background-color: rgb(100,0,2); /* Fallback color */
    background-color: rgba(0,0,0,0.1); /* Black w/ opacity */
}

/* Modalni sadržaj - unutarnji okvir */
.modal-content {
    background-color: #dca; /* boja pozadine na kojoj je tekst */
    display:none;
    position:fixed;
    margin: 15% auto; /* 15% od vrha i centrirano */
    padding: 20px;
    border: 3px solid #c86;
    width: 70%; /* Vrijednost širine ovisi o promjeru ekrana */
    height:50%;
    font-size:14px;
    font-family: Arial;
    text-align: left;
    font-weight: bold;
    color:black;
}

/* Botun izborDA-NE */
.dane {
    color: white;
    background-color:darkgreen;
    border: 1px solid #5588ee;
    padding: 5px;
    //float: right;
    margin: 2%;
    font-size: 15px;
    font-weight: bold;
}
.dane:hover,
.dane:focus {
    color: yellow;
    text-decoration: none;
    cursor: pointer;
</style>
</head>

<body bgcolor="#aaee88">
<!-- Modalni prozor sa sadrzajem i botunom -->
<div class="modal-content" id="myModal">  
  <center><div class="modal-body" id="modalbody"><p></div>
  <div class="modal-footer">
    <p><span><input type="button" class="dane" value="Zatvori"></span>
  </div>
</div></center>
</div>

<table>
<tr><td valign="top" width="40%">
<font color="red"><h2>Gibanje i sila - s-t graf</h2></font>
Na dijagramu je prikazan s-t graf za tijelo koje kreće iz stanja mirovanja i giba se jednoliko pravocrtno po osi y. Prema slici odredite:
<script>
var put0=0,put=0, brzina=0, tmin=0;
var n=1+Math.round(4*Math.random()); //faktor proporcionalnosti
var xB=2+Math.round(5*Math.random()); //koja crta na osi x
var yB=3+Math.round(5*Math.random()); //koja crta na osi y
brzina=yB*n;
put0=brzina*xB;
put=put0*(2+Math.round(5*Math.random()));
tmin=1+Math.round(9*Math.random());

document.write("<p><form name='forma'>");
document.write("<p>1. Koliki put je tijelo prešlo za vrijeme prvih "+xB+" sekunda?"); 
document.write("<br><input type='text' value='' name='tekst1' size=10> m");
document.write("<p>2. Izrazi taj put u kilometrima."); 
document.write("<br><input type='text' value='' name='tekst2' size=10> km");
document.write("<p>3. Kojom brzinom se to tijelo giba?");
document.write("<br><input type='text' value='' name='tekst3' size=10> m/s");
document.write("<p>4. Koliko sekunda bi trebalo da to tijelo istom brzinom prijeđe put od "+put+" metara?"); 
document.write("<br><input type='text' value='' name='tekst4' size=10> s");
document.write("<p>5. Ako bi se tijelo nastavilo i dalje gibati istom brzinom, koliki put bi prešlo nakon "+tmin+" minuta?"); 
document.write("<br><input type='text' value='' name='tekst5' size=10> m");
</script>
</form>
</td>
<td>
<canvas id="koord" width="400" height="400"></canvas>

<script>
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_sirina/sirina_podjele); //broj podjela na osi x
var broj_podjela_y = Math.floor(okvir_visina/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

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();
}

// Brojevi na osi x su od 0 do +xmax, a nalaze se na koordinatama
for(i=1;i<=xmax;i++){ 
  ctx.font = "14px Arial";
  ctx.fillText(i,(1+i)*40,okvir_visina-sirina_podjele+15);   
}

// Brojevi na osi y su od 0 do +ymax, a nalaze se na koordinatama
for(i=0;i<=ymax;i++) {
  ctx.font = "14px Arial";
  ctx.fillText(i*xB*n,sirina_podjele-25,(broj_podjela_y-i-1)*sirina_podjele); 
}

//Natpisi na osima
ctx.font = 'bold 15px Arial';
ctx.fillText("put (m)",5,sirina_podjele-20);
ctx.fillText("vrijeme (s)",okvir_sirina-sirina_podjele*2,okvir_visina-sirina_podjele+30);

//crtaj s-t graf
ctx.lineWidth = 2;
ctx.strokeStyle = "#ee2244";
ctx.moveTo(sirina_podjele,sirina_podjele*9);
ctx.lineTo((xB+1)*sirina_podjele,(broj_podjela_y-yB-1)*sirina_podjele);
ctx.stroke();

var poruka=[];
function provjeri(){
  var okvir=document.getElementById("myModal");
  var sadrzaj=document.getElementById("modalbody");
  // Prijavi <span> element koji zatvara modalni okvir
  var zatvori=document.getElementsByClassName("dane")[0]

  if (forma.tekst1.value==put0) poruka[0]="\n1. točno"; else poruka[0]="\n1. pogrešno, tijelo je prešlo put: "+put0+" m"; 
  if (forma.tekst2.value==Math.round(1000*put0/1000)/1000) poruka[1]="\n2. točno"; else poruka [1]="\n2. pogrešno, prijeđeni put u kilometrima iznosi: "+Math.round(1000*put0/1000)/1000+" km.";
  if (forma.tekst3.value==brzina) poruka[2]="\n3. točno"; else poruka[2]="\n3. pogrešno, tijelo se giba brzinom: "+brzina+" m/s.";
  if (forma.tekst4.value==put/brzina) poruka[3]="\n4. točno"; else poruka[3]="\n4. pogrešno, trebalo bi mu vrijeme: "+put/brzina+" sekunda.";
  if (forma.tekst5.value==tmin*brzina*60) poruka[4]="\n5. točno"; else poruka[4]="\n5. pogrešno, tijelo bi prevalilo put: "+tmin*brzina*60+" metara.";
  
  sadrzaj.innerText="REZULTATI:\n"+poruka[0]+"\n"+poruka[1]+"\n"+poruka[2]+"\n"+poruka[3]+"\n"+poruka[4]; 
  okvir.style.display = "block";
  // Kada korisnik klikne na <span>(Zatvori), zatvara se modalni okvir
  zatvori.onclick = function() {
  okvir.style.display = "none";
  location.reload();
    }
}
</script>
</td></tr>
</table>
<br><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)"> 
<INPUT TYPE="button" class="botun" VALUE="NOVO" onClick="location.reload()"></center>

</body>
</html>