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


{% block content %}
{% include "global/fopen_bt.html" %}
{% 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>
      Based on the analysis of your data, 
      <b>you can expect the highest overall payoff each round when you spend approximately the following amount of time on each task:
        <h3 style="text-align:center"> Math task: {{ switch_point }} seconds <br>
                                       Code task: {{ opt_pwd_time }} seconds
        </h3>
      </b>
    </p>
    <p>
      In the following rounds, we will assist you in dividing your time. 
      If you exceed the recommended times, the frame around the task and the 'Switch Task' button will turn red. 
      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>
    Please click on 'Next' to begin with Part 4.
    </p>
    <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="Allocation_time_spent" value="0" id="Allocation_time_spent"/>
<input type="hidden" name="Allocation_warnings" value="0" id="Allocation_warnings"/>
{% endblock %}

{% block styles %}
<style>
  .otree-btn-next {
    float: right;
  }
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
   }
</style>
{% endblock %}