Розробка квіз-форми на 1С-Бітрікс

Розробка квіз-форми на 1С-Бітрікс

Квіз-форма — це опитувальник із запитаннями, який в кінці пропонує користувачу отримати результат (персональну пропозицію, розрахунок, рекомендацію) в обмін на контактні дані. Конверсія квізів часто вища за звичайні форми у 2–5 разів: користувач вже витратив час на відповіді й хоче отримати результат. На 1С-Бітрікс квіз реалізується як кастомний компонент зі збереженням стану через сесію або localStorage.

Архітектура квізу

Квіз — послідовність кроків. Кожен крок — запитання з одним або кількома варіантами відповіді. Дані структуровані в інфоблоці або HL-блоці:

Інфоблок quizzes — квізи (один елемент = один квіз):

HL-блок b_hl_quiz_questions — запитання:

class QuizQuestionTable extends \Bitrix\Main\ORM\Data\DataManager
{
    public static function getTableName(): string { return 'b_hl_quiz_questions'; }

    public static function getMap(): array
    {
        return [
            new IntegerField('ID', ['primary' => true, 'autocomplete' => true]),
            new IntegerField('QUIZ_ID'),
            new IntegerField('SORT'),
            new StringField('TEXT'),              // Текст запитання
            new StringField('TYPE'),              // single | multiple | image_choice
            new TextField('OPTIONS_JSON'),        // JSON: [{id, text, image?, weight?}]
            new BooleanField('IS_REQUIRED', ['values' => [false, true]]),
            new StringField('HINT'),              // Підказка до запитання (опціонально)
        ];
    }
}

PHP-компонент квізу

// /local/components/local/quiz/class.php
namespace Local\Quiz;

class QuizComponent extends \CBitrixComponent
{
    public function executeComponent(): void
    {
        $quizId = (int)$this->arParams['QUIZ_ID'];

        // Завантажити квіз і запитання
        $quiz      = \CIBlockElement::GetByID($quizId)->GetNext();
        $questions = QuizQuestionTable::getList([
            'filter' => ['QUIZ_ID' => $quizId],
            'order'  => ['SORT' => 'ASC'],
        ])->fetchAll();

        foreach ($questions as &$q) {
            $q['OPTIONS'] = json_decode($q['OPTIONS_JSON'], true) ?? [];
        }

        $this->arResult = [
            'QUIZ'      => $quiz,
            'QUESTIONS' => $questions,
            'TOTAL'     => count($questions),
        ];

        $this->includeComponentTemplate();
    }
}

Фронтенд: стан і навігація

Квіз — SPA-подібний UI на одній сторінці. Стан зберігається в JS-об'єкті:

const quizState = {
    currentStep: 0,       // Поточне запитання (0-indexed)
    answers: {},          // {questionId: [selectedOptionIds]}
    contactData: null,    // Дані з фінальної форми
    startTime: Date.now(),
};

function goToStep(step) {
    document.querySelectorAll('.quiz-step').forEach(el => el.classList.remove('active'));
    document.querySelector(`.quiz-step[data-step="${step}"]`)?.classList.add('active');
    quizState.currentStep = step;
    updateProgressBar();
}

function selectOption(questionId, optionId, isMultiple) {
    if (!quizState.answers[questionId]) {
        quizState.answers[questionId] = [];
    }

    if (isMultiple) {
        const idx = quizState.answers[questionId].indexOf(optionId);
        if (idx === -1) {
            quizState.answers[questionId].push(optionId);
        } else {
            quizState.answers[questionId].splice(idx, 1);
        }
    } else {
        quizState.answers[questionId] = [optionId];
        // Автоматично переходимо до наступного запитання
        setTimeout(() => nextStep(), 300);
    }
}

function updateProgressBar() {
    const total    = parseInt(document.getElementById('quiz-total').value);
    const progress = ((quizState.currentStep) / total) * 100;
    document.getElementById('quiz-progress-fill').style.width = progress + '%';
}

Фінальна форма і відправка

Після останнього запитання показуємо форму з контактними даними. Відправка — AJAX:

async function submitQuiz(formData) {
    const payload = {
        quiz_id:    document.getElementById('quiz-id').value,
        answers:    quizState.answers,
        name:       formData.get('name'),
        phone:      formData.get('phone'),
        email:      formData.get('email'),
        time_spent: Math.round((Date.now() - quizState.startTime) / 1000),
        sessid:     BX.bitrix_sessid(),
    };

    const response = await fetch('/local/ajax/quiz_submit.php', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(payload),
    });

    const result = await response.json();
    if (result.success) {
        goToStep('result'); // Показати сторінку результату
    }
}

Обробник на сервері

// /local/ajax/quiz_submit.php

$data   = json_decode(file_get_contents('php://input'), true);
$quizId = (int)($data['quiz_id'] ?? 0);
$name   = htmlspecialchars($data['name'] ?? '');
$phone  = htmlspecialchars($data['phone'] ?? '');

// Зберегти відповіді в HL-блок
QuizResponseTable::add([
    'QUIZ_ID'    => $quizId,
    'USER_IP'    => $_SERVER['REMOTE_ADDR'],
    'ANSWERS'    => json_encode($data['answers']),
    'TIME_SPENT' => (int)($data['time_spent'] ?? 0),
    'NAME'       => $name,
    'PHONE'      => $phone,
    'CREATED_AT' => new \Bitrix\Main\Type\DateTime(),
]);

// Створити лід у CRM
if (\Bitrix\Main\Loader::includeModule('crm')) {
    $quiz = \CIBlockElement::GetByID($quizId)->GetNext();
    $lead = new \CCrmLead(false);
    $lead->Add([
        'TITLE'              => 'Квіз: ' . $quiz['NAME'] . ' — ' . $name,
        'NAME'               => $name,
        'PHONE'              => [['VALUE' => $phone, 'VALUE_TYPE' => 'WORK']],
        'SOURCE_ID'          => 'WEB',
        'SOURCE_DESCRIPTION' => 'Квіз: ' . $quiz['NAME'],
        'COMMENTS'           => 'Відповіді: ' . json_encode($data['answers'], JSON_UNESCAPED_UNICODE),
    ]);
}

echo json_encode(['success' => true]);

Аналітика квізу

HL-блок b_hl_quiz_stats зберігає агреговану статистику:

• Скільки користувачів розпочали квіз.
• На якому кроці кидають (дозволяє покращити слабкі запитання).
• Конверсія: розпочали → завершили → залишили контакт.

// Зафіксувати початок квізу
QuizStatsTable::add([
    'QUIZ_ID'    => $quizId,
    'SESSION_ID' => session_id(),
    'STEP'       => 0,
    'EVENT'      => 'start',
    'CREATED_AT' => new \Bitrix\Main\Type\DateTime(),
]);

Терміни розробки