<!DOCTYPE html>
<head>
<title>kviz-ponavljanje72-zadaci</title>
<style>
.odgovor {
  border-radius: 30px;
  background-color: blue; 
  border: double;
  color: white;
  width: 300px;
  padding: 15px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.botun {
  border-radius: 30px;
  background-color: #1122bb; 
  border: double;
  color: white;
  width: 150px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
.botunRazno {
  border-radius: 10px;
  background-color: #5566bb; 
  border: double;
  color: white;
  width: 100px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
}
input:hover
{
color: yellow;
}

table
{
font-family: Arial;
border-spacing: 2px;
width: 90%;
}
td:first-child
{
width: 70%;
background-color: darkblue;
color:white;
font-size:15px;
padding:2%;
}
td:nth-child(2)
{
width: 30%;
background-color: darkblue;
color:white;
font-size:12px;
}

/* Modalni okvir (pozadina) */
.modal {
    display: none; /* Skriveno by default */
    position: fixed; /* Ostaje na mjestu */
    z-index: 1; /* Iznad pozadine */
    left: 0;
    top: 0;
    width: 60%; /* 100% je puna širina */
    height: 60%; /* 100% je puna visina  */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #99ddff; /* boja pozadine na kojoj je tekst */
    margin: 15% auto; /* 15% od vrha i centrirano */
    padding: 20px;
    border: 1px solid #888;
    width: 60%; /* Vrijednost širine ovisi o promjeru ekrana */
    font-size:14px;
    font-family: Arial;
    text-align: center;
    font-weight: bold;
}
.obavijest{
  background-color: #99ddff; /* boja pozadine na kojoj je tekst */
}

/* Botun zatvori */
.zatvori {
    color: #66aadd;
    background-color:darkblue;
    border: 1px solid #5588ee;
    padding: 5px;
    //float: right;
    margin: 5%;
    font-size: 18px;
    font-weight: bold;
}
.zatvori:hover,
.zatvori:focus {
    color: yellow;
    text-decoration: none;
    cursor: pointer;
}

/* Botun izborDA-NE */
.dane {
    color: #66aadd;
    background-color:darkblue;
    border: 1px solid #5588ee;
    padding: 5px;
    //float: right;
    margin: 5%;
    font-size: 15px;
    font-weight: bold;
}
.dane:hover,
.dane:focus {
    color: yellow;
    text-decoration: none;
    cursor: pointer;
}

/* Botun obavijest o kraju */
.obavijestkraj {
    color: #cc5522;
    background-color:darkblue;
    border: 1px solid #5588ee;
    padding: 5px;
    //float: right;
    margin: 5%;
    font-size: 18px;
    font-weight: bold;
}
.obavijestkraj:hover,
.obavijestkraj:focus {
    color: yellow;
    text-decoration: none;
    cursor: pointer;
}

.botunurica {
  background-color: green; 
  border: double;
  border-radius: 10px;
  color: white;
  width: 100px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}
.botunprovjeri {
  background-color: #bb8844; 
  border: double;
  border-radius: 10px;
  color: white;
  width: 100px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
}
input:hover
{
color: yellow;
}

.oznaka_razina
{
border:1px solid;
border-radius: 10px;
border-color:white;
padding:2px;
color:yellow;
font-size:15px;
text-align: center;
}
.oznaka_bodovi
{
color:white;
font-size:15px;
text-align: center;
}
</style>
</head>

<body bgcolor="#4488ee" onload=uvod()>

<!-- Modalni okvir za početak igre -->
<div id="myModal" class="modal">
  <!-- Modal sadržaj-->
  <div class="modal-content">
    <p>Želite li novu provjeru znanja?</p>
    <span class="zatvori">DA</span>
    <span class="zatvori">NE</span>
  </div>
</div>

<!-- Modalni okvir za pitanje -->
<div id="Modal1" class="modal">
  <!-- Modalni sadržaj-->
  <div class="modal-content">
    <p>Jeste li sigurni?</p>
    <span class="dane">DA</span>
    <span class="dane">NE</span>
  </div>
</div>

<!-- Modalni okvir za obavijest o neuspjehu -->
<div id="Modal2" class="modal">
  <!-- Modalni sadržaj-->
  <div class="modal-content">
    <p><span class="obavijest">Pogrešno!</span>
    <p>
    <span class="obavijestkraj">Nastavi</span>
    
  </div>
</div>

<!-- Modalni okvir za pomoc -->
<div id="Modal3" class="modal">
  <!-- Modalni sadržaj-->
  <div class="modal-content">
    <p>Želite li pomoć?</p>
    <span class="dane">Izbaci uljeza</span>
    <span class="dane">Prepolovi</span><p>
    <span class="dane">Odustani</span>
  </div>
</div>

<center>
<table><tr><td><center><h1>FIZIKA 7. razred</h1>
2. cjelina - provjera znanja
</center></td>
<td><center><INPUT TYPE='button' id='urica' name='urica' value='00:00:00' class='botunurica'>
<p><INPUT TYPE='button' name='pomoc' onclick='pomoc()' value='Pomoć' class='botunRazno'>
</center></td>
</table>

<table id="tbl"><tr><td> 
<center>Pitanja iz 2. polugodišta 7. razreda</center>
</td>
<td valign='center'><center>
<p class="oznaka_razina" id="p1">Osnovno o međudjelovanju</p>
<p class="oznaka_bodovi" id="p2">Broj bodova=0</p>
<INPUT TYPE='button' id='dalje' name='dalje' onclick='ididalje()' value='Dalje >>' class='botunprovjeri'>
</center>
</td>
<tr></table>
<form name="forma">
<INPUT TYPE='button' name='botun1' id='bot1' onclick='provjeri(this.id)' value='&#9830; A. ' class='odgovor'>
<INPUT TYPE='button' name='botun2' id='bot2' onclick='provjeri(this.id)' value='&#9830; B. ' class='odgovor'>
<br>
<INPUT TYPE='button' name='botun3' id='bot3' onclick='provjeri(this.id)' value='&#9830; C. ' class='odgovor'>
<INPUT TYPE='button' name='botun4' id='bot4' onclick='provjeri(this.id)' value='&#9830; D. ' class='odgovor'>
<p>
<INPUT TYPE='button' name='botun5' id='bot5' onclick='location.reload()' value='Nova provjera' class='botun'>
</form>
</center>

<script>
//baza pitanja i odgovora
var pitanje=[]; //po 5 pitanja prve i 5 druge razine
var odgovor=[]; //po 5*4=20 odgovora iz prve i druge razine (ukupno 60 odgovora)
var n=0; //redni broj pitanja
var imena1=["Ivanina","Petrina","Marijina","Anina","Martina"];
var imena2=["Ivanova","Petrova","Markovna","Antina","Martinova"];
var x=Math.round(4*Math.random());
var a = 10*Math.round(1+10*Math.random());   	//1. pitanje
var a1=Math.round(1+10*Math.random()); 
var b = 10*Math.round(10+50*Math.random());    	//2. pitanje
var c=5+Math.round(1+40*Math.random()); 	//3. pitanje
var c1=16*Math.round(3+4*Math.random());
var d = Math.round(30+30*Math.random());    	//4. pitanje
var e1 = Math.round(2+30*Math.random());  	//5. pitanje
var e2 = Math.round(1+15*Math.random());
var f = Math.round(40+30*Math.random()); 	//6. pitanje 
var g = Math.round(4+20*Math.random());    	//7. pitanje
var h1 = 10*Math.round(1+8*Math.random());    	//8. pitanje
var h2 = Math.round(2+30*Math.random());
var i = 10*Math.round(5+80*Math.random());    	//9. pitanje
var j1 = 10*Math.round(5+20*Math.random());    //10. pitanje
var j2 = 10*Math.round(1+10*Math.random());
var j3 = Math.round(2+5*Math.random());
var k1 = 10*Math.round(1+8*Math.random())/100; 
var k2 = Math.round(1+20*Math.random());
var l = 5*Math.round(7+5*Math.random());
var m = 10*Math.round(1+20*Math.random());

//Pitanja prve skupine - osnovno o silama - elastična sila, težina i sila teža
pitanje[0]="Uteg rastegne oprugu tako da se ona produlji za "+a+" mm. Kolikom silom djeluje uteg ako je konstanta opruge "+a1+" N/cm?";
pitanje[1]="Kolika je težina vrećice brašna koja ima masu "+b+" g?";
pitanje[2]="Tijelo mase "+c+" kg na Zemlji ima težinu "+c*10+" N, a na Mjesecu teži "+(c*10*1.6)/10+" N. Koliko bi na Mjesecu težila osoba mase "+c1+" kg?";
pitanje[3]=imena1[x]+" masa je "+d+" kg, a težina joj iznosi...";
pitanje[4]="Koliko produljenje opruge čija konstanta je "+e1+" N/cm uzrokuje sila od "+e1*e2+" N?";
pitanje[5]=imena2[x]+" težina je "+f*10+" N, a masa mu je...";
pitanje[6]="Kocka leda ima brid duljine "+g+" cm. Kolika je težina te kocke ako je gustoća leda 900 kg/m"+String.fromCharCode(179)+"?";

//Pitanja druge skupine - sila trenja, zakon poluge i tlak
pitanje[5]="Kolikom silom trebamo jednoliko povlačiti sanduk mase "+h1+" kg po vodoravnoj podlozi uz faktor trenja od "+h2+"%?";
pitanje[6]="Kolika je masa tereta koji guramo po podu silom od "+i+" N ako je faktor trenja između sanduka i poda 0.2?";
pitanje[7]="Koliko silom moramo djelovati na jednom kraju poluge, na udaljenosti "+j2*j3+" cm od oslonca, ako želimo njome podignuti teret mase "+j1*j3+" kg? Krak tereta je duljine "+j2+"cm."; // krak sile=j2*j3, krak tereta=j2, teret=j1, sila=j1/j3
pitanje[8]="Sanjke mase "+k2+" kg vučemo po snijegu silom od "+Math.round(k1*k2*100)/10+" N tako da se gibaju jednoliko. Koliki je faktor trenja između sanjki i snijega?"; 
//trenje=k1*k2*10
pitanje[9]="Izračunaj tlak kojim dječak mase "+l+" kg djeluje na pod ako je ploština njegovih stopala 250 cm"+String.fromCharCode(178)+"?";
pitanje[10]="Koji od ovih izraza za tlak u paskalima je točan?";

//Točan odgovor je odgovor[0],odgovor[4],odgovor[8] tj. ako je indeks djeljiv sa 4
odgovor[0]=a*a1/10+" N."; //1. odgovor
odgovor[1]=a*a1+" N.";
odgovor[2]=a*a1*10+" N.";
odgovor[3]=a*a1*5+" N.";

odgovor[4]=0.01*(1000*b/1000)+" N."; //2. odg
odgovor[5]=0.1*(1000*b/1000)+" N.";
odgovor[6]=(1000*b/1000)+" N.";
odgovor[7]=10*(1000*b/1000)+" N.";

odgovor[8]=(c1*Math.round(1.6*10))/10+" N."; //3.odg
odgovor[9]=c1*16+" N.";
odgovor[10]=(0.01*c1*16*100)/100+" N.";
odgovor[11]=(0.001*c1*16*1000)/1000+" N.";

odgovor[12]=d*10+" N."; //4.odg
odgovor[13]=d*100+" N.";
odgovor[14]=(d*10)/100+" N.";
odgovor[15]=(d*10)/1000+" N.";

odgovor[16]=e2+" cm"; //5.odg
odgovor[17]=e2*10+" cm";
odgovor[18]=e2/10+" cm";
odgovor[19]=e2/100+" cm";

odgovor[20]=h1*h2*10/100+" N."; //6.odg
odgovor[21]=h1*h2*10+" N.";
odgovor[22]=h1*h2*10/1000+" N.";
odgovor[23]=h1*h2+" N.";

odgovor[24]=5*i/10+" kg"; //7.odg
odgovor[25]=i*10+" kg";
odgovor[26]=5*i+" kg";
odgovor[27]=2*i+" kg";

odgovor[28]=j1*10+" N"; //8.odg
odgovor[29]=j1+" N";
odgovor[30]=j1*2+" N";
odgovor[31]=j1*5+" N";

odgovor[32]=k1; //9.odg
odgovor[33]=Math.round(k1*10)/100;
odgovor[34]=Math.round(k1*10)/1000;
odgovor[35]=Math.round(k1*10);

odgovor[36]=400*l+"Pa"; //10.odg
odgovor[37]=4000*l+"Pa";
odgovor[38]=4000*l+"Pa";
odgovor[39]=40*l+"Pa";

var izbor_pitanje=[],izbor_odgovor=[];
botuni=new Array(forma.botun1,forma.botun2,forma.botun3,forma.botun4);
bot=new Array("bot1","bot2","bot3","bot4");
slova=new Array("A. ","B. ", "C. ", "D. ");
var tocan=0; //redni broj tocnog odgovora
var pocetak=0; //kontrolna varijabla o zapocetoj provjeri znanja
var tablica=document.getElementById("tbl");
var brojpomoci=0, bodovi=0;
var oznakarazina = document.getElementById("p1");
var oznakabodovi = document.getElementById("p2");
var kliknuto=0; //korisnik je već kliknuo na neki odgovor

function uvod(){
  // Prijavi modalni okvir
  var modal = document.getElementById('myModal');
  stoperica();

  // Prijavi <span> element koji zatvara modalni okvir
  var span1 = document.getElementsByClassName("zatvori")[0];
  var span2 = document.getElementsByClassName("zatvori")[1];

  modal.style.display = "block";
  // Kada korisnik klikne na <span>(DA), zatvara se modalni okvir
  span1.onclick = function() {
    modal.style.display = "none";
    }

// Kada korisnik klikne na <span>(NE), zatvara se modalni okvir i pokazuje poruka
   span2.onclick = function() {
    modal.style.display = "none"
    alert("Ovo je kraj!");
    }

// Kada korisnik klikne bilo gdje izvan modalnog okvira, zatvori ga
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
        alert("Za početak provjere klikni na Nova provjera");
        }
    }
  tablica.rows[0].cells[0].innerText="";
  tablica.rows[0].cells[0].style.textAlign="left";
  tablica.rows[0].cells[0].style.fontSize="16px";
  tablica.rows[0].cells[0].innerText="Ova kratka provjera znanja sadrži 10 pitanja iz fizike 7.  razreda iz 2. cjeline (Međudjelovanje), podijeljenih u 2 dijela: osnovno o silama i razni zadaci o silama.\nZa nastavak pritisni tipku Dalje>>";
}
    
