{% 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>
      The fourth part of the study consists of <b>{{Constants.play_rounds}} rounds</b>.
      In each round, you can work again on both the task from Part 1 and the task from Part 2.
      You have again <b>{{Constants.timeout}} seconds</b> to complete both tasks in each round.
    </p>
<p>
As a new feature in this part, you have the option to <b>receive a recommendation on how to allocate your time across the tasks</b>.
To create this recommendation, we analyzed your data from Part 1 and Part 2.
In these parts, you worked on the math task (Part 1) or the code task (Part 2) only.
To estimate how you should allocate your time, we calculated your speed in each task.
Based on this estimate, we calculated the time you have to spend on each task for which you can expect the highest overall payout.
</p>
<p>
If you receive the recommendation, the frame around the task and the 'Switch Task' button will turn red whenever you exceed the recommended time for this task.
You can see how the display changes in the illustration below.
To be clear, this is only a recommendation.
You can still switch between tasks at any time before or after the display changes.
</p>
<br>
<img align="middle" width="50%" class="center" src="{% static "images/RedScreen_eng.png" %}"/>
<br>
<p>
Before Part 4 begins, we will ask you how much you value such a recommendation.
Whether you will receive the recommendation or not depends on how much you value the recommendation and on random chance.
</p>
<br>
<br>
<div class="no-center">
<button class="otree-btn-next btn btn-primary no-center">Next</button>
</div>

</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_1_time_spent" value="0" id="Instructions_1_time_spent"/>
<input type="hidden" name="Instructions_1_warnings" value="0" id="Instructions_1_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>

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

{% endblock %}