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

{% block title %}
Part 1 of this study: Instructions (2/3)<hr>
{% endblock %}

{% block content %}

<b>Auto-completion</b>: The table auto-completes your choices so you don't have to click through all of the rows. You do not have to start at the top of the table.
If you select Option A in any one row, we assume that you will also prefer Option A in all rows <i>above</i> that row.
If you select Option B in any one row, we assume that you will also prefer Option B in all rows <i>below</i> that row.
<br>
<br>

<table class="table table-bordered" style="border-spacing: 0; width: 100%">
    <colgroup>
        <col width="40%">
        <col width="15%">
        <col width="40%">
    </colgroup>
    <tr>
        <td align="center"><b>Option A</b></td>
        <td></td>
        <td align="middle"><b>Option B</b></td>
    </tr>

{% for counter, amount in example %}

    {% if counter == 1 %}
    <tr>
        <td style="vertical-align: middle; text-align: left" rowspan="18">

	  With probability <b>5</b>% :
            <b style="color: green">Get </b>
            <b>$18</b>
            <br><br>
	    With probability <b>95</b>% :
            <b>Get </b>
            <b>$0</b>
            <br><br>
    
        </td>
        <td align="middle" style="padding-top: 1px; padding-bottom: 1px">

	  <input type="radio" name="amount_{{ amount }}" value="left">&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;

	  <input type="radio" name="amount_{{ amount }}" value="right" data-amount="{{ amount }}">

	</td>
        <td align="middle" style="padding-top: 1px; padding-bottom: 1px">
        With certainty:
            <b style="color: green">Get: </b>
            <b>${{ amount }}</b>
        </td>
    </tr>
    {% else %}
    <tr>
        <td align="middle" style="padding-top: 1px; padding-bottom: 1px">
            <input type="radio" name="amount_{{ amount }}" value="left">&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
            <input type="radio" name="amount_{{ amount }}" value="right" data-amount="{{ amount }}">
        </td>
        <td align="middle" style="padding-top: 1px; padding-bottom: 1px">
        With certainty:
            <b style="color: green">Get </b>

            <b>${{ amount }}</b>
        </td>
    </tr>
    {% endif %}
{% endfor %}
</table>

<br>

<div style="text-align: right;">
    <button class="btn btn-primary" onclick="myFunction()">Next</button>
</div>

{% endblock %}

{% block scripts %}

    <script src="{% static 'global/select_switching_row.js' %}"></script>
    <script src="{% static 'global/pricelist_disc.js' %}"></script>

{% endblock %}