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

<style>
    .tab {
        display: none;
    }
</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 paired with another participant, Person B.
        The pairing is anonymous, meaning that none of the participants will ever 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
        Person B will be informed of the choice and both will be 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 in <b>two different stages</b>. In the first stage,
        Person B participates in a task during 30 minutes. Person A did 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 first stage, <b>Person B has to indicate the number of 0s that a table composed of only 1s and 0s contains</b>. You have one example of a table below.
        </p>
         <div style="text-align: center;">
            <img src="https://i.imgur.com/ZSqhVQB.png" width="600" height="200px" />
         </div>
        <br>
        For each correct answer Person B gives he/she earns 0.50€. This task has a total duration of 30 minutes. Once the 30 minutes concluded,
        Person B has answered correctly 20 tables. Therefore, <b>Person B has earned (20 * 0.50€ =) 10€</b>.
        <br>
        <br>
        In the second stage, <b>Person A has the opportunity to give any amount of the 10€ Person B earned 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>
          <img src="https://i.imgur.com/97EnSWa.png" width="900px" height="200px" />
        <br>
        <br>
        Please make sure you understand the situation.
        <br>
        <br>
        {% formfield player.Q1 %}
        <br>
        <br>
        Before you evaluate the actions of Person A please answer the following comprehension questions in the next page.
    </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
        <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 }}