РЕПЕТИТОР математика физика информатика
Для школьников и студентов. Подтягивание пробелов. ЦЭ, ЦТ, ОГЭ, ЕГЭ.
Идет набор на ЛЕТО. Жмите для подробностей:)
21 of 77 menu

Тренажер CSS

Реализуйте тренажер для заучивания CSS свойств.

Продумайте структуру базы данных для хранения пользователей и вопросов по CSS свойствам. В коде должен быть заранее подготовлен массив с вопросами (описание свойства и правильный ответ). Реализуйте регистрацию и авторизацию пользователей. Настройте серверную часть для работы с API. Все операции должны выполняться через AJAX-запросы без перезагрузки страницы.

Основные возможности проекта

  • Регистрация и авторизация пользователей.
  • Вывод описания CSS свойства.
  • Инпут для ввода названия свойства.
  • Проверка ответа с красной подсветкой при ошибке.
  • Вопросы в случайном порядке.
  • Обратный отсчет времени на прохождение.
  • Запоминание выученных свойств на сервере.
  • Кнопка сброса прогресса.

Регистрация и авторизация

На сайте должна быть реализована регистрация и авторизация пользователей:

  • Регистрация - форма с полями: логин, email, пароль.
  • Авторизация - форма с полями: логин, пароль.
  • Прогресс каждого пользователя сохраняется отдельно.
  • Все операции выполняются без перезагрузки страницы.

Главная страница

На странице должны быть размещены:

  • Описание CSS свойства.
  • Инпут для ввода названия свойства.
  • Кнопка "Проверить".
  • Таймер обратного отсчета.
  • Прогресс (сколько вопросов пройдено из общего количества).

Вопросы

Вопросы выводятся в случайном порядке. При правильном ответе вопрос считается выученным и сохраняется на сервере. При следующем запуске выученные вопросы не показываются. Если ответ неправильный, граница инпута загорается красным цветом. После этого пользователь может попробовать снова.

Таймер

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

Запоминание выученных свойств

Выученные свойства сохраняются на сервере для каждого пользователя. При повторном запуске эти свойства исключаются из списка вопросов.

Сброс прогресса

На странице должна быть кнопка "Сбросить прогресс". При нажатии на нее все сохраненные выученные свойства пользователя очищаются на сервере с подтверждением действия.

Завершение

Когда все вопросы пройдены правильно, тренажер поздравляет пользователя и предлагает начать заново.

Взаимодействие с сервером

Все операции выполняются через AJAX-запросы:

  • При загрузке страницы список вопросов и прогресс пользователя загружаются с сервера.
  • При правильном ответе данные о выученном свойстве отправляются на сервер, после успешного ответа обновляется интерфейс.
  • При сбросе прогресса данные отправляются на сервер, после успешного ответа обновляется интерфейс.

Дополнительные возможности

  • Подсказка (первая буква свойства).
  • Звуковой сигнал при правильном/неправильном ответе.
Мы используем cookie для работы сайта, аналитики и персонализации. Обработка данных происходит согласно Политике конфиденциальности.
принять все настроить отклонить