Teszt kérdésekkel és válaszokkal HTML kódban JavaScript segítségével

Ebben és néhány következő leckében tesztek létrehozásával fogunk foglalkozni kérdésekkel és válaszokkal. Kezdjük a legegyszerűbb változatokkal, és fokozatosan bonyolítjuk.

Kezdetben tegyük fel, hogy olyan kérdéssort szeretnénk készíteni, ahol minden kérdésre csak egy válasz lehetséges. A válaszokat a felhasználó írja be a kérdések alatti input mezőkbe.

Szemléltessük az elmondottakat HTML kóddal:

<div id="test">
	<div>
		<p>1. kérdés?</p>
		<input>
	</div>
	<div>
		<p>2. kérdés?</p>
		<input>
	</div>
	<div>
		<p>3. kérdés?</p>
		<input>
	</div>
</div>

Amint látjátok, vannak kérdéseink és input mezőink a válaszokhoz. Már csak azt kell kitalálnunk, hogy hol fogjuk tárolni a helyes válaszokat.

A legegyszerűbb megoldás, ami eszünkbe juthat - az, hogy a válaszokat közvetlenül az input mezők HTML kódjában tároljuk, valamilyen data- attribútumban:

<div id="test">
	<div>
		<p>1. kérdés?</p>
		<input data-right="1. válasz">
	</div>
	<div>
		<p>2. kérdés?</p>
		<input data-right="2. válasz">
	</div>
	<div>
		<p>3. kérdés?</p>
		<input data-right="3. válasz">
	</div>
</div>

A következő árnyalat, amit át kell gondolnunk: melyik pillanatban fogjuk elvégezni a válaszok helyességének ellenőrzését? Itt két lehetőség kínálkozik: vagy minden input azonnal, a válasz beírásakor ellenőrzi, hogy helyes-e a válasz, vagy legyen egy gomb, amelyre kattintva ellenőrződnek az összes kérdésre adott válasz egyszerre.

Bármelyik változatot is választjuk, tegyük a következőt: ha a válasz helyes, akkor az input keretét zöldre színezzük, ha helytelen - pirosra. Készítsünk ehhez megfelelő CSS osztályokat:

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

Állítsa be úgy, hogy a válasz input mezőbe való beírása a Enter billentyű lenyomásával fejeződjön be. Ebben az esetben az input azonnal ellenőrizze a válasz helyességét.

Módosítsa a kódját úgy, hogy a válaszok ellenőrzése egy gombra kattintva történjen.