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



{% block title %}
	Overall, did you read about more good news or more bad news for Illustra? 
{% endblock %}

{% block content %}
	  

	{% tracking_time %}  
    {% tracking_focus %}  
     
{{ form.more_or_less_choice.errors }} 
	<p>
	A correct answer will earn you ${{ more_or_less_bonus }} in bonus. You should count each unique news story only once, even if you have read about it in multiple newspapers. 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>
	<input type="hidden" name="more_or_less_choice" value="blank" id="id_more_or_less_choice"/>
	<br>
	<div class="container">
		<button type="button" class="Button" id="id_recall_choice1" onclick="toggleOld('id_recall_choice1', 'More Positive Facts');" value="More Positive Facts"> More Positive Facts </button>
		<br>
		<br>
		<button type="button" class="Button" id="id_recall_choice2" onclick="toggleOld('id_recall_choice2', 'Equal Amount');" value="Equal Amount"> As Many Positive as Negative </button>
		<br>
		<br>
		<button type="button" class="Button" id="id_recall_choice3" onclick="toggleOld('id_recall_choice3', 'More Negative Facts');" value="More Negative Facts"> More Negative Facts </button>
	</div>
	<br>
	<br>
	<div align="center">
		{% next_button %}
	</div>

{% endblock %}

{% block styles %}
	<style type="text/css">
	.Button {
	  background: #3498db;
	  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
	  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
	  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
	  background-image: -o-linear-gradient(top, #3498db, #2980b9);
	  background-image: linear-gradient(to bottom, #3498db, #2980b9);
	  -webkit-border-radius: 8;
	  -moz-border-radius: 8;
	  border-radius: 8px;
	  font-family: Arial;
	  color: #ffffff;
	  font-size: 15px;
	  width: 50%;
	  padding: 10px 20px 10px 20px;
	  text-decoration: none;
	}

	.Button:hover {
	  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
	  text-decoration: none;
	}

	.selected {
	  background: #48545c;
	  width: 50%;
	  background-image: -webkit-linear-gradient(top, #48545c, #044269);
	  background-image: -moz-linear-gradient(top, #48545c, #044269);
	  background-image: -ms-linear-gradient(top, #48545c, #044269);
	  background-image: -o-linear-gradient(top, #48545c, #044269);
	  background-image: linear-gradient(to bottom, #48545c, #044269);
	  -webkit-border-radius: 8;
	  -moz-border-radius: 8;
	  border-radius: 8px;
	  font-family: Arial;
	  color: #ffffff;
	  font-size: 15px;
	  padding: 10px 20px 10px 20px;
	  text-decoration: none;
	}
	</style>

{% endblock %}

{% block scripts %}	      
	<script type="text/javascript"> 
	var x
	function toggleOld(my_button_id, value)
	{
		if (typeof x !== 'undefined')
		{
			if (x.classList) 
			{ 
		    	x.classList.toggle("selected");
			} 
			else 
			{
			    // For IE9
			    var classes = x.className.split(" ");
			    var i = classes.indexOf("selected");

			    if (i >= 0) 
			        classes.splice(i, 1);
			    else 
			        classes.push("selected");
			        x.className = classes.join(" "); 
			}

		}
		x = document.getElementById(my_button_id);
		y = document.getElementById("id_more_or_less_choice");
		y.value = value;
	}

    $( 'button[id^=id_recall_]').click(function() {
  		$(this).toggleClass( "selected" );
	});

	</script>
{% endblock %}