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



{% block title %}
	Which of the following facts have you read about? 
{% endblock %}

{% block content %}
	{% tracking_time %}  
    {% tracking_focus %} 
<br>
<div align="left"> You will earn ${{ recall_bonus }} per correct fact remembered and lose ${{ recall_penalty }} per fact that you selected but was not reported about. But you cannot lose earning from other sections here: at worst, you will earn $0.0 from this task. Again, remember 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. </div>
<br>
<br>
<table>
	<tr>
    {% for field in form %}
        <td>
        	<input type="hidden" value="F" name="{{ field.name }}" id="id_{{ field.name }}" />
        	<button type="button" name="button_{{ field.name }}" class="mybutton"> 
        		{{ field.label }}

        	</button>
        </td>
    {% if forloop.counter|divisibleby:2 %}
	</tr> <tr>
	{% endif %}
	{% endfor %}
	
</table>
<br>
<div align="center"> <button class="btn btn-primary btn-large"  onclick="return confirm('Are you sure you want to submit these facts?');">Next</button> </div>

{% endblock %}

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

	.mybutton {
	  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;
	  display: inline-block;
	  height: auto; 
	  width: 100%;
	  padding: 10px 20px 10px 20px;
	  text-decoration: none;
	}

	.mybutton: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;
	  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;
	  padding: 10px 20px 10px 20px;
	  text-decoration: none;
	}

	      


</style>	
{% endblock %}

{% block scripts %}
	<script type="text/javascript"> 
	$(function(){
	    $('.mybutton').click(function() {
	    	var hidden_input_name = $(this).attr("name").substring(7);
	    	var hidden_input_id = "#id_" + hidden_input_name;
	    	console.log(hidden_input_name)
	    	if ($(hidden_input_id).val() == "T")
	    	{
	    		$(this).removeClass('selected');
	       		$(hidden_input_id).val("F");
	       		console.log($(hidden_input_id).val());
	    	}
	    	else
	    	{
	    		$(this).addClass('selected');
	       		$(hidden_input_id).val("T");
	       		console.log($(hidden_input_id).val());	    		
	    	}
	    });
	});

	</script>


{% endblock %}