{{ block title }}{{ endblock }}

{{ block content }}

<link rel="stylesheet" href="{{ static 'css/css.css' }}">
<link rel="stylesheet" href="{{ static 'css/modal.css' }}">
<script type="text/javascript" src="{{ static 'js/Script_modal.js' }}"></script>

<div class="content-box box-neutral">
    <h2 class="section-title">Comprehension Check</h2>
    <hr class="section-divider">

    <div class="section-box box-calm">
        <div class="section-header">
            <div class="icon">🔁</div>
            <h3>Second Attempt</h3>
        </div>
        <p>
            Some of your previous answers were incorrect. Please try again below.
        </p>
        <p>
            You answered the following question(s) incorrectly: <strong>{{ Comprehension_wrong_answers }}</strong>.
        </p>
        <p>
            You can review the instructions again by clicking the <strong>"Introductory Instructions"</strong> button below.
        </p>
    </div>

    <!-- Comprehension form fields wrapped in a visual box -->
    <div class="section-box box-info">
        <div class="section-header">
            <div class="icon">🧪</div>
            <h3>Comprehension Questions</h3>
        </div>

        {% for field in form %}
            {% if field.name not in hidden_fields %}
                {{ formfield field.name }}
            {% endif %}
        {% endfor %}
    </div>

    <div style="display:none">
        {% for field in form %}
            {% if field.name in hidden_fields %}
                {{ formfield field.name }}
            {% endif %}
        {% endfor %}
    </div>



    <div class="buttons-container">
        <a id="myBtn" onclick="open_modal(1)" class="btn btn-info">Instructions </a>
        <button id="submit-btn" class="otree-btn-next btn btn-primary">Next</button>
    </div>

    
    <div id="myModal1" class="modal">
        <div class="modal-content modal-content-wide">
            <div class="modal-header">
                <h2>Instructions</h2>
                <span class="close" onclick="span_click(1)">&times;</span>
            </div>
            <p style="padding: 0px">
                {{ include C.Part_II_Instructions_template }}
            </p>
        </div>
    </div>

{{ endblock }}