{% 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, 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>
        Before you evaluate the actions of Person A please answer the following comprehension questions:
        <br>
        <br>
        {% formfield player.KonowA1 %}
        {% formfield player.KonowA2 %}
        <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 }}