<!DOCTYPE html>
<head>
<title>Anagram81</title>
<style>
body {
      background-color: #aa8844;
      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 #bbaa88 solid;
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      align-items: center;
      padding:10px;
      background-color: #554433;
      font-size: 18px;
      color:#bbddff;
    }
   #botunpocetak {
      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: #fff;
  border:single;
  width:200px;
  height:35px;
  font-size:25px;
  color:black; 
}

.botunprovjeri {
  background-color: #bb6644; 
  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 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;
}
</STYLE>
</head>

<body bgcolor="#4488ee" onload="uvod()">
<center>
<table>
<tr>
<td><h1>Anagrami (premetaljke)</h1>
Fizika 8. razreda - pojmovi iz 1. cjeline
<br>ELEKTRIČNA STRUJA</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' id='tekst' class='upis' 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;

pojmovi[0]="naboj";
pojmovi[1]="otpor";
pojmovi[2]="izolator";
pojmovi[3]="elektroskop";
pojmovi[4]="magnet";
pojmovi[5]="elektromagnet";
pojmovi[6]="elektrolit";
pojmovi[7]="anoda";
pojmovi[8]="katoda";
pojmovi[9]="ampermetar";
pojmovi[10]="voltmetar";
pojmovi[11]="trošilo";
pojmovi[12]="sklopka";
pojmovi[13]="izvor";
pojmovi[14]="vodič";
pojmovi[15]="amper";
pojmovi[16]="otpornik";
pojmovi[17]="indukcija";
pojmovi[18]="generator";
pojmovi[19]="baterija";
pojmovi[20]="akumulator";

//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()*20);
  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;
    tekst.textContent="";
    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.textContent="";
    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(){ 
  if(kreni==0) {alert("Prvo pritisni na 'Kreni'");return;}
  if(vecprovjereno==0) {alert("Još niste provjerili svoj odgovor!");return;}
  vecprovjereno=0; 
  span1.style.fontWeight="bold";
  span1.style.fontSize="30px";
  tekst.value="";
  n++;
  if(n>4) {
    alert("Ovo je bilo zadnje pitanje!"); 
    location.reload();}
  else {
    mijesanipojam=pomijesaj(izabranipojmovi[n]);
    trenutnipojam=izabranipojmovi[n];
    span1.innerText="";
    span1.innerText = n+1+". pojam:\n"+mijesanipojam.toUpperCase();}
}

function provjeri(){
  var poruka="";
  if(kreni==0) {alert("Prvo pritisni na 'Kreni'");return;}
  if(vecprovjereno==1) {alert("Već smo provjerili!");return;}
  var odgovor=tekst.value.toLowerCase();
  if (odgovor=="") {alert("Niste ništa upisali!");return;}
  if (odgovor==trenutnipojam) {
    vecprovjereno=1;
    poruka=(n+1)+". pojam\nTOČNO!";    
    bodovi++;}
  else{
    poruka=(n+1)+". pojam\nPOGREŠNO!";}
  span1.innerText=poruka;
  if(n==4){
    span1.innerText=poruka;
    alert(poruka+"\nUkupno ste potrošili "+intm+" minuta "+ints+" sekunda.\n"+"Točno ste riješili "+bodovi+" pojmova.");location.reload();}
vecprovjereno=1;
}

</script>

</body>
<html>