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

{% block title %}
Qualification Questions
{% 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>
   
{% formfield player.qn_draws %}
<text style="color: indianred"></text>
	  </li>
	  <li>
<p>Suppose there are 70 Bag A cards and 30 Bag B cards in the deck. Further suppose there are more red balls in Bag A than there are red balls in Bag B. Next, one red ball is drawn from the secretly selected bag. <br>
  Which one of the following guesses is closest to the statistically optimal guess?
<p>
  {{ form.qn_balls }}
  </li>
	  <br>
	  <li>
  <p>Suppose that in a given task you guess that the probability that Bag A was selected is 70%. Further suppose you are 60% certain that the optimal guess is actually somewhere between 69% and 71% (close to your guess). Please select the appropriate button below to indicate 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>
	  </li>
	  </ol>
<br>
<br>
<br>


<div style="text-align: right;">
    {% next_button %}
   </div>
{% endblock %}


{% block styles %}

<style>
    .button {
  background-color: lightgrey; /* Green */
  border: black;
  color: black;
  border-radius: 2px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  padding: 0;
}
</style>
{% 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 %}