{% 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>Guess how many additional sequences you will have to solve:</u></b>
</p>
<p style="text-align:justify">
<!-- We will soon provide you with some more information on how many tasks you have to solve, and in {{ Constants.days_double }} days,
    we will inform you about your exact number of tasks you have to solve. -->
    Remember: Each group member was randomly assigned a unique number of additional sequences to be solved
    and no group member has been assigned the same number of sequences.
    The possible numbers of additional sequences are 8, 16, 24, 32, 40, 48, 56, 64, 72 and 80.
</p>
<p style="text-align:justify">
Right now, we would like to know more about your own expectations about the number of additional sequences that you have to solve,
   and we offer a bonus payment for guessing the number correctly:
<!-- </p>
<p style="text-align:justify">
<b> Bonus payments for accurate guesses: </b>
</p>
    <p style="text-align:justify">
In this study, we will ask you to make several guesses related to the number of additional sequences you have to solve in {{Constants.days_double}} days
        and the computer will randomly choose one of the guesses you make to be payoff relevant for you at the end of this study.
        For this randomly chosen guess, you can earn {{ Constants.extra_payoff}}€ and this payment comes on top
        of your reimbursement of {{ Constants.base_payment}}€ for participation in all parts of the experiment.
        The chance that you win the {{ Constants.extra_payoff}}€ is the largest, if you simply state your true expectation.

</p> -->
    <p style="text-align:justify">
    As explained before, we will ask you to make several guesses in this study.
    The computer will randomly choose one of these guesses you make to be payoff relevant.
    This is the first such guess.</p>
<p style="text-align:justify">
    For each guess you make, you maximize the chances of winning the additional {{ Constants.extra_payoff}}€, if you simply state your true expectation.
    (The button below provides further details on the exact procedure.)
    </p>

<br>
<p>
  <button name="details_beliefs_1_1" value="true" class="btn button4" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseExample">
    Show Details
  </button>
  <div style="display: none;">
        {% formfield player.details_beliefs_1_1 %}
 </div>
<p style="text-align:justify">
On the next page you can enter your guess.
</p>
    <br>

        {% next_button %}

    <br>

<br>
{% endblock %}