{{ block content }}
<h1>Instructions</h1>
<i>Please, read the instructions below. Once you have finished reading, click the Next Button at the bottom of the page to begin the questionnaire.</i><br><br>
<h3>Questionnaire</h3>
You will now complete a questionnaire. Some of the questions ask you about your own personal behaviors. Other questions ask you to make estimations.<br><br>
<h3>Remuneration</h3>
In addition to the participation fee mentioned previously, you will receive an additional <b>[VALUE]€</b> for every estimation response that is correct to within [2]% (<i>e.g. if the answer is 50% and you estimate any value between 49% and 52%, you earn an additional [VALUE]€</i>).<br><br>
<h3>Sliders</h3>
All questions that ask you to make an estimation must be answered using the Slider (as explained in the original experimental instructions).<br><br>
<i>To practice using the Slider, please select {{ C.SLIDER_TEST }}%.</i><br><br><br>

<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;
    }
</style>

<h6><i>Click the blue bar to reveal the slider. Drag it along the bar to select your estimate.</i></h6>

<br>

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

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

    <script>
        $(document).ready(function (event) {
            slider1 = new mgslider("slider", -100, 100, 1);
            slider1.print(document.getElementById("sliders_here"));
            slider1.yourvalue = "Your estimate";
            slider1.f2s = function (val) {
                return val.toFixed(1) + ' %';
            }
        });
    </script>

{{ formfield_errors 'slider' }}

<br>

<h3>Time limit</h3>
All questions that ask you to make an estimation using the Slider have a time limit. You will have <b>[{{ C.TIME_LIMIT }}] seconds</b> to select a response on the Slider and click the Next Button. You will be prompted beforehand that the timer will start.<br><br>


    {{ next_button }}

{{ endblock }}