{% extends "base.html" %}
{% block title %}Quiz{% endblock %}
{% block content %}
    <div class="quiz-container">
        <h2>Question {{ num }}</h2>
        <p>{{ q.question }}</p>
        <form method="post">
            {% for choice in q.choices %}
                <button name="answer" value="{{ choice }}" onclick="playClick('{{ choice == q.answer }}')">{{ choice }}</button><br>
            {% endfor %}
        </form>
    </div>

    <audio id="correct" src="{{ url_for('static', filename='correct.mp3') }}"></audio>
    <audio id="wrong" src="{{ url_for('static', filename='wrong.mp3') }}"></audio>

    <script>
        function playClick(isCorrect) {
            const audio = document.getElementById(isCorrect === "true" ? 'correct' : 'wrong');
            audio.play();
        }
    </script>
{% endblock %}