quiz

[amphioxus]

salve
andando in giro per internet ho messo insieme questo quiz che ha le seguenti caratteristiche
- ti avverte se hai gia selezionato la risposta
- risultato finale con numero risposte giuste sul numero di domande e il resoconto delle risposte date dall'utente se esse sono errate o corrette...in più tra parentesi la risposta giusta del quiz..

ho una domanda...vorrei affiancare accanto alla risposta giusta del quiz anche quella data dall'utente in modo da permettergli il confronto...

un resoconto del tipo
risposta x: esatta; hai risposto: a; la risposta esatta è: a.

come si può fare?
ho girato parecchio ma non ci ho capito gran che..mi aiutate?

intanto posto il codice
questo è il file quiz1.js


var name= prompt("per favore inserisci il tuo nome","");

// 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] = "d";
ans[2] = "b";
ans[3] = "b";
ans[4] = "d";
ans[5] = "a";
ans[6] = "c";
ans[7] = "c";
ans[8] = "d";
ans[9] = "a";
ans[10] = "c";

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 htm = "<span style='color:#BCF2ED'>Ciao "+name+", il tuo punteggio &egrave; di<span style='color:white'> " + score + "</span> su <span style='color: white'>" + (ans.length-1) +"</span>" +
"

";
htm += " <span style='color:white'>Resoconto risposte (tra parentesi le risposte esatte del quiz)</span>

";
for ( var j = 1; j < stat.length; j++) {
htm += "<span style='color:white'>Risposta " + j+":</span> <span style='color:"+ ( stat[ j ] ? "#BCF2ED'>esatta" : "#BCF2ED'>errata")+"</span><span style='color:#BCF2ED'> ("+ans[j]+")</span>

";
}
htm += "vedi risposte";
document.getElementById( 'risultato' ).innerHTML = htm;
}

questo è presente nel html
per comodità metto solo 3 domande invece di 10

<form name="form">


Domanda 1 ?</p>
<input type=radio value="a" name="1" id="1" onClick="Engine(1, this.value)">risposta 1

<input type=radio value="b" name="1" id="1" onClick="Engine(1, this.value)">risposta 2

<input type=radio value="c" name="1" id="1" onClick="Engine(1, this.value)">risposta 3

<input type=radio value="d" name="1" id="1" onClick="Engine(1, this.value)">risposta 4





Domanda 2 ?</p>
<input type=radio value="a" name="2" id="2" onClick="Engine(2, this.value)">risposta 1

<input type=radio value="b" name="2" id="2" onClick="Engine(2, this.value)">risposta 2

<input type=radio value="c" name="2" id="2" onClick="Engine(2, this.value)">risposta 3

<input type=radio value="d" name="2" id="2" onClick="Engine(2, this.value)">risposta 4





Domanda 3 ?</p>
<input type=radio value="a" name="3" id="3" onClick="Engine(3, this.value)">risposta 1

<input type=radio value="b" name="3" id="3" onClick="Engine(3, this.value)">risposta 2

<input type=radio value="c" name="3" id="3" onClick="Engine(3, this.value)">risposta 3

<input type=radio value="d" name="3" id="3" onClick="Engine(3, this.value)">risposta 4



<input type=button onClick="NextLevel()" value="Test finito, accedi alla pagina"></p>


</form>

<div id='risultato'></div>

spero nel vostro aiuto

[cavicchiandrea]

function NextLevel () {
var utente = (name=="")?'Ciao Ospite ' : 'Ciao '+name
var htm = "<span style='color:#BCF2ED'>"+utente+", il tuo punteggio è di<span style='color:white'> " + score + "</span> su <span style='color: white'>" + (ans.length-1) +"</span>" +
"

";
htm += " <span style='color:white'>Resoconto risposte (tra parentesi le risposte esatte del quiz)</span>

";
for ( var j = 1; j < stat.length; j++) {
htm += "<span style='color:white'>Risposta " + j +":</span> <span style='color:"+ ( stat[ j ] ? "#BCF2ED'>esatta ("+ans[j]+")" : "#ff0000'>errata data è "+document.getElementById(j).value+" <span style='color:#BCF2ED'>la risposta corretta era ("+ans[j]+")</span>")+"</span>

";
}
htm += "vedi risposte";
document.getElementById( 'risultato' ).innerHTML = htm;
}

