SKIP TO CONTENT

Ваше первое интерактивное приложение-викторина

beginner~15 мин0/4 шаги

Ваше первое интерактивное приложение-викторина

Лекция — это монолог. Викторина — это диалог.

Студенты, которые проверяют себя, запоминают на 50% больше, чем те, кто просто перечитывает материал. В этом уроке вы создадите настоящее, кликабельное приложение-викторину — с вопросом, вариантами ответов, которые подсвечиваются зелёным или красным при нажатии, счётчиком очков и итоговым сообщением. Всё работает в браузере. Никаких фреймворков, никакого бэкенда. Только HTML + немного JavaScript.

Инструкции

1

Добавьте тег <h1> с названием вашей викторины — какую тему она проверяет?

Подсказка: Попробуйте: `<h1 class="text-3xl font-bold text-white mb-2">Быстрая проверка знаний</h1>`

2

Добавьте <div class="question"> с текстом вопроса викторины

3

Добавьте не менее 3 кнопок <button class="answer-btn">. Отметьте правильный ответ атрибутом data-correct="true"

4

Добавьте <div class="score-counter"> внизу, отображающий «Score: 0» — стартовый JavaScript обновит его автоматически при нажатии на правильный ответ

Ваш код

html
37 строки
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

Живой просмотр

Живой просмотр