{% extends "base.html" %} {% block title %}QuizTrainer - 答题{% endblock %} {%
block content %}
<!-- 答题进度 -->
<div class="card mb-4 animate-fade-in">
    <div class="card-body" style="padding: 16px 20px">
        <div
            class="flex items-center justify-between"
            style="flex-wrap: wrap; gap: 16px"
        >
            <div>
                <span style="font-size: 14px; color: var(--text-secondary)"
                    >答题进度</span
                >
                <span
                    style="
                        font-size: 16px;
                        font-weight: 600;
                        color: var(--accent);
                        margin-left: 8px;
                    "
                >
                    {{ session.progress.current }} / {{ session.progress.total
                    }}
                </span>
            </div>
            <div class="progress" style="width: 200px">
                <div
                    class="progress-bar"
                    style="width: {{ (session.progress.current / session.progress.total * 100) | int }}%;"
                ></div>
            </div>
            <div class="flex gap-2">
                <span class="tag tag-{{ question.type }}"
                    >{{ question.type_display }}</span
                >
                <span class="tag tag-{{ question.difficulty.value }}"
                    >{{ question.difficulty_display }}</span
                >
            </div>
        </div>
    </div>
</div>

<!-- 题目卡片 -->
<div class="question-card animate-fade-in" style="animation-delay: 0.1s">
    <div class="question-header">
        <div class="question-meta">
            <span style="font-size: 13px; color: var(--text-muted)"
                >{{ question.category }}</span
            >
        </div>
        <span style="font-size: 12px; color: var(--text-muted)"
            >题目ID: {{ question.id }}</span
        >
    </div>

    <div class="question-body">
        <!-- 题目内容 -->
        <div class="question-text">{{ question.question }}</div>

        <!-- 选择题 -->
        {% if question.type.value == 'choice' %}
        <form
            action="{{ url_for('submit_answer') }}"
            method="post"
            id="answerForm"
        >
            <div class="question-options">
                {% for option in question.options %}
                <label
                    class="radio-item"
                    data-value="{{ ['A', 'B', 'C', 'D', 'E', 'F'][loop.index0] }}"
                >
                    <input
                        type="radio"
                        name="answer"
                        value="{{ ['A', 'B', 'C', 'D', 'E', 'F'][loop.index0] }}"
                        required
                    />
                    <span class="option-label">
                        <span class="option-key"
                            >{{ ['A', 'B', 'C', 'D', 'E', 'F'][loop.index0]
                            }}</span
                        >
                        <span>{{ option }}</span>
                    </span>
                </label>
                {% endfor %}
            </div>

            <div
                class="question-footer"
                style="
                    border-top: 1px solid var(--border-light);
                    margin-top: 24px;
                    padding-top: 20px;
                "
            >
                <button type="submit" class="btn btn-primary btn-lg">
                    <svg
                        viewBox="0 0 24 24"
                        width="18"
                        height="18"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <polyline points="9 11 12 14 22 4" />
                        <path
                            d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"
                        />
                    </svg>
                    提交答案
                </button>
            </div>
        </form>

        <!-- 判断题 -->
        {% elif question.type.value == 'truefalse' %}
        <form
            action="{{ url_for('submit_answer') }}"
            method="post"
            id="answerForm"
        >
            <div class="question-options">
                <label class="radio-item" data-value="true">
                    <input type="radio" name="answer" value="true" required />
                    <span class="option-label">
                        <span
                            class="option-key"
                            style="
                                background: var(--success-bg);
                                color: var(--success);
                                border-color: var(--success);
                            "
                            >T</span
                        >
                        <span>正确 (True)</span>
                    </span>
                </label>
                <label class="radio-item" data-value="false">
                    <input type="radio" name="answer" value="false" required />
                    <span class="option-label">
                        <span
                            class="option-key"
                            style="
                                background: var(--error-bg);
                                color: var(--error);
                                border-color: var(--error);
                            "
                            >F</span
                        >
                        <span>错误 (False)</span>
                    </span>
                </label>
            </div>

            <div
                class="question-footer"
                style="
                    border-top: 1px solid var(--border-light);
                    margin-top: 24px;
                    padding-top: 20px;
                "
            >
                <button type="submit" class="btn btn-primary btn-lg">
                    <svg
                        viewBox="0 0 24 24"
                        width="18"
                        height="18"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <polyline points="9 11 12 14 22 4" />
                        <path
                            d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"
                        />
                    </svg>
                    提交答案
                </button>
            </div>
        </form>

        <!-- 填空题 -->
        {% elif question.type.value == 'fill' %}
        <form
            action="{{ url_for('submit_answer') }}"
            method="post"
            id="answerForm"
        >
            <div class="form-group">
                <label class="form-label">请填写答案</label>
                <input
                    type="text"
                    name="answer"
                    class="form-input"
                    placeholder="输入你的答案..."
                    required
                    style="font-size: 16px; padding: 14px 16px"
                />
            </div>

            <div
                class="question-footer"
                style="
                    border-top: 1px solid var(--border-light);
                    margin-top: 24px;
                    padding-top: 20px;
                "
            >
                <button type="submit" class="btn btn-primary btn-lg">
                    <svg
                        viewBox="0 0 24 24"
                        width="18"
                        height="18"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <polyline points="9 11 12 14 22 4" />
                        <path
                            d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"
                        />
                    </svg>
                    提交答案
                </button>
            </div>
        </form>

        <!-- 问答题 -->
        {% elif question.type.value == 'essay' %}
        <form
            action="{{ url_for('submit_answer') }}"
            method="post"
            id="answerForm"
        >
            <div class="form-group">
                <label class="form-label">请简述你的答案</label>
                <textarea
                    name="answer"
                    class="form-input"
                    placeholder="输入你的回答..."
                    required
                    style="min-height: 150px"
                ></textarea>
            </div>

            <div
                class="question-footer"
                style="
                    border-top: 1px solid var(--border-light);
                    margin-top: 24px;
                    padding-top: 20px;
                "
            >
                <button type="submit" class="btn btn-primary btn-lg">
                    <svg
                        viewBox="0 0 24 24"
                        width="18"
                        height="18"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <polyline points="9 11 12 14 22 4" />
                        <path
                            d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"
                        />
                    </svg>
                    提交答案
                </button>
            </div>
        </form>
        {% endif %}
    </div>