function popuni1(){  //pitanja prve razine
  tablica.rows[0].cells[0].innerText="";
  tablica.rows[0].cells[0].style.fontWeight="normal";
  tablica.rows[0].cells[0].style.textAlign="left";
  tablica.rows[0].cells[0].style.fontSize="20px";
  tablica.rows[0].cells[0].style.color="white";
  //tablica.rows[0].cells[1].style.textAlign="center";

  //miješanje rednih brojeva, u rasponu od s=0 do s=3
  var s=[];
  while(s.length<=3){
    var r=Math.floor(Math.random()*4);
    if(s.indexOf(r)===-1) s.push(r);
    }
  for(i=0;i<=3;i++){
    izbor_odgovor[i]=odgovor[s[i]];
    if(s[i]==0) tocan=i; //tocan je redni broj tocnog odgovora
    }
  tablica.rows[0].cells[0].innerText="1. "+pitanje[0];
  for(i=0;i<=3;i++){
    botuni[i].value=slova[i]+izbor_odgovor[i];
  }
}

function provjeri(obj){
  var id=obj;
  var modal_provjeri1 = document.getElementById('Modal1');
  if(pocetak==0) {alert("Za početak pritisni tipku Dalje!");return;}
  // Prijavi  <span> element koji zatvara modalni okvir
  var span1 = document.getElementsByClassName('dane')[0];
  var span2 = document.getElementsByClassName('dane')[1];
  modal_provjeri1.style.display = "block";
  // Kada korisnik klikne na <span>(DA), zatvara se modalni okvir
  span1.onclick = function() {
    modal_provjeri1.style.display = "none";
    
    if(id==bot[tocan]){
      bodovi++;
      oznakabodovi.innerText="Broj bodova: "+bodovi
      document.getElementById(id).style.backgroundColor = 'green';
      
      tablica.rows[0].cells[0].style.fontWeight="bold";
      tablica.rows[0].cells[0].style.textAlign="center";
      tablica.rows[0].cells[0].style.color="yellow";
      tablica.rows[0].cells[0].style.fontSize="30px";
      tablica.rows[0].cells[0].innerText="TOČNO!\n";
      if(n==10) {alert("Ukupno ste riješili "+bodovi+" pitanja.\nPotrošeno vrijeme: "+intm+" minuta i "+ints+"sekunda.");location.reload();}

      }
    else {
      document.getElementById(id).style.backgroundColor = 'red';
      document.getElementById(bot[tocan]).style.backgroundColor = 'green';
      // Prijavi novi modalni okvir za obavijest
      var modal2 = document.getElementById('Modal2');
      // Prijavi <span> element koji zatvara modalni okvir
      var span1 = document.getElementsByClassName("obavijestkraj")[0];
      //var span2 = document.getElementsByClassName("obavijestkraj")[1];
      var span3 = document.getElementsByClassName("obavijest")[0];
      
      modal2.style.display = "block";
      if(n==0)
      span3.textContent="Nažalost, nije točno. Pokušajte opet!";
      // Kada korisnik klikne bilo gdje izvan modalnog okvira, zatvori ga
      window.onclick = function(event) {
     if (event.target == modal2) {
        modal2.style.display = "none";
        }
     }
     
      // Kada korisnik klikne na <span>(Nova provjera), zatvara se modalni okvir
      span1.onclick = function() {
        modal2.style.display = "none";
        return;
        }     
     }
    }   
    span2.onclick = function() {
      modal_provjeri1.style.display = "none";
      kliknuto=0;
      return;}
    
    if(kliknuto==1) {alert("Već ste odgovarali na to pitanje!");
      modal_provjeri1.style.display="none";}
    kliknuto=1;
}

