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

{% block title %}
Final Questions About Your Decision Process
{% endblock %}

{% block content %}

Thank you very much for completing the tasks! Before proceeding with the Payment, we would like to ask you a few questions about your experience during the experiment.
<br><br>

<p>
    Please describe how you made your predictions during the task. For example, did you have a general strategy or approach when:
</p>
<ul>
    <li>studying the trials and the machine's behavior, and/or</li>
    <li>deciding what to predict on each trial?</li>
</ul>

<div style="margin-top: 15px;">
    <label><b>Your description:</b></label>
    {{ form.prediction_strategy }}
</div>

<p style="margin-top: 10px; font-size: 0.9em; color: #666;">
    Please be as detailed as you can. There are no right or wrong answers here.
</p>

<br>

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

{{ formfield_errors 'difficulty' }}


<div class="difficulty-container">
    <div class="difficulty-scale">
        {% for v in difficulty_values %}
            <label class="difficulty-option">
                <input type="radio" name="difficulty" value="{{ v }}" required>
                <span>{{ v }}</span>
            </label>
        {% endfor %}
    </div>
    <div class="difficulty-labels">
        <span class="left-label"><b>Very easy</b></span>
        <span class="right-label"><b>Very difficult</b></span>
    </div>
</div>

<br>

<p><b>How confident are you that your predictions were better than random?</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;
    }

    .difficulty-container {
        display: block;
        width: fit-content;
    }

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

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

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

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

<br><br>

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

{% endblock %}