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

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

{% block scripts %}
    <script type="text/javascript" src="{% static "compete/js/sliders.js" %}"></script>
    <script src="https://cdn.rangetouch.com/2.0.0/rangetouch.js"></script>
    <script type="text/javascript">
        $(function () {
            var touch = {{ touch|json }};
            if (touch) {const ranges = RangeTouch.setup('input[type="range"]');}
        })
    </script>
{% endblock %}

{% block title %}
{% endblock %}

{% block content %}
    <div class="wrapper">
            <p>
                In this activity, we will ask you to position a slider in the middle of a horizontal line ranging from 0 to 100.
                As in the example below, when you move the slider along the axis, its position will be displayed to the right of the axis. 
                The objective is to position it on the number 50.
            </p>

            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="col-4"></div>
                    <input type="range" min="0" max="100" value="79" class="slider col-4">
                    <output class="slider-value col-4"></output>
                </div>
            </div>

            <br>
            <p>
                The next page will contain 48 of these axes. 
                You will have {{ Constants.time_for_task }} minutes to correctly place as many sliders as possible on the number 50.
             </p>
            <p>
                Each correct positioning of a slider will earn you credits and we will ask you to choose between two options to receive these credits.
            </p>
            <p class="ml-4">
                <b>Option A :</b> You receive <b>{{ Constants.bonus_fix|floatformat:"-1" }} credits</b> for each 
                slider correctly positioned on 50.
            </p>

            <div style="position: relative">
                <img src="{% static "compete/compete_option_a.png" %}"
                     width="80%" style="margin-right: auto; margin-left: auto; display: block">
            </div>
            <br>
            <p class="ml-4">
                <b>Option B :</b> You play against a partner (selected randomly).<br>
                <div class="ml-4">{{ partner }}</div>
                <div class="ml-4">If the number of correctly positioned sliders is
                    <b style="color: #00bb00;">greater</b> than the number of the other participant, you will receive
                    <b>{{ Constants.bonus_winner|floatformat:"-1" }} credits</b>
                    for each correctly positioned slider.
                </div>
            </p>

            <div style="position: relative">
                <img src="{% static "compete/compete_option_b_win.png" %}"
                     width="80%" style="margin-right: auto; margin-left: auto; display: block">
            </div>
            <br>
            <p class="ml-4">
                If the number of sliders you position correctly is <b style="color: salmon">less than</b> the number of the other participant,
                <b>you receive nothing</b>.
            </p>

            <div style="position: relative">
                <img src="{% static "compete/compete_option_b_lose.png" %}"
                     width="80%" style="margin-right: auto; margin-left: auto; display: block">
            </div>
            <br>
            <p class="ml-4">
                If you position the <b>same number</b> of sliders correctly,
                you receive  {{ Constants.bonus_fix|floatformat:"-1" }} credits for each correctly positioned slider.
            </p>

            <div style="position: relative">
                <img src="{% static "compete/compete_option_b_tie.png" %}"
                     width="80%" style="margin-right: auto; margin-left: auto; display: block">
            </div>
            <br>

            {% formfields %}


        <button class="otree-btn-next btn btn-primary">confirm</button>
    </div>
{% endblock %}