{% block title %}
    <p class="center"> <b>Guess the Proportion of Blue Balls <br> Timing and Instructions</b> </p>

    <style>
        .center {
          text-align: center;
        }
    </style>

{% endblock %}




{{ block content }}

 <style>
    body {
      font-family: Verdana, Arial, sans-serif;
      font-size: 16px;
    }

    .containerX {
                display: flex;
                justify-content: center;
                margin-top: 15px;
            }
     .column {
        display: inline-block;
    }

    .ball {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin: 5px;
    }

    .blue {
        background-color: gray;
        align-items: center;
    }

    .red {
        background-color: red;
    }
    .animation-text {
        text-align: center;
        margin-top: 5px;
        font-size: 12px;
            }

    .blue-font {
      color: blue;
    }
    .red-font {
      color: red;
    }
  </style>

<div style="background-color: #ffcccc; padding: 10px; margin-top: 50px; margin-bottom: 50px;">
  <i>Comprehension test: Please answer the question at the end of each page. If you fail more than three times in total, your session will finish,
      and you will receive 50 points for participation.  <b>Remaining attempts: {{ attempts }}</b></i>.
</div>

{% if player.initial == 0 %}
 <b>1. </b> You will be matched with another participant (a fellow human) who has already completed this survey. <br><br>


<div style="background-color: #e1f0ff; padding: 10px;">
 <b>2.</b> The computer randomly filled a digital urn with 20 balls. Each ball can be either  <span class="blue-font"><b>blue</b></span>
   or <span class="red-font"><b>red</b></span>.
The specific number of <span class="blue-font"><b>blue</b></span> balls (<span class="blue-font"><b>B</b></span>) was determined randomly by the computer, ranging from 2 to 18, with each number having an equal probability of being selected.<br><br>

  <b>Note: Each round, the urn will be refilled with a new set of 20 balls.</b><br><br>



{% else %}
<div style="background-color: #e1f0ff; padding: 10px;">
 <b>1.</b> The computer randomly filled a digital urn with 20 balls. Each ball can be either  <span class="blue-font"><b>blue</b></span>
   or <span class="red-font"><b>red</b></span>.
The specific number of <span class="blue-font"><b>blue</b></span> balls (<span class="blue-font"><b>B</b></span>) was determined randomly by the computer, ranging from 2 to 18, with each number having an equal probability of being selected.<br><br>

 <b>Note: Each round, the urn will be refilled with a new set of 20 balls.</b><br><br>

Your task is to guess the proportion of <span class="blue-font"><b>blue</b></span> balls <span class="blue-font"><b>B%</b></span>! <br><br>



{% endif %}

<div class="containerX">
<div id="balls-container"></div>
</div>
<p class="animation-text">Here is an image depicting the 20 balls that make up the urn. The colors of the balls are unknown to you.</p>

<script>
        function startAnimation() {
            var remainingDraws = 20; // Change this value as per your requirements
            var totalBalls = 20; // Change this value as per your requirements
            var blueBalls = 20; // Change this value as per your requirements
            var ballsContainer = document.getElementById("balls-container");

            if (!ballsContainer) {
                return; // Exit if the balls container element is not found
            }

            for (var i = 0; i < remainingDraws; i++) {
                var columnIndex = Math.floor(i / 5); // Calculate the column index
                var column = ballsContainer.children[columnIndex];

                if (!column) {
                    column = document.createElement('div');
                    column.className = 'column';
                    ballsContainer.appendChild(column);
                }

                var ball = document.createElement('div');
                ball.className = i < blueBalls ? 'ball blue' : 'ball red';
                column.appendChild(ball);
            }
        }

        // Call the startAnimation() function when the page loads
        window.addEventListener('DOMContentLoaded', startAnimation);
</script>

</div> <br><br>


{{ formfields }}
    {{ next_button }}


{{ endblock }}