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

{% block title %}

{% endblock %}

{% block styles %}
<style>
.otree-btn-next {
    float: right;
}
.form-check-input {
    position: relative;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto
}
.col-form-label {
    font-weight:bold;
}
p{
    text-align: justify;
    text-justify: inter-word;
}
.info {
    padding: 15px 15px 0px 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
</style>
{% endblock %}

{% block content %}
<div class="card info">
<p>
    Please tell me, in general, how willing or unwilling you are to take risks. Please use a scale
    from 0 to 10, where 0 means <q>completely unwilling to take risks</q> and a 10 means
    you are <q>very willing to take risks.</q> You can also use any numbers between 0 and 10 to
    indicate where you fall on the scale, like 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, or 10.
</p>
{% for field in form %}
{% if forloop.counter == 1 %}

<div class="table-responsive" >
<table class="table">
    <tr>
        <td align="Center" style="width:25%">Completely unwilling to take risks</td>
            {% for choice in field %}
            {% if forloop.counter <= 10 %}
        <td align="Center"> {{ choice }} <div style="margin: 0; text-align: Center;"> {{forloop.counter|add:"-1"}} </div> </td>
            {% elif forloop.counter > 10 %}
        <td align="Center"> {{ choice }} <div style="margin: 0; text-align: center;"> {{forloop.counter|add:"-1"}} </div> </td>
            {% endif %}
            {% endfor %}
        <td align="Center" style="width:25%">Very willing to take risks</td>
    </tr>
</table>
{% endif %}

{% endfor %}
</div>
</div>
<br><br>
<div style="display:inline-block; margin:0; float: left;"> </div> <button onclick="endPage()" class="otree-btn-next btn btn-primary"> Next </button>
<br><br>
<input type="hidden" name="Risk_time" id="Risk_time" step="0.000001">

{% endblock %}

{% block scripts %}
<script>

$(document).ready(function() {
    startpage_time = Date.now();
});

function endPage() {
    var endpage_time = Date.now();
    page_time = (endpage_time - startpage_time)/1000;
    document.getElementById('Risk_time').value=page_time;
};

</script>
{% endblock %}