<!DOCTYPE html>
<head>
<title>kviz-ponavljanje</title>
<style>
.odgovor {
  border-radius: 30px;
  background-color: blue; 
  border: double;
  color: white;
  width: 320px;
  padding: 15px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
}

.botun {
  border-radius: 30px;
  background-color: #1122bb; 
  border: double;
  color: white;
  width: 160px;
  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 8. razred</h1>
4. 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 8. razreda</center>
</td>
<td valign='center'><center>
<p class="oznaka_razina" id="p1">Osnovna pravila</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 pitanje1=[]; //popis pitanja prve razine
var pitanje2=[]; //popis pitanja druge razine
var pitanje=[]; //izabrana pitanja, po 5 iz prve i 5 iz druge razine
var odgovor1=[]; //popis odgovora na pitanja prve razine
var odgovor2=[]; //popis odgovora na pitanja druge razine
var odgovor=[]; //izabrani odgovori, 5*4 iz prve i 5*4 iz druge razine
var n=0; //redni broj pitanja

//Pitanja prve razine - osnovne definicije
pitanje1[0]="Znanost koja proučava svjetlost zove se...";
pitanje1[1]="Tijela koja zrače (emitiraju) svjetlost nazivaju se...";
pitanje1[2]="Užarena tijela, vatra, svijeća, ionizirani plin, neonska svjetla primjeri su za...";
pitanje1[3]="Tijela koja odbijaju svjetlost iz drugih izvora (Mjesec, zidovi, stijene,oblaci) su...";
pitanje1[4]="Prozirnu tvar kroz koju prolazi svjetlost zovemo...";
pitanje1[5]="Svjetlost se od izvora kroz prostor (kroz isto sredstvo) rasprostire..."; 
pitanje1[6]="Pravac koji predočava smjer širenja svjetlosti zove se..."; 
pitanje1[7]="Prostor u koji ne mogu ući zrake svjetlosti, zbog svog pravocrtnog rasprostiranja zove se..."; 
pitanje1[8]="Da bismo dobili oštru sjenu, moramo imati..."; 
pitanje1[9]="Koliko iznosi brzina svjetlosti u vakuumu?"; 
pitanje1[10]="Optičko sredstvo u kojem svjetlost ima veću brzinu zove se...";
pitanje1[11]="Optički gušće sredstvo je ono u kojem svjetlost ima...";
pitanje1[12]="Svaka ravna uglačana ploha koja odbija zrake svjetlosti zove se...";
pitanje1[13]="Kada svjetlost naiđe na neravnu površinu, nastaje...";
pitanje1[14]="Sliku koju stvara ravno zrcalo ne možemo uhvatiti na zastoru pa je zovemo...";
pitanje1[15]="Zakrivljena, uglačana ploha koja je dio kugline plohe zove se...";
pitanje1[16]="Dio kugline ili neke druge zakrivljene plohe uglačane s unutarnje strane je...";
pitanje1[17]="Dio kugline ili neke druge zakrivljene plohe uglačane s vanjske strane je...";
pitanje1[18]="Udaljenost od žarišta do sfernog zrcala zove se...";
pitanje1[19]="Leće koje su u sredini deblje, a na rubovima tanje i imaju svojstvo da skupljaju zrake svjetlosti zovu se...";
pitanje1[20]="Leće koje su u sredini tanke, a na rubovima deblje i imaju svojstvo da rasipaju zrake svjetlosti zovu se...";

//Pitanja druge razine - malo razmišljanja
pitanje2[0]="Proširi li se svjetlost od izvora do našeg oka trenutno ili joj za to treba određeno  vrijeme?...";
pitanje2[1]="Nastanak sjene i polusjene je posljedica...";
pitanje2[2]="Pomrčina Mjeseca nastaje kada je...";
pitanje2[3]="Pomrčina Sunca nastaje kada je...";
pitanje2[4]="Zašto samo jedan uski pojas na Zemlji može ući u područje Mjesečeve sjene, a ne cijela Zemlja?";
pitanje2[5]="Izrazom "+String.fromCharCode(945)+"="+String.fromCharCode(945)+"', iskazujemo zakon:"; 
pitanje2[6]="Dovrši rečenicu: Upadni kut je kut koji zatvara upadna zraka ..."; 
pitanje2[7]="Do odbijanja (refleksije) svjetlosti dolazi onda kada svjetlost..."; 
pitanje2[8]="Tri karakteristične zrake sfernog zrcala služe nam za..."; 
pitanje2[9]="Ako se predmet nalazi daleko od središta zakrivljenosti sfernog zrcala, slika je..."; 
pitanje2[10]="Ako se predmet se nalazi u žarištu sfernog zrcala...";
pitanje2[11]="Ako se predmet nalazi između žarišta i tjemena, tj. unutar žarišne daljine, slika je...";
pitanje2[12]="Kod ispupčenog (konveksnog) sfernog zrcala slika je...";
pitanje2[13]="Do loma svjetlosti dolazi kada zraka svjetlosti...";
pitanje2[14]="Kada svjetlost prelazi iz optički rjeđeg u optički gušće sredstvo, tada se...";
pitanje2[15]="Kada svjetlosna zraka prelazi iz optički gušćeg u optički rjeđe sredstvo, tada se...";
pitanje2[16]="Pri prijelazu iz optički gušćeg u rjeđe sredstvo, upadni kut kod kojeg je kut loma jednak 90° zove se...";
pitanje2[17]="Nakon prolaza kroz sabirnu leću, paralelan snop se nakon loma...";
pitanje2[18]="Nakon prolaza kroz rastresnu leću, paralelan snop se nakon loma...";
pitanje2[19]="Nakon loma složene svjetlosti kroz optičku prizmu (i druga prozirna tijela) nastaje disperzija - razlaganje na osnovne boje zbog...";
pitanje2[20]="Sunčevu svjetlost i svjetlost užarenih čvrstih tijela koja se sastavljena od svih boja vidljive svjetlosti naše oko vidi kao...";

//Odgovori na pitanja 1. razine - osnovni pojmovi
odgovor1[0]="optika."; //1. odgovor
odgovor1[1]="oftalmologija.";
odgovor1[2]="okulistika.";
odgovor1[3]="fototehnika.";

odgovor1[4]="svjetlosni izvori"; //2. odg
odgovor1[5]="svjetlosne zrake";
odgovor1[6]="toplinski izvori";
odgovor1[7]="električni izvori";

odgovor1[8]="primarne izvore."; //3.odg
odgovor1[9]="sekundarne izvore.";
odgovor1[10]="prirodne izvore.";
odgovor1[11]="tercijarne izvore.";

odgovor1[12]="sekundarne izvore."; //4.odg
odgovor1[13]="primarne izvore.";
odgovor1[14]="prirodne izvore.";
odgovor1[15]="umjetne izvore.";

odgovor1[16]="optičko sredstvo."; //5.odg
odgovor1[17]="prepreka.";
odgovor1[18]="stakleno sredstvo.";
odgovor1[19]="vodeno sredstvo.";

odgovor1[20]="pravocrtno."; //6.odg
odgovor1[21]="po krivulji.";
odgovor1[22]="po ravnini.";
odgovor1[23]="nepravilno.";

odgovor1[24]="svjetlosna zraka."; //7.odg
odgovor1[25]="snop svjetlosti.";
odgovor1[26]="pravac svjetlosti.";
odgovor1[27]="svjetlosna krivulja.";

odgovor1[28]="sjena."; //8.odg
odgovor1[29]="polusjena.";
odgovor1[30]="mrak.";
odgovor1[31]="tama.";

odgovor1[32]="točkasti izvor."; //9.odg
odgovor1[33]="kuglasti izvor.";
odgovor1[34]="ravni izvor.";
odgovor1[35]="izvor većih dimenzija.";

odgovor1[36]="oko 300 000km/s."; //10.odg
odgovor1[37]="oko 300 000 m/s.";
odgovor1[38]="točno 300 000 000 km/s.";
odgovor1[39]="oko 300 000 km/h.";

odgovor1[40]="optički rjeđe."; //11.odg
odgovor1[41]="optički gušće.";
odgovor1[42]="prividno rjeđe.";
odgovor1[43]="prividno gušće.";

odgovor1[44]="manju brzinu."; //12.odg
odgovor1[45]="veću brzinu.";
odgovor1[46]="pravocrtan smjer.";
odgovor1[47]="zakrivljen smjer.";

odgovor1[48]="ravno zrcalo."; //13.odg
odgovor1[49]="sferno zrcalo.";
odgovor1[50]="zakrivljeno zrcalo.";
odgovor1[51]="ravna prepreka.";

odgovor1[52]="difuzna (raspršena) svjetlost."; //14.odg
odgovor1[53]="disperzna svjetlost.";
odgovor1[54]="lomljena svjetlost.";
odgovor1[55]="odbijena (reflektirana) svjetlost.";

odgovor1[56]="prividnom ili virtualnom."; //15.odg
odgovor1[57]="stvarnom ili realnom.";
odgovor1[58]="nevidljivom ili skrivenom.";
odgovor1[59]="zamišljenom ili imaginarnom.";

odgovor1[60]="sferno zrcalo."; //16.odg
odgovor1[61]="udubljeno zrcalo.";
odgovor1[62]="konkavno zrcalo.";
odgovor1[63]="konveksno zrcalo.";

odgovor1[64]="konkavno zrcalo."; //17.odg
odgovor1[65]="konveksno zrcalo.";
odgovor1[66]="izbočeno zrcalo.";
odgovor1[67]="zakrivljeno zrcalo.";

odgovor1[68]="konveksno zrcalo."; //18.odg
odgovor1[69]="udubljeno zrcalo.";
odgovor1[70]="ravno zrcalo.";
odgovor1[71]="konkavno zrcalo.";

odgovor1[72]="žarišna daljina."; //19.odg
odgovor1[73]="polumjer zakrivljenosti.";
odgovor1[74]="polumjer zrcala.";
odgovor1[75]="promjer zrcala.";

odgovor1[76]="sabirne (konvergentne)."; //20.odg
odgovor1[77]="rastresne (divergentne).";
odgovor1[78]="konkavne (udubljene).";
odgovor1[79]="zakrivljene.";

odgovor1[80]="rastresne (divergentne)."; //21.odg
odgovor1[81]="sabirne (konvergentne).";
odgovor1[82]="konkveksne (ispupčene).";
odgovor1[83]="zakrivljene leće.";

//Odgovori na pitanja 2. razine - malo razmišljanja
//općenito: za n-to pitanje (n=0 do 4) odgovori su od 4*n do 4*n+i
odgovor2[0]="svjetlost ima konačnu brzinu"; //1. odgovor 	
odgovor2[1]="svjetlost se širi trenutno";
odgovor2[2]="brzina svjetlosti je neizmjerna";
odgovor2[3]="još nije utvrđeno";

odgovor2[4]="pravocrtnog rasprostiranja svjetlosti."; //2. odg		
odgovor2[5]="rasprostiranja svjetlosti po krivulji.";
odgovor2[6]="konačne brzine svjetlosti.";
odgovor2[7]="beskonačne brzine svjetlosti.";

odgovor2[8]="Zemlja između Sunca i Mjeseca."; //3.odg		
odgovor2[9]="Mjesec između Sunca i Zemlje.";
odgovor2[10]="Sunce između Zemlje i Mjeseca.";
odgovor2[11]="Sunce, Zemlja i Mjesec na istom pravcu.";

odgovor2[12]="Mjesec između Sunca i Zemlje."; //4.odg		
odgovor2[13]="Sunce između Zemlje i Mjeseca.";			
odgovor2[14]="Zemlja između Sunca i Mjeseca.";
odgovor2[15]="Sunce na suprotnoj strani od Zemlje.";		

odgovor2[16]="jer je Mjesec puno manji od Zemlje."; //5.odg
odgovor2[17]="jer je Sunce puno dalje od Mjeseca.";
odgovor2[18]="jer je Mjesec jako daleko.";
odgovor2[19]="jer je Sunce puno veće od Zemlje.";

odgovor2[20]="odbijanja (refleksije) svjetlosti."; //6.odg
odgovor2[21]="loma (refrakcije) svjetlosti.";
odgovor2[22]="disperzije (rasapa) svjetlosti.";
odgovor2[23]="difuzije (raspršenja) svjetlosti.";

odgovor2[24]="s okomicom na prepreku."; //7.odg
odgovor2[25]="s ravninom prepreke.";
odgovor2[26]="s odbijenom zrakom.";
odgovor2[27]="s lomljenom zrakom.";

odgovor2[28]="naiđe na prepreku."; //8.odg
odgovor2[29]="naiđe na drugo sredstvo.";
odgovor2[30]="stigne do ravne podloge.";
odgovor2[31]="stigne do neravne površine.";

odgovor2[32]="konstrukciju slike."; //9.odg
odgovor2[33]="proračun sfernog zrcala.";
odgovor2[34]="računanje kuta odbijanja.";
odgovor2[35]="računanje upadnog kuta.";

odgovor2[36]="obrnuta, umanjena i stvarna."; //10.odg
odgovor2[37]="uspravna, umanjena i prividna";
odgovor2[38]="obrnuta, uvećana i stvarna.";
odgovor2[39]="uspravna, umanjena i prividna.";

odgovor2[40]="nema slike."; //11.odg
odgovor2[41]="slika je s druge strane zrcala.";
odgovor2[42]="slika nije vidljiva.";
odgovor2[43]="slika je uvećana.";

odgovor2[44]="uspravna, uvećana i prividna."; //12.odg
odgovor2[45]="uspravna, umanjena i prividna.";
odgovor2[46]="obrnuta, umanjena i stvarna.";
odgovor2[47]="obrnuta, uvećana i stvarna.";

odgovor2[48]="uvijek uspravna i prividna."; //13.odg
odgovor2[49]="uvijek obrnuta i umanjena.";
odgovor2[50]="uvijek uspravna i uvećana.";
odgovor2[51]="nekad uvećana, nekad umanjena.";

odgovor2[52]="prelazi u drugo optičko sredstvo."; //14.odg
odgovor2[53]="naiđe na prepreku.";
odgovor2[54]="prolazi kroz vrlo gusto optičko sredstvo.";
odgovor2[55]="promijeni upadni kut.";

odgovor2[56]="lomi prema okomici."; //15.odg
odgovor2[57]="lomi od okomice.";
odgovor2[58]="uopće ne lomi.";
odgovor2[59]="odbija od granice.";

odgovor2[60]="lomi od okomice."; //16.odg
odgovor2[61]="lomi prema okomici.";
odgovor2[62]="odbija od granice sredstava.";
odgovor2[63]="raspršuje na površini.";

odgovor2[64]="granični kut."; //17.odg
odgovor2[65]="kut loma.";
odgovor2[66]="upadni kut.";
odgovor2[67]="kut odbijanja.";

odgovor2[68]="skuplja u jednoj točki (žarištu)."; //18.odg
odgovor2[69]="razilazi na sve strane.";
odgovor2[70]="skuplja u središtu leće.";
odgovor2[71]="odbija od površine leće.";

odgovor2[72]="razilazi na sve strane."; //19.odg
odgovor2[73]="skuplja u žarištu.";
odgovor2[74]="skuplja u središtu leće.";
odgovor2[75]="odbija od površine leće.";

odgovor2[76]="različitog loma sastavnih boja."; //20.odg
odgovor2[77]="promjene valnih duljina.";
odgovor2[78]="različitih vrsta čestica.";
odgovor2[79]="promjene gustoće.";

odgovor2[80]="bijelu svjetlost."; //21.odg
odgovor2[81]="svjetlost duginih boja.";
odgovor2[82]="žutu svjetlost.";
odgovor2[83]="šarenu svjetlost.";

//miješanje rednih brojeva, u rasponu od a=0 do a=4
  var a=[];
  while(a.length<=4){
    var r=Math.round(Math.random()*20);
    if(a.indexOf(r)===-1) a.push(r);
    }
//popunjavanje pitanja 1.razine iz popisa po slučajnom uzorku
for(i=0;i<=4;i++){
  pitanje[i]=pitanje1[a[i]];
  odgovor[4*i]=odgovor1[4*a[i]];
  odgovor[4*i+1]=odgovor1[4*a[i]+1];
  odgovor[4*i+2]=odgovor1[4*a[i]+2];
  odgovor[4*i+3]=odgovor1[4*a[i]+3];
}
//popunjavanje pitanja 2.razine iz popisa po slučajnom uzorku
for(i=0;i<=4;i++){
  pitanje[i+5]=pitanje2[a[i]];
  odgovor[4*(i+5)]=odgovor2[4*a[i]];
  odgovor[4*(i+5)+1]=odgovor2[4*a[i]+1];
  odgovor[4*(i+5)+2]=odgovor2[4*a[i]+2];
  odgovor[4*(i+5)+3]=odgovor2[4*a[i]+3];
}

var 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="SVJETLOST\nOva kratka provjera znanja sadrži 10 pitanja iz fizike 8.  razreda iz 4. cjeline, podijeljenih u 2 dijela: osnovne definicije i pitanja s malo razmišljanja.\nZa nastavak pritisni tipku Dalje>>";
}
    
function popuni1(){  //prvo pitanje
  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
  
  //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);
    }
  for(i=0;i<=3;i++){
    izbor_odgovor[i]=odgovor[4*n+i];
    if(s[i]==0) tocan=i; // 'tocan' je redni broj tocnog odgovora
    } 
  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[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[s[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="Osnovni pojmovi";
  if(n>4) oznakarazina.innerText="Malo razmišljanja";
  
  if(n==0) popuni1();
  else novopitanje(n);
  n++;
  kliknuto=0;
}

</script>
</body>
</html>