Простой опросник с ветвлением (AjaxForm + FormIt + MIGX + pdoTools)

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

Итак, первое что нужно сделать это установить компоненты AjaxForm, FormIt, MIGX, pdoTools. AjaxForm требует подключения jQuery, поэтому её тоже нужно подключить (см. файл core/elements/pages/index.html из архива).
Верстка по большей части значения не имеет, главное сохранить вложенность классов с префиксом «js». Для простоты, я подключил Bootstrap 5. Также отмечу, что есть классы для скрытия элементов «d-none» и «visually-hidden», это классы из Bootstrap, но вы можете указать свои, передав при инициализации опросника в js вторым параметром объект с нужными значениями (полный список значений конфигурации смотри в файле assets/js/quiz.js).
new Quiz(el, {
 displayNoneClass: 'd-none',
 hiddenClass: 'visually-hidden'
});

Далее, нужно создать конфигурации MIGX.
1. quizItem — конфиг вопроса
2. answer — конфиг ответа
3. quiz — общий для опроса конфиг
4. field — конфиг для полей с данными пользователя
5. validator — конфиг валидатора (можно использовать валидаторы как в FormIt, по умолчанию список неполный).

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

Вызов сниппета getQuiz выглядит так
{$_modx->runSnippet('@FILE: snippets/getQuiz.php', [
'rid' => $_modx->resource.id, // id ресурса из которого брать опросники.
'quizID' => 2 // ID опросника указанный в таблице
])}
На одной страницы может быть сколько угодно опросов. Внутри сниппета getQuiz можно найти параметры передаваемые в вызов AjaxForm, там можно указать чанки обёртки опроса, письма, вопроса, финальной формы. Часть параметром можно поменять из админки при создании опроса: список получателей, текст уведомления об успешной отправке, тексты ошибок, список валидаторов.
Обращаю ваше внимание на то, что чанк письма содержит элементы непривычного синтаксиса, это связано с тем, что заранее нам неизвестны имена полей и их количество, поэтому при вызове сниппета чанк письма парсится и в нём появляются указанные в админке поля, а уже в вызов ajaxForm он попадает как инлайн-чанк, где "##" заменено на "{", что позволяет при отправке формы вставить в него данные пользователя.
Есть возможность сделать ответы на вопросы обязательными, а так же включить автопереключение вопросов при заполнении поля.
Посмотреть как это работает можно тут
Артур
13 ноября 2021, 15:27
modx.pro
1
296
+8
Поблагодарить автора Отправить деньги

Комментарии: 0

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
0