<!DOCTYPE html>
<head><title>Gibanje i sila - v-t</title>  
<style>
canvas{
background-color:#ffddff;
color:blue;
border:2px;
}
/* Botun provjeri */
.botun {
    color: #66aadd;
    background-color:#112266;
    border: 3px solid #22aadd;
    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>

<font color="red"><h2>Gibanje i sila</h2></font>
<table>
<tr><td valign="top" width="50%">
<h3>Jednoliko ubrzano gibanje - v-t graf</h3>
<canvas id="koord" width="400" height="400"></canvas>
</td>
<td valign="top" width="50%">
<p>Dijagram na slici prikazuje ovisnost promjene brzine <i>v</i> o vremenu <i>t</i> za neko tijelo koje kreće iz stanja mirovanja (v-t graf). Tijelo se giba jednoliko ubrzano od točke A do točke B po osi y. Prema podacima sa slike odgovorite na ova pitanja:
<p><form name="forma">
<p>1. Kolika je akceleracija gibanja ovog tijela?  
<br>a = <input type="text" value="" name="tekst1" size=10> m/s<sup>2</sup>.
<script>
var k=18; //broj crta na osi y
var v=0,brzina1=0,vrijeme1=0,vrijeme2=0,vrijeme3=0,brzina2=0,n=0;
var n1=2+Math.round(16*Math.random()); // redni broj na osi y - točka A;
var vrijeme1=1+Math.round(3*Math.random()); // faktor kojim se množi vrijeme1
var vrijeme2=1+Math.round(3*Math.random()); // faktor kojim se množi vrijeme2
vrijeme3=2+Math.round(10*Math.random()); // vrijeme3 u minutama
n=2+Math.round(3*Math.random()); //koordinata xB točke B (vrijeme tB)
nn=1+Math.round(2*Math.random());
v=3+Math.round(4*Math.random()); //faktor proporcionalnosti (ubrzanje) 
var ubrzanje=n*nn;
brzina1=ubrzanje*n;
brzina2=Math.round(1000*brzina1*3.6)/1000;

document.write("<p>2. Koliku brzinu tijelo postigne nakon prvih "+n+" sekunda gibanja, kad stigne u točku B?"); 
document.write("<br>v<sub>1</sub> = <input type='text' value='' name='tekst2' size=10> m/s.");
document.write("<p>3. Izrazi tu brzinu u kilometrima na sat.");
document.write("<br>v<sub>1</sub> = <input type='text' value='' name='tekst3' size=10> km/h.");
document.write("<p>4. Ako bi se tijelo nastavilo gibati s istom akceleracijom, koliku bi brzinu postiglo nakon "+vrijeme3+" minuta?"); 
document.write("<br>v<sub>2</sub> = <input type='text' value='' name='tekst4' size=10> m/s.");
document.write("<p>5. Koliki put bi to tijelo prevalilo nakon prvih "+n+" sekunda gibanja s istom akceleracijom?"); 
document.write("<br>s<sub>1</sub> = <input type='text' value='' name='tekst5' size=10> metara.");

var sirina_podjele = 20; //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
koordx=broj_podjela_x-2; //redni broj vodoravnog pravca koji je koordinatna os x
koordy=2; //redni broj uspravnog pravca koji je koordinatna os y
nx=broj_podjela_x-2; //broj oznaka na osi x
ny=broj_podjela_y-2; //broj oznaka 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*2; //početna točka je na drugom pravcu slijeva - u nuli
srediste_yA=sirina_podjele*18;
srediste_xB=2*sirina_podjele*(n+1);  //prva koordinata druge točke
srediste_yB=(18-n*nn)*sirina_podjele; // visina druge točke - prijeđeni brzina za vrijeme tB 

// 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 - vrijeme
for(i=1;i<xmax;i++){ 
  ctx.font = "14px Arial";
  ctx.fillText(i,i*40+35,okvir_visina-sirina_podjele);   
}

// natpisi po pozitivnoj Y-osi - prijeđeni brzina
for(i=0;i<(ymax-2);i++) {
  ctx.font = "14px Arial";
  ctx.fillText(n*i,sirina_podjele-5,(ny-i)*sirina_podjele); 
}

//Natpisi na osima
ctx.font = '15px Arial';
ctx.fillText("brzina (m/s)",5,sirina_podjele-5);
ctx.fillText("vrijeme (s)",okvir_sirina-sirina_podjele*2-40,okvir_visina-sirina_podjele+15);

//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 = "#ee6622";
ctx.moveTo(srediste_xA,srediste_yA);ctx.lineTo(srediste_xB,srediste_yB);
ctx.stroke();

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==ubrzanje) poruka[0]="\n1. točno"; else poruka[0]="\n1. pogrešno, ubrzanje tijela je: "+ubrzanje+"m/s"+String.fromCharCode(178); 
  if (forma.tekst2.value==brzina1) poruka[1]="\n2. točno"; else poruka[1]="\n2. pogrešno, postigne brzinu: "+brzina1+" m/s.";
  if (forma.tekst3.value==brzina2) poruka[2]="\n3. točno"; else poruka[2]="\n3. pogrešno, brzina iznosi: "+brzina2+" km/h.";
  if (forma.tekst4.value==ubrzanje*60*vrijeme3) poruka[3]="\n4. točno"; else poruka[3]="\n4. pogrešno, tijelo bi postiglo brzinu: "+ubrzanje*60*vrijeme3+" m/s.";
  if (forma.tekst5.value==brzina1*n/2) poruka[4]="\n5. točno"; else poruka[4]="\n5. pogrešno, tijelo bo prešlo put od: "+brzina1*n/2+" 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>

</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)"> 
<INPUT TYPE="button" class="botun" VALUE="NOVO" onClick="location.reload()">
</center>
</body>
</html>