{{ block title }}
    Guess the {{ if player.myTreatment == 0 }} temperature difference {{ endif }} {{ if player.myTreatment == 1 }} difference in homicide mortality {{ endif }}
{{ endblock }}
{{ block content }}

{{ if player.myTreatment == 0 }}
	The computer selected California. Please enter your guess of the difference in &#8457 between the decades 1950-1959 and 2010-2019 in terms of average temperature. 
	<br><br>

	<center>
	1950-1959 warmer<input type="range" name="estimateTemperatureDiff" value="None" step="0.01" min="-10" max="10" id="id_slider_one" style="width:500px" class="range">2010-2019 warmer
	<p id="feedback_one"></p>
	</center>	
	<input type="hidden" name="checksliderTemperatureDiff" value="" id="id_checksliderTemperatureDiff"/>
    <script>
      var selector1 = $('input[name=estimateTemperatureDiff]');
      selector1.change(function() {
        $('#id_checksliderTemperatureDiff').val(selector1.val());
		  liveSend({'slider': 1, 'v': selector1.val()});
      });
    </script>
	<script>
		$(document).ready(function () {
    		$('input[name=estimateTemperatureDiff]').on('input', function() {
				var absoluteValue = Math.abs($(this).val())
        		document.getElementById("feedback_one").innerHTML = 'warmer by '+absoluteValue+'&#8457';
    		});
    	});    
	</script>
{{ endif }}

{{ if player.myTreatment == 1 }}
	
	Please enter by how much you think the the homicide mortality differed between State A and State B in 2019.<br>
	- State A has the 3rd <b>lowest</b> percentage of population that is Black or African American <br>
	- State B has the 3rd <b>highest</b> percentage of population that is Black or African American<br>

	<!-- 3.115 higher in State B (Utah) State A (Louisiana) -->
	<br>

	<center>
	State A<input type="range" name="estimateTemperatureDiff" value="None" step="0.01" min="-5" max="5" id="id_slider_one" style="width:500px" class="range">State B
	<p id="feedback_one"></p>
	</center>	
	<input type="hidden" name="checksliderTemperatureDiff" value="" id="id_checksliderTemperatureDiff"/>
    <script>
      var selector1 = $('input[name=estimateTemperatureDiff]');
      selector1.change(function() {
        $('#id_checksliderTemperatureDiff').val(selector1.val());
		  liveSend({'slider': 1, 'v': selector1.val()});
      });
    </script>
	<script>
		$(document).ready(function () {
    		$('input[name=estimateTemperatureDiff]').on('input', function() {
				var absoluteValue = Math.abs($(this).val()) + 1
				if (absoluteValue == 1) {
					document.getElementById("feedback_one").innerHTML = 'both states have the same homicide mortality';
				}else {
				   document.getElementById("feedback_one").innerHTML = absoluteValue+'-times higher homicide mortality';
				}
    		});
    	});    
	</script>
{{ endif }}

    {{ next_button }}

{{ endblock }}