01
Старт
Короткое знакомство с механикой и вход в сценарий теста.
Разработка интерактивного квиза для интернет-магазина Plantis
Какое ты
растение?
растение?
Интерактивный JavaScript-сценарий с пошаговым прохождением, расчётом результата, подборкой товаров из каталога и возможностью поделиться итогом.
ПроектPlantis
ТипИнтерактивный тест
МеханикаПошаговый JS-сценарий
РезультатТовары + sharing
Как работает тест
Механика, которая ведёт дальше результата
Пользователь проходит последовательность экранов, а выбранные ответы управляют не только финальным результатом, но и тем, какие товары магазин предложит ему дальше.
02
Вопросы
Последовательные экраны выбора без длинной анкеты на одной странице.
03
Результат, товары и sharing
Комбинация ответов превращается в персональный результат со своим визуальным состоянием. На его основе пользователь получает подборку подходящих товаров из каталога Plantis и может поделиться результатом.
Что реализовано
Один JS-сценарий — несколько механик
Кейс показывает не столько содержание конкретного теста, сколько набор интерактивных возможностей, которые можно использовать в квизах, подборщиках и продуктовых сценариях.
Пошаговая навигация
JavaScript управляет последовательностью экранов, текущим шагом и переходами, поэтому тест ощущается как один интерактивный компонент, а не набор отдельных форм.
Состояние ответов
Выбранные варианты сохраняются между шагами и используются дальше в логике сценария — пользователь может двигаться по тесту без потери уже сделанного выбора.
Логика результата
Итог определяется комбинацией ответов. Такой же принцип можно использовать для квизов, калькуляторов, конфигураторов и рекомендательных сценариев.
Подборка товаров
Для каждого результата можно связать собственную подборку товаров из каталога. Тест становится не только развлекательным механиком, но и инструментом навигации по ассортименту.
Поделиться результатом
Финальный экран можно превратить в контент, которым хочется поделиться: результат получает собственное представление и действия для шаринга.
Состояния интерфейса
Активный ответ, прогресс, переходы, результат и дополнительные действия синхронизированы внутри одного сценария и меняются без перезагрузки страницы.
Техническая часть
JavaScript управляет всем сценарием
Основная техническая часть — управление состоянием теста на клиенте: шагами, выбранными ответами, переходами и финальным результатом. После расчёта сценарий продолжается — результат связывается с товарной подборкой и дополнительными действиями, включая возможность поделиться им.