{{ extends 'global/Page.html' }}

{{ block styles }}
    <style>
        .input-group, input.form-control, select.form-control {
            max-width: 180px;
        }
    </style>
{{ endblock }}

{{ block scripts }}
    <script>
        $(function () {
            let wrapper = $('<div class="input-group mb-3"></div>');

            $('input[type="number"]').each(function (i) {
                let percentageLabel = $('<span class="input-group-text">%</span>');
                $(this).wrap(wrapper).parents('.input-group').append(percentageLabel);
            })
        })
    </script>
{{ endblock }}

{{ block title }}Comprehension Quiz{{ endblock }}

{{ block content }}

    {{ for field in fields }}
        {{ formfield field.0 label=field.1 }}
    {{ endfor }}

    {{ next_button }}
{{ endblock }}