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

Автор: Марина Ларионова | Опубликовано: 09.01.2026

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

Зачем нужно автоматическое сохранение ответов в квизах WordPress

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

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

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

Примеры плагинов с поддержкой автосохранения в квизах

WP Quiz и Quizle — популярные решения для создания квизов

Плагин WP Quiz от WPSHOP предлагает базовую поддержку сохранения прогресса пользователя, но для расширенной функциональности часто требуется доработка.

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

Реализация автосохранения ответов квиза с помощью JavaScript и AJAX

Рассмотрим пример, как реализовать автосохранение ответов с помощью локального хранилища и AJAX-запросов к серверу. Это позволит сохранять данные даже при закрытии вкладки и синхронизировать их с базой данных.

1. Использование LocalStorage для локального сохранения ответов

Для начала, при изменении ответа на вопрос квиза, будем сохранять данные в localStorage. Например, если у вас есть вопросы с радиокнопками или чекбоксами:

document.querySelectorAll('.wpquiz-question input').forEach(function(input) {
  input.addEventListener('change', function() {
    var quizId = this.closest('.wpquiz-container').dataset.quizId;
    var answers = JSON.parse(localStorage.getItem('wpquiz_answers_' + quizId)) || {};
    answers[this.name] = this.value;
    localStorage.setItem('wpquiz_answers_' + quizId, JSON.stringify(answers));
  });
});

Этот код собирает ответы по имени поля и сохраняет их под ключом с идентификатором квиза.

2. Восстановление ответов при загрузке страницы

Чтобы не потерять прогресс, нужно восстанавливать ответы из localStorage после загрузки:

window.addEventListener('DOMContentLoaded', function() {
  var quizContainers = document.querySelectorAll('.wpquiz-container');
  quizContainers.forEach(function(container) {
    var quizId = container.dataset.quizId;
    var answers = JSON.parse(localStorage.getItem('wpquiz_answers_' + quizId));
    if (answers) {
      for (var name in answers) {
        var input = container.querySelector('input[name="' + name + '"][value="' + answers[name] + '"]');
        if (input) input.checked = true;
      }
    }
  });
});

3. Отправка ответов на сервер с помощью AJAX для постоянного хранения

Для постоянного хранения и анализа удобно отправлять ответы на сервер. Для этого добавим AJAX-запрос, например, при изменении ответа и раз в определённый интервал:

function wpquiz_ru_sendAnswers(quizId, answers) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', wpquiz_ru_ajax_object.ajax_url, true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log('Ответы сохранены');
    }
  };
  xhr.send('action=wpquiz_ru_save_answers&quiz_id=' + quizId + '&answers=' + encodeURIComponent(JSON.stringify(answers)));
}

document.querySelectorAll('.wpquiz-question input').forEach(function(input) {
  input.addEventListener('change', function() {
    var quizId = this.closest('.wpquiz-container').dataset.quizId;
    var answers = JSON.parse(localStorage.getItem('wpquiz_answers_' + quizId)) || {};
    wpquiz_ru_sendAnswers(quizId, answers);
  });
});

Для этого на стороне сервера в functions.php темы или плагина нужно добавить обработчик AJAX:

add_action('wp_ajax_wpquiz_ru_save_answers', 'wpquiz_ru_save_answers_callback');
add_action('wp_ajax_nopriv_wpquiz_ru_save_answers', 'wpquiz_ru_save_answers_callback');

function wpquiz_ru_save_answers_callback() {
  $quiz_id = intval($_POST['quiz_id']);
  $answers_json = wp_unslash($_POST['answers']);
  $answers = json_decode($answers_json, true);

  if (!$quiz_id || empty($answers)) {
    wp_send_json_error('Неверные данные');
    wp_die();
  }

  $user_id = get_current_user_id();
  $meta_key = 'wpquiz_ru_answers_' . $quiz_id;

  if ($user_id) {
    update_user_meta($user_id, $meta_key, $answers);
  } else {
    // Для гостей можно использовать сессию или куки
  }
  wp_send_json_success('Ответы сохранены');
  wp_die();
}

Обработка сохранённых данных и восстановление прогресса

Сохранив данные в usermeta, можно при загрузке квиза автоматически подгружать ответы пользователя и восстанавливать их в интерфейсе. Для этого добавим PHP-функцию, которая передаст сохранённые ответы в JavaScript:

function wpquiz_ru_localize_script() {
  if (is_page('quiz-page')) { // Замените на условие для вашей страницы квиза
    $user_id = get_current_user_id();
    $quiz_id = 123; // Замените на динамический ID квиза
    $answers = $user_id ? get_user_meta($user_id, 'wpquiz_ru_answers_' . $quiz_id, true) : '';
    wp_localize_script('wpquiz-frontend', 'wpquiz_ru_saved_answers', $answers);
  }
}
add_action('wp_enqueue_scripts', 'wpquiz_ru_localize_script');

В JavaScript можно проверить wpquiz_ru_saved_answers и, если они есть, сразу заполнить поля квиза.

Дополнительные советы по улучшению автосохранения квизов

Для более качественной реализации учтите следующие моменты:

Добавляйте debounce при сохранении, чтобы не создавать слишком много AJAX-запросов.
Обрабатывайте случаи выхода пользователя из системы и гостей отдельно.
Обеспечьте очистку локального хранилища после успешной отправки или завершения квиза.
Используйте nonce и проверку прав в AJAX-запросах для безопасности.
Тестируйте функциональность на разных устройствах и браузерах.

Поддержка автосохранения существенно повысит удобство ваших квизов и увеличит вовлечённость пользователей.