<!DOCTYPE html>
<head>
<title>Anagram74</title>
<style>
body {
      background-color: #4466aa;
      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: 550px;
      height: 120px;
      border: 5px #aabbff solid;
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      align-items: center;
      padding:10px;
      background-color: #4466ee;
      font-size: 18px;
      color:#bbddff;
    }
   #botunpocetak {
      width: 80px;
      border: double;
      background-color: #20a6dd;
      border-radius: 10%;
      padding: 10px;
      text-align: center;
      font-size: 15px;
      color:white;
    }
   #botunpocetak:hover,
   #botunpocetak:focus {
     color: yellow;
     text-decoration: none;
     cursor: pointer;
   }

.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;
}

.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%;
}

/* Modalni okvir (pozadina) */
.modal {  
    display: none; /* Skriveno u pocetku */
    position: fixed; /* Ostaje na mjestu */    
    z-index: 1; /* Iznad pozadine */
    width: 40%; 
    height: 20%; 
    align-items: center;
    background-color: rgb(100,0,3); /* Fallback color */
    background-color: rgba(0,0,1,0.1); /* Black w/ opacity */
}

/* Modalni sadržaj - unutarnji okvir */
.modal-content {
    background-color: #dca; /* boja pozadine na kojoj je tekst */
    display: none;
    position: fixed;
    margin: 20% auto; /* 20% od vrha i centrirano */
    padding: 20px;
    border: 3px solid #88b;
    width: 40%; 
    height: 20%;
    font-size:16px;
    font-family: Arial;
    text-align: center;
    font-weight: bold;
    color: black;
}

/* Botun izborDA-NE */
.dane { 
  border-radius: 10px;
  background-color: #226644; 
  border: double;
  color: white;
  width: 100px;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}
input:hover
{
color: yellow;
cursor: pointer;
}

/* Botun zatvori */
.zatvori {
    color: #66aadd;
    background-color:darkblue;
    border: 1px solid #5588ee;
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
}
.zatvori:hover,
.zatvori:focus {
    color: yellow;
    text-decoration: none;
    cursor: pointer;
}
.upis{
  background-color: #fff;
  border:single;
  width:200px;
  height:35px;
  font-size:25px;
  color:black; 
}
</STYLE>
</head>

<body bgcolor="#4488ee" onload="uvod()">
<!-- Modalni prozor sa sadrzajem i botunom -->
<div class="modal-content" id="myModal">  
  <center><div class="modal-body" id="modalbody"><p></div>
  <div class="modal-footer">
    <p><span><input type="button" class="dane" value="Zatvori"></span>
  </div>
</div></center>
</div>

<center>
<table>
<tr>
<td><h1>Anagrami (premetaljke)</h1>
<b>Fizika 7. razreda - pojmovi iz 4. cjeline - UNUTARNJA ENERGIJA</b></td>
<form name="forma">
<td><INPUT TYPE='button' id='urica' name='urica' value='00:00:00' class='botunurica'>
<p><INPUT TYPE='button' id='dalje' name='dalje' onclick='ididalje()' value='Dalje >>' class='botunprovjeri'></form></td>
</tr>
</table>
<p>
<div id="contentContainer">
  <span id="span1" class="contentContainer">Nova igra</span>
  <p><div id="botunpocetak" class="botunpocetak">Kreni!</div>
</div>

<!-- Modalni okvir za početak igre -->
<div id="myModal" class="modal">
  <!-- Modal sadržaj-->
  <div class="modal-content">
    <p>Želite li novu igru?</p>
    <span class="zatvori">DA</span>
    <span class="zatvori">NE</span>
  </div>
</div>
<p>
<table>
<tr><td>Upiši svoj odgovor: 
<INPUT TYPE='text' class='upis' id='tekst' name='tekst' size='40' value=''></td>
<td><INPUT TYPE='button' name='provjeri' onclick='provjeri()' value='Provjeri' class='botunprovjeri'></td></tr>
</table>
</center>

<!-- Modalni okvir za obavijest -->
<div id="Modal2" class="modal">
  <!-- Modalni sadržaj-->
  <div class="modal-content">
    <p><span class="obavijest">Nažalost, niste uspjeli.</span>
    <p>
    <span class="obavijestkraj">Nova igra</span>
    <span class="obavijestkraj">Izlaz</span>
  </div>
</div>

<script>
var pojmovi=[]; //popis pojmova iz gradiva 
var izabranipojmovi=[]; // nekoliko (5) izabranih pojmova za ovu igru
var mijesanipojam=""; //pojam koji se upravo pogađa s pomiješanim slovima
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 trenutnipojam="";
var tekst=document.getElementById("tekst");
var bodovi=0,vecprovjereno=0,kreni=0;
var poruka="";

pojmovi[0]="toplina";
pojmovi[1]="temperatura";
pojmovi[2]="termometar";
pojmovi[3]="kelvin";
pojmovi[4]="strujanje";
pojmovi[5]="vođenje";
pojmovi[6]="zračenje";
pojmovi[7]="anomalija";
pojmovi[8]="rastezanje";
pojmovi[9]="bimetal";
pojmovi[10]="zagrijavanje";
pojmovi[11]="hlađenje";
pojmovi[12]="hladnjak";
pojmovi[13]="molekula";
pojmovi[14]="čestica";
pojmovi[15]="kilodžul";

