creare un quiz con Javascript

amphioxus

amphioxus

Nuovo Utente
20 Gen 2009
2
0
0
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 &egrave; 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:
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
N Creare un quiz con php PHP 10
AntoCastro [PHP] Creare un sito di quiz a catena PHP 17
V Creare quiz a "completamento" PHP 2
B come creare i quiz???? Discussioni Varie 1
E Creare un testo trasparente dietro un div HTML e CSS 5
M Creare traccia di download file sul server HTML e CSS 2
A Cerco programmatore/sviluppatore per creare forum Offerte e Richieste di Lavoro e/o Collaborazione 2
L Creare ancore interne alla pagina PHP 1
I Creare un banner temporaneo JavaScript Javascript 0
C Creare Tabella Dati Meteo prelevandoli da dei Tags in un altro foglio PHP 27
simgia Cordova errore quando cerco di emulare o creare la app Sviluppo app per Android 2
U PHP creare un file excel dopo ricerca nel DB PHP 0
A Creare un cronometro PHP 5
G [PHP] Creare script di prenotazione con controllo disponibilità. PHP 7
F Creare elementi html con javascript Javascript 3
Shyson Modificare codice e creare link PHP 0
Cosina Creare bottone delete in form upload PHP 5
Cosina Creare bottone delete in form upload PHP 1
M Creare un campo input select quantità di un numero intero prelevato dal db PHP 3
L Creare una forma geometrica Photoshop 1
M [Cerco] aiutanti per creare sito Offerte e Richieste di Lavoro e/o Collaborazione 8
S Libreria PHP per creare file dwg o dxf PHP 0
R Come creare sistema Add to homescreen PHP 3
L Creare un countdown con giorno specifico della settimana PHP 3
W Creare link di una dato Classic ASP 0
W creare file .jar Java 2
M Creare con il Vb 2010 Il Classico Notes di Windows Vista Visual Basic 1
MarcoGrazia Creare una password Snippet Javascript 0
J creare pagina php di prenotazione PHP 5
A Creare un modulo di ricerca avanzata con dreamweaver HTML e CSS 0
INTEROPERABILITY Sviluppatrice/formatrice creare APP Offerte e Richieste di Lavoro e/o Collaborazione 0
L Creare una pagina pre-home WordPress 1
G Creare side-bar non visibile da dispositivi mobile HTML e CSS 0
L creare oggetti da una classe tramite un form Javascript 0
Web93 CREARE SITO WEB COMICS CON WORDPRESS WordPress 0
maxnegri Contare sessioni aperte e creare condizione PHP 1
A Come creare pulsante donazione PayPal HTML e CSS 5
L [CERCO] Creare blog su WordPress con tema Divi Offerte e Richieste di Lavoro e/o Collaborazione 3
F Creare un set di date a seconda del frazionamento scelto da inserire in MySQL PHP 6
R [Photoshop] Creare Azione Photoshop 1
F [PHP] creare tabella e tasto cerca PHP 3
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
B [PHP] Creare PDF dopo inserimento dati form PHP 4
A [HTML] Creare sito web per eLearnig HTML e CSS 2
R Bootstrap 4 - creare una finestra di testo responsive sopra un Carousel jQuery 1
Spenalzo Creare tabelle multiple con Access via VBA MS Access 2
R [PHP] Creare sistema random PHP 3
D [PHP] Consigli su come creare form PHP 1
I Creare Qsl radioamatore con testo editabile Presentati al Forum 1
T [PHP] Creare Honeypot per form contatti PHP 10

Discussioni simili

Alto Basso