вопросы пишите мне в телеграмм +375298176892
можно скачать офлайн версию сайта: code.mu old.code.mu

Тест с вариантами ответов в HTML коде на JavaScript

В предыдущих уроках ответы на вопросы теста должны были вбиваться в инпуты. В жизни, однако, часто бывают также тексты, в которых можно выбрать один вариант ответа из предложенных. Давайте научимся создавать такие тесты.

Давайте опять начнем с простого варианта, когда вопросы и ответы хранятся в 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.

Сделайте так, чтобы при выборе одного из ответов вопроса этот ответ сразу проверялся на правильность.

Модифицируйте ваш код так, чтобы проверка ответов выполнялась по нажатию на кнопку.