{% extends "global/Page.html" %}
{% load otree static %}

{% block styles %}
<style>
.content {
    height:100%;
    justify-content: center;
    align-items: center;
    border: 5px solid black;
    padding-top: 5%;
}
.page-header {
    margin: 0px;
}

.otree-body.container {
    margin: 0px auto 0px;
    font-size: 1.3rem;
    font-weight: normal;
}

body {background-color:black;}
</style>
{% endblock %}

{% block title %}
{% endblock %}

{% block content %}
<div class="row content">
    <div class="col-8">
        <h2>Phase 1 Results</h2>
    Your Accuracy: {{ accuracy|stringformat:".2f" }}%<br>
    Your Speed (Average Decision Time): {{ speed }} seconds<br>
        Your Bonus Payment: {{ Constants.rate_accuracy }} x {{ accuracy_per|stringformat:".2f" }} -
        {{ Constants.rate_speed }} x {{ speed }} = {{ player.pay_task }}
    <br><br>

    <h2>Phase 2 Results</h2>
    <br>
        {% if OwnForecastFirst == 1 and OwnOrder == 1 %}
            <p>QUESTION 1</p>
            Your Accuracy for Number in Interval [52,58]: {{ player.accuracy_own_close }}%<br>
            Guess of Your Accuracy for Number in Interval [52,58]: {{ player.forecast_own_close }}%<br>
            Your Bonus Payment: {{ player.forecast_own_close_payoff }}
            <br>
            <br>
            <p>QUESTION 2</p>
            Your Accuracy for Number in Intervals [11,53) and (57,99]: {{ player.accuracy_own_far }}% <br>
            Guess of Your Accuracy for Number in Intervals [11,53) and (57,99]: {{ player.forecast_own_far }}%<br>
            Your Bonus Payment: {{ player.forecast_own_far_payoff }}
            <br>
            <br>
            <p>QUESTIONS 3-4</p>
            Guess of Other Participants' Accuracy for Number Equal to 47: {{ player.forecast_other_47 }}%<br>
            Guess of Other Participants' Accuracy for Number Equal to 54: {{ player.forecast_other_54 }}%<br>
            Your bonus payment for these question will be calculated when the data collection is over.

        {% elif OwnForecastFirst == 1 and OwnOrder == 2 %}
        <p>QUESTION 1</p>
        Your Accuracy for Number in Intervals [11,53) and (57,99]: {{ player.accuracy_own_far }}% <br>
        Guess of Your Accuracy for Number in Intervals [11,53) and (57,99]: {{ player.forecast_own_far }}%<br>
        Your Bonus Payment: {{ player.forecast_own_far_payoff }}
        <br>
        <br>
        <p>QUESTION 2</p>
        Your Accuracy for Number in Interval [52,58]: {{ player.accuracy_own_close }}%<br>
        Guess of Your Accuracy for Number in Interval [52,58]: {{ player.forecast_own_close }}%<br>
        Your Bonus Payment: {{ player.forecast_own_close_payoff }}
        <br>
        <br>
        <p>QUESTIONS 3-4</p>
        Guess of Other Participants' Accuracy for Number Equal to 47: {{ player.forecast_other_47 }}%<br>
        Guess of Other Participants' Accuracy for Number Equal to 54: {{ player.forecast_other_54 }}%<br>
        Your bonus payment for these question will be calculated when the data collection is over.

        {% elif OwnForecastFirst == 0 and OwnOrder == 2 %}
        <p>QUESTIONS 1-2</p>
        Guess of Other Participants' Accuracy for Number Equal to 47: {{ player.forecast_other_47 }}%<br>
        Guess of Other Participants' Accuracy for Number Equal to 54: {{ player.forecast_other_54 }}%<br>
        Your bonus payment for these question will be calculated when the data collection is over.
        <br>
        <br>
        <p>QUESTION 3</p>
        Your Accuracy for Number in Intervals [11,53) and (57,99]: {{ player.accuracy_own_far }}% <br>
        Guess of Your Accuracy for Number in Intervals [11,53) and (57,99]: {{ player.forecast_own_far }}%<br>
        Your Bonus Payment: {{ player.forecast_own_far_payoff }}
        <br>
        <br>
        <p>QUESTION 4</p>
        Your Accuracy for Number in Interval [52,58]: {{ player.accuracy_own_close }}%<br>
        Guess of Your Accuracy for Number in Interval [52,58]: {{ player.forecast_own_close }}%<br>
        Your Bonus Payment: {{ player.forecast_own_close_payoff }}

        {% elif OwnForecastFirst == 0 and OwnOrder == 1 %}
        <p>QUESTIONS 1-2</p>
        Guess of Other Participants' Accuracy for Number Equal to 47: {{ player.forecast_other_47 }}%<br>
        Guess of Other Participants' Accuracy for Number Equal to 54: {{ player.forecast_other_54 }}%<br>
        Your bonus payment for these question will be calculated when the data collection is over.
        <br>
        <br>
        <p>QUESTION 3</p>
        Your Accuracy for Number in Interval [52,58]: {{ player.accuracy_own_close }}%<br>
        Guess of Your Accuracy for Number in Interval [52,58]: {{ player.forecast_own_close }}%<br>
        Your Bonus Payment: {{ player.forecast_own_close_payoff }}
        <br>
        <br>
        <p>QUESTION 4</p>
        Your Accuracy for Number in Intervals [11,53) and (57,99]: {{ player.accuracy_own_far }}% <br>
        Guess of Your Accuracy for Number in Intervals [11,53) and (57,99]: {{ player.forecast_own_far }}%<br>
        Your Bonus Payment: {{ player.forecast_own_far_payoff }}
        <br>
        <br>
      {% endif %}

  {#    TOTAL BONUS PAYMENT:    #}
  {#      {{ player.pay_task }} + {{ player.forecast_own_close_payoff }} + {{ player.forecast_own_far_payoff }} +     #}
  {#      {{ player.forecast_other_close_payoff }} + {{ player.forecast_other_far_payoff }} = {{ player.payoff }}     #}

     <br><br>
        <div style="text-align:center;">
            <center>
         <b><font color="red"><a href="https://app.prolific.co/submissions/complete?cc=73E92D32">CLICK HERE</a> to confirm you completed the study and be paid!</font></b>
        </center>
        </div>
  </div>
</div>

<div class="btn-div">
    <button id="confirm" type="submit" style="display:none;">Confirm</button>

</div>
{% endblock %}

{% block scripts %}
<script>
    var confirm = document.getElementById("confirm");

    function confirmClicked() {
        confirm.click();
    }

    document.onkeydown = function (e) {
        var keyCode = e.keyCode;
        // When ENTER is pressed
        if(keyCode == 13) {
            confirmClicked();
        }
    };
</script>
{% endblock %}