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

{% block title %}
    Instructions (3/4)
    <hr>
{% endblock %}

{% block content %}
    <!--<text style="font-size:large">-->

    <h4>The optimal guess</h4>

    <p>
        Using the laws of probability, the computer computes a <b>statistically correct statement of the probability that Bag A was selected</b>,
        based on all the information available to you.
        This <b>optimal guess</b> does not rely on information that you do not have. It is just the best possible (this means: payoff-maximizing) estimate given the available information.
        In technical terms, this guess is based on a statistical rule called Bayes' Law.
    </p>
    <br>

    <h4>Decision screen 2: Your certainty about your guess</h4>

    In any given task, you may actually be <b>uncertain about whether your probability guess corresponds to the optimal guess</b>. On decision screen 2, we will ask you to select a button to indicate <b>how certain</b> you are that the optimal guess is within &#177 1 percentage point of your answer.

    <br>
    <br>

    <h4>Example</h4>

    {% include "beliefs_default_manip/CardsBagsDrawIllustration.html" %}

    <p>
        Suppose that you stated that Bag A was selected with probability 80%. Your second decision screen would then look like this:
    </p>

    <p>Your decision on the previous screen indicates that you believe there is a 80% chance of Bag A having been selected.</p>


    <div style="border: 3px solid red; padding: 4px; text-align: center;  width:90%; margin:auto">
        <b style="color: red;">How certain</b> are you that the optimal guess is somewhere between 79.0% and 81.0%?

    </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_confidence" id="r{{ i }}" onclick="handleClick(this)" value={{ forloop.counter0 }} required>
                    <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;">
        {% next_button %}
    </div>
{% endblock %}




{% block styles %}
    <style>
        .myclassBlue::-webkit-slider-runnable-track {
            width: 100%;
            height: 8.4px;
            cursor: pointer;
            animate: 0;
            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
            background: white;
            border-radius: 1.3px;
            border: 0.2px solid #010101;
        }

        .myclassRed::-webkit-slider-runnable-track {
            width: 100%;
            height: 8.4px;
            cursor: pointer;
            animate: 0;
            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
            background: gray;
            border-radius: 1.3px;
            border: 0.2px solid #010101;
        }

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