<!DOCTYPE html>
<html>
</head>
<title>F83 Valovi</title>
<style>
p{
 font-family:Arial;
 font-size:20px;
 text-align:left;
}

.diva{   /* okvir za ponuđena rješenja */
  float: left;
  width: 40px;
  height: 40px;
  border: 2px solid #621;
  background-color:#feb;
  border-radius:15px;
  font-family:Arial;
  font-size:20px;
  text-align:center;
  padding-top:6px;
}
.divb{  /* prazni okvir */
  float: left;
  width: 40px;
  height: 40px;
  margin: 5px;
  padding: 10px 10px 10px 10px;
  border: 3px solid #421;
  background-color:white;
  border-radius:15px;
  align-items:center;
}
.divrez{ /* okvir za ispis točno-netočno */
  float: right;
  width: 150px;
  height: 50px;
  margin: 5px;
  padding: 5px;
  background-color:white;
  border-radius:15px;
  border:5px solid;
  font-family:Arial;
  font-size:25px;
  text-align:center;
  font-weight:bold;
}
.botun {
    color: yellow;
    background-color:#421;
    border: 3px solid yellow;
    border-radius:15px;
    padding: 15px;
    width:180px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    float: center;
  }
  .botun:hover {  
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24);
  color: #fff;
  border: 3px solid white;
  background-color:#842;
  cursor: pointer;
  }  
</style>
</head>

<body onload="prvi()" style="background-image: radial-gradient(circle,white,#edc);">
<h2>Fizika 8. razred - ANAGRAMI ili PREMETALJKE</h2>
<h3>3. VALOVI - osnovni pojmovi </h3>
<br><canvas id="slika" width="700" height="120"></canvas>
<script>
var c = document.getElementById("slika");
var ctx = c.getContext("2d");
var r=0; //razmak
var a=0; //amplituda
a=20;
var n=0;
n=2+Math.round(8*Math.random());

function crtajosi(){
  ctx.lineWidth = 3; //osi x i y
  ctx.strokeStyle = "Grey";
  ctx.beginPath();
  ctx.moveTo(2,0); 
  ctx.lineTo(2,slika.width); //os y
  ctx.moveTo(2,slika.height/2); 
  ctx.lineTo(slika.width,slika.height/2); //os x
  ctx.stroke();
}

function crtaj1(a) {
  crtajosi();
  ctx.lineWidth = 2;
  ctx.strokeStyle = "Red";
  for(r=0;r<slika.width;r++){
    ctx.beginPath();
    ctx.moveTo(r,slika.height/2+a*Math.sin(r*2*Math.PI/(slika.width/n)));
    ctx.lineTo(r+1,slika.height/2+a*Math.sin((r+1)*2*Math.PI/(slika.width/n)));
    ctx.stroke();}
}

setInterval (function () {
  ctx.clearRect(5, 0, slika.width, slika.height);
  crtajosi();
  a=a+2;
  if(a>slika.height/2) a=0; else crtaj1(a-slika.height/4); 
},30);

</script>

<table id="tbl1">
<tr><td>
<p>Od ispremiješanih slova složi ispravnu riječ. 
<br>Svaka riječ je jedan pojam iz gradiva 3. cjeline!
<br>Imate ukupno 5 zadataka.
<p>1. ZADATAK:
</td></tr>
</table>

<table id="tablica">
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td>
<hr>
<p><input type="button" class="botun" value="PROVJERI!" onclick="provjeri(zadatak)">&nbsp;&nbsp;<input type="button" class="botun" style="width:60px;" value=">>" onclick="dalje()">&nbsp;&nbsp;<button class="divrez" id="rez"></button>
</td></tr>
</table>

<script>
var mijesanipojam="";
var izabranipojmovi=[];
var zadatak=1; //redni broj zadatka
var opseg=14;
var pogresno=0;
var bodovi=0;
var tablica=document.getElementById("tablica");
var tbl1=document.getElementById("tbl1");

var definicija=[];
definicija=["PERIOD", "FREKVENCIJA", "AMPLITUDA", "RAZRJEĐENJE", "TITRANJE", "SREDSTVO", "IZVOR", "VALOVI", "DECIBEL", "ULTRAZVUK", "INFRAZVUK", "ZGUŠĆENJE","ELONGACIJA","FRONTA","BRIJEG"];
var b="";
var c="";

//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()*opseg);
  if(s.indexOf(r)===-1) s.push(r);
  } 

