{% block content %}

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

<div class="tab">

    <p>
        For each action, evaluate according to your <b>own personal opinion</b> and independently of the opinion of others,
        whether it is appropriate or not to choose it. “Appropriate” behavior means the behavior that you personally
        consider to be “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.Half_1 label="<b>Person A gives 0€ to Person B</b> (Person A gets 10€, Person B gets 0€):"%}

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

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

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

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

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

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

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

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

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

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

    <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 A will receive 10€, in addition to the participation fee.
        Person A will then have the opportunity to give any amount of his or her 10€ to Person B.
        Person B gets 0.50€ for each 1€ Person A sends to him. Hence, <b>half</b> of the money that Person A sends is lost.
        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:
        <br>
         </p>
          <img src="https://i.imgur.com/QDGBkcY.png" width="850px" 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 %}