<HTML>
<HEAD>
<TITLE> Vježba iz fizike 8 - VALOVI</TITLE>
<style>
.prov{
background:#aaaaff;
width:200px;
font-size:15px;
font-weight: bold;
padding:10px;
}
/* Modalni okvir (pozadina) */
.modal {  
    display: none; /* Skriveno u pocetku */
    position: fixed; /* Ostaje na mjestu */
    margin: 5% auto;
    z-index: 1; /* Iznad pozadine */
    width: 80%; /* 100% je puna širina */
    height: 30%; /* 100% je puna visina  */
    align-items: center;
    background-color: rgb(100,0,2); /* Fallback color */
    background-color: rgba(0,0,0,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: 15% auto; /* 15% od vrha i centrirano */
    padding: 20px;
    border: 3px solid #88b;
    width: 80%; /* Vrijednost širine ovisi o promjeru ekrana */
    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: 5px;
    //float: right;
    margin: 5%;
    font-size: 18px;
    font-weight: bold;
}
.zatvori:hover,
.zatvori:focus {
    color: yellow;
    text-decoration: none;
    cursor: pointer;
}
</style>
<script>
var opseg=9;
var n=Math.round(9*Math.random());
var kradio0=0;
var kradio1=0;
var kradio2=0;
//mijesanje indeksa
a = new Array; //niz pomijesanih indeksa, 0-9
//popunjavanje niza pitanja od 0 do opseg (a)
for (var i=0;i<=opseg;i++){ 
  a[i]=i;
}
//miješanje 4 redna broja, u rasponu od a=0 do a=opseg
  var a=[];
  while(a.length<=opseg){
    var r=Math.round(Math.random()*opseg);
    if(a.indexOf(r)===-1) a.push(r);
    }

pitanje1 = new Array("sredstvo", "period", "frekvencija", "amplituda", "brijeg i dol", "valno gibanje", "valna duljina transvezalnog vala", "valna fronta", "valna zraka", "transverzalni val", "longitudinalni val", "ultrazvuk", "infrazvuk", "šum", "ton", "brzina vala");
odgovor1 = new Array("tvar koju prolazi val", "vrijeme nakon kojeg se tijelo vraća u isti položaj", "broj titraja u jednoj sekundi", "najveći otklon od ravnotežnog položaja", "amplitude transverzalnog vala", "prenosi energiju titranja čestica tijela", "udaljenost dva susjedna brijega ili dola", "crta koja pokazuje dokle se proširila energija titranja", "polupravac koji pokazuje smjer širenja vala", "čestice sredstva titraju okomito na smjer širenja vala", "čestice sredstva titraju okomito u smjeru širenja vala", "zvuk frekvencije više od 20 000 Hz", "zvuk frekvencije niže od 20 Hz", "nepravilno titranje zvučnog izvora", "pravilno titranje zvučnog izvora", "pokazuje koliko se proširila energija titranja u 1 sekundi");
pitanje2 = new Array("period", "frekvencija", "valna duljina", "broj titraja", "brzina vala", "glasnoća zvuka", "gustoća", "tlak zraka", "volumen", "temperatura");
odgovor2 = new Array("sekunda, s","herc, Hz", "metar, m", "nema jedinice", "metar u sekundi, m/s", "decibel, dB","kilogram po kubnom metru, kg/m<sup>3</sup>", "hektopaskal, hPa", "kubni metar, m<sup>3</sup>", "kelvin, K");
pitanje3 = new Array("period", "frekvencija", "valna duljina", "broj titraja", "brzina vala", "glasnoća zvuka", "gustoća", "tlak zraka", "volumen", "temperatura");
odgovor3 = new Array("<i>T</i>", "<i>f</i>", "&#955;", "<i>n</i>", "<i>v</i>", "<i>I</i>", "&#961;", "<i>p</i>", "<i>V</i>", "<i>T</i>");
</script>
</HEAD>

<BODY bgcolor="eecfae">

<!-- 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><h2>Fizika za 8. razred</h2>
<h3><font color="red">3. cjelina - VALOVI</font></h3>
- povezivanje parova (vježba) - 
<p><canvas id="slika" width="600" height="150" border="3"></canvas>
<script>
var c = document.getElementById("slika");
var ctx = c.getContext("2d");
var r=0; //razmak
var amp=0; //amplituda
amp=20;

var x=0;
function crtaj1(r) {
  ctx.lineWidth = 2;
  ctx.strokeStyle = "grey";
  for(x=0;x<slika.width;x+=10){
    ctx.beginPath();
    ctx.moveTo(x+amp*Math.sin(2*(r-x)*Math.PI/(slika.width/3)),0);
    ctx.lineTo(x+amp*Math.sin(2*(r-x)*Math.PI/(slika.width/3)),slika.height-50);
    ctx.stroke();}
}

setInterval (function () {
  ctx.clearRect(5, 0, slika.width, slika.height);
  r=r+1;
  if(r>slika.width) r=0; else crtaj1(r); 
},20);
</script>

</center>

<hr>
<form name="forma1">
<p>UPUTE: U sljedećim zadacima pronađite koji član na desnoj strani odgovara članu na lijevoj strani. Samo jedan odgovor je točan. Klikom na tipku "Provjeri" vidjet ćete jeste li točno odgovorili na postavljene zadatke.

<p>1. ZADATAK. Povežite pojam i njegovu kratku definiciju:
<table>
<tr><td width="30%" bgcolor="white"><b><font size="4" color="red" face="Arial"> <script>document.write(pitanje1[a[0]]);</script> </font></b></td><td width=200></td>
<td width="50%">
<script>
//miješanje indeksa radio botuna b od 0-2
  var b=[];
  while(b.length<=2){
    var r=Math.round(Math.random()*2);
    if(b.indexOf(r)===-1) b.push(r);
    }
document.write("<br><INPUT TYPE='radio' NAME='izbor0' VALUE=''>"+odgovor1[a[b[0]]]);
if(b[0]==0) kradio0=0;
document.write("<br><INPUT TYPE='radio' NAME='izbor0' VALUE=''>"+odgovor1[a[b[1]]]);
if(b[1]==0) kradio0=1;
document.write("<br><INPUT TYPE='radio' NAME='izbor0' VALUE=''>"+odgovor1[a[b[2]]]);
if(b[2]==0) kradio0=2;
</script>
</td></tr>
</table>

<p>2. ZADATAK. Fizikalnoj veličini na lijevoj strani pridružite odgovarajuću mjernu jedinicu na desnoj strani:
<table>
<tr><td width="30%" bgcolor="white"><b><font size="4" color="red" face="Arial"><script> document.write(pitanje2[a[0]]);</script> </font></b></td><td width=200></td>
<td width="50%">
<script>
//miješanje indeksa radio botuna b od 0-2
  var b=[];
  while(b.length<=2){
    var r=Math.round(Math.random()*2);
    if(b.indexOf(r)===-1) b.push(r);
    }
document.write("<br><INPUT TYPE='radio' NAME='izbor1' VALUE=''>"+odgovor2[a[b[0]]]);
if(b[0]==0) kradio1=0;
document.write("<br><INPUT TYPE='radio' NAME='izbor1' VALUE=''>"+odgovor2[a[b[1]]]);
if(b[1]==0) kradio1=1;
document.write("<br><INPUT TYPE='radio' NAME='izbor1' VALUE=''>"+odgovor2[a[b[2]]]);
if(b[2]==0) kradio1=2;
</script>
</td></tr>
</table>

<p>3. ZADATAK. Fizikalnoj veličini na lijevoj strani pridružite odgovarajuću oznaku:
<table>
<tr><td width="30%" bgcolor="white"><b><font size="4" color="red" face="Arial"><script> document.write(pitanje3[a[0]]);</script> </font></b></td><td width=200></td>
<td width="50%">
<script>
//miješanje indeksa radio botuna b od 0-2
  var b=[];
  while(b.length<=2){
    var r=Math.round(Math.random()*2);
    if(b.indexOf(r)===-1) b.push(r);
    }
document.write("<br><INPUT TYPE='radio' NAME='izbor2' VALUE=''>"+odgovor3[a[b[0]]]);
if(b[0]==0) kradio2=0;
document.write("<br><INPUT TYPE='radio' NAME='izbor2' VALUE=''>"+odgovor3[a[b[1]]]);
if(b[1]==0) kradio2=1;
document.write("<br><INPUT TYPE='radio' NAME='izbor2' VALUE=''>"+odgovor3[a[b[2]]]);
if(b[2]==0) kradio2=2;
</script>
</td></tr>
</table>

<SCRIPT LANGUAGE="JavaScript">
var n, k

var bodovi=0;
var poruka=[];

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 (document.forma1.izbor0[kradio0].checked) {poruka[0]="1. točno";} else poruka[0]="1. netočno, rješenje je po redu: "+eval(kradio0+1)+".";
  if (document.forma1.izbor1[kradio1].checked) {poruka[1]="2. točno";} else poruka[1]="2. netočno, rješenje je po redu: "+eval(kradio1+1)+".";
  if (document.forma1.izbor2[kradio2].checked) {poruka[2]="3. točno";} else poruka[2]="3. netočno, rješenje je po redu: "+eval(kradio2+1)+".";
 
  sadrzaj.innerText=poruka[0]+"\n"+poruka[1]+"\n"+poruka[2]; 
  okvir.style.display = "block";
  // Kada korisnik klikne na <span>(Zatvori), zatvara se modalni okvir
  zatvori.onclick = function() {
    okvir.style.display = "none";
    }
}
</SCRIPT>

<P><input type="button" value="Provjeri" class="prov" onclick="provjeri()">
<input type="button" value="Novo" class="prov" onclick="location.reload()">
</FORM>

</BODY>
</HTML>