{% 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;
    }

  </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>




<b>1.</b> The computer randomly filled a digital urn with a certain number of blue balls (denoted as B)
    and the remaining balls are red. The total number of balls in the urn is 100.
The specific value of B 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 blue balls B%!


<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 style="background-color: #e1f0ff; padding: 10px;">
<b>2. </b> The computer will randomly select 10 balls from the urn and show them to you. <br><br>

With that information, you will be asked to make a guess about the proportion of <span class="blue-font"><b>blue</b></span> balls in the urn (<span class="blue-font"><b>B%</b></span>).
It is important to notice that you will only observe 10 out of the 100 balls in the urn. <br><br>

<div class="containerX">
<div id="balls2-container"></div>
</div>
<p class="animation-text">Size of your sample.</p>
    <script>
        function startAnimation() {
            var remainingDraws = 10; // Change this value as per your requirements
            var totalBalls = 10; // Change this value as per your requirements
            var blueBalls = 10; // Change this value as per your requirements
            var ballsContainer = document.getElementById("balls2-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 }}