<!DOCTYPE HTML>
<head><title>Fizika7 -vektori</title>

<STYLE TYPE="text/css">
.vektor {
    position: relative;
    text-align: center;
}
.velikoslovo {
    position: absolute;
    top: -0.7em;
    left: 0px;
    width: 60%;
    font-size: 90%;
    text-align: center;
}
.maloslovo {    
    position: absolute;
    top: -0.7em;
    left: 0px;
    width: 70%;
    font-size: 70%;
    text-align: center;
}
.potez { 
text-decoration: overline; 
} 

.prov{
background-color: '#88aacc';
border: 2px solid gray;
border-radius: 10px;
width: 200px;
padding: 10px;
font-size: 15px;
font-weight: bold;
box-shadow: 5px 5px #003366;
}
.prov:hover,
.prov:focus {
    color: red;
    text-decoration: none;
    cursor: pointer;
}
</STYLE>
<script>
var n=1+Math.round(9*Math.random()); //mjerilo sile
var odgovor1=[];
odgovor1[0]="";
odgovor1[1]="";
odgovor1[2]="";

var odgovor2=[];
odgovor2[0]="";
odgovor2[1]="";
odgovor2[2]="";

var kradio1=0;
var kradio2=0;

var poruka=[];
function provjeri(){
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)+".";
alert(poruka[0]+"\n"+poruka[1]+"\n"+"\n______________________");
}

var duljina1=2+Math.round(5*Math.random());  // 1. sila
var duljina2=2+Math.round(6*Math.random());  // 2. sila
var duljina3=2+Math.round(6*Math.random());  // 3. sila
var duljina4=2+Math.round(5*Math.random());  // 4. sila
</script>
</head>

<body bgcolor="#eeddcc">
<h2>Sastavljanje sila</h2>
U sljedećim zadacima trebate odrediti rezultantu dviju usporednih sila koje djeluju na tijelo predočeno kao kvadar (pravokutnik). Svaki podjeljak odgovara sili od <script>document.write(n);</script> N. U svakom zadatku izaberite jedan od tri ponuđena odgovora.
<form name="forma1">
<table>
<tr>
<td valign="top" width="50%">
<p>1. ZADATAK: Zbroj dviju usporednih sila iste orijentacije: 
<p><span class='vektor'>F<sub>1</sub><span class='velikoslovo'>&rarr;</span></span> + <span class='vektor'>F<sub>2</sub><span class='velikoslovo'>&rarr;</span></span> = ?
<script>
odgovor1[0]=eval((duljina1+duljina2)*n)+" N";
odgovor1[1]=eval((duljina1-duljina2)*n)+" N";
odgovor1[2]=eval((duljina1+duljina2+1)*n)+" N";

//miješanje 3 redna broja, b=0,1,2 (indeksi za radio botune)
  var b=[];
  while(b.length<=2){
    var r=Math.round(Math.random()*2);
    if(b.indexOf(r)===-1) b.push(r);
    }

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>
<p><input type="radio" name="izbor1" value="">a) <script>document.write(odgovor1a[0]);</script>
<p><input type="radio" name="izbor1" value="">b) <script>document.write(odgovor1a[1]);</script>
<p><input type="radio" name="izbor1" value="">c) <script>document.write(odgovor1a[2]);</script>
</td>
<td valign="top">
<script>
var sirina=400;
var visina=200;
var podjela=20;
var brojpodjelax=sirina/podjela;
var brojpodjelay=visina/podjela;

document.write("<svg width='400' height='200' id='slika1'>");
document.write("<rect x='0' y='0' width='400' height='200' fill='#fff' stroke-width='1' stroke='black' />");
document.write("<rect x='"+eval(4*podjela)+"' y='"+eval(4*podjela)+"' width='"+4*podjela+"' height='"+3*podjela+"'fill='#adb' stroke-width='3' stroke='black' />");
document.write("<text x='250' y='160' fill='red' font-size='20'>F</text>");
document.write("<text x='260' y='160' fill='red' font-size='14'>1</text>");
document.write("<text x='250' y='147' fill='red' font-size='20'>&rarr;</text>");
document.write("<text x='250' y='80' fill='blue' font-size='20'>F</text>");
document.write("<text x='260' y='80' fill='blue' font-size='14'>2</text>");
document.write("<text x='250' y='67' fill='blue' font-size='20'>&rarr;</text>");

for(i=0;i<=brojpodjelax;i++){
document.write("<line x1='"+eval(i*podjela)+"' y1='0' x2='"+eval(i*podjela)+"' y2='200' stroke='#8ad' stroke-width='1' />");
}

for(i=0;i<=brojpodjelay;i++){
document.write("<line x1='0' y1='"+eval(i*podjela)+"' x2='400' y2='"+eval(i*podjela)+"' stroke='#8ad' stroke-width='1' />");
}
// prva sila
document.write("<line x1='"+8*podjela+"' y1='"+6*podjela+"' x2='"+eval((8+duljina1)*podjela)+"' y2='"+6*podjela+"' stroke='red' stroke-width='2' />");
document.write("<line x1='"+eval((8+duljina1)*podjela-15)+"' y1='"+eval(6*podjela-5)+"' x2='"+eval((8+duljina1)*podjela)+"' y2='"+6*podjela+"' stroke='red' stroke-width='2' />");
document.write("<line x1='"+eval((8+duljina1)*podjela-15)+"' y1='"+eval(6*podjela+5)+"' x2='"+eval((8+duljina1)*podjela)+"' y2='"+6*podjela+"' stroke='red' stroke-width='2' />");

