Разработка web-клиента интерактивного обучающего приложения для проведения викторины

1.

МИНИСТЕРСТВО ЦИФРОВОГО РАЗВИТИЯ, СВЯЗИ И МАССОВЫХ
КОММУНИКАЦИЙ РОССИЙСКОЙ ФЕДЕРАЦИИ
Ордена Трудового Красного Знамени федеральное государственное
бюджетное образовательное учреждение высшего образования
«Московский технический университет связи и информатики»
РАЗРАБОТКА WEB-КЛИЕНТА ИНТЕРАКТИВНОГО ОБУЧАЮЩЕГО
ПРИЛОЖЕНИЯ ДЛЯ ПРОВЕДЕНИЯ ВИКТОРИНЫ
Выполнил: Шаинян Саркис Арутюнович – МТУСИ студент гр. БФИ2102, Москва, Россия
Научный руководитель: Трухманов Вячеслав Борисович – МТУСИ, канд. физ.-мат. наук, Москва, Россия
Консультант: Королькова Татьяна Валерьевна – МТУСИ, ст. преп., Москва, Россия
Москва, 2025

2. Актуальность

Современное образование активно переходит в цифровую среду, и одним из наиболее
эффективных способов вовлечения студентов в учебный процесс становятся интерактивные форматы
обучения, в частности — викторины.
Хотя многие платформы делают упор на мобильные приложения, web-клиенты предлагают
более универсальный и доступный подход: они работают без установки, удобны для демонстрации на
больших экранах и лучше подходят для коллективного участия в аудитории.
2

3. Цель и задачи

Целью данной работы является создание интуитивно понятного и адаптивного web-клиента для
интерактивного обучающего приложения для проведения викторин, объединяющего лучшие практики
существующих образовательных платформ.
Для достижения данной цели необходимо решить следующие задачи:
проанализировать предметную область
сравнить существующие решения с точки зрения производительности, масштабируемости и
удобства использования
сформулировать функциональные и технические требования к разрабатываемому web-клиенту
обосновать выбор методов и технологий для реализации интерфейса, обеспечивающего высокую
производительность и безопасность
обеспечить интеграцию web-клиента с серверной частью приложения
разработать прототип web-клиента
3

4. Сравнение существующих решений через парадигму web-клиента

Платформа
Навигация
Интерактивность
Адаптивность
Обратная связь
Подробная,
Kahoot
Понятная навигация
Викторины в реальном времени
Преимущественно для телефонов
после каждого вопроса
показываются правильные и
неправильные ответы, процент
ответивших верно
Quizizz
Логичная структура страниц
Поддержка как синхронных, так и
асинхронных игр
Для всех экранов
Отличная, пользователи получают
мгновенные комментарии к
ответам, визуализацию прогресса,
возможность видеть объяснения к
каждому вопросу.
Google Forms
Слабая, нет визуальной карты
опроса, возврат к предыдущим
вопросам может быть ограничен
Поддерживает несколько форм
тестирования
Для всех экранов
Слабая, отчёты ограничены
сводной статистикой
Отсутствует для экранов, чья
ширина меньше 768 пикселей
Слабая, после выполнения
задания отображается
информация о правильности, но
нет детального анализа ошибок
или объяснений, отсутствуют
расширенные отчёты.
LearningApps.org
Наличие интуитивных заголовков
Акцент на взаимодействие через
мини-игры
4

5. Функциональные и технические требования

Функциональные
Технические
• Интуитивная навигация
• Высокая производительность
• Адаптивность и кроссбраузерность
• Модульность и масштабируемость
• Динамическая визуализация
• Типобезопасность и валидация
• Персонализация
• Безопасность данных на уровне интерфейса
• Интерактивность и отзывчивость интерфейса
5

6. Выбор используемых технологий

TypeScript JavaScript
Redux
React
Vite
Zod
Tailwindcss
WebStorm BitBucket
shadcn/ui
Git
6

7. Архитектура системы

7

8. Архитектурная методология Feature-Sliced Design(FSD)

8

9. Граф глобального состояния