{{ block title }}
{{ Lexicon.understanding_results_title }}
{{ endblock }}

{{ block content }}

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

<div class="card bg-light mb-3">
    <div class="card-body">
        <p>
            {{ Lexicon.understanding_results_txt }}
        </p>
    </div>
</div>

<div class="mb-3">
    {{ for q in understanding }}
    <div class="card mb-1">
        <div class="card-header">
            <h5>{{ Lexicon.question }} {{ forloop.counter }}</h5>
        </div>
        <div class="card-body">
            <p class="card-text">
                {{ q.text|linebreaks }}
            </p>
            <p class="card-text">
                {{ Lexicon.reponse }} :
                {{ if q.reponse == q.solution }}
                <span class="text-success">{{ q.reponse }}</span>
                {{ else }}
                <span class="text-danger">{{ q.reponse }}</span><br>
                {{ Lexicon.bonne_reponse }} : <span class="text-success">{{q.solution}}</span>
                {{ endif }}
                <br>
                <u>{{ Lexicon.explication }}</u>: {{q.explication}}
            </p>
        </div>
    </div>
    {{ endfor }}
</div>

<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>
    window.onload = function () {
        if (js_vars.fill_auto)
            fill_auto();
    }
</script>
{{ endblock }}