{% extends "otree/FormPage.html" %}
{% load static otree_tags %}
{% load index %}

{% block global_styles  %}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/css/bootstrap-slider.css" rel="stylesheet">
{% endblock %}

{% block global_scripts  %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/bootstrap-slider.js"></script>
    <script>
        var answerRange = {{ answer_range }};
        var slider = new Slider("#ex1");
        slider.on("change", function(sliderValue) {
            if (sliderValue.newValue < 0) {
                document.getElementById("label1").style.display = "inline";
                document.getElementById("label2").style.display = "none";
                document.getElementById("label3").style.display = "none";
                document.getElementById("diff1").textContent = Math.abs(sliderValue.newValue);
                document.getElementById("diff3").textContent = "";
            } else if (sliderValue.newValue > 0) {
                document.getElementById("label1").style.display = "none";
                document.getElementById("label2").style.display = "none";
                document.getElementById("label3").style.display = "inline";
                document.getElementById("diff1").textContent = "";
                document.getElementById("diff3").textContent = sliderValue.newValue;
            } else {
                document.getElementById("label1").style.display = "none";
                document.getElementById("label2").style.display = "inline";
                document.getElementById("label3").style.display = "none";
                document.getElementById("diff1").textContent = "";
                document.getElementById("diff3").textContent = "";
            }
            for (i=0; i < answerRange.length; i++) {
                var cell = "c" + String(i);
                var denominator = answerRange[answerRange.length - 1] - answerRange[0];
                var value = this.score(sliderValue.newValue,answerRange[i],denominator);
                document.getElementById(cell).textContent = value + "%";
            }
        });
        
        function score(choice, truth, denominator) {
            var value = 1-Math.abs(((parseFloat(truth)-parseFloat(choice))/parseFloat(denominator)));
            value = Math.round(value * 100);
            return value;
        }
        
        function loadLastSliderRow(){
            for (i=0; i < answerRange.length; i++) {
                var cell = "c" + String(i);
                var denominator = answerRange[answerRange.length - 1] - answerRange[0];
                var value = this.score(0,answerRange[i],denominator);
                document.getElementById(cell).textContent = value + "%";
        }   }

    </script>
{% endblock %}