Sostituisci tutta la funzione Ciao e benvenuto.

[amphioxus]

ciao andrea grazie dell'aiuto
l'ho provato però alle risposte errate mi dice sempre che quella che la risposta data è a.
cosa c'è di sbagliato?

[amphioxus]

scusa ho scritto velocemente e ho saltato parte di frase
dicevo che ogni volta che do una risposta è errata mi dice soltanto che la risposta data è a...

[cavicchiandrea]

ok ora va tutto bene:

function NextLevel () {
var utente = (name=="")?'Ciao Ospite ' : 'Ciao '+name
var htm = "<span style='color:#BCF2ED'>"+utente+", il tuo punteggio è di<span style='color:white'> " + score + "</span> su <span style='color: white'>" + (ans.length-1) +"</span>" +
"

";
htm += " <span style='color:white'>Resoconto risposte (tra parentesi le risposte esatte del quiz)</span>

";
for ( var j = 1; j < stat.length; j++) {
var r_ck = document.form1.elements['_'+j]
for (var i = 0; i<r_ck.length; i++){
if(r_ck[i].checked)risp = r_ck[i].value}
htm += "<span style='color:white'>Risposta " + j +":</span> <span style='color:"+ ( stat[ j ] ? "#BCF2ED'>esatta ("+ans[j]+")" : "#ff0000'>errata data è "+risp+" <span style='color:#BCF2ED'>la risposta corretta era ("+ans[j]+")</span>")+"</span>

";
}
htm += "vedi risposte";
document.getElementById( 'risultato' ).innerHTML = htm;
}

ho dovuto modificare anche html i nomi dei radio (che non possono iniziare con un numero) pertanto ho aggiunto il trattino da vanti _ e gli id che devo essere univoci

Domanda 1 ?</p>
<input type=radio value="a" name="_1" id="1_a" onClick="Engine(1, this.value)">
risposta 1

<input type=radio value="b" name="_1" id="1_b" onClick="Engine(1, this.value)">
risposta 2

<input type=radio value="c" name="_1" id="1_c" onClick="Engine(1, this.value)">
risposta 3

<input type=radio value="d" name="_1" id="1_d" onClick="Engine(1, this.value)">
risposta 4





Domanda 2 ?</p>
<input type=radio value="a" name="_2" id="2_a" onClick="Engine(2, this.value)">risposta 1

<input type=radio value="b" name="_2" id="2_b" onClick="Engine(2, this.value)">risposta 2

<input type=radio value="c" name="_2" id="2_c" onClick="Engine(2, this.value)">risposta 3

<input type=radio value="d" name="_2" id="2_d" onClick="Engine(2, this.value)">risposta 4





Domanda 3 ?</p>
<input type=radio value="a" name="_3" id="3_a" onClick="Engine(3, this.value)">risposta 1

<input type=radio value="b" name="_3" id="3_b" onClick="Engine(3, this.value)">risposta 2

<input type=radio value="c" name="_3" id="3_c" onClick="Engine(3, this.value)">risposta 3

<input type=radio value="d" name="_3" id="3_d" onClick="Engine(3, this.value)">risposta 4

[amphioxus]

grazie andrea, sei stato molto gentile ad aiutarmi...ti ringrazio per la pazienza dimostratami.
funziona perfettamente.

[amphioxus]

uno dei difetti di questo quiz è che un'utente esperto può sapere in anticipo le risposte alle domande...c'è qualche modo per impedirlo?

[cavicchiandrea]

