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

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

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

.tg-choice th {
    height: 25px;
    text-align: center;
    vertical-align: middle;
}

.tg-choice td {
    border: 1px solid silver;
    height: 50px;
    padding: 0px 15px 0px 15px;
    text-align: left;
    vertical-align: middle;
}

input[type=radio] {
    margin-left: 3px;
    margin-top: -6px;
}

</style>

{% endblock %}

{% block title %}

Survey

{% endblock %}

{% block content %}

<p align="justify">
Consider the following interactive decision situation:
</p>

<br />

<div class="container_box">

<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" id="tg-col_b"> {% if player.roles_reversed == 0 %} 750 {% endif %} {% if player.roles_reversed == 1 %} 530 {% endif %} </td>
    <td class="tg-col-empty"> </td>
    <td class="tg-col-filled" id="tg-col_d"> {% if player.roles_reversed == 0 %} 530 {% endif %} {% if player.roles_reversed == 1 %} 640 {% endif %} </td>
  </tr>
  <tr>
    <td class="tg-row-filled" id="tg-row_a"> {% if player.roles_reversed == 0 %} 530 {% endif %} {% if player.roles_reversed == 1 %} 750 {% endif %} </td>
    <td class="tg-row-empty"> </td>
    <td class="tg-row-filled" id="tg-row_c"> {% if player.roles_reversed == 0 %} 420 {% endif %} {% if player.roles_reversed == 1 %} 420 {% endif %} </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" id="tg-col_f"> {% 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_h"> {% if player.roles_reversed == 0 %} 640 {% endif %} {% if player.roles_reversed == 1 %} 530 {% endif %} </td>
  </tr>
  <tr>
    <td class="tg-row-filled" id="tg-row_e"> {% if player.roles_reversed == 0 %} 640 {% endif %} {% if player.roles_reversed == 1 %} 530 {% endif %} </td>
    <td class="tg-row-empty"> </td>
    <td class="tg-row-filled" id="tg-row_g"> {% if player.roles_reversed == 0 %} 530 {% endif %} {% if player.roles_reversed == 1 %} 640 {% endif %} </td>
    <td class="tg-row-empty"> </td>
  </tr>
</table>

</center>

</div>

<br/>
<br/>

<p align="justify">
<b> Rank the four possible outcomes </b> according to your preferences.
Assign 1 to your most preferred outcome, assign 2 to your second-most preferred outcome, and so on.
If you are indifferent between two outcomes, assign the same number to both of them.
Note that the ranking does not affect your earnings in any way.
</p>

<br />

<center>

<table class="tg-choice">
  <tr>
    <th rowspan="2" style="font-weight: normal"> <i> You prefer... </i> </th>
    <th style="width: 50px; font-weight: normal"> <i> Most </i> </th>
    <th style="width: 50px"> </th>
    <th style="width: 50px"> </th>
    <th style="width: 50px; font-weight: normal"> <i> Least </i> </th>
  </tr>
  <tr>
    <th style="width: 50px"> 1 </th>
    <th style="width: 50px"> 2 </th>
    <th style="width: 50px"> 3 </th>
    <th style="width: 50px"> 4 </th>
  </tr>
  {% for field in form %}
  <tr>
    <td> {{ field.label }} </td>
    {% for choice in field %}
    <td> {{ choice.tag }} </td>
    {% endfor %}
  </tr>
  {% endfor %}
</table>

</center>

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