//izbor 5 pojmova za pogađanje
for(i=0;i<=4;i++){
  izabranipojmovi[i]=definicija[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;
}

var odrediste=[]; //popis id-a div-objekata odredišta na koje se redom prenose div-objekti iz polazista 
var polaziste=[]; //popis id-a div-objekata polazišta koji se redom prenose na odrediste
var data="";  	//id diva-objekta koji se trenutno prenosi
var divan=[];   //popis diva okvira sa slovima kako su zadana (pomiješano)
var divbn=[];   //popis divb praznih okvira na koje slažemo diva okvire
var mojodg=[];  //odgovor korisnika, popis diva i divb parova, prvi član para je divbn koji ide redom od 0 do duljina definicije 
var duljina=0;  //broj slova u pojmu
var redni=0;

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {  
  ev.preventDefault();
  data = ev.dataTransfer.getData("text");
  //if(polaziste.indexOf(data)==-1) polaziste.push(data); 
  ev.target.appendChild(document.getElementById(data));
  mojodg.push(data,ev.target.id);
}

function prvi(){ 
  pogresno=0;b="";c="";
  mojodg=[];
  divan=[];
  divbn=[]; 
  var n=[];
  mijesanipojam=pomijesaj(izabranipojmovi[0]);
  duljina=mijesanipojam.length-1;
  //miješanje n rednih brojeva, u rasponu od n=0 do n=duljina   
   while(n.length<=duljina){
     var r=Math.round(Math.random()*duljina);
     if(n.indexOf(r)===-1) n.push(r);
   }  
  
  tablica.rows[0].cells[0].style.border="1px solid";
  for(i=0;i<=duljina;i++){
    b=b+"<div class='divb' id='divb"+i+"' ondrop='drop(event)' ondragover='allowDrop(event)'></div>";
    tablica.rows[0].cells[0].innerHTML=b;
    c=c+"<div class='diva' draggable='true' ondragstart='drag(event)' id='diva"+i+"'>"+mijesanipojam[n[i]]+"</div>";
    tablica.rows[1].cells[0].innerHTML=c;
  }
  for(i=0;i<=duljina;i++){
    divan.push("diva"+i);       
    divbn.push("divb"+i);}
}
 
function dalje(){
  mojodg=[];
  pogresno=0;
  var n=[];
  divan=[];
  divbn=[];
  b="";c="";
  redni=redni+1;
  zadatak++;
  if(redni>=5) {alert("Ukupno ste riješili: "+bodovi+" zadataka."); location.reload();}
  document.getElementById("rez").style.backgroundColor="#fff";
  document.getElementById("rez").innerHTML="";
  tbl1.rows[0].cells[0].innerHTML="<p>Od ispremiješanih slova složi ispravnu riječ. <br>U svakoj riječi krije se po jedan pojam iz gradiva 3.cjeline!<p>"+zadatak+". ZADATAK:";
  mijesanipojam=pomijesaj(izabranipojmovi[redni]);
  duljina=mijesanipojam.length-1;
  //miješanje n rednih brojeva, u rasponu od n=0 do n=duljina   
   while(n.length<=duljina){
     var r=Math.round(Math.random()*duljina);
     if(n.indexOf(r)===-1) n.push(r);
   }  
 
  tablica.rows[0].cells[0].style.border="1px solid";
  for(i=0;i<=duljina;i++){
    b=b+"<div class='divb' id='divb"+i+"' ondrop='drop(event)' ondragover='allowDrop(event)'></div>";
    tablica.rows[0].cells[0].innerHTML=b;
    c=c+"<div class='diva' draggable='true' ondragstart='drag(event)' id='diva"+i+"'>"+mijesanipojam[n[i]]+"</div>";
    tablica.rows[1].cells[0].innerHTML=c;
  }
  for(i=0;i<=duljina;i++){
    divan.push("diva"+i);
    divbn.push("divb"+i);}
}

var odg1=[]; //točan odgovor
function provjeri(zadatak){ 
  pogresno=0;
  odg1=[];
  for(i=0;i<=duljina;i++) 
     odg1=odg1+document.getElementById(divbn[i]).innerText;
   
  if(definicija[s[redni]]==odg1){    
        pogresno=0;}
     else {pogresno=1;}
/* Ako prvo slovo iz tražene definicije ima isti indeks (0) kao prvi divb element (divb0=divbn[0]) kojem je pridružen odgovor odg1[i] 
s istim slovom kao prvo slovo iz tražene definicije i tako redom */

  if(pogresno==1){
      document.getElementById("rez").style.backgroundColor="#fbb";
      document.getElementById("rez").style.border="4px solid black";
      document.getElementById("rez").innerHTML="NETOČNO";   
      }
  if(pogresno==0){    
      document.getElementById("rez").style.backgroundColor="lightgreen";
      document.getElementById("rez").style.border="4px solid black";
      document.getElementById("rez").innerHTML="TOČNO!";
      bodovi++; 
     }     
}

</script>

</body>
</html>