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

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

{% block content %}

<h3>Decision screen 2</h3>
<p>
    When you fill out a choice list, you may feel <b>uncertain about whether you prefer the left or right payment option</b>. On decision screen 2, we will ask you to select a button to indicate <b>how certain</b> you are how much money the larger later payment is worth to you in terms of dollars at the earlier payment date.
</p>
<p>
    In answering this question, we ask you to assume that you would receive both payment options with certainty. We are interested in <b>your uncertainty about your own preferences regarding these payments</b>, not in your potential uncertainty about whether you would actually receive the money.
</p>
<br>
<h4>Example</h4>
<p>
    Suppose that on the first decision screen you indicated that you valued ${{ Constants.example_set.0.2 }} {{ Constants.example_set.0.0 | lower }} somewhere between $12 and $14 today. Your second decision screen would look like this.
</p>

<div style="border: 3px solid red; padding: 8px; text-align: center">
    <b style="color: red;">How certain</b> are you that you actually value ${{ Constants.example_set.0.2 }} <b>{{ Constants.example_set.0.0 | lower }}</b> somewhere between $12 and $14 <b>today</b>?
</div>

<br>

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

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

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

{% block styles %}
<style>
    .otree-title{
        background: white;
        position: absolute;
        top: 0px;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 20px;
        padding-bottom: 0;
        width: 100%;
        height: 80px;
    }
    .otree-body{
        margin-top: 110px;
    }
</style>
{% endblock %}