{{ 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-tab" data-bs-target="#initial-details"
            type="button" role="tab" aria-controls="initial-details" aria-selected="true">
            Initial Details
        </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>Initial Instructions</h2>
        <p>Welcome!</p>
        <p>You are about to participate in a study on decision-making. It consists of 3
            parts.</p>
        <ul>
            <li>In the first part, we will give you some instructions, as well as quizzes you need to pass to get to the
                next part. This lasts about {{ C.TIME_PART1 }} minutes.</li>
            <li>In the second part, we ask you to perform some tasks through which you can earn a bonus. This part lasts
                about {{ C.TIME_PART2 }} minutes</li>
            <li>There will be a third part. We will provide details at a later stage.</li>
            <li>There are no breaks in the experiment.</li>
        </ul>
        <p>You will receive some compensation for your participation. Your final payoff will be comprised of:
        <ul>
            <li>A participation fee of {{ session.config.participation_fee }}.</li>
            <li>A completion fee of {{ completion_fee }}.</li>
            <li>A bonus that will depend on your performance in some tasks, on your decisions, on luck, and potentially
                on other participants' decisions.
                This can amount to a maximum of {{ 30|cu }}.</li>
        </ul>

        In order to receive the full payment, you need to finish the experiment and complete all parts successfully.
        It is therefore in your best interest to stay concentrated during the full duration of the experiment.
        You should set your phones away.</p>
        <p><b>Important:</b> Our Institutional Review Board does not allow deception of participants, so everything
            written in the instructions is truthful and will be implemented.</p>
        <p>In the next page, you will be asked to answer 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 two 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 styles }}
<style>
    .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        background-color: transparent;
        border-color: transparent;
    }

    .nav-link {
        padding: 0.5rem 1.5rem 0.5rem 0;
    }
</style>
{{ 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 }}