{{ block title }}
   Round {{ player.round_number }}.
{{ endblock }}
{{ block content }}

<p id = "problem", style="text-align: center">
 <b>   {{ number_1 }} <br>
{{ number_2 }} <br>
{{ number_3 }} <br>
{{ number_4 }} <br>
 = ?? </b> <br>
</p>




<form id = "form">
    {{ formfields }}
    {{ next_button }}
</form>

<script>
    setTimeout(() => {
        document.getElementById("problem").style.display = "none";  // Hide text
    }, 7000); // Disappear after 2 seconds

    setTimeout(() => {
        document.getElementById("problem").style.display = "block";  // Show again
    }, 7000); // Reappear after 5 seconds

    setTimeout(() => {
        document.getElementById("form").style.display = "none";  // Hide text
    }, 7000); // Disappear after 2 seconds

    setTimeout(() => {
        document.getElementById("form").style.display = "block";  // Show again
    }, 7000); // Reappear after 5 seconds
</script>

<p>Move all the sliders to their corresponding values on the right <b> in bold </b> :</p>

<input type="range" id="slider1" name="slider_value1" min="0" max="100" value="50" oninput="updateValue1(this.value)">
<span id="slider_value_display1">50</span> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<b> {{ number_1 }} </b>

<script>
    function updateValue1(val1) {
        document.getElementById("slider_value_display1").innerText = val1;
    }
</script>


<br>

<input type="range" id="slider2" name="slider_value2" min="0" max="100" value="50" oninput="updateValue2(this.value)">
<span id="slider_value_display2">50</span> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<b> {{ number_2 }} </b>

<script>
    function updateValue2(val2) {
        document.getElementById("slider_value_display2").innerText = val2;
    }
</script>

<br>

<input type="range" id="slider3" name="slider_value3" min="0" max="100" value="50" oninput="updateValue3(this.value)">
<span id="slider_value_display3">50</span> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<b> {{ number_3 }} </b>

<script>
    function updateValue3(val3) {
        document.getElementById("slider_value_display3").innerText = val3;
    }
</script>

<br>

<input type="range" id="slider4" name="slider_value4" min="0" max="100" value="50" oninput="updateValue4(this.value)">
<span id="slider_value_display4">50</span> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<b> {{ number_4 }} </b>

<script>
    function updateValue4(val4) {
        document.getElementById("slider_value_display4").innerText = val4;
    }
</script>

<br>

<input type="range" id="slider5" name="slider_value5" min="0" max="100" value="50" oninput="updateValue5(this.value)">
<span id="slider_value_display5">50</span> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<b> {{ number_5 }}</b>

<script>
    function updateValue5(val5) {
        document.getElementById("slider_value_display5").innerText = val5;
    }
</script>

<br>

<input type="range" id="slider6" name="slider_value6" min="0" max="100" value="50" oninput="updateValue6(this.value)">
<span id="slider_value_display6">50</span> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<b> {{ number_6 }} </b>

<script>
    function updateValue6(val6) {
        document.getElementById("slider_value_display6").innerText = val6;
    }
</script>

<br>

<input type="range" id="slider7" name="slider_value7" min="0" max="100" value="50" oninput="updateValue7(this.value)">
<span id="slider_value_display7">50</span> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<b> {{ number_7 }} </b>

<script>
    function updateValue7(val7) {
        document.getElementById("slider_value_display7").innerText = val7;
    }
</script>

<br>

<input type="range" id="slider8" name="slider_value8" min="0" max="100" value="50" oninput="updateValue8(this.value)">
<span id="slider_value_display8">50</span> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<b> {{ number_8 }} </b>

<script>
    function updateValue8(val8) {
        document.getElementById("slider_value_display8").innerText = val8;
    }
</script>

<br>

<input type="range" id="slider9" name="slider_value9" min="0" max="100" value="50" oninput="updateValue9(this.value)">
<span id="slider_value_display9">50</span> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<b> {{ number_9 }} </b>

