mixin quiz.twig

Quiz template with JavaScript on jQuery.

Twig options

Key	Desc
action	form action url
title	poll global title
steps	poll steps with option and field

Example

<div class="container">
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            $(window).on('event:quiz:sent', () => {
                Swal.fire('Заявка оформлена', 'Спасибо!');
            })
        });
    </script>

    {% include 'mixin/quiz.twig' with {
        action: '/form/quiz',
        title: 'Заголовок',
        steps: [
            {
                title: 'Вопрос 1',
                description: 'Описание вопроса 1',
                option: [
                    {icon:  'fas fa-tools',          label: 'Вариант 1', type: 'radio', name: 'option', args: {value: '1'}},
                    {image: '/resource/.../img.png', label: 'Вариант 2', type: 'radio', name: 'option', args: {value: '2'}},
                ],
                btn_back: 'Back',
                btn_next: 'Next'
            },
            {
                title: 'Вопрос 2',
                description: 'Описание вопроса 2',
                field: [
                    {label: 'Имя',     type: 'text', name: 'name', args: {required: true}},
                    {label: 'Телефон', type: 'tel',  name: 'tel',  args: {required: true}},
                ],
                btn_next: 'Next',
                btn_submit: 'Submit'
            }
        ]
    } only %}
</div>