Создание квизов на WordPress – отличный способ вовлечь пользователей и собрать полезные данные. Часто возникает задача сделать так, чтобы выбор пользователя в квизе влиял на дальнейшие вопросы или результаты. В этой статье мы подробно разберём, как реализовать логику выбора по ответам в квизе на WordPress с помощью плагинов и кода.
Почему важен выбор по ответам в квизах WordPress
В классическом квизе все пользователи проходят одинаковую цепочку вопросов, что не всегда удобно. Гибкая логика, когда дальнейшие вопросы зависят от ответов, позволяет создавать более персонализированные и интересные опросы. Это повышает вовлечённость и улучшает качество данных.
Например, если в первом вопросе пользователь выбирает "Веб-разработка", то следующие вопросы могут быть связаны именно с этой темой, а не с дизайном или маркетингом.
Такой функционал сложно реализовать вручную, но с помощью специальных плагинов и собственного кода можно добиться гибкости.
Использование плагинов для создания выбора по ответам в квизах WordPress
Существует несколько плагинов, которые поддерживают условную логику и выбор по ответам:
- Quizle – мощный плагин для создания квизов с поддержкой условных переходов. Позволяет настраивать логику перехода между вопросами прямо из интерфейса.
- WP Quiz – популярный плагин с базовой логикой, но с помощью расширений можно добавить условия.
- Forminator – плагин для форм и квизов с поддержкой условной логики и интеграцией с другими сервисами.
Рассмотрим на примере плагина Quizle, как настроить выбор по ответам.
Настройка условных переходов в Quizle
После установки и активации плагина создайте новый квиз. Для каждого вопроса можно задать условие перехода к следующему вопросу в зависимости от выбранного варианта:
- Перейдите в редактор квиза и добавьте первый вопрос с несколькими вариантами ответа.
- В настройках вопроса выберите опцию «Условный переход».
- Задайте правило: если выбран ответ А, перейти к вопросу 2, если ответ Б – к вопросу 3 и так далее.
- Добавьте остальные вопросы, учитывая логику переходов.
Это позволяет создавать разветвлённые сценарии, которые подстраиваются под ответы пользователя.
Реализация выбора по ответам в квизе WordPress на PHP с AJAX
Если нужен более кастомный вариант, можно написать свой код для квиза с выбором по ответам. Ниже пример простой реализации.
Основная идея
Мы будем хранить вопросы и варианты в массиве, а при выборе ответа отправлять AJAX-запрос на сервер для получения следующего вопроса.
Пример кода PHP и JavaScript
<?php
// wpquiz_ru_get_next_question - функция для получения следующего вопроса в квизе
function wpquiz_ru_get_next_question() {
check_ajax_referer('wpquiz_nonce', 'nonce');
$current_question = intval($_POST['question_id']);
$answer = sanitize_text_field($_POST['answer']);
// Пример структуры вопросов с условной логикой
$quiz = [
1 => [
'text' => 'Какая тема вас интересует?',
'answers' => ['Веб-разработка', 'Дизайн'],
'next' => [
'Веб-разработка' => 2,
'Дизайн' => 3
]
],
2 => [
'text' => 'Выберите язык программирования',
'answers' => ['PHP', 'JavaScript'],
'next' => [
'PHP' => 4,
'JavaScript' => 4
]
],
3 => [
'text' => 'Выберите стиль дизайна',
'answers' => ['Минимализм', 'Флэт'],
'next' => [
'Минимализм' => 4,
'Флэт' => 4
]
],
4 => [
'text' => 'Спасибо за участие!',
'answers' => [],
'next' => []
]
];
$next_id = $quiz[$current_question]['next'][$answer] ?? null;
if (!$next_id) {
wp_send_json_error('Следующий вопрос не найден');
}
wp_send_json_success([
'question_id' => $next_id,
'text' => $quiz[$next_id]['text'],
'answers' => $quiz[$next_id]['answers'],
]);
}
add_action('wp_ajax_wpquiz_ru_get_next_question', 'wpquiz_ru_get_next_question');
add_action('wp_ajax_nopriv_wpquiz_ru_get_next_question', 'wpquiz_ru_get_next_question');
?>
<script>
document.addEventListener('DOMContentLoaded', function () {
let currentQuestionId = 1;
const quizContainer = document.getElementById('wpquiz-ru');
function renderQuestion(question) {
if (!question.answers.length) {
quizContainer.innerHTML = '<p>' + question.text + '</p>';
return;
}
let html = '<p>' + question.text + '</p><ul>';
question.answers.forEach(function (answer) {
html += '<li><button class="wpquiz-answer" data-answer="' + answer + '">' + answer + '</button></li>';
});
html += '</ul>';
quizContainer.innerHTML = html;
document.querySelectorAll('.wpquiz-answer').forEach(function (btn) {
btn.addEventListener('click', function () {
const answer = this.getAttribute('data-answer');
fetchNextQuestion(currentQuestionId, answer);
});
});
}
function fetchNextQuestion(questionId, answer) {
fetch('<?php echo admin_url("admin-ajax.php"); ?>', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams({
action: 'wpquiz_ru_get_next_question',
question_id: questionId,
answer: answer,
nonce: '<?php echo wp_create_nonce("wpquiz_nonce"); ?>'
})
})
.then(response => response.json())
.then(data => {
if(data.success) {
currentQuestionId = data.data.question_id;
renderQuestion(data.data);
} else {
quizContainer.innerHTML = '<p>Ошибка: ' + data.data + '</p>';
}
});
}
// Инициализируем первый вопрос
fetchNextQuestion(0, '');
});
</script>
<div id="wpquiz-ru"></div>В этом примере:
- Используется AJAX-запрос для получения следующего вопроса в зависимости от выбранного ответа.
- Вопросы и логика хранятся в PHP-массиве.
- JavaScript динамически обновляет интерфейс квиза.
Советы по улучшению и интеграции
Если планируете использовать квизы для сбора данных, можно расширить функционал:
- Добавить сохранение ответов пользователя в базу данных для последующего анализа.
- Интегрировать квиз с плагинами аналитики или CRM, например, с помощью WPRemark.
- Использовать готовые решения с поддержкой расширенной логики, например, Quizle, чтобы сэкономить время и получить стабильный результат.
- Добавить стили и анимации для улучшения UX.
Заключение
Создание выбора по ответам в квизах на WordPress — задача, решаемая как с помощью плагинов, так и программно. Плагины, такие как Quizle, упрощают настройку, а кастомный код даёт максимальную гибкость. Используйте приведённый пример как основу для реализации своих проектов, адаптируя логику под конкретные задачи.