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

{% block title %}

Part 3B

{% endblock %}

{% block content %}

<br />

<center>

<table class="table" style="border-bottom: 1px solid #DCDCDC">
    <tr>
        <th> </th>
        <th> </th>
        <th colspan="2" style="text-align: center"> The Other Participant's Choice </th>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td style="text-align: center"> Option A </td>
        <td style="text-align: center"> Option B </td>
    </tr>
    <tr>
        <th rowspan="2" style="text-align: center; vertical-align: middle"> Your Choice </th>
        <td style="text-align: center"> Option A </td>
        <td style="text-align: center"> &pound;30, &pound;30 </td>
        <td style="text-align: center"> &pound;30, &pound;70 </td>
    </tr>
    <tr>
        <td style="text-align: center"> Option B </td>
        <td style="text-align: center"> &pound;70, &pound;30 </td>
        <td style="text-align: center"> &pound;0, &pound;0 </td>
    </tr>
</table>

</center>

<p align="center">
    <i> Table 1: Possible Results </i>
</p>

<br />

<p align="justify">
    First of all, <b> rank the four possible results according to your preferences</b>.
    Assign 1 to the best result, assign 2 to the second-best result, and so on.
    If you are indifferent between two results, assign the same number to both of them.
    Note that this ranking does not affect your (possible) bonus payment in any way.
</p>

<br />

<center>

<table class="table" style="border-bottom: 1px solid #DCDCDC">
    <tr>
        <td> </td>
        <td colspan="2" style="text-align: left"> <i> Best </i> </td>
        <td colspan="2" style="text-align: right"> <i> Worst </i> </td>
    </tr>
    <tr>
        <th> </th>
        <th style="width: 50px; text-align: center"> 1 </th>
        <th style="width: 50px; text-align: center"> 2 </th>
        <th style="width: 50px; text-align: center"> 3 </th>
        <th style="width: 50px; text-align: center"> 4 </th>
    </tr>
    {% for field in form %}
    <tr>
        <td style="text-align: left"> {{ field.label }} </td>
        {% for choice in field %}
        <td style="text-align: right"> {{ choice.tag }} </td>
        {% endfor %}
    </tr>
    {% endfor %}
</table>

</center>

<br />

<center> {% next_button %} </center>

{% endblock %}