{% extends "global/Page.html" %}
{% load otree %}
{% block title %}
Your certainty about your  estimate <hr>
{% endblock %}

{% block content %}

    <p>
        On the previous screen, you indicated that you think that in 2018, a randomly selected household in the United States <b>earned less than $ {{ income_spec }}</b>
        <b>with a <u>probability of {{ player.belief }} %</u></b>.
    </p>


<br>

        <div style="border: 3px solid red; padding: 8px; text-align: center">
<b style="color: red">How certain</b> are you that your guess of {{ player.belief }} % is within &#177 1 percentage point of the guess that would be statistically optimal given the information that you have?</b>?
    </div>
    {% if player.round_number == 1 %}<br><br>Use the slider to complete the statement below. <i>You have to touch the slider at least once to proceed.</i>{% endif %}

      <table class="w3-table w3-white" style="border-spacing: 0; width: 100%">
        <colgroup>
            <!--<col width="25%">-->
            <col width="100%">
        </colgroup>
<tr>
<td> <input type="range" class="myclassRed" name="certainty" id="certainty" value="30" style="width: 100%" min="0" max="30" step="1";/> </td>
</tr>
          <tr><td>
          <div class="sliderticks">
      <p>    </p>
        <p> </p>
      </td> </tr>
      <tr>
          <td style="padding: 0" >
              <div style="display: inline; float: left" ><b>very uncertain</b></div> <div style="display: inline; float: right"><b>completely certain</b></div>
          </td></tr>

          <br></table><br>

    I am certain that the <b>actual probability</b>  that a household earned less than $ {{ income_spec }} is <b style="color: red"> <u><output id="text_conf_intro"><text>Use the slider! </text> </output></u></b>.


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





        {{form.errors}}

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

.sliderticks {
  display: flex;
  justify-content: space-between;
  padding: 0px 0 0px 0px;
}

.sliderticks p {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  width: 2px;
  background: black ;
  height: 12px;
  line-height: 45px;
  margin: 0 0 0 0;
}

</style>

{% endblock %}


{% block scripts %}

      <script>

function displayRange() {

    var val = {{ player.belief }};
    var step_size = 1;
    var lower_bound = 0;
    var upper_bound = 100;
    var slider_max = 30;
    var conf = parseFloat(document.getElementById("certainty").value);

    var up = val + step_size * (slider_max - conf);
    var low = val - step_size * (slider_max - conf);

    if (conf == slider_max) {
        document.getElementById("text_conf_intro").value = (val).toFixed(0).toString() + " %";
    }
     else if (up < upper_bound && low > lower_bound) {
            document.getElementById("text_conf_intro").value = "between " + (low).toFixed(0).toString() + " % and " + (up).toFixed(0).toString() + " %"
    }
    else if (up < upper_bound && low <= lower_bound) {
            document.getElementById("text_conf_intro").value = "between " + (lower_bound).toFixed(0).toString() + " % and " + (up).toFixed(0).toString() + " %"
    }
    else if (up >= upper_bound && low > lower_bound) {
            document.getElementById("text_conf_intro").value = "between " + (low).toFixed(0).toString() + " % and " + (upper_bound).toFixed(0).toString() + " %"
    }
    else if (up >= upper_bound && low <= lower_bound) {
            document.getElementById("text_conf_intro").value = "between " + (lower_bound).toFixed(0).toString() + " % and " + (upper_bound).toFixed(0).toString() + " %"
    }
}
    </script>
<script>

$(document).ready(function () {


$('#certainty').on('mouseup keyup', function () {
    {#$('#certainty').addClass('myclass');#}
    $('#confirm').prop('disabled', false);
    displayRange();
});


    });
</script>



{% endblock %}