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

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

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

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

<br>
<div class="results" align="justify">
    <p>
        How would you describe yourself: Do you generally think things over for a long time before acting – in other
        words, are you not impulsive at all? Or do you generally act without thinking things over for long, in other
        words, are you very impulsive?
        <br><br>
        Please answer on a scale from 0 to 10, where 0 means not at all impulsive and 10 means very impulsive.
    </p>
    <table style="width: 100%" class="table text-center">
        <tbody>
            <form>
                <tr>
                    <td>
                        not at all impulsive
                    </td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>
                        very impulsive
                    </td>
                </tr>
                <tr>
                    {% for choice in form.impulsive %}
                    <td>
                        <label class="impulsive-labels"
                            for="impulsive_{{forloop.counter}}">{{choice.choice_label}}</label>
                    </td>
                    {% endfor %}
                </tr>
                <br>
                <tr>
                    {% for choice in form.impulsive %}
                    <td>
                        <input class="impulsive-choices" id="impulsive_{{forloop.counter}}" name="impulsive"
                            type="radio" value={{choice.choice_label}} />
                    </td>
                    {% endfor %}
                </tr>
            </form>
        </tbody>
    </table>
</div>
<br>
<br>
<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(".impulsive-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 %}