{{ 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>
    Some questions are marked as being remunerated. You will receive <b>{{ C.CORRECT_ANSWER_FEE }}</b> for each of these questions that you answer correctly to within {{ C.PERCENT_ESTIMATION_RANGE }}% 
    (<i>e.g. if the answer is {{ C.PERCENT_ESTIMATION_RANGE_CORRECT }}% and you estimate any value between {{ C.PERCENT_ESTIMATION_RANGE_LOW }}% and {{ C.PERCENT_ESTIMATION_RANGE_HIGH }}%, you earn an additional {{ C.CORRECT_ANSWER_FEE }}</i>).<br><br>

<h3>Sliders</h3>
    All questions that ask you to make an estimation must be answered using a 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 }}