В этом и в нескольких следующих уроках мы с вами займемся созданием тестов с вопросами и ответами. Начнем с самых простых вариантов и будем постепенно усложнять.
Пусть для начала мы хотим сделать набор вопросов, на каждый из которых возможен только один ответ. Пусть ответы вбиваются пользователем в инпуты под самими вопросами.
Проиллюстрирую написанное HTML кодом:
<div id="test">
<div>
<p>вопрос 1?</p>
<input>
</div>
<div>
<p>вопрос 2?</p>
<input>
</div>
<div>
<p>вопрос 3?</p>
<input>
</div>
</div>
Как вы видите, у нас есть вопросы и инпуты для ответов. Осталось придумать, где мы будем хранить правильные ответы.
Самое простое, что можно придумать - это
хранить ответы прямо в HTML коде инпутов,
в каком-нибудь data- атрибуте:
<div id="test">
<div>
<p>вопрос 1?</p>
<input data-right="ответ 1">
</div>
<div>
<p>вопрос 2?</p>
<input data-right="ответ 2">
</div>
<div>
<p>вопрос 3?</p>
<input data-right="ответ 3">
</div>
</div>
Следующий нюанс, который следует продумать: в какой момент мы будем выполнять проверку ответов на правильность? Здесь можно предложить два варианта: либо пусть каждый инпут сразу же по вводу в него ответа проверяет правильный ли этот ответ, либо пусть будет кнопка, по нажатию на которую будут проверены ответы на все вопросы сразу.
Какой бы из вариантов мы не выбрали, давайте, если ответ правильный, то границу инпута будем красить в зеленый цвет, а если неправильный - в красный. Сделаем для этого соответствующие CSS классы:
.right {
border: 1px solid green;
}
.wrong {
border: 1px solid red;
}
Сделайте так, чтобы ввод ответа в инпут завершался
нажатием клавиши Enter. Пусть в этом
случае инпут сразу проверяет ответ на правильность.
Модифицируйте ваш код так, чтобы проверка ответов выполнялась по нажатию на кнопку.