{% 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 again how many additional sequences you will have to solve</u></b>
</p>
<p style="text-align:justify">
Right now, we would like to know again what you think is the likelihood that you have to solve 40 or fewer additional sequences.

</p>
<p style="text-align:justify">
As mentioned earlier, in this study, we will ask you to make several guesses. The computer will randomly choose one of the guesses you make to be payoff relevant.
    For this payoff relevant guess, you can earn {{ Constants.extra_payoff}}€ in addition to your reimbursement for the completion of all parts of this study.
</p>

 <p style="text-align:justify">
For each guess you make, you maximize the chances of winning the additional 6€, if you simply state your true expectation (the button below provides further details on the exact procedure).
</p>

<p>
  <button name="details_beliefs_4_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_4_1 %}
 </div>
<p style="text-align:justify">
On the next page you can enter your guess.
</p>
    <br>

        {% next_button %}

    <br>

<br>
{% endblock %}