{{ block content }}

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

<div class="tab">
 <p>
     <h2> <span style="font-size:18pt">Task Instructions</span> </h2>
          {{ if player.treatment == 'A' }} Welcome to the first task! {{ else }} Welcome to the second task!{{ endif }}
          <br>
          <br>
          In this task you will be matched with another participant of this study. You will not
          find out neither before nor after the study who the other participant is.
          <br>
          <br>
          In the following page you will read the description of a situation that involves two different roles (Person A and Person B). Person A
          and Person B have to make a simultaneous decision. For this situation, you and your pair will have to make a decision both in the roles of
          Person A and Person B.
          At the end of the study, we will randomly select which one of your two decisions will determine your payment
          (and the payment of your pair). There is a 50% chance your payment will depend on the decision you made in
          the role of Person A (and the decision that your pair made in the role of Person B), and a 50% chance that it will depend on the decision you made
          in the role of Person B (and the decision that your pair made in the role of Person A).
          <br>
          <br>
          <b>Summary</b>: You will be matched with another participant of this study. Both you and your pair will read a situation that
          has two different roles (Person A and Person B). Person A and Person B have to take a simultaneous decision that will determine the
          payoffs of both players. You and your pair will have to make a decision in both roles. At the end of the study we will randomly select
          which one of the two decisions you made will determine your payment. More concretely, there is a 50% chance the payment of this task
          will be determined by the case where you made the decision in the role of Person A (and your pair in the role of Person B) and a 50% chance
          it will be determined by the case where you made the decision in the role of Person B (and your pair in the role of Person A). Therefore,
          your payment on this task will depend on only one of the two cases.
           <br>
          <br>
          Please read carefully the instructions of the task you will find on the next page.
          </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>
        <h2> <span style="font-size:18pt">Situation Description</span> </h2>
        Person A is randomly paired with another participant, Person B.
        The pairing is anonymous, meaning that none of the participants will ever know the identity of
        the other participant with whom he or she is paired.
        <br>
        <br>
        In each pair, Person A will receive 10€. Person B will receive 0€. Person
        A and Person B then take a simultaneous decision.
        <br>
        <br>
        <b>Person A's decision</b>: Person A can offer any amount of the 10€ to Person B. Person A hence decides how much of
        the 10€ he wants to offer to Person B. Person A can offer any amount between 0€ and 10€ to Person B,
        in 1€ increments.
        <br>
        <br>
        <b>Person B's decision</b>: Person B decides which proposals he wants to accept.
        The two participants get the stipulated amounts only if Person B accepts the offer.
        If he rejects the offer, both participants get 0€. Person B chooses an amount between 0€ and 10€, in 1€ increments.
        This amount is the lowest proposal that Person B is ready to accept. All proposals that are equal to or higher
        than this amount are accepted by Person B. All proposals that are lower than this amount are rejected by
        Person B.
        <br>
        <br>
        Since the decisions are taken simultaneously, Person A does not know what the minimal amount of money Person B
        is willing to accept at the point of his decision. Similarly, Person B does not know how much money Person
        A will actually offer.
        <br>
        <br>
        For example, Person A could offer 2€ to Person B. Then, if Person B accepts proposals starting from 0€, 1€,
        or 2€, the offer will be accepted and Person A will obtain 8€ and Person B will obtain 2€.
        If Person B accepts proposals starting from higher than 2€, the offer will be rejected and
        Person A and Person B will obtain 0€. Person A could offer 8€ to Person B. Then, if Person
        B accepts proposals starting from 8€ or below, the offer will be accepted and Person A will
        obtain 2€ and Person B will obtain 8€. If Person B accepts proposals starting higher than 8€,
        the offer will be rejected and Person A and Person B will obtain 0€.
        <br>
        <br>
        You can find an overview of the possible actions and the corresponding earnings here. Each cell corresponds
        to the payments that Person A (top in the cell) and Person B (bottom of the cell) receive in case of a given
        offer of Person A and a decision of Person B.
        <br>
        <br>
        <img src="https://i.imgur.com/vzd1ATP.png" width="900px" height="150px" />
        <br>
        <br>
        Please make sure you understand the situation.
        <br>
        <br>
        Before you take your decision, please answer the following comprehension
        questions in the next page.
        </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">
  <h2> <span style="font-size:18pt" style="text-align: center;">  Comprehension questions </span> </h2>

        {% formfield player.UG1_payment %}
        {% formfield player.UG1_play %}
        {% formfield player.UG2_play %}


        <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
        <button class="btn btn-primary">Next</button>

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