{% extends "global/Page.html" %} {% load otree static %} {% block styles %} {% endblock %} {% block scripts %} {% endblock %} {% block title %} {% endblock %} {% block content %}

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

<div class="tab">
  <h2> <span style="font-size:18pt">Situation Description</span> </h2>

    <p>
        In a study conducted at the economic laboratory, 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 participants
        with whom he or she is paired.
        <br>
        <br>
        In the experiment, Person A and Person B will make a simultaneous choice, the experimenter will record
        this choice, and then both individuals will be informed of the choice made by other individual
        and paid money based on the choices
        made by Person A and Person B, as well as a small participation fee. Suppose that neither individual
        will receive any other money for participating in the experiment.
        <br>
        <br>
        In each pair, Person A will receive 10€. Person B will receive 0€. Both participants receive a small participation
        fee. 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 or she wants to offer to Person B. Person A can choose to 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€. Player 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 take 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 evaluate the actions of Person A please answer the following comprehension questions in the next page.
        <br>
        <br>
    </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">Comprehension questions</span> </h2>

        {% formfield player.UG1 %}
        {% formfield player.UG2 %}


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