Testing-App: Реализация тестирования с сохранением прогресса

Описание проекта

Это приложение для тестирования, которое позволяет пользователю отвечать на вопросы и сохранять прогресс в localStorage. Вопросы могут быть разных типов: с одним вариантом ответа, с несколькими вариантами, текстовые вопросы с короткими и длинными ответами. Приложение сохраняет введённые ответы в тесте, даже после перезагрузки страницы. Также есть таймер, который ограничивает время на прохождение теста.

Стек технологий

• React
• TypeScript
• Vite
• Material UI
• SweetAlert2: Библиотека для отображения всплывающих сообщений и модальных окон.
• localStorage
• Bun: В качестве пакетного менеджера для управления зависимостями.
• Redux ToolKit

Основные компоненты

1. KnowledgeTesterApp.tsx

   Основной компонент, использующий логику тестирования. Ренедеринг компонента с типами вопросов. Кнопки "Next" & "Finish": Активируется, только если на текущий вопрос дан валидный ответ (поле не пустое или выбран вариант).

2. QuestionRenderer.tsx
   Отвечает за рендеринг вопросов разных типов Qustions:

   • SingleChoiceQuestion: Компонент для вопроса с одним вариантом ответа.
   • MultipleChoiceQuestion: Компонент для вопроса с несколькими вариантами ответа.
   • ShortAnswerQuestion: Компонент для короткого текстового ответа.
   • LongAnswerQuestion: Компонент для длинного текстового ответа.

3. Timer.tsx

   Компонент, отвечающий за отсчёт времени и вызов соответствующих действий, когда время истекает. Реализован с использованием useRef и useEffect для контроля времени.

   Важная особенность: таймер построен с использованием метода requestAnimationFrame, который не замораживается при повторных рендерах приложения. Это позволило избежать проблем с задержками при обновлениях.

4. Progress.tsx

   Простая визуализация прогресса теста, отображающая текущий вопрос и общее количество вопросов.

Управления состоянием

Управление состоянием выполенено с помощью RTK. Состояние в приложении организовано на основе слайсов. Каждый слайс отвечает за определенную функциональность приложения, например, за состояние теста или вопросов. Для работы с состоянием в компонентах используются селекторы и действия из слайсов. Чтобы состояние сохранялось после перезагрузки страницы, слайс включает логику сохранения данных в localStorage. При изменении состояния данные автоматически записываются в localStorage, а при инициализации состояние восстанавливается из сохранённых данных, если они существуют.

Основная логика

• Сохранение прогресса: При загрузке компонента проверяется наличие сохранённых ответов и индекса текущего вопроса. Если данные найдены, они восстанавливаются в состояние приложения. При изменении ответов или индекса текущего вопроса эти данные сохраняются в localStorage.

• Обработка времени: Когда время теста истекает, приложение завершает тест автоматически. В таймере используется requestAnimationFrame для эффективного обновления времени без лишней нагрузки на браузер.

• Ответы на вопросы: Приложение поддерживает разные типы вопросов, а также сохраняет ответы пользователя для каждого вопроса.

Установка и запуск

1. Клонируйте репозиторий: git clone <URL-репозитория>

2. Установите зависимости с помощью Bun: bun install

3. Запустите проект: bun dev