{% 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>Task:</u></b>
</p>

<p style="text-align:justify">
  On the next page we will show you a graphic consisting of a total of 400 dots.
    In the graphic there are between 0 and 400 RED dots and all the other dots are BLUE.
    The graph is shown to you for 8 seconds and then completely disappears from your screen.
     </p>
    <p style="text-align:justify">
    Afterwards, you will have to make a guess:
    </p>
    <p style="text-align:justify">
    {% if player.ask_red == True %} <b>How many dots in the graphic were RED (in percent)?</b>
     {% else %}   <b>How many dots in the graphic were BLUE (in percent)?</b> {% endif %}
   <!-- You will have to click on a slider to enter your answer.-->
</p>
   <p style="text-align:justify">
As explained earlier, we will ask you to make several guesses during this study. The computer will randomly choose one of the guesses you make to be payoff relevant. For this payoff relevant guess, you can earn 6€ 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 {{Constants.extra_payoff}}€, if you simply state your true expectation (the button below provides further details on the exact procedure).

</p>


  <button name="details_dotspot_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_dotspot_1 %}
 </div>
        <br><br>
   <p style="text-align:justify"><b>
    Remember: We will show the graph for 8 seconds only. Please click next if you are ready for this task.</b>
</p>
        {% next_button %}

    <br>

<br>
{% endblock %}