<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wiki Fantasy : Quiz</title>
    <link id="favicon" rel="icon" href="../../images/iconeSombre.ico"> <!-- Par défaut sombre -->
    <link rel="stylesheet" href="../../public/styles/styleQuiz.css">
    <script defer src="../../public/script/theme-toggle.js"></script>
    <script>
        // Timer pour 5 minutes
        var timeLeft = 10;
        function countdown() {
            var timerDisplay = document.getElementById("timer");
            if (timeLeft <= 0) {
                document.getElementById("quizForm").submit();
            } else {
                timerDisplay.innerHTML = timeLeft + " seconds left";
                timeLeft -= 1;
                setTimeout(countdown, 1000);
            }
        }
        window.onload = countdown;
    </script>
</head>
<body>

    {{ include "bandeau.html.twig" }}
    <h1>▶ Quiz ◀</h1>
    <div class="quiz">
        <h2> {{ question.question }} </h2>
        <a id="timer"> 10 seconds left .. </a>

        <form id="quizForm" method="POST">
            <div class="answers">
            <button class="answer" name="answera" value="A-{{ id }}">
                {{ question.answera }}
            </button>
            <button class="answer" name="answerb" value="B-{{ id }}">
                {{ question.answerb }}
            </button>
            <button class="answer" name="answerc" value="C-{{ id }}">
                {{ question.answerc }}
            </button>
            <button class="answer" name="answerd" value="D-{{ id }}">
                {{ question.answerd }}
            </button>
            </div>
            <input type="hidden" name="action" value="">
        </form>
    </div>
</body>
</html>
