Test con domande e risposte in codice HTML su JavaScript

In questa e nelle prossime lezioni ci dedicheremo alla creazione di test con domande e risposte. Inizieremo con le varianti più semplici e aumenteremo gradualmente la complessità.

Per cominciare, supponiamo di voler creare una serie di domande, per ognuna delle quali è possibile solo una risposta. Lasciamo che le risposte siano inserite dall'utente negli input sotto le domande stesse.

Illustro quanto scritto con il codice HTML:

<div id="test">
	<div>
		<p>domanda 1?</p>
		<input>
	</div>
	<div>
		<p>domanda 2?</p>
		<input>
	</div>
	<div>
		<p>domanda 3?</p>
		<input>
	</div>
</div>

Come puoi vedere, abbiamo le domande e gli input per le risposte. Resta da decidere dove memorizzeremo le risposte corrette.

La cosa più semplice che si possa pensare è memorizzare le risposte direttamente nel codice HTML degli input, in qualche attributo data-:

<div id="test">
	<div>
		<p>domanda 1?</p>
		<input data-right="risposta 1">
	</div>
	<div>
		<p>domanda 2?</p>
		<input data-right="risposta 2">
	</div>
	<div>
		<p>domanda 3?</p>
		<input data-right="risposta 3">
	</div>
</div>

La prossima sfumatura da considerare: in quale momento eseguiremo il controllo della correttezza delle risposte? Qui si possono proporre due varianti: o ogni input controlla immediatamente non appena viene inserita una risposta, oppure che ci sia un pulsante, al click del quale verranno controllate le risposte a tutte le domande contemporaneamente.

Qualunque variante scegliamo, se la risposta è corretta, coloriamo il bordo dell'input in verde, se è errata - in rosso. Creiamo le relative classi CSS:

.right {
	border: 1px solid green;
}
.wrong {
	border: 1px solid red;
}

Fai in modo che l'inserimento della risposta in un input venga confermato premendo il tasto Enter. In questo caso, l'input deve controllare immediatamente la correttezza della risposta.

Modifica il tuo codice in modo che il controllo delle risposte venga eseguito al click su un pulsante.