{% 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>
<br>
    <h4>Example</h4>
<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 }}>
            <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>
  {#.myclass::-webkit-slider-thumb {#}
  {#      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;#}
  {#      border: 1px solid #000000;#}
  {#      height: 36px !important;#}
  {#      width: 4px !important;#}
  {#      border-radius: 3px !important;#}
  {#      background: #ffffff !important;#}
  {#      cursor: pointer !important !important;#}
  {#      -webkit-appearance: none !important;#}
  {#      margin-top: -14px !important;#}
  {#  }#}
  {##}
  {#  input[type=range] {#}
        {#-webkit-appearance: none;#}
  {#      margin:      0 0;#}
  {#      width: 100%;#}
  {#  }#}
  {##}
  {#  input[type=range]:focus {#}
  {#      outline: none;#}
  {#  }#}

    .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;
    }

{#    input[type=range]::-webkit-slider-thumb {#}
{#        border: 0px;#}
{#        height: 0px;#}
{#        width: 0px;#}
{#        border-radius: 0px;#}
{#        -webkit-appearance: none;#}
{#    }#}
{##}
{#    .firefox input[type=range]::-moz-range-track {#}
{#  border-radius: 8px;#}
{#  height: 7px;#}
{#  border: 1px solid #bdc3c7;#}
{#  background-color: #fff;#}
{#}#}
{#.firefox input[type=range]::-moz-range-thumb {#}
{#  background: #ecf0f1;#}
{#    background-color: green;#}
{#  border: 1px solid #bdc3c7;#}
{#  width: 20px;#}
{#  height: 20px;#}
{#  border-radius: 10px;#}
{#  cursor: pointer;#}
{#}#}


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