{% 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;
}

#target_a {
    background: white;
    border: 1px solid blue;
    border-radius: 50%;
    height: 40px;
    left: 115px;
    position: absolute;
    top: 100px;
    width: 40px;
}

#target_b {
    background: white;
    border: 1px solid red;
    border-radius: 50%;
    height: 40px;
    left: 205px;
    position: absolute;
    top: 60px;
    width: 40px;
}

#target_c {
    background: white;
    border: 1px solid blue;
    border-radius: 50%;
    height: 40px;
    left: 295px;
    position: absolute;
    top: 100px;
    width: 40px;
}

#target_d {
    background: white;
    border: 1px solid red;
    border-radius: 50%;
    height: 40px;
    left: 385px;
    position: absolute;
    top: 60px;
    width: 40px;
}

#target_e {
    background: white;
    border: 1px solid blue;
    border-radius: 50%;
    height: 40px;
    left: 115px;
    position: absolute;
    top: 200px;
    width: 40px;
}

#target_f {
    background: white;
    border: 1px solid red;
    border-radius: 50%;
    height: 40px;
    left: 205px;
    position: absolute;
    top: 160px;
    width: 40px;
}

#target_g {
    background: white;
    border: 1px solid blue;
    border-radius: 50%;
    height: 40px;
    left: 295px;
    position: absolute;
    top: 200px;
    width: 40px;
}

#target_h {
    background: white;
    border: 1px solid red;
    border-radius: 50%;
    height: 40px;
    left: 385px;
    position: absolute;
    top: 160px;
    width: 40px;
}

</style>

{% endblock %}

{% block title %}

Specific Instructions

{% endblock %}

{% block content %}

<p align="justify">
The decision situations are presented to you and your

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

interaction partner in the same way as the example situation depicted in <i> Figure 2</i>.
</p>

<div class="container_box">

<div id="target_a"> </div>
<div id="target_b"> </div>
<div id="target_c"> </div>
<div id="target_d"> </div>
<div id="target_e"> </div>
<div id="target_f"> </div>
<div id="target_g"> </div>
<div id="target_h"> </div>

<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"> </td>
    <td class="tg-col-empty"> </td>
    <td class="tg-col-filled"> </td>
    <th> </th>
  </tr>
  <tr>
    <td class="tg-row-filled"> </td>
    <td class="tg-row-empty"> </td>
    <td class="tg-row-filled"> </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"> </td>
    <td class="tg-col-empty"> </td>
    <td class="tg-col-filled"> </td>
    <th> </th>
  </tr>
  <tr>
    <td class="tg-row-filled"> </td>
    <td class="tg-row-empty"> </td>
    <td class="tg-row-filled"> </td>
    <td class="tg-row-empty"> </td>
    <th> </th>
  </tr>
</table>

</center>

</div>

<br />

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

<br />

<p align="justify">
The numbers in the table are covered by circles.
To view a particular number, you need to click on the corresponding circle.
The number remains visible as long as you do not click on another circle.
After you have clicked on another circle, the previous number remains visible for one additional second.
You may click on the circles as many times as you want.
</p>

<p align="justify" style="border: 1px solid black; padding: 5px 10px 5px 10px">
<u> Important:</u> Clicking on the circles <b> does <u> not</u> affect your earnings </b> in any way.
</p>

<p align="justify">
<b> Determination of Earnings </b> <br />
At the end of the experiment, the computer randomly selects one of the 8 decision situations.
Your bonus payment is 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 bonus payment.
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 a practice situation.
In this practice situation, your decision does not affect your earnings in any way. </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("target_a").style.border = "1px solid red";
    document.getElementById("target_c").style.border = "1px solid red";
    document.getElementById("target_e").style.border = "1px solid red";
    document.getElementById("target_g").style.border = "1px solid red";

    document.getElementById("target_b").style.border = "1px solid blue";
    document.getElementById("target_d").style.border = "1px solid blue";
    document.getElementById("target_f").style.border = "1px solid blue";
    document.getElementById("target_h").style.border = "1px solid blue";

}

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

    document.getElementById("target_a").style.border = "1px solid red";
    document.getElementById("target_c").style.border = "1px solid red";
    document.getElementById("target_e").style.border = "1px solid red";
    document.getElementById("target_g").style.border = "1px solid red";

    document.getElementById("target_b").style.border = "1px solid blue";
    document.getElementById("target_d").style.border = "1px solid blue";
    document.getElementById("target_f").style.border = "1px solid blue";
    document.getElementById("target_h").style.border = "1px solid blue";

}

</script>

{% endblock %}