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


{% block content %}

{% if form.errors %}
  {% include "global/field_validation_error.html" %}
{% endif %}

{% include "global/fopen_bt.html" %}
Information on Part 3
{% 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 instructions-tab active" id="instructions-tab" data-bs-toggle="tab" href="#instructions" role="tab" aria-controls="instructions" onclick="topFunction();">
            Instructions
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link control-tab" id="control-tab" data-bs-toggle="tab" href="#control" role="tab" aria-controls="control" onclick="topFunction();">
            Control
        </a>
    </li>
</ul>
</div>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane show active" id="instructions" role="tabpanel" aria-labelledby="instructions-tab">
    <p>
        The third part of the study consists of <b>{{Constants.num_rounds}} rounds</b>.
        In each round, you can work on both, the task from Part 1 and the task from Part 2.
        You have <b>{{Constants.timeout}} seconds</b> to complete both tasks.
    </p>
    <p><b>Reminder:</b>
      In the task from Part 1, your goal is to solve <b>math problems</b>. In the task from Part 2 you have to <b>memorize and enter codes</b>.
    </p>
    <p>
  During each round, you can decide if and when to switch between the tasks. There are two ways to switch from one task to the other.
  You can either click on the tabs at the top of the screen or use the <b>"Switch Task"</b> button at the bottom of the screen.
  At the top of the screen, you can see how much working time is left for the current round.
</p>
<p>
  For each correctly solved math problem, you receive <b>{{Constants.math_piecerate}}</b>.
  For each code that you enter correctly, you also receive <b>{{Constants.pwd_piecerate}}</b>.
  Your payout in a round is the <b>sum of the points earned for both tasks</b>.
</p>
<p>
  <b>Example:</b> If you solve {{math_example}} math problems and enter {{pwd_example}} codes correctly,
  your payoff would be {{math_example}} x {{Constants.math_piecerate}} = {{math_example_earnings}} for the math tasks and {{pwd_example}} x {{Constants.pwd_piecerate}} = {{pwd_example_earnings}} for the codes.
  So, your total earnings for this round would be {{total_example_earnings}}.
</p>
<p>
  Please click "Next" to start Part 3.
</p>
<br>
<br>
<div class="no-center">
<button onclick="topFunction();" type="button" class="nexttab btn-primary btn next">Next</button>
</div>


</div>

<div class="tab-pane" id="control" role="tabpanel" aria-labelledby="control-tab">
<br>
{% formfield player.control_q1 label="How many points do you get when you correctly solve three math problems in task 1?" %}
<br>
{% formfield player.control_q2 label="How many points do you get when you correctly enter six codes in task 2?" %}
<br>
{% formfield player.control_q3 label="What would your total payoff be?" %}
<br>
<button onclick="topFunction();" type="button" class="prevtab btn-primary btn back">Back</button>
<button class="otree-btn-next btn btn-primary">Next</button>

</div>

</div>
 {% include "global/fclose.html" %}
<!-- To hide the next button, use css ("display: none" on the "otree-btn-next" class) -->
<input type="hidden" name="Main_Instructions_time_spent" value="0" id="Main_Instructions_time_spent"/>
<input type="hidden" name="Main_Instructions_warnings" value="0" id="Main_Instructions_warnings"/>
{% endblock %}

{% block styles %}
<style>
  .center {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 50%;
 }
  #myTab {
  display: none;
  }
  .no-center {
    text-align: right;
  }
  .center-me {
    text-align: right;
  }
  .nexttab {
    float: right;
  }
  .otree-form-errors {
    visibility: hidden;
    display: none;
  }
  .alert-danger {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: .25rem;
  }

  img {
  border: 1px solid #ced4da;
  }
</style>
{% endblock %}

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

{% if form.errors %}
<script>
    $('.nexttab').click()
</script>
{% endif %}

{% endblock %}