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

{% block content %}

    <style>
        .mgslider-wrapper {
            border-spacing: 10px;
        }
        .mgslider-show {
            text-align: center;
        }
        .mgslider-limit {
            width: 5%;
            min-width: 40px;
            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>
Out of the 27 prediction trials, how many do you think <u>the other participant</u>
will be able to predict correctly based on your advice?
</b></p>

{{ formfield_errors 'predicted_correct_other' }}

<p style="font-size: small;color: #888888; text-align: center" >Click the blue bar to reveal the slider.</p>

<div id="sliders_here"></div>

<br>
<br>

<p>
When you are ready, click “Submit.” You will continue with the next machine.
</p>

<script src="{{ static 'mgslider.js' }}"></script>

<script>
    $(document).ready(function (event) {
        slider1 = new mgslider("predicted_correct_other", 0, 27, 1);
        slider1.yourvalue = "Other's correct predictions";
        slider1.print(document.getElementById("sliders_here"));
    });
</script>


<br>

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

{% endblock %}