<!DOCTYPE html>
<head>
<title>longitudinalni val</title>
<STYLE>
canvas{
background-color: white;
}
.botun{
  background-color: #bb6622; 
  border: 2px solid;
  border-color:white;
  box-shadow: 5px 5px #002266;
  width:200px;
  color:white;
  font-size:15px;
  text-align: center;
  font-weight:bold;
}
.botun:hover,
.botun:focus {
    color: yellow;
    border-color:yellow;
    cursor: pointer;
}
/* 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 broj=0; //broj perioda (valnih duljina, maksimuma, minimuma)
broj=2+Math.round(6*Math.random());
var s=Math.round(0.5*10+5*Math.random())/10; //period
var valna=2*Math.round(0.2*10+Math.random())/10; //valna duljina
var odgovor1=[];
var odgovor2=[];
var odgovor3=[];
var kradio1=0;
var kradio2=0;
var kradio3=0;

odgovor1[0]=valna;
odgovor1[1]=1+Math.round(10*valna)/10;
odgovor1[2]=Math.round(0.5*10+10*valna)/10;

odgovor2[0]=s;
odgovor2[1]=eval(s+1);
odgovor2[2]=eval(s+2);

odgovor3[0]=Math.round(100*1/s)/100;
odgovor3[1]=Math.round(100*1/(s+1))/100;
odgovor3[2]=Math.round(100*1/(s+2))/100;
</script>

</head>

<body bgcolor="#bbddff">
<!-- 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>

<h2>LONGITUDINALNI VAL</h2>
<form name="forma1">
<p>Longitudinalni val na slici se rasprostire u smjeru strelice. Valna slika je nastala u vremenskom intervalu od <script>document.write(Math.round(s*broj*10)/10)</script> sekunda, a njezina duljina je <script>document.write(Math.round(valna*broj*10)/10)</script> metara. 

<table>
<tr>
<td valign="top" width="50%">
1. Kolika je valna duljina tog vala?
<script>
//miješanje 3 redna broja, b=0,1,2 (indeksi za radio botune)
  var b=[];
  while(b.length<=2){
    var d=Math.round(Math.random()*2);
    if(b.indexOf(d)===-1) b.push(d);
    }
var odgovor1a=[odgovor1[b[0]],odgovor1[b[1]],odgovor1[b[2]]];
//pomiješani odgovori
if(b[0]==0) kradio1=0;
if(b[1]==0) kradio1=1;
if(b[2]==0) kradio1=2;
</script>
<br><input type="radio" name="izbor1"> a) <script>document.write(odgovor1a[0])</script> metara
<br><input type="radio" name="izbor1"> b) <script>document.write(odgovor1a[1])</script> metara
<br><input type="radio" name="izbor1"> c) <script>document.write(odgovor1a[2])</script> metara

<p>2. Kolika je period T ovog vala?
<script>
//miješanje 3 redna broja, b=0,1,2 (indeksi za radio botune)
  var b=[];
  while(b.length<=2){
    var d=Math.round(Math.random()*2);
    if(b.indexOf(d)===-1) b.push(d);
    }
var odgovor2a=[odgovor2[b[0]],odgovor2[b[1]],odgovor2[b[2]]];
//pomiješani odgovori
if(b[0]==0) kradio2=0;
if(b[1]==0) kradio2=1;
if(b[2]==0) kradio2=2;
</script>
<br><input type="radio" name="izbor2"> a) <script>document.write(odgovor2a[0]);</script> sekunda
<br><input type="radio" name="izbor2"> b) <script>document.write(odgovor2a[1]);</script> sekunda
<br><input type="radio" name="izbor2"> c) <script>document.write(odgovor2a[2]);</script> sekunda

<p>3. Izračunaj frekvenciju vala (zaokruži na dvije decimale)?
<script>
//miješanje 3 redna broja, b=0,1,2 (indeksi za radio botune)
  var b=[];
  while(b.length<=2){
    var d=Math.round(Math.random()*2);
    if(b.indexOf(d)===-1) b.push(d);
    }
var odgovor3a=[odgovor3[b[0]],odgovor3[b[1]],odgovor3[b[2]]];
//pomiješani odgovori
if(b[0]==0) kradio3=0;
if(b[1]==0) kradio3=1;
if(b[2]==0) kradio3=2;
</script>
<br><input type="radio" name="izbor3"> a) <script>document.write(odgovor3a[0]);</script> Hz
<br><input type="radio" name="izbor3"> b) <script>document.write(odgovor3a[1]);</script> Hz
<br><input type="radio" name="izbor3"> c) <script>document.write(odgovor3a[2]);</script> Hz
</form>

</td>
<td valign="top">
<canvas id="slika" width="400" height="300" border="2"></canvas>
<script>
var c = document.getElementById("slika");
var ctx = c.getContext("2d");
var r=0; //razmak
var a=0; //amplituda
a=10;

var x=0;r=0;
function crtaj(r) {
  ctx.lineWidth = 1;
  ctx.strokeStyle = "Red";
  for(x=0;x<slika.width;x+=4){
    ctx.beginPath();
    ctx.moveTo(x+10*Math.sin(2*(r-x)*Math.PI/(slika.width/broj)),0);
    ctx.lineTo(x+10*Math.sin(2*(r-x)*Math.PI/(slika.width/broj)),slika.height-100);
    ctx.stroke();}
}
function strelica(){
  ctx.lineWidth = 4; //strelica - smjer rasprostiranja
  ctx.strokeStyle = "Red";
  ctx.beginPath();
  ctx.moveTo(100,slika.height-20);
  ctx.lineTo(slika.width-100,slika.height-20);
  ctx.moveTo(slika.width-100,slika.height-20);
  ctx.lineTo(slika.width-120,slika.height-25);
  ctx.moveTo(slika.width-100,slika.height-20);
  ctx.lineTo(slika.width-120,slika.height-15);
  ctx.stroke();
}
function kote(){
  ctx.lineWidth = 1; //strelica - smjer rasprostiranja
  ctx.strokeStyle = "Black";
  ctx.beginPath();
  ctx.moveTo(0,slika.height-50);
  ctx.lineTo(slika.width,slika.height-50);
  ctx.moveTo(slika.width,slika.height-50); //strelica desno
  ctx.lineTo(slika.width-20,slika.height-55);
  ctx.moveTo(slika.width,slika.height-50);
  ctx.lineTo(slika.width-20,slika.height-45);
  ctx.moveTo(0,slika.height-50); //strelica lijevo
  ctx.lineTo(20,slika.height-55);
  ctx.moveTo(0,slika.height-50);
  ctx.lineTo(20,slika.height-45);
  ctx.stroke();
  ctx.font="15px Arial";
  ctx.fillText(Math.round(valna*broj*10)/10+" m",slika.width/2,slika.height-60);
}
crtaj(2);
strelica();
kote();
</script>
</td>
</tr>
</table>

<script>
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.izbor1[kradio1].checked) {poruka[0]="1. točno";} else poruka[0]="1. netočno, rješenje je po redu: "+eval(kradio1+1)+".";
  if(document.forma1.izbor2[kradio2].checked) {poruka[1]="2. točno";} else poruka[1]="2. netočno, rješenje je po redu: "+eval(kradio2+1)+".";
  if(document.forma1.izbor3[kradio3].checked) {poruka[2]="3. točno";} else poruka[2]="3. netočno, rješenje je po redu: "+eval(kradio3+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>
<form><INPUT TYPE=button class='botun' onclick='provjeri()' VALUE='PROVJERI'>
<INPUT TYPE=button class='botun' onclick='location.reload()' VALUE='NOVO'>
</form>
</body>
</html>