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

{% block content %}


<p><b>
How difficult was it to perform the tasks?
</b></p>

{{ formfield 'difficulty' }}

<br><br>

<p><b>How certain are you that you performed them optimally?</b></p>

{{ formfield_errors 'difficulty_certainty' }}

<div class="certainty-container">
    <div class="certainty-scale">
        {% for v in certainty_values %}
            <label class="certainty-option">
                <input type="radio"
                       name="difficulty_certainty"
                       value="{{ v }}"
                       required>
                <span>{{ v }}%</span>
            </label>
        {% endfor %}
    </div>

    <div class="certainty-labels">
        <span class="left-label"><b>Very uncertain</b></span>
        <span class="right-label"><b>Completely certain</b></span>
    </div>
</div>

<style>
    .certainty-container {
        display: inline-block;
    }

    .certainty-scale {
        display: flex;
        flex-wrap: nowrap;
        gap: 18px;
        align-items: flex-start;
    }

    .certainty-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12px;
        white-space: nowrap;
    }

    .certainty-option span {
        margin-top: 3px;
        font-size: 11px;
        color: #444;
    }

    .certainty-labels {
        margin-top: 6px;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
    }
</style>

<br><br><br>

<button class="btn btn-primary">Continue</button>

{% endblock %}