{% extends "base.html" %} {% block title %}QuizTrainer - 答题结果{% endblock %}
{% block content %}
<!-- 结果显示 -->
<div class="animate-fade-in">
    {% if record.is_correct %}
    <div class="result-correct">
        <svg
            viewBox="0 0 24 24"
            width="24"
            height="24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
        >
            <circle cx="12" cy="12" r="10" />
            <polyline points="16 10 10.5 15.5 8 13" />
        </svg>
        <div>
            <strong>回答正确！</strong>
            <span style="margin-left: 8px; opacity: 0.8">+1 分</span>
        </div>
    </div>
    {% else %}
    <div class="result-wrong">
        <svg
            viewBox="0 0 24 24"
            width="24"
            height="24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
        >
            <circle cx="12" cy="12" r="10" />
            <line x1="15" y1="9" x2="9" y2="15" />
            <line x1="9" y1="9" x2="15" y2="15" />
        </svg>
        <div>
            <strong>回答错误</strong>
            <span style="margin-left: 8px; opacity: 0.8">再接再厉</span>
        </div>
    </div>
    {% endif %}
</div>

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

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

        <!-- 选择题显示 -->
        {% if question.type.value == 'choice' %}
        <div class="question-options">
            {% for option in question.options %} {% set opt_key = ['A', 'B',
            'C', 'D', 'E', 'F'][loop.index0] %} {% set is_correct_opt = opt_key
            == question.answer %} {% set is_user_opt = opt_key ==
            record.user_answer %}
            <div
                class="radio-item {% if is_correct_opt %}selected{% endif %}"
                style="{% if is_correct_opt and not is_user_opt %}background: var(--success-bg); border-color: var(--success);{% endif %}{% if is_user_opt and not is_correct_opt %}background: var(--error-bg); border-color: var(--error);{% endif %}"
            >
                <span class="option-label">
                    <span
                        class="option-key"
                        style="{% if is_correct_opt %}background: var(--success); color: white; border-color: var(--success);{% endif %}{% if is_user_opt and not is_correct_opt %}background: var(--error); color: white; border-color: var(--error);{% endif %}"
                    >
                        {{ opt_key }}
                    </span>
                    <span>{{ option }}</span>
                    {% if is_correct_opt %}
                    <span
                        class="tag"
                        style="
                            background: var(--success-bg);
                            color: var(--success);
                            margin-left: auto;
                        "
                        >正确答案</span
                    >
                    {% endif %} {% if is_user_opt and not is_correct_opt %}
                    <span
                        class="tag"
                        style="
                            background: var(--error-bg);
                            color: var(--error);
                            margin-left: auto;
                        "
                        >你的答案</span
                    >
                    {% endif %}
                </span>
            </div>
            {% endfor %}
        </div>

        <!-- 判断题显示 -->
        {% elif question.type.value == 'truefalse' %}
        <div class="question-options">
            <div
                class="radio-item {% if question.answer == True %}selected{% endif %}"
                style="{% if question.answer == True %}background: var(--success-bg); border-color: var(--success);{% endif %}"
            >
                <span class="option-label">
                    <span
                        class="option-key"
                        style="{% if question.answer == True %}background: var(--success); color: white; border-color: var(--success);{% endif %}"
                        >T</span
                    >
                    <span>正确 (True)</span>
                    {% if question.answer == True %}
                    <span
                        class="tag"
                        style="
                            background: var(--success-bg);
                            color: var(--success);
                            margin-left: auto;
                        "
                        >正确答案</span
                    >
                    {% endif %}
                </span>
            </div>
            <div
                class="radio-item {% if question.answer == False %}selected{% endif %}"
                style="{% if question.answer == False %}background: var(--success-bg); border-color: var(--success);{% endif %}"
            >
                <span class="option-label">
                    <span
                        class="option-key"
                        style="{% if question.answer == False %}background: var(--success); color: white; border-color: var(--success);{% endif %}"
                        >F</span
                    >
                    <span>错误 (False)</span>
                    {% if question.answer == False %}
                    <span
                        class="tag"
                        style="
                            background: var(--success-bg);
                            color: var(--success);
                            margin-left: auto;
                        "
                        >正确答案</span
                    >
                    {% endif %}
                </span>
            </div>
            {% if record.user_answer != question.answer %}
            <div
                style="
                    margin-top: 12px;
                    padding: 12px;
                    background: var(--error-bg);
                    border-radius: var(--radius-md);
                    color: var(--error);
                    font-size: 13px;
                "
            >
                你的答案: {{ '正确' if record.user_answer == 'true' else '错误'
                if record.user_answer == 'false' else record.user_answer }}
            </div>
            {% endif %}
        </div>

        <!-- 填空题/问答题显示 -->
        {% else %}
        <div
            style="
                background: var(--bg-secondary);
                padding: 16px;
                border-radius: var(--radius-md);
                margin-bottom: 12px;
            "
        >
            <div
                style="
                    font-size: 12px;
                    color: var(--text-muted);
                    margin-bottom: 6px;
                "
            >
                正确答案
            </div>
            <div style="font-size: 15px; color: var(--text-primary)">
                {{ question.answer }}
            </div>
        </div>
        {% if record.user_answer != question.answer and question.type.value ==
        'fill' %}
        <div
            style="
                background: var(--error-bg);
                padding: 16px;
                border-radius: var(--radius-md);
                color: var(--error);
            "
        >
            <div style="font-size: 12px; margin-bottom: 6px">你的答案</div>
            <div style="font-size: 15px">{{ record.user_answer }}</div>
        </div>
        {% endif %} {% endif %}

        <!-- 解析 -->
        {% if question.explanation %}
        <div class="explanation-box">
            <h4>
                <svg
                    viewBox="0 0 24 24"
                    width="16"
                    height="16"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <circle cx="12" cy="12" r="10" />
                    <line x1="12" y1="16" x2="12" y2="12" />
                    <line x1="12" y1="8" x2="12.01" y2="8" />
                </svg>
                题目解析
            </h4>
            <p>{{ question.explanation }}</p>
        </div>
        {% endif %}
    </div>

    <div class="question-footer">
        <div style="font-size: 13px; color: var(--text-muted)">
            答题时间: {{ record.timestamp[:19] }}
        </div>
    </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">
        <a href="{{ url_for('quiz') }}" class="btn btn-primary">
            <svg
                viewBox="0 0 24 24"
                width="16"
                height="16"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <polygon points="5 3 19 12 5 21 5 3" />
            </svg>
            继续答题
        </a>
        {% 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-success">
                下一题
                <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 %}