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

Instructions Part 1: Presentation

{% endblock %}

{% block content %}

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

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

interaction partners 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">
The two types of decision situations are presented in no particular order.
To clearly differentiate between them, the choice situations are titled <b> "Choice" </b> and the estimation situations are titled <b> "Estimate"</b>.
</p>

<p align="justify">
<b> Determination of Earnings </b> <br />
If Part 1 is selected to determine your final earnings, the computer randomly selects one of the 16 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 two practice situations.
In these practice situations, your decisions do 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 %}