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

{% block content %}

<style>
      table, td, th {
      padding: 15px;
      border: 1px solid #1c87c9;
      border-radius: 2px;
      text-align: center;
      }
</style>

<table style="border: 1px">
    <col width="300">
    <col width="100">
    <col width="90">
    <col width="90">
    <col width="90">
    <col width="90">
    <col width="90">
    <col width="90">
    <col width="90">
    <col width="90">
    <col width="90">
    <col width="100">
    <tr>
        <th></th>
        <th style="text-align: center">0 = Not at all willing to take risks</th>
        <th style="text-align: center">1</th>
        <th style="text-align: center">2</th>
        <th style="text-align: center">3</th>
        <th style="text-align: center">4</th>
        <th style="text-align: center">5</th>
        <th style="text-align: center">6</th>
        <th style="text-align: center">7</th>
        <th style="text-align: center">8</th>
        <th style="text-align: center">9</th>
        <th style="text-align: center">10 = Very willing to take risks</th>
    </tr>
    <tr>
        <th>{{ form.risk_preference.label }}</th>
        {% for choice in form.risk_preference %}
            <td align="center">{{ choice }}</td>
        {% endfor %}
    </tr>

</table>

<br>
<br>

    {% next_button %}



{% endblock %}