{{ block title }}
    <h6>Completed so far:</h6>
    
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-label="Progress" style="width: {{ percentage }}%" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100">{{ percentage }}%</div>
    </div> <br><br>
    
    <h1>Questionnaire</h1>

{{ endblock }}

{{ block content }}

<!-- Timer display (on/off) -->
<style>
    .otree-timer {
    display: True;
    }
</style>

<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>

<p>What is the <b>current</b> rate of inflation in France?</p>

    <div id="sliders_here_1"></div>

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

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

{{ formfield_errors 'infK_4' }}

    {{ next_button }}

{{ endblock }}