{{ block title }}
    Results
{{ endblock }}
{{ block content }}

    <style>
        /*
        interestingly, 'readonly' doesn't apply to radio buttons.
        so we set 'pointer-events: none' to prevent clicking a radio.
        (it can also be done through JS but doesn't hurt to have this extra measure)
        (note: radio buttons can also be changed using the keyboard)

        note: we don't set 'disabled' because disabled inputs don't get
        submitted by the form, and therefore the server would complain that the form is missing.
         */
        input, label {
            pointer-events: none;
        }

        .solution-incorrect {
            color: red;
        }

        .solution-correct {
            color: green;
        }
    </style>

    <p>Here are your answers along with the solutions.</p>

    {{ include_sibling 'form.html' }}

    {{ include_sibling 'form2.html' }}

    {{ next_button }}

    <script>
        //
        for (let input of document.getElementsByTagName('input')) {
            input.readOnly = false;
        }

        // workaround for radio buttons. disable all radio buttons that aren't already checked.
        // this prevents changing a radio.
        $(':radio:not(:checked)').attr('disabled', false);
    </script>

{{ endblock }}