Τεστ με επιλογές απάντησης σε κώδικα HTML και JavaScript

Στα προηγούμενα μαθήματα οι απαντήσεις στις ερωτήσεις του τεστ έπρεπε να εισαχθούν σε πεδία εισαγωγής. Στην πράξη, όμως, συχνά υπάρχουν κείμενα στα οποία μπορεί κανείς να επιλέξει μία απάντηση από αυτές που προτείνονται. Ας μάθουμε να δημιουργούμε τέτοια τεστ.

Ας ξεκινήσουμε πάλι με μια απλή εκδοχή, όπου οι ερωτήσεις και οι απαντήσεις αποθηκεύονται σε κώδικα HTML, και στη συνέχεια θα γίνει σταδιακά πιο σύνθετη.

Λοιπόν, ορίστε ένα τεστ με επιλογές απάντησης:

html<div id="test">
  <div>
    <p>ερώτηση 1;</p>
    
    <label>
      <input type="radio" name="1" data-right>
      επιλογή 1
    </label>
    <label>
      <input type="radio" name="1">
      επιλογή 2
    </label>
    <label>
      <input type="radio" name="1">
      επιλογή 3
    </label>
  </div>
  <div>
    <p>ερώτηση 2;</p>
    
    <label>
      <input type="radio" name="2">
      επιλογή 1
    </label>
    <label>
      <input type="radio" name="2" data-right>
      επιλογή 2
    </label>
    <label>
      <input type="radio" name="2">
      επιλογή 3
    </label>
  </div>
  <div>
    <p>ερώτηση 3;</p>
    
    <label>
      <input type="radio" name="3">
      επιλογή 1
    </label>
    <label>
      <input type="radio" name="3">
      επιλογή 2
    </label>
    <label>
      <input type="radio" name="3" data-right>
      επιλογή 3
    </label>
  </div>
</div>

Όπως βλέπετε, τις επιλογές απάντησης μπορούμε να τις επιλέξουμε χρησιμοποιώντας κουμπιά radio. Σε αυτή την περίπτωση σε κάθε ερώτηση το κουμπί radio με τη σωστή επιλογή σημειώνεται με τη χρήση του χαρακτηριστικού data-right.