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

{% block content %}


    <p>
The inflation rate in the United States measures the percentage change in the consumer price index, which reflects the price level of a comprehensive set of consumer goods and services purchased by households. The inflation rate in a given time period captures how much more or less expensive goods and services have become on average.


    <p>Imagine that the set of products that is used to compute the inflation rate costs $100 today.
    <br>
            What do you think is the <b>percent chance</b> that, <u>in one year from now</u>, the <b>same set of products will cost less than $ {{ invest_value }}</b>?

    </p>

<p style="font-size: smaller;">
In other words, what do you think is the percent chance that the inflation rate will be <b>lower than {{ player.task_specification }} %</b>?
</p>


<br>
    <b>Percent chance</b> that set of products will cost <b><u>less</u> than $ {{ invest_value }}</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>Percent chance</b> that set of products will cost <b>$ {{ invest_value }} <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.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 %}