{% 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>only</b> Person B participates in a task for 30 minutes. Person A does not have the opportunity to participate in this task. When Person B participates in this stage, he/she does not know about the existence of the second stage.
        <br>
        <br>
        In the task of the first stage, Person B is presented with several tables containing only 1s and 0s. <b>Person B has to indicate the number of 0s in each table</b>. 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>
        Person B earns 0.50€ for each correct answer he/she provides. This task has a total duration of 30 minutes. At the end of this task,
        Person B has correctly indicated the number of 0s in 20 tables. Therefore, <b>Person B has earned (20 x 0.50€ =) 10€</b>.
        <br>
        <br>
        In the second stage, <b>Person A has the opportunity to give any amount of the 10€ earned by Person B 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.EarnR1 %}
        {% formfield player.EarnR2 %}
        {% formfield player.EarnR3 %}
    </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 }}