{{ block title }}
{{ endblock }}
{{ block content }}
<!–– Header ––>
<h2>Demographics</h2>
<br>
<!–– Main Body ––>
{{formfield 'age'}}
<br>
{{formfield 'gender'}}
<br>
{{formfield 'education_level'}}
<br>
{{formfield 'major'}}
<br>
    <style>
        .mgslider-wrapper {
            border-spacing: 10px;
        }
        .mgslider-show {
            text-align: center;
        }
        .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;
        }
        .mgslider-feedback {
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>
    <p>Are you generally a person who is willing to take risks or do you try to avoid taking risks? <br>(0 - not at all willing to take risk, 10 - very willing to take risk)</p>
    <div id="slider_risk"></div>

    <script src="{{ static 'surveyslider.js' }}"></script>
    <script>
        $(document).ready(function (event) {
            // First slider
            sliderrisk = new mgslider("risk_preference", 0, 10, 1);
            sliderrisk.recall = true; // Optional line to remember value across errors
            sliderrisk.print(document.getElementById("slider_risk"));
        });
    </script>
<br>
{{ next_button }}
{{ endblock }}