{{ block title }}Some questions before the Main Task{{ endblock }}
{{ block content }}
    <br>
    <br>
    <br>
{{ if player.participant.treatmentvideo == 1 }}

    {{ formfield 'internet' }}

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

    {{ formfield_errors 'cognitiveload' }}



    <p>How mentally demanding was understanding the Instruction? Just click the slider and answer intuitively. 10 corresponds to very difficult</p>
    <div id="sliders_here"></div>

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

    <script>
        $(document).ready(function (event) {
            slider1 = new mgslider("cognitiveload", 1, 10, 1);
            slider1.yourvalue = "difficulty";
            slider1.print(document.getElementById("sliders_here"));
        });
    </script>

    <br>
    <br>
    <br>


    {{ formfield 'attention_check_instructions' }}


{{ else }}

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

    <br>



    {{ formfield_errors 'cognitiveload' }}
    <p>How mentally demanding was understanding the Instruction? Just click the slider and answer intuitively. 10 corresponds to very difficult</p>

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

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

    <script>
        $(document).ready(function (event) {
            slider1 = new mgslider("cognitiveload", 1, 10, 1);
            slider1.yourvalue = "difficulty";
            slider1.print(document.getElementById("sliders_here"));
        });
    </script>
    <br>
    <br>
    <br>
    {{ formfield 'attention_check_instructions' }}

{{ endif }}
    <br>
    {{ next_button }}

{{ endblock }}