{% 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 will match you another player (a fellow human) who already finished this survey. <br><br>

 <b>2.</b> The computer will populate a digital urn with B blue balls and 100-<b>B</b> red balls (100 balls in total).
The number of blue balls (B) will be randomly chosen between 0 and 100 with each number having the same chance 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>

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

<b>3. </b> The computer populated the urn with blue and red balls, but neither you nor the other participant knows the proportion of blue balls in the urn, B%.   <br><br>

Your task is to guess the proportion of blue balls, B%! <br><br>


<div style="background-color: #e1f0ff; padding: 10px;">
<b>4. </b> The computer randomly selected 10 balls from the urn and showed them to the other participant. <br><br>

With that information, the other participant was 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 the other participant only observed 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 the other participant's 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 }}