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

{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
    <link href="{% static 'mpl/css/custom.css' %}" rel="stylesheet">
{% endblock %}

{# ****************************************************************************************************************** #}
{# *** TITLE *** #}
{# ****************************************************************************************************************** #}

{% block title %}

{% endblock %}

{% block content %}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $(document).ready(function () {
        $("#slider-range_prac").slider({
            range: true,
            min: 0.0,
            max: 30.0,
            values: [0, 30],
            slide: function (event, ui) {
                $("#amount_prac").val(ui.values[0] + " Days - " + ui.values[1]+ " Days");
                $("#id_left").val(ui.values[0]);
                $("#id_right").val(ui.values[1]);
                document.getElementById('slider_prac_low').value = ui.values[0]
                document.getElementById('slider_prac_high').value = ui.values[1]

            }
        });
        $("#amount_prac").val($("#slider-range_prac").slider("values", 0) +
            " Days - " + $("#slider-range_prac").slider("values", 1)+ " Days" );
    });
</script>

<style>
        .mgslider-wrapper {
            border-spacing: 10px;
        }
        .mgslider-limit {
            width: 10%;
            min-width: 75px;
            height: 40px;
            margin: 100px;
            text-align: center;
            background: #eee;
            border: 1px solid #888;
        }
        .mgslider-limit, .mgslider-value {
            font-variant-numeric: tabular-nums;
        }
        .mgslider-before {
            height: 16px;
            width: 100%;
            background: #1e5bff;
        }
        .mgslider-feedback {
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>


<p>
<b>
    For the remaining part of the survey, we will ask questions that require your responses using sliders. For this part,
    we would like you to get some practice using sliders. Suppose that Bob's optimal guess on the number of raining days
    for the next 30 days is 6 days, and he believes that the probability that the number of actual raining days in the
    next 30 days falls in between 3 days and 9 days is 75%
</b>
</p>

<p>
1. Please move the slider to indicate Bob's optimal guess on the number of days that will be raining in the next 30 days
     <div id="slider1_here"></div>
{{ formfield_errors 'slider_prac' }}
</p>
<br>
<p>
2. Please move the slider to indicate how certain Bob is that the actual number of raining days in the next 30 days is
    between 3 days and 9 days
</p>

<p>
    <div id="slider2_here"></div>
{{ formfield_errors 'slider_prac_uncer' }}


</p>


<script src="{{ static 'mgslider.js' }}"></script>
<script>
        $(document).ready(function (event) {
            slider1 = new mgslider("slider_prac", 0, 30, 1, " Days");
            slider1.print(document.getElementById("slider1_here"));
            slider2 = new mgslider("slider_prac_uncer", 0, 100, 5);
            slider2.print(document.getElementById("slider2_here"));

        });
</script>

{% next_button %}

{% endblock %}