{% 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 well you performed:</u></b>
</p>


<p style="text-align:justify">
    Again, you can earn a bonus payment for guessing your rank correctly.
     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>
<p style="text-align:justify">
Right now, we would like again to know more about your own expectations about the rank you achieved, and you can earn a bonus payment for guessing your rank correctly.
</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/Hide Info
  </button>
  <div style="display: none;">
        {% formfield player.details_beliefs_3_1 %}
 </div>
<p style="text-align:justify">
On the next page you can enter your guess.
</p>
    <br>

        {% next_button %}

    <br>

<br>
{% endblock %}