Как создать многоуровневый квиз с условиями в WordPress

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

Что такое многоуровневый квиз с условиями и зачем он нужен

Многоуровневый квиз — это тест, состоящий из нескольких этапов, где следующий вопрос зависит от предыдущего ответа. Например, при ответе "Да" открывается один набор вопросов, при ответе "Нет" — другой. Это позволяет глубже анализировать предпочтения пользователя и предлагать более релевантные результаты.

Применение:

• Образовательные тесты с разным уровнем сложности.
• Маркетинговые опросы с сегментацией аудитории.
• Психологические анкеты с адаптивными вопросами.

Для реализации такой логики в WordPress можно использовать специальные плагины или писать свой код с использованием AJAX и PHP.

Лучшие плагины для создания многоуровневых квизов с условной логикой

1. Quiz and Survey Master

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

Основные возможности:

• Поддержка нескольких типов вопросов (множественный выбор, текст, рейтинг и др.).
• Условные переходы между вопросами.
• Интеграция с почтовыми сервисами и CRM.

Скачать и установить можно из официального репозитория WordPress.

2. WP Quiz Pro

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

Преимущества:

• Визуальный конструктор вопросов.
• Поддержка мультимедийного контента.
• Статистика прохождения и аналитика.

Подробнее и покупка — на сайте разработчика.

Создаем многоуровневый квиз с условной логикой своими руками

Если вы хотите максимальный контроль и гибкость, можно реализовать квиз с условиями самостоятельно, используя PHP, AJAX и JavaScript. Ниже пример базовой логики.

Структура данных квиза

Представим вопросы в массиве с указанием условий перехода:

function wpquiz_get_questions() {
    return [
        1 => [
            'question' => 'Вам нравится программировать?',
            'answers' => [
                'Да' => 2,
                'Нет' => 3
            ]
        ],
        2 => [
            'question' => 'Какой язык предпочитаете?',
            'answers' => [
                'PHP' => null,
                'JavaScript' => null
            ]
        ],
        3 => [
            'question' => 'Что вам больше нравится?',
            'answers' => [
                'Дизайн' => null,
                'Маркетинг' => null
            ]
        ]
    ];
}

Каждый вопрос содержит текст и массив ответов, где ключ — вариант ответа, а значение — ID следующего вопроса или null, если квиз завершён.

Отображение вопроса и обработка ответов

Создадим AJAX обработчик для получения следующего вопроса:

add_action('wp_ajax_wpquiz_next_question', 'wpquiz_ajax_next_question');
add_action('wp_ajax_nopriv_wpquiz_next_question', 'wpquiz_ajax_next_question');

function wpquiz_ajax_next_question() {
    $questions = wpquiz_get_questions();
    $current_id = intval($_POST['current_id']);
    $answer = sanitize_text_field($_POST['answer']);
    
    if (!isset($questions[$current_id])) {
        wp_send_json_error('Вопрос не найден');
    }
    
    $next_id = $questions[$current_id]['answers'][$answer] ?? null;
    
    if ($next_id === null) {
        wp_send_json_success(['finished' => true, 'message' => 'Квиз завершён']);
    } else {
        $next_question = $questions[$next_id];
        wp_send_json_success([
            'finished' => false,
            'question_id' => $next_id,
            'question' => $next_question['question'],
            'answers' => array_keys($next_question['answers'])
        ]);
    }
    wp_die();
}

На фронтенде с помощью JavaScript отправляем выбранный ответ и получаем следующий вопрос, обновляя интерфейс.

Пример JavaScript для динамического обновления квиза

document.addEventListener('DOMContentLoaded', function () {
    let currentQuestionId = 1;

    function renderQuestion(questionData) {
        const container = document.getElementById('wpquiz-container');
        container.innerHTML = `<h3>${questionData.question}</h3>`;
        questionData.answers.forEach(answer => {
            const btn = document.createElement('button');
            btn.textContent = answer;
            btn.addEventListener('click', () => sendAnswer(answer));
            container.appendChild(btn);
        });
    }

    function sendAnswer(answer) {
        const data = new FormData();
        data.append('action', 'wpquiz_next_question');
        data.append('current_id', currentQuestionId);
        data.append('answer', answer);

        fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
            method: 'POST',
            body: data
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                if (result.data.finished) {
                    document.getElementById('wpquiz-container').innerHTML = `<p>${result.data.message}</p>`;
                } else {
                    currentQuestionId = result.data.question_id;
                    renderQuestion({
                        question: result.data.question,
                        answers: result.data.answers
                    });
                }
            } else {
                alert('Ошибка: ' + result.data);
            }
        });
    }

    // Инициализация первого вопроса
    fetch('<?php echo admin_url('admin-ajax.php?action=wpquiz_next_question&current_id=0&answer='); ?>')
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            currentQuestionId = 1;
            renderQuestion({
                question: result.data.question || 'Вам нравится программировать?',
                answers: ['Да', 'Нет']
            });
        }
    });
});

Дополнительные советы по созданию многоуровневых квизов в WordPress

Оптимизация производительности

Для больших квизов с множеством условий важно минимизировать количество запросов к серверу и хранить состояния пользователя, например, в сессиях или локальном хранилище браузера.

Использование плагинов кеширования

Если вы используете WP Quiz Pro или Quiz and Survey Master, убедитесь, что страницы с квизами исключены из кеширования, иначе AJAX-запросы не будут работать корректно.

Интеграция с WP Shop

Для монетизации квизов можно использовать плагин WP Quiz с расширенными функциями и интеграцией с WooCommerce для продажи результатов тестов или доступа к премиум-квизам.