Обучение + Практика

Как собрать квиз при помощи HTML и JS

Разбираем как написать функцию проверки ответа

1

HTML: Разметка и уникальные имена

JavaScript не умеет менять текст сам по себе. Сначала нужно создать в HTML элементы и дать им уникальные имена (атрибут id).

<!-- Элемент для вывода счета -->
<span id="score">0</span>

<!-- Элемент для вывода вопроса -->
<h3 id="question">Что едят капибары?</h3>

Кликай на подсвеченные слова, чтобы увидеть пояснение

id="score"
Уникальное имя элемента. Браузер должен знать, куда именно вставлять цифру. По этому имени скрипт найдёт тег с помощью команды document.getElementById('score').
0
Число, которое пользователь видит до первого клика. Это просто текст в HTML. Как только сработает скрипт, он удалит этот ноль и впишет актуальный счёт.
id="question"
Уникальное имя для заголовка. Мы даём ему имя, чтобы скрипт мог обратиться к нему и поменять текст вопроса на фразу «Ответ принят!» после того, как мы ответим.
2

HTML + JS: Кнопка отправляет ответ

Кнопка должна передавать информацию в скрипт при нажатии. Мы добавляем ей атрибут onclick и кладем внутрь слово (ответ).

<!-- Кнопки с вариантами ответов -->
<button onclick="check('Мясо')">Мясо</button>

Кликай на подсвеченные слова, чтобы увидеть пояснение

onclick="
Атрибут, который связывает HTML и JavaScript. Он говорит браузеру: «Жди клика мышки по этому элементу. Когда кликнут — выполни команду в кавычках».
check(
Имя функции, которую мы запускаем. Круглые скобки нужны, чтобы передать внутрь функции данные — например, какое слово было на нажатой кнопке.
'Мясо'
Текст ответа. Обратите внимание на одинарные кавычки. Так как двойные кавычки уже заняты атрибутом onclick, внутри мы обязаны использовать одинарные. Это слово полетит прямиком в скрипт.
)"
Синтаксис: закрываем круглую скобку функции и двойную кавычку атрибута onclick.
3

JS: Логика проверки ответа

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

let score = 0;

function check(answer) {
  // Сверяем ответ с правильным
  if (answer === 'Траву') {
    score = score + 1;
  }

  // Обновляем данные на экране
  document.getElementById('score').textContent = score;
  document.getElementById('question').textContent = "Ответ принят!";
}

Кликай на подсвеченные слова, чтобы увидеть пояснение

let score = 0;
Создаём переменную в памяти браузера. Слово let означает, что значение будет меняться (счёт будет расти). Если бы мы написали const, счёт навсегда остался бы нулём.
function check(answer) { ... }
Блок кода, который ждёт вызова. В скобках указана переменная answer. Когда в HTML нажимают кнопку с check('Траву'), слово 'Траву' автоматически попадает в эту переменную.
if
Условие. Скрипт проверяет: то, что прилетело от кнопки, совпадает с правильным ответом? Если да — выполняется код внутри фигурных скобок. Если нет — скрипт просто пропустит этот блок.
answer === 'Траву'
Проверка на совпадение. В JavaScript одно равно (=) означает «записать значение». Чтобы сравнить два текста, всегда используют три знака равно (===).
score = score + 1;
Математика. Мы берём текущее значение переменной score, прибавляем к нему единицу и записываем результат обратно в эту же переменную. Счёт увеличен.
document.getElementById('score').textContent
Поиск и замена. Команда document.getElementById('score') находит нужный тег в HTML. Свойство .textContent стирает старый текст внутри этого тега и готовит его к записи нового.
= score;
Берём актуальное число из переменной score (которую мы только что увеличили) и выводим его на экран пользователя. До этой строчки все изменения происходили только в скрытой памяти браузера.
Практика

Готовый HTML-дизайн уже есть в песочнице. Твоя задача — написать атрибуты и JavaScript.

  1. Найди тег <span> (где счет) и добавь ему id="score".
  2. Найди тег <h3> (где вопрос) и добавь ему id="question".
  3. Добавь первой кнопке атрибут onclick="check('Мясо')", второй — onclick="check('Траву')".
  4. Внутри тега <script> создай переменную: let score = 0;
  5. Напиши функцию function check(answer) { ... }.
  6. В функции напиши условие: if (answer === 'Траву') { score = score + 1; }.
  7. После условия (за пределами if) обнови очки через document.getElementById('score').textContent = score;
  8. Там же обнови вопрос: document.getElementById('question').textContent = "Ответ принят!";
Песочница
Твой код (Допиши атрибуты и JS)
Превью
Нажми «▶ Запустить»
чтобы проверить логику
Код решения (сравни со своим)
Чеклист выполнения
0 / 8 выполнено