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


{% block content %}
{% include "global/fopen_bt.html" %}
Information on Part 4
{% 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>
      We are now starting Part 4. As described above, this part of the study consists again of {{ Constants.num_rounds}} rounds. 
      As in Part 3, in each round, you can work on both the task from Part 1 and the task from Part 2. 
      You have again {{ Constants.timeout }} seconds to complete both tasks. 
    </p>
<p>
  For each correctly solved math problem, you receive <b>{{player.math_piecerate}}</b>.
  For each code that you enter correctly, you also receive <b>{{player.pwd_piecerate}}</b>.
  Your payout in a round is the
  {% if is_cost %} <b>sum of the points earned for both tasks subtracted by the cost of {{player.field_maybe_none('WTP_cost') | to0 }} points you have to pay
  {% if player.field_maybe_none('rel_decision') == 1 %} for the recommendation</b>.
  {% elif player.field_maybe_none('rel_decision') == 0 %} to not receive the recommendation</b>.
  {% endif %}
  {% else %} <b>sum of the points earned for both tasks</b>.
  {% endif %}
</p>
{% if player.field_maybe_none('treatment') == 'Reminder' or player.field_maybe_none('rel_decision') == 1 %}
<p>
  As explained above, your personal recommendation is based on how fast you completed the tasks in Part 1 and Part 2 of the study. 
  This recommendation can help you in allocating your time between tasks. 
  To generate your personal recommendation and proceed to Part 4, please select 'Analyze Data'. 
  The analysis will tailor the recommendation to your specific performance data.
</p>
<br>
<br>
<div class="center-me">
<button class="otree-btn-next btn btn-primary">Analyze Data</button>
</div>
{% else %}
<p>
Please click on 'Next' to begin with Part 4.
</p>
<br>
<br>
<div class="no-center">
<button class="otree-btn-next btn btn-primary">Next</button>
</div>
{% endif %}
</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="Instructions_Reminder_time_spent" value="0" id="Instructions_Reminder_time_spent"/>
<input type="hidden" name="Instructions_Reminder_warnings" value="0" id="Instructions_Reminder_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;
  }

  .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 %}