Проект в портфолио на чистом JavaScript. Quiz, викторина, тест. Динамическая загрузка данных.

YOUTUBE · 01.12.2025 09:35

Ключевые темы и таймкоды

Создание викторины на JavaScript

0:00
  • Автор представляет свой проект - викторину на JavaScript, которую можно использовать для портфолио верстальщика.
  • В проекте есть вопросы, варианты ответов, правильные ответы и результаты.
  • Автор объясняет, как будет работать приложение: сначала загружаются данные из файла, затем проверяется их наличие, и если данные есть, приложение запускается.
  • Если данных нет, выводится предупреждение.
  • При выборе ответа, приложение определяет, правильный ли это ответ, и если нет, показывает правильный ответ.
  • При переходе к следующему вопросу, Scroll Bar перемещается.
  • Если пользователь не выбирает ответ, выводится предупреждение.

Функционал приложения

7:49
  • Автор показывает разметку приложения, включая окно предупреждения, блок с вопросом, блок с вариантами ответов, блок с результатами и блок с футером.
  • Автор объясняет, как стилизовать блоки и как будет работать приложение в зависимости от выбора ответа.
  • В конце автор предлагает ссылку на телеграм-канал, где будет выложен стартовый шаблон для проекта.

Создание тестового приложения

14:32
  • Создание тестового приложения с использованием JavaScript и HTML.
  • Использование режима US 3 для предотвращения ошибок и упрощения работы.

Объяснение кода

20:21
  • Объяснение работы с переменными и функциями.
  • Создание функции Show questions для рендеринга вопросов и ответов.
  • Использование индекса для передачи вопросов и ответов в функцию.

Работа с ошибками и предупреждениями

24:11
  • Имитация ошибок и предупреждений для проверки работы приложения.
  • Объяснение работы с предупреждениями и ошибками.

Рендеринг вопросов и ответов

26:09
  • Рендеринг заголовка вопроса, кэша вопросов и прогресса бара.
  • Использование свойства и на HTML для перезаписи значений.

Создание викторины

28:06
  • Создание массива вопросов и их рендеринг на странице.
  • Обращение к массиву вопросов и выбор конкретного вопроса для рендеринга.

Обработка ответов

32:57
  • Создание функции для обработки ответов.
  • Передача функции в атрибут onclick для каждого варианта ответа.
  • Сравнение выбранного ответа с правильным ответом и обработка результата.

Демонстрация правильного ответа

39:49
  • Демонстрация правильного ответа через 1 секунду после неправильного выбора.
  • Добавление класса к вкладке с правильным ответом и иконке.

Запрет выбора вариантов ответа

40:46
  • Добавление класса disable к всем вкладкам для запрета выбора.

Создание функции для отображения вопросов

41:44
  • Создается функция, которая отображает вопросы викторины на странице.
  • Функция принимает переменную "account" и отображает вопросы, увеличивая значение "account" на единицу при переходе к следующему вопросу.

Обработка ответов и переход к следующему вопросу

43:40
  • Если пользователь выбирает ответ, функция проверяет, выбрал ли он уже ответ, и если нет, то запрещает переход к следующему вопросу.
  • Если пользователь выбрал ответ, функция увеличивает значение "account" и переходит к следующему вопросу.

Очистка вопросов и добавление новых

45:38
  • Функция очищает блок вопросов и добавляет новые вопросы, используя свойство "innerHTML".
  • Это позволяет избежать наложения вопросов друг на друга.

Определение окончания викторины

49:30
  • Создается условие, которое проверяет, равен ли текущий вопрос общему количеству вопросов.
  • Если условие выполняется, функция добавляет класс "disabled" к блоку результатов и выводит сообщение о завершении викторины.

Проверка работоспособности

51:28
  • Проверка работоспособности функции, включая отображение количества правильных ответов и возможность начать заново.