function novopitanje(n){
  kliknuto=0;
  for(i=0;i<4;i++){
    document.getElementById(bot[i]).style.backgroundColor = 'blue'; 
    document.getElementById(bot[i]).value = '';} //obriši botune

  var nodg=[]; // redni brojevi za sva četiri odgovora za pripadajuće pitanje
  var nodg1=[]; //pomiješani redni brojevi odgovora nodg
  switch(n){
    case 1: nodg=[4,5,6,7];
    break; // 2.pitanje 4-7
    case 2: nodg=[8,9,10,11];
    break; // 3.pitanje 8-11
    case 3: nodg=[12,13,14,15]; 
    break; // 4. pitanje 12-15
    case 4: nodg=[16,17,18,19];
    break; // 5. pitanje 16-19
    case 5: nodg=[20,21,22,23];
    break; // 6. pitanje 20-23
    case 6: nodg=[24,25,26,27];
    break; // 7. pitanje 24-27
    case 7: nodg=[28,29,30,31];
    break; // 8. pitanje 28-31
    case 8: nodg=[32,33,34,35];
    break; // 9. pitanje 32-35
    case 9: nodg=[36,37,38,39];
    break; // 10. pitanje 36-39
    case 10: nodg=[40,41,42,43];
    break; // 11. pitanje 40-43
  }
  //popunjavanje odgovora
  //miješanje rednih brojeva, u rasponu od s=0 do s=3
  var s=[];
  while(s.length<=3){
    var r=Math.floor(Math.random()*4);
    if(s.indexOf(r)===-1) s.push(r);
    }
  tablica.rows[0].cells[0].style.fontWeight="normal";
  tablica.rows[0].cells[0].style.textAlign="left";
  tablica.rows[0].cells[0].style.fontSize="20px";
  tablica.rows[0].cells[0].style.color="white";
  for(i=0;i<=3;i++){
    nodg1[i]=nodg[s[i]];
    if(s[i]==0) tocan=i; // 'tocan' je redni broj tocnog odgovora
    izbor_odgovor[i]=odgovor[nodg1[i]];
    } 
  
    tablica.rows[0].cells[0].innerText="";
    tablica.rows[0].cells[0].innerText=n+1+". "+pitanje[n];
    for(i=0;i<=3;i++)
      botuni[i].value=slova[i]+izbor_odgovor[i];    
}

