Τεστ με ερωτήσεις και απαντήσεις σε κώδικα HTML με JavaScript

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

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

Ας δείξω όσα γράφτηκαν με κώδικα HTML:

<div id="test">
	<div>
		<p>ερώτηση 1;</p>
		<input>
	</div>
	<div>
		<p>ερώτηση 2;</p>
		<input>
	</div>
	<div>
		<p>ερώτηση 3;</p>
		<input>
	</div>
</div>

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

Το πιο απλό που μπορούμε να σκεφτούμε - είναι να αποθηκεύουμε τις απαντήσεις ακριβώς μέσα στον κώδικα HTML των πεδίων εισόδου, σε κάποιο data- χαρακτηριστικό:

<div id="test">
	<div>
		<p>ερώτηση 1;</p>
		<input data-right="απάντηση 1">
	</div>
	<div>
		<p>ερώτηση 2;</p>
		<input data-right="απάντηση 2">
	</div>
	<div>
		<p>ερώτηση 3;</p>
		<input data-right="απάντηση 3">
	</div>
</div>

Η επόμενη λεπτομέρεια που πρέπει να σκεφτούμε: σε ποια στιγμή θα εκτελούμε τον έλεγχο των απαντήσεων για ορθότητα; Εδώ μπορούμε να προτείνουμε δύο επιλογές: είτε κάθε πεδίο εισόδου αμέσως μόλις εισαχθεί σε αυτό η απάντηση να ελέγχει αν είναι σωστή αυτή η απάντηση, είτε ας υπάρχει ένα κουμπί, upon πατώντας το οποίο θα ελεγχθούν οι απαντήσεις σε όλες τις ερωτήσεις ταυτόχρονα.

Οποιαδήποτε από τις επιλογές και να διαλέξουμε, ας συμφωνήσουμε ότι, εάν η απάντηση είναι σωστή, τότε το περίγραμμα του πεδίου εισόδου θα το βάφουμε σε πράσινο χρώμα, και εάν είναι λανθασμένη - σε κόκκινο. Ας φτιάξουμε για αυτό τις αντίστοιχες CSS κλάσεις:

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

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

Τροποποιήστε τον κώδικά σας έτσι ώστε ο έλεγχος των απαντήσεων να εκτελείται πατώντας σε ένα κουμπί.