{% load otree static %}
  {% block scripts %}



<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>
     {% endblock %}
{% block content %}
<p>
    <b><u>Your guess:</u></b>
</p>

    <p style="text-align:justify">
    Please click on the slider to indicate which percentage of the dots in the graphic were RED and which were BLUE.
</p>
      <div style="display: none;">
        {% formfield player.button_clicks %}
 </div>

     <div style="display: flex">
    <font color="blue"> BLUE </font>

    <input type="range" onclick="liveSend('clicked-button')" name="dot_spot_estimation"  id="id_slider_dotspot" min="0" max="100" style="flex: 1" class="persist" value=None>
    <!--<input type="hidden" name="checkslider" value="" id="id_checkslider"/>-->

    <font color="red"> RED </font>
</div>
<p id="feedback_one"><br></p>
     <br>




   {% next_button %}


    <br>

<br>
{% endblock %}