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

{% block styles %}

<style>

.container_box {
    border: none;
    height: 250px;
    margin: auto;
    position: relative;
    width: 375px;
}

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

.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;
    color: blue;
}

.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;
    color: red;
}

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

#target_b {
    background: white;
    border: 1px solid red;
    border-radius: 50%;
    height: 25px;
    left: 175px;
    position: absolute;
    top: 62.5px;
    width: 25px;
}

#target_c {
    background: white;
    border: 1px solid blue;
    border-radius: 50%;
    height: 25px;
    left: 250px;
    position: absolute;
    top: 112.5px;
    width: 25px;
}

#target_d {
    background: white;
    border: 1px solid red;
    border-radius: 50%;
    height: 25px;
    left: 325px;
    position: absolute;
    top: 62.5px;
    width: 25px;
}

#target_e {
    background: white;
    border: 1px solid blue;
    border-radius: 50%;
    height: 25px;
    left: 100px;
    position: absolute;
    top: 212.5px;
    width: 25px;
}

#target_f {
    background: white;
    border: 1px solid red;
    border-radius: 50%;
    height: 25px;
    left: 175px;
    position: absolute;
    top: 162.5px;
    width: 25px;
}

#target_g {
    background: white;
    border: 1px solid blue;
    border-radius: 50%;
    height: 25px;
    left: 250px;
    position: absolute;
    top: 212.5px;
    width: 25px;
}

#target_h {
    background: white;
    border: 1px solid red;
    border-radius: 50%;
    height: 25px;
    left: 325px;
    position: absolute;
    top: 162.5px;
    width: 25px;
}

</style>

{% endblock %}

{% block title %}

Instructions

{% if player.randomized_order == 13 %} Part 1: {% endif %}
{% if player.randomized_order == 31 %} Part 2: {% endif %}

Presentation

{% endblock %}

{% block content %}

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

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

interaction partners in the following way:
</p>

<br />

<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>
  </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>
  </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>
  </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>
  </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>
  </tr>
</table>

</center>

</div>

<br />

<p align="center">
<i> Table 3: Visual Example </i>
</p>

<br />

<p align="justify">
The numbers in the table are covered by circles.
To view a particular number, 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 an additional 1.5 seconds.
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 a random order.
To clearly differentiate between them, the interactive decision situations are titled <b> "Choice" </b> and the additional decision situations are titled <b> "Estimate"</b>.
This is important, as you <b> report your choice or estimate on a <u> separate</u> page</b>.
</p>

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

{% if player.randomized_order == 13 %} Part 1 {% endif %}
{% if player.randomized_order == 31 %} Part 2 {% endif %}

is selected to determine your final earnings, the computer randomly selects one of the 32 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 consider every decision situation to be equally important and make your decisions accordingly!
</p>

<p align="justify">
<i> Once you have understood these instructions, press "Next" to continue to two practice situations. </i>
</p>

<br />

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

{% endblock %}

{% block scripts %}

<script>

if ({{ player.roles_reversed|json }} == 0 & {{ player.colors_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.roles_reversed|json }} == 1 & {{ player.colors_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 %}