В предыдущих уроках ответы на вопросы теста должны были вбиваться в инпуты. В жизни, однако, часто бывают также тексты, в которых можно выбрать один вариант ответа из предложенных. Давайте научимся создавать такие тесты.
Давайте опять начнем с простого варианта, когда вопросы и ответы хранятся в 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>
Как вы видите, варианты ответов мы можем
выбрать с помощью радио кнопочек. При этом
в каждом вопросе радио кнопка с правильным
вариантом отмечена атрибутом data-right.
Сделайте так, чтобы при выборе одного из ответов вопроса этот ответ сразу проверялся на правильность.
Модифицируйте ваш код так, чтобы проверка ответов выполнялась по нажатию на кнопку.