{{ extends "global/Page.html" }}
{{ block title }}
{{ endblock }}

{{ block content }}
<ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link disabled active" id="initial-details-tab" data-bs-target="#initial-details"
            type="button" role="tab" aria-controls="initial-details" aria-selected="true">
            Instructions
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link disabled" id="questions-tab" data-bs-target="#questions" type="button" role="tab"
            aria-controls="questions" aria-selected="false">
            Comprehension Questions
        </button>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="initial-details" role="tabpanel" aria-labelledby="initial-details-tab">
        <h2>Instructions</h2>
        <p>In this session, you will perform three tasks. You will earn a monetary reward for each correct answer in the task.</p>
        <p><b>Within each task</b>, every correct answer gives the same monetary reward.
            However, <b>different tasks</b> give different monetary rewards per correct answer.</p>
        <p>The reward type can be <b>High</b> or <b>Low</b>. Half of the participants will have the <b>High Reward Type</b> and
            receive a high reward for each correct answer, and the other half of you will have the <b>Low Reward Type</b> and receive a low reward for each correct
            answer.</p>
        <p>You are <b>randomly</b> assigned to either reward type. If you are assigned to the High Reward Type in the
            beginning, you will be in the High Reward Type for the <b>whole study</b>.
            Similarly, if you are assigned to the Low Reward Type, you will be in the Low Reward Type for the <b>whole
                study</b>.
            You will find out about your reward type after you have performed the tasks. Solving the three tasks takes
            around {{ C.TIME_PART2 }} minutes in total.</p>
        <p>In each task, you are matched with a different participant, called your matched worker. After each task, the earnings that both you and your matched worker generated
            are put into a common account. At a later stage, we will explain how the money in this account is paid out
            to the members of the pair.</p>
        In the next page, you will be asked some True/False questions about the instructions above. You have {{
        C.NUM_ATTEMPTS }} attempts to answer correctly.</p>
        <button onclick="showTab('#questions')" type="button" class="btn-primary btn">
            Next
        </button>
    </div>
    <div class="tab-pane fade" id="questions" role="tabpanel" aria-labelledby="questions-tab">
        <h2>Comprehension questions</h2>
        <p><i>Please re-read the instructions on the previous page if you are unsure. You will have {{ C.NUM_ATTEMPTS }}
                chances to get the answers right.</i></p>
        {{ formfields }}
        <button onclick="showTab('#initial-details')" type="button" class="btn-primary btn">
            Previous
        </button>
        <button class="otree-btn-next btn btn-primary">Next</button>
    </div>
</div>

{{ endblock }}

{{ block scripts }}
<script>
    const triggerTabList = [].slice.call(
        document.querySelectorAll("#myTab button")
    );
    triggerTabList.forEach(function (triggerEl) {
        const tabTrigger = new bootstrap.Tab(triggerEl);

        triggerEl.addEventListener("click", function (event) {
            event.preventDefault();
            tabTrigger.show();
        });
    });

    function showTab(nextTarget) {
        const triggerEl = document.querySelector(
            `#myTab button[data-bs-target="${nextTarget}"]`
        );
        bootstrap.Tab.getInstance(triggerEl).show(); // Select tab by name
        window.scrollTo(0, 0);
    }
</script>
{{ endblock }}