Дизайн и верстка квиза для Телеграм мини-апп
Веб и мобильный дизайн
Бюджет: 4000 руб.
Нужно разработать дизайн и сверстать небольшую викторину на 7-10 вопросов
результат html+css+js
Референс https://dribbble.com/shots/14012432-Quiz-App-Mobile-Design
Адаптивная верстка
5 типов экранов:
1) Вопрос + выбор одного ответа
Текст вопроса, кнопки с вариантами. Нажав на кнопку, пользователь сразу получает сигнал
верно/неверно и переходит к следующему экрану
2) Вопрос + выбор нескольких ответов
Текст вопроса, чекбоксы с вариантами, кнопка "ответить". Нажав на кнопку, пользователь сразу
получает сигнал верно/неверно и переходит к следующему экрану
3) Угадай фото по фрагменту
Фото, кнопки с вариантами. После нажатия одно изображение фрагмента меняется на
изображение целиком, пользователь получает сигнал верно/неверно и переходит к следующему
экрану
4) Сопоставление событий
2 столбца: 4 события и 4 ответа
Предложить визуал и механику
5) Где фейк?
Текст вопроса, два изображения для выбора, без кнопок
Нажав на изображение, пользователь сразу получает сигнал верно/неверно и переходит к
следующему экрану
На каждом экране показывается текущий прогресс
Вопросы ранжируются по сложности: легкий, нормальный, сложный. Экраны должны визуально
соответствовать сложности вопроса
Финальный экран с результатом:
Полученное звание
Количество верных ответов.
У какого процента такое же количество ответов
Кнопка поделиться в сторис
Брейкпоинты:
Свыше 991px (десктоп)
От 767px до 991px (планшет)
От 478px до 767px (горизонтальный смартфон)
Меньше 478px (вертикальный смартфон)
