{{ extends "global/Page.html" }}

{{ block scripts }}
    <script>
        //Disable Scrolling
        $(function() {
            disableScroll();    //ist bei Page.html in den global templates gespeichert
        });

       // slider variable erstellen
        var slider = [];
        for (var i = 1; i < document.getElementsByTagName('input').length; i += 1) {
            slider[i] = document.getElementsByTagName('input').item(i).value;
        }

        function showVal(myelement, newVal){
                //das nächste element finden (Zuerst zum parent box1 mi tparent, dann zu box2 mit sibling)
                document.getElementById(myelement).parentElement.nextElementSibling.innerHTML = newVal;


               function findTotal(){
                    var arr = document.getElementsByTagName('input');
                    var tot=0;

                    for(var i=0;i<arr.length;i++){
                        console.log("value", arr[i].value);
                        if((arr[i].value)==50) {
                            tot += 1;
                        }
                    }

                    document.getElementById('total').innerHTML = tot;
                    document.getElementById("id_sum").value = tot;
                    console.log("value vom hidden input", document.getElementById("id_sum").value)
               }
             findTotal();
        }
    </script>
{{ endblock }}

{{ block content }}
    <style>
    u {
        text-decoration: underline;
    }
    .box1 {
        height: 50px;
        float: left;
    }
    .box2 {
        padding: 3px;
        height: 50px;
        width: 5%;
        float: left;
    }
    input[type=range] {
        pointer-events: none;
    }
    input[type=range]::-webkit-slider-thumb {
        pointer-events:auto;
    }
    </style>
    <br>
    <div class = "row" style ="margin: auto !important; width: 80% !important;">
        <b>Ziehen Sie den Schiebereglerknopf mit Ihrer Maus so, dass der Schieberegler ("Slider") genau auf den Wert <u>50</u> zeigt! </b>
    </div>
    <div class = "row" style ="margin: auto !important; width: 80% !important;">
    Die aktuelle Anzahl korrekt positionierter Schieberegler beträgt: <span id="total">0</span>
    </div>
    <br>
    <div class = "row" style ="margin: auto !important; width: 80% !important;">
    {{ for field in form }}
        {{ if field.id != "id_sum" }}
            <div style ="width: 25%;">
                <div class = "box1">
                    <input type = "range" name = {{ field.name }}
                           id = {{ field.id  }} value = 0
                           step = "1" oninput="showVal(this.id, this.value)"
                           onchange="showVal(this.id, this.value)"></div>
                <div class = "box2">0</div>
            </div>
        {{ endif }}
    {{ endfor }}
    <input type ="hidden" name= "sum" id="id_sum" />
    </div>
    <br><br>
{{ endblock }}