{{ block title }}Survey{{ endblock }}
{{ block content }}

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="50"
          aria-valuemin="0" aria-valuemax="100" style="width:17%">
               <span>14% Complete</span>
    </div>
    </div>
    <br>
    <style>
        .mgslider-wrapper {
            border-spacing: 10px;
        }
        .mgslider-limit {
            width: 10%;
            min-width: 75px;
            height: 80px;
            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>

    {{ formfield_errors 'english' }}
    <p>How good is your English on a scale from 0 to 5? 5 is equivalent to a native speaker:</p>

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

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

    <script>
        $(document).ready(function (event) {
            slider1 = new mgslider("english", 1, 5, 1);
            slider1.yourvalue = "Your English Skill";
            slider1.print(document.getElementById("sliders_here"));

        });
    </script>


    <br>
    <script>
        window.onload = function () {
            setTimeout(function(){document.querySelector("#Next").style.visibility = "visible";}, 4000);

        }
    </script>

    <button class="o-tree-btn-next btn btn-primary" id="Next" style="visibility:hidden;">Next</button>

{{ endblock }}