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

{% block content %}
{% include "global/open.html" %}
<!-- Task 1 -->
<div class="tab-pane math-task show active" id="task1" role="tabpanel" aria-labelledby="task1-tab">
  <br>
  <div class="container" align="center">
  You have successfully solved <span id=task_num></span> math tasks so far.
  <br>
  <br>
  <!-- math 1 -->
  <div id="math1">
  <div class="sequence">
    <div class="form-group required form-inline d-flex align-items-center">
        <label class="col-form-label" for="id_math_1" onmousedown='return false;' onselectstart='return false;'>{{math_1_label}}</label>
        <div class="controls  field-math_1">
        <input type="number" name="math_1" required="" id="id_math_1" class="form-control">
          </div>
          <input type="button" class="btn-primary btn eval" value="Enter" OnClick="Eval_Input(num)"></input>
    </div>
  </div>
</div>
  <!-- math 2 -->
  <div class='hidden-seq' id="math2">
  <div class="sequence ">
    <div class="form-group required form-inline d-flex align-items-center">
        <label class="col-form-label" for="id_math_2" onmousedown='return false;' onselectstart='return false;'>{{math_2_label}}</label>
        <div class="controls  field-math_2">
        <input type="number" name="math_2" required="" id="id_math_2" class="form-control">
          </div>
        <input type="button" class="btn-primary btn eval" value="Enter" OnClick="Eval_Input(num)"></input>
    </div>
  </div>
  </div>
  <!-- math 3 -->
  <div class='hidden-seq' id="math3">
  <div class="sequence ">
    <div class="form-group required form-inline d-flex align-items-center">
        <label class="col-form-label" for="id_math_3" onmousedown='return false;' onselectstart='return false;'>{{math_3_label}}</label>
        <div class="controls  field-math_3">
        <input type="number" name="math_3" required="" id="id_math_3" class="form-control">
          </div>
        <input type="button" class="btn-primary btn eval" value="Enter" OnClick="Eval_Input(num)"></input>
    </div>
  </div>
  </div>
  <!-- math 4 -->
  <div class='hidden-seq' id="math4">
  <div class="sequence">
    <div class="form-group required form-inline d-flex align-items-center">
        <label class="col-form-label" for="id_math_4" onmousedown='return false;' onselectstart='return false;'>{{math_4_label}}</label>
        <div class="controls  field-math_4">
        <input type="number" name="math_4" required="" id="id_math_4" class="form-control">
          </div>
        <input type="button" class="btn-primary btn eval" value="Enter" OnClick="Eval_Input(num)"></input>
    </div>
  </div>
  </div>
  <!-- math 5 -->
  <div class='hidden-seq' id="math5">
  <div class="sequence">
    <div class="form-group required form-inline d-flex align-items-center">
        <label class="col-form-label" for="id_math_5" onmousedown='return false;' onselectstart='return false;'>{{math_5_label}}</label>
        <div class="controls  field-math_5">
        <input type="number" name="math_5" required="" id="id_math_5" class="form-control">
          </div>
        <input type="button" class="btn-primary btn eval" value="Enter" OnClick="Eval_Input(num)"></input>
    </div>
  </div>
  </div>
  <!-- math 6 -->
  <div class='hidden-seq' id="math6">
  <div class="sequence">
    <div class="form-group required form-inline d-flex align-items-center">
        <label class="col-form-label" for="id_math_6" onmousedown='return false;' onselectstart='return false;'>{{math_6_label}}</label>
        <div class="controls  field-math_6">
        <input type="number" name="math_6" required="" id="id_math_6" class="form-control">
          </div>
        <input type="button" class="btn-primary btn eval" value="Enter" OnClick="Eval_Input(num)"></input>
    </div>
  </div>
  </div>
  <!-- math 7 -->
  <div class='hidden-seq' id="math7">
  <div class="sequence">
    <div class="form-group required form-inline d-flex align-items-center">
        <label class="col-form-label" for="id_math_7" onmousedown='return false;' onselectstart='return false;'>{{math_7_label}}</label>
        <div class="controls  field-math_7">
        <input type="number" name="math_7" required="" id="id_math_7" class="form-control">
          </div>
        <input type="button" class="btn-primary btn eval" value="Enter" OnClick="Eval_Input(num)"></input>
    </div>
  </div>
  </div>
  <!-- math 8 -->
  <div class='hidden-seq' id="math8">
  <div class="sequence">
    <div class="form-group required form-inline d-flex align-items-center">
        <label class="col-form-label" for="id_math_8" onmousedown='return false;' onselectstart='return false;'>{{math_8_label}}</label>
        <div class="controls  field-math_8">
        <input type="number" name="math_8" required="" id="id_math_8" class="form-control">
          </div>
        <input type="button" class="btn-primary btn eval" value="Enter" OnClick="Eval_Input(num)"></input>
    </div>
  </div>
  </div>
  <!-- math 9 -->
  <div class='hidden-seq' id="math9">
  <div class="sequence">
    <div class="form-group required form-inline d-flex align-items-center">
        <label class="col-form-label" for="id_math_9" onmousedown='return false;' onselectstart='return false;'>{{math_9_label}}</label>
        <div class="controls  field-math_9">
        <input type="number" name="math_9" required="" id="id_math_9" class="form-control">
          </div>
        <input type="button" class="btn-primary btn eval" value="Enter" OnClick="Eval_Input(num)"></input>
    </div>
  </div>
  </div>
  <!-- math 10 -->
  <div class='hidden-seq' id="math10">
  <div class="sequence">
    <div class="form-group required form-inline d-flex align-items-center">
        <label class="col-form-label" for="id_math_10" onmousedown='return false;' onselectstart='return false;'>{{math_10_label}}</label>
        <div class="controls  field-math_10">
        <input type="number" name="math_10" required="" id="id_math_10" class="form-control">
          </div>
        <input type="button" class="btn-primary btn eval" value="Enter" OnClick="Eval_Input(num)"></input>
    </div>
  </div>
  </div>
