salve è la prima volta che scrivo quindi perdonatemi possibili errori nel postare questa discussione..allora girando per internet alla fine son riuscito a mettere insieme un codice per un quiz
questo quiz comprende la possibilità di non ripetere la stessa domanda, la possibilità di svolgerlo con un countdown che segue il movimento della pagina...
ecco il codice
<html><head>
<style type='text/css'>
#countdown { border:1px solid black;
background:#eee;
font-weight:bold;
font-size:20px;
width:120px;
text-align:center;
margin-top:30px;
height:24px;
}
button { width:120px;
}
</style>
<script type='text/javascript'>
function countdown( tempo ) {
var div = document.getElementById('countdown');
var tmp = tempo.split(":");
var oggi = new Date();
oggi.setHours(tmp[0]);
oggi.setMinutes(tmp[1]);
oggi.setSeconds(tmp[2]);
var hour = oggi.getHours();
var minu = oggi.getMinutes();
var seco = oggi.getSeconds();
div.innerHTML = (hour < 10 ? "0" : "") + hour +":"+ (minu < 10 ? "0" : "") + minu +":"+ (seco < 10 ? "0" : "") + seco;
if ( oggi.getHours() == 0 && oggi.getMinutes() == 0 && oggi.getSeconds() == 0 ) {
alert("Contdown terminato!");
} else {
oggi.setTime( oggi.getTime() - 1000 );
var newt = oggi.getHours() +":"+ oggi.getMinutes() +":"+ oggi.getSeconds();
setTimeout(function() { countdown(newt); }, 1000);
}
}
<!--
// Prelevato su http://www.web-link.it
var ans = new Array;
var done = new Array;
var stat = new Array;
var score = 0;
var count = 0;
ans[1] = "a";
ans[2] = "b";
ans[3] = "c";
ans[4] = "d";
ans[5] = "a";
ans[6] = "b";
ans[7] = "c";
ans[8] = "d";
ans[9] = "a";
ans[10] = "b";
function Engine( question, answer ) {
if ( answer != ans[ question ] ) {
if ( ! done[ question ] ) {
done[ question ] = -1;
stat[ question ] = false;
count++;
} else {
alert( "Hai gia risposto a questa domanda!" );
}
} else {
if ( ! done[ question ] ) {
done[ question ] = -1;
score++;
stat[ question ] = true;
count++;
} else {
alert( "Hai gia risposto a questa domanda!" );
}
}
if ( count == ans.length ) { NextLevel() }
}
function NextLevel () {
var fine = new Date();
var differenza = ( fine.getTime() - window.inizio.getTime()) / 1000;
var mm = parseInt ( differenza / 60 );
var hh = parseInt ( mm / 60 );
var htm = "Hai completato il quiz in " + hh + " ore, " + ( mm - ( hh * 60 ) ) + " minuti e " + ( differenza - ( mm * 60 ) ) + " secondi." +
"<br>" + "Il tuo punteggio è di " + score + " su " + (ans.length-1) + ":" +
"<br><br>";
for ( var j = 1; j < stat.length; j++ ) {
htm += "Risposta " + j + ": <span style='color:" + ( stat[ j ] ? "green'>esatta" : "red'>errata" ) + "</span><br>";
}
document.getElementById( 'risultato' ).innerHTML = htm;
}
// -->
</script></head>
<body >
<form>
<p>Domanda 1 ?</p>
<input type=radio value="a" name="1" onClick="Engine(1, this.value)">risposta 1<br>
<input type=radio value="b" name="1" onClick="Engine(1, this.value)">risposta 2<br>
<input type=radio value="c" name="1" onClick="Engine(1, this.value)">risposta 3<br>
<input type=radio value="d" name="1" onClick="Engine(1, this.value)">risposta 4<p>
<p>Domanda 2 ?</p>
<input type=radio value="a" name="2" onClick="Engine(2, this.value)">risposta 1<br>
<input type=radio value="b" name="2" onClick="Engine(2, this.value)">risposta 2<br>
<input type=radio value="c" name="2" onClick="Engine(2, this.value)">risposta 3<br>
<input type=radio value="d" name="2" onClick="Engine(2, this.value)">risposta 4<p>
<p>Domanda 3 ?</p>
<input type=radio value="a" name="3" onClick="Engine(3, this.value)">risposta 1<br>
<input type=radio value="b" name="3" onClick="Engine(3, this.value)">risposta 2<br>
<input type=radio value="c" name="3" onClick="Engine(3, this.value)">risposta 3<br>
<input type=radio value="d" name="3" onClick="Engine(3, this.value)">risposta 4<p>
<input type=button onClick="window.inizio= new Date(); countdown('0:2:3');"value="inizio">
<input type=button onClick="NextLevel()" value="Test finito, accedi alla pagina">
</form>
<div id='risultato'></div>
</div>
<div id="divStayTopLeft" style="position:absolute; left:10px; top:501px; height:28px">
<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<div id='countdown'><input type=button onClick="window.inizio= new Date(); countdown('0:2:3');"value="inizio">
</div><!--END OF EDIT-->
</div>
<script type="text/javascript">
<!--
/*
Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
Prelevato e illustrato su http://www.web-link.it
*/
//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"
function JSFX_FloatTopDiv()
{
var startX = 250,
startY = 250;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
// end -->
</script>
</body> </html>
il vero quiz sarà di 10 domande, questo è soltanto una prova per vedere se funziona
problemi: lo script associato al pulsante "test finito" si esegue solo se io faccio partire il countdown...io vorrei dare la possibiltà all'utente di svolgere il quiz anche senza il countdown ma il pulsante test finito non funziona se non attivo prima il countdown..come si può fare?
questo quiz comprende la possibilità di non ripetere la stessa domanda, la possibilità di svolgerlo con un countdown che segue il movimento della pagina...
ecco il codice
<html><head>
<style type='text/css'>
#countdown { border:1px solid black;
background:#eee;
font-weight:bold;
font-size:20px;
width:120px;
text-align:center;
margin-top:30px;
height:24px;
}
button { width:120px;
}
</style>
<script type='text/javascript'>
function countdown( tempo ) {
var div = document.getElementById('countdown');
var tmp = tempo.split(":");
var oggi = new Date();
oggi.setHours(tmp[0]);
oggi.setMinutes(tmp[1]);
oggi.setSeconds(tmp[2]);
var hour = oggi.getHours();
var minu = oggi.getMinutes();
var seco = oggi.getSeconds();
div.innerHTML = (hour < 10 ? "0" : "") + hour +":"+ (minu < 10 ? "0" : "") + minu +":"+ (seco < 10 ? "0" : "") + seco;
if ( oggi.getHours() == 0 && oggi.getMinutes() == 0 && oggi.getSeconds() == 0 ) {
alert("Contdown terminato!");
} else {
oggi.setTime( oggi.getTime() - 1000 );
var newt = oggi.getHours() +":"+ oggi.getMinutes() +":"+ oggi.getSeconds();
setTimeout(function() { countdown(newt); }, 1000);
}
}
<!--
// Prelevato su http://www.web-link.it
var ans = new Array;
var done = new Array;
var stat = new Array;
var score = 0;
var count = 0;
ans[1] = "a";
ans[2] = "b";
ans[3] = "c";
ans[4] = "d";
ans[5] = "a";
ans[6] = "b";
ans[7] = "c";
ans[8] = "d";
ans[9] = "a";
ans[10] = "b";
function Engine( question, answer ) {
if ( answer != ans[ question ] ) {
if ( ! done[ question ] ) {
done[ question ] = -1;
stat[ question ] = false;
count++;
} else {
alert( "Hai gia risposto a questa domanda!" );
}
} else {
if ( ! done[ question ] ) {
done[ question ] = -1;
score++;
stat[ question ] = true;
count++;
} else {
alert( "Hai gia risposto a questa domanda!" );
}
}
if ( count == ans.length ) { NextLevel() }
}
function NextLevel () {
var fine = new Date();
var differenza = ( fine.getTime() - window.inizio.getTime()) / 1000;
var mm = parseInt ( differenza / 60 );
var hh = parseInt ( mm / 60 );
var htm = "Hai completato il quiz in " + hh + " ore, " + ( mm - ( hh * 60 ) ) + " minuti e " + ( differenza - ( mm * 60 ) ) + " secondi." +
"<br>" + "Il tuo punteggio è di " + score + " su " + (ans.length-1) + ":" +
"<br><br>";
for ( var j = 1; j < stat.length; j++ ) {
htm += "Risposta " + j + ": <span style='color:" + ( stat[ j ] ? "green'>esatta" : "red'>errata" ) + "</span><br>";
}
document.getElementById( 'risultato' ).innerHTML = htm;
}
// -->
</script></head>
<body >
<form>
<p>Domanda 1 ?</p>
<input type=radio value="a" name="1" onClick="Engine(1, this.value)">risposta 1<br>
<input type=radio value="b" name="1" onClick="Engine(1, this.value)">risposta 2<br>
<input type=radio value="c" name="1" onClick="Engine(1, this.value)">risposta 3<br>
<input type=radio value="d" name="1" onClick="Engine(1, this.value)">risposta 4<p>
<p>Domanda 2 ?</p>
<input type=radio value="a" name="2" onClick="Engine(2, this.value)">risposta 1<br>
<input type=radio value="b" name="2" onClick="Engine(2, this.value)">risposta 2<br>
<input type=radio value="c" name="2" onClick="Engine(2, this.value)">risposta 3<br>
<input type=radio value="d" name="2" onClick="Engine(2, this.value)">risposta 4<p>
<p>Domanda 3 ?</p>
<input type=radio value="a" name="3" onClick="Engine(3, this.value)">risposta 1<br>
<input type=radio value="b" name="3" onClick="Engine(3, this.value)">risposta 2<br>
<input type=radio value="c" name="3" onClick="Engine(3, this.value)">risposta 3<br>
<input type=radio value="d" name="3" onClick="Engine(3, this.value)">risposta 4<p>
<input type=button onClick="window.inizio= new Date(); countdown('0:2:3');"value="inizio">
<input type=button onClick="NextLevel()" value="Test finito, accedi alla pagina">
</form>
<div id='risultato'></div>
</div>
<div id="divStayTopLeft" style="position:absolute; left:10px; top:501px; height:28px">
<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<div id='countdown'><input type=button onClick="window.inizio= new Date(); countdown('0:2:3');"value="inizio">
</div><!--END OF EDIT-->
</div>
<script type="text/javascript">
<!--
/*
Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
Prelevato e illustrato su http://www.web-link.it
*/
//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"
function JSFX_FloatTopDiv()
{
var startX = 250,
startY = 250;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
// end -->
</script>
</body> </html>
il vero quiz sarà di 10 domande, questo è soltanto una prova per vedere se funziona
problemi: lo script associato al pulsante "test finito" si esegue solo se io faccio partire il countdown...io vorrei dare la possibiltà all'utente di svolgere il quiz anche senza il countdown ma il pulsante test finito non funziona se non attivo prima il countdown..come si può fare?
Ultima modifica:
