Test s možnostmi odpovědí v HTML kódu na JavaScript

V předchozích lekcích odpovědi na otázky testu se musely vepisovat do inputů. V praxi se však často setkáváme také s testy, ve kterých lze vybrat jednu možnost odpovědi z nabízených. Pojďme se naučit vytvářet takové testy.

Pojďme opět začít jednoduchou variantou, kdy jsou otázky a odpovědi uloženy v HTML kódu, a poté budeme postupně komplikovat.

Takže, zde je test s možnostmi odpovědí:

<div id="test">
	<div>
		<p>otázka 1?</p>
		
		<label>
			<input type="radio" name="1" data-right>
			možnost 1
		</label>
		<label>
			<input type="radio" name="1">
			možnost 2
		</label>
		<label>
			<input type="radio" name="1">
			možnost 3
		</label>
	</div>
	<div>
		<p>otázka 2?</p>
		
		<label>
			<input type="radio" name="2">
			možnost 1
		</label>
		<label>
			<input type="radio" name="2" data-right>
			možnost 2
		</label>
		<label>
			<input type="radio" name="2">
			možnost 3
		</label>
	</div>
	<div>
		<p>otázka 3?</p>
		
		<label>
			<input type="radio" name="3">
			možnost 1
		</label>
		<label>
			<input type="radio" name="3">
			možnost 2
		</label>
		<label>
			<input type="radio" name="3" data-right>
			možnost 3
		</label>
	</div>
</div>

Jak vidíte, možnosti odpovědí můžeme vybrat pomocí radio buttonů. Přitom v každé otázce je radio button se správnou možností označen atributem data-right.

Zařiďte, aby při výběru jedné z odpovědí na otázku byla tato odpověď okamžitě zkontrolována na správnost.

Upravte svůj kód tak, aby kontrola odpovědí probíhala po stisknutí tlačítka.