{{ block title }}
Slider Game
{{ endblock }}
{{ block content }}

<table class="table table-striped">
    <tr>
        <th><input type="range" name="slider1" min="-1" max="100" oninput="updateDescription1(this)" value="-1"  list="values">  <output  id="description1" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider2" min="-1" max="100" oninput="updateDescription2(this)" value="-1"  list="values">  <output  id="description2" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider3" min="-1" max="100" oninput="updateDescription3(this)" value="-1"  list="values">  <output  id="description3" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider4" min="-1" max="100" oninput="updateDescription4(this)" value="-1"  list="values">  <output  id="description4" style="text-align:center ; font-size: 15px"></output></th>
    </tr>
    <tr>
        <th><input type="range" name="slider5" min="-1" max="100" oninput="updateDescription5(this)" value="-1"  list="values">  <output  id="description5" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider6" min="-1" max="100" oninput="updateDescription6(this)" value="-1"  list="values">  <output  id="description6" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider7" min="-1" max="100" oninput="updateDescription7(this)" value="-1"  list="values">  <output  id="description7" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider8" min="-1" max="100" oninput="updateDescription8(this)" value="-1"  list="values">  <output  id="description8" style="text-align:center ; font-size: 15px"></output></th>
    </tr>
    <tr>
        <th><input type="range" name="slider9" min="-1" max="100" oninput="updateDescription9(this)" value="-1"  list="values">  <output  id="description9" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider10" min="-1" max="100" oninput="updateDescription10(this)" value="-1"  list="values">  <output  id="description10" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider11" min="-1" max="100" oninput="updateDescription11(this)" value="-1"  list="values">  <output  id="description11" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider12" min="-1" max="100" oninput="updateDescription12(this)" value="-1"  list="values">  <output  id="description12" style="text-align:center ; font-size: 15px"></output></th>
    </tr>
    <tr>
        <th><input type="range" name="slider13" min="-1" max="100" oninput="updateDescription13(this)" value="-1"  list="values">  <output  id="description13" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider14" min="-1" max="100" oninput="updateDescription14(this)" value="-1"  list="values">  <output  id="description14" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider15" min="-1" max="100" oninput="updateDescription15(this)" value="-1"  list="values">  <output  id="description15" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider16" min="-1" max="100" oninput="updateDescription16(this)" value="-1"  list="values">  <output  id="description16" style="text-align:center ; font-size: 15px"></output></th>
    </tr>
    <tr>
        <th><input type="range" name="slider17" min="-1" max="100" oninput="updateDescription17(this)" value="-1"  list="values">  <output  id="description17" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider18" min="-1" max="100" oninput="updateDescription18(this)" value="-1"  list="values">  <output  id="description18" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider19" min="-1" max="100" oninput="updateDescription19(this)" value="-1"  list="values">  <output  id="description19" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider20" min="-1" max="100" oninput="updateDescription20(this)" value="-1"  list="values">  <output  id="description20" style="text-align:center ; font-size: 15px"></output></th>
    </tr>
    <tr>
        <th><input type="range" name="slider21" min="-1" max="100" oninput="updateDescription21(this)" value="-1"  list="values">  <output  id="description21" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider22" min="-1" max="100" oninput="updateDescription22(this)" value="-1"  list="values">  <output  id="description22" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider23" min="-1" max="100" oninput="updateDescription23(this)" value="-1"  list="values">  <output  id="description23" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider24" min="-1" max="100" oninput="updateDescription24(this)" value="-1"  list="values">  <output  id="description24" style="text-align:center ; font-size: 15px"></output></th>
    </tr>
    <tr>
        <th><input type="range" name="slider25" min="-1" max="100" oninput="updateDescription25(this)" value="-1"  list="values">  <output  id="description25" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider26" min="-1" max="100" oninput="updateDescription26(this)" value="-1"  list="values">  <output  id="description26" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider27" min="-1" max="100" oninput="updateDescription27(this)" value="-1"  list="values">  <output  id="description27" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider28" min="-1" max="100" oninput="updateDescription28(this)" value="-1"  list="values">  <output  id="description28" style="text-align:center ; font-size: 15px"></output></th>
    </tr>
    <tr>
        <th><input type="range" name="slider29" min="-1" max="100" oninput="updateDescription29(this)" value="-1"  list="values">  <output  id="description29" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider30" min="-1" max="100" oninput="updateDescription30(this)" value="-1"  list="values">  <output  id="description30" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider31" min="-1" max="100" oninput="updateDescription31(this)" value="-1"  list="values">  <output  id="description31" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider32" min="-1" max="100" oninput="updateDescription32(this)" value="-1"  list="values">  <output  id="description32" style="text-align:center ; font-size: 15px"></output></th>
    </tr>
    <tr>
        <th><input type="range" name="slider33" min="-1" max="100" oninput="updateDescription33(this)" value="-1"  list="values">  <output  id="description33" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider34" min="-1" max="100" oninput="updateDescription34(this)" value="-1"  list="values">  <output  id="description34" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider35" min="-1" max="100" oninput="updateDescription35(this)" value="-1"  list="values">  <output  id="description35" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider36" min="-1" max="100" oninput="updateDescription36(this)" value="-1"  list="values">  <output  id="description36" style="text-align:center ; font-size: 15px"></output></th>
    </tr>
    <tr>
        <th><input type="range" name="slider37" min="-1" max="100" oninput="updateDescription37(this)" value="-1"  list="values">  <output  id="description37" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider38" min="-1" max="100" oninput="updateDescription38(this)" value="-1"  list="values">  <output  id="description38" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider39" min="-1" max="100" oninput="updateDescription39(this)" value="-1"  list="values">  <output  id="description39" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider40" min="-1" max="100" oninput="updateDescription40(this)" value="-1"  list="values">  <output  id="description40" style="text-align:center ; font-size: 15px"></output></th>
    </tr>
    <tr>
        <th><input type="range" name="slider41" min="-1" max="100" oninput="updateDescription41(this)" value="-1"  list="values">  <output  id="description41" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider42" min="-1" max="100" oninput="updateDescription42(this)" value="-1"  list="values">  <output  id="description42" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider43" min="-1" max="100" oninput="updateDescription43(this)" value="-1"  list="values">  <output  id="description43" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider44" min="-1" max="100" oninput="updateDescription44(this)" value="-1"  list="values">  <output  id="description44" style="text-align:center ; font-size: 15px"></output></th>
    </tr>
    <tr>
        <th><input type="range" name="slider45" min="-1" max="100" oninput="updateDescription45(this)" value="-1"  list="values">  <output  id="description45" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider46" min="-1" max="100" oninput="updateDescription46(this)" value="-1"  list="values">  <output  id="description46" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider47" min="-1" max="100" oninput="updateDescription47(this)" value="-1"  list="values">  <output  id="description47" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider48" min="-1" max="100" oninput="updateDescription48(this)" value="-1"  list="values">  <output  id="description48" style="text-align:center ; font-size: 15px"></output></th>
    </tr>
    <tr>
        <th><input type="range" name="slider49" min="-1" max="100" oninput="updateDescription49(this)" value="-1"  list="values">  <output  id="description49" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider50" min="-1" max="100" oninput="updateDescription50(this)" value="-1"  list="values">  <output  id="description50" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider51" min="-1" max="100" oninput="updateDescription51(this)" value="-1"  list="values">  <output  id="description51" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider52" min="-1" max="100" oninput="updateDescription52(this)" value="-1"  list="values">  <output  id="description52" style="text-align:center ; font-size: 15px"></output></th>
    </tr>
    <tr>
        <th><input type="range" name="slider53" min="-1" max="100" oninput="updateDescription53(this)" value="-1"  list="values">  <output  id="description53" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider54" min="-1" max="100" oninput="updateDescription54(this)" value="-1"  list="values">  <output  id="description54" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider55" min="-1" max="100" oninput="updateDescription55(this)" value="-1"  list="values">  <output  id="description55" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider56" min="-1" max="100" oninput="updateDescription56(this)" value="-1"  list="values">  <output  id="description56" style="text-align:center ; font-size: 15px"></output></th>
    </tr>
    <tr>
        <th><input type="range" name="slider57" min="-1" max="100" oninput="updateDescription57(this)" value="-1"  list="values">  <output  id="description57" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider58" min="-1" max="100" oninput="updateDescription58(this)" value="-1"  list="values">  <output  id="description58" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider59" min="-1" max="100" oninput="updateDescription59(this)" value="-1"  list="values">  <output  id="description59" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider60" min="-1" max="100" oninput="updateDescription60(this)" value="-1"  list="values">  <output  id="description60" style="text-align:center ; font-size: 15px"></output></th>
    </tr>
    <tr>
        <th><input type="range" name="slider61" min="-1" max="100" oninput="updateDescription61(this)" value="-1"  list="values">  <output  id="description61" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider62" min="-1" max="100" oninput="updateDescription62(this)" value="-1"  list="values">  <output  id="description62" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider63" min="-1" max="100" oninput="updateDescription63(this)" value="-1"  list="values">  <output  id="description63" style="text-align:center ; font-size: 15px"></output></th>
        <th><input type="range" name="slider64" min="-1" max="100" oninput="updateDescription64(this)" value="-1"  list="values">  <output  id="description64" style="text-align:center ; font-size: 15px"></output></th>
    </tr>

