<!DOCTYPE html>
<html>
<head>
<title>FIZIKA 8 - 4. cjelina - kviz da-ne </title>
<meta charset="utf-8" />
<style>
body {
      background-color: #aa6644;
      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: #442115;
color:white;
font-size:15px;
padding:2%;
}
td:nth-child(2)
{
width: 30%;
background-color: #442115;
color:white;
font-size:12px;
}

/* botun dalje */
.dalje {
    background-color: #aa8844; /* boja pozadine na kojoj je tekst */
    border-radius: 10px;
    margin: 10% auto; /* 10% od vrha i centrirano */
    padding: 10px;
    border: 2px solid #fff;
    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;
}

</style>
</head>

<body>
<center><h2>FIZIKA 8. razred</h2>
<p>4. cjelina - SVJETLOST (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]="Tijela iz kojih dolazi svjetlost do naših očiju zovemo izvori svjetlosti.";
pitanje[1]="Sekundarni izvori su oni koji zrače vlastitu svjetlost.";
pitanje[2]="Svjetlosni izvori koji zrače vlastitu svjetlost su primarni izvori, ";
pitanje[3]="Optičko sredstvo je svaka tvar koja se koristi u optici.";
pitanje[4]="Svjetlost se unutar istog sredstva rasprostire pravocrtno.";
pitanje[5]="Brzina svjetlosti u vakuumu iznosi točno 300 000 km/h.";
pitanje[6]="Pravocrtnim rasprostiranjem objašnjavamo određivanje pravca u različitim poslovima, nastajanje sjene i polusjene, Mjesečeve faze, nastanak pomrčina Sunca i Mjeseca.";
pitanje[7]="Svjetlost se na neravnim površinama odbija u u istom smjeru. Tako nastalu svjetlost nazivamo paralelna svjetlost.";
pitanje[8]="Kad svjetlost padne na neprozirnu uglačanu površinu, ona mijenja pravac rasprostiranja - zrake svjetlosti se od nje odbijaju.";
pitanje[9]="Ravno zrcalo daje stvarne i obrnute slike iste veličine kao što je i predmet.";
pitanje[10]="Pri odbijanju svjetlosti kut upadanja jednak je kutu odbijanja (zakon odbijanja ili refleksije svjetlosti).";
pitanje[11]="Žarišna daljina je udaljenost od žarišta do neke točke na površini sfernog zrcala.";
pitanje[12]="Žarište ili fokus je točka u kojoj se nakon odbijanja od konkvanog zrcala sijeku zrake paralelnog snopa svjetlosti.";
pitanje[13]="Konkavno sferno zrcalo je uglačano s vanjske strane i uvijek daje prividne slike. ";
pitanje[14]="Paralelne zrake svjetlosti skupljaju se nakon odbijanja od površine zrcala u točki koju zovemo žarište (fokus). ";
pitanje[15]="Udubljeno zrcalo daje realne (stvarne) slike ako je predmet unutar žarišne daljine.";
pitanje[16]="Ako je predmet unutar žarišne daljine sfernog zrcala, slika je uvijek prividna (virtualna).";
pitanje[17]="Prividna ili virtualna slika je uvijek obrnuta, a može se vidjeti u sjecištu odbijenih zraka.";
pitanje[18]="Realna ili stvarna slika se može uhvatiti na zastoru, uvijek je obrnuta a može se ponovno povećavati što se primjenjuje kod optičkih uređaja - dalekozora, teleskopa itd. ";
pitanje[19]="Optički gušće je ono sredstvo u kojem svjetlost ima veću brzinu, dok je kod optički rjeđeg sredstva brzina manja.";
pitanje[20]="Svjetlost se pri prijelazu iz jednog sredstva u drugo lomi na granici dvaju sredstava zbog promjene brzine rasprostiranja. ";
pitanje[21]="Prolazeći iz optički rjeđeg sredstva u optički gušće, svjetlost se lomi od okomice (tj. upadni kut je manji od kuta loma).";
pitanje[22]="Kada svjetlost prelazi iz optički rjeđeg u optički gušće sredstvo, kod nekog upadnog kuta bit će kut loma jednak 90°, a taj upadni kut pri kojem lomljena zraka prolazi graničnom površinom zove se granični kut. ";
pitanje[23]="Potpuno odbijanje ili totalna refleksija svjetlosti nastaje kada zrake svjetlosti upadaju pod kutom manjim od graničnog kuta kada se potpuno lome na granici sredstava.";
pitanje[24]="Optička leća je dio optičkog sredstva omeđenog kuglinim plohama. Leće mogu biti sabirne (konvergentne) ili rastresne (divergentne).";
pitanje[25]="Sabirna leća uvijek daje realnu ili stvarnu sliku kada se predmet postavi na udaljenost manju od žarišne daljine. ";
pitanje[26]="Rastresne leće uvijek daju prividne i uspravne slike.";
pitanje[27]="Žarište leće je točka u kojoj se nakon odbijanja sastaju zrake paralelnog snopa svjetlosti.";
pitanje[28]="Ako predmet stavimo između sabirne leće i žarišta nastaje prividna, uspravna i povećana slika - takvu leću zovemo povećalo.";
pitanje[29]="Svjetlost užarenih čvrstih tijela sastoji se od svih boja vidljive svjetlosti, a naše oko je vidi kao crnu boju.";
pitanje[30]="Disperzija (rasap) svjetlosti je pojava razlaganja višebojne svjetlosti na sastavne boje";

var odgovor=[];
odgovor=[1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,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()*30);
    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>