Как сделать квиз с автоматическим оцениванием ответов в WordPress

Автор: Артем Фомин | Опубликовано: 09.01.2026

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

Выбор подхода: плагин или собственный код для квиза с оцениванием

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

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

Преимущества плагинов

Быстрая установка и настройка.
Готовые шаблоны и стили.
Поддержка различных типов вопросов (выбор, текстовые ответы, оценки).
Автоматический подсчёт баллов и отображение результата.

Преимущества собственного кода

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

Пример создания простого квиза с оцениванием на PHP и AJAX

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

HTML и JavaScript для формы квиза

Создаём форму с вопросами и вариантами ответов, а также обработчик AJAX-запроса.

<form id="wpquizru-quiz-form">
  <div>
    <label>1. Какой язык используется для разработки WordPress?</label><br>
    <input type="radio" name="q1" value="php"> PHP<br>
    <input type="radio" name="q1" value="javascript"> JavaScript<br>
    <input type="radio" name="q1" value="python"> Python<br>
  </div>
  <div>
    <label>2. Какой тег используется для вставки заголовка HTML?</label><br>
    <input type="radio" name="q2" value="h1"> <h1><br>
    <input type="radio" name="q2" value="div"> <div><br>
    <input type="radio" name="q2" value="span"> <span><br>
  </div>
  <div>
    <label>3. Какой из этих плагинов популярен для создания квизов в WordPress?</label><br>
    <input type="radio" name="q3" value="wpquiz"> WP Quiz<br>
    <input type="radio" name="q3" value="woocommerce"> WooCommerce<br>
    <input type="radio" name="q3" value="contactform7"> Contact Form 7<br>
  </div>
  <button type="button" id="wpquizru-submit">Отправить</button>
</form>
<div id="wpquizru-result"></div>

<script>
document.getElementById('wpquizru-submit').addEventListener('click', function() {
  var form = document.getElementById('wpquizru-quiz-form');
  var data = new FormData(form);
  fetch(wpquizru_ajax_object.ajax_url, {
    method: 'POST',
    credentials: 'same-origin',
    headers: {
      'X-Requested-With': 'XMLHttpRequest'
    },
    body: new URLSearchParams(data) + '&action=wpquizru_calculate_score'
  })
  .then(response => response.json())
  .then(result => {
    document.getElementById('wpquizru-result').innerHTML = '<p>Ваш результат: ' + result.score + ' из 3</p>';
  });
});
</script>

PHP-код для обработки ответов и подсчёта баллов

Добавьте следующий код в файл functions.php вашей темы или в отдельный плагин:

add_action('wp_ajax_wpquizru_calculate_score', 'wpquizru_calculate_score');
add_action('wp_ajax_nopriv_wpquizru_calculate_score', 'wpquizru_calculate_score');

function wpquizru_calculate_score() {
  $correct_answers = [
    'q1' => 'php',
    'q2' => 'h1',
    'q3' => 'wpquiz'
  ];
  $score = 0;
  foreach ($correct_answers as $question => $correct) {
    if (isset($_POST[$question]) && $_POST[$question] === $correct) {
      $score++;
    }
  }
  wp_send_json(['score' => $score]);
}

Расширение функционала: несколько уровней оценки и вывод рекомендаций

Чтобы сделать квиз более интерактивным, можно добавить разные уровни оценки и показывать пользователю рекомендации в зависимости от результата.

Добавление уровней

Изменим функцию обработки так, чтобы она возвращала не только баллы, но и уровень:

function wpquizru_calculate_score() {
  $correct_answers = [
    'q1' => 'php',
    'q2' => 'h1',
    'q3' => 'wpquiz'
  ];
  $score = 0;
  foreach ($correct_answers as $question => $correct) {
    if (isset($_POST[$question]) && $_POST[$question] === $correct) {
      $score++;
    }
  }
  if ($score === 3) {
    $level = 'Эксперт';
    $advice = 'Отлично! Вы знаете WordPress очень хорошо.';
  } elseif ($score === 2) {
    $level = 'Продвинутый';
    $advice = 'Хороший уровень, но есть куда расти.';
  } else {
    $level = 'Начинающий';
    $advice = 'Рекомендуем пройти базовый курс по WordPress.';
  }
  wp_send_json(['score' => $score, 'level' => $level, 'advice' => $advice]);
}

Вывод результата с рекомендациями

В JavaScript измените вывод результата:

.then(result => {
  document.getElementById('wpquizru-result').innerHTML = `
    <p>Ваш результат: ${result.score} из 3</p>
    <p>Уровень: ${result.level}</p>
    <p>Рекомендации: ${result.advice}</p>
  `;
});

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

Создание квиза с автоматическим оцениванием в WordPress — задача, решаемая разными способами. Если нужна простота и скорость — используйте готовые плагины. Если важна гибкость и уникальные сценарии — пишите свой код с использованием AJAX и PHP, как показано выше.

Для повышения удобства пользователей и производительности сайта рекомендуем:

Минимизировать количество запросов к серверу, собирая ответы сразу и отправляя одним AJAX-запросом.
Использовать nonce-проверки для безопасности AJAX-запросов.
Делать интерфейс понятным и адаптивным для мобильных устройств.
Добавлять возможность сохранять результаты квиза в базе данных для аналитики.

Также советуем обратить внимание на плагин Quizle — современное решение для создания интерактивных опросов и квизов с расширенными возможностями.