{{ block title }}Instructions{{ endblock }}
{{ block content }}

<div class="tab">
    <p>We are interested in how people make decisions that affect their own and others' payoffs.
        Any decision you make is completely anonymous.</p>
    <p>
        You will earn a participation fee of {{participation_fee}}.
        Additionally, you will earn money based on your (and others')
        decisions in the experiment. During the experiment, payoffs will be given in points.
        Every point is worth {{currency_per_point}} {{ if country == 'nl' }} cent {{ else }} kuruş {{ endif}}
        (100 points = {{ if country == 'nl' }} &euro;1{{ else }} <span>&#8378;</span>7.5{{ endif}}). </p>
    <p>You will receive your final payment via bank transfer within the next few days. <strong>Please make sure to
        complete the experiment.</strong> If you don't finish the experiment, we cannot determine
        your earnings to pay you.</p>


    <center><button type="button" class="btn btn-primary btn-tab" data-offset="1"><strong>I UNDERSTAND AND AGREE</strong></button></center>
</div>

<div class="tab">

    <p>The experiment consists of <strong>three main parts and a questionnaire at the end</strong>:</p>
    <br>
    <table class="table">
        <thead>
        <tr>
            <th style='text-align:center; vertical-align:middle'>Part I</th>
            <th style='text-align:center; vertical-align:middle'>Part II</th>
            <th style='text-align:center; vertical-align:middle'>Part III</th>
            <th style='text-align:center; vertical-align:middle'>Questionnaire</th>
        </tr>
        </thead>
        <tr>
            <td style='text-align:center; vertical-align:middle'>{{ Constants.number_tasks }} tasks</td>
            <td style='text-align:center; vertical-align:middle'>1 task</td>
            <td style='text-align:center; vertical-align:middle'>3 tasks</td>
            <td style='text-align:center; vertical-align:middle'>1 questionnaire</td>
        </tr>
    </table>

    <br>
    <p>The rules for each task will be different. At the beginning of each task,
        you will be given detailed instructions for that task, and
        will be asked practice questions before moving on to the task.
        Keep in mind that the numbers in the practice questions are randomly
        chosen and do not have a meaning.
        You will need to make calculations in some tasks.
        These will be easy calculations, but we suggest having a calculator nearby.</p>
    <p><strong>Your earnings in each task depend on the rules of the task,
        so, please read the instructions carefully.</strong></p>

    <p>You will earn money based on <strong>some of your decisions in Parts I, II and III.</strong></p>
    <p>Which decisions are chosen for your payment will be determined randomly after the end of the experiment.
        Thus, because only some of your decisions will count, but you don't know which ones it will be,
        <i>it is in your best interest to treat each decision as if it is the only one that matters for your final payment.</i>
    </p>

    <p><strong>Your earnings from Parts I, II and III will be added to your participation fee.</strong></p>

    <center><button type="button" class="btn btn-primary btn-tab" data-offset="-1"><strong>BACK</strong></button>
        <button class="btn btn-primary"><strong>START THE EXPERIMENT</strong></button></center>
    </p>
</div>

<script>

    let activeTab = 0;

    function showCurrentTabOnly() {
        let tabIndex = 0;
        for (let tab of document.getElementsByClassName('tab')) {
            tab.style.display = tabIndex === activeTab ? 'block' : 'none';
            tabIndex++;
        }
    }

    showCurrentTabOnly();
    for (let btn of document.getElementsByClassName('btn-tab')) {
        btn.onclick = function () {
            activeTab += parseInt(btn.dataset.offset);
            showCurrentTabOnly();
        }
    }
</script>

{{ endblock }}