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

{% block title %}
Comprehension questions <hr>
{% endblock %}

{% block content %}
<p>The  questions below test your understanding of the instructions.</p>

    <p>
<b>Important:</b> If you fail to answer any one of these questions correctly, you will not be allowed to participate
    in the rest of the study, and you will not be able to earn a bonus.
    </p>

    <ol>
<li>    <p>Which one of the following statements is correct if the following lottery is played for you?
         <table class="table table-bordered" align="center" style="border-spacing: 0; width: 50%;"><tr><td>
    With probability <b>60%: Get $ 15 </b><br>
        With probability<b> 40%: Get $ 5</b>
</td></tr></table>
    <br>
    Please select one of the statements:
    </p>


    {% formfield player.qn_lottery %}
<!-- <text style="color: indianred">{{ form.qn_lottery.errors }}</text> -->

</li>
     <br>
   <li> <p>Suppose a person made the decisions shown in the picture below. Which of the following statements is correct regarding these decisions?

    <div style="text-align: center">
<img src="{% static "within_subject_risk_lists/comprehension.png" %}" width=80% >
</div>
        Please select one of the statements:
    </p>

    {% formfield player.qn_list %}
<!-- <text style="color: indianred">{{ form.qn_list.errors }}</text> -->


</li>
         <br>
    <li><p>Now imagine that the person who made the decisions above is uncertain about how much exactly the lottery is worth to them. <br> This person, however, is  is 60% confident that it is worth between $8 and $9 to them.
        Please select the correct button to accurately reflect this level of certainty:
    </p>



<table style="table-layout: fixed; width: 100%;" >
    <tr>
        {% for x, i in radio_amounts %}
        <td style="width: 5%; text-align: center">
            <input type="radio" name="qn_confidence" id="r{{ i }}" onclick="handleClick(this)" value={{ forloop.counter0 }}>
            <br>
            {% if x != 1 %}
            <label style="; font-size: x-small" for="r{{ i }}">
                {{x}}%
            </label>
        </td>
        <td>
            {% else %}
            <label style="; font-size: x-small" for="r{{ i }}">0%
            </label>
        </td>
            {% endif %}
        {% endfor %}
    </tr>
    <tr>
        <td style="padding: 0" colspan="41" >
            <div style="display: inline; float: left" ><b>very uncertain</b></div> <div style="display: inline; float: right"><b>completely certain</b></div>
        </td>
    </tr>
</table>

<br>
<br>
<br>

<div style="text-align: right;">
    <button type="submit" class="btn btn-primary" id="confirm" disabled="disabled">Next</button>
</div>

<br>

{% endblock %}

{% block scripts %}

<script>
    function handleClick(checkedRadio) {
        checkedRadio.checked = true;
        var cansumbit = true;
        var conf = parseFloat(checkedRadio.value);
        var up = 100 - 5 * (20 - conf);
        document.getElementById("confirm").disabled = false;
        this.value = up;
}
</script>

{% endblock %}