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

{% block styles %}

<style>

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

.tg {
    height: 250px;
    table-layout: fixed;
    width: 540px;
}

.tg th {
    border: none;
    color: black;
    font-size: 20px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
}

.tg td {
    font-size: 20px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
}

.tg .tg-row-filled {
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: none;
    border-top: none;
    color: blue;
}

.tg .tg-row-empty {
    border-bottom: 1px solid black;
    border-left: none;
    border-right: 1px solid black;
    border-top: none;
}

.tg .tg-col-filled {
    border-bottom: none;
    border-left: none;
    border-right: 1px solid black;
    border-top: 1px solid black;
    color: red;
}

.tg .tg-col-empty {
    border-bottom: none;
    border-left: 1px solid black;
    border-right: none;
    border-top: 1px solid black;
}

</style>

{% endblock %}

{% block title %}

Specific Instructions

{% 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">
The experiment consists of a number of <b> decision situations</b>.
In every decision situation, you have to <b> choose between two options</b>.
The outcome of the decision situation is determined by your choice and the choice of your

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

interaction partner.
</p>

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

<div class="container_box">

<center>

<table class="tg">
  <tr>
    <th> </th>
    <th colspan = "2"> L </th>
    <th colspan = "2"> R </th>
    <th> </th>
  </tr>
  <tr>
    <th rowspan = "2"> U </th>
    <td class="tg-col-empty"> </td>
    <td class="tg-col-filled" id="tg-col_b"> {% if player.roles_reversed == 0 %} 420 {% endif %} {% if player.roles_reversed == 1 %} 420 {% endif %} </td>
    <td class="tg-col-empty"> </td>
    <td class="tg-col-filled" id="tg-col_d"> {% if player.roles_reversed == 0 %} 330 {% endif %} {% if player.roles_reversed == 1 %} 330 {% endif %} </td>
    <th> </th>
  </tr>
  <tr>
    <td class="tg-row-filled" id="tg-row_a"> {% if player.roles_reversed == 0 %} 420 {% endif %} {% if player.roles_reversed == 1 %} 420 {% endif %} </td>
    <td class="tg-row-empty"> </td>
    <td class="tg-row-filled" id="tg-row_c"> {% if player.roles_reversed == 0 %} 870 {% endif %} {% if player.roles_reversed == 1 %} 870 {% endif %} </td>
    <td class="tg-row-empty"> </td>
    <th> </th>
  </tr>
  <tr>
    <th rowspan = "2"> D </th>
    <td class="tg-col-empty"> </td>
    <td class="tg-col-filled" id="tg-col_f"> {% if player.roles_reversed == 0 %} 870 {% endif %} {% if player.roles_reversed == 1 %} 870 {% endif %} </td>
    <td class="tg-col-empty"> </td>
    <td class="tg-col-filled" id="tg-col_h"> {% if player.roles_reversed == 0 %} 780 {% endif %} {% if player.roles_reversed == 1 %} 780 {% endif %} </td>
    <th> </th>
  </tr>
  <tr>
    <td class="tg-row-filled" id="tg-row_e"> {% if player.roles_reversed == 0 %} 330 {% endif %} {% if player.roles_reversed == 1 %} 330 {% endif %} </td>
    <td class="tg-row-empty"> </td>
    <td class="tg-row-filled" id="tg-row_g"> {% if player.roles_reversed == 0 %} 780 {% endif %} {% if player.roles_reversed == 1 %} 780 {% endif %} </td>
    <td class="tg-row-empty"> </td>
    <th> </th>
  </tr>
</table>

</center>

</div>

<br />

<p align="center">
<i> Figure 1. </i> Example Situation
</p>

<br />

<p align="justify">
In the decision situations, the numbers indicate the <b> number of points you and your

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

interaction partner can earn </b> with your choices.
</p>

{% if player.roles_reversed == 0 %}

<p align="justify">
<b> You </b> are the <b> COLUMN PARTICIPANT</b>.
You can choose either column LEFT (<b>"L"</b>) or column RIGHT (<b>"R"</b>).
Your

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

interaction partner is the <b> ROW PARTICIPANT</b>.
He or she can choose either row UP (<b>"U"</b>) or row DOWN (<b>"D"</b>).
</p>

{% endif %}

{% if player.roles_reversed == 1 %}

<p align="justify">
<b> You </b> are the <b> ROW PARTICIPANT</b>.
You can choose either row UP (<b>"U"</b>) or row DOWN (<b>"D"</b>).
Your

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

interaction partner is the <b> COLUMN PARTICIPANT</b>.
He or she can choose either column LEFT (<b>"L"</b>) or column RIGHT (<b>"R"</b>).
</p>

{% endif %}

{% if player.roles_reversed == 0 %}

<p align="justify">
Every possible combination of choices of the COLUMN PARTICIPANT (you) and the ROW PARTICIPANT (your

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

interaction partner) selects one cell in the table.
Every cell contains two numbers.
The number at the <b> top </b> of the cell represents the earnings of the <b> COLUMN PARTICIPANT </b> (you).
The number at the <b> bottom </b> of the cell represents the earnings of the <b> ROW PARTICIPANT </b> (your

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

interaction partner).
</p>

{% endif %}

{% if player.roles_reversed == 1 %}

<p align="justify">
Every possible combination of choices of the ROW PARTICIPANT (you) and the COLUMN PARTICIPANT (your

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

interaction partner) selects one cell in the table.
Every cell contains two numbers.
The number at the <b> bottom </b> of the cell represents the earnings of the <b> ROW PARTICIPANT </b> (you).
The number at the <b> top </b> of the cell represents the earnings of the <b> COLUMN PARTICIPANT </b> (your

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

interaction partner).
</p>

{% endif %}

<p align="justify" style="border: 1px solid black; padding: 5px 10px 5px 10px">
<u> Example:</u> If, in the example situation, you choose

{% if player.roles_reversed == 0 %} <b> L </b> {% endif %}
{% if player.roles_reversed == 1 %} <b> U </b> {% endif %}

and your

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

interaction partner chooses

{% if player.roles_reversed == 0 %} <b> U</b>, {% endif %}
{% if player.roles_reversed == 1 %} <b> L</b>, {% endif %}

you earn 420 points and your

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

interaction partner earns 420 points.
If you choose

{% if player.roles_reversed == 0 %} <b> R </b> {% endif %}
{% if player.roles_reversed == 1 %} <b> D </b> {% endif %}

and your

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

interaction partner chooses

{% if player.roles_reversed == 0 %} <b> D</b>, {% endif %}
{% if player.roles_reversed == 1 %} <b> R</b>, {% endif %}

you earn 780 points and your

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

interaction partner earns 780 points.
</p>

<p align="justify">
Bear in mind that you cannot directly choose a cell in the table, but only one of the

{% if player.roles_reversed == 0 %} columns, {% endif %}
{% if player.roles_reversed == 1 %} rows, {% endif %}

and that you have to make your choice <b> without knowing the choice of your

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

interaction partner</b>.
Similarly, your

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

interaction partner has to make his or her choice without knowing yours.
</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 }} == 0 & {{ player.roles_reversed|json }} == 1) {

    document.getElementById("tg-row_a").style.color = "red";
    document.getElementById("tg-row_c").style.color = "red";
    document.getElementById("tg-row_e").style.color = "red";
    document.getElementById("tg-row_g").style.color = "red";

    document.getElementById("tg-col_b").style.color = "blue";
    document.getElementById("tg-col_d").style.color = "blue";
    document.getElementById("tg-col_f").style.color = "blue";
    document.getElementById("tg-col_h").style.color = "blue";

}

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

    document.getElementById("tg-row_a").style.color = "red";
    document.getElementById("tg-row_c").style.color = "red";
    document.getElementById("tg-row_e").style.color = "red";
    document.getElementById("tg-row_g").style.color = "red";

    document.getElementById("tg-col_b").style.color = "blue";
    document.getElementById("tg-col_d").style.color = "blue";
    document.getElementById("tg-col_f").style.color = "blue";
    document.getElementById("tg-col_h").style.color = "blue";

}

</script>

{% endblock %}