{% 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.Konow_A1 label="<b>Person A gives 0€ to Person B</b>"%}

{% formfield player.Konow_A2 label="<b>Person A gives 1€ to Person B</b>"%}

{% formfield player.Konow_A3 label="<b>Person A gives 2€ to Person B</b>"%}

{% formfield player.Konow_A4 label="<b>Person A gives 3€ to Person B</b>"%}

{% formfield player.Konow_A5 label="<b>Person A gives 4€ to Person B</b>"%}

{% formfield player.Konow_A6 label="<b>Person A gives 5€ to Person B</b>"%}

{% formfield player.Konow_A7 label="<b>Person A gives 6€ to Person B</b>"%}

{% formfield player.Konow_A8 label="<b>Person A gives 7€ to Person B</b>"%}

{% formfield player.Konow_A9 label="<b>Person A gives 8€ to Person B</b>"%}

{% formfield player.Konow_A10 label="<b>Person A gives 9€ to Person B</b>"%}

{% formfield player.Konow_A11 label="<b>Person A gives 10€ to Person B</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, two participants, Person A and Person B, are randomly paired.
        The pairing is anonymous, meaning that neither participant will 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
        both Person A and Person B will be informed of the choice and 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>
        The experiment consists of <b>two stages</b>. In the first stage,
        <b>both</b> Person A and Person B participate in a task for 30 minutes. When Person A and Person B participate in this stage, they do not know about the existence of the second stage.
        <br>
        <br>
        In the task of the first stage, Person A and Person B are presented with tables containing only 1s and 0s. <b>Person A and Person B have to indicate the number of 0s in each table</b>. Person A and Person B will be making their decisions separately and independently of one another.
        They will each be observing their own set of tables with 1s and 0s, and providing their answers accordingly. An example of a table is provided below.
        </p>
         <div style="text-align: center;">
            <img src="https://i.imgur.com/pH47S6k.png" width="400" height="200px" />
         </div>
        <br>
        For each correct answer provided by Person A, he/she earns <b>0.40€</b>, while for each correct answer provided by Person B, he/she earns <b>0.10€</b>.
        The payments per correct answer assigned to Person A and Person B have been determined <b>randomly</b>. At the end of this task,
        Person A has correctly indicated the number of 0s in <b>20 tables</b>. Therefore, <b>Person A has earned (20 x 0.40€ =) 8€</b>. On the other hand,
        Person B has correctly indicated the number of 0s in <b>20 tables</b>. Therefore, <b>Person B has earned (20 x 0.10€ =) 2€</b>.
        <br>
        <br>
        In the second stage, the money earned by Person A and Person B is <b>pooled together</b>. Then, <b>Person A has the opportunity to give any amount of the (8 + 2 =)10€ earned by both individuals to Person B</b>.
        That is, 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>
            <div style="text-align: center;">
             <img src="https://i.imgur.com/HTUHl3M.png" width="1200px" height="300px" />
            </div>
        <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 %}