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



{% block title %}
	 What is the probability that Illustra is well-managed? First answer.
{% endblock %}

{% block content %}

    {% tracking_time %}  
    {% tracking_focus %}  
      
      
	{{ form.thresholdq_choice1.errors }}
	<p>
	Remember that the computer randomly chose the <i>quality</i> of Illustra’s management to be either <i>good</i> or <i>bad</i>. If it’s well managed, every unique event that happened to Illustra was positive with probability {{ news_bias }}% and negative with probability {{ opposite_news_bias }}%; if it’s poorly managed, every unique event that happened to Illustra was positive with probability {{ opposite_news_bias }}% and negative with probability {{ news_bias }}%. {{ belief_instruction_example_positivity }} 
	<br>
	<br>
	<b>Now that you have seen some news, how likely do you think it is that Illustra is well-managed? </b>
	<br>
	<br> 
	<i>Earnings</i>
	<br>
	You will answer this question 4 times in our study. To give you incentives to answer exactly what you believe, one of them will be randomly chosen and paid according to the following scheme. 
	<br>
	<b>
	Don’t worry about the math: to maximize your earnings, you should enter your best guess of the probability that Illustra is well-managed given the news that you have seen.
	</b>
	<br>
	The computer will draw a number, P, randomly between 0 and 100 (uniformly). If P is below your selected answer, you will get ${{ business_prospect_bonus }} if Illustra is well managed and ${{ business_prospect_loss }} otherwise. But if P is above your selected answer, you will enter a lottery with winning odds P: you will receive ${{ business_prospect_bonus }} with probability P and ${{ business_prospect_loss }} otherwise.
	<br>
	
	</p>
	<br>
	<br>
	<div align="center">
		<b>There is a <input type="text" name="thresholdq_choice1" id="chance" class="text" value="" style="width: 35px"> % chance that Illustra is well-managed: </b>
		<br>
		<br>
		<input type="range" id="chanceSlider" class="vHorizon" min="0" max="100" value="50" 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());
		});

		$(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 %}