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

{% block title %}
Qualification Questions <hr>
{% endblock %}

{% block content %}

    <p>
<b>Important:</b> If you answer any of the below questions incorrectly, the study ends after this page and you will receive your participation payment, but you do not qualify for 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%; text-align:center"><tr><td>
	  <div style="display: inline-block; text-align:left">
    With probability <b>60%:</b> <b>Get</b><b> $ 15 </b><br>
    With probability<b> 40%: Get $ 5</b>
    </div>
</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>

<!--
{% comment %}
   <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>
{% endcomment %}
   -->
<li>
  <p>Jon is faced with the following lottery:</p>
  <img src="{% static "within_subject_risk_lists/comp_switch_q.png" %}" width=80% >
  <p>Suppose Jon enters $13. Which one of the following statements is correct? <!--Select ALL true statements below-->:

    <!--<table border="0", style="width:100%">
      <tr>
	<td> <input name="qn_switch_1" type="checkbox" /> </td>
	<td>Jon would prefer $12 over the lottery. </td>
      </tr>
      <tr>
	<td> <input name="qn_switch_2" type="checkbox" /> </td>
	<td>Jon would prefer the lottery over any certain payment. </td>
      </tr>
      <tr>
	<td> <input name="qn_switch_3" type="checkbox" /> </td>
	<td>Jon would prefer the lottery over $10.</td>
      </tr>
    </div>
</table>
-->

{% formfield player.qn_switch %}


</li>

<br>
<br>
    
   
   
    <li><p>Now imagine that Jon is uncertain about how much exactly the lottery is worth to him. <br> Jon; however, is 60% certain that the lottery is worth between $12.5 and $13.5 to him.
        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_confidence1" 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 %}