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

{% block styles %}

<style>

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

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

.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;
}

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

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

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

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

</style>

{% endblock %}

{% block title %}

Instructions

{% if player.randomized_order == 21 %} Part 1: {% endif %}
{% if player.randomized_order == 12 %} Part 2: {% endif %}

Presentation

{% endblock %}

{% block content %}

<p align="justify">
The decision situations are presented in the same way as the example situation depicted in <i> Figure 2</i>.
</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>

<center>

<table class="tg">
  <tr>
    <th style="width: 150px"> </th>
    <th style="width: 112px"> You </th>
    <th style="width: 112px"> 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"> </td>
    <td class="tg-other" id="tg-other_x" style="border-bottom: 1px solid white"> </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"> </td>
    <td class="tg-other" id="tg-other_y" style="border-top: 1px solid white"> </td>
  </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, 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">
<b> Determination of Earnings </b> <br />
If

{% if player.randomized_order == 21 %} Part 1 {% endif %}
{% if player.randomized_order == 12 %} Part 2 {% endif %}

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 consider every decision situation to be equally important 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 }} == 1) {

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

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

}

</script>

{% endblock %}