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

{% block styles %}

<style>

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

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

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

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

Questionnaire

{% endblock %}

{% block content %}

<p align="justify">
Consider the following choice situation.
</p>

<div class="container_box">

<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" id="tg-col_b"> {% if player.roles_reversed == 0 %} 200 {% endif %} {% if player.roles_reversed == 1 %} 260 {% endif %} </td>
    <td class="tg-col-empty"> </td>
    <td class="tg-col-filled" id="tg-col_d"> {% if player.roles_reversed == 0 %} 170 {% endif %} {% if player.roles_reversed == 1 %} 200 {% endif %} </td>
    <th> </th>
  </tr>
  <tr>
    <td class="tg-row-filled" id="tg-row_a"> {% if player.roles_reversed == 0 %} 260 {% endif %} {% if player.roles_reversed == 1 %} 200 {% endif %} </td>
    <td class="tg-row-empty"> </td>
    <td class="tg-row-filled" id="tg-row_c"> {% if player.roles_reversed == 0 %} 230 {% endif %} {% if player.roles_reversed == 1 %} 170 {% endif %} </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" id="tg-col_f"> {% if player.roles_reversed == 0 %} 170 {% endif %} {% if player.roles_reversed == 1 %} 230 {% endif %} </td>
    <td class="tg-col-empty"> </td>
    <td class="tg-col-filled" id="tg-col_h"> {% if player.roles_reversed == 0 %} 230 {% endif %} {% if player.roles_reversed == 1 %} 140 {% endif %} </td>
    <th> </th>
  </tr>
  <tr>
    <td class="tg-row-filled" id="tg-row_e"> {% if player.roles_reversed == 0 %} 200 {% endif %} {% if player.roles_reversed == 1 %} 170 {% endif %} </td>
    <td class="tg-row-empty"> </td>
    <td class="tg-row-filled" id="tg-row_g"> {% if player.roles_reversed == 0 %} 140 {% endif %} {% if player.roles_reversed == 1 %} 230 {% endif %} </td>
    <td class="tg-row-empty"> </td>
    <th> </th>
  </tr>
</table>

</center>

</div>

<br />

<p align="justify">
1. <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 or more outcomes, assign the same number to all 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.visible_fields|slice:":4" %}
  <tr>
    <td> {{ field.label }} </td>
    {% for choice in field %}
    <td> {{ choice.tag }} </td>
    {% endfor %}
  </tr>
  {% endfor %}
</table>

</center>

<br />
<br />

<p align="justify">
2. <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 or more outcomes, assign the same number to all 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.visible_fields|slice:"4:" %}
  <tr>
    <td> {{ field.label }} </td>
    {% for choice in field %}
    <td> {{ choice.tag }} </td>
    {% endfor %}
  </tr>
  {% endfor %}
</table>

</center>

<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("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.colors_reversed|json }} == 1 & {{ player.roles_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 %}