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

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

Почему важно делать автоматическое сохранение ответов в квизе

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

• Сохранять прогресс прохождения квиза в реальном времени.
• Давать пользователю возможность завершить квиз позже.
• Уменьшить количество брошенных квизов.

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

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

Самый простой способ — сохранять ответы в локальном хранилище браузера. Это не требует серверной части и работает для любых пользователей.

Пример кода сохранения и загрузки ответов

document.addEventListener('DOMContentLoaded', function() {
  const quizForm = document.getElementById('wpquiz-form');

  // Загрузка сохранённых ответов
  const savedAnswers = localStorage.getItem('wpquiz_answers');
  if (savedAnswers) {
    const answers = JSON.parse(savedAnswers);
    for (const [name, value] of Object.entries(answers)) {
      const input = quizForm.querySelector(`[name="${name}"]`);
      if (input) {
        if (input.type === 'radio' || input.type === 'checkbox') {
          if (input.value === value) input.checked = true;
        } else {
          input.value = value;
        }
      }
    }
  }

  // Сохранение при изменении
  quizForm.addEventListener('change', function(e) {
    const answers = {};
    const inputs = quizForm.querySelectorAll('input, select, textarea');
    inputs.forEach(input => {
      if ((input.type === 'radio' || input.type === 'checkbox') && !input.checked) return;
      answers[input.name] = input.value;
    });
    localStorage.setItem('wpquiz_answers', JSON.stringify(answers));
  });
});

В этом коде при загрузке страницы проверяется, есть ли сохранённые ответы в localStorage, и если есть — они подставляются в форму. При любом изменении ответа данные сохраняются снова.

Автоматическое сохранение ответов в базу данных через AJAX для авторизованных пользователей

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

Создание AJAX-обработчика в WordPress

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

add_action('wp_ajax_wpquiz_save_answers', 'wpquiz_save_answers_callback');
function wpquiz_save_answers_callback() {
    // Проверяем права
    if (!is_user_logged_in()) {
        wp_send_json_error('Требуется авторизация');
        wp_die();
    }

    $user_id = get_current_user_id();
    $answers = isset($_POST['answers']) ? wp_unslash($_POST['answers']) : '';

    if (!$answers) {
        wp_send_json_error('Нет данных для сохранения');
        wp_die();
    }

    update_user_meta($user_id, 'wpquiz_saved_answers', $answers);

    wp_send_json_success('Ответы сохранены');
    wp_die();
}

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

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

Добавьте в вашу форму следующий скрипт:

document.addEventListener('DOMContentLoaded', function() {
  const quizForm = document.getElementById('wpquiz-form');
  const ajaxUrl = wpquizData.ajaxUrl;

  function wpquizCollectAnswers() {
    const answers = {};
    const inputs = quizForm.querySelectorAll('input, select, textarea');
    inputs.forEach(input => {
      if ((input.type === 'radio' || input.type === 'checkbox') && !input.checked) return;
      answers[input.name] = input.value;
    });
    return answers;
  }

  quizForm.addEventListener('change', function() {
    const answers = wpquizCollectAnswers();

    fetch(ajaxUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      },
      body: new URLSearchParams({
        action: 'wpquiz_save_answers',
        answers: JSON.stringify(answers)
      })
    })
    .then(response => response.json())
    .then(data => {
      if (!data.success) {
        console.warn('Ошибка сохранения ответов:', data.data);
      }
    })
    .catch(error => console.error('Ошибка AJAX:', error));
  });
});

Не забудьте добавить в PHP вызов wp_localize_script, чтобы передать ajaxUrl:

wp_enqueue_script('wpquiz-script', get_template_directory_uri() . '/js/wpquiz-script.js', ['jquery'], null, true);
wp_localize_script('wpquiz-script', 'wpquizData', [
  'ajaxUrl' => admin_url('admin-ajax.php')
]);

Загрузка сохранённых ответов при загрузке страницы

Чтобы пользователь видел сохранённые ответы, можно вывести их из мета-поля и подставить в форму при загрузке страницы. Пример в PHP (например, в шаблоне):

if (is_user_logged_in()) {
  $saved_answers = get_user_meta(get_current_user_id(), 'wpquiz_saved_answers', true);
  echo "<script>var wpquizSavedAnswers = {$saved_answers};</script>";
}

И в JavaScript при загрузке подставлять:

document.addEventListener('DOMContentLoaded', function() {
  if (typeof wpquizSavedAnswers !== 'undefined') {
    for (const [name, value] of Object.entries(wpquizSavedAnswers)) {
      const input = document.querySelector(`#wpquiz-form [name="${name}"]`);
      if (!input) continue;
      if (input.type === 'radio' || input.type === 'checkbox') {
        if (input.value === value) input.checked = true;
      } else {
        input.value = value;
      }
    }
  }
});

Использование плагинов для автоматического сохранения прогресса квиза

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

• WP Quiz — продвинутый плагин для создания квизов с функцией сохранения прогресса
• WP Remark — плагин для отзывов и квизов с возможностью автосохранения

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

Рекомендации по безопасности и производительности

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

• Проверяйте права пользователя в AJAX-обработчиках.
• Используйте nonce для защиты запросов.
• Сохраняйте только необходимые данные, избегая избыточности.

Также не забывайте о производительности — не отправляйте AJAX-запросы слишком часто, лучше использовать debounce или отправлять данные через определённые интервалы.

Итоги и практические советы

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

• localStorage подойдет для простых случаев и неавторизованных пользователей.
• AJAX + сервер — для авторизованных пользователей и когда нужно хранить данные централизованно.

Обязательно тестируйте работу на разных устройствах и браузерах, чтобы избежать проблем с кроссбраузерностью.

Используйте приведённые примеры кода как основу и адаптируйте под свои задачи.