var modal_pomoc = document.getElementById('Modal3');
  // Prijavi  <span> element koji zatvara modalni okvir
  var span4 = document.getElementsByClassName('dane')[2];
  var span5 = document.getElementsByClassName('dane')[3];
  var span6 = document.getElementsByClassName('dane')[4];

function pomoc(){
  if(pocetak==0) {alert("Za početak pritisni tipku Dalje!");return;}
  if(kliknuto==1) {alert("Već ste odgovarali na to pitanje!");return;}
  //miješanje rednih brojeva botuna, uz uvjet da odgovor nije tocan
  var t=[];
  var x=0,y=0,z=0;
  for(var i=0;i<4;i++){
    if(i!==tocan) t.push(i);
    }
  x=t[0];
  y=t[1];
  z=t[2];
  
  if (brojpomoci==2) alert("Nažalost, potrošili ste svu pomoć!\nDalje morate sami!");
  else{
    modal_pomoc.style.display = "block";
  
    // Kada korisnik klikne na <span>(Izbaci uljeza), zatvara se modalni okvir
    span4.onclick = function() {
      brojpomoci++;
      span4.style.display="none";
      modal_pomoc.style.display = "none";
      document.getElementById(bot[x]).value = "";
      document.getElementById(bot[x]).style.backgroundColor = "grey";
      }

    // Kada korisnik klikne na <span>(Prepolovi), zatvara se modalni okvir
    span5.onclick = function() {
      brojpomoci++;
      span5.style.display="none";
      modal_pomoc.style.display = "none";
      document.getElementById(bot[y]).value = "";
      document.getElementById(bot[y]).style.backgroundColor = "grey";
      document.getElementById(bot[z]).value = "";
      document.getElementById(bot[z]).style.backgroundColor = "grey";
      }
    // Kada korisnik klikne na <span>(Odustani), zatvara se modalni okvir
    span6.onclick = function() {
      modal_pomoc.style.display = "none"; 
      return
      }
    }
}

