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

{% block title %}
    Slider Oyun Alıştırması
{% endblock %}

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static "slider_task/sliders.css" %}">
{% endblock %}

{% block content %}
<p>
    Bu sayfada slider oyunu için alıştırma yapmanız içindir. <br>
    <b>Eğer B rolüne atanırsanız</b> bu deney içerisinde yer alan turlar boyunca bu oyunu oynamanız beklenecektir.<br>
    Buradaki performansınız deneydeki skorunuzu etkilemeyecektir.
</p>
    {{ slider_formset.management_form }}
    
    <table class="slider_table">
        <tr>
        {% for chunk in slider_values_and_forms %}
            <td>
            {% for offset, min, max, start, form in chunk %}
                <div class="slidecontainer" style="margin-left: {{ offset }}%;">
                    <input type="text" id="{{ form.end_pos.html_name }}" class="slidevalue" value="{{ start }}" >
                    <input type="range" min="{{ min }}" max="{{ max }}" value="{{ start }}" class="slider" id="{{ form.end_pos.id_for_label }}" name="{{ form.end_pos.html_name }}" onchange="updateTextInput(this.name, this.value);" onkeydown="return false;">
                    <input type="hidden" id="{{ form.touched.id_for_label }}" name="{{ form.touched.html_name }}" value="False">
                    <input type="hidden" id="{{ form.id.id_for_label }}" name="{{ form.id.html_name }}" value="{{ form.id.value }}">
                </div>
            {% endfor %}
            </td>
        {% endfor %}
        </tr>
    </table>
<br>
<br>
{% next_button %}

{% endblock %}

{% block scripts %}
    <script type="text/javascript" src="{% static "slider_task/sliders.js" %}"></script>
{% endblock %}