{% load otree static %}

{% block content %}
<p>
    <b><u>Your guess:</u></b>
</p>

     <p>
    Please click on the slider to indicate which percentage of the balls you just saw where red or blue.
</p>
<script>
	$(document).ready(function () {

    	$('input[name=dot_spot_estimation]').on('input', function() {
    	    let blue = 100 - $(this).val();
        	document.getElementById("feedback_one").innerHTML = `This means that you belief that of the balls in the graph `+ blue + ' percent are <font color="blue"> BLUE </font>and ' +$(this).val()+ ' percent are <font color="red"> RED </font>.';

    	  });
    });
</script>

     <div style="display: flex">
    <font color="blue"> BLUE </font>
    <!--&nbsp;<input type="hidden" name="check_slider_dotspot" value="" id="id_check_slider_dotspot"/>-->
    <input type="range" name="dot_spot_estimation"  id="id_slider_dotspot" min="0" max="100" style="flex: 1" class="persist" value=None>
    &nbsp;
    <font color="red"> RED </font>
</div>
<p id="feedback_one"><br></p>
     <br>
        {% next_button %}

    <br>

<br>
{% endblock %}