Тренажер HTML
Реализуйте тренажер для заучивания HTML тегов.
Продумайте структуру базы данных для хранения пользователей и вопросов по HTML тегам. В коде должен быть заранее подготовлен массив с вопросами (описание тега и правильный ответ). Реализуйте регистрацию и авторизацию пользователей. Настройте серверную часть для работы с API. Все операции должны выполняться через AJAX-запросы без перезагрузки страницы.
Основные возможности проекта
- Регистрация и авторизация пользователей.
- Вывод описания HTML тега.
- Инпут для ввода названия тега.
- Проверка ответа с красной подсветкой при ошибке.
- Вопросы в случайном порядке.
- Обратный отсчет времени на прохождение.
- Прогресс пользователя сохраняется на сервере.
Регистрация и авторизация
На сайте должна быть реализована регистрация и авторизация пользователей:
- Регистрация - форма с полями: логин, email, пароль.
- Авторизация - форма с полями: логин, пароль.
- Прогресс каждого пользователя сохраняется отдельно.
- Все операции выполняются без перезагрузки страницы.
Главная страница
На странице должны быть размещены:
- Описание HTML тега.
- Инпут для ввода названия тега.
- Кнопка "Проверить".
- Таймер обратного отсчета.
- Прогресс (сколько вопросов пройдено из общего количества).
Вопросы
Вопросы выводятся в случайном порядке. При правильном ответе переходим к следующему вопросу. При неправильном - граница инпута загорается красным цветом. После этого пользователь может попробовать снова. Прогресс пользователя сохраняется на сервере.
Таймер
При начале прохождения запускается таймер обратного отсчета. Время на прохождение - 60 секунд. Таймер отображается на странице. По истечении времени, если пользователь не успел ответить на все вопросы, тренажер считается проваленным и предлагает начать заново.
Завершение
Когда все вопросы пройдены правильно, тренажер поздравляет пользователя и предлагает пройти заново.
Взаимодействие с сервером
Все операции выполняются через AJAX-запросы:
- При загрузке страницы список вопросов и прогресс пользователя загружаются с сервера.
- При правильном ответе данные о прогрессе отправляются на сервер, после успешного ответа обновляется интерфейс.
Дополнительные возможности
- Подсказка (первая буква тега).
- Количество правильных и неправильных ответов.