{% 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.VG3_0 label="<b>Person A selects X with 0% chance and Y with 100% chance </b>"%}

{% formfield player.VG3_2 label="<b>Person A selects X with 20% chance and Y with 80% chance</b>"%}

{% formfield player.VG3_4 label="<b>Person A selects X with 40% chance and Y with 60% chance</b>"%}

{% formfield player.VG3_6 label="<b>Person A selects X with 60% chance and Y with 40% chance</b>"%}

{% formfield player.VG3_8 label="<b>Person A selects X with 80% chance and Y with 20% chance</b>"%}

{% formfield player.VG3_10 label="<b>Person A selects X with 100% chance and Y with 0% chance</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>2 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 must simultaneously choose between two possible actions: <b>action X</b> or <b>action Y</b>.
        The actions that the individuals choose will determine how much money they will earn.
        The payments that individuals can earn are determined as follows:
        <ul>
            <li>If at least one member of the group selects action X, all individuals who selected action Y earn 10€, and all individuals who selected action X earn 5€.</li>
            <li>If no member of the group selects action X, all individuals in the group earn 0€.</li>
        </ul>
        Since the decisions are made simultaneously, Person A does not know the decisions of the other members of the
        group. The other members of the group do not know Person A's decision, nor the decisions of the other individuals.
        <br>
        <br>
        For example, if Person A selects action X, Person A and all other individuals who also selected action X earn
        5€. On the other hand, all individuals who selected action Y earn 10€. If Person A selects action Y, Person A and all individuals
        who selected action Y earn 10€ if at least one individual in the group selected action X, and 0€ if no one
        in the group selected action X. Note that individuals who select action X will earn 5€, regardless
        of how many individuals in the group select action X.
        <br>
        <br>
        The decisions of the individuals will be made with the help of an <b>urn</b>.
        Each individual will have their own urn. Each individual must fill their urn with a total of five balls
        (which can be green or blue). A blue ball represents choosing action X, and a green ball represents choosing action Y.
        The balls determine the choices of the individuals. If an individual wants to choose X for
        sure, he/she must put five blue balls in the urn. If an individual wants to choose Y,
        he/she must put five green balls in the urn. If an individual wants to choose X with some probability,
        he/she must put green and blue balls in the urn. Each blue ball represents a 20% probability of choosing X,
        and each green ball represents a 20% probability of choosing Y. For example, if Person A puts two blue balls
        and three green balls in the urn, he/she will choose X with a 40% probability and Y with a 60% probability.
        Once all individuals have finished putting the balls in their urns, one ball from each urn will be randomly
        selected to determine the decision of each individual.
        <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 %}