Задание для отборочного тура

[mik639]

Задача

Создать виджет подбора очков. Ваш виджет должен подключатся к любой HTML-странице путем подключения файла со скриптом и добавления HTML-элемента с атрибутами id="glasses-quiz-widget" и data-source=”https://example.com/" в место, где нужно разместить виджет.

Виджет представляет из себя набор экранов с вопросами и вариантами ответов. При прохождении пользователя по вопросам, виджет формирует URL строку вида https://example.com/?screen_1=value_1&screen_2=value_1,value_2 ...

Где https://example.com/ — значение, взятое из data-source атрибута контейнера.

Параметры screen_1, screen_2 и так далее — зафиксированное за определенным экраном значение. Если пользователь пропустил вопрос, параметр экрана в URL добавлять не нужно. Обратите внимание что в качестве разделителя между параметрами используется символ &.

Если для экрана возможен только один вариант ответа, его значение присваивается параметру экрана screen_1=value_1. Если ответов может быть несколько, они присваиваются параметру экрана через запятую screen_2=value_1,value_2.

• Дизайн виджета доступен по ссылке.

Технологии

• HTML
• CSS
• JavaScript
• React
• Git

Ограничения

Ограничений на окружение среды разработчика нет. Для разработки виджета используйте React. Вы можете использовать любые сторонние пакеты. Решение принимается в виде ссылки на репозиторий в GitHub. В readme.md репозитория должен быть описан процесс сборки скрипта.

Критерии оценки

• Полнота реализованной функциональности
• Размер итогового скрипта
• Аккуратное следование дизайну

Дополнительные баллы

• Наличие тестов
• Поддержка тач-устройств

Критерий	Кол-во баллов
Базовая функциональность	256
Pixelperfect	128
Responsive design	64
Валидная верстка	64
Наличие тестов	128
Размер итогового скрипта	128
Поддержка тач устройств	128
Кроссбраузерность (Последние 2 версии Safari/Chrome/Edge)	128

[Tea0fc]

В технологиях написано использование CSS, но я правильно понимаю , что использование препроцессора SASS/SCSS не запрещено?

[aalto95]

написано же: "Вы можете использовать любые сторонние пакеты"

[mik639]

Да, вы можете использовать любые пре- и пост-процессоры CSS

[MemorizeCode]

Тач пада устройства, подразумевает использование react native ?

[mik639]

Нет, браузер на мобильном устройстве.