Originariamente inviato da amphioxus
uno dei difetti di questo quiz è che un'utente esperto può sapere in anticipo le risposte alle domande...c'è qualche modo per impedirlo?

Ci sono diversi modi per impedirlo, ma il nodo è mi va di studiarmi un linguaggio (o + di uno) per fare ciò?
E quasi sicuramente si trova qualcosa anche di preconfezionato in tal senso, ma se complichi la vita all'utente complichi anche la tua (per l'istallazione, i set-aggi, le modifiche, etc...) quanto ne vale la pena?



P.S. La migliore soluzione comunque è avere domande, risposte, statistiche, tutti i dati sul server e usare un linguaggio lato server per gestire il tutto.

[amphioxus]

Originariamente inviato da cavicchiandrea
Ci sono diversi modi per impedirlo, ma il nodo è mi va di studiarmi un linguaggio (o + di uno) per fare ciò?
E quasi sicuramente si trova qualcosa anche di preconfezionato in tal senso, ma se complichi la vita all'utente complichi anche la tua (per l'istallazione, i set-aggi, le modifiche, etc...) quanto ne vale la pena?



P.S. La migliore soluzione comunque è avere domande, risposte, statistiche, tutti i dati sul server e usare un linguaggio lato server per gestire il tutto.

hai ragione andrea
siccome i miei quiz sono a scopo didattico, sarà la coscienza dell'utente, se vuole imparare, a non farlo imbrogliare.io metto a disposizione il materiale poi sarà solo responsabilità sua se vuole imparare o no

una cosa se non è di disturbo ti vorrei chiedere...
ho cambiato leggermente il Nextlevel mettendo il link di commento alle risposte per ogni domanda. i link agisce con window.open...solo che le finestrelle premendo il pulsante non si aprono...non riesco a vedere errori nella sintassi(almeno non me ne sono accorto)...che cosa potrebbe essere §'

function NextLevel () {
var utente = (name=="")?'Ospite ' : name
var htm = "<span style='color:#BCF2ED'>Ciao</span> <span style='color:white'>"+utente+"</span><span style='color:#BCF2ED'>, il tuo punteggio è di</span> <span style='color:white'>" + score + "</span> <span style='color:#BCF2ED'>su</span> <span style='color: white'>" + (ans.length-1) +"</span>" +
"

";
htm += " <span style='color:white'>Resoconto risposte </span>

";
for ( var j = 1; j < stat.length; j++) {
var r_ck = document.form1.elements['_'+j]
for (var i = 0; i<r_ck.length; i++){
if(r_ck[i].checked)risp = r_ck[i].value}
htm += "<span style='color:white'>Domanda " + j +":</span>
<span style='color:"+ ( stat[ j ] ? "#BCF2ED'>Esito: <span style='color:white'>esatta</span>
Risposta esatta: <span style='color:white'>"+ans[j]+"</span>" : "#BCF2ED'>Esito: <span style='color:white'>errata</span>
Tua risposta: <span style='color:white'>"+risp+"</span>
<span style='color:#BCF2ED'>Risposta corretta:</span><span style='color:white'> "+ans[j]+"</span>")+"</span>
commento alle risposte

";
}
document.getElementById( 'risultato' ).innerHTML = htm;
}

[cavicchiandrea]

prova cosi:

onclick='window.open(\ 'quiz"+j+"ver.htm\ ',\ 'gh\ ',\ 'width=200,height=150,left=150,top=150\ ')'

cioè davanti all'apice ' la barra rovesciata (backslash) cosi da non far credere al javascript che l'apice ' sia delimitatore di stringa ma un carattere.
Visto che un progetto didattico forse (se non è troppo complesso o dispersivo) potrei darti una mano mandami un MP (messaggio privato) con i tuoi contatti msn o skype (se possibile lo preferisco cosi parliamo).
ATTENZIONE Tra l'apice ' e la barra \ c'è uno spazio (altrimenti il form l'elimina quest'ultima) va tolto.