{% 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>
  In the first part of this experiment, you have already tried out some transcription sequences.
    In the third part of the study you will have to complete a transcription task consisting of a certain number of these 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" if you are ready to start.</p>

<br>
<p>
  <button name="details_task_2" value="true" class="btn button4" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseExample">
    Click here if you want to see the explanation of the task again
  </button>
  <div style="display: none;">
        {% formfield player.details_task_2 %}
 </div>

    <br>

        {% next_button %}

    <br>

<br>
{% endblock %}