{% 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.Doubled_1 label="<b>Person A gives 0€ to Person B</b> (Person A gets 10€, Person B gets 0€):"%}

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

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

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

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

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

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

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

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

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

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

    <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 2€ for each 1€ Person A sends
        to him. Hence, the money that Person A sends is <b>doubled</b>. 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>
        <br>
         </p>
          <img src="https://i.imgur.com/mijlKoP.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 %}