//miješanje rednih brojeva pojmova, u rasponu od s=0 do s=4
var s=[];
while(s.length<=4){
  var r=Math.round(Math.random()*15);
  if(s.indexOf(r)===-1) s.push(r);
  } 
//izbor 5 pojmova za pogađanje
for(i=0;i<=4;i++){
  izabranipojmovi[i]=pojmovi[s[i]];
  }

function pomijesaj(slova){
var t=[];
mijesanipojam="";
while(t.length<slova.length){
  var r=Math.floor(Math.random()*slova.length);
  if(t.indexOf(r)===-1) t.push(r);
  } 
for(i=0;i<slova.length;i++){
  mijesanipojam=mijesanipojam+slova[t[i]];
  }
return mijesanipojam;
}

function uvod(){
  tekst.style.color="black";
  okvir.style.display="block";
  span1.innerText = "Ovdje će biti upisan neki pojam s izmiješanim slovima. \nU okvir napišite svoje rješenje i kliknite na 'Provjeri'.\nImate mogućnost pogađanja 5 pojmova.";
  
  botunpocetak.onclick = function() {
    kreni=1;
    mijesanipojam=pomijesaj(izabranipojmovi[0]);
    trenutnipojam=izabranipojmovi[0];
    botunpocetak.style.display = "none";
    //botundalje.style.display = "block";
    stoperica();
    span1.style.fontWeight="bold";
    span1.style.fontSize="30px";
    span1.innerText="";
    span1.innerText = "1. pojam:\n"+mijesanipojam.toUpperCase();
    }
}
    
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;
}

function ididalje(){ 
  var okvir=document.getElementById("myModal");
  var sadrzaj=document.getElementById("modalbody");
  // Prijavi <span> element koji zatvara modalni okvir
  var zatvori=document.getElementsByClassName("dane")[0];

  if(kreni==0) {
    sadrzaj.innerText="Prvo pritisni na 'Kreni'"; 
    okvir.style.display = "block";
    // Kada korisnik klikne na <span>(Zatvori), zatvara se modalni okvir
    zatvori.onclick = function() {
    okvir.style.display = "none";}
    return;}
  if(vecprovjereno==0) {
    sadrzaj.innerText="Još niste provjerili svoj odgovor!"; 
    okvir.style.display = "block";
    // Kada korisnik klikne na <span>(Zatvori), zatvara se modalni okvir
    zatvori.onclick = function() {
    okvir.style.display = "none";}
    return;
    }
  vecprovjereno=0; 
  span1.style.fontWeight="bold";
  span1.style.fontSize="30px";
  tekst.value="";
  n++;
  if(n>4) {
    sadrzaj.innerText="Ovo je bilo zadnje pitanje!"; 
    okvir.style.display = "block";
    // Kada korisnik klikne na <span>(Zatvori), zatvara se modalni okvir
    zatvori.onclick = function() {
    okvir.style.display = "none";}
    location.reload();}
  else {
    mijesanipojam=pomijesaj(izabranipojmovi[n]);
    trenutnipojam=izabranipojmovi[n];
    span1.innerText="";
    span1.innerText = n+1+". pojam:\n"+mijesanipojam.toUpperCase();}
}

function provjeri(){
  var okvir=document.getElementById("myModal");
  var sadrzaj=document.getElementById("modalbody");
  // Prijavi <span> element koji zatvara modalni okvir
  var zatvori=document.getElementsByClassName("dane")[0];

  if(kreni==0) {
    sadrzaj.innerText="Prvo pritisni na 'Kreni'"; 
    okvir.style.display = "block";
    // Kada korisnik klikne na <span>(Zatvori), zatvara se modalni okvir
    zatvori.onclick = function() {
    okvir.style.display = "none";}
    return;
  }
  if(vecprovjereno==1) {
  sadrzaj.innerText="Već smo provjerili!"; 
  okvir.style.display = "block";
  // Kada korisnik klikne na <span>(Zatvori), zatvara se modalni okvir
  zatvori.onclick = function() {
    okvir.style.display = "none";}
  return;
  }
  var odgovor=tekst.value.toLowerCase();
  if (odgovor=="") {
    sadrzaj.innerText="Niste ništa upisali!"; 
    okvir.style.display = "block";
    // Kada korisnik klikne na <span>(Zatvori), zatvara se modalni okvir
    zatvori.onclick = function() {
    okvir.style.display = "none";}
    return;}
  if (odgovor==trenutnipojam) {
    vecprovjereno=1;
    poruka="TOČNO!";
    sadrzaj.innerText=poruka; 
    okvir.style.display = "block";
    // Kada korisnik klikne na <span>(Zatvori), zatvara se modalni okvir
    zatvori.onclick = function() {
    okvir.style.display = "none";}
    bodovi++;}
  else{
    poruka="POGREŠNO!";
    sadrzaj.innerText=poruka; 
    okvir.style.display = "block";
    // Kada korisnik klikne na <span>(Zatvori), zatvara se modalni okvir
    zatvori.onclick = function() {
    okvir.style.display = "none";} 
  }
  if(n==4){
    sadrzaj.innerText=poruka+"\nUkupno ste potrošili "+intm+" minuta "+ints+" sekunda.\n"+"Točno ste riješili "+bodovi+" pojmova.";
    okvir.style.display = "block";
    // Kada korisnik klikne na <span>(Zatvori), zatvara se modalni okvir
    zatvori.onclick = function() {
    okvir.style.display = "none";
    location.reload();
   }
}
vecprovjereno=1;
}

</script>

</body>
<html>