{% 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 situation by clicking in the Instructions
        button below the page.
    </p>

{% formfield player.EarnR_1 label="<b>Person A gives 0€ to Person B</b> (Person A gets 10€, Person B gets 0€):"%}

{% formfield player.EarnR_2 label="<b>Person A gives 1€ to Person B</b> (Person A gets 9€, Person B gets 1€):"%}

{% formfield player.EarnR_3 label="<b>Person A gives 2€ to Person B</b> (Person A gets 8€, Person B gets 2€):"%}

{% formfield player.EarnR_4 label="<b>Person A gives 3€ to Person B</b> (Person A gets 7€, Person B gets 3€):"%}

{% formfield player.EarnR_5 label="<b>Person A gives 4€ to Person B</b> (Person A gets 6€, Person B gets 4€):"%}

{% formfield player.EarnR_6 label="<b>Person A gives 5€ to Person B</b> (Person A gets 5€, Person B gets 5€):"%}

{% formfield player.EarnR_7 label="<b>Person A gives 6€ to Person B</b> (Person A gets 4€, Person B gets 6€):"%}

{% formfield player.EarnR_8 label="<b>Person A gives 7€ to Person B</b> (Person A gets 3€, Person B gets 7€):"%}

{% formfield player.EarnR_9 label="<b>Person A gives 8€ to Person B</b> (Person A gets 2€, Person B gets 8€):"%}

{% formfield player.EarnR_10 label="<b>Person A gives 9€ to Person B</b> (Person A gets 1€, Person B gets 9€):"%}

{% formfield player.EarnR_11 label="<b>Person A gives 10€ to Person B</b> (Person A gets 0€, Person B gets 10€):"%}

    <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 participant
        with whom he or she is paired.
        <br>
        <br>
        In the experiment, Person A will make a choice, the experimenter will record this choice, and then
        Person B will be informed of the choice and both will be paid money based on the choice made by Person A. Additionally, both
        will receive a small participation fee. Suppose that neither Person A nor Person B will receive any other money for participating
        in the experiment.
        <br>
        <br>
        In each pair, Person B <b>earns</b> 10€ by answering a questionnaire that lasted 30 minutes.
        Person A did not have the opportunity to earn any money. Person A will then have the opportunity to give
        any amount of the 10€ earned by Person B to Person B. That is, Person A can give any of the 10€,
        in 1€ increments, to Person B. For instance, Person A may decide to give 0€ to Person B and keep
        10€ for him or herself. Or Person A may decide to give 10€ to Person B and keep 0€ for him or herself.
        Person A may also choose to give any other amount between 0€ and 10€ to Person B, in 1€ increments.
        This choice will determine how much money each will receive, privately and in cash, at the end of the experiment.
        <br>
        <br>
        You can find an overview of the possible actions and the corresponding earnings here:
         </p>
          <img src="https://i.imgur.com/97EnSWa.png" width="900px" height="200px" />
        <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 %}