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

{% block title %}
  Mathematical Summation Question – Round {{ player.round_number }}
{% endblock %}

{% block content %}

{% if player.round_number == 7 %}
  <p><strong>This is a practice question.</strong> It is not used for payment.</p>
{% else %}
  <p><strong>This is a paying question.</strong></p>
{% endif %}

<p>
  Please solve the following addition problem:
</p>

<p style="font-size: 1.4em; font-weight: bold;">
  {{ num1 }} + {{ num2 }} = ?

</p>

{{ formfield 'user_sum' }}

<p>
  Correct answers in the paying questions earn you
  <strong>{{ pay_slow }} €</strong>.
  If you answer correctly in under <strong>{{ threshold }} seconds</strong>,
  you earn <strong>{{ pay_fast }} €</strong>.
</p>


{% if correct_so_far > 0 %}
  <p>
    So far you have answered <strong>{{ correct_so_far }}</strong> math
    question(s) correctly.
  </p>
{% endif %}

{{ next_button }}

{% include "thesis_exp_main_task/_music_snippet.html" %}

<input type="hidden" name="time_spent" id="time_spent_field">

<script>
let start = Date.now();

document.querySelector("form").addEventListener("submit", function() {
    let end = Date.now();
    let seconds = (end - start) / 1000;
    document.getElementById("time_spent_field").value = seconds.toFixed(3);
});
</script>


{% endblock %}