{% 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 well you performed:</u></b>
</p>
<p style="text-align:justify">
We will soon provide you with some more information on how well you rank, and in {{ Constants.days_double }} days,
    we will inform you about your exact rank in your group.
    Remember: Each group member in your group was assigned a rank based on their IQ score (1 = best, 10 = worst, and no group member has the same rank).
</p>
<p style="text-align:justify">
Right now, we would like to know more about your expectations about the rank you achieved.
    You can also earn a bonus payment for guessing your rank correctly.
</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 %}