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

{% block content %}
{% include "global/open.html" %}
<!-- Task 2 -->
<div class="tab-pane pwd-task show active" 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>
<br>
<br>
</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="pwd_time" value="0" id="pwd_time"/>
<input type="hidden" name="math_time" value="0" id="math_time"/>

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

<input type="hidden" name="CodeTask_time_spent" value="0" id="CodeTask_time_spent"/>
<input type="hidden" name="CodeTask_warnings" value="0" id="CodeTask_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"/>
{% endblock %}

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

{% endblock %}

{% block styles %}

{% include "global/styles/memorize_code.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_code.js" %}

{% endblock %}