{% extends "base.html" %} {% block title %}QuizTrainer - 答题完成{% endblock %}
{% block content %}
<!-- 结果概览 -->
<div class="page-header animate-fade-in" style="text-align: center">
    <h1>答题完成!</h1>
    <div class="meta" style="justify-content: center; margin-top: 16px">
        <span>
            <svg
                viewBox="0 0 24 24"
                width="20"
                height="20"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <circle cx="12" cy="12" r="10" />
                <polyline points="12 6 12 12 16 14" />
            </svg>
            用时: {{ ((results.end_time | todatetime - results.start_time |
            todatetime).total_seconds() / 60) | round(1) }} 分钟
        </span>
    </div>
</div>

<!-- 统计卡片 -->
<div class="stats-grid animate-fade-in" style="animation-delay: 0.1s">
    <div class="stat-card">
        <div class="icon" style="background: var(--accent-light)">
            <svg
                viewBox="0 0 24 24"
                width="20"
                height="20"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <circle cx="12" cy="12" r="10" />
                <line x1="12" y1="8" x2="12" y2="12" />
                <line x1="12" y1="16" x2="12.01" y2="16" />
            </svg>
        </div>
        <div class="value">{{ results.total_answered }}</div>
        <div class="label">已答题数</div>
    </div>
    <div class="stat-card">
        <div
            class="icon"
            style="background: var(--success-bg); color: var(--success)"
        >
            <svg
                viewBox="0 0 24 24"
                width="20"
                height="20"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <polyline points="20 6 9 17 4 12" />
            </svg>
        </div>
        <div class="value" style="color: var(--success)">
            {{ results.correct }}
        </div>
        <div class="label">答对题目</div>
    </div>
    <div class="stat-card">
        <div
            class="icon"
            style="background: var(--error-bg); color: var(--error)"
        >
            <svg
                viewBox="0 0 24 24"
                width="20"
                height="20"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <line x1="18" y1="6" x2="6" y2="18" />
                <line x1="6" y1="6" x2="18" y2="18" />
            </svg>
        </div>
        <div class="value" style="color: var(--error)">
            {{ results.wrong }}
        </div>
        <div class="label">答错题目</div>
    </div>
    <div class="stat-card">
        <div class="icon" style="background: var(--accent-light)">
            <svg
                viewBox="0 0 24 24"
                width="20"
                height="20"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <line x1="18" y1="20" x2="18" y2="10" />
                <line x1="12" y1="20" x2="12" y2="4" />
                <line x1="6" y1="20" x2="6" y2="14" />
            </svg>
        </div>
        <div class="value">{{ results.accuracy }}%</div>
        <div class="label">正确率</div>
    </div>
</div>

<!-- 正确率圆环 -->
<div
    class="card mb-5 animate-fade-in"
    style="animation-delay: 0.15s; text-align: center"
>
    <div class="card-body" style="padding: 32px">
        <div
            style="
                position: relative;
                width: 160px;
                height: 160px;
                margin: 0 auto;
            "
        >
            <svg
                viewBox="0 0 36 36"
                style="width: 100%; height: 100%; transform: rotate(-90deg)"
            >
                <circle
                    cx="18"
                    cy="18"
                    r="16"
                    fill="none"
                    stroke="var(--progress-bg)"
                    stroke-width="3"
                />
                <circle
                    cx="18"
                    cy="18"
                    r="16"
                    fill="none"
                    stroke="{{ 'var(--success)' if results.accuracy >= 60 else 'var(--warning)' if results.accuracy >= 40 else 'var(--error)' }}"
                    stroke-width="3"
                    stroke-linecap="round"
                    stroke-dasharray="{{ results.accuracy }}, 100"
                />
            </svg>
            <div
                style="
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    text-align: center;
                "
            >
                <div
                    style="
                        font-size: 36px;
                        font-weight: 700;
                        color: var(--text-primary);
                    "
                >
                    {{ results.accuracy }}%
                </div>
                <div style="font-size: 12px; color: var(--text-muted)">
                    正确率
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 错题列表 -->
{% if results.wrong_questions %}
<div class="card mb-5 animate-fade-in" style="animation-delay: 0.2s">
    <div class="card-header">
        <h3 class="card-title">
            <svg
                viewBox="0 0 24 24"
                width="18"
                height="18"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                style="color: var(--error)"
            >
                <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>
            错题回顾 ({{ results.wrong_questions | length }} 道)
        </h3>
    </div>
    <div class="card-body">
        <div class="history-list">
            {% for item in results.wrong_questions %}
            <div
                class="history-item"
                style="border-left: 3px solid var(--error)"
            >
                <div class="history-result wrong">
                    <svg
                        viewBox="0 0 24 24"
                        width="18"
                        height="18"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <line x1="18" y1="6" x2="6" y2="18" />
                        <line x1="6" y1="6" x2="18" y2="18" />
                    </svg>
                </div>
                <div class="history-content">
                    <div class="history-question">
                        {{ item.question.question }}
                    </div>
                    <div class="history-meta">
                        <span class="tag tag-{{ item.question.type }}"
                            >{{ item.question.type_display }}</span
                        >
                        <span style="color: var(--text-muted)">
                            正确答案:
                            <strong style="color: var(--success)"
                                >{{ item.question.answer }}</strong
                            >
                        </span>
                        <span style="color: var(--text-muted)">
                            你的答案:
                            <strong style="color: var(--error)"
                                >{{ item.user_answer }}</strong
                            >
                        </span>
                    </div>
                    {% if item.question.explanation %}
                    <div
                        style="
                            margin-top: 8px;
                            font-size: 13px;
                            color: var(--text-muted);
                        "
                    >
                        <strong>解析:</strong> {{
                        item.question.explanation[:100] }}{% if
                        item.question.explanation | length > 100 %}...{% endif
                        %}
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

<!-- 操作按钮 -->
<div
    class="flex items-center justify-center gap-3 animate-fade-in"
    style="animation-delay: 0.25s"
>
    <a href="{{ url_for('index') }}" class="btn btn-secondary btn-lg">
        <svg
            viewBox="0 0 24 24"
            width="18"
            height="18"
            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>
    <a href="{{ url_for('quiz') }}" class="btn btn-primary btn-lg">
        <svg
            viewBox="0 0 24 24"
            width="18"
            height="18"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
        >
            <polygon points="5 3 19 12 5 21 5 3" />
        </svg>
        再来一组
    </a>
    <a href="{{ url_for('history') }}" class="btn btn-outline btn-lg">
        <svg
            viewBox="0 0 24 24"
            width="18"
            height="18"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
        >
            <circle cx="12" cy="12" r="10" />
            <polyline points="12 6 12 12 16 14" />
        </svg>
        查看历史
    </a>
</div>
{% endblock %} {% block extra_head %} {{ super() }}
<style>
    @keyframes rotate {
        from {
            transform: rotate(-90deg);
        }
        to {
            transform: rotate(-90deg);
        }
    }
</style>
{% endblock %}