{% 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 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 and Person B will each make a choice. The experimenter will record these choices and then inform both individuals of the choices made by the other.
        They will receive a payment based on the choices they made. 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>
        Person A must choose between two actions: <b>action A1</b> and <b>action A2</b>. Person B must choose between two actions: <b>action B1</b> and <b>action B2</b>. Individuals decide their actions simultaneously.
        The actions that the individuals choose will determine how much money Person A and Person B will earn.
        The payments that individuals can receive are determined as follows:
                <ul>
                    <li>If Person A selects action <b>A1</b> and Person B selects action <b>B1</b>, then Person A and Person B earn 7€ each.</li>
                    <li>If Person A selects action <b>A1</b> and Person B selects action <b>B2</b>, then Person A earns 0€ and Person B earns 12€.</li>
                    <li>If Person A selects action <b>A2</b> and Person B selects action <b>B1</b>, then Person A earns 12€ and Person B earns 0€.</li>
                    <li>If Person A selects action <b>A2</b> and Person B selects action <b>B2</b>, then Person A and Person B earn 4€ each.</li>
                </ul>
        Since the decisions are taken simultaneously, Person A does not know the decision of Person B once making his/her decision.
        Person B does not know the decision of Person A once making his/her decision.
        <br>
        <br>
        You can find an overview of the situation here:
        <br>
        <br>
          <img src="https://i.imgur.com/NmUvDkZ.png" width="800" height="520px" />
        <br>
        <br>
        In the previous table, rows represent the available actions for Person A, while the columns represent the available actions for Person B.
        Each cell in the table displays the corresponding monetary outcomes for each combination of actions selected by both individuals. The blue number in each cell represents the money earned by Person A and the orange number represents the money earned by Person B.
        <br>
        <br>
        Before you evaluate the actions of Person A please answer the following comprehension questions:
        <br>
        <br>
        {% formfield player.PD1_01 %}
        {% formfield player.PD1_02 %}
        <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 }}