{% 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 task in 28 days:</u></b>
</p>
<p style="text-align:justify">
You have now completed today's transcription task. Note that we randomly selected 9 other participants from this study who also solved a transcription task consisting of 10 sequences (just as you did).
    Together with these 9 participants you now form a group of 10 participants.
</p>
<p style="text-align:justify">
In {{ Constants.days_double }} days, each participant in your group will have to solve another transcription task consisting of a unique number of sequences.
    The number of sequences varies from participant to participant.
</p>
  <p style="text-align:justify">
Who has to solve how many sequences will be determined in the following way:
 </p>
 <!-- <p style="text-align:justify">
<b> Determination of the number of transcription tasks to be solved by you in {{ Constants.days_double }} days:
    </b>-->
    <p style="text-align:justify">
     <b> Each participant will have to solve {{ Constants.base_tasks }} sequences correctly, plus a unique number of additional sequences.
      </b></p>
       <p style="text-align:justify">
      There are 10 possibilities for the unique number of additional sequences a group member must solve in {{ Constants.days_double }} days.
      </p>
       <p style="text-align:justify">
Each group member will be randomly assigned to solve either 8, 16, 24, 32, 40, 48, 56, 64, 72, or 80 additional sequences correctly.
  </p> <p style="text-align:justify">
           Importantly, each possibility is only assigned once in your group, that is, no two group members will have to solve the same number of additional sequences in {{ Constants.days_double }} days.

    For example, if one member of the group is randomly assigned to solve 72 transcription tasks in total (=40+32), no other member in your group will be assigned to solve 72 sequences tasks in total, and each possible number of sequences to be solved is equally likely to be assigned to you.
 </p>
<p style="text-align:justify">
To make sure you understand the procedure, please answer two short comprehension questions.
{% formfield player.matching_control_1 %}
{% formfield player.matching_control_2 %}
</p>
<br>
<p>
  <button name="details_matching" value="true" class="btn button4" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseExample">
    Show further details
  </button>
  <div style="display: none;">
        {% formfield player.details_matching %}
 </div>

    <br>

        {% next_button %}

    <br>

<br>
{% endblock %}