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:

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-:

html<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:

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