{% load otree static %}

{% block content %}
<style>
.button4 {background-color: #e7e7e7; color: black;}
/* Popup container - can be anything you want */
.popup {
  position: relative;
  cursor: pointer;
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 280px;
  background-color: #ffde00;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

.collapse.in{display:block}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
</style>


<p>
    <b><u>Your work today</u></b>
</p>
<p>
    As you already know, in the third part of the study you will have to complete a transcription task consisting of a certain number of sequences: {{Constants.base_tasks}} plus the additional sequences that have been assigned to you.
</p>
<p>
As the number you have to solve in the end might be high, you can now choose to already complete some of the sequences today.
    The maximum number of sequences you can already solve today is {{Constants.base_tasks}}.
</p>

<p>
     {% formfield player.num_tasks_today label='Here, please type in the number of sequences you want to solve <b>today</b>:' %}
</p>

<p>Click "next" to see how to transcribe the sequences.</p>


    <br>

        {% next_button %}

    <br>

<br>
{% endblock %}