{% extends "global/Page.html" %}
{% load otree %}
{% block styles %}
<style>
            #selected_1 {
background-color:  #41a9ef;
            }

            #selected_2 {
background-color: #efe341;
            }

                        #selected_3 {
background: repeating-linear-gradient(
  45deg,
  #41a9ef,
  #41a9ef 10px,
  #efe341 10px,
  #efe341 20px
);
            }

table, th, td {
  border: 1px solid grey;
    text-align: center;
}
table{
    width: 60%;
    alignment: center;
}

td{
width: 15em;
height: 4em;

}
</style>
{% endblock %}

{% block title %}
    您是如何做决策的?
{% endblock %}

{% block content %}
    <p>
    <br>
    您刚刚做出了类似于下方图示的多个决策。下面我们会问几个关于您如何做决策的问题。注意这里没有正确或者错误的回答。我们只是单纯地想了解您是如何做决策的。
    </p>
    <br>

    <div align="center">
             <table>
        <tr>
        <td>

        </td>
            {% for ff, ft, p in fields %}
                <td {% if 1 >= ff %}
                    id="selected_2"
                    {% endif %}>
               区域 <br>
                {{ ff }}-{{ ft }} <br>
                    ({{ p }}%)
                </td>
            {% endfor %}
    </tr>
    <tr>
        <td id="selected_1">

        <input type="radio" id="A" name="skewed" disabled >
        <label for="A">选项 A </label><br>

        </td>
            {% for o in oo_1 %}
                <td {% if o == 20 %}
                    id="selected_3"
                    {% else %}
                    id="selected_1"
                    {% endif %}>
                {{ o }}
                </td>
            {% endfor %}
    </tr>
        <tr>
        <td>

        <input type="radio" id="B" name="skewed" disabled >
        <label for="B">选项 B </label><br>

        </td>
            {% for o in oo_2 %}
                <td {% if o == 30 %}
                    id="selected_2"
                    {% endif %}>
                {{ o }}
                </td>
            {% endfor %}
    </tr>


    </table>
    </div>
    <p>
    <br>
    <br>
    在上方的表格内，垂直对齐的单元格构成一列，水平对齐的单元格构成一行。例如，上方表格中的黄色单元格形成一列，而蓝色单元格形成一行。
    接下来请指出以下声明哪个更适符合您的决策方式。
    </p>
        {% formfields %}

<button class="nexttab btn-primary btn next">下一步</button>

{% endblock %}