Как сделать ветвящийся сценарий. Interacty

Сервис Interacty предлагает множество интересных инструментов для создания интерактивного контента. Однако вёрстка ветвящегося сценария довольно проста, поэтому в ней можно задействовать только стандартные элементы: страницы и кнопки.

Как сделать ветвящийся сценарий в сервисе Interacty

Перейдите на сайт сервиса и нажмите на кнопку «Зарегистрироваться» для создания аккаунта. Личный кабинет даёт возможность хранить проекты, редактировать их, а также следить за статистикой просмотров.

В качестве примера мы создали интерактив, показывающий, как меняются ответы нейросети при добавлении в запрос определённых ключевых слов.

Для создания ветвящегося сценария рекомендуем заранее написать весь текст и нарисовать схему взаимодействия.

Создайте новый проект, затем нажмите на кнопку «Добавить текст». Напишите, а затем отредактируйте первый абзац: измените шрифт, размер, цвет или добавьте ссылки.

Следующая кнопка откроет интерфейс библиотеки изображений. Загрузите картинку со своего компьютера, выделите её и нажмите кнопку «Вставить изображение».

Выделив блок с изображением, установите его масштаб. Доступно три варианта: «Full Width», «Compact» или «Custom», — последний позволяет установить размер в процентах от общей ширины интерактива. Рисунок можно выровнять по центру, левому или правому краю.

Если потребуется, вы можете включить эффект «Интерактивное размытие». Изображение расфокусируется и станет чётким только по клику на него.

Создание кнопок

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

Первая страница готова. Клонируйте её столько раз, сколько нужно: в правом нижнем углу эскиза страницы нажмите на многоточие и выберите «Клонировать».

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

Для удобства можно клонировать настроенные страницы, переименовывать их, менять порядок. И всё же удобнее работать, когда ветвящийся сценарий продуман заранее.

Настройка переходов

Выберите кнопку, выделите блок с ней. В правой панели найдите поле для добавления ссылки и вставьте туда внешний адрес.

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

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

Нажмите на синюю кнопку «Опубликовать» в правом верхнем углу. В открывшемся окне скопируйте ссылку либо выберите вариант «Встроить в LMS» — он выдаст вам embed-код.

Вот как выглядит готовый ветвящийся сценарий