{% 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 a certain number of <span class="blue-font"><b>blue</b></span>  balls (denoted as <span class="blue-font"><b>B</b></span>)
    and the remaining balls are <span class="red-font"><b>red</b></span>. The total number of balls in the urn is 100.
    The specific value of <span class="blue-font"><b>B</b></span> was determined randomly by the computer, ranging from 0 to 100, with each number having an equal probability of being selected.<br><br>

     <b>Note: The urn will be refilled with a new set of 100 balls for each round.</b><br><br>



{% else %}
<div style="background-color: #e1f0ff; padding: 10px;">
 <b>1.</b> The computer randomly filled a digital urn with a certain number of <span class="blue-font"><b>blue</b></span> balls (denoted as <span class="blue-font"><b> B</b></span> )
    and the remaining balls are <span class="red-font"><b>red</b></span>. The total number of balls in the urn is 100.
The specific value of <span class="blue-font"><b>B</b></span> was determined randomly by the computer, ranging from 0 to 100, with each number having an equal probability of being selected.<br><br>

 <b>Note: The urn will be refilled with a new set of 100 balls for each round.</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 100 balls that make up the urn. The colors of the balls are unknown to you.</p>

<script>
        function startAnimation() {
            var remainingDraws = 100; // Change this value as per your requirements
            var totalBalls = 100; // Change this value as per your requirements
            var blueBalls = 100; // 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 }}