Домашка.
Добавь квиз на свою страницу

Дедлайн: 3 июля, 23:59 МСК

Ожидает проверки

Что сделаешь

Возьмёшь свою страницу index.html и добавишь в неё квиз: свой вопрос с вариантами ответа и счёт. Нажмёшь на правильный — счёт вырастет; на неправильный — нет.

Это ровно то, что разбирали в лонгриде: onclick зовёт функцию check, та через if сравнивает ответ с правильным и растит счёт. Вопрос придумываешь — про что угодно.

Шаги

1 Открой свой index.html в редакторе

Тот же файл, что и раньше. Удобнее всего в VS Code (ставили на прошлой неделе) — он подсвечивает опечатки и незакрытые теги. Можно и в Блокноте: правый клик по index.html → «Открыть с помощью» → «Блокнот».

Двойной клик откроет файл в браузере — а нам сейчас нужен редактор, чтобы менять код.

2 Добавь свой вопрос, кнопки-ответы и счёт

Придумай вопрос и пару ответов к нему — один правильный. Внутри <body> добавь вопрос, кнопки-ответы и место для счёта. Текст на кнопке и текст внутри check('...') — одинаковые:

<h3>Сюда впиши свой вопрос?</h3>

<button onclick="check('ответ А')">ответ А</button>
<button onclick="check('ответ Б')">ответ Б</button>

<p>Счёт: <span id="score">0</span></p>

<h3> — твой вопрос.
каждая <button> — вариант ответа. На кнопке пиши текст ответа, и его же — внутри check('...').
нужно больше вариантов — добавь ещё <button> по тому же шаблону.

Ответ в onclick — в одинарных кавычках, потому что двойные заняты самим onclick="...".

3 Добавь JavaScript

Перед закрывающим </body> вставь тег <script> с функцией check. Она сравнивает ответ с правильным, на совпадении добавляет очко и обновляет счёт на странице:

<script>
  let score = 0;

  function check(answer) {
    if (answer === "ответ А") {
      score = score + 1;
    }
    document.getElementById("score").textContent = score;
  }
</script>

Что здесь что:

let score = 0 — счётчик. let, потому что значение будет расти.
function check(answer) — кнопка передаёт сюда свой ответ, он попадает в answer.
if (answer === "ответ А") — сюда впиши свой правильный ответ, точно так же, как он написан на его кнопке. В образце правильный — «ответ А».
document.getElementById("score").textContent = score — вписывает новый счёт на страницу.

Правило совпадения: что стоит в кнопке внутри check('…'), то же впиши в if (answer === "…") — теми же буквами. Не совпало — счёт не вырастет.

Если на странице уже есть <script> из прошлой домашки — этот добавь отдельным тегом, ниже. Друг другу они не мешают.

4 Сохрани

«Файл» → «Сохранить» (или Ctrl+S). Файл уже .html — просто перезаписываем.

Если открылось «Сохранить как» — снова «Тип файла: Все файлы», имя index.html, кодировка UTF-8.

5 Открой в браузере и проверь

Дважды кликни по index.html. Нажми правильный ответ — счёт станет 1. Нажми неправильный — не изменится. Так и должно быть: счёт растёт только на правильный ответ.

Не работает? F12 → вкладка Console. Если там красная ошибка — сделай скриншот и кинь в чат ИИ.

По желанию (если зашло)

Потренируй главный навык: мелочь — руками, а на большее — попроси нейросеть и проверь, что вышло.

Второй вопрос. Попроси нейросеть: «добавь в квиз второй вопрос с двумя кнопками-ответами, счёт общий». Вставь код, проверь, что счёт растёт и со второго вопроса.
Реакция на счёт. Попроси: «когда счёт дойдёт до 3, пусть на странице появится надпись Молодец!». Проверь — а если не сработало, открой F12, скриншот ошибки и снова к нейросети.
Кнопка «Заново». Попроси: «добавь кнопку, которая обнуляет счёт до нуля». Вставь её код, нажми — счёт должен стать 0.

Проверь себя

Открой страницу в браузере и отметь пункты.

На странице есть твой вопрос и кнопки-ответы под ним.

У счёта есть id="score", кнопки зовут check('...').

Перед </body> есть тег <script> с функцией check.

Правильный ответ в if написан так же, как на его кнопке.

Клик по правильному ответу растит счёт, по неправильному — нет.

В консоли (F12 → Console) нет красных ошибок.

Файл сохранён как .html в UTF-8 и открывается в браузере.

Если что-то пошло не так

Счёт не растёт на правильном ответе — текст в if (answer === "...") написан не точь-в-точь как в кнопке. Сравни check('ответ А') и if (answer === "ответ А"): регистр, пробелы и буквы должны совпадать.
check is not defined — функция check не объявлена или <script> с ней не попал на страницу. Проверь, что тег <script> есть и внутри него есть function check.
Cannot read properties of null — JS не нашёл <span> со счётом. Проверь id="score" и что <script> стоит ниже элементов, перед </body>.
Счёт меняется, но на странице не виден — проверь строку document.getElementById("score").textContent = score;.

Как сдать

Дедлайн: 3 июля, 23:59 МСК.

Отправь обновлённый файл index.html в папку «Домашки» в Telegram.

Куратор проверит и поставит статус «Проверено» — на странице он обновится сам.

Сдать в папку «Домашки» →