{{ block title }}
Task Instructions
{{ endblock }}
{{ block content }}
<style>
    .tab {
        display: none;
    }
</style>

<div class="tab">
    <p>
          Welcome and thank you for your participation in this study!
          <br>
          <br>
          This study is composed of two parts, today’s online part (first part) and a part
          in person at the Behavioral Economics Lab of the Toulouse School of Economics (second part).
          This online part will take approximately 15 minutes. Please be aware that you need
          to complete this online part to take part in the second part. You will receive an
          email to remind you of this.
          <br>
          <br>
          All your decisions will be used only for scientific purposes and for determining
          your payment.
          <br>
          <br>
          You will get a fixed payment of 4€ for completing this online part and for participating in the second part
          of the study. Notice that you will be paid after you have completed both parts of the study.
          You will have the opportunity to earn more money during the second part of the study.
          Notice that you will not be able to participate in the second part of the
          study if you do not complete this first part.
          </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>
              In this part of the study, you will read the description of different situations.
          In each situation there is one person who has to make a choice between different actions.
          <br>
          <br>
          After you read the description of each situation, you have to evaluate the different actions amongst which
          the person in that situation can choose from. For each action, evaluate according to your own opinion and
          independently of the opinion of others, whether it is appropriate or not to choose it. “Appropriate” behavior
          means the behavior that you personally consider to be “correct” or “moral”. The standard is, hence, your
         <b>personal opinion</b>, independently of the opinion of others.
          <br>
          <br>
          We kindly ask you to answer as precisely as possible with your own honest opinion.
          There is no right or wrong answer; you will not get any additional payment for your answers in this part.
          <br>
          <br>
          Overall there are four different situations for which you have to evaluate the possible actions.
          To show you how the different actions can be evaluated we now give you an example.
          </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 type="button" class="btn btn-primary btn-tab" data-offset="1">Next</button>
    </p>
</div>

<div class="tab">
          <p>
      <h2> <span style="font-size:18pt">Example Situation</span> </h2>
      <p>
          Person A is sitting in a cafeteria near the university. Person A notices that another person has
          left his wallet on the table. Person A has to decide what to do. Person A has to choose from
          four possible actions:
          <br>
                <ul>
                    <li>Take the wallet and keep it;</li>
                    <li>Ask other customers if the wallet belongs to one of them;</li>
                    <li>Leave the wallet there;</li>
                    <li>Give the wallet to the manager of the cafeteria.</li>
                </ul>
          For each action evaluate according to your <b>own personal opinion</b> and independently of the opinion
          of others, whether it is appropriate or not to choose it. “Appropriate” behavior means the behavior
          that you personally consider to be “correct” or “moral”.
          <br>
          <br>
          You can choose from a scale with six points.
          <br>
          <br>
                <ul>
                    <li>Very inappropriate</li>
                    <li>Inappropriate</li>
                    <li>Rather inappropriate</li>
                    <li>Rather appropriate</li>
                    <li>Appropriate</li>
                    <li>Very appropriate</li>
                </ul>
 </p>
        You will evaluate the actions using a table. To evaluate the behavior you have to mark the corresponding option.
        Please give an evaluation for each of the actions.
        <br>
        <br>
        Assume, for example, that you evaluate:
        <br>
        <br>
         <ul>
                <li>Taking and keeping the wallet as very inappropriate</li>
                <li>Asking other customers if the wallet belongs to them as appropriate</li>
                <li>Leaving the wallet there as rather inappropriate </li>
                <li>Giving the wallet to the manager of the cafeteria as very appropriate </li>
            </ul>
        You would insert the following evaluations.
        <br>
        <br>
         <img src="https://i.imgur.com/pAxyIM8.png" width="750px" height="250px" />
      <p>
          <br>
         <br>
        After clicking on “next”, the description of the actual situations that you have to evaluate will follow.
 </p>
          </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 }}