{{ block title }}
<h1> Question {{ player.round_number }} of {{ C.total_rounds }} </h1>
<hr>
{{ endblock }}


{{ block content }}


{{ formfield_errors 'f_int2' }}


<script>
    let description = document.getElementById('description');

    function updateDescription(input) {
        let give = parseInt(input.value);
        description.innerText = `On the scale of 0-7, my happiness is ${give} `
    }
</script>


<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>Thinking about the last four decisions you made, how happy you are with your choices?
    <br>
    Click the blue bars to indicate on the scale of 0 (not happy) - 7 (very happy). </p>

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

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

<script>
    $(document).ready(function (event) {
        slider1 = new mgslider("f_int2", 0, 7, 1);
        slider1.print(document.getElementById("sliders_here"));

    });
</script>

<br>

{{ next_button }}

{{ endblock }}