Как создать собственный тип вопроса для Quizle в LearnPress

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

Зачем создавать собственный тип вопроса в Quizle

Стандартные типы вопросов, такие как множественный выбор, правда/ложь, свободный ответ, покрывают базовые сценарии. Но что делать, если вам нужно реализовать, например, сортировку ответов, вопросы с изображениями или интерактивные задания? Создание собственного типа вопроса позволит:

• Добавить уникальный интерфейс для ввода и отображения вопросов;
• Реализовать специфическую логику проверки ответов;
• Повысить вовлеченность учащихся за счет нестандартного формата;
• Интегрировать дополнительные данные и медиа.

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

Общая структура кастомного типа вопроса Quizle в LearnPress

Для создания нового типа вопроса необходимо зарегистрировать его в системе Quizle и определить следующие ключевые компоненты:

• Регистрация типа вопроса — добавление в список доступных типов с уникальным идентификатором, названием и иконкой;
• Форма создания/редактирования — пользовательский интерфейс в админке для ввода настроек и ответов;
• Шаблон вывода — как вопрос и варианты ответов отображаются на фронтенде;
• Логика проверки — алгоритм оценки правильности ответов;
• Сохранение данных — обработка и хранение пользовательских ответов и настроек.

Все эти элементы реализуются с помощью хуков, фильтров и ООП подхода в WordPress и LearnPress.

Регистрация нового типа вопроса

Для начала добавим регистрацию нового типа вопроса, например, "Sorting Question" — вопрос с сортировкой элементов.

add_filter('learn_press_quiz_question_types', 'learnpressru_register_sorting_question_type');
function learnpressru_register_sorting_question_type($types) {
    $types['sorting'] = array(
        'title' => __('Sorting Question', 'learnpress'),
        'icon' => 'dashicons-sort',
        'class_name' => 'LP_Quiz_Question_Type_Sorting'
    );
    return $types;
}

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

Создание класса типа вопроса

Далее создаем класс LP_Quiz_Question_Type_Sorting, наследующийся от базового класса LP_Quiz_Question_Type. В нем опишем методы для вывода формы и проверки ответов.

class LP_Quiz_Question_Type_Sorting extends LP_Quiz_Question_Type {

    public function admin_form() {
        // Вывод формы для ввода вариантов, которые нужно отсортировать
        ?>
        <label><?php _e('Items to sort', 'learnpress'); ?></label>
        <textarea name="question_data[items]" rows="5" cols="50"><?php echo esc_textarea($this->get_data('items')); ?></textarea>
        <p class="description"><?php _e('Введите элементы через новую строку, которые пользователь должен отсортировать.', 'learnpress'); ?></p>
        <?php
    }

    public function check($user_answer) {
        // Проверяем правильность ответа
        $correct = explode("\n", trim($this->get_data('correct_order')));
        return $user_answer === $correct;
    }

    public function display_question() {
        // Выводим вопрос на фронтенде с drag&drop для сортировки
        $items = explode("\n", trim($this->get_data('items')));
        ?>
        <ul class="sorting-question-items" draggable="true">
            <?php foreach ($items as $item) : ?>
                <li class="sorting-item"><?php echo esc_html($item); ?></li>
            <?php endforeach; ?>
        </ul>
        <input type="hidden" name="user_answer" value="">
        <script>
            // Простейший JS код для drag&drop и сохранения порядка
            const list = document.querySelector('.sorting-question-items');
            let draggedItem = null;
            list.querySelectorAll('.sorting-item').forEach(item => {
                item.draggable = true;
                item.addEventListener('dragstart', e => { draggedItem = item; });
                item.addEventListener('dragover', e => e.preventDefault());
                item.addEventListener('drop', e => {
                    e.preventDefault();
                    if (draggedItem !== item) {
                        let items = Array.from(list.children);
                        let draggedIndex = items.indexOf(draggedItem);
                        let targetIndex = items.indexOf(item);
                        if (draggedIndex < targetIndex) {
                            list.insertBefore(draggedItem, item.nextSibling);
                        } else {
                            list.insertBefore(draggedItem, item);
                        }
                        updateAnswerInput();
                    }
                });
            });

            function updateAnswerInput() {
                const order = Array.from(list.children).map(li => li.textContent);
                document.querySelector('input[name="user_answer"]').value = order.join('|');
            }

            updateAnswerInput();
        </script>
        <?php
    }
}

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

Обработка и сохранение ответов

Для корректной работы нужно обеспечить правильное сохранение данных. В данном примере пользовательский ответ — это строка с элементами, разделенными символом |. В методе check класса мы сравниваем это с эталонным правильным порядком.

Вам также потребуется добавить обработчики для сохранения настроек вопроса и правильного порядка в админке. Это делается через фильтры LearnPress, например:

add_filter('learn_press_save_quiz_question', 'learnpressru_save_sorting_question_data', 10, 2);
function learnpressru_save_sorting_question_data($question, $data) {
    if ($question->get_type() === 'sorting') {
        $items = isset($data['items']) ? sanitize_textarea_field($data['items']) : '';
        $correct_order = isset($data['correct_order']) ? sanitize_textarea_field($data['correct_order']) : '';
        $question->set_data('items', $items);
        $question->set_data('correct_order', $correct_order);
    }
    return $question;
}

Такая обработка гарантирует, что нужные данные сохраняются в базе.

Советы по тестированию и отладке нового типа вопроса

После реализации важно тщательно протестировать новый тип вопроса. Обратите внимание на следующие моменты:

• Отображение и удобство интерфейса в админке и на фронтенде;
• Корректность сохранения и загрузки данных;
• Работу оценки ответов при разных вариантах порядка;
• Совместимость с другими расширениями и темами.

Для упрощения отладки используйте инструменты браузера, логи WordPress (через WP_DEBUG), а также рассмотрите подключение плагина Clearfy Pro для оптимизации и устранения конфликтов.

Пример использования плагина WPRemark для кастомизации

Если вы хотите добавить дополнительные поля или комментарии к вашему новому типу вопроса, плагин WPRemark поможет расширить функционал форм и уведомлений. Например, можно добавить поле с подсказкой для каждого элемента сортировки.

Заключение

Создание собственного типа вопроса для Quizle в LearnPress — отличный способ сделать ваши курсы более гибкими и интерактивными. С помощью приведенного примера вы можете реализовать сложные задания, которые невозможно создать стандартными средствами. Дополнительно рекомендуем изучить документацию LearnPress и исходный код Quizle для более глубокого понимания.

Для установки и обновления плагинов, расширяющих LearnPress, посетите WPShop.ru.