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

{% block content %}

{# fopen before title ; Aussehen #}
{% include "global/fopen_bt.html" %}
{# fopen before after ; Aussehen #}
{% include "global/fopen_at.html" %}

<!-- Tab navigation -->
<div class="sticky bar_container">
<ul class="nav nav-tabs navbar-light bg-light justify-content-center bar" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link math-tab active" id="task1-tab" data-bs-toggle="tab" href="#task1" role="tab" aria-controls="task1" onclick="topFunction();Timer_1(switch_click);">
            Task 1
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link memory-tab" id="task2-tab" data-bs-toggle="tab" href="#task2" role="tab" aria-controls="task2" onclick="topFunction();Timer_2(switch_click);">
            Task 2
        </a>
    </li>
</ul>
</div>

<div class="tab-content" id="myTabContent">

<!-- Task 1 -->
<div class="tab-pane math-task show active" id="task1" role="tabpanel" aria-labelledby="task1-tab">
  <div class="container" align="center">
  <br>
  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 math-input">
          </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 math-input">
          </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 math-input">
          </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 math-input">
          </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 math-input">
          </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 math-input">
          </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 math-input">
          </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 math-input">
          </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 math-input">
          </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 math-input">
          </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" style="font-size: 100%;">
    Your input of <span id="error-input"></span> is incorrect. Please try again!
</div>
  <div class="feedback" style="font-size: 100%;">
      You have solved all math tasks!
  </div>
</div>
<br>

<div class="switch-group">
<button type="button" onclick="topFunction();Timer_2(switch_click);"  class="nexttab btn-secondary btn next" id="nexttab" value="Switch Task">Switch Task</button>
</div>
</div>

<!-- Task 2 -->
<div class="tab-pane pwd-task" id="task2" role="tabpanel" aria-labelledby="task2-tab">
  <br>
  <div class="container" align="center">
  You have successfully entered <span id=pwd_task_num></span> codes so far.
  <br>
  <br>
  <!-- pwd 1 -->
  <div id="pwd1">
  <div class="sequence">
    <div class="form-group required form-inline d-flex align-items-center">
        <div class="label-field label-pwd-1">
        <label class="col-form-label" for="id_pwd_1" onmousedown='return false;' onselectstart='return false;'>{{pwd_1_label}}</label>
        </div>
      <div class="input-field input-pwd-1">
        <div class="controls field-pwd_1">
        <input type="number" name="pwd_1" required="" id="id_pwd_1" class="form-control pwd-input">
          </div>
      </div>
          <button type="button" class="btn-secondary btn toggle" id="toggle_btn" value="Next" OnClick="Toggle_Screen(pwd_num)">Next</button>
      <div class="input-field input-pwd-1">
          <input type="button" class="btn-primary btn eval" value="Enter" OnClick="Eval_Pwd_Input(pwd_num)"></input>
        </div>
    </div>
  </div>
</div>
  <!-- pwd 2 -->
  <div class='hidden-seq' id="pwd2">
    <div class="sequence">
      <div class="form-group required form-inline d-flex align-items-center">
          <div class="label-field label-pwd-2">
          <label class="col-form-label" for="id_pwd_2" onmousedown='return false;' onselectstart='return false;'>{{pwd_2_label}}</label>
          </div>
        <div class="input-field input-pwd-2">
          <div class="controls field-pwd_2">
          <input type="number" name="pwd_2" required="" id="id_pwd_2" class="form-control pwd-input">
            </div>
        </div>
            <button type="button" class="btn-secondary btn toggle" id="toggle_btn" value="Next" OnClick="Toggle_Screen(pwd_num)">Next</button>
        <div class="input-field input-pwd-2">
            <input type="button" class="btn-primary btn eval" value="Enter" OnClick="Eval_Pwd_Input(pwd_num)"></input>
          </div>
      </div>
    </div>
  </div>
  <!-- pwd 3 -->
  <div class='hidden-seq' id="pwd3">
    <div class="sequence">
      <div class="form-group required form-inline d-flex align-items-center">
          <div class="label-field label-pwd-3">
          <label class="col-form-label" for="id_pwd_3" onmousedown='return false;' onselectstart='return false;'>{{pwd_3_label}}</label>
          </div>
        <div class="input-field input-pwd-3">
          <div class="controls field-pwd_3">
          <input type="number" name="pwd_3" required="" id="id_pwd_3" class="form-control pwd-input">
            </div>
        </div>
            <button type="button" class="btn-secondary btn toggle" id="toggle_btn" value="Next" OnClick="Toggle_Screen(pwd_num)">Next</button>
        <div class="input-field input-pwd-3">
            <input type="button" class="btn-primary btn eval" value="Enter" OnClick="Eval_Pwd_Input(pwd_num)"></input>
          </div>
      </div>
    </div>
  </div>
  <!-- pwd 4 -->
  <div class='hidden-seq' id="pwd4">
    <div class="sequence">
      <div class="form-group required form-inline d-flex align-items-center">
          <div class="label-field label-pwd-4">
          <label class="col-form-label" for="id_pwd_4" onmousedown='return false;' onselectstart='return false;'>{{pwd_4_label}}</label>
          </div>
        <div class="input-field input-pwd-4">
          <div class="controls field-pwd_4">
          <input type="number" name="pwd_4" required="" id="id_pwd_4" class="form-control pwd-input">
            </div>
        </div>
            <button type="button" class="btn-secondary btn toggle" id="toggle_btn" value="Next" OnClick="Toggle_Screen(pwd_num)">Next</button>
        <div class="input-field input-pwd-4">
            <input type="button" class="btn-primary btn eval" value="Enter" OnClick="Eval_Pwd_Input(pwd_num)"></input>
          </div>
      </div>
    </div>
  </div>
  <!-- pwd 5 -->
  <div class='hidden-seq' id="pwd5">
    <div class="sequence">
      <div class="form-group required form-inline d-flex align-items-center">
          <div class="label-field label-pwd-5">
          <label class="col-form-label" for="id_pwd_5" onmousedown='return false;' onselectstart='return false;'>{{pwd_5_label}}</label>
          </div>
        <div class="input-field input-pwd-5">
          <div class="controls field-pwd_5">
          <input type="number" name="pwd_5" required="" id="id_pwd_5" class="form-control pwd-input">
            </div>
        </div>
            <button type="button" class="btn-secondary btn toggle" id="toggle_btn" value="Next" OnClick="Toggle_Screen(pwd_num)">Next</button>
        <div class="input-field input-pwd-5">
            <input type="button" class="btn-primary btn eval" value="Enter" OnClick="Eval_Pwd_Input(pwd_num)"></input>
          </div>
      </div>
    </div>
</div>
  <!-- pwd 6 -->
  <div class='hidden-seq' id="pwd6">
    <div class="sequence">
      <div class="form-group required form-inline d-flex align-items-center">
          <div class="label-field label-pwd-6">
          <label class="col-form-label" for="id_pwd_6" onmousedown='return false;' onselectstart='return false;'>{{pwd_6_label}}</label>
          </div>
        <div class="input-field input-pwd-6">
          <div class="controls field-pwd_6">
          <input type="number" name="pwd_6" required="" id="id_pwd_6" class="form-control pwd-input">
            </div>
        </div>
            <button type="button" class="btn-secondary btn toggle" id="toggle_btn" value="Next" OnClick="Toggle_Screen(pwd_num)">Next</button>
        <div class="input-field input-pwd-6">
            <input type="button" class="btn-primary btn eval" value="Enter" OnClick="Eval_Pwd_Input(pwd_num)"></input>
          </div>
      </div>
    </div>
  </div>
  <!-- pwd 7 -->
  <div class='hidden-seq' id="pwd7">
    <div class="sequence">
      <div class="form-group required form-inline d-flex align-items-center">
          <div class="label-field label-pwd-7">
          <label class="col-form-label" for="id_pwd_7" onmousedown='return false;' onselectstart='return false;'>{{pwd_7_label}}</label>
          </div>
        <div class="input-field input-pwd-7">
          <div class="controls field-pwd_7">
          <input type="number" name="pwd_7" required="" id="id_pwd_7" class="form-control pwd-input">
            </div>
        </div>
            <button type="button" class="btn-secondary btn toggle" id="toggle_btn" value="Next" OnClick="Toggle_Screen(pwd_num)">Next</button>
        <div class="input-field input-pwd-7">
            <input type="button" class="btn-primary btn eval" value="Enter" OnClick="Eval_Pwd_Input(pwd_num)"></input>
          </div>
      </div>
    </div>
  </div>
  <!-- pwd 8 -->
  <div class='hidden-seq' id="pwd8">
    <div class="sequence">
      <div class="form-group required form-inline d-flex align-items-center">
          <div class="label-field label-pwd-8">
          <label class="col-form-label" for="id_pwd_8" onmousedown='return false;' onselectstart='return false;'>{{pwd_8_label}}</label>
          </div>
        <div class="input-field input-pwd-8">
          <div class="controls field-pwd_8">
          <input type="number" name="pwd_8" required="" id="id_pwd_8" class="form-control pwd-input">
            </div>
        </div>
            <button type="button" class="btn-secondary btn toggle" id="toggle_btn" value="Next" OnClick="Toggle_Screen(pwd_num)">Next</button>
        <div class="input-field input-pwd-8">
            <input type="button" class="btn-primary btn eval" value="Enter" OnClick="Eval_Pwd_Input(pwd_num)"></input>
          </div>
      </div>
    </div>
  </div>
  <!-- pwd 9 -->
  <div class='hidden-seq' id="pwd9">
    <div class="sequence">
      <div class="form-group required form-inline d-flex align-items-center">
          <div class="label-field label-pwd-9">
          <label class="col-form-label" for="id_pwd_9" onmousedown='return false;' onselectstart='return false;'>{{pwd_9_label}}</label>
          </div>
        <div class="input-field input-pwd-9">
          <div class="controls field-pwd_9">
          <input type="number" name="pwd_9" required="" id="id_pwd_9" class="form-control pwd-input">
            </div>
        </div>
            <button type="button" class="btn-secondary btn toggle" id="toggle_btn" value="Next" OnClick="Toggle_Screen(pwd_num)">Next</button>
        <div class="input-field input-pwd-9">
            <input type="button" class="btn-primary btn eval" value="Enter" OnClick="Eval_Pwd_Input(pwd_num)"></input>
          </div>
      </div>
    </div>
  </div>
  <!-- pwd 10 -->
  <div class='hidden-seq' id="pwd10">
    <div class="sequence">
      <div class="form-group required form-inline d-flex align-items-center">
          <div class="label-field label-pwd-10">
          <label class="col-form-label" for="id_pwd_10" onmousedown='return false;' onselectstart='return false;'>{{pwd_10_label}}</label>
          </div>
        <div class="input-field input-pwd-10">
          <div class="controls field-pwd_10">
          <input type="number" name="pwd_10" required="" id="id_pwd_10" class="form-control pwd-input">
            </div>
        </div>
            <button type="button" class="btn-secondary btn toggle" id="toggle_btn" value="Next" OnClick="Toggle_Screen(pwd_num)">Next</button>
        <div class="input-field input-pwd-10">
            <input type="button" class="btn-primary btn eval" value="Enter" OnClick="Eval_Pwd_Input(pwd_num)"></input>
          </div>
      </div>
    </div>
  </div>
<div class="invalid-pwd-feedback" id="pwd-error-message">
    Your input is incorrect. Please try again!
</div>
<div class="pwd-feedback" style="font-size: 100%;">
    You have entered all codes correctly!
</div>
<div class="switch-group">
<button type="button" onclick="topFunction();Timer_1(switch_click);"  class="prevtab btn-secondary btn back" id="prevtab" value="Switch Task">Switch Task</button>
</div>
</div>
{% next_button %}
</div>


</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="pwd_time" value="0" id="pwd_time"/>

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

<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="math_time" value="0" id="math_time"/>
<input type="hidden" name="total_time" value="0" id="total_time"/>

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

<input type="hidden" name="pwd_1_time" id="pwd_1_time"/>
<input type="hidden" name="pwd_2_time" id="pwd_2_time"/>
<input type="hidden" name="pwd_3_time" id="pwd_3_time"/>
<input type="hidden" name="pwd_4_time" id="pwd_4_time"/>
<input type="hidden" name="pwd_5_time" id="pwd_5_time"/>
<input type="hidden" name="pwd_6_time" id="pwd_6_time"/>
<input type="hidden" name="pwd_7_time" id="pwd_7_time"/>
<input type="hidden" name="pwd_8_time" id="pwd_8_time"/>
<input type="hidden" name="pwd_9_time" id="pwd_9_time"/>
<input type="hidden" name="pwd_10_time" id="pwd_10_time"/>


<input type="hidden" name="pwd_1_tries" id="pwd_1_tries"/>
<input type="hidden" name="pwd_2_tries" id="pwd_2_tries"/>
<input type="hidden" name="pwd_3_tries" id="pwd_3_tries"/>
<input type="hidden" name="pwd_4_tries" id="pwd_4_tries"/>
<input type="hidden" name="pwd_5_tries" id="pwd_5_tries"/>
<input type="hidden" name="pwd_6_tries" id="pwd_6_tries"/>
<input type="hidden" name="pwd_7_tries" id="pwd_7_tries"/>
<input type="hidden" name="pwd_8_tries" id="pwd_8_tries"/>
<input type="hidden" name="pwd_9_tries" id="pwd_9_tries"/>
<input type="hidden" name="pwd_10_tries" id="pwd_10_tries"/>

<input type="hidden" name="pwd_1_toggles" id="pwd_1_toggles"/>
<input type="hidden" name="pwd_2_toggles" id="pwd_2_toggles"/>
<input type="hidden" name="pwd_3_toggles" id="pwd_3_toggles"/>
<input type="hidden" name="pwd_4_toggles" id="pwd_4_toggles"/>
<input type="hidden" name="pwd_5_toggles" id="pwd_5_toggles"/>
<input type="hidden" name="pwd_6_toggles" id="pwd_6_toggles"/>
<input type="hidden" name="pwd_7_toggles" id="pwd_7_toggles"/>
<input type="hidden" name="pwd_8_toggles" id="pwd_8_toggles"/>
<input type="hidden" name="pwd_9_toggles" id="pwd_9_toggles"/>
<input type="hidden" name="pwd_10_toggles" id="pwd_10_toggles"/>

<input type="hidden" name="switch_time_1" id="switch_time_1"/>
<input type="hidden" name="switch_time_2" id="switch_time_2"/>
<input type="hidden" name="switch_time_3" id="switch_time_3"/>
<input type="hidden" name="switch_time_4" id="switch_time_4"/>
<input type="hidden" name="switch_time_5" id="switch_time_5"/>
<input type="hidden" name="switch_time_6" id="switch_time_6"/>
<input type="hidden" name="switch_time_7" id="switch_time_7"/>
<input type="hidden" name="switch_time_8" id="switch_time_8"/>
<input type="hidden" name="switch_time_9" id="switch_time_9"/>
<input type="hidden" name="switch_time_10" id="switch_time_10"/>

<input type="hidden" name="switch_1_math_perf" id="switch_1_math_perf"/>
<input type="hidden" name="switch_2_math_perf" id="switch_2_math_perf"/>
<input type="hidden" name="switch_3_math_perf" id="switch_3_math_perf"/>
<input type="hidden" name="switch_4_math_perf" id="switch_4_math_perf"/>
<input type="hidden" name="switch_5_math_perf" id="switch_5_math_perf"/>
<input type="hidden" name="switch_6_math_perf" id="switch_6_math_perf"/>
<input type="hidden" name="switch_7_math_perf" id="switch_7_math_perf"/>
<input type="hidden" name="switch_8_math_perf" id="switch_8_math_perf"/>
<input type="hidden" name="switch_9_math_perf" id="switch_9_math_perf"/>
<input type="hidden" name="switch_10_math_perf" id="switch_10_math_perf"/>

<input type="hidden" name="switch_1_pwd_perf" id="switch_1_pwd_perf"/>
<input type="hidden" name="switch_2_pwd_perf" id="switch_2_pwd_perf"/>
<input type="hidden" name="switch_3_pwd_perf" id="switch_3_pwd_perf"/>
<input type="hidden" name="switch_4_pwd_perf" id="switch_4_pwd_perf"/>
<input type="hidden" name="switch_5_pwd_perf" id="switch_5_pwd_perf"/>
<input type="hidden" name="switch_6_pwd_perf" id="switch_6_pwd_perf"/>
<input type="hidden" name="switch_7_pwd_perf" id="switch_7_pwd_perf"/>
<input type="hidden" name="switch_8_pwd_perf" id="switch_8_pwd_perf"/>
<input type="hidden" name="switch_9_pwd_perf" id="switch_9_pwd_perf"/>
<input type="hidden" name="switch_10_pwd_perf" id="switch_10_pwd_perf"/>

<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" %}
 <!-- To hide the next button, use css ("display: none" on the "otree-btn-next" class) -->

{% endblock %}


{% block styles %}

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

<style>
    #nexttab {
        text-align: center;
    }
    .feedback {
      font: inherit;
      color: green;
      display: none;
    }
    .pwd-feedback {
        font: inherit;
        color: green;
        display: none;
    }
    .banner-button {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        width: 325px;
        display: none;
    }
    .danger-border {
        border-color: rgb(220,53,69) !important;
        border-width: 3px !important;
      }
    .bar_container {
    margin-left: -.8rem;
    margin-right: -.8rem;
    background-color: #f8f9fa !important;
    }
</style>

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

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

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

{% endblock %}


{% block scripts %}

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

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

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

<script>
function containsOnlyNumbers(str) {
  return /^(?:-?[1-9]\d*$)|(?:^0)$/.test(str);
}
</script>

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

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

<script>
setInterval(function() {
if(((t_1.getTime()/1000)>= js_vars.switch_point) && ((pwd_num-1)<max_num_pwd_tasks))
{
  // Button color
  document.getElementById('nexttab').classList.remove('btn-secondary');
  document.getElementById('nexttab').classList.add('btn-danger');
  //document.getElementById('nexttab').innerHTML = 'Bitte Aufgabe wechseln';
  if($('.math-task').hasClass('show active') == true || $('.math-task').hasClass('active show') == true)
  {
    // Add red Edge
    var borders = document.getElementsByClassName('border-secondary');
    borders[0].classList.add('danger-border');
  }
  else if($('.math-task').hasClass('show active') == false && $('.math-task').hasClass('active show') == false)
  {
    // Remove red Edge
    var borders = document.getElementsByClassName('border-secondary');
    borders[0].classList.remove('danger-border');
  }
}
},50)
setInterval(function() {
if(((t_2.getTime()/1000)>= (js_vars.opt_pwd_time)) && ((num-1)<max_num_tasks))
{
  // Button color
  document.getElementById('prevtab').classList.remove('btn-secondary');
  document.getElementById('prevtab').classList.add('btn-danger');
  //document.getElementById('prevtab').innerHTML = 'Bitte Aufgabe wechseln';
  // Edge
  if($('.pwd-task').hasClass('show active') == true || $('.pwd-task').hasClass('active show') == true)
  {
  // Add red Edge
  var borders = document.getElementsByClassName('border-secondary');
  borders[0].classList.add('danger-border');
  }
  else if($('.pwd-task').hasClass('show active') == false && $('.pwd-task').hasClass('active show') == false)
  {
  // Remove red Edge
  var borders = document.getElementsByClassName('border-secondary');
  borders[0].classList.remove('danger-border');
  }
}
},50)
</script>

<script src="{% static 'back_button_v1/js/prev_next_button.js' %}"></script>

{% endblock %}