var d=new Date();
var vrh,vrm,vrs;
var vrh1,vrm1,vrs1;
var vrh2,vrm2,vrs2;
var inth,intm,ints;
vrh=d.getHours(); //početni trenutak
vrm=d.getMinutes();
vrs=d.getSeconds();
var urica=document.getElementById("urica");

function stoperica(){
  var d2=new Date();
  vrh2=d2.getHours(); 
  vrm2=d2.getMinutes(); 
  vrs2=d2.getSeconds();
  inth=vrh2-vrh;
  if(vrm2<vrm) {intm=60+vrm2-vrm} else {intm=vrm2-vrm};
  if(vrs2<vrs) {ints=60+vrs2-vrs} else {ints=vrs2-vrs};
  if(inth<10) inth="0"+inth;
  if(intm<10) intm="0"+intm;
  if(ints<10) ints="0"+ints;
  var odbrojavanje=inth+":"+intm+":"+ints;
  
  self.status = odbrojavanje;
  setTimeout('stoperica()', 1000);
  urica.value=odbrojavanje;
}

function ididalje(){
  pocetak=1;
  if(n>9) {alert("Ovo je bilo zadnje pitanje!\nZašto idete dalje prije davanja odgovora?");location.reload();};
  if(n<5) oznakarazina.innerText="Prva skupina";
  if(n>4) oznakarazina.innerText="Druga skupina";
  
  if(n==0) popuni1();
  else novopitanje(n);
  n++;
  kliknuto=0;
}

</script>
</body>
</html>