// druga sila
document.write("<line x1='"+eval(8*podjela)+"' y1='"+eval(5*podjela)+"' x2='"+eval((8+duljina2)*podjela)+"' y2='"+5*podjela+"' stroke='blue' stroke-width='2' />");
document.write("<line x1='"+eval((8+duljina2)*podjela-10)+"' y1='"+eval(5*podjela-5)+"' x2='"+eval((8+duljina2)*podjela)+"' y2='"+eval(5*podjela)+"' stroke='blue' stroke-width='2' />");
document.write("<line x1='"+eval((8+duljina2)*podjela-10)+"' y1='"+eval(5*podjela+5)+"' x2='"+eval((8+duljina2)*podjela)+"' y2='"+eval(5*podjela)+"' stroke='blue' stroke-width='2' />");
</script>
</svg>
</td>
</tr>

<tr>
<td>
<p>2. ZADATAK: Zbroj dviju sila suprotnog usmjerenja (orijentacije): 
<p><span class='vektor'>F<sub>3</sub><span class='velikoslovo'>&rarr;</span></span> + <span class='vektor'>F<sub>4</sub><span class='velikoslovo'>&rarr;</span></span> = ?
<script>
odgovor2[0]=eval((duljina3-duljina4)*n)+" N";;
odgovor2[1]=eval((duljina3+duljina4)*n)+" N";;
odgovor2[2]=eval((duljina3+duljina4+1)*n)+" N";;

//miješanje 3 redna broja, b=0,1,2 (indeksi za radio botune)
  var b=[];
  while(b.length<=2){
    var r=Math.round(Math.random()*2);
    if(b.indexOf(r)===-1) b.push(r);
    }

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>

<p><input type="radio" name="izbor2" value="">a) <script>document.write(odgovor2a[0]);</script>
<p><input type="radio" name="izbor2" value="">b) <script>document.write(odgovor2a[1]);</script>
<p><input type="radio" name="izbor2" value="">c) <script>document.write(odgovor2a[2]);</script>
</td>
<td>
<script>
var sirina=400;
var visina=200;
var podjela=20;
var brojpodjelax=sirina/podjela;
var brojpodjelay=visina/podjela;

document.write("<svg width='400' height='200' id='slika1'>");
document.write("<rect x='0' y='0' width='400' height='200' fill='#fff' stroke-width='1' stroke='black' />");
document.write("<rect x='"+eval(7*podjela)+"' y='"+eval(4*podjela)+"' width='"+4*podjela+"' height='"+3*podjela+"'fill='#adb' stroke-width='3' stroke='black' />");
document.write("<text x='50' y='80' fill='red' font-size='20'>F</text>");
document.write("<text x='60' y='80' fill='red' font-size='14'>4</text>");
document.write("<text x='50' y='67' fill='red' font-size='20'>&rarr;</text>");
document.write("<text x='250' y='80' fill='blue' font-size='20'>F</text>");
document.write("<text x='260' y='80' fill='blue' font-size='14'>3</text>");
document.write("<text x='250' y='67' fill='blue' font-size='20'>&rarr;</text>");

for(i=0;i<=brojpodjelax;i++){
document.write("<line x1='"+eval(i*podjela)+"' y1='0' x2='"+eval(i*podjela)+"' y2='200' stroke='#8ad' stroke-width='1' />");
}

for(i=0;i<=brojpodjelay;i++){
document.write("<line x1='0' y1='"+eval(i*podjela)+"' x2='400' y2='"+eval(i*podjela)+"' stroke='#8ad' stroke-width='1' />");
}
// prva sila
document.write("<line x1='"+eval(11*podjela)+"' y1='"+eval(5*podjela)+"' x2='"+eval((11+duljina3)*podjela)+"' y2='"+5*podjela+"' stroke='blue' stroke-width='2' />");
document.write("<line x1='"+eval((11+duljina3)*podjela-10)+"' y1='"+eval(5*podjela-5)+"' x2='"+eval((11+duljina3)*podjela)+"' y2='"+eval(5*podjela)+"' stroke='blue' stroke-width='2' />");
document.write("<line x1='"+eval((11+duljina3)*podjela-10)+"' y1='"+eval(5*podjela+5)+"' x2='"+eval((11+duljina3)*podjela)+"' y2='"+eval(5*podjela)+"' stroke='blue' stroke-width='2' />");

// druga sila
document.write("<line x1='"+7*podjela+"' y1='"+6*podjela+"' x2='"+eval((7-duljina4)*podjela)+"' y2='"+6*podjela+"' stroke='red' stroke-width='2' />");
document.write("<line x1='"+eval((7-duljina4)*podjela+15)+"' y1='"+eval(6*podjela+5)+"' x2='"+eval((7-duljina4)*podjela)+"' y2='"+6*podjela+"' stroke='red' stroke-width='2' />");
document.write("<line x1='"+eval((7-duljina4)*podjela+15)+"' y1='"+eval(6*podjela-5)+"' x2='"+eval((7-duljina4)*podjela)+"' y2='"+6*podjela+"' stroke='red' stroke-width='2' />");
</script>
</svg>

</td>
</tr>
</table>
</form>
<P><input type="button" value="Provjeri" class="prov" onclick="provjeri()">
<input type="button" value="Novo" class="prov" onclick="location.reload()">
</body>
</html>