{% block content %}

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

<div class="tab">

    <p>
        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>
        <br>
        In case you need it, you can read the description of the situations by clicking in the Instructions
        button below the page.
    </p>

{% formfield player.UG_1 label="<b>Person A offers 0€ to Person B</b>"%}

{% formfield player.UG_2 label="<b>Person A offers 1€ to Person B</b>"%}

{% formfield player.UG_3 label="<b>Person A offers 2€ to Person B</b>"%}

{% formfield player.UG_4 label="<b>Person A offers 3€ to Person B</b>"%}

{% formfield player.UG_5 label="<b>Person A offers 4€ to Person B</b>"%}

{% formfield player.UG_6 label="<b>Person A offers 5€ to Person B</b>"%}

{% formfield player.UG_7 label="<b>Person A offers 6€ to Person B</b>"%}

{% formfield player.UG_8 label="<b>Person A offers 7€ to Person B</b>"%}

{% formfield player.UG_9 label="<b>Person A offers 8€ to Person B</b>"%}

{% formfield player.UG_10 label="<b>Person A offers 9€ to Person B</b>"%}

{% formfield player.UG_11 label="<b>Person A offers 10€ to Person B</b>"%}

    <button type="button" class="btn btn-primary btn-tab" data-offset="1">Instructions</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
    <button class="btn btn-primary">Next</button>

</div>

<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>
        Please evaluate the possible actions of Person A.
        <br>
        <br>
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &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">Back</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 %}