{{ block title }}
    Category {{ player.round_number }} out of {{ Constants.num_topics }}<br><i>Health</i>
{{ endblock }}
{{ block content }}


<p>
    For the category <b><i>Health</i></b>, tell us whether you think men or women, on average, know more about it. Indicate your answer on the scale below, where 0 means no gender difference. The bigger the gender difference, the more you should move the slider to that direction.

</p>

<div id="header">
    <p style="float: left; width: 34%; text-align: left;">Men know more</p>
    <p style="float: left; width: 33%; text-align: center;">Men and Women know equally much</p>
    <p style="float: left; width: 33%; text-align: right;">Women know more</p>
</div>



    <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;
        }
        .mgslider-feedback {
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>

    {{ formfield_errors 'health' }}

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

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

    <script>
        $(document).ready(function (event) {
            slider1 = new mgslider("health", -1, 1, 0.01);
            slider1.print(document.getElementById("sliders_here"));

        });
    </script>
    <p>Click the blue bar to reveal the sliders.</p>

    <center>
        {{ next_button }}
    </center>

{{ endblock }}