</table>

<datalist id="values">
  <option value="0" label="0">0</option>
  <option value="25" label="25">25</option>
  <option value="50" label="50">50</option>
  <option value="75" label="75">75</option>
  <option value="100" label="100">100</option>
</datalist>

<script>
    let description1 = document.getElementById('description1');
    function updateDescription1(input) {
        let slider1 = parseInt(input.value);
        description1.innerText = `${slider1}`
    }
    let description2 = document.getElementById('description2');
    function updateDescription2(input) {
        let slider2 = parseInt(input.value);
        description2.innerText = `${slider2}`
    }
    let description3 = document.getElementById('description3');
    function updateDescription3(input) {
        let slider3 = parseInt(input.value);
        description3.innerText = `${slider3}`
    }
    let description4 = document.getElementById('description4');
    function updateDescription4(input) {
        let slider4 = parseInt(input.value);
        description4.innerText = `${slider4}`
    }
    let description5 = document.getElementById('description5');
    function updateDescription5(input) {
        let slider5 = parseInt(input.value);
        description5.innerText = `${slider5}`
    }
    let description6 = document.getElementById('description6');
    function updateDescription6(input) {
        let slider6 = parseInt(input.value);
        description6.innerText = `${slider6}`
    }
    let description7 = document.getElementById('description7');
    function updateDescription7(input) {
        let slider7 = parseInt(input.value);
        description7.innerText = `${slider7}`
    }
    let description8 = document.getElementById('description8');
    function updateDescription8(input) {
        let slider8 = parseInt(input.value);
        description8.innerText = `${slider8}`
    }
    let description9 = document.getElementById('description9');
    function updateDescription9(input) {
        let slider9 = parseInt(input.value);
        description9.innerText = `${slider9}`
    }
    let description10 = document.getElementById('description10');
    function updateDescription10(input) {
        let slider10 = parseInt(input.value);
        description10.innerText = `${slider10}`
    }
    let description11 = document.getElementById('description11');
    function updateDescription11(input) {
        let slider11 = parseInt(input.value);
        description11.innerText = `${slider11}`
    }

    let description12 = document.getElementById('description12');
    function updateDescription12(input) {
        let slider12 = parseInt(input.value);
        description12.innerText = `${slider12}`
    }
    let description13 = document.getElementById('description13');
    function updateDescription13(input) {
        let slider13 = parseInt(input.value);
        description13.innerText = `${slider13}`
    }
    let description14 = document.getElementById('description14');
    function updateDescription14(input) {
        let slider14 = parseInt(input.value);
        description14.innerText = `${slider14}`
    }
    let description15 = document.getElementById('description15');
    function updateDescription15(input) {
        let slider15 = parseInt(input.value);
        description15.innerText = `${slider15}`
    }
    let description16 = document.getElementById('description16');
    function updateDescription16(input) {
        let slider16 = parseInt(input.value);
        description16.innerText = `${slider16}`
    }
    let description17 = document.getElementById('description17');
    function updateDescription17(input) {
        let slider17 = parseInt(input.value);
        description17.innerText = `${slider17}`
    }
    let description18 = document.getElementById('description18');
    function updateDescription18(input) {
        let slider18 = parseInt(input.value);
        description18.innerText = `${slider18}`
    }
    let description19 = document.getElementById('description19');
    function updateDescription19(input) {
        let slider19 = parseInt(input.value);
        description19.innerText = `${slider19}`
    }
    let description20 = document.getElementById('description20');
    function updateDescription20(input) {
        let slider20 = parseInt(input.value);
        description20.innerText = `${slider20}`
    }
    let description21 = document.getElementById('description21');
    function updateDescription21(input) {
        let slider21 = parseInt(input.value);
        description21.innerText = `${slider21}`
    }
    let description22 = document.getElementById('description22');
    function updateDescription22(input) {
        let slider22 = parseInt(input.value);
        description22.innerText = `${slider22}`
    }
    let description23 = document.getElementById('description23');
    function updateDescription23(input) {
        let slider23 = parseInt(input.value);
        description23.innerText = `${slider23}`
    }
    let description24 = document.getElementById('description24');
    function updateDescription24(input) {
        let slider24 = parseInt(input.value);
        description24.innerText = `${slider24}`
    }
    let description25 = document.getElementById('description25');
    function updateDescription25(input) {
        let slider25 = parseInt(input.value);
        description25.innerText = `${slider25}`
    }
    let description26 = document.getElementById('description26');
    function updateDescription26(input) {
        let slider26 = parseInt(input.value);
        description26.innerText = `${slider26}`
    }
    let description27 = document.getElementById('description27');
    function updateDescription27(input) {
        let slider27 = parseInt(input.value);
        description27.innerText = `${slider27}`
    }
    let description28 = document.getElementById('description28');
    function updateDescription28(input) {
        let slider28 = parseInt(input.value);
        description28.innerText = `${slider28}`
    }
    let description29 = document.getElementById('description29');
    function updateDescription29(input) {
        let slider29 = parseInt(input.value);
        description29.innerText = `${slider29}`
    }
    let description30 = document.getElementById('description30');
    function updateDescription30(input) {
        let slider30 = parseInt(input.value);
        description30.innerText = `${slider30}`
    }
    let description31 = document.getElementById('description31');
    function updateDescription31(input) {
        let slider31 = parseInt(input.value);
        description31.innerText = `${slider31}`
    }
    let description32 = document.getElementById('description32');
    function updateDescription32(input) {
        let slider32 = parseInt(input.value);
        description32.innerText = `${slider32}`
    }
    let description33 = document.getElementById('description33');
    function updateDescription33(input) {
        let slider33 = parseInt(input.value);
        description33.innerText = `${slider33}`
    }
    let description34 = document.getElementById('description34');
    function updateDescription34(input) {
        let slider34 = parseInt(input.value);
        description34.innerText = `${slider34}`
    }
    let description35 = document.getElementById('description35');
    function updateDescription35(input) {
        let slider35 = parseInt(input.value);
        description35.innerText = `${slider35}`
    }
    let description36 = document.getElementById('description36');
    function updateDescription36(input) {
        let slider36 = parseInt(input.value);
        description36.innerText = `${slider36}`
    }
    let description37 = document.getElementById('description37');
    function updateDescription37(input) {
        let slider37 = parseInt(input.value);
        description37.innerText = `${slider37}`
    }
    let description38 = document.getElementById('description38');
    function updateDescription38(input) {
        let slider38 = parseInt(input.value);
        description38.innerText = `${slider38}`
    }
    let description39 = document.getElementById('description39');
    function updateDescription39(input) {
        let slider39 = parseInt(input.value);
        description39.innerText = `${slider39}`
    }
    let description40 = document.getElementById('description40');
    function updateDescription40(input) {
        let slider40 = parseInt(input.value);
        description40.innerText = `${slider40}`
    }
    let description41 = document.getElementById('description41');
    function updateDescription41(input) {
        let slider41 = parseInt(input.value);
        description41.innerText = `${slider41}`
    }
    let description42 = document.getElementById('description42');
    function updateDescription42(input) {
        let slider42 = parseInt(input.value);
        description42.innerText = `${slider42}`
    }
    let description43 = document.getElementById('description43');
    function updateDescription43(input) {
        let slider43 = parseInt(input.value);
        description43.innerText = `${slider43}`
    }
    let description44 = document.getElementById('description44');
    function updateDescription44(input) {
        let slider44 = parseInt(input.value);
        description44.innerText = `${slider44}`
    }
    let description45 = document.getElementById('description45');
    function updateDescription45(input) {
        let slider45 = parseInt(input.value);
        description45.innerText = `${slider45}`
    }
    let description46 = document.getElementById('description46');
    function updateDescription46(input) {
        let slider46 = parseInt(input.value);
        description46.innerText = `${slider46}`
    }
    let description47 = document.getElementById('description47');
    function updateDescription47(input) {
        let slider47 = parseInt(input.value);
        description47.innerText = `${slider47}`
    }
    let description48 = document.getElementById('description48');
    function updateDescription48(input) {
        let slider48 = parseInt(input.value);
        description48.innerText = `${slider48}`
    }
    let description49 = document.getElementById('description49');
    function updateDescription49(input) {
        let slider49 = parseInt(input.value);
        description49.innerText = `${slider49}`
    }
    let description50 = document.getElementById('description50');
    function updateDescription50(input) {
        let slider50 = parseInt(input.value);
        description50.innerText = `${slider50}`
    }
    let description51 = document.getElementById('description51');
    function updateDescription51(input) {
        let slider51 = parseInt(input.value);
        description51.innerText = `${slider51}`
    }
    let description52 = document.getElementById('description52');
    function updateDescription52(input) {
        let slider52 = parseInt(input.value);
        description52.innerText = `${slider52}`
    }
    let description53 = document.getElementById('description53');
    function updateDescription53(input) {
        let slider53 = parseInt(input.value);
        description53.innerText = `${slider53}`
    }
    let description54 = document.getElementById('description54');
    function updateDescription54(input) {
        let slider54 = parseInt(input.value);
        description54.innerText = `${slider54}`
    }
    let description55 = document.getElementById('description55');
    function updateDescription55(input) {
        let slider55 = parseInt(input.value);
        description55.innerText = `${slider55}`
    }
    let description56 = document.getElementById('description56');
    function updateDescription56(input) {
        let slider56 = parseInt(input.value);
        description56.innerText = `${slider56}`
    }
    let description57 = document.getElementById('description57');
    function updateDescription57(input) {
        let slider57 = parseInt(input.value);
        description57.innerText = `${slider57}`
    }
    let description58 = document.getElementById('description58');
    function updateDescription58(input) {
        let slider58 = parseInt(input.value);
        description58.innerText = `${slider58}`
    }
    let description59 = document.getElementById('description59');
    function updateDescription59(input) {
        let slider59 = parseInt(input.value);
        description59.innerText = `${slider59}`
    }
    let description60 = document.getElementById('description60');
    function updateDescription60(input) {
        let slider60 = parseInt(input.value);
        description60.innerText = `${slider60}`
    }
    let description61 = document.getElementById('description61');
    function updateDescription61(input) {
        let slider61 = parseInt(input.value);
        description61.innerText = `${slider61}`
    }
    let description62 = document.getElementById('description62');
    function updateDescription62(input) {
        let slider62 = parseInt(input.value);
        description62.innerText = `${slider62}`
    }
    let description63 = document.getElementById('description63');
    function updateDescription63(input) {
        let slider63 = parseInt(input.value);
        description63.innerText = `${slider63}`
    }
    let description64 = document.getElementById('description64');
    function updateDescription64(input) {
        let slider64 = parseInt(input.value);
        description64.innerText = `${slider64}`
    }

</script>




{{ next_button }}

{{ endblock }}