Как создать квиз с несколькими типами вопросов в WordPress: пошаговое руководство

Автор: Олеся Волкова | Опубликовано: 27.02.2026

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

Почему важно использовать разные типы вопросов в квизе WordPress

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

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

Основные типы вопросов для квиза в WordPress

Одиночный выбор (radio button): пользователь выбирает один ответ из списка.
Множественный выбор (checkbox): можно отметить несколько ответов.
Текстовый ввод (textarea / input): пользователь вводит свой ответ вручную.

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

Использование плагина Quizle для создания квиза с разными типами вопросов

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

Чтобы создать квиз с несколькими типами вопросов в Quizle, выполните следующие шаги:

Установите и активируйте плагин через админ-панель WordPress.
Перейдите в раздел Quizle и создайте новый квиз.
Добавьте вопрос и выберите тип ответа (Single Choice, Multiple Choice, Text Answer).
Заполните варианты ответов для выбора или оставьте поле для ввода текста.
Настройте логику переходов и подсчёт баллов при необходимости.
Сохраните и вставьте шорткод квиза на нужную страницу.

Quizle также поддерживает AJAX-подгрузку вопросов, что улучшает скорость и отзывчивость квиза.

Пример создания кастомного квиза с разными типами вопросов через код

Если вы хотите полностью контролировать внешний вид и логику квиза, можно написать собственный плагин или добавить код в functions.php темы. Ниже приведён пример простого квиза с тремя вопросами разного типа:

function wpquizru_render_custom_quiz() {
    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['wpquizru_submit'])) {
        $score = 0;
        // Обработка одиночного выбора
        if (isset($_POST['q1']) && $_POST['q1'] === 'option2') {
            $score++;
        }
        // Обработка множественного выбора
        if (isset($_POST['q2']) && is_array($_POST['q2'])) {
            $correct_answers = ['option1', 'option3'];
            $selected = $_POST['q2'];
            sort($correct_answers);
            sort($selected);
            if ($correct_answers === $selected) {
                $score++;
            }
        }
        // Обработка текстового ответа
        if (isset($_POST['q3']) && trim(strtolower($_POST['q3'])) === 'wordpress') {
            $score++;
        }
        echo '<p>Ваш результат: ' . $score . ' из 3</p>';
    }
    ?>
    <form method="post">
        <h3>1. Какой вариант правильный?</h3>
        <label><input type="radio" name="q1" value="option1"> Вариант 1</label><br>
        <label><input type="radio" name="q1" value="option2"> Вариант 2 (правильный)</label><br>
        <label><input type="radio" name="q1" value="option3"> Вариант 3</label><br>

        <h3>2. Выберите все правильные ответы:</h3>
        <label><input type="checkbox" name="q2[]" value="option1"> Вариант 1 (правильный)</label><br>
        <label><input type="checkbox" name="q2[]" value="option2"> Вариант 2</label><br>
        <label><input type="checkbox" name="q2[]" value="option3"> Вариант 3 (правильный)</label><br>

        <h3>3. Введите название CMS, на которой работает этот сайт:</h3>
        <input type="text" name="q3"><br>

        <input type="submit" name="wpquizru_submit" value="Отправить">
    </form>
    <?php
}

add_shortcode('wpquizru_custom_quiz', 'wpquizru_render_custom_quiz');

Этот код создаёт простой квиз с тремя вопросами и подсчитывает количество правильных ответов. Для вывода квиза достаточно вставить шорткод [wpquizru_custom_quiz] в любую запись или страницу.

Как улучшить функциональность квиза: AJAX и проверка ответов без перезагрузки

Для повышения пользовательского опыта полезно реализовать отправку ответов и получение результатов без перезагрузки страницы с помощью AJAX. Это можно сделать, добавив JavaScript и обработчик AJAX в WordPress.

Пример подключения AJAX для обработки ответов:

function wpquizru_enqueue_scripts() {
    wp_enqueue_script('wpquizru-ajax', get_template_directory_uri() . '/js/wpquizru-ajax.js', ['jquery'], null, true);
    wp_localize_script('wpquizru-ajax', 'wpquizru_ajax_obj', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpquizru_nonce')
    ]);
}
add_action('wp_enqueue_scripts', 'wpquizru_enqueue_scripts');

function wpquizru_handle_ajax() {
    check_ajax_referer('wpquizru_nonce', 'nonce');

    $score = 0;
    $data = $_POST['data'];
    if (isset($data['q1']) && $data['q1'] === 'option2') {
        $score++;
    }
    if (isset($data['q2']) && is_array($data['q2'])) {
        $correct = ['option1', 'option3'];
        sort($correct);
        $selected = $data['q2'];
        sort($selected);
        if ($correct === $selected) {
            $score++;
        }
    }
    if (isset($data['q3']) && strtolower(trim($data['q3'])) === 'wordpress') {
        $score++;
    }

    wp_send_json_success(['score' => $score]);
}
add_action('wp_ajax_wpquizru_check', 'wpquizru_handle_ajax');
add_action('wp_ajax_nopriv_wpquizru_check', 'wpquizru_handle_ajax');

И соответствующий JavaScript для отправки данных:

jQuery(document).ready(function ($) {
    $('#wpquizru-quiz-form').on('submit', function (e) {
        e.preventDefault();
        var data = $(this).serializeArray();
        var formattedData = {};
        $.each(data, function () {
            if (this.name.endsWith('[]')) {
                var key = this.name.slice(0, -2);
                if (!formattedData[key]) {
                    formattedData[key] = [];
                }
                formattedData[key].push(this.value);
            } else {
                formattedData[this.name] = this.value;
            }
        });

        $.post(wpquizru_ajax_obj.ajax_url, {
            action: 'wpquizru_check',
            nonce: wpquizru_ajax_obj.nonce,
            data: formattedData
        }, function (response) {
            if (response.success) {
                alert('Ваш результат: ' + response.data.score + ' из 3');
            } else {
                alert('Ошибка при проверке ответов');
            }
        });
    });
});

Этот подход значительно улучшит интерактивность квиза и снизит нагрузку на сервер за счёт отсутствия перезагрузки страниц.

Заключение

Создание квиза с несколькими типами вопросов в WordPress — вполне достижимая задача, как с помощью готовых плагинов, так и своими силами. Плагин Quizle — отличный выбор для быстрого старта, а кастомный код даёт полный контроль и возможность расширения функционала.

Используйте AJAX для улучшения UX и делайте квизы интересными и полезными для ваших пользователей.