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

{{ block scripts }}
    <script>

        function validateAnswers() {
            let vMin = [js_vars.iMin1, js_vars.iMin2 ];
            let vMax = [js_vars.iMax1, js_vars.iMax2 ];
            let iCorrect = 0;
            // Check Answers within range and divisible by 5
            for (let iAttr=0;iAttr<2;iAttr++) {
                for (let i=1;i<=3;i++) {
                    console.log(`val-${iAttr}${i}`);
                    let ans = parseFloat(document.getElementById(`val-${iAttr}${i}`).value);
                    let hint = document.getElementById(`hint-${iAttr}${i}`);
                    if ((ans<=vMax[iAttr]) & (ans>=vMin[iAttr]) & (ans%2.5==0)) {
                        iCorrect++;
                        hint.classList.add('hidden');
                    } else {
                        hint.classList.remove('hidden');
                    }
                }
            }
            if (iCorrect ==6) {
                now = new Date().getTime();
                document.getElementById( js_vars.RTvar ).value = now - TStart;
                document.getElementById('submit').click();
            }

        }
    </script>
{{ endblock }}

{{ block information }}
<div class="content-block" id="content-block"> 
    <div class="upper-content"> 
        <p class="justify"> {{ IntroBelief }}. Please select how many points you think you receive on average for each attribute and value-rating. Click the button on the top-right button (?)  to read the information about the points again.
            <br> <br>
            Please select values in steps of 2.5 (0,2.5,5,7.5...) that are within the corresponding ranges of the category. 
            {{ BonusText }}   
        </p>

    </div>
    <div class="question-wrapper">
        {{ for attr in lAttr }}
            <div class="column">
                <div class="row"> 
                    {{ attr.attr }} ({{ attr.min}} to {{attr.max}})
                </div>
                <div class="row"> 
                    <img class="img-rating" src="{% static attr.symbol1Path %}" />   
                    <input type="text" class="inputs-{{ forloop.counter0 }}" name="B{{ forloop.counter0 }}1" id="val-{{ forloop.counter0 }}1"> 
                    
                </div>
                <div class="row hidden hint" id="hint-{{ forloop.counter0}}1"> 
                    <div> Must be within the range and divisible by 2.5. </div>
                </div>
                <div class="row"> 
                    <img class="img-rating" src="{% static attr.symbol2Path %}" />   
                    <input type="text" class="inputs-{{ forloop.counter0 }}" name="B{{ forloop.counter0 }}2" id="val-{{ forloop.counter0 }}2"> 
                    
                </div>
                <div class="row hidden hint" id="hint-{{ forloop.counter0}}2"> 
                    <div> Must be within the range and divisible by 2.5. </div>
                </div>
                <div class="row"> 
                    <img class="img-rating" src="{% static attr.symbol3Path %}" />   
                    <input type="text" class="inputs-{{ forloop.counter0 }}" name="B{{ forloop.counter0 }}3" id="val-{{ forloop.counter0 }}3"> 
                    
                </div>
                <div class="row hidden hint" id="hint-{{ forloop.counter0}}3"> 
                    <div> Must be within the range and divisible by 2.5. </div>
                </div>
            </div>
        {{ endfor}}
    </div>

</div>
{{ endblock }}