Τεστ με επιλογές απάντησης σε κώδικα HTML και JavaScript
Στα προηγούμενα μαθήματα οι απαντήσεις στις ερωτήσεις του τεστ έπρεπε να εισαχθούν σε πεδία εισαγωγής. Στην πράξη, όμως, συχνά υπάρχουν κείμενα στα οποία μπορεί κανείς να επιλέξει μία απάντηση από αυτές που προτείνονται. Ας μάθουμε να δημιουργούμε τέτοια τεστ.
Ας ξεκινήσουμε πάλι με μια απλή εκδοχή, όπου οι ερωτήσεις και οι απαντήσεις αποθηκεύονται σε κώδικα 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.
Φροντίστε ώστε όταν επιλεγεί μία από τις απαντήσεις μιας ερώτησης, αυτή η απάντηση να ελέγχεται αμέσως ως προς την ορθότητα της.
Τροποποιήστε τον κώδικά σας έτσι ώστε ο έλεγχος των απαντήσεων να εκτελείται με πάτημα ενός κουμπιού.
