<!DOCTYPE html>
<html lang="fr">

<head>
    <title>Math'Educ</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/global.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/confetti.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</head>

<body id="bodyStyle">
    <canvas id="confetti"></canvas>

    <div class="mb-3 border border-1 border-black bg-success p-2 text-white fs-3">
        <a href="/themeChoice" role="button" class="fs-4 btn btn-secondary btn-lg position-absolute end-0 me-2">
            Retour
        </a>
        <div class="d-flex flex-column align-items-center">
            <p>🏆 Score 🏆</p>
            <p class="fs-2">{{ score }}</p>
        </div>
    </div>
    

    <div class="container-fluid text-center col d-flex justify-content-center text-light fs-3 row gy-5">
        {% for f in Final %}
        <div class="col-4 text-center">
            <p>
                Question : {{ f['Question'] }}
            </p>
            <p>
                Bonne réponse : {{ f['goodAnswer'] }}
            </p>
            {% if f['goodAnswer'] == f['PlayerAnswer'] %}
                <p class="text-success">
                    Votre réponse : {{ f['PlayerAnswer'] }}
                </p>
            {% else %}
                <p class="text-danger">
                    Votre réponse : {{ f['PlayerAnswer'] }}
                </p>
            {% endif %}

        </div>

        {% endfor %}
    </div>

    <script src="js/confetti.js"></script>

</body>

</html>