Test con opzioni di risposta in codice HTML su JavaScript
Nelle lezioni precedenti, le risposte alle domande del test dovevano essere inserite negli input. Nella vita reale, però, ci sono spesso anche test in cui è possibile selezionare una risposta tra quelle proposte. Impariamo a creare tali test.
Ricominciamo con una versione semplice, in cui le domande e le risposte sono memorizzate nel codice HTML, per poi complicarla gradualmente.
Quindi, ecco un test con opzioni di risposta:
<div id="test">
<div>
<p>domanda 1?</p>
<label>
<input type="radio" name="1" data-right>
opzione 1
</label>
<label>
<input type="radio" name="1">
opzione 2
</label>
<label>
<input type="radio" name="1">
opzione 3
</label>
</div>
<div>
<p>domanda 2?</p>
<label>
<input type="radio" name="2">
opzione 1
</label>
<label>
<input type="radio" name="2" data-right>
opzione 2
</label>
<label>
<input type="radio" name="2">
opzione 3
</label>
</div>
<div>
<p>domanda 3?</p>
<label>
<input type="radio" name="3">
opzione 1
</label>
<label>
<input type="radio" name="3">
opzione 2
</label>
<label>
<input type="radio" name="3" data-right>
opzione 3
</label>
</div>
</div>
Come puoi vedere, possiamo selezionare le opzioni di risposta
tramite pulsanti radio. Inoltre,
in ogni domanda, il pulsante radio con la risposta
corretta è contrassegnato dall'attributo data-right.
Fai in modo che quando si seleziona una delle risposte di una domanda, quella risposta venga immediatamente verificata per correttezza.
Modifica il tuo codice in modo che la verifica delle risposte venga eseguita premendo un pulsante.
