{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
Decision screen 2 (for the same lottery)<hr>
{% endblock %}

{% block content %}

    <p>For any given lottery, you may actually be <b>uncertain about how much money it is really worth</b> to you.
        For some lotteries, you may know exactly how much they are worth to you.
        For other lotteries, you may feel uncertain about whether a lottery is worth, say, $12, $13, $14, $15, or $16 to you.
</p>

    <p>On the second decision screen for a given lottery, we will hence ask you to click a button to indicate <b>how certain</b>
        you are that your decisions on the first decision screen correspond <b>exactly</b> to how much the lottery is <b>worth to you</b>.

<ul>
 
<li>
    The <b>further the button is to the right, the more certain</b> you are about how much exactly the lottery is worth to you.
</li>
</ul>
    </p>
<br>
<h4>Example</h4>

<p>
    Suppose that on the first decision screen you indicated that you valued a 5% chance of winning $18 and a 30% chance of winning $0 somewhere between $5 and $6 with certainty. Your second decision screen would look like this.
</p>

  <p>On the previous decision screen you indicated that this lottery is worth between $5 and $6 to you.</p>

<br>
    <div style="border: 3px solid red; padding: 8px; text-align: center">
    <b style="color: red;">How certain</b> are you that to you this lottery  <b>is worth <i style="color: red">exactly</i> </b> the same as getting between $5 and $6 for sure?</div>




<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 %}