{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}

{% block title %}

	Gamble Choice

{% endblock %}

{% block content %}

	<div class="container-fluid">
		<div class="panel panel-primary">
			<div class="panel-body">
				<h4>Instructions</h4>

				<p>In this task, please choose one of the following gambles. Each gamble has two possible outcomes <i>HEADS</i> or <i>TAILS</i> that occur with 50% probability. Your compensation for this part of the study will be determined by:</p>

				<ul>
					<li>which of the five gambles you select.</li>
					<li>which of the two possible events occur.</li>
				</ul>

				<p>For example, if you select Gamble 4 and <i>HEADS</i> occurs, you will receive {{ C.choice_4_high }} points. If <i>TAILS</i> occurs, you will receive {{ C.choice_4_low }} point.</p>

				<p>At the end of the study, the computer will flip a virtual coin to determine which event will occur. If the coin comes up with <i>HEADS</i>, then you will get the points in that column. If the coin shows <i>TAILS</i>, you will get the outcome in that column. </p>

				<p>The five different gambles are listed below. Select one gamble using the input box at the bottom of the screen.</p>


				<div class="table-responsive">
				<table class="table">
					<tr>
						<th style="text-align:center">GAMBLE</th>
						<th style="text-align:center">HEADS</th>
						<th style="text-align:center">TAILS</th>
					</tr>
					<tr>
						<td style="text-align:center">Gamble 1</td>
						<td style="text-align:center">{{ C.choice_1_high }} Points</td>
						<td style="text-align:center">{{ C.choice_1_low }} Points</td>
					</tr>
					<tr>
						<td style="text-align:center">Gamble 2</td>
						<td style="text-align:center">{{ C.choice_2_high }} Points</td>
						<td style="text-align:center">{{ C.choice_2_low }} Points</td>
					</tr>
					<tr>
						<td style="text-align:center">Gamble 3</td>
						<td style="text-align:center">{{ C.choice_3_high }} Points</td>
						<td style="text-align:center">{{ C.choice_3_low }} Points</td>
					</tr>
					<tr>
						<td style="text-align:center">Gamble 4</td>
						<td style="text-align:center">{{ C.choice_4_high }} Points</td>
						<td style="text-align:center">{{ C.choice_4_low }} Point</td>
					</tr>
					<tr>
						<td style="text-align:center">Gamble 5</td>
						<td style="text-align:center">{{ C.choice_5_high }} Points</td>
						<td style="text-align:center">{{ C.choice_5_low }} Point</td>
					</tr>
				</table>
				</div>
			</div>
		</div>

		<div class="panel panel-primary">
			<div class="panel-heading">
				<b>Make your selection below</b>
			</div>

			<div class="panel-body">
				{% formfields %}
			</div>
		</div>
	</div>
	{% next_button %}

{% endblock %}