{% block content %}

<style>
    .otree-body {
        max-width:1280px
    }
</style>

<div class="tab">

    <p>
        You have below a list of the possible actions available to Person A. For each of the actions, please indicate whether you believe choosing that action is Very Socially Inappropriate, Socially Inappropriate, Rather Socially Inappropriate, Rather Socially Appropriate, Socially Appropriate, or Very Socially Appropriate. Remember that you will earn money in this task
        (7€) if your evaluation to a randomly selected action is the same as the most common evaluation
        provided by other participants in today's session.
        <br>
        <br>
         In case you need it, you can read again the description of the situation by clicking in the Instructions button located at the bottom of the page.

    </p>

{% formfield player.PI_0 label="<b>Person A places 10€ to Project 1 and 0€ to Project 2</b>"%}

{% formfield player.PI_2 label="<b>Person A places 8€ to Project 1 and 2€ to Project 2</b>"%}

{% formfield player.PI_4 label="<b>Person A places 6€ to Project 1 and 4€ to Project 2</b>"%}

{% formfield player.PI_6 label="<b>Person A places 4€ to Project 1 and 6€ to Project 2</b>"%}

{% formfield player.PI_8 label="<b>Person A places 2€ to Project 1 and 8€ to Project 2</b>"%}

{% formfield player.PI_10 label="<b>Person A places 0€ to Project 1 and 10€ to Project 2</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 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &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 placed in a
        group with <b>3 other participants</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 grouped.
        <br>
        <br>
        In the experiment, all group members will simultaneously make a choice and the experimenter will record this choice.
        Afterwards, all individuals will be informed of the choices made by the other group members and will be paid
        money based on the choices made by the individuals of the group, as well as a small participation fee. Suppose that neither individual
        will receive any other money for participating in the experiment.
        <br>
        <br>
        Each member of the group receives 10€ and must choose how to divide his/her 10€ between <b>Project 1</b> and <b>Project 2</b>. Each member of the
        group can place 0€, 2€, 4€, 6€, 8€ or 10€ in Project 1. The remainder is automatically placed in Project 2.
        The decisions made by the individuals of the group will determine how much money they will earn. The payments individuals can obtain are determined as follows:
         <ul>
            <li>Each 1€ placed by an individual in Project 1 generates a total cash return of 1€ to that individual (and only to that individual).</li>
            <li>Each 1€ placed by an individual in Project 2 generates a total cash return of 0.80€ that is then equally divided among all group members.</li>
        </ul>
        The <b>total earnings</b> for each individual are calculated by adding their earnings from Project 1 to their earnings from Project 2.
        Person A's earnings are the amount of money he/she places in Project 1, plus the share of the returns generated by all the money that
        Person A and the other group members place in Project 2. Individuals make their decisions simultaneously,
        and these decisions will determine how much money each individual will receive privately and in cash at the end of the experiment.
        <br>
        <br>
        For example, Person A could place 2€ in Project 1 and 8€ in Project 2. This would give Person A (2€ x 1) = 2€ from Project 1 and (8€ x 0.80/4) = 1.60€
        from Project 2. Person A could also place 8€ to Project 1 and 2€ to Project 2, which would give Person A (8€ x 1) = 8€ from Project 1 and (2€ x 0.80/4) = 0.40€
        from Project 2. Additionally, Person A earns (0.80€/4) = 0.20€ for each 1€ placed in Project 2 by the other group members. This is independent of the decision of Person A.
        <br>
        <br>
        Since the decisions are made simultaneously, Person A does not know the decisions of other members and other members of the group do not know the decisions of Person A or the other group members.
        <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 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &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();
            scroll_Top()
        }
    }
    function scroll_Top() {
        window.scrollTo(0,0)
    }
</script>


{% endblock %}