<!DOCTYPE html>
<HEAD>
<TITLE> Vježba iz fizike 8 - SVJETLOST</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("optičko sredstvo", "izvor svjetlosti", "primarni izvor", "sekundarni izvor", "pomrčina Sunca", "pomrčina Mjeseca", "brzina svjetlosti", "difuzna svjetlost", "odbijanje svjetlosti", "lom svjetlosti", "zraka svjetlosti", "ravno zrcalo", "sferno zrcalo", "sabirna leća", "rastresna leća", "fokus (žarište) leće");
odgovor1 = new Array("tvar koju prolazi svjetlost", "pretvara druge oblike energije u svjetlost", "zrači vlastitu svjetlost", "odbija svjetlost iz drugih izvora", "nastaje kada se Mjesec nađe između Sunca i Zemlje", "nastaje kada se Zemlja nađe između Sunca i Mjeseca", "najveća moguća brzina u svemiru", "svjetlost odbijena od neravne površine", "nastaje kad svjetlost naiđe na prepreku", "nastaje kada svjetlost mijenja brzinu", "pravac rasprostiranja svjetlosti", "ravna uglačan površina koja odbija svjetlost", "uglačani dio kugline plohe koji odbija svjetlost", "skuplja zrake svjetlosti", "rasipa zrake svjetlosti", "točka u kojoj se sastaju nakon loma zrake paralelnog snopa");
pitanje2 = new Array("brzina svjetlosti", "vrijeme", "valna duljina", "upadni kut", "kut odbijanja", "kut loma", "žarišna daljina", "polumjer zakrivljenosti", "jakost leće", "žarište");
odgovor2 = new Array("<i>c</i>","<i>t</i>", "&#955;", "&#945;", "&#945;'", "&#946;","<i>f</i>", "<i>r</i>", "<i>j</i>", "<i>F</i>");
pitanje3 = new Array("difuzna svjetlost", "konkavno zrcalo", "konveksno zrcalo", "refleksija svjetlosti", "realna slika", "konvergentna leća", "divergentna leća", "fokus", "disperzija", "virtualna slika");
odgovor3 = new Array("raspršena svjetlost", "udubljeno zrcalo", "izbočeno zrcalo", "odbijanje svjetlosti", "stvarna slika", "sabirna leća", "rastresna leća", "žarište", "rasap", "prividna slika");
</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">4. cjelina - SVJETLOST</font></h3>
- povezivanje parova (vježba) - 
</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. Pojmu iz optike 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(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. Nađite pojam na desnojstrani koji ima isto značenje kao i pojam s lijeve strane:
<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>