{% 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 again to know what you think is the likelihood that you have to solve 40 or fewer additional sequences.

</p>
<p style="text-align:justify">
    Again, you can earn a bonus payment for guessing accurately.
     Out of all guesses you make in our study the computer will randomly choose one 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>
<br>
    <p style="text-align:justify">
You can click on the button below if you want to learn more about the payment rule.
</p>

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

        {% next_button %}

    <br>

<br>
{% endblock %}