</div>

<!-- 导航按钮 -->
<div
    class="flex items-center justify-between mt-4 animate-fade-in"
    style="animation-delay: 0.15s"
>
    <a href="{{ url_for('index') }}" class="btn btn-secondary">
        <svg
            viewBox="0 0 24 24"
            width="16"
            height="16"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
        >
            <line x1="19" y1="12" x2="5" y2="12" />
            <polyline points="12 19 5 12 12 5" />
        </svg>
        返回首页
    </a>
    <div class="flex gap-2">
        {% if session.current_index > 0 %}
        <form
            action="{{ url_for('prev_question') }}"
            method="post"
            style="display: inline"
        >
            <button type="submit" class="btn btn-secondary">
                <svg
                    viewBox="0 0 24 24"
                    width="16"
                    height="16"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <line x1="19" y1="12" x2="5" y2="12" />
                    <polyline points="12 19 5 12 12 5" />
                </svg>
                上一题
            </button>
        </form>
        {% endif %} {% if session.current_index < session.progress.total - 1 %}
        <form
            action="{{ url_for('next_question') }}"
            method="post"
            style="display: inline"
        >
            <button type="submit" class="btn btn-secondary">
                下一题
                <svg
                    viewBox="0 0 24 24"
                    width="16"
                    height="16"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <line x1="5" y1="12" x2="19" y2="12" />
                    <polyline points="12 5 19 12 12 19" />
                </svg>
            </button>
        </form>
        {% else %}
        <a href="{{ url_for('quiz_complete') }}" class="btn btn-success">
            完成答题
            <svg
                viewBox="0 0 24 24"
                width="16"
                height="16"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <polyline points="20 6 9 17 4 12" />
            </svg>
        </a>
        {% endif %}
    </div>
</div>
{% endblock %} {% block scripts %}
<script>
    // 题目选项点击效果
    document.querySelectorAll(".radio-item").forEach((item) => {
        item.addEventListener("click", function () {
            // 移除其他选中状态
            document
                .querySelectorAll(".radio-item")
                .forEach((i) => i.classList.remove("selected"));
            // 添加当前选中状态
            this.classList.add("selected");
            // 选中单选框
            const radio = this.querySelector('input[type="radio"]');
            if (radio) radio.checked = true;
        });
    });

    // 表单验证
    document
        .getElementById("answerForm")
        .addEventListener("submit", function (e) {
            const checked = this.querySelector('input[name="answer"]:checked');
            const textarea = this.querySelector('textarea[name="answer"]');
            const textInput = this.querySelector(
                'input[type="text"][name="answer"]',
            );

            if (!checked && !textarea?.value && !textInput?.value.trim()) {
                e.preventDefault();
                alert("请先选择或输入答案");
            }
        });
</script>
{% endblock %}