{{ block title }}
Instructions Task 1
{{ endblock }}
{{ block content }}

<style>
    .otree-body {
        max-width:1280px
    }
</style>

<div class="tab">
       <p>
           Welcome to the first task!
          <br>
          <br>
          In this task, you will read the description of <b>seven</b> different situations.
          In each situation there is one individual (Person A) who must make a decision between several possible actions.
          <br>
          <br>
           After you read the description of the situation, you will be asked to evaluate the different possible
           actions available to Person A and to decide, for each of the possible actions, whether taking
           that action would be "socially appropriate" and "consistent with what most people expect
           Person A ought to do" or "socially inappropriate" and "inconsistent with what most people
           expect Person A ought to do." By socially appropriate, we mean behavior that most people
           agree is the "proper" thing to do and most people expect that Person A ought to do it. Another
           way to think about what we mean is that if Person A were to select a socially inappropriate
           action, then someone else might be angry at Person A for doing so.
          <br>
          <br>
          In this task, you can earn 7€. Your payment in this task will depend on your answers, the answers of the other participants, and chance.
          <br>
          <br>
           Your payment in this task is determined as follows: at the end of the study, we will randomly select one of the seven situations. For this situation, we will randomly select one of the possible actions of Person A. For the action selected, we will determine
           which answer was selected by the most participants in this session. <b>If you give the same answer as that most frequently given by other participants, then you will receive an additional 7€. </b> Otherwise, you will receive 0€ in this task.
          <br>
          <br>
          <b>Note</b>:
          All participants have received the same instructions. As you will not know which action will be chosen until the end of the study, please read through
           all the situations carefully. Any action could be selected to determine your payment.
          <br>
          <br>
          To help you understand how the different actions can be evaluated, we will now provide you with an example.
      </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 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &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">
      <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>
          If this were one of the situations of this study, you would consider each of the possible actions
          above and, for that action, indicate the extent to which you believe taking that action would be
          "socially appropriate" and "consistent with what most people expect Person A ought to do" or
          "socially inappropriate" and "inconsistent with what most people expect that Person A ought
          to do".
          <br>
          <br>
            You can choose from a scale with six points
            <br>
                <ul>
                    <li>Very Socially Inappropriate</li>
                    <li>Socially Inappropriate</li>
                    <li>Rather Socially Inappropriate</li>
                    <li>Rather Socially Appropriate</li>
                    <li>Socially Appropriate</li>
                    <li>Very Socially Appropriate</li>
                </ul>
 </p>
        Below you have one example on how to evaluate the different actions.
        <br>
        <br>
        Assume, for example, that you want to evaluate:
        <br>
        <br>
         <ul>
                <li>Taking and keeping the wallet as very socially inappropriate</li>
                <li>Asking other customers if the wallet belongs to them as socially appropriate</li>
                <li>Leaving the wallet there as rather socially  inappropriate </li>
                <li>Giving the wallet to the manager of the cafeteria as very socially appropriate </li>
            </ul>
        You would insert the following evaluations.
        <br>
        <br>
         <div style="text-align: center;">
         <img src="https://i.imgur.com/8s5bCWI.png" width="1200px" height="400px" />
         </div>
      <p>
         <br>
          Below you have an example on how your payment in this task will be computed.
          <br>
          <br>
          Imagine that the action: "Take the wallet and keep it" is the action that at the end of the study is randomly selected
          to determine your payment. The table below shows the percentage of other participants who gave a certain
          evaluation in that action. Note that you will <b>not</b> get this information in the actual situations. This example should
          help you understand how you can earn money.
          <br>
          <br>
          <div style="text-align: center;">
         <img src="https://i.imgur.com/fCIR1Cg.png" width="1050px" height="250px" />
          </div>
          <br>
          If the action "Take the wallet and keep it" is the action randomly selected for payment,
          you will earn 7€ only if you have chosen the answer "Very Socially Inappropriate" (as it is the most selected answer by other participants). You will earn 0€ if you have chosen any other answer.

          <br>
          <br>
          Please ensure that you fully understand the instructions for evaluating the actions and earning money.
          <br>
          <br>
          After clicking “next”, you will proceed to evaluate the actual situations.

 </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 &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &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();
            scroll_Top()
        }
    }
    function scroll_Top() {
        window.scrollTo(0,0)
    }
</script>

{{ endblock }}