{{ block content }}

    <style>
        .mgslider-wrapper {
            border-spacing: 10px;
        }
        .mgslider-limit {
            width: 10%;
            min-width: 75px;
            height: 40px;
            margin: 100px;
        }
        .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;
            display: none;
        }

        .stick-to-right {
        float: right;
    }
    </style>

    <p>
        Indicate your confidence in your choice using the slider, with the middle of the bar indicating no confidence.
        The closer you click to the video you chose the more confident you are.
        Click on the bar to reveal the slider.
    </p>

    <video controls="controls" width="200px" autoplay loop muted preload='auto'>
        <source src="{{ static video1 }}" type="video/mp4">
    </video>


    <video class="stick-to-right" controls="controls" width="200px" autoplay loop muted preload='auto'>
        <source src="{{ static video2 }}" type="video/mp4">
    </video>

    <br>
    <div id="sliders_here"></div>
    <script src="{{ static 'mgslider.js' }}"></script>


    <script>
        $(document).ready(function (event) {
            slider1 = new mgslider("confidence", -10, 10, 0.25);
            slider1.print(document.getElementById("sliders_here"));
        });
    </script>

    {{ formfield_errors 'confidence' }}


    {{ next_button }}

{{ endblock }}