{% 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>

   <p>
        <b> Case 1</b>: Person A is paired with another individual

        {% formfield player.C_2 label="<b>Person A selects X</b>:"%}
        {% formfield player.N_2 label="<b>Person A selects Y</b>:"%}
    </p>
     <p>
       <b> Case 2</b>: Person A is paired with 3 other individuals

        {% formfield player.C_4 label="<b>Person A selects X</b>:"%}
        {% formfield player.N_4 label="<b>Person A selects Y</b>:"%}
    </p>
    <p>
        <b> Case 3</b>: Person A is paired with 7 other individuals

        {% formfield player.C_8 label="<b>Person A selects X</b>:"%}
        {% formfield player.N_8 label="<b>Person A selects Y</b>:"%}
    </p>
    <p>
        <b> Case 4</b>: Person A is paired with 15 other individuals

        {% formfield player.C_16 label="<b>Person A selects X</b>:"%}
        {% formfield player.N_16 label="<b>Person A selects Y</b>:"%}
    </p>

    <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 placed in a group with other participants.
        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, all the group members will make a choice, the experimenter will record this choice,
        and then all individuals will be informed of the choices made by other individuals and paid money based on
        the choices made by all individuals, 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 has to choose simultaneously between two possible actions: action X or action Y.
        If at least one member of the group selects action X, all individuals that selected Y obtain 10€ and all
        individuals that selected X obtain 7€. If no member of the group selects action X, all individuals of
        the group obtain 0€.
        <br>
        <br>
        Since the decisions are taken simultaneously, Person A does not know the decisions of the other members of
        the group. Other members of the group do not know the decision of Person A, nor the decisions of
        other individuals.
        <br>
        <br>
        For example, if Person A selects X, Person A, and all the individuals that selected X, obtain 7€.
        All the individuals that selected Y obtain 10€. If Person A selects Y, Person A, and all individuals that
        selected Y, obtain 10€ if at least one individual selected X, and 0€ otherwise.
        <br>
        <br>
        In this case, we ask you to evaluate the choice of Person A (choosing X or Y) depending on the number of members of the group.
        You will have to evaluate 4 different cases.
        <br>
              <ul>
                <li>Groups have 2 participants (Person A is paired with another individual).</li>
                <li>Groups have 4 participants (Person A is paired with 3 other individuals).</li>
                <li>Groups have 8 participants (Person A is paired with 7 other individuals).</li>
                <li>Groups have 16 participants (Person A is paired with 15 other individuals).</li>
             </ul>
        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 %}