{{ block title }}
Part 2
{{ endblock }}

{{ block content }}


<p>
You have completed all the questions in Part 1.
Your score was <strong>{{ total_correct }}</strong> out of <strong>{{ total_questions }}</strong>.
</p>

<p>
In Part 2, the computer has randomly matched your score with the scores of three participants who completed the same quiz,
    forming a group of 4 participants (including you). Based on the score, you are ranked
    either in the <b>Top Half</b> (1st or 2nd highest score) or the <b>Bottom Half</b> (3rd or 4th highest score).
</p>

<p>
    Your rank remains fixed throughout the experiment and potentially affects future outcomes.
</p>

<br>
<p>
    Before proceeding to the next task in Part 2, we ask you to report how likely you think you are ranked in the <b>Top Half</b>.
</p>
<p>
    If this part is selected for bonus payment, we reward the accuracy of your guess by using a payment rule that secures
    the highest expected chance of winning 1000 points when you provide your most-accurate guess.
    Details of the payment rule are available at the end of the experiment.
</p>

<p>
    {{ formfield 'initial_top_belief' label='Likelihood that I am ranked in the <b>Top half</b> (%)' }}
</p>

<p style="color: #777;">
<i>(Likelihood that I am ranked in the Bottom half:
    <span id="bottom_prob"></span>)</i>
</p>
</p>

<script>
document.addEventListener("DOMContentLoaded", function () {

    const input = document.querySelector("input[name='initial_top_belief']");
    const bottom = document.getElementById("bottom_prob");

    input.addEventListener("input", function () {

        let value = parseFloat(input.value);

        if (!isNaN(value)) {
            bottom.textContent = (100 - value) + "%";
        } else {
            bottom.textContent = "";
        }

    });

});
</script>


<br>
<p>
Click Next to proceed.
</p>

{{ next_button }}

{{ endblock }}