<!DOCTYPE html>
<HEAD>
<TITLE>Slagalica82</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 2. cjeline
<br>GIBANJE I SILA</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 2. 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]=["TIJELO", "MIRUJE", "KADA", "NE", "MIJENJA", "SVOJ", "POLOŽAJ", "PREMA", "OKOLINI"];
definicije[1]=["TIJELO", "SE", "GIBA", "KADA", "MIJENJA", "POLOŽAJ", "PREMA", "OKOLINI"];
definicije[2]=["PRIJEĐENI", "PUT", "JE", "UDALJENOST", "KOJU", "TIJELO", "PRIJEĐE", "ZA", "VRIJEME", "GIBANJA"];
definicije[3]=["OSNOVNA", "JEDINICA", "ZA", "VRIJEME", "JE", "SEKUNDA"];
definicije[4]=["OSNOVNA", "JEDINICA", "ZA", "BRZINU", "JE", "METAR", "U", "SEKUNDI"];
definicije[5]=["TIJELO", "SE", "GIBA", "JEDNOLIKO", "KADA", "PRIJEĐE", "ISTE", "DIJELOVE", "PUTA", "U", "ISTIM", "VREMENSKIM", "INTERVALIMA"];
definicije[6]=["VREMENSKI", "INTERVAL", "DOBIJEMO", "AKO", "OD", "KONAČNOG", "VREMENA", "ODUZMEMO", "POČETNO", "VRIJEME"];
definicije[7]=["S-T", "GRAF", "PRIKAZUJE", "OVISNOST", "PRIJEĐENOG", "PUTA", "O", "VREMENU"];
definicije[8]=["V-T", "GRAF", "PRIKAZUJE", "OVISNOST", "BRZINE", "O", "VREMENU"];
definicije[9]=["S-T", "GRAF", "JEDNOLIKOG", "GIBANJA", "JE", "PRAVAC"];
definicije[10]=["NAGIB", "S-T", "GRAFA", "PREDSTAVLJA", "BRZINU", "GIBANJA"];
definicije[11]=["POVRŠINA", "ISPOD", "V-T", "GRAFA", "IMA", "ZNAČENJE", "PRIJEĐENOG", "PUTA"];
definicije[12]=["AKCELERACIJA", "JE", "PROMJENA", "BRZINE", "U", "JEDINICI", "VREMENA"];
definicije[13]=["OSNOVNA", "JEDINICA", "ZA", "AKCELERACIJU", "JE", "METAR", "U", "SEKUNDI", "NA", "KVADRAT"];
definicije[14]=["V-T", "GRAF", "ZA", "JEDNOLIKO", "UBRZANO", "GIBANJE", "JE", "PRAVAC", "ČIJI", "NAGIB", "OZNAČAVA", "AKCELERACIJU"];
definicije[15]=["DJELOVANJE", "SILE", "NA", "TIJELO", "PREPOZNAJEMO", "PO", "AKCELERACIJI", "KOJU", "DAJE", "TOM", "TIJELU"];
definicije[16]=["SILA", "OD", "JEDAN", "NJUTN", "TIJELU", "MASE", "JEDAN", "KILOGRAM", "DAJE", "AKCELERACIJU", "JEDAN", "METAR", "U", "SEKUNDI", "NA", "KVADRAT"];
definicije[17]=["AKCELERACIJA", "SLOBODNOG", "PADA", "IZNOSI", "OKO", "10", "METARA", "U",  "SEKUNDI", "NA", "KVADRAT"];
definicije[18]=["SLOBODNI", "PAD", "JE", "JEDNOLIKO", "UBRZANO", "GIBANJE", "POD", "DJELOVANJEM", "SILE", "TEŽE"];

//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>