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

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

{% block content %}
<h3>Decision screen 2: Your certainty about your decision</h3>
<p>
    When you make your decision, you may feel <b>uncertain about which certain payment is worth as much to you as the lottery</b>. On decision screen 2, we will ask you to select a button to indicate <b>how certain</b> you are that you value the lottery within +/- $0.50 of the amount you entered on the previous screen.
</p>

<br>
<h4>Example</h4>

<p>
    Suppose that on the first decision screen you indicated that you value a 5% chance of getting $18 as much as receiving $5.50 with certainty. Your second decision screen would look like this:
</p>
<table class="table table-bordered" align="center" style="border-spacing: 0; width: 50%;">
  <td style="vertical-align: middle; text-align: center" >
    <div style="display: inline-block; text-align:left">
                   With probability <b>5% : </b>
              
                     <b>Get</b>
                  
                     <b>$18</b> <br>
		      With probability <b>95% : </b>
              
                     <b >Get</b>
                  
                     <b>$0</b> <br>
		     </div>
  </td>
</table>


<br>
    <div style="border: 3px solid red; padding: 8px; text-align: center">
    <b style="color: red;">How certain</b> are you that you actually value this lottery somewhere between  getting $5.00 and $6.00?</div>




<table style="table-layout: fixed; width: 100%; margin-top: 15px" >
    <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>


<h4>Example 2</h4>

<p>
    Suppose that on the first decision screen you indicated that you value a 5% chance of losing $18 as much as losing $5.50 with certainty. Your second decision screen would look like this:
</p>
<table class="table table-bordered" align="center" style="border-spacing: 0; width: 50%;">
  <td style="vertical-align: middle; text-align: center" >
                   With probability <b>5% : </b>
              
                     <b style="color: red">Lose</b>
                  
                     <b>$18</b> <br>
		      With probability <b>95% : </b>
              
                     <b >Lose</b>
                  
                     <b>$0</b> <br>
  </td>
</table>

<br>
    <div style="border: 3px solid red; padding: 8px; text-align: center">
    <b style="color: red;">How certain</b> are you that you value this lottery somewhere between  <b style="color: red">losing </b> $5.00 and $6.00?</div>




<table style="table-layout: fixed; width: 100%; margin-top: 15px" >
    <tr>
        {% for x, i in radio_amounts %}
        <td style="width: 5%; text-align: center">
            <input type="radio" name="qn_confidence2" 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" >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 %}