{% 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> Provide your <u> best estimate</u> of a randomly selected interaction partner's ranking </b> of the four possible outcomes.
Assign 1 to his or her most preferred outcome, assign 2 to his or her second-most preferred outcome, and so on.
If you believe that your interaction partner is 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> Your interaction partner prefers... </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 %}