{{ block title }}
{{ Lexicon.understanding_title }}
{{ endblock }}

{{ block content }}

<div class="text-end mb-3">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#modal_content">
        {{ Lexicon.instructions }}
    </button>
</div>

{{ for question in understanding }}
<div class="card mb-2">
    <div class="card-header">
        <h5>{{ Lexicon.question }} {{ forloop.counter }}</h5>
    </div>
    <div class="card-body">
        <p class="form-label">{{ question.text }}</p>
        <div class="radio-group" data-question-number="{{forloop.counter}}">
            {{ for prop in question.propositions }}
            <input type="radio" value="{{ prop }}" required>
            <label>{{ prop }}</label><br>
            {{ endfor }}
        </div>
    </div>
</div>
{{ endfor }}

<button class="btn btn-primary otree-btn-next">{{ Lexicon.next_button }}</button>

{{ include_sibling "InstructionsModal.html" }}

{{ endblock }}

{{ block scripts }}
<script src="{{ static 'fill_auto.js' }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        document.querySelectorAll('.radio-group').forEach((group) => {
            const questionNumber = group.getAttribute('data-question-number');
            group.querySelectorAll('input[type="radio"]').forEach((radio) => {
                radio.name = `understanding_${questionNumber}`;
            });
        });
    });

    window.onload = function () {
        if (js_vars.fill_auto)
            fill_auto();
    }
</script>
{{ endblock }}