Реализовать страницу решения простых арифметических примеров
Есть страница, на которой размещено 100 простейших арифметических примеров (5+7, 18-4 и т.д.), заходя на которую пользователь должен решить их на время.
Вот как она выглядит:
https://www.figma.com/design/5tv00f224LAbZk3mu1exJr/100-%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D0%BE%D0%B2-%D0%B4%D0%BB%D1%8F-%D1%80%D0%B0%D0%B7%D0%B2%D0%B8%D1%82%D0%B8%D1%8F-%D0%BC%D0%BE%D0%B7%D0%B3%D0%B0?node-id=273-4764&node-type=frame&t=P3rgQ5pSWghS7zFj-0
Здесь кликабельный прототип:
https://www.figma.com/proto/5tv00f224LAbZk3mu1exJr/100-%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D0%BE%D0%B2-%D0%B4%D0%BB%D1%8F-%D1%80%D0%B0%D0%B7%D0%B2%D0%B8%D1%82%D0%B8%D1%8F-%D0%BC%D0%BE%D0%B7%D0%B3%D0%B0?node-id=273-4764&node-type=frame&t=P3rgQ5pSWghS7zFj-0&scaling=min-zoom&content-scaling=fixed&page-id=1%3A3
Нужно её реализовать, используя на бэкенде PHP (желательно фреймворк Laravel) + БД MySQL, а на фронте Vue.js.
Вёрстка готова, вам верстать не надо будет.
Какие особенности нужно учесть:
1. Есть два варианта отображения этих примеров - либо он видит сразу все 100 шт., либо видит только один за раз. Человек выбирает подходящий ему вариант, нажимая на соответствующую кнопку.
2. Изначально пользователь видит рандомные примеры, но как только он нажимает кнопку «Начать» и запускается таймер, то все примеры обновляются (защита от того, что он решит все примеры до запуска таймера).
3. Пользователь может решать примеры без авторизации, тогда у него не будет возможность видеть статистику решений. Либо он может авторизоваться и видеть статистик всех своих попыток (сколько было всего сессий, средний результат, лучший результат) и график.
4. График вам не надо будет делать с нуля, для этого мы с вами задействуем готовое решение от amcharts. Нужно будет в него передавать данные.
5. Я как владелец сервиса должен после авторизации видеть ещё панель администратора, где видна статистика по кол-ву пользователей, среднему времени решения, статистику подходов (см. макет в фигме).
6. У пользователя есть возможно сменить размер шрифта примеров, когда он видит их все разом.
7. Есть ссылка «Знаете как улучшить сервис? Напишите нам». При клике появляется окошко, где человек сможет ввести текст и отправить его мне. Такой текст должен будет прилететь мне в телеграм.
8. Есть ссылка «Настройте напоминание в Телеграмм, чтобы не пропускать тренировки». При клике должен открываться телеграм-бот, где человек сможет настроить себе когда ему присылать напоминание (На первом шаге выбирает: Раз в день, раз в два дня, раз в три дня, раз в неделю. На втором: выбирает время напоминания).
9. Есть ссылка «Версия для печати». При клике в новом окне будет открываться страница где будет только таблица со 100 примерами без всего лишнего.
10. После нажатия кнопки «Начать» запускается секундомер. Кнопка с красным крестиком отменяет попытку. После нажатия кнопки «Начать» фокус попадает в поле с ответом первого примера (у все остальных примеров в этот момент поле для ответа недоступно для ввода ответа, оно как бы находится в режиме disabled и окантовано серым цветом). Если человек ввёл правильный ответ то поле окантовывается зелёным цветом, открывается поле для ответа следующего примера и фокус автоматом перескакивает туда. Если же человек ввёл неправильный ответ, то поле окантовывается красным цветом, ответ стирается и поле снова становится доступным для ввода. Следующий пример не разблокируется до тех пор, пока человек не ввёл правильный ответ.
11. Если человек решил примеры с личным рекордом показываем ему всплывающее окно с поздравлением.
Если из текста не все понятно, здесь ещё видеоописание: https://share.cleanshot.com/fqSFNX26
Бюджет: 50 000 рублей
Срок: 14 дней
В заявке обязательно укажите какой стек технологий будете использовать для реализации. Предпочтение будет отдаваться PHP (желательно фреймворк Laravel) + БД MySQL, а на фронте Vue.js. т.к. у нас ряд других проектов на этом стеке и если хорошо справитесь с задачей планирую вас также привлекать к работе с другими нашими проектами.