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

{% block content %}

<div class="progress">
    <div class="progress-bar" style="width: {{ progress }}%"></div>
</div>
<br>

<style>
    table {
        table-layout: fixed;
        width: 100%;
    }

    td {
        width: 25%;
    }
</style>

<div class="results" align="justify">
    <p>
        How do you see yourself: Are you generally a person who is fully prepared to take risks or do you try to avoid
        taking risks?
        <br><br>
        Please answer on a scale from 0 to 10, where 0 means completely unwilling to take risks, and 10 means fully
        prepared to
        take risks.
    </p>
    <table style="width: 100%" class="table text-center">
        <tbody>
            <form>
                <tr>
                    <td>
                        completely unwilling to take risks
                    </td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>
                        fully prepared to take risks
                    </td>
                </tr>
                <tr>
                    {% for choice in form.take_risks %}
                    <td>
                        <label class="take_risks-labels"
                            for="take_risks_{{forloop.counter}}">{{choice.choice_label}}</label>
                    </td>
                    {% endfor %}
                </tr>
                <br>
                <tr>
                    {% for choice in form.take_risks %}
                    <td>
                        <input class="take_risks-choices" id="take_risks_{{forloop.counter}}" name="take_risks"
                            type="radio" value={{choice.choice_label}} />
                    </td>
                    {% endfor %}
                </tr>
            </form>
        </tbody>
    </table>
</div>

<script>
    function alertFunction() {
        alert("In order for your answers to be most helpful to us, it is really important that you respond to all questions.")
        jQuery('.waiting').hide();
        jQuery('.next-button').show();
        return false
    }
    jQuery(".take_risks-choices").on("click", function () {
        jQuery(".next-button").show();
        jQuery(".waiting").hide();
    });
</script>

<div class="waiting" onclick="return alertFunction();">
    {% next_button %}
</div>

<div class="next-button">
    {% next_button %}
</div>

<script>jQuery(".next-button").hide();</script>

{% endblock %}