{{ 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>
    
{{ endblock }}

{{ block content }}
<h1>Follow-up Questions</h1>
<h3>Price Change Percentage Estimates</h3>
    Also, every 12 periods, you will be asked to estimate by what percentage (%) you think the price of <b>Food</b> changed during the previous 12 periods. 
    To make an estimation, you must select the desired value using a "slider" -- the blue bar shown below.<br><br>
    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>
    <i>Note: This is meant to be simply your best guess, so you will have {{ C.TIME_LIMIT }} seconds to respond.</i><br><br>
      <!-- Slider q7-->
      <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>

    <p>Now, try using the slider below to select the value: <b>1%</b>. When you are done, click the "Next" button below it.</p><br>
    
    <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_1"></div>
    
        <script src="{{ static 'mgslider.js' }}"></script>
    
        <script>
            $(document).ready(function (event) {  
                slider1 = new mgslider("q7", -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 'q7' }}

{{ next_button }}

{{ endblock }}