Как создать автоматическое отображение списка вариантов ответа в вопросниках WordPress

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

Почему важно автоматизировать отображение вариантов ответа

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

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

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

Создание динамического списка вариантов ответа на PHP и JavaScript

Рассмотрим пример, как на основе массива вариантов автоматически сгенерировать список в HTML и добавить интерактивность с помощью JS.

Шаг 1. Формируем массив вариантов в PHP

Для каждого вопроса создадим массив с вариантами:

$wpnote_question_variants = [
    'Вариант 1',
    'Вариант 2',
    'Вариант 3',
    'Вариант 4'
];

Шаг 2. Функция для вывода списка вариантов

Создадим функцию wpnote_render_question_variants, которая принимает массив и выводит список с радиокнопками:

function wpnote_render_question_variants($variants, $name = 'question_option') {
    echo '<ul class="wpnote-variants-list">';
    foreach ($variants as $key => $variant) {
        $id = $name . '_' . $key;
        echo '<li>';
        echo '<input type="radio" id="' . esc_attr($id) . '" name="' . esc_attr($name) . '" value="' . esc_attr($variant) . '">';
        echo '<label for="' . esc_attr($id) . '">' . esc_html($variant) . '</label>';
        echo '</li>';
    }
    echo '</ul>';
}

Теперь вызов функции wpnote_render_question_variants($wpnote_question_variants) выведет аккуратный список вариантов с радиокнопками.

Шаг 3. Добавляем JavaScript для улучшения UX

Чтобы при клике на вариант выделялся выбранный элемент, добавим простой JS:

document.addEventListener('DOMContentLoaded', function() {
    const lists = document.querySelectorAll('.wpnote-variants-list');
    lists.forEach(list => {
        list.addEventListener('click', function(e) {
            if (e.target.tagName === 'INPUT') {
                const items = list.querySelectorAll('li');
                items.forEach(item => item.classList.remove('selected'));
                e.target.parentElement.classList.add('selected');
            }
        });
    });
});

И в CSS можно добавить стиль для выделения:

.wpnote-variants-list li.selected {
    background-color: #e0f7fa;
    border-radius: 4px;
}

Использование плагинов для создания вопросников с автогенерацией вариантов

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

• Quizle — удобный плагин для создания опросов и квизов с поддержкой различных типов вопросов и вариантов ответов. Имеет визуальный редактор и возможность автоматического отображения вариантов.
  Подробнее и скачать: https://wpshop.ru/plugins/quizle/
• Expert Review — плагин для сбора отзывов и оценок с несколькими вариантами ответов, отлично подходит для создания анкеты с выбором.
  Подробнее: https://wpshop.ru/plugins/expert-review/

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

Обработка результатов и сохранение ответов

Автоматическое отображение вариантов — это только часть задачи. Важно также корректно обработать и сохранить выбранные ответы.

Пример обработки на PHP

Для формы с именем поля question_option обработка может выглядеть так:

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['question_option'])) {
    $answer = sanitize_text_field($_POST['question_option']);
    // Здесь можно сохранить ответ в базу данных, отправить по email или обработать иным способом
    // Например, добавим в пользовательские метаданные или в таблицу с ответами
}

Обязательно используйте функции очистки данных, такие как sanitize_text_field, чтобы обезопасить сайт.

Подключение AJAX для сохранения без перезагрузки

Чтобы улучшить UX, можно отправлять выбранный вариант через AJAX без перезагрузки страницы. В WordPress для этого используется admin-ajax.php и специальные хуки. Пример кода:

add_action('wp_ajax_wpnote_save_answer', 'wpnote_save_answer_callback');
add_action('wp_ajax_nopriv_wpnote_save_answer', 'wpnote_save_answer_callback');

function wpnote_save_answer_callback() {
    $answer = isset($_POST['answer']) ? sanitize_text_field($_POST['answer']) : '';
    if (!$answer) {
        wp_send_json_error('Пустой ответ');
    }
    // Сохранение ответа, например, в пользовательские метаданные или таблицу
    wp_send_json_success('Ответ сохранён');
}

На стороне JS нужно отправить запрос на этот экшен при выборе варианта.

Заключение к технической части

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

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