<!DOCTYPE html>
<head><title>Gibanje i sila - vt</title>  
<style>
canvas{
background-color:#ccffaa;
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>

<script>
var xB,yB,brzina,v,n;
n=1+Math.round(6*Math.random());
xB=3+Math.round(5*Math.random());
do{
yB=1+Math.round(8*Math.random());}
while(yB==5);
odgovori=new Array();
brzina=-5+yB;

//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);
}
var tocno;
slovo = new Array();
slovo[0] = "a) ";
slovo[1] = "b) ";
slovo[2] = "c) ";

if ((10-yB)>5) {
odgovori[0]="Tijelo se giba suprotno od smjera osi y.";
odgovori[1]="Tijelo se giba u smjeru osi y."
odgovori[2]="Tijelo se giba u smjeru osi x."
}
if ((10-yB)<5) {
odgovori[0]="Tijelo se giba u smjeru osi y.";
odgovori[1]="Tijelo se giba suprotno od smjera osi y."
odgovori[2]="Tijelo se giba u smjeru osi x."
}
</script>

<table>
<tr><td valign="top">
<font color="red"><h2>Gibanje i sila - v-t graf </h2></font>
Dijagram na slici prikazuje ovisnost brzine o vremenu za tijelo koje se giba jednoliko pravocrtno (v-t graf). Prema slici odgovori na sljedeća pitanja:
<p><form name="forma">
<p>1. Kakvo je gibanje prikazano na slici? 
<script>

for(i=0;i<3;i++){
if(s[i]==0) {tocno=i;}
document.write("<BR><INPUT TYPE='radio' NAME='izbor' VALUE=''> " + slovo[i] + odgovori[s[i]]);
}
</script>
<p>2. Kolikom brzinom se tijelo na slici gibalo u prikazanom vremenu? Ne zaboravi predznak! 
<br><input type="text" value="" name="tekst2" size=10> m/s.
<p>3. Koliki put je tijelo prešlo za dano vrijeme? (Prijeđeni put je pozitivan!)
<br><input type="text" value="" name="tekst3" size=10> metara.
<script>
var tmin=1+Math.round(9*Math.random());
document.write("<p>4. Koliki put bi tijelo prevalilo da se nastavi gibati istom brzinom " +tmin+"  minuta? (Ne zaboravi: prijeđeni put je pozitivan!)"); 
document.write("<br><input type='text' value='' name='tekst4' size=10> metara.");
document.write("<p>5. Koliko vremena bi ovom tijelu trebalo da prevali put od "+Math.abs(xB*brzina)+" metara?"); 
document.write("<br><input type='text' value='' name='tekst5' size=10> sekunda.");
</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_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-2; //najveći broj na osi x
var ymax=broj_podjela_y/2-1; //najveći broj na osi y

koordx=broj_podjela_x/2; //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-1;

// 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 'i' na osi x su od 0 do +xmax, a nalaze se na koordinatama
for(i=1;i<xmax;i++){ 
  ctx.font = "12px Arial";
  ctx.fillText(i,(1+i)*40,okvir_visina/2+15);   
}

// Brojevi 'i' na osi y su od -ymax do +ymax, a nalaze se na koordinatama
for(i=-ymax;i<=ymax;i++) {
  ctx.font = "12px Arial";
  ctx.fillText(i,sirina_podjele-15,(koordy+ny-i)*40); 
}

//Natpisi na osima
ctx.font = 'bold 15px Arial';
ctx.fillText("brzina (m/s)",5,sirina_podjele-20);
ctx.fillText("vrijeme (s)",okvir_sirina-sirina_podjele-20,okvir_visina/2-10);

//crtaj v-t graf
ctx.lineWidth = 3;
ctx.strokeStyle = "#ee2244";
ctx.moveTo(sirina_podjele,(broj_podjela_y-yB)*sirina_podjele);
ctx.lineTo((xB+1)*sirina_podjele,(broj_podjela_y-yB)*sirina_podjele);
ctx.stroke();

var put1=Math.abs(brzina)*xB;
put2=Math.abs(brzina)*tmin*60
var poruka=[];

function provjeri(forma){
  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.izbor[tocno].checked) poruka[0]="\n1. točno"; else poruka[0]="\n1. pogrešno, točan odgovor je: "+slovo[tocno]; 
  if (forma.tekst2.value==brzina) poruka[1]="\n2. točno"; else poruka [1]="\n2. pogrešno, brzina tijela iznosi: "+brzina+" m/s.";
  if (forma.tekst3.value==put1) poruka[2]="\n3. točno"; else poruka[2]="\n3. pogrešno, za dano vrijeme tijelo je prevalilo put: "+put1+" m.";
  if (forma.tekst4.value==put2) poruka[3]="\n4. točno"; else poruka[3]="\n4. pogrešno, tijelo bi prešlo put: "+put2+" metara.";
  if (forma.tekst5.value==xB) poruka[4]="\n5. točno"; else poruka[4]="\n5. pogrešno, tijelu bi trebalo vrijeme od: "+xB+" sekunda.";

  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>