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

{% block title %} Slider task {% endblock %}

{% block content %}

    <p>
        In this part of the study you earn points for completing the following task.
    </p>

    <p>
        Below you see {{ Constants.num_sliders }} sliders with random start and end points.
        Each slider has a number to its right showing its current position.
        In order to earn the fixed amount of {{ Constants.endowment }}, you will need to move all {{ Constants.num_sliders }} sliders so that the number next to each slider signifies that you are exactly at 50.
        You can do this by either using the mouse and/or by clicking on the slider and moving the slider forward with an up or right arrow, and backward with a down or left arrow on your keyboard.
        You can readjust the position of each slider as many times as you wish.
        All the sliders are on this page, but you may need to scroll down the page to see them all.
        You can only click "Next" once all sliders are set to 50.
    </p>

    <p>
        With equal probability, either only {{ sliders_low }}
        or {{ sliders_high }} out of {{ Constants.num_sliders }} sliders are already set to 50 and do not need to be moved.
        The remaining sliders have random initial positions.
        Consequently, half of all participants have to work more, the other half have to work less in order to receive the same amount of points.
    </p>

{#    https://stackoverflow.com/questions/42530325/display-django-form-fields-on-the-same-line#}
    <div class="container">
        <div class="row">
            {% for field in form  %}
                <div class="col-sm-6">
                    <b>{{ field.label_tag }}</b> {{ field }}
                </div>
            {% endfor %}
        </div>
    </div>

    {% next_button %}

{% endblock %}