{% extends 'base.html' %}

{% block content %}
<div class="quiz-header">
    <h2>{{ quiz.title }}</h2>
    <p>{{ quiz.description }}</p>
</div>

<form method="post" id="quiz-form">
    {% csrf_token %}
    
    {% for q in questions %}
        <div class="question-block">
            <h4>Question {{ forloop.counter }}: {{ q.question }}</h4>
            <div class="options">
                {% for opt in q.random_options %}
                    <label class="option-label">
                        <input type="radio" name="q_{{ q.id }}" value="{{ opt.id }}" required>
                        {{ opt.option }}
                    </label>
                {% endfor %}
            </div>
        </div>
    {% endfor %}
    
    <input type="submit" value="Submit Quiz" onclick="return confirm('Are you sure you want to submit?');">
</form>

<style>
    .option-label input {
        margin-right: 10px;
    }
</style>
{% endblock %}