{% extends "global/Page.html" %}
{% load otree %}
{% block title %}
Question {{ player.round_number }}<hr>
{% endblock %}

{% block content %}


    <p>
        Assume that in 2018, we <b>randomly picked a household</b> in the United States.
    </p>

    <p>
        What do you think is the <b>probability</b> that this household <b>earned <i>less</i> than  $ {{ income_spec }} in 2017</b>, before taxes and deductions?
    </p>

<br>
<b>Probability</b> that this household <b>earned <u>less</u> than  $ {{ income_spec }}</b>:
    <div style="width: 200px; display: inline-block; text-align: right"> <b><input type="number" min="0" step="0.01" max="100" name="belief" id="belief" required
                                         style="font-weight: bold; border-radius: 4px; width: 60px; text-align: right; border-width: 1px"> %</b>
        </div>
    <br>
<b>Probability</b> that this household <b>earned  $ {{ income_spec }} <u>or more</u></b>:    <div style="width: 210px; display: inline-block; text-align: right">
        <b><output id="text_post"><text style="color: red">Enter number above!</text></output></b>
    </div>


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





<!--        {{form.belief.errors}} -->

{% endblock %}



{% block scripts %}

<script>

$(document).ready(function () {


$('#belief').on('keyup mouseup', function () {
   var x = parseFloat(document.getElementById("belief").value);
        if (x >= 0 && x <= 100) {
                document.getElementById('text_post').style.color = "black";
            document.getElementById('text_post').value = (Math.round((100-x)*100)/100).toString() + ' %';
                                      document.getElementById('text_post').style.fontSize = "100%";
          $('#confirm').prop('disabled', false);
        }
        else {
        document.getElementById('text_post').value = 'Enter number between 0 and 100';
                          document.getElementById('text_post').style.fontSize = "70%";
  document.getElementById('text_post').style.color = "red";
          $('#connfirm').prop('disabled', true);

        }
        });

    //         $('input[type=radio]').click(function(){
    // $('#submit_difficulty').prop('disabled', false);
    // });

    });

</script>

{% endblock %}