{% extends "global/Page.html" %}
{% load otree static %}
{% block scripts %}

    <!-- custom style sheet-->
    <link href="{% static 'global/styles.css' %}" rel="stylesheet">
    <script src="{% static 'global/js/functions.js' %}"></script>

{% endblock %}

{% block content %}
<h2><center>Sección 4 - Tarea 3</center></h2>
<br>
<p>
Ahora tome sus decisiones en la tabla de abajo. En cada una de las 12 filas, se le pedirá que elija entre una opción A y una opción B.
La opción A es su apuesta y no varía entre filas. La opción B es una suma de dinero y aumenta en cada fila. Si elige la apuesta, 
entonces jugará la apuesta y la cantidad de dinero que obtendrá dependerá del color de la bola sorteada por el computador. 
</p>
<p>
Si esta tarea es seleccionada para pago, se seleccionará una fila al azar y se le pagará según su decisión. Asegúrese de responder
	cuidadosamente a cualquier pregunta para que le paguen lo que realmente prefiere.
</p>
<p>
Recuerde que su apuesta es: la probabilidad de ganar 6 UME es igual al numero de bolas de su color ganador y la probabilidad de
no ganar nada es igual al numero de bolas del otro color. La cantidad de bolas rojas en la urna virtual fue sorteada por el 
	computador como un número entre 0 y 100. 
</p>
<p>
<div class="div_table">

<table style="margin: 0 auto; margin-bottom: 20px;">
	<tr>
		<td>Tu elección de color: </td>
		{% if color == True %}
		<td style="background-color: #ff0000; color: #ffffff; border-radius: 10px;">Rojo</td>
		{% else %}
		<td style="background-color: #000000; color: #ffffff; border-radius: 10px;">Negro</td>
		{% endif %}
	</tr>
</table>

<table class="table_selection">
	<tr>
		<td colspan="1" class="cell_header_table"><b>Opción A</b></td>
		<td class="cell_subheader_table" colspan="2"><b>Selección</b></td>
		<td colspan="1" class="cell_header_table"><b>Opción B</b></td>
	</tr>

	{% for v in vars_table %}
	<tr>
		<td class="cell_text_option">Su Apuesta</td>
		<td class="cell_input_option_a"><input type="radio" name="{{ v.name }}" id="{{ v.name }}_a" class="radio_input" value="1"></td>
		<td class="cell_input_option_b"><input type="radio" name="{{ v.name }}" id="{{ v.name }}_b" class="radio_input" value="2"></td>
		<td class="cell_text_option">{{ v.vals }}</td>
	</tr>
	{% endfor %}

</table>

</div>
<br>
    {% next_button %}

{% endblock %}