{% 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>
       <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<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 type="button" class="btn button4" data-toggle="collapse" data-target="#collapseExample">
     Show/Hide Details
  </button>

<div class="collapse in" id="collapseExample">
           <div class="card card-body">
 <p> If this guess is payoff-relevant, the computer will then randomly draw a number between 0 and 100
     (including 0, 100 and all decimal numbers between) and all numbers are equally likely to be selected.
     </p>
               <p>
    We will then compare the mistake you made (that is the difference between your guess and the true percentage) with the random number:  </p>
  <p>You will receive the {{ Constants.extra_payoff }}€ bonus if your mistake is smaller than the number drawn by the computer. </p>
  </div>
</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 %}