{% extends "global/Page.html" %}
{% load otree static %}

{% block styles %}

<style>

.container_box {
    border: none;
    height: 225px;
    margin: auto;
    position: relative;
    width: 450px;
}

.tg {
    height: 225px;
    table-layout: fixed;
    width: 450px;
}

.tg th {
    border-bottom: 1px solid black;
    border-left: none;
    border-right: none;
    border-top: 1px solid black;
    color: black;
    font-size: 20px;
    height: 75px;
    text-align: center;
    vertical-align: middle;
}

.tg td {
    border-bottom: 1px solid black;
    border-left: none;
    border-right: none;
    border-top: 1px solid black;
    font-size: 20px;
    height: 75px;
    text-align: center;
    vertical-align: middle;
}

.tg .tg-own {
    color: blue;
}

.tg .tg-other {
    color: red;
}

</style>

{% endblock %}

{% block title %}

Instructions

{% if player.randomized_order == 213 or player.randomized_order == 231 %} Part 1 {% endif %}
{% if player.randomized_order == 123 or player.randomized_order == 321 %} Part 2 {% endif %}
{% if player.randomized_order == 132 or player.randomized_order == 312 %} Part 3 {% endif %}

{% endblock %}

{% block content %}

{% if player.cq_error %}

<p align="justify" style="border: 1px solid red; color: red; padding: 5px 10px 5px 10px">
<i> You did not answer all comprehension questions correctly.
Please read the instructions again and correct your answers. </i>
</p>

{% endif %}

<p align="justify">

{% if player.randomized_order == 213 or player.randomized_order == 231 %} Part 1 {% endif %}
{% if player.randomized_order == 123 or player.randomized_order == 321 %} Part 2 {% endif %}
{% if player.randomized_order == 132 or player.randomized_order == 312 %} Part 3 {% endif %}

consists of <b> 39 decision situations</b>.
In every decision situation, you have to <b> choose between two distributions</b>, named <b> Distribution X </b> and <b> Distribution Y</b>.
</p>

<p align="justify">
Every distribution allocates a certain number of points to you (<b>"You"</b>) and a certain number of points to a

{% if player.colors_reversed == 0 %} red {% endif %}
{% if player.colors_reversed == 1 %} blue {% endif %}

matching partner (<b>"Other"</b>).
In every decision situation, you are randomly matched with a different matching partner.

{% if player.randomized_order == 123 or player.randomized_order == 132 or player.randomized_order == 312 %}

These matching partners are also different from your interaction partners in

{% if player.randomized_order == 123 %} Part 1. {% endif %}
{% if player.randomized_order == 132 %} Part 1. {% endif %}
{% if player.randomized_order == 312 %} Part 2. {% endif %}

{% endif %}

</p>

<p align="justify">
Every decision situation is depicted in a table that looks like the following example table:
</p>

<br />

<div class="container_box">

<center>

<table class="tg">
  <tr>
    <th> </th>
    <th> You </th>
    <th> Other </th>
  </tr>
  <tr>
    <th> Distribution X </th>
    <td class="tg-own" id="tg-own_x"> 1040 </td>
    <td class="tg-other" id="tg-other_x"> 410 </td>
  </tr>
  <tr>
    <th> Distribution Y </th>
    <td class="tg-own" id="tg-own_y"> 850 </td>
    <td class="tg-other" id="tg-other_y"> 600 </td>
  </tr>
</table>

</center>

</div>

<br />

<p align="center">
<i> Table 1: Numerical Example </i>
</p>

<br />

<p align="justify">
In every decision situation, you and your

{% if player.colors_reversed == 0 %} red {% endif %}
{% if player.colors_reversed == 1 %} blue {% endif %}

matching partner <b> earn the number of points that correspond to <u> your</u> chosen distribution</b>.
Your

{% if player.colors_reversed == 0 %} red {% endif %}
{% if player.colors_reversed == 1 %} blue {% endif %}

matching partners <b> do <u> not</u> make any decisions </b> in this part of the experiment.
</p>

<p align="justify" style="border: 1px solid black; padding: 5px 10px 5px 10px">
<u> Example:</u> If, in the numerical example, you choose Distribution X, you earn 1040 points and your

{% if player.colors_reversed == 0 %} red {% endif %}
{% if player.colors_reversed == 1 %} blue {% endif %}

matching partner earns 410 points.
</p>

<p align="justify">
<b> Determination of Earnings: </b> <br />
If

{% if player.randomized_order == 213 or player.randomized_order == 231 %} Part 1 {% endif %}
{% if player.randomized_order == 123 or player.randomized_order == 321 %} Part 2 {% endif %}
{% if player.randomized_order == 132 or player.randomized_order == 312 %} Part 3 {% endif %}

is selected to determine your final earnings, the computer randomly selects one of the 39 decision situations.
Your final earnings are then determined by the number of points you earned in the selected decision situation.
</p>

<p align="justify">
<i> Once you have understood these instructions, press "Next" to continue to the comprehension questions. </i>
</p>

<br />

<button class="btn btn-primary btn-large" style="float: right"> Next </button>

{% endblock %}

{% block scripts %}

<script>

if ({{ player.colors_reversed|json }} == 1) {

    document.getElementById("tg-own_x").style.color = "red";
    document.getElementById("tg-own_y").style.color = "red";

    document.getElementById("tg-other_x").style.color = "blue";
    document.getElementById("tg-other_y").style.color = "blue";

}

</script>

{% endblock %}