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

{% block styles %}

<style>

.container_box {
    border: 1px solid white;
    height: 150px;
    margin: auto;
    position: relative;
    width: 360px;
}

.tg {
    height: 150px;
    table-layout: fixed;
    width: 360px;
}

.tg th {
    border-bottom: 1px solid black;
    border-left: none;
    border-right: none;
    border-top: 1px solid black;
    color: black;
    font-size: 20px;
    height: 50px;
    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: 50px;
    text-align: center;
    vertical-align: middle;
}

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

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

</style>

{% endblock %}

{% block title %}

Instructions Part 2

{% 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">
Part 2 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>).
<b> In every decision situation, you are randomly matched with a different matching partner. </b>
These matching partners are also different from your interaction partners in Part 1.
</p>

<p align="justify">
Every decision situation is presented in the same way as the example situation depicted in <i> Figure 1</i>.
</p>

<br />

<div class="container_box">

<center>

<table class="tg">
  <tr>
    <th style="width: 180px"> </th>
    <th style="width: 90px"> You </th>
    <th style="width: 90px"> Other </th>
  </tr>
  <tr>
    <th style="border-bottom: 1px solid white"> Distribution X </th>
    <td class="tg-own" id="tg-own_x" style="border-bottom: 1px solid white"> 330 </td>
    <td class="tg-other" id="tg-other_x" style="border-bottom: 1px solid white"> 870 </td>
  </tr>
  <tr>
    <th style="border-top: 1px solid white"> Distribution Y </th>
    <td class="tg-own" id="tg-own_y" style="border-top: 1px solid white"> 420 </td>
    <td class="tg-other" id="tg-other_y" style="border-top: 1px solid white"> 780 </td>
  </tr>
</table>

</center>

</div>

<br />

<p align="center">
<i> Figure 1. </i> Example Situation
</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 example situation, you choose <b> Distribution X</b>, you earn 330 points and your

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

matching partner earns 870 points.
</p>

<p align="justify">
<b> Determination of Earnings </b> <br />
If Part 2 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" style="border: 1px solid black; padding: 5px 10px 5px 10px">
<u> Important:</u> When you make your decisions, you do not know which decision situation is selected to determine your final earnings.
Therefore, you should <b> consider every decision situation to be equally important </b> and make your decisions accordingly!
</p>

<p align="justify">
<i> Once you are certain that 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 %}