{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}
{% load staticfiles %}
{% load otree static otree_tools %}  



{% block title %}
	More precisely, how many good news did you read about? How many bad news? 
{% endblock %}

{% block content %}

    {% tracking_time %}  
    {% tracking_focus %}  
	  
     
	<p>
	{{ form.num_positive_facts_choice.errors }}
	{{ form.num_negative_facts_choice.errors }}
	You should count each unique event only once, even if you have read about it in multiple newspapers. If you're exactly right, you will earn ${{ score_bonus }}. ${{ score_penalty }} will be subtracted for each point of difference between your answers and the correct ones. Note that the computer knows which fact you have read about and will compute your payments based on this. Do not worry about the stories you could not read.
	</p>
	<br>
	<div align="center">
	<b>There were <input type="text" name="num_positive_facts_choice" id="chance" class="text" value="" style="width: 35px"> positive facts: </b>
	<br>
	<br>
	<input type="range" id="chanceSlider" class="vHorizon" min="0" max="15" step="1" value="0" style="width: 50%;"> 
	<br>
	<br>
	<b>There were <input type="text" name="num_negative_facts_choice" id="chance_neg" class="text" value="" style="width: 35px"> negative facts:</b>
	<br>
	<br>
	<input type="range" id="chanceSlider_neg" class="vHorizon" min="0" max="15" value = "0" step="1" style="width: 50%;"> 
	</div>
	<br>
	<br>
	<div align="center">
		{% next_button %}
	</div>

{% endblock %}


{% block scripts %}
	<script type="text/javascript"> 

		$('#chanceSlider').on('change', function(){
			$('#chance').val($('#chanceSlider').val());
		});

		$('#chance').on('keyup', function(){
			$('#chanceSlider').val($('#chance').val());
		});

		$('#chanceSlider_neg').on('change', function(){
			$('#chance_neg').val($('#chanceSlider_neg').val());
		});

		$('#chance_neg').on('keyup', function(){
			$('#chanceSlider_neg').val($('#chance_neg').val());
		});
		
		
		$(document).ready(function() {
		  $(window).keydown(function(event){
			if(event.keyCode == 13) {
			  event.preventDefault();
			  return false;
			}
		  });
		});

	</script>
{% endblock %}

{% block styles %}
	<style type="text/css">

		input {
			text-align:center;
			font-weight: bold;
		}


	</style>
{% endblock %}