{% load otree static %}

{% block content %}
<div class="container">
    <div class="jumbotron mt-4">
        <!-- Decreased font size for the header -->
        <h1 class="display-4" style="font-size: 40px;">Thank you for participating in today's experiment!</h1>
        <hr class="my-4">

        <strong>Your Total Score: <span class="badge badge-primary" style="color: black; font-size: 18px;">{{ total_score }}</span></strong>

        <!-- Score Calculation Details -->
        <div class="mt-4">
            <strong>Understanding Your Score</strong>
            <p>
                Your total score has been calculated based on several components:
            </p>
            <ul>
                <li>
                    <strong>Raven Test Performance:</strong> While we do not disclose individual scores for the Raven test, it contributes to your total score.
                </li>
                <li>
                    <strong>Probability Estimation Tasks:</strong> Your performance in the two probability estimation tasks has been taken into account. One of your ten responses in the estimation tasks was randomly selected and included in your total score.
                </li>
                <li>
                    <strong>Participation Points:</strong> An additional 5 points have been added to your score as a thank you for your participation.
                </li>
            </ul>
        </div>

        <!-- Monetary Reward Information -->
        <div class="mt-4">
            <strong>Monetary Payment:</strong>
            <p>
                As a part of your participation, you will receive a monetary reward equal to your total score in dollars.
            </p>
        </div>

        <p class="mt-5">
            We appreciate your participation and time. Have a great day!
        </p>
    </div>
</div>
{% endblock %}