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

{{ block title }}
    Comprehension Questions
{{ endblock }}

{{ block content }}
</br>
<div class="card bg-light instructions">
    <div class="card-body">
        <p>
            <font size="4">
                Before continuing, please answer the following comprehension questions concerning
                the <i><b>guessing task</b></i> in <b>Part 1</b>:
            </font>
            <br />
            {{ formfield player.answer_to_question1 label="How much money can you maximally earn in Part 1?" }}
            {{ formfield player.answer_to_question2 label="A guess in Part 1 is correct, if the majority of participants chose the same..." }}
            {{ formfield player.answer_to_question3 label="A guess in Part 1 is correct, if the majority of participants chose the same..." }}
            <br />
        </p>
        <p>
            <font size="4">
                Before continuing, please answer the following comprehension questions concerning the <i><b>decision-making task</b></i> in <b>Part 2</b>:
            </font>
            <br />
            {{ formfield player.answer_to_question4 label="How much money can you maximally earn in Part 2 as Player Y?" }}
            {{ formfield player.answer_to_question5 label="Who makes an allocation decision in Part 2?" }}
            <br />
        </p>
        <p>
            If 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>
<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 }}
    </style>
{{ endblock }}