<!DOCTYPE html>
<HEAD>
<TITLE>Slagalica84</TITLE>
<STYLE>
body {
      background-color: #aa6642;
      margin: 30px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-family: Arial;
      font-size: 20px;
      color:white;
    }

    #contentContainer {
      width: 600px;
      height: 120px;
      border: 1px #fff solid;
      overflow: hidden;
      display: flex;
      align-items: center;
      padding:10px;
      background-color: #663322;
      font-size: 18px;
      color:#fff;
    }
   #botunpocetak {
      margin: 10px;
      width: 80px;
      border: double;
      background-color: #126632;
      border-radius: 10px;
      padding: 10px;
      text-align: center;
      font-size: 15px;
      color:white;
    }
   #botunpocetak:hover,
   #botunpocetak:focus {
     color: yellow;
     text-decoration: none;
     cursor: pointer;
   }

.upis{
  background-color: #6b8;
  border:single;
  width:600px;
  height:35px;
  font-size:20px;
  color:black; 
}

.botunprovjeri {
  background-color: #663322; 
  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;
}

.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;
}

table
{
font-family: Arial;
border-spacing: 0px;
width: 100%;
}
td:first-child
{
width: 80%;
color:white;
font-size:18px;
padding:2%;
}
td:nth-child(2)
{
width: 20%;
color:white;
padding:2%;
}
.obavijest{
  background-color: #99ddff; /* boja pozadine na kojoj je tekst */
}

</STYLE>
</head>

<body bgcolor="#4488ee">
<center>
<table>
<tr>
<td><h1>Slagalica</h1>
Fizika 8. razreda - definicije iz 4. cjeline
<br>SVJETLOST</td>
<form name="forma">
<td><INPUT TYPE='button' id='urica' name='urica' value='00:00:00' class='botunurica'>
</form></td>
</tr>
</table>
<p>
<div id="contentContainer">
<span id="span1" class="contentContainer">Ovdje će biti upisana neka rečenica (pravilo) iz 4. cjeline s izmiješanim riječima. U okvir napišite rečenicu s ispravno poslaganim riječima i kliknite na 'Provjeri'. Imate mogućnost pogađanja 5 rečenica.</span>
<p><div id="botunpocetak" class="botunpocetak" onclick="uvod()">KRENI!</div>
</div>

<p>Upiši svoj odgovor: 
<p><INPUT TYPE='text' id='tekst' class='upis' name='tekst' size='40' value=''>
<p><INPUT TYPE='button' name='provjeri' onclick='provjeri()' value='PROVJERI' class='botunprovjeri'>
<INPUT TYPE='button' id='dalje' name='dalje' onclick='ididalje()' value='DALJE >>' class='botunprovjeri'>
</center>

<script>
var definicije=[]; //popis definicija iz gradiva 
var izabranadefinicija=[]; // nekoliko (5) izabranih definicija za ovu igru
var mijesanadefinicija=[]; //definicija koja se upravo pogađa s pomiješanim riječima
var okvir=document.getElementById("contentContainer");
var span1=document.getElementById("span1");
var botunpocetak = document.querySelector("#botunpocetak");
var botundalje=document.getElementById("dalje");
var n=0; //redni broj izabranog pojma
var trenutnadefinicija=[];
var tekst=document.getElementById("tekst");
var bodovi=0; var vecprovjereno=0; var kreni=0;