<div class="invalid-feedback" id="error-message">
    Your input of <span id="error-input"></span> is incorrect. Please try again!
</div>
</div>
{% next_button %}
</div>

{% block hidden_input_fields %}
<input type="hidden" name="timer_task1" value="0" id="timer_task1"/>
<input type="hidden" name="new_timer_task1" value="0" id="new_timer_task1"/>
<input type="hidden" name="timer_task2" value="0" id="timer_task2"/>
<input type="hidden" name="new_timer_task2" value="0" id="new_timer_task2"/>
<input type="hidden" name="total_time" value="0" id="total_time"/>

<input type="hidden" name="math_time" value="0" id="math_time"/>
<input type="hidden" name="memory_time" value="0" id="memory_time"/>

<input type="hidden" name="switch_counter" value="0" id="switch_counter"/>

<input type="hidden" name="MathTask_time_spent" value="0" id="MathTask_time_spent"/>
<input type="hidden" name="MathTask_warnings" value="0" id="MathTask_warnings"/>

<input type="hidden" name="math_1_time" id="math_1_time"/>
<input type="hidden" name="math_2_time" id="math_2_time"/>
<input type="hidden" name="math_3_time" id="math_3_time"/>
<input type="hidden" name="math_4_time" id="math_4_time"/>
<input type="hidden" name="math_5_time" id="math_5_time"/>
<input type="hidden" name="math_6_time" id="math_6_time"/>
<input type="hidden" name="math_7_time" id="math_7_time"/>
<input type="hidden" name="math_8_time" id="math_8_time"/>
<input type="hidden" name="math_9_time" id="math_9_time"/>
<input type="hidden" name="math_10_time" id="math_10_time"/>



<input type="hidden" name="math_1_tries" id="math_1_tries"/>
<input type="hidden" name="math_2_tries" id="math_2_tries"/>
<input type="hidden" name="math_3_tries" id="math_3_tries"/>
<input type="hidden" name="math_4_tries" id="math_4_tries"/>
<input type="hidden" name="math_5_tries" id="math_5_tries"/>
<input type="hidden" name="math_6_tries" id="math_6_tries"/>
<input type="hidden" name="math_7_tries" id="math_7_tries"/>
<input type="hidden" name="math_8_tries" id="math_8_tries"/>
<input type="hidden" name="math_9_tries" id="math_9_tries"/>
<input type="hidden" name="math_10_tries" id="math_10_tries"/>
{% endblock %}

{% include "global/fclose.html" %}

{% endblock %}

{% block styles %}

{% include "global/styles/mathtask.css" %}

{% include "global/styles/disable_rightclick.css" %}

{% endblock %}

{% block scripts %}

{% include "global/scripts/scriptsheet.js" %}

{% include "global/scripts/new_time.js" %}

{% include "global/scripts/ability_math.js" %}

{% endblock %}