{{ 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>guessing task</b></i> in the <b>current study</b>:</font>
                <br />
                {{ formfield player.answer_to_question1 label="How much money can you maximally earn in the <b>guessing task</b>?" }}
                {{ formfield player.answer_to_question2 label="A guess in the <b>current study</b> is correct, if the majority of participants in the <b>earlier study</b> chose the same..." }}
                {{ formfield player.answer_to_question3 label="A guess in the <b>current study</b> is correct, if the majority of participants in the <b>earlier study</b> chose the same..." }}
                {{ formfield player.answer_to_question4 label="A guess in the <b>current study</b> 1 is meant to be made..." }}
                     on whether Player X from the earlier study chose "reveal game".
                <br />
            </p>
            <p>
                When you answered all comprehension questions correctly, please proceed by clicking the "Next"-button.</br>
                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 }}