{% 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>

<style>
.button4 {background-color: #e7e7e7; color: black;}
.button3 {background-color: #f44336;}
</style>
     {% endblock %}
{% block content %}
<p>
    <b><u>Your guess:</u></b>
</p>

<p style="text-align:justify">
You did not click on the slider. Are you sure you believe that there are as many RED as BLUE dots?
    </p>
    <button name="dotspot_fifty_fifty" value="True" class="btn button3">Yes</button>
     <p style="text-align:justify">
    You can still move the slider on this page if you want to enter another guess.
    </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: flex">
    <font color="blue"> BLUE </font>

    <input type="range" name="dot_spot_estimation_b"  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 %}