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


{% block content %}
{% include "global/fopen_bt.html" %}
Information on Part 1
{% include "global/fopen_at.html" %}
<div class="tab-content" id="myTabContent">
  <div class="tab-pane show active" id="instructions" role="tabpanel" aria-labelledby="instructions-tab">
    <p>
      The first part of the study consists of <b>{{Constants.num_rounds}} rounds</b>.
      Each round consists of <b>{{Constants.num_math_tasks}} math tasks</b>.
    </p>
    <p>
      Below you can find an example of a math task. In this example, you need to add the numbers 12, 15, and 17.
      To solve the task correctly, you need to enter the number 44 as solution.
    </p>
    <p>
      After entering your solution, please press "Enter". If your answer is correct, the next task will be displayed.
      If your answer is incorrect, you can try again. You can only proceed to the next task after entering the correct solution.
    </p>
    <p>
      Your goal is to solve as many math tasks as possible.
      In each round, you have <b>{{Constants.timeout}} seconds</b> to work on the tasks. <b>For each correct answer, you will receive {{Constants.math_piecerate}}</b>.
      If you have correctly solved all {{Constants.num_math_tasks}} tasks before the {{Constants.timeout}} seconds expire,
      you will additionally receive <b>{{Constants.time_rate}} bonus points for each second that remains</b>. This implies that you will earn more money if you solve more tasks,
      and you will earn more money if you are faster in solving the tasks.
    </p>
    <p>
      <b>Example:</b> If you correctly solve all {{Constants.num_math_tasks}} tasks within {{Constants.example_time}} seconds,
      you will receive {{Constants.num_math_tasks}} x {{Constants.math_rate}} = {{full_payoff}} points for the {{Constants.num_math_tasks}} solved tasks,
      and ({{Constants.timeout}} - {{Constants.example_time}}) x {{Constants.time_rate}} = {{example_payoff}} bonus points for the remaining {{example_diff}} seconds.
    </p>
    <p>
      A round ends when you have correctly solved all {{Constants.num_math_tasks}} tasks or when the {{Constants.timeout}} seconds have elapsed.
      Once the round is completed, the next round of the study will begin.</p>
    <br>
    <img align="middle" width="50%" class="center" src="{% static "images/Addition_eng.png" %}"/>
    <br>
    <p>
      Please click "Next" to start Part 1.
    </p>
<br>
<br>
<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="Math_Instructions_time_spent" value="0" id="Math_Instructions_time_spent"/>
<input type="hidden" name="Math_Instructions_warnings" value="0" id="Math_Instructions_warnings"/>
{% endblock %}

{% block styles %}
<style>
  .center {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 50%;
 }
  #myTab {
  display: none;
  }
  .otree-btn-next {
    float: 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;
  }

  .input-group, input.form-control, select.form-control {
    max-width: 50px;
  }
  img {
  border: 1px solid  #ced4da;
  }
</style>
{% endblock %}

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

{% endblock %}