<!DOCTYPE html>
<html>
<head>
<title>FIZIKA 7 - 3. cjelina - kviz da-ne </title>
<meta charset="utf-8" />
<style>
body {
      background-color: #4466aa;
      margin: 30px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-family: Arial;
      font-size: 20px;
      color:white;
    }  
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;
}

/* botun dalje */
.dalje {
    background-color: #dd8844; /* boja pozadine na kojoj je tekst */
    border-radius: 10px;
    margin: 10% auto; /* 10% od vrha i centrirano */
    padding: 10px;
    border: 1px solid #888;
    width: 100px; /* Vrijednost širine */    
    font-size:15px;
    font-family: Arial;
    text-align: center;
    font-weight: bold;
    color:black;
}
.dalje:hover,
.dalje:focus {
    color: yellow;
    text-decoration: none;
    cursor: pointer;
}

/* Botun izborDA-NE */
.dane {    
    background-color:darkgreen;
    display:none;
    border: 2px solid #aa88ee;
    border-radius: 10px;
    padding: 10px;    
    width: 80px;    
    position:relative;      
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}
.dane:hover,
.dane:focus {
    color: yellow;
    text-decoration: none;
    cursor: pointer;
}

/* Botun NOVO */
.novo {    
    background-color:darkgreen;
    border: 2px solid #aa88ee;
    border-radius: 10px;
    padding: 10px;    
    width: 80px;    
    position:relative;   
    display:block;  
    color:white; 
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}
.novo:hover,
.novo:focus {
    color: yellow;
    text-decoration: none;
    cursor: pointer;
}
.botunurica {
  margin: 10% auto; /* 10% od vrha i centrirano */
  background-color: green; 
  border: double;
  border-radius: 10px;
  color: white;
  width: 100px;
  padding: 10px;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
}

.oznaka_bodovi
{
color:white;
font-size:15px;
text-align: center;
}

