{% 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 personal recommendation on how to allocate your time between the tasks</b>.
To create this recommendation, we analyzed your data from the parts in which you only worked on the math task (Part 1) or the code task (Part 2), respectively.
To estimate how you should allocate your time, we calculated your personal speed in each task. 
Based on this estimate, we determined the allocation of time for which you can expect the highest overall payoff.
</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 (see below for an illustration).
You can see how the display changes in the illustration below.
Note that 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 %}