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

<style>
    .tab {
        display: none;
    }
</style>

<div class="tab">
    <p>
          Welcome to the second part of the study!
          <br>
          <br>
          Today, you will take part in the second part of this study. You have already
          completed the first part online. For completing the first part of the study and for participating today
          you will receive 4€ that will be paid at the end of the study. You will be able to earn more money today.
          <br>
          <br>
          The size of this additional amount depends on your decisions, the decisions of
          other participants, and chance. Thus, please read the instructions carefully.
          <br>
          <br>
          Please avoid any conversation with your neighbors. Switch off your mobile phone
          and remove any item you do not need for the study from your table. In case you
          have questions, raise your hand, and we will answer your question at your seat.
          </p>
    <p>
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp
        <button type="button" class="btn btn-primary btn-tab" data-offset="1">Next</button>
    </p>
</div>
<div class="tab">
          <p>
          Today’s study is composed of <b>three</b> different tasks. The first two tasks will be presented in a random
          order. For each task, you will first read the instructions of the task. After the instructions you will
          have to take some decisions.
          <br>
          <br>
          You can earn money with all the three tasks. This means that all tasks of this study will affect your final payment.
          At the end of this session you will receive the sum you earned during the whole study (4€ for the online
          study and your participation today, and your payment from today’s study) in cash. In the instructions of each
          task we will explain to you how you can earn more money.
          <br>
          <br>
          Please read carefully the instructions of the tasks to make sure that you understand the decisions you
          have to take.
          </p>
    <p>
        <button type="button" class="btn btn-primary btn-tab" data-offset="-1">Back</button>
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        <button class="btn btn-primary">Next</button>
    </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 }}