/* 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;
}
</style>
</head>

<body>
<center><h2>FIZIKA 7. razred</h2>
<p>3. cjelina - ENERGIJA, RAD I SNAGA (osnovni pojmovi)
<p>KVIZ DA ili NE</center>
<table id="tablica"><tr><td>
<center><p><b>UPUTE:</b> U sljedećoj vježbi imate niz od 5 pitanja i dva ponuđena odgovora: DA ili NE. Za početak vježbe pritisnite tipku DALJE. 
</center></td>
<td><center><INPUT TYPE='button' id='urica' name='urica' value='00:00:00' class='botunurica'>
<p><span class="oznaka_bodovi" id="bodovi">Broj bodova</span>
</center></td></tr>
<tr><td><center><p><INPUT TYPE='button' id='da' value='DA' class='dane' onclick='dada()'> 
<INPUT TYPE='button' id='novo' value='NOVO' class='novo' onclick='novonovo()'><INPUT TYPE='button' id='ne' value='NE' class='dane' onclick='nene()'></center></td>
<td><center><INPUT TYPE='button' id='dalje' class='dalje' onclick='ididalje()' value='DALJE  >>' class='botunprovjeri'></center></td></tr>
</table>

<script>
var tablica=document.getElementById("tablica");
var da=document.getElementById("da");
var ne=document.getElementById("ne");
var novo=document.getElementById("novo");
var bod=document.getElementById("bodovi");
var opseg;
opseg=4;
var pocetak=0;
var n=0;
var odg=0; //odg=0 NE, odg=1 DA
var poruka="";
 
var pitanje=[];
pitanje[0]="Tijelo obavlja rad ako savladava neku silu na određenoj duljini puta.";
pitanje[1]="Kad držimo teret na ruci obavljamo mehanički rad koji ovisi o težini tereta.";
pitanje[2]="SI jedinica za obavljeni rad je džul (joule), oznaka: J.";
pitanje[3]="Mjerna jedinica za energiju je njutn, oznaka: N.";
pitanje[4]="Rad je veći ako je sila kojom djelujemo na tijelo veća i ako je duljina puta na kojem se obavlja rad veća.";
pitanje[5]="Energiju tijela možemo po volji stvarati, uništavati i mijenjati..";
pitanje[6]="Energija je sposobnost tijela da može obavljati rad.";
pitanje[7]="Kinetičku energiju tijela računamo tako da pomnožimo silu i prijeđeni put, W=Fs.";
pitanje[8]="Tijelu koje obavlja rad energija se smanjuje (ono je izvor energije).";
pitanje[9]="Svako tijelo ima elastičnu potencijalnu energiju, ako mu radom promijenimo oblik.";
pitanje[10]="Tijelo obavi rad od jednog džula ako savlada silu od 1 N na putu od 1 m.";
pitanje[11]="Dok tijelo slobodno pada, njegova gravitacijska potencijalna energija se povećava, a kinetička energija se smanjuje.";
pitanje[12]="Tijelo koje se giba ima kinetičku energiju (Ek) - energiju gibanja.";
pitanje[13]="Primjeri kinetičke energije su: gravitacijska, kemijska i elastična energija.";
pitanje[14]="Potencijalnu energiju (Ep) ima tijelo zbog svog položaja ili stanja u kojem se nalazi.";
pitanje[15]="Primjeri potencijalne energije su energija vjetra, svjetlost i toplina.";
pitanje[16]="Gravitacijsku potencijalnu energiju ima tijela na određenoj visini iznad Zemlje.";
pitanje[17]="Osnovna SI jedinica za snagu je vatsekunda, Ws ili kilovatsat, kWh.";
pitanje[18]="Za podizanje tijela težine G na visinu h iznad površine Zemlje treba izvršiti rad: W = G h koji je jednak povećanju gravitacijske potencijalne energije tijela.";
pitanje[19]="Snaga je fizikalna veličina koja izražava koliki rad obavi čovjek ili stroj u jedinici vremena.";
pitanje[20]="Zakon očuvanja energije kaže da se energija ne može stvoriti niti nestati, nego se samo pretvara iz jednog oblika u drugi ili prelazi s jednog tijela na drugo.";

var odgovor=[];
odgovor=[1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,1,1];
var red; red=0; //redni broj
var tocni=0; //broj točnih odgovora
var gotovo=0; //ako je broj pitanja=5 kviz je gotov i prikazuje se obavijest o uspjehu
var odgovoreno=0; //korisnik je već odgovarao na to pitanje
//miješanje rednih brojeva, u rasponu od a=0 do a=4; izbor 5 pitanja
  var a=[];
  while(a.length<=4){
    var r=Math.round(Math.random()*20);
    if(a.indexOf(r)===-1) a.push(r);
    }

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(){  
  n++;
  odgovoreno=0;
  if(pocetak==0) {stoperica();n=0;tocni=0;odg=0;pocetak=1;}
  novo.style.display = "none";
  tablica.rows[0].cells[0].style.fontSize="16px";
  tablica.rows[0].cells[0].style.color="white";
  tablica.rows[0].cells[0].style.textAlign="left";
  da.style.display = "inline-block";
  ne.style.display = "inline-block"; 
  tablica.rows[0].cells[0].innerText=n+1+". pitanje: "+pitanje[a[n]]; 
  if(n>opseg) {
    tablica.rows[0].cells[0].innerText="Ovo je bilo zadnje pitanje!\nPritisnite NOVO za novu vježbu!";
    novo.style.display = "inline-block";
    da.style.display = "none";
    ne.style.display = "none";
  } 
}

function dada(){
// Kada korisnik klikne na(DA), tada je odg=1
    odg=1;
    tablica.rows[0].cells[0].style.fontSize="20px";
    tablica.rows[0].cells[0].style.color="yellow";
    tablica.rows[0].cells[0].style.textAlign="center";
    if(odgovoreno==1) return;
    if(odg==odgovor[a[n]]) { 
      poruka="TOČNO";   
      tablica.rows[0].cells[0].innerText=poruka;           
      tocni++;bodovi.innerHTML="Broj bodova: "+tocni;
    } 
    else {
      poruka="POGREŠNO!";
      tablica.rows[0].cells[0].innerText=poruka; 
    } 
       
    if((n+1)>opseg) {
      tablica.rows[0].cells[0].innerText="5. pitanje: "+pitanje[a[4]];
      da.style.display = "none";
      ne.style.display = "none";
      novo.style.display = "inline-block";
      if(tocni==(opseg+1)){  
        tablica.rows[0].cells[0].innerText="BRAVO! Svih 5 odgovora je točno!\nVježbu ste riješili za "+intm+" min "+ints+" s"; 
        }        
      else
        tablica.rows[0].cells[0].innerText=poruka+"\nTočnih odgovora je bilo: "+tocni+"\nTrebalo vam je "+intm+" min "+ints+" s";         
      } 
    odgovoreno=1;     
}

function nene(){
// Kada korisnik klikne na <span>(NE), tada je odg=0
    odg=0; 
    tablica.rows[0].cells[0].style.fontSize="20px";
    tablica.rows[0].cells[0].style.color="yellow";
    tablica.rows[0].cells[0].style.textAlign="center";
    if(odgovoreno==1) return;
    if(odg==odgovor[a[n]]) { 
      poruka="TOČNO";   
      tablica.rows[0].cells[0].innerText=poruka;           
      tocni++;bodovi.innerHTML="Broj bodova: "+tocni;
    } 
    else {
      poruka="POGREŠNO!";
      tablica.rows[0].cells[0].innerText=poruka; 
    } 
       
    if((n+1)>opseg) {
      tablica.rows[0].cells[0].innerText="5. pitanje: "+pitanje[a[4]];
      da.style.display = "none";
      ne.style.display = "none";
      novo.style.display = "inline-block";
      if(tocni==(opseg+1)){        
        tablica.rows[0].cells[0].innerText="BRAVO! Svih 5 odgovora je točno!\nVježbu ste riješili za "+intm+" min "+ints+" s";
        }        
      else
        tablica.rows[0].cells[0].innerText=poruka+"\nTočnih odgovora je bilo: "+tocni+"\nTrebalo vam je "+intm+" min "+ints+" s";         
      } 
    odgovoreno=1;                  
 }

function novonovo(){
  location.reload();
  //pocetak=1;
  n=0;
  poruka="";
  tocni=0;
  //stoperica();
  novo.style.display="none";
  tablica.rows[0].cells[0].style.fontSize="15px";
  tablica.rows[0].cells[0].style.color="white";
  tablica.rows[0].cells[0].style.textAlign="left";
}
</script>

</body>
</html>