{{ block title }}
    <h1>Survey</h1>
{{ endblock }}
{{ block content }}

        <p>
            {{ formfield 'gender' }}
            {{ formfield 'age' }}
            {{ formfield 'education' }}
            {{ formfield 'origin' }}
            {{ formfield 'experience' }}

        </p>

<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>
        <table class="table">
                    <tr>
                        <th style="width: 40%">Question</th>
                        <th style="width: 15%">Strongly Agree</th>
                        <th style="width: 15%">Agree</th>
                        <th style="width: 15%">Disagree</th>
                        <th style="width: 15%">Strongly Disagree</th>

                    </tr>

                        {{ for field in form }}
                            {{ if field.name != "gender" }}
                            {{ if field.name != "age" }}
                            {{ if field.name != "education" }}
                            {{ if field.name != "origin" }}
                            {{ if field.name != "english" }}
                            {{ if field.name != "experience" }}
                            {{ if field.name != "suggestions_box" }}
                            {{ if field.name != "experience2" }}
                            {{ if field.name != "ABIC_1" }}
                            {{ if field.name != "ABIC_2" }}
                            {{ if field.name != "ABIC_3" }}
                            {{ if field.name != "ABIC_4" }}
                            {{ if field.name != "ABIC_5" }}
                            {{ if field.name != "ABIC_6" }}
                            {{ if field.name != "ABIC_7" }}
                            {{ if field.name != "ABIC_8" }}
                            {{ if field.name != "ABIC_9" }}
                            {{ if field.name != "ABIC_10" }}
                            {{ if field.name != "ABIC_11" }}
                            {{ if field.name != "ABIC_12" }}
                            {{ if field.name != "ABIC_13" }}
                            {{ if field.name != "Oddity_2" }}
                            {{ if field.name != "Oddity_3" }}

                            <tr>
                                <th>{{ field.label }}</th>
                                {{ for choice in field }}
                                    <td>{{ choice }}</td>
                                {{ endfor }}
                            </tr>
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}

                        {{ endfor }}
                    </table>
        <br>


        <table class="table">
                    <tr>
                        <th style="width: 40%">Question</th>
                        <th style="width: 15%">Rarely/Never</th>
                        <th style="width: 15%">Occasionally</th>
                        <th style="width: 15%">Often</th>
                        <th style="width: 15%">Almost Always/Always</th>

                    </tr>

                        {{ for field in form }}
                            {{ if field.name != "gender" }}
                            {{ if field.name != "age" }}
                            {{ if field.name != "education" }}
                            {{ if field.name != "origin" }}
                            {{ if field.name != "english" }}
                            {{ if field.name != "experience" }}
                            {{ if field.name != "suggestions_box" }}
                            {{ if field.name != "experience2" }}
                            {{ if field.name != "offer_1" }}
                            {{ if field.name != "offer_2" }}
                            {{ if field.name != "Oddity_1" }}
                            <tr>
                                <th>{{ field.label }}</th>
                                {{ for choice in field }}
                                    <td>{{ choice }}</td>
                                {{ endfor }}
                            </tr>
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                            {{ endif }}
                        {{ endfor }}
                    </table>

        <br>
        <p>
            {{ formfield 'experience2' }}
            {{ formfield 'suggestions_box' }}
            <br>
            <br>

        </p>



        <script>
    var pageTimeElapsed = 0;
    var pageTimerID = -1;

    function pageTick() {
      pageTimeElapsed++
      document.getElementById("timeSpentInstructions").value = pageTimeElapsed;
    }

    window.onload = function() {
      if(pageTimerID == -1){
        pageTimerID = setInterval(pageTick, 1000);
      }
    };
    </script>

    <input type="hidden" name="timeSpentInstructions" id="timeSpentInstructions"/>

{{ next_button }}

{{ endblock }}