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


<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 blue balls in the urn (B).
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>

<b>5. </b> After the initial 10 balls were shown to the other participant, they were returned back to the urn.
    In the next step, the computer will randomly select another 10 balls from the urn.
    This time, the 10 balls will be shown to you. <br><br>

With this information, you will be asked to provide your guess regarding the proportion of blue balls in the urn (B%).  <br><br>

<div class="containerX">
<div id="balls3-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("balls3-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>6. </b>The computer will display the guess made by the other participant regarding the proportion of <span class="blue-font"><b>blue</b></span> balls in the urn (<span class="blue-font"><b>B%</b></span>).
    After receiving this information, you will have the opportunity to revise your initial estimation of <span class="blue-font"><b>B%</b></span>. <br><br>

    This means that in each round, you will provide two estimations of the proportion <span class="blue-font"><b>B%</b></span>.
    An initial guess after observing your personal sample,
    and a final guess after receiving the additional information from the other participant's estimation.
</div>
<br><br>

 {{ formfields }}
    {{ next_button }}


{{ endblock }}