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

{% block head_title %}

        Study

{% endblock %}

{% block styles %}

    <style type="text/css">
        h1 {text-align: center; font-size: 35px;}

        .otree-timer {
            font-weight: bold;
            background-color: White;
            text-align: center;
            border-style:none;
            border-color: coral;
            border-width: thin;
            font-size:30px;
            color: orangered;
            display: none;
        }
    </style>

{% endblock %}

{% block content %}

<h1>Result</h1>

<script>

        $(function deductiontimer() {
                var seconds, minutes;
                $('.otree-timer__time-left').on('update.countdown', function (event) {
                    seconds = event.offset.totalSeconds%60;
                    minutes = Math.floor(event.offset.totalSeconds/60);
                    seconds = seconds;
                    document.querySelector('#deductiontimer').textContent =  seconds;
                    document.querySelector('#deductiontimer').style.backgroundColor = 'white';
                });
            })

        </script>


<div class="card bg-light m-3">
    <div class="card-body">
        <div class="justify">


            <p style="font-size:18px; text-align:center;">


                {% if subsession.round_number <= Constants.num_rounds %}

                        {% if player.correct == 1 %}

                            You chose the correct answer for Game {{ subsession.round_number }}

                            {% if player.time_spent > player.my_page_timeout_seconds %}

                                but you exceeded the time limit

                            {% endif  %}

                            {% if player.time_spent <= player.my_page_timeout_seconds %}

                                within the time limit

                            {% endif  %}

                            . <br>

                            <br> The time limit for this game was {{player.my_page_timeout_seconds|floatformat:0 }} seconds.  <br>

                            <br> You finished the game in {{player.time_spent|floatformat:0 }} seconds. <br>

                            {% if player.time_spent > player.my_page_timeout_seconds %}

                                <br> You exceeded the time limit. Therefore your remaining payoff is &pound; {{player.payoff_unknown|floatformat:2}}. <br>

                            {% endif  %}

                            {% if player.time_spent <= player.my_page_timeout_seconds %}

                                <br> You did not exceed the time limit. Therefore your remaining payoff is &pound; {{player.payoff_unknown|floatformat:2}}. <br>

                            {% endif  %}


                        {% else %}

                            You chose the wrong answer for Game {{ subsession.round_number }}. <br>

                            <br> The time limit for this game was {{player.my_page_timeout_seconds|floatformat:0 }} seconds. <br>

                            <br> You spent {{player.time_spent|floatformat:0 }} seconds. <br>

                            {% if player.time_spent > player.my_page_timeout_seconds %}

                                <br> You exceeded the time limit. Therefore your remaining payoff is &pound; {{player.payoff_unknown|floatformat:2}}. <br>

                            {% endif  %}

                            {% if player.time_spent <= player.my_page_timeout_seconds %}

                                <br> You did not exceed the time limit. Therefore your remaining payoff is &pound; {{player.payoff_unknown|floatformat:2}}. <br>

                            {% endif  %}

                        {% endif %}

                {% endif  %}


                {% if subsession.round_number == Constants.num_rounds %}
                      <br>  Your payoff for this round is &pound; {{player.payoff_unknown|floatformat:2}}. <br>

                {% endif  %}


            </p>

        </div>
    </div>
</div>


<div>
        <p style="font-size:15px; color: black;  margin-Left:35px; text-align:right;"> Seconds left on this page: <span id="deductiontimer"  style="color:black;
        text-align:right; font-size: 15px"> </span>  </p>
    </div>


<!--

     <table class="table" style="table-layout: fixed;">
        <tr style="text-align: center">
            <th>      Game                                 </th>
            <th>      Game Solved                        </th>
            <th>      Payoff                               </th>


        </tr>


        {% if subsession.round_number <= Constants.num_rounds %}
        <tr style="text-align: center">
                <td>  {{ subsession.round_number }}                                       </td>
                <td>  {% if player.correct == 1 %} Yes {% else %} No {% endif %}          </td>
                <td>   {{player.payoff_unknown|floatformat:2}}                                   </td>


        </tr>
        {% endif  %}



     </table>


        {% if subsession.round_number == Constants.num_rounds %}
          <br>  Your payoff for this round is &pound; {{player.payoff_unknown|floatformat:2}}. <br>

        {% endif  %}


-->





    <input type="hidden"   name="payoff_unknown"           id="id_payoff_unknown"        />
    <input type="hidden"   name="time_spent"           id="id_time_spent"  />



{{ form.errors }}


{% endblock %}



{% block scripts %}
    <script type="text/javascript">
        var payoff_unknown = js_vars.payoff_unknown;
        var time_spent = js_vars.time_spent;

        document.getElementById('id_payoff_unknown').value = payoff_unknown;
        document.getElementById('id_time_spent').value = time_spent;



    </script>
{% endblock %}