Test z pytaniami i odpowiedziami w kodzie HTML w JavaScript

W tej i kilku kolejnych lekcjach zajmiemy się tworzeniem testów z pytaniami i odpowiedziami. Zacznijmy od najprostszych wariantów i stopniowo je komplikujmy.

Załóżmy na początek, że chcemy zrobić zestaw pytań, na każde z których możliwa jest tylko jedna odpowiedź. Niech odpowiedzi są wpisywane przez użytkownika w pola input pod samymi pytaniami.

Zilustrujmy napisane kodem HTML:

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

Jak widzicie, mamy pytania i pola input dla odpowiedzi. Pozostało wymyślić, gdzie będziemy przechowywać poprawne odpowiedzi.

Najprostsze, co można wymyślić - to przechowywanie odpowiedzi bezpośrednio w kodzie HTML pól input, w jakimś data- atrybucie:

<div id="test">
	<div>
		<p>pytanie 1?</p>
		<input data-right="odpowiedź 1">
	</div>
	<div>
		<p>pytanie 2?</p>
		<input data-right="odpowiedź 2">
	</div>
	<div>
		<p>pytanie 3?</p>
		<input data-right="odpowiedź 3">
	</div>
</div>

Następny niuans, który należy przemyśleć: w którym momencie będziemy wykonywać sprawdzenie odpowiedzi na poprawność? Tutaj można zaproponować dwa warianty: albo niech każde pole input od razu po wprowadzeniu do niego odpowiedzi sprawdza czy jest poprawna, albo niech będzie przycisk, po naciśnięciu którego zostaną sprawdzone odpowiedzi na wszystkie pytania na raz.

Niezależnie od tego, który wariant wybierzemy, zróbmy tak, że jeśli odpowiedź jest poprawna, to obramowanie pola input będziemy kolorować na zielono, a jeśli niepoprawna - na czerwono. Stwórzmy dla tego odpowiednie klasy CSS:

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

Zrób tak, aby wprowadzenie odpowiedzi w pole input kończyło się naciśnięciem klawisza Enter. Niech w tym przypadku pole input od razu sprawdza odpowiedź na poprawność.

Zmodyfikuj swój kod tak, aby sprawdzenie odpowiedzi wykonywało się po naciśnięciu przycisku.