<!DOCTYPE html>
<head>
<title>Slagalica73</title>
<style>
body {
      background-color: #4266AA;
      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: #112266;
      font-size: 18px;
      color:#fff;
    }
   #botunpocetak {
      margin: 10px;
      width: 80px;
      border: double;
      background-color: #206642;
      border-radius: 10%;
      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: #115622; 
  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: darkgreen; 
  border: double;
  border-radius: 10px;
  color: white;
  width: 120px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  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 */
}

/* 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 bgcolor="#4488ee">
<center>
<table>
<tr>
<td><h1>Slagalica</h1>
Fizika 7. razreda - definicije iz 3. cjeline
<br>ENERGIJA, RAD I SNAGA</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 3. 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]=["ENERGIJA", "JE", "SPOSOBNOST", "TIJELA", "DA", "MOŽE", "OBAVLJATI", "RAD"];
definicije[1]=["OSNOVNA", "JEDINICA", "ZA", "ENERGIJU", "JE", "DŽUL"];
definicije[2]=["SILA", "OBAVLJA", "RAD", "KADA", "DJELUJE", "NA", "TIJELO", "PO", "ODREĐENOM", "PUTU"];
definicije[3]=["RAD", "SE", "IZRAČUNA", "TAKO", "DA", "POMNOŽIMO", "SILU", "I", "PUT"];
definicije[4]=["TIJELO", "KOJE", "IMA", "ENERGIJU", "MOŽE", "OBAVLJATI", "RAD"];
definicije[5]=["ELASTIČNU", "ENERGIJU", "IMA", "ELASTIČNO", "TIJELO", "KOJEM", "JE", "PROMIJENJEN", "OBLIK"];
definicije[6]=["POTENCIJALNU", "ENERGIJU", "IMA", "TIJELO", "ZBOG", "SVOG", "POLOŽAJA"];
definicije[7]=["KINETIČKU", "ENERGIJU", "IMA", "TIJELO",  "KOJE", "SE", "GIBA"];
definicije[8]=["ELASTIČNA", "I", "GRAVITACIJSKA", "ENERGIJA", "SU", "PRIMJERI", "POTENCIJALNE", "ENERGIJE"];
definicije[9]=["SILA", "KOJA", "DJELUJE", "OKOMITO", "NA", "TIJELO", "NE", "OBAVLJA", "RAD"];
definicije[10]=["GRAVITACIJSKU", "POTENCIJALNU", "ENERGIJU", "IMA", "TIJELO", "NA", "ODREĐENOJ", "VISINI", "IZNAD", "ZEMLJE"];
definicije[11]=["GRAVITACIJSKU", "POTENCIJALNU", "ENERGIJU", "TIJELA", "RAČUNAMO", "TAKO", "DA", "POMNOŽIMO", "NJEGOVU", "TEŽINU", "I", "VISINU", "NA", "KOJOJ", "SE", "NALAZI"];
definicije[12]=["SNAGA", "JE", "OBAVLJENI", "RAD", "U", "JEDINICI", "VREMENA"];
definicije[13]=["SNAGU", "RAČUNAMO", "TAKO", "DA", "PODIJELIMO", "RAD", "I", "VRIJEME"];
definicije[14]=["TIJELO", "IMA", "VEĆU", "SNAGU", "AKO", "ODREĐENI", "RAD", "OBAVI", "ZA", "KRAĆE", "VRIJEME"];
definicije[15]=["STROJ", "RADI", "SNAGOM", "OD", "JEDNOG", "VATA", "AKO", "OBAVI", "RAD", "OD", "JEDNOG", "DŽULA", "U", "JEDNOJ", "SEKUNDI"];
definicije[16]=["RAD", "OD", "JEDNOG", "DŽULA", "OBAVIMO", "AKO", "PREDMET", "TEŽINE", "JEDAN", "NJUTN", "POMAKNEMO", "ZA", "JEDAN", "METAR"];
definicije[17]=["STROJ", "OBAVI", "RAD", "OD", "JEDAN", "KILOVATSAT", "AKO", "RADI", "SNAGOM", "JEDAN", "KILOVAT", "JEDAN", "SAT"];
definicije[18]=["ENERGIJU", "NE", "MOŽEMO", "STVORITI", "NI", "UNIŠTITI", "NEGO", "SAMO", "PRENOSITI", "ILI", "PRETVARATI", "U", "DRUGI", "OBLIK"];

//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>