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


{% block title %}
    Slider
{% endblock %}

{% block content %}


<p>If this task is selected for payment, the computer will roll a fair six-sided die
to pick a random number 1, 2, 3, 4, 5 or 6. Each number is equally likely to be
rolled.</p>

<p>What is Your Guess about the chance that the die roll is a 5 or 6?</p>

<p style="text-align:center;">Current Guess: <span id="current_guess"></span></p>

<input id="test" type="text" style="width: 95%;	" value="" data-slider-min="0" data-slider-height="25px" data-slider-max="100" data-slider-step="1" data-slider-value="0" data-slider-tooltip="hide" data-slider-handle="square" data-slider-id="test_di"/>
   
<br><br><br>
<p style="text-align:center;">Your probability of earning the $5 if the event occurs: <span id="prob_if_occurs"></span></p>
<p style="text-align:center;">Your probability of earning the $5 if the event does not occur: <span id="prob_if_not_occurs"></span></p>
                    

<br><br><br>



    {% next_button %}



{% block global_styles  %}
    <link rel="stylesheet" href="{% static 'bootstrap-slider.min.css' %}">
    
    <style>
    #test_di .slider-selection {
    	background: #008000;
    	height: 40px;
    }
    
     #test_di .slider-handle {
        	background: #008000;
	    	height: 50px;
	    	width: 10px;
            display:none;
}

    #test_di .slider-track{
        	background: #808080;
	    	height: 40px;
}


.slider-tick{
    display:none;
}

.slider-tick-label-container{
    margin-top:300px;
}

.slider-tick-label{
    margin-top:25px;
}

    </style>
    
{% endblock %}

{% block global_scripts  %}
    <script src="{% static 'bootstrap-slider.min.js' %}"></script>
    
    <script>
    
    
    var sliderobj = $('#test').slider({ ticks: [0, 10, 20, 30, 40,50,60,70,80,90,100],
                                        ticks_labels: ['0%', '10%', '20%', '30%', '40%','50%','60%','70%','80%','90%','100%']})
            		.on('change', changeGuess)
            		.data('slider');
    
    var changeGuess = function() {
        var value=sliderobj.getValue() 
    	document.getElementById("current_guess").innerText= value + "%";
    	var prob_if_occurs = Math.round(( 1 -  (1 - (value/100))**2 ) * 100)

    	document.getElementById("prob_if_occurs").innerText= prob_if_occurs + "%";
    	var prob_if_not_occurs = Math.round( (1 - (value /100)**2 ) * 100)
    	document.getElementById("prob_if_not_occurs").innerText= prob_if_not_occurs + "%";
};


    
	</script>
    
{% endblock %}


{% endblock %}