Презентация

1.

К У Р С О В О Й
П Р О Е К Т
Викторина
с вопросами из файла
Выполнил студент группы 06-24.ИСИП.ОФ.9
Решетов Дмитрий Игоревич
Руководитель: Сбойчаков Д.А.
МДК.02.02 «Инструментальные средства разработки» · Санкт-Петербург, 2026

2.

01
Актуальность
01
02
03
Зависимость от облака
Платный функционал
Нет своих файлов
Kahoot, Google Forms, Quizlet требуют
регистрации и постоянного интернета
Бесплатные версии сервисов сильно
ограничены, импорт вопросов часто
платный
Невозможно загрузить готовый JSON-файл
с вопросами для офлайн-работы
Решение: лёгкое клиентское приложение, работающее в браузере локально, без регистрации и без серверов
Решетов Д.И. · «Викторина с вопросами из файла»
2 / 11

3.

02
Цель и задачи проекта
З А Д АЧ И
Ц Е Л Ь
Разработать веб-приложение «Викторина с
вопросами из файла» — интерактивную
клиентскую викторину на чистом JavaScript с
загрузкой вопросов из JSON/TXT-файлов
Решетов Д.И. · «Викторина с вопросами из файла»
1
Проанализировать предметную область и аналоги
2
Сформулировать функциональные требования
3
Спроектировать структуры данных
4
Реализовать загрузку файлов JSON и TXT
5
Разработать игровую логику и подсчёт очков
6
Создать адаптивный UI с обратной связью
7
Реализовать форму добавления вопросов
8
Провести тестирование приложения
3 / 11

4.

03
Анализ существующих аналогов
Критерий
Kahoot
Google Forms
Quizlet
Наше приложение
Работа без регистрации
—
—
—
✓
Работа без интернета
—
—
—
✓
Загрузка из JSON-файла
—
—
частично
✓
Экспорт базы вопросов
—
—
—
✓
Полностью бесплатно
частично
✓
частично
✓
Вывод: разрабатываемое приложение покрывает ключевые ограничения существующих решений — полная автономность и работа с
собственными файлами
Решетов Д.И. · «Викторина с вопросами из файла»
4 / 11

5.

04
Функциональные требования
↓
Загрузка из файла
Поддержка JSON и TXT, drag & drop, обработка
ошибок чтения
★
Итоговый экран
Звёзды, оценочное сообщение, повтор или
возврат в меню
Решетов Д.И. · «Викторина с вопросами из файла»
?
Игровой процесс
Поочерёдная выдача вопросов, случайный
порядок, прогресс-бар
+
Добавление вопросов
Форма с валидацией всех полей и выбором
правильного варианта
✓
Подсчёт очков
Подсветка правильного/неправильного
ответа, +1 за верный
↑
Экспорт базы
Скачивание актуальной базы вопросов в JSON
через Blob
5 / 11

6.

05
Архитектура приложения
app.js
точка входа
data.js
quiz.js
ui.js
JSON/TXT · валидация · Blob
Класс Quiz · игровая логика
DOM · анимации ·
уведомления
Принцип: чёткое разделение ответственности — каждый модуль решает свою задачу. Логика не знает о DOM, UI не знает об игровых правилах
Решетов Д.И. · «Викторина с вопросами из файла»
6 / 11

7.

06
Структура данных
Объект вопроса (JSON)
{
"question": "Что такое замыкание?",
"options": [
Поля объекта
question
string
Текст вопроса. Обязательное непустое поле
"Функция без параметров",
"Функция с доступом к внешним",
"Анонимная функция",
"Рекурсивная функция"
options
Array<string>
Массив ровно из 4 непустых строк-ответов
],
"correctAnswer": 1
}
Решетов Д.И. · «Викторина с вопросами из файла»
correctAnswer
number
Индекс правильного ответа (0–3)
7 / 11

8.

07
Интерфейс приложения
Экран 1: Старт
Экран 2: Игра
Экран 3: Итог
8 встроенных вопросов
Прогресс-бар вверху
Финальный счёт
Загрузка из JSON / TXT
Текст вопроса
Звёзды (1–3)
Drag & Drop
4 варианта ответа
Оценочное сообщение
Кнопка добавления
Счётчик очков
Повтор / меню
Тёмная тема · адаптивный дизайн от 375px · CSS-анимации · drag & drop · SPA без перезагрузки страницы
Решетов Д.И. · «Викторина с вопросами из файла»
8 / 11

9.

08
Тестирование
01
02
03
Модульное тестирование
Интеграционное
тестирование
Системное тестирование
8
5
8
проверок
Класс Quiz, функции data.js: answer(), next(),
shuffleArray, validateQuestions
сценариев
Загрузка файла → запуск игры → завершение
→ добавление вопроса
проверок × 3 среды
Chrome 124, Firefox 125, мобильный 375px —
полные пользовательские сценарии
100% проверок пройдено — критических ошибок не обнаружено
Решетов Д.И. · «Викторина с вопросами из файла»
9 / 11

10.

09
Результаты работы
5
ES6+
100%
модулей в архитектуре проекта
Р Е А Л И З О В А Н О
✓ Загрузка вопросов из JSON и TXT
✓ Drag & Drop файлов
современные возможности JavaScript
✓ Случайный порядок (Фишер–Йейтс)
✓ Подсчёт очков + 3-уровневая оценка
✓ Подсветка правильных/неправильных
клиентская реализация без сервера
✓ Форма добавления с валидацией
✓ Экспорт базы через Blob API
3
уровня тестирования пройдено
Решетов Д.И. · «Викторина с вопросами из файла»
✓ Адаптивный UI от 375px
10 / 11

11.

Спасибо
за внимание!
Готов ответить на ваши вопросы
Решетов Дмитрий Игоревич · Группа 06-24.ИСИП.ОФ.9