definicije[0]=["TIJELA", "IZ", "KOJIH", "DOLAZI", "SVJETLOST", "DO", "NAŠIH", "OČIJU", "ZOVEMO", "IZVORI", "SVJETLOSTI"];
definicije[1]=["SVJETLOSNI", "IZVORI", "KOJI", "ZRAČE", "VLASTITU", "SVJETLOST", "SU", "PRIMARNI", "IZVORI"];
definicije[2]=["OPTIČKO", "SREDSTVO", "JE", "TVAR", "KROZ", "KOJU", "PROLAZI", "SVJETLOST"];
definicije[3]=["TIJELA", "KOJA", "ZRAČE", "SVJETLOST", "KOJA", "OD", "NJIH", "ODBIJA", "ZOVU", "SE", "SEKUNDARNI", "IZVORI"];
definicije[4]=["SVJETLOST", "SE", "UNUTAR", "ISTOG", "SREDSTVA", "RASPROSTIRE", "PRAVOCRTNO"];
definicije[5]=["PRAVAC", "ŠIRENJA", "SVJETLOSTI", "NAZIVAMO", "ZRAKOM", "SVJETLOSTI"];
definicije[6]=["KAD", "SVJETLOST", "PADNE", "NA", "NEPROZIRNU", "POVRŠINU", "ONA", "MIJENJA", "PRAVAC", "RASPROSTIRANJA"];
definicije[7]=["PRI", "ODBIJANJU", "SVJETLOSTI", "KUT", "UPADANJA", "JEDNAK", "JE", "KUTU", "ODBIJANJA"];
definicije[8]=["RAVNO", "ZRCALO", "DAJE", "PRIVIDNE", "I", "USPRAVNE", "SLIKE", "ISTE", "VELIČINE", "KAO", "ŠTO", "JE", "I", "PREDMET"];
definicije[9]=["SVJETLOST", "ODBIJENU", "OD", "NERAVNE", "POVRŠINE", "NAZIVAMO", "DIFUZNA", "SVJETLOST"];
definicije[10]=["SFERNO", "ZRCALO", "JE", "DIO", "UGLAČANE", "KUGLINE", "PLOHE"];
definicije[11]=["ŽARIŠTE", "JE", "TOČKA", "U", "KOJOJ", "SE", "NAKON", "ODBIJANJA", "SIJEKU", "ZRAKE", "PARALELNOG", "SNOPA", "SVJETLOSTI"];
definicije[12]=["UDUBLJENO", "ZRCALO", "DAJE", "STVARNE", "SLIKE", "AKO", "JE", "PREDMET", "IZVAN", "ŽARIŠNE", "DALJINE"];
definicije[13]=["AKO", "JE", "PREDMET", "UNUTAR", "ŽARIŠNE", "DALJINE", "UDUBLJENOG", "ZRCALA", "SLIKA", "JE", "PRIVIDNA"];
definicije[14]=["PRI", "PRIJELAZU", "IZ", "JEDNOG", "SREDSTVA", "U", "DRUGO", "SVJETLOST", "SE", "LOMI", "NA", "GRANICI", "DVAJU", "SREDSTAVA"];
definicije[15]=["OPTIČKA", "LEĆA", "JE", "DIO", "OPTIČKOG", "SREDSTVA", "OMEĐENOG", "KUGLINIM", "PLOHAMA"];
definicije[16]=["SABIRNA", "LEĆA", "SKUPLJA", "SVJETLOSNE", "ZRAKE"];
definicije[17]=["RASTRESNE", "LEĆE", "UVIJEK", "DAJU", "PRIVIDNE", "I", "USPRAVNE", "SLIKE"];
definicije[18]=["SABIRNA", "LEĆA", "DAJE", "STVARNU", "SLIKU", "KADA", "JE", "PREDMET", "NA", "UDALJENOSTI", "VEĆOJ", "OD", "ŽARIŠNE", "DALJINE"];

//miješanje rednih brojeva pojmova, u rasponu od s=0 do s=18
var s=[];
while(s.length<=17){
  var r=Math.round(Math.random()*18);
  if(s.indexOf(r)===-1) s.push(r);
  } 

//izbor 5 definicija za pogađanje
for(i=0;i<=4;i++){
  izabranadefinicija[i]=definicije[s[i]];
  }

function pomijesaj(def){
  var t=[];
  //var def=[];
  mijesanadefinicija=[];
  while(t.length<def.length){
    var r=Math.floor(Math.random()*def.length);
    if(t.indexOf(r)===-1) t.push(r);
    } 
  for(i=0;i<def.length;i++){
    mijesanadefinicija=mijesanadefinicija+" "+def[t[i]];
    }
  return mijesanadefinicija;
}

function uvod(){
  tekst.style.color="black";
  okvir.style.display="block";
  kreni=1;
  tekst.textContent="";
  for(i=0;i<izabranadefinicija[0].length;i++)
    {trenutnadefinicija=trenutnadefinicija+" "+izabranadefinicija[0][i];} 
  mijesanadefinicija=pomijesaj(izabranadefinicija[0]);
  botunpocetak.style.display = "none";
  stoperica();
  span1.innerText = "1. primjer:\n"+mijesanadefinicija;  
}
    
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();

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);
  document.forma.urica.value=odbrojavanje;
}
var k=0;
var trenutna=[];
function ididalje(){ 
  vecprovjereno=0;
  trenutnadefinicija=[];
  mijesanadefinicija=[];
  trenutna=[];
  if(kreni==0){alert("Prvo pritisni tipku KRENI!");return;}
  k++;
  tekst.value="";
  trenutna=izabranadefinicija[k];
  for(i=0;i<trenutna.length;i++)
      {trenutnadefinicija=trenutnadefinicija+" "+trenutna[i];} 
  mijesanadefinicija=pomijesaj(trenutna);
  span1.innerText=(k+1)+". primjer\n"+mijesanadefinicija;
  if(k==4) {botundalje.style.display="none";return;}
}

function provjeri(){
  var poruka="";
  if(kreni==0) {alert("Prvo pritisni na 'Kreni'");return;}
  if(vecprovjereno==1) {alert("Već smo provjerili!");return;}
  var odgovor=[];
  odgovor=tekst.value.toUpperCase()   // .trim() ili .replace(/^\s+|\s+$/g,'');
  if (odgovor=="") {alert("Niste ništa upisali!");return;}
  odgovor=odgovor.replace(/^\s+|\s+$/g,'');
  trenutnadefinicija=trenutnadefinicija.replace(/^\s+|\s+$/g,'');
  vecprovjereno=1;
  if (odgovor==trenutnadefinicija) {
    poruka=(k+1)+". primjer\nTOČNO!";
    span1.innerText=poruka;
    bodovi++;}
  else{
    poruka="POGREŠNO!\nOdgovor je:\n"+trenutnadefinicija;
    span1.innerText=poruka;}
  if(k==4){
    alert(poruka+"\nUkupno ste potrošili "+intm+" minuta "+ints+" sekunda.\n"+"Točno ste riješili "+bodovi+" pitanja.");location.reload();}
}

</script>

</body>
<html>