---
title: "Квизы онбординга"
description: "Добавляйте интерактивные квизы в онбординги Adapty для сбора предпочтений пользователей и персонализированных сценариев — без написания кода."
---

Превратите онбординг в диалог: добавляйте квизы в конструкторе Adapty без кода, собирайте предпочтения, сегментируйте пользователей и [разветвляйте сценарии](onboarding-user-engagement#onboarding-flow-branching) на основе ответов в реальном времени. Начните собирать аналитику за считаные минуты — код не нужен.

## Добавление квизов \{#add-quizzes\}

Вы можете добавлять квизы разных типов — текстовые, эмодзи или с изображениями — для получения ответов от пользователей:

1. Нажмите **Add** в верхнем левом углу.
2. Выберите **Quiz** и укажите тип:
- **Simple**: Список текстовых вариантов с одиночным выбором. Используйте для сегментации по основному признаку (например, «Кем вы работаете?»).
- **Multiple choice**: Позволяет выбрать несколько текстовых вариантов. Отлично подходит для сбора всех интересов пользователя (например, любимые функции).
- **Emoji**: Варианты представлены эмодзи для быстрой реакции. Хорошо для экспресс-опросов (например, «Насколько вам интересно?»).
- **Media picker**: Изображения или видео в качестве вариантов выбора. Идеально для визуального выбора (например, выберите любимую тему).
- **Rating**: Оценка по числовой шкале или звёздами. Используйте для измерения удовлетворённости или уверенности (например, оцените функцию от 1 до 5).
- **Popup question**: Отображает вопрос в виде модального окна. Отлично подходит для срочных подсказок.
3. Настройте квиз в правой панели:
- **Required**: Сделайте ответ обязательным, прежде чем пользователь сможет продолжить.
- **Layout**: Выберите между списком и плиточным макетом с изображениями.
- **Multiple answers**: Разрешите множественный выбор (отключает параметры навигации для квиза).
- **Show checkboxes**: Отображайте флажки при включённом множественном выборе.
4. Настройте варианты квиза в правой панели:
- **Label**: Текст, отображаемый для каждого варианта.
- **Value**: Значение, передаваемое в аналитику и вебхуки.
- **Image type**: Загрузите медиафайл или используйте эмодзи.
5. Настройте [действия](onboarding-actions), которые будут выполняться при выборе варианта.

Подробнее читайте в [гайде по созданию квизов](#how-to-design-quizzes) ниже.

   <img src="/assets/shared/img/add-quiz.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

### Как создавать квизы \{#how-to-design-quizzes\}

Рассмотрим простой пример настройки квиза.

Допустим, у вас есть приложение с рецептами и вы хотите узнать, являются ли пользователи веганами или вегетарианцами, а затем — в зависимости от ответа — узнать больше об их предпочтениях.

#### Шаг 1. Добавьте экраны \{#step-1-add-screens\}

1. Добавьте новый экран и разместите на нём элемент **Quiz**.
   
   <img src="/assets/shared/img/onboarding-user-engagement1.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   
2. Добавьте экраны для разных групп пользователей. В нашем примере они будут собирать дополнительную информацию, поэтому тоже будут содержать квизы.
   
   <img src="/assets/shared/img/onboarding-user-engagement2.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   
3. Добавьте финальный экран, сигнализирующий о завершении онбординга, чтобы пользователи могли сразу перейти в приложение.
   
   <img src="/assets/shared/img/onboarding-user-engagement3.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '400px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

#### Шаг 2. Настройте навигацию \{#step-2-configure-navigation\}

1. Для настройки динамической навигации выберите элемент **Options** на первом экране квиза. В разделе **Behavior** добавьте **Action on Option**.

    Поскольку мы хотим перенаправлять пользователей на разные экраны в зависимости от ответа, выберите **Navigate** в качестве действия, установите **Dynamic** для **Data** и выберите элемент **Options** в **State**. Затем свяжите каждый вариант с нужным экраном.

   
   <img src="/assets/shared/img/onboarding-user-engagement4.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

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

:::tip
Если вы хотите настраивать сам онбординг на основе ответов квиза, смотрите гайд по [навигации](onboarding-navigation-branching#dynamic-navigation) или по [использованию переменных](onboarding-variables).
:::

   
   <img src="/assets/shared/img/onboarding-user-engagement5.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

## Кастомизация квиза \{#quiz-customization\}

Помимо базовой [компоновки элементов](onboarding-layout#element-layout), вы можете настроить внешний вид квиза:

1. Выберите элемент квиза на левой панели.
2. Перейдите в **Styles** в правом меню.
3. Настройте параметры:
- **Options**: Высота, отступы, фон, скруглённость, граница, цвет границы.
- **Text**: Цвет, шрифт, выравнивание.
- **Pressed State**: Фон, цвет текста, цвет границы.

:::tip
После настройки стиля элемента квиза вы можете нажать **Apply styles to all options** ниже, чтобы применить те же стили ко всем экранам онбординга сразу.
:::

   <img src="/assets/shared/img/quiz-customization.png"
   style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
   }}
   />
   

## Сохранение ответов квиза \{#save-quiz-answers\}

Вы также можете обрабатывать ответы квиза в коде приложения, сохранять их или использовать в логике приложения.

Для этого необходимо обрабатывать событие ответа на квиз в коде приложения. Смотрите гайд для вашей платформы:

- [iOS](ios-handling-onboarding-events)
- [Android](android-handle-onboarding-events)
- [React Native](react-native-handling-onboarding-events)
- [Flutter](flutter-handling-onboarding-events)