В обучающих платформах на WordPress с LearnPress очень важно обеспечить удобство для студентов, чтобы они не теряли свой прогресс при прохождении курсов. В стандартной версии LearnPress прогресс сохраняется только при переходе между уроками или при явном сохранении, что не всегда удобно. В этой статье мы подробно рассмотрим, как реализовать функцию автосохранения прогресса курса — чтобы данные о прохождении урока фиксировались автоматически через определённые интервалы времени.
Почему автосохранение прогресса в LearnPress важно для пользователей
Автосохранение позволяет избежать потери данных в случае случайного закрытия вкладки, сбоя интернета или других технических проблем. Студенты могут быть уверены, что их время и усилия не пропадут зря. Это улучшает пользовательский опыт и повышает лояльность к платформе.
Также автосохранение помогает преподавателям получать актуальную информацию о прогрессе учеников в реальном времени.
Большинство LMS (Learning Management System) для WordPress, включая LearnPress, не имеют встроенного механизма автосохранения с регулярными AJAX-запросами. Поэтому мы реализуем это самостоятельно.
Общая схема реализации автосохранения прогресса
Реализация автосохранения будет строиться на следующих шагах:
- Добавление JavaScript-кода, который через определённый интервал времени отправляет AJAX-запрос на сервер с текущим прогрессом урока.
- Обработка AJAX-запроса на сервере: сохранение прогресса пользователя в базе данных LearnPress.
- Вывод уведомлений об успешном сохранении или ошибках (по желанию).
Это позволит прогрессу сохраняться каждые, например, 60 секунд без необходимости ручного действия пользователя.
Пример кода: JavaScript для автосохранения прогресса
Добавим скрипт, который будет собирать текущий урок и статус, и отправлять их на сервер.
jQuery(document).ready(function($) {
function learnpress_ru_autosave_progress() {
var lessonId = $('#learn-press-current-lesson-id').val();
var courseId = $('#learn-press-current-course-id').val();
if (!lessonId || !courseId) {
return;
}
$.ajax({
url: learnpress_ru_ajax.url,
type: 'POST',
data: {
action: 'learnpress_ru_autosave_progress',
lesson_id: lessonId,
course_id: courseId,
nonce: learnpress_ru_ajax.nonce
},
success: function(response) {
if(response.success) {
console.log('Прогресс сохранён');
} else {
console.log('Ошибка сохранения прогресса');
}
},
error: function() {
console.log('Ошибка AJAX запроса');
}
});
}
setInterval(learnpress_ru_autosave_progress, 60000); // Автосохранение каждые 60 секунд
});Для работы скрипта нужно передать в JavaScript данные AJAX-URL и nonce. Это делается в PHP через wp_localize_script.
Обработка AJAX-запроса на сервере в PHP
Добавим обработчик AJAX для сохранения прогресса с проверкой nonce и прав пользователя.
add_action('wp_ajax_learnpress_ru_autosave_progress', 'learnpress_ru_autosave_progress_callback');
function learnpress_ru_autosave_progress_callback() {
if ( ! isset($_POST['nonce']) || ! wp_verify_nonce($_POST['nonce'], 'learnpress_ru_autosave_nonce') ) {
wp_send_json_error('Неверный nonce');
wp_die();
}
$user_id = get_current_user_id();
if ( ! $user_id ) {
wp_send_json_error('Пользователь не авторизован');
wp_die();
}
$lesson_id = intval($_POST['lesson_id']);
$course_id = intval($_POST['course_id']);
if ( ! $lesson_id || ! $course_id ) {
wp_send_json_error('Некорректные данные');
wp_die();
}
// Используем API LearnPress для сохранения статуса урока
$user = LP_User_Factory::get_user($user_id);
if ( ! $user ) {
wp_send_json_error('Пользователь LearnPress не найден');
wp_die();
}
$result = $user->update_lesson_status($lesson_id, LP_LESSON_STATUS_COMPLETED);
if ( $result ) {
wp_send_json_success();
} else {
wp_send_json_error('Ошибка сохранения');
}
wp_die();
}Регистрация и подключение скрипта с локализацией
В functions.php вашей темы или в плагине добавьте:
function learnpress_ru_enqueue_autosave_script() {
if ( ! is_user_logged_in() ) {
return;
}
wp_enqueue_script( 'learnpress-ru-autosave', get_stylesheet_directory_uri() . '/js/learnpress-ru-autosave.js', array('jquery'), '1.0', true );
wp_localize_script( 'learnpress-ru-autosave', 'learnpress_ru_ajax', array(
'url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('learnpress_ru_autosave_nonce'),
) );
}
add_action( 'wp_enqueue_scripts', 'learnpress_ru_enqueue_autosave_script' );В этом примере предполагается, что файл learnpress-ru-autosave.js содержит JavaScript из предыдущего блока.
Как проверить и отладить работу автосохранения
Для тестирования откройте консоль браузера (F12) и убедитесь, что AJAX-запросы отправляются каждые 60 секунд и возвращают успешный ответ.
Также проверьте, что статус урока меняется в базе данных LearnPress и пользователь видит актуальный прогресс.
Если возникают ошибки, проверьте nonce и права пользователя, а также корректность ID урока и курса.
Дополнительные рекомендации и расширения
1. Можно расширить функционал, чтобы сохранялся не только статус "завершён", но и процент просмотра видео или выполнение теста, если урок мультимедийный.
2. Для более точного отслеживания прогресса можно интегрировать плагин WPRemark, который расширяет возможности комментариев и отзывов, помогая собирать обратную связь в реальном времени.
3. Для оптимизации нагрузки лучше настроить интервал автосохранения в зависимости от активности пользователя, например, сохранять прогресс только при изменении состояния урока.