Как создать динамический опросник с помощью AJAX в WordPress

В этой статье мы подробно рассмотрим, как создать динамический опросник (викторину) на WordPress, который будет обновлять вопросы и ответы без перезагрузки страницы с помощью AJAX. Такой подход значительно улучшает пользовательский опыт и позволяет создавать интерактивные квизы на вашем сайте wpquiz.ru.

Почему стоит использовать AJAX для опросников в WordPress

AJAX (Asynchronous JavaScript and XML) позволяет отправлять запросы на сервер и получать ответы без полной перезагрузки страницы. Для опросников это критично, так как пользователи могут переключаться между вопросами быстро и плавно.

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

• Обновлять вопросы и варианты ответов мгновенно.
• Сохранять прогресс пользователя на сервере в фоне.
• Обрабатывать результаты без перезагрузки.

Теперь разберемся, как реализовать это на практике.

Выбор плагина для создания опросников с поддержкой AJAX

Если вы предпочитаете готовые решения, обратите внимание на следующие плагины с AJAX поддержкой:

• Quiz And Survey Master — бесплатный, с расширенными настройками и AJAX-загруженными вопросами.
• HD Quiz — простой и легкий, поддерживает AJAX и адаптирован под мобильные устройства.
• WP Quiz — премиум-плагин с множеством функций, включая динамическую загрузку вопросов.

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

Создание собственного динамического опросника с AJAX в WordPress

Структура данных для вопросов

Для начала определимся с форматом хранения вопросов. В простом случае можно хранить вопросы и ответы в виде массива PHP, например:

$wpquiz_ru_questions = [
    [
        'question' => 'Какой язык используется для разработки WordPress?',
        'answers' => ['Python', 'PHP', 'JavaScript', 'Ruby'],
        'correct' => 1
    ],
    [
        'question' => 'Что такое AJAX?',
        'answers' => ['Асинхронные запросы', 'Технология создания тем', 'Плагин для WordPress', 'Язык программирования'],
        'correct' => 0
    ],
];

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

Создание AJAX обработчика в functions.php

Добавим AJAX обработчик для получения вопроса по индексу. В WordPress для AJAX создают специальные хуки.

add_action('wp_ajax_wpquiz_ru_get_question', 'wpquiz_ru_get_question_callback');
add_action('wp_ajax_nopriv_wpquiz_ru_get_question', 'wpquiz_ru_get_question_callback');

function wpquiz_ru_get_question_callback() {
    global $wpquiz_ru_questions;
    $index = isset($_POST['index']) ? intval($_POST['index']) : 0;
    if (!isset($wpquiz_ru_questions[$index])) {
        wp_send_json_error('Вопрос не найден');
    }

    $question_data = $wpquiz_ru_questions[$index];
    wp_send_json_success($question_data);
}

Обработчик принимает индекс вопроса через POST-запрос, возвращает JSON с вопросом и вариантами ответов или ошибку, если вопрос не найден.

Подключение JavaScript для отправки AJAX запросов

В шаблоне или в отдельном файле JS создадим функцию, которая будет запрашивать вопросы и обновлять содержимое на странице.

jQuery(document).ready(function($) {
    let currentIndex = 0;

    function wpquiz_ru_loadQuestion(index) {
        $.ajax({
            url: wpquizRu.ajaxurl,
            method: 'POST',
            data: {
                action: 'wpquiz_ru_get_question',
                index: index
            },
            success: function(response) {
                if(response.success) {
                    const data = response.data;
                    $('#wpquiz-question').text(data.question);
                    let answersHtml = '';
                    data.answers.forEach(function(answer, i) {
                        answersHtml += `<li><label><input type='radio' name='wpquiz_answer' value='${i}'> ${answer}</label></li>`;
                    });
                    $('#wpquiz-answers').html(answersHtml);
                } else {
                    $('#wpquiz-question').text('Вопросы закончились');
                    $('#wpquiz-answers').html('');
                }
            }
        });
    }

    $('#wpquiz-next').on('click', function() {
        currentIndex++;
        wpquiz_ru_loadQuestion(currentIndex);
    });

    wpquiz_ru_loadQuestion(currentIndex);
});

Этот скрипт загружает первый вопрос при загрузке страницы, а при клике на кнопку «Далее» подгружает следующий вопрос.

Регистрация скрипта и локализация AJAX URL

Чтобы AJAX-запросы работали, необходимо зарегистрировать скрипт и передать переменную с URL для запросов. В functions.php добавьте:

function wpquiz_ru_enqueue_scripts() {
    wp_enqueue_script('wpquiz-ru-script', get_template_directory_uri() . '/js/wpquiz-ru.js', ['jquery'], null, true);
    wp_localize_script('wpquiz-ru-script', 'wpquizRu', [
        'ajaxurl' => admin_url('admin-ajax.php')
    ]);
}
add_action('wp_enqueue_scripts', 'wpquiz_ru_enqueue_scripts');

Расширение функционала: подсчет результатов и вывод итогов

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

Пример простого подсчета на клиенте:

let correctAnswersCount = 0;

$('#wpquiz-next').on('click', function() {
    const selected = $('input[name="wpquiz_answer"]:checked').val();
    if(selected == null) {
        alert('Пожалуйста, выберите ответ');
        return;
    }

    // Проверка правильности ответа
    $.ajax({
        url: wpquizRu.ajaxurl,
        method: 'POST',
        data: {
            action: 'wpquiz_ru_get_question',
            index: currentIndex
        },
        success: function(response) {
            if(response.success) {
                if(parseInt(selected) === response.data.correct) {
                    correctAnswersCount++;
                }
                currentIndex++;
                wpquiz_ru_loadQuestion(currentIndex);
            }
        }
    });
});

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

if(!wpquiz_ru_questions[currentIndex]) {
    $('#wpquiz-question').text(`Ваш результат: ${correctAnswersCount} из ${wpquiz_ru_questions.length}`);
    $('#wpquiz-answers').html('');
    $('#wpquiz-next').hide();
}

Итоги и рекомендации

Создание динамического опросника с AJAX в WordPress — отличное решение для улучшения UX на сайте wpquiz.ru. Вы можете использовать готовые плагины или создать кастомную реализацию для максимальной гибкости.

Основные моменты, на которые стоит обратить внимание:

• Правильная регистрация AJAX обработчиков с wp_ajax и wp_ajax_nopriv.
• Безопасность: проверка и валидация входящих данных.
• Оптимизация загрузки и кеширования вопросов, если их много.
• Удобный и понятный интерфейс для пользователей с подсказками и валидацией.

Такой подход позволит создать профессиональный и интерактивный квиз для вашего сайта.