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

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

<div class="tab">
       <p>
          {{ if player.treatment == 'A' }} Welcome to the second task! {{ else }} Welcome to the first task!{{ endif }}
          <br>
          <br>
          In this task, you will read the description of eight 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 the
          <b>opinion of the society</b> and independently of your own opinion,
          whether it is appropriate or not to choose it. “Appropriate” behavior means the behavior that you consider
          most people would agree upon as being “correct” or “moral”. The standard is, hence, not your personal opinion,
          but your assessment of the opinion of the society. We kindly ask you to answer as precisely as possible.
          <br>
          <br>
          In this task, you can earn up to 8€, on top of your participation fee of 4€ and the earnings of the other tasks,
          depending on your answers. The answers of the other participants, and chance will also influence
          your payment in this task.
          <br>
          <br>
          At the end of the study, we will determine which answer was the most selected for each action in every situation.
          Then, we will randomly select one of the actions that you have to evaluate.
          <br>
          <br>
          <b>Your payment</b> is determined in the following way: you will evaluate the possible actions of a person according
          to the opinion of the society in eight different situations. At the end of the study, we will randomly select one action.
          If your answer is exactly the same as the most selected answer of the other participants of this session
          , you will earn money.
          More concretely, you will earn 8€ if your action is exactly
          the same as the most selected answer among the other participants. If, for example, you give the most frequent answer
          for the selected action you get 8€ in this task.
          <br>
          <br>
          <b>Note</b>:
          All other participants have received the same instructions. Since you will not know which action will be
          chosen until the end of the study, please go through all the situations carefully. Any action could be selected to
          determine your payment.
          <br>
          <br>
          To show you how the different actions can be evaluated, we now give you 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
        <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>
          <b> Example </b>
           <br>
          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 the <b>opinion of the society</b> and independently of your own opinion,
            whether it is appropriate or not to choose it. “Appropriate” behavior means the behavior that you consider
            most people would agree upon as being “correct” or “moral”.
          <br>
            You can choose from a scale with six points.
            <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.
        <br>
        <br>
        Assume, for example, that you want to 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>
          Imagine that the action: "Taking and keeping the wallet" is the action randomly selected
          to determine your payment. The table below shows the percentage of other participants who gave a certain
          evaluation. Obviously, you will not get this information in the actual situations. This example should
          help you understand how you can earn additional money.
          <br>
          <br>
         <img src="https://i.imgur.com/Szgrp4i.png" width="800px" height="100px" />
          <br>
          <br>
          If the action "Taking and keeping the wallet" is the actions randomly selected for payment,
          you will earn 8€ only if you select "Very inappropriate" (as it is the most selected choice)
          and 0€ if you select any other option.
          <br>
          <br>
          Please make sure that you understand how you have to use the table to evaluate the actions
          and how you can earn money.
          <br>
          <br>
          After clicking on “next”, the description of the actual situations that you have to evaluate will follow.

 </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 }}