{% extends "global/Page.html" %}
{% load otree %}
{% block title %} The Task {% endblock %}

{% block app_styles %}

    <style>

        img {
            max-width: 100%;
            height: auto;
            width: auto\9; /* ie8 */
        }
        .relative{float:left; position:relative;}
        .absolute{position:absolute; bottom:0px; right:0px;}

        #dictionary {
          border-spacing:5px 0px;
          border: 10px  black;
          border-collapse: separate;

        }



    </style>

{% endblock %}

{% block scripts %}

    <script> //this script helps display the randomly chosen wage rate
     $(document).ready( function () {


        let wage_1= {{ potential_wage_low | json}};
        let wage_2={{ potential_wage_high | json}};
        let fixed_chosen= {{ fixed_possible | json }}


       if (wage_2 === 0){
            $('.outputWages').val((( "$" + wage_1+" per task")));
            //$('.output2').val((( "$"+ (low_rate*min_val).toFixed(2)    )));
        }
       else if(fixed_chosen===1){
            $('.outputWages').val((( "50% Chance of $" + wage_1+" per task, 50% Chance of $" + wage_2+ ".")));
       }
        else {
            $('.outputWages').val((( "50% Chance of $" + wage_1+" per task, 50% Chance of $" + wage_2+ " per task.")));
            //$('.output2').val((( "50% Chance of $"+ (low_rate*min_val).toFixed(2)    )));
            //$('.output3').val((( "50% Chance of $" + (hi_rate*min_val).toFixed(2)   )));
            //$('.output4').val((( "This amount of tasks should take around "+ (min_val) + " minutes to complete.")));
        }
        });



    </script>
{% endblock %}

{% block content %}

<div class = "instructions well well-ig">
    <p>
     You have now completed the {{ num_mandatory }} tasks. Once you click the next button, you will begin completing the number of tasks that you selected for the randomly chosen <em>decision-that-counts</em>. Once you finish, you will be asked to complete a very brief survey (~1 min), and will be instructed as to what to do to collect your payment.
    <p>

    <p>
    As a reminder, the number of tasks you must complete associated with the randomly selected decision-that-counts is {{ numTasks_todo }}. <br/>
    Once you finish all of these tasks, you will be receive a completion fee of {{ show_up_fee }}, and be paid according to the rate:
    <div align="center">
        <em> <output class="outputWages"></output> </em>
    </div> <br/>


</p>

</div>


<div style="float: right">{% next_button %}</div> {% endblock %}