{% extends "global/Page.html" %}
{% load otree %}
{% block title %}
Question about the Stock Market <hr>
{% endblock %}

{% block content %}


   <p>
The S&P 500 is an American stock market index that includes 500 of the largest companies based in the United States.

</p>

<p>Jon invested $100 in the S&P 500 today. <br>
  What is the <b>percent chance</b> that the <b>value of his investment will be <u>less than $ {{ invest_value }}</u></b> in one year from now? </p>


<p style="font-size: smaller">In other words, what do you think is the percent chance that Jon will
            {%  if player.task_specification < 0 %} lose <u>more</u> than ${{ abs_task_spec }} (as opposed to losing less than ${{ abs_task_spec }} or gaining money)
            {%  else %} <u>gain less than ${{ abs_task_spec }}</u> or <u>lose money</u> 
            {% endif %} on his investment over the next year?</p>


<br>
    <b>Percent chance</b> that Jons investment will be worth<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>



<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) {
          $('#confirm').prop('disabled', false);
        }
        else {
          $('#confirm').prop('disabled', true);

        }
        });

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

    });

</script>

{% endblock %}