<script>
    function updateValue9(val9) {
        document.getElementById("slider_value_display9").innerText = val9;
    }
</script>

<br>

<input type="range" id="slider10" name="slider_value10" min="0" max="100" value="50" oninput="updateValue10(this.value)">
<span id="slider_value_display10">50</span> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<b> {{ number_10 }} </b>

<script>
    function updateValue10(val10) {
        document.getElementById("slider_value_display10").innerText = val10;
    }
</script>

<br>

<input type="range" id="slider11" name="slider_value11" min="0" max="100" value="50" oninput="updateValue11(this.value)">
<span id="slider_value_display11">50</span> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<b> {{ number_11 }} </b>

<script>
    function updateValue11(val11) {
        document.getElementById("slider_value_display11").innerText = val11;
    }
</script>

<br>

<input type="range" id="slider12" name="slider_value12" min="0" max="100" value="50" oninput="updateValue12(this.value)">
<span id="slider_value_display12">50</span> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<b> {{ number_12 }} </b>

<script>
    function updateValue12(val12) {
        document.getElementById("slider_value_display12").innerText = val12;
    }
</script>

<br>

<input type="range" id="slider13" name="slider_value13" min="0" max="100" value="50" oninput="updateValue13(this.value)">
<span id="slider_value_display13">50</span> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<b> {{ number_13 }} </b>

<script>
    function updateValue13(val13) {
        document.getElementById("slider_value_display13").innerText = val13;
    }
</script>

<br>

<input type="range" id="slider14" name="slider_value14" min="0" max="100" value="50" oninput="updateValue14(this.value)">
<span id="slider_value_display14">50</span> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<b> {{ number_14 }} </b>

<script>
    function updateValue14(val14) {
        document.getElementById("slider_value_display14").innerText = val14;
    }
</script>

<br>

<input type="range" id="slider15" name="slider_value15" min="0" max="100" value="50" oninput="updateValue15(this.value)">
<span id="slider_value_display15">50</span> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<b> {{ number_15 }} </b>

<script>
    function updateValue15(val15) {
        document.getElementById("slider_value_display15").innerText = val15;
    }
</script>


<br>

<input type="range" id="slider16" name="slider_value16" min="0" max="100" value="50" oninput="updateValue16(this.value)">
<span id="slider_value_display16">50</span> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<b> {{ number_16 }} </b>

<script>
    function updateValue16(val16) {
        document.getElementById("slider_value_display16").innerText = val16;
    }
</script>


<br>

<input type="range" id="slider17" name="slider_value17" min="0" max="100" value="50" oninput="updateValue17(this.value)">
<span id="slider_value_display17">50</span> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<b> {{ number_17 }} </b>

<script>
    function updateValue17(val17) {
        document.getElementById("slider_value_display17").innerText = val17;
    }
</script>


<br>

<input type="range" id="slider18" name="slider_value18" min="0" max="100" value="50" oninput="updateValue18(this.value)">
<span id="slider_value_display18">50</span> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<b> {{ number_18 }} </b>

<script>
    function updateValue18(val18) {
        document.getElementById("slider_value_display18").innerText = val18;
    }
</script>


<br>

<input type="range" id="slider19" name="slider_value19" min="0" max="100" value="50" oninput="updateValue19(this.value)">
<span id="slider_value_display19">50</span> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<b> {{ number_19 }} </b>

<script>
    function updateValue19(val19) {
        document.getElementById("slider_value_display19").innerText = val19;
    }
</script>


<br>

<input type="range" id="slider20" name="slider_value20" min="0" max="100" value="50" oninput="updateValue20(this.value)">
<span id="slider_value_display20">50</span> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<b> {{ number_20 }} </b>

<script>
    function updateValue20(val20) {
        document.getElementById("slider_value_display20").innerText = val20;
    }
</script>





{{ endblock }}