{% extends "global/Page.html" %} {% load otree static %} {% block styles %} {% endblock %} {% block scripts %} {% endblock %} {% block title %} {% endblock %} {% block content %}

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

<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>15 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, 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>
        Before you evaluate the actions of Person A please answer the following comprehension questions in the next page.
        <br>
        <br>
        {% formfield player.VG16_01 %}
        {% formfield player.VG16_02 %}
        {% formfield player.VG16_03 %}
        <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 &nbsp &nbsp &nbsp
        <button class="btn btn-primary">Next</button>
    </p>
    </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 }}