zlqy/templates/exam_result.html

{% extends "base.html" %}
{% block title %}考试结果 - 智联青云{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto space-y-6">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
        <h1 class="text-xl sm:text-2xl font-bold bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">考试结果</h1>
        <a href="/exams" class="text-sm text-slate-500 hover:text-slate-700">← 返回列表</a>
    </div>
    <div class="futuristic-card p-4 sm:p-6">
        <h2 class="text-lg sm:text-xl font-bold bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent break-words">{{ exam.title }}</h2>
        <div class="mt-2 flex flex-wrap items-center text-xs sm:text-sm text-slate-500 gap-2 sm:gap-4">
            <span>{{ exam.subject }}</span>
            <span>满分{{ exam.total_score }}分</span>
            <span class="break-all">提交时间：{{ submission.submitted_at }}</span>
        </div>
        <div class="mt-4 p-4 rounded-lg {% if score_hidden %}bg-blue-50 border border-blue-200{% elif submission.graded %}bg-green-50 border border-green-200{% else %}bg-yellow-50 border border-yellow-200{% endif %}">
            {% if score_hidden %}
            <div class="text-base sm:text-lg font-medium text-blue-700">成绩尚未公布</div>
            <div class="text-xs sm:text-sm text-blue-600 mt-1 break-words">成绩将于 {{ exam.score_release_time.strftime('%Y年%m月%d日 %H:%M') }} 公布</div>
            {% elif submission.graded %}
            <div class="text-2xl sm:text-3xl font-bold text-green-700">{{ submission.score }} <span class="text-base sm:text-lg font-normal text-green-600">/ {{ exam.total_score }}</span></div>
            <div class="text-xs sm:text-sm text-green-600 mt-1">批改人：{{ submission.graded_by }}</div>
            {% else %}
            <div class="text-base sm:text-lg font-medium text-yellow-700">待批改</div>
            <div class="text-xs sm:text-sm text-yellow-600 break-words">选择题已自动批改得分：{{ submission.score }}分，主观题等待老师批改</div>
            {% endif %}
        </div>
    </div>
    {% for q in questions %}
    <div class="futuristic-card p-4 sm:p-6">
        <div class="flex items-start space-x-3 sm:space-x-4">
            <span class="flex-shrink-0 w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-purple-500 to-blue-500 rounded-full flex items-center justify-center text-white font-medium text-sm">{{ loop.index }}</span>
            <div class="flex-1 space-y-3 min-w-0">
                <div class="flex flex-col sm:flex-row sm:justify-between gap-2">
                    <p class="text-base sm:text-lg text-slate-900 break-words">{{ q.content }}</p>
                    <span class="text-xs sm:text-sm text-slate-400 whitespace-nowrap">（{{ q.score }}分）</span>
                </div>
                {% if q.get('images') %}
                <div class="flex flex-wrap gap-2">
                    {% for img in q.images %}
                    <img src="{{ img }}" class="max-h-32 sm:max-h-48 rounded border border-slate-200 cursor-pointer max-w-full" onclick="window.open(this.src)" alt="题目图片">
                    {% endfor %}
                </div>
                {% endif %}
                {% if q.type == 'choice' %}
                <div class="space-y-2">
                    {% for opt in q.options %}
                    {% set letter = ['A','B','C','D'][loop.index0] %}
                    {% set is_answer = letter == q.get('answer','') %}
                    {% set is_selected = letter == answers.get(q.id|string,'') %}
                    <div class="flex items-center space-x-3 p-3 rounded-lg border
                        {% if is_answer %}border-green-300 bg-green-50
                        {% elif is_selected and not is_answer %}border-red-300 bg-red-50
                        {% else %}border-slate-200{% endif %}">
                        {% if is_selected %}
                        <svg class="w-5 h-5 {% if is_answer %}text-green-600{% else %}text-red-500{% endif %}" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                        {% else %}
                        <div class="w-5 h-5"></div>
                        {% endif %}
                        <span class="text-slate-700 option-text">{{ letter }}. {{ opt|safe }}</span>
                        {% if is_answer %}<span class="badge-futuristic text-xs ml-2">✓ 正确答案</span>{% endif %}
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="p-3 bg-slate-50 rounded-lg border border-slate-200">
                    <div class="text-sm text-slate-500 mb-1">您的答案：</div>
                    <div class="text-slate-800">{{ answers.get(q.id|string, '（未作答）') | render_images }}</div>
                </div>
                {% if q.get('answer') %}
                <div class="p-3 bg-green-50 rounded-lg border border-green-200">
                    <div class="text-sm text-green-600 mb-1">参考答案：</div>
                    <div class="text-green-800">{{ q.answer }}</div>
                </div>
                {% endif %}
                {% endif %}
                {% if q.get('explanation') %}
                <div class="p-3 bg-indigo-50 rounded-lg border border-indigo-200">
                    <div class="text-sm text-indigo-600 mb-1 font-medium">解析：</div>
                    <div class="text-indigo-900 text-sm">{{ q.explanation }}</div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}
{% block scripts %}
<script>
// 渲染页面中的数学公式
if (typeof renderMathInElement === 'function') {
    renderMathInElement(document.body, {
        delimiters: [{left:'$$',right:'$$',display:true},{left:'$',right:'$',display:false}],
        throwOnError: false
    });
}
</script>
{% endblock %}