{{ extends "global/Page.html" }}
{{ load otree }}

{{ block title }}
    Part B: Comprehension Questions
{{ endblock }}

{{ block content }}
</br>
<div class="card bg-light instructions">
    <div class="card">
        <div class="card-body">
    <p>
        <font size="4">Before continuing, please answer the following comprehension questions concerning the <i><b>auction</b></i> in the <b>current study</b>:</font>
        <br />
        <br />
        You bid £0.21 and your opponent bids £0.34.
        {{ formfield player.answer_to_question4 label="How much of your initial endowment (£0.6) remains with you?" }}
        {{ formfield player.answer_to_question5 label="How much of their initial endowment (£0.6) remains with your opponent?" }}
        {{ formfield player.answer_to_question6 label="Who has the greater chance to become Player X?" }}
        <br />
    </p>
    <p>
        <font size="4">Before continuing, please answer the following comprehension questions concerning the <i><b>decision-making task</b></i> in the <b>earlier study</b>:</font>
        <br />
        <br />
        {{ formfield player.answer_to_question7 label="How much money can a participant maximally earn in the <i>decision-maiking task</i> as Player Y?" }}
        {{ formfield player.answer_to_question8 label="Who makes an allocation decision in the <i>decision-making task</i>??" }}
        <br />
        When you answered all comprehension questions correctly, please proceed by clicking the "Next"-button.
        If you answered a question incorrectly, please correct your answer. The "Next"-button will reappear soon.
    </p>
        </div>
    </div>
</div>

    <br />
    {{ next_button }}

{{ endblock }}

{{ block scripts }}
    <script>
        {{ if form.errors }}
            setTimeout(function () {
                $('.otree-btn-next').show();
            }, 1 * 1000);
        {{ endif }}

    </script>
{{ endblock }}

{{ block styles }}
    <style>
        {{ if form.errors }}
            .otree-btn-next {
                display: none;
            }
        {{ endif }}
        .card {
            background: lightgreen;
            border-style: solid ;

        }

    </style>
{{ endblock }}