{% extends "base.html" %}
{% block title %}{{ exam.title }} - 智联青云{% endblock %}
{% block content %}
<div class="max-w-5xl mx-auto">
    {% if need_password %}
    <div class="bg-white shadow-sm rounded-lg p-8 border border-slate-200 max-w-md mx-auto mt-12">
        <div class="text-center mb-6">
            <svg class="w-16 h-16 mx-auto text-amber-500 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
            <h2 class="text-xl font-bold text-slate-900">{{ exam.title }}</h2>
            <p class="text-sm text-slate-500 mt-1">该考试需要输入密码才能进入</p>
        </div>
        <div id="password-form">
            <input type="password" id="exam-pwd" placeholder="请输入考试密码"
                   class="w-full px-4 py-3 border border-slate-300 rounded-md text-center text-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"
                   onkeydown="if(event.key==='Enter')verifyPassword()">
            <p id="pwd-error" class="text-red-500 text-sm text-center mt-2 hidden">密码错误，请重试</p>
            <button onclick="verifyPassword()" class="w-full mt-4 px-4 py-3 bg-primary text-white rounded-md font-medium hover:bg-blue-700">
                验证并进入考试
            </button>
            <a href="/exams" class="block text-center mt-3 text-sm text-slate-500 hover:text-slate-700">返回列表</a>
        </div>
    </div>
    <script>
    async function verifyPassword() {
        const pwd = document.getElementById('exam-pwd').value;
        if (!pwd) { document.getElementById('pwd-error').textContent = '请输入密码'; document.getElementById('pwd-error').classList.remove('hidden'); return; }
        try {
            const res = await fetch('/api/exams/{{ exam.id }}/verify-password', {
                method: 'POST', headers: {'Content-Type':'application/json'},
                body: JSON.stringify({password: pwd})
            });
            const data = await res.json();
            if (data.success) { location.reload(); }
            else { document.getElementById('pwd-error').textContent = data.message || '密码错误'; document.getElementById('pwd-error').classList.remove('hidden'); }
        } catch(e) { document.getElementById('pwd-error').textContent = '验证失败，请重试'; document.getElementById('pwd-error').classList.remove('hidden'); }
    }
    </script>
    {% elif existing_submission %}
    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 text-center">
        <p class="text-yellow-800 font-medium">您已提交过该试卷</p>
        <a href="/exams/{{ exam.id }}/result" class="mt-3 inline-block px-4 py-2 bg-primary text-white rounded-md text-sm">查看结果</a>
    </div>
    {% elif exam.status == 'closed' %}
    <div class="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
        <p class="text-red-800 font-medium">该考试已关闭</p>
        <a href="/exams" class="mt-3 inline-block px-4 py-2 bg-slate-500 text-white rounded-md text-sm">返回列表</a>
    </div>
    {% elif schedule_status == 'not_started' %}
    <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 text-center">
        <p class="text-blue-800 font-medium text-xl mb-2">⏰ 考试尚未开始</p>
        <p class="text-blue-600">预定开始时间：{{ exam.scheduled_start.strftime('%Y-%m-%d %H:%M') }}</p>
        {% if exam.scheduled_end %}
        <p class="text-blue-600">预定结束时间：{{ exam.scheduled_end.strftime('%Y-%m-%d %H:%M') }}</p>
        {% endif %}
        <div class="mt-4">
            <p class="text-sm text-blue-500 mb-2">距离开考还有：</p>
            <div id="countdown" class="text-3xl font-bold text-blue-700"></div>
        </div>
        <a href="/exams" class="mt-4 inline-block px-4 py-2 bg-slate-500 text-white rounded-md text-sm">返回列表</a>
    </div>
    <script>
    (function() {
        const startTime = new Date('{{ exam.scheduled_start.strftime("%Y-%m-%dT%H:%M:%S") }}').getTime();
        function updateCountdown() {
            const now = Date.now();
            const diff = Math.max(0, Math.floor((startTime - now) / 1000));
            if (diff <= 0) { location.reload(); return; }
            const d = Math.floor(diff / 86400);
            const h = Math.floor((diff % 86400) / 3600);
            const m = Math.floor((diff % 3600) / 60);
            const s = diff % 60;
            let text = '';
            if (d > 0) text += d + '天 ';
            text += String(h).padStart(2,'0') + ':' + String(m).padStart(2,'0') + ':' + String(s).padStart(2,'0');
            document.getElementById('countdown').textContent = text;
            setTimeout(updateCountdown, 1000);
        }
        updateCountdown();
    })();
    </script>
    {% elif schedule_status == 'ended' %}
    <div class="bg-gray-50 border border-gray-200 rounded-lg p-6 text-center">
        <p class="text-gray-800 font-medium">该考试已结束</p>
        <p class="text-gray-600 text-sm mt-1">结束时间：{{ exam.scheduled_end.strftime('%Y-%m-%d %H:%M') }}</p>
        <a href="/exams" class="mt-3 inline-block px-4 py-2 bg-slate-500 text-white rounded-md text-sm">返回列表</a>
    </div>
    {% else %}
    <!-- 顶部信息栏 -->
    <div class="bg-white shadow-sm rounded-lg p-4 border border-slate-200 sticky top-0 z-20">
        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-lg font-bold text-slate-900">{{ exam.title }}</h1>
                <div class="mt-1 text-sm text-slate-500">
                    {{ exam.subject }} · {{ exam.duration }}分钟 · 满分{{ exam.total_score }}分
                    {% if exam.scheduled_end %}
                    · 截止：{{ exam.scheduled_end.strftime('%m-%d %H:%M') }}
                    {% endif %}
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <div class="text-sm text-slate-500">
                    <span id="progress-text">0</span>/{{ questions|length }} 已答
                </div>
                <div class="flex items-center text-red-600 font-medium">
                    <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    <span id="timer">--:--:--</span>
                </div>
                <div id="tab-warning" class="hidden text-xs text-orange-600 bg-orange-50 px-2 py-1 rounded">
                    切屏 <span id="tab-count">0</span> 次
                </div>
            </div>
        </div>
        <!-- 进度条 -->
        <div class="mt-3 w-full bg-slate-100 rounded-full h-1.5">
            <div id="progress-bar" class="bg-primary h-1.5 rounded-full transition-all duration-300" style="width:0%"></div>
        </div>
    </div>

    <div class="mt-4 flex gap-4">
        <!-- 题号导航面板 -->
        <div class="hidden lg:block w-48 flex-shrink-0">
            <div class="bg-white shadow-sm rounded-lg p-4 border border-slate-200 sticky top-24">
                <div class="text-sm font-medium text-slate-700 mb-3">题目导航</div>
                <div class="grid grid-cols-5 gap-2" id="nav-panel">
                    {% for q in questions %}
                    <button onclick="goToQuestion({{ loop.index0 }})" id="nav-{{ loop.index0 }}"
                        class="w-8 h-8 rounded-md text-xs font-medium border border-slate-200 bg-slate-50 text-slate-600 hover:border-primary hover:text-primary transition-colors flex items-center justify-center">
                        {{ loop.index }}
                    </button>
                    {% endfor %}
                </div>
                <div class="mt-4 space-y-1 text-xs text-slate-500">
                    <div class="flex items-center"><span class="w-3 h-3 rounded bg-primary mr-2"></span>当前题</div>
                    <div class="flex items-center"><span class="w-3 h-3 rounded bg-green-500 mr-2"></span>已答</div>
                    <div class="flex items-center"><span class="w-3 h-3 rounded bg-slate-200 mr-2"></span>未答</div>
                </div>
                <div class="mt-4 text-xs text-slate-400" id="save-status">自动保存中...</div>
            </div>
        </div>

        <!-- 主答题区 -->
        <div class="flex-1 min-w-0">
            <!-- 移动端题号导航 -->
            <div class="lg:hidden mb-4 bg-white shadow-sm rounded-lg p-3 border border-slate-200">
                <div class="flex flex-wrap gap-1.5" id="nav-panel-mobile">
                    {% for q in questions %}
                    <button onclick="goToQuestion({{ loop.index0 }})" id="nav-m-{{ loop.index0 }}"
                        class="w-7 h-7 rounded text-xs font-medium border border-slate-200 bg-slate-50 text-slate-600 flex items-center justify-center">
                        {{ loop.index }}
                    </button>
                    {% endfor %}
                </div>
            </div>

            <form id="exam-form" onsubmit="handleSubmit(event)">
                {% for q in questions %}
                <div class="question-card bg-white shadow-sm rounded-lg p-6 border border-slate-200 mb-4" data-index="{{ loop.index0 }}" style="{% if loop.index0 != 0 %}display:none{% endif %}">
                    <div class="flex items-start space-x-4">
                        <span class="flex-shrink-0 w-8 h-8 bg-slate-100 rounded-full flex items-center justify-center text-slate-600 font-medium">{{ loop.index }}</span>
                        <div class="flex-1 space-y-4">
                            <div class="flex justify-between items-start">
                                <div>
                                    <span class="text-xs font-medium px-2 py-0.5 rounded
                                        {% if q.type == 'choice' %}bg-blue-50 text-blue-700
                                        {% elif q.type == 'fill' %}bg-green-50 text-green-700
                                        {% else %}bg-purple-50 text-purple-700{% endif %}">
                                        {% if q.type == 'choice' %}选择题{% elif q.type == 'fill' %}填空题{% else %}解答题{% endif %}
                                    </span>
                                    <p class="mt-2 text-lg text-slate-900">{{ q.content }}</p>
                                    {% if q.get('images') %}
                                    <div class="mt-2 flex flex-wrap gap-2">
                                        {% for img in q.images %}
                                        <img src="{{ img }}" class="max-h-48 rounded border border-slate-200 cursor-pointer" onclick="window.open(this.src)" alt="题目图片">
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                                <span class="text-sm text-slate-400 whitespace-nowrap ml-4">（{{ q.score }}分）</span>
                            </div>
                            {% if q.type == 'choice' %}
                            <div class="space-y-3">
                                {% for opt in q.options %}
                                <label class="flex items-center space-x-3 p-3 rounded-lg border border-slate-200 hover:bg-slate-50 cursor-pointer transition-colors option-label" data-qid="{{ q.id }}">
                                    <input type="radio" name="q-{{ q.id }}" value="{{ ['A','B','C','D'][loop.index0] }}" class="h-4 w-4 text-primary border-slate-300 focus:ring-primary answer-input" data-qid="{{ q.id }}" onchange="onAnswerChange({{ q.id }})">
                                    <span class="text-slate-700">{{ ['A','B','C','D'][loop.index0] }}. {{ opt }}</span>
                                </label>
                                {% endfor %}
                            </div>
                            {% elif q.type == 'fill' %}
                            <input type="text" name="q-{{ q.id }}" class="w-full px-3 py-2 border border-slate-300 rounded-md answer-input" placeholder="请输入答案" data-qid="{{ q.id }}" oninput="onAnswerChange({{ q.id }})">
                            {% else %}
                            <textarea name="q-{{ q.id }}" rows="6" class="w-full rounded-lg border-slate-300 shadow-sm focus:border-primary focus:ring-primary border px-3 py-2 answer-input" placeholder="请输入您的答案..." data-qid="{{ q.id }}" oninput="onAnswerChange({{ q.id }})"></textarea>
                            <div class="flex items-center gap-2 mt-2">
                                <button type="button" onclick="examUpload({{ q.id }})" class="inline-flex items-center gap-1 px-3 py-1.5 text-xs border border-slate-200 rounded-lg hover:bg-slate-50 text-slate-600">📷 上传图片</button>
                                <button type="button" onclick="examCamera({{ q.id }})" class="inline-flex items-center gap-1 px-3 py-1.5 text-xs border border-slate-200 rounded-lg hover:bg-slate-50 text-slate-600">📸 拍照上传</button>
                            </div>
                            <div id="img-preview-{{ q.id }}" class="flex flex-wrap gap-2 mt-2"></div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endfor %}

                <!-- 分页控制 -->
                <div class="flex justify-between items-center mt-4 mb-8">
                    <button type="button" id="prev-btn" onclick="prevQuestion()" class="px-5 py-2.5 bg-slate-100 text-slate-700 rounded-lg font-medium hover:bg-slate-200 disabled:opacity-40 disabled:cursor-not-allowed" disabled>
                        ← 上一题
                    </button>
                    <span class="text-sm text-slate-500">
                        第 <span id="current-num">1</span> / {{ questions|length }} 题
                    </span>
                    <button type="button" id="next-btn" onclick="nextQuestion()" class="px-5 py-2.5 bg-primary text-white rounded-lg font-medium hover:bg-blue-700">
                        下一题 →
                    </button>
                    <button type="submit" id="submit-btn" class="px-6 py-2.5 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 hidden">
                        提交试卷
                    </button>
                </div>
            </form>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}
{% block scripts %}
{% if not existing_submission and exam.status != 'closed' and schedule_status == 'available' %}
<script>
const EXAM_ID = {{ exam.id }};
const TOTAL_Q = {{ questions|length }};
const DURATION = {{ exam.duration }};
const STORAGE_KEY = `exam_${EXAM_ID}_answers`;
const TIMER_KEY = `exam_${EXAM_ID}_start`;
{% if exam.scheduled_end %}
const SCHEDULED_END = new Date('{{ exam.scheduled_end.strftime("%Y-%m-%dT%H:%M:%S") }}').getTime();
{% else %}
const SCHEDULED_END = null;
{% endif %}

let currentIndex = 0;
let answers = {};
let tabSwitchCount = 0;

// ===== 图片上传 =====
function examUpload(qid) {
    const inp = document.createElement('input');
    inp.type = 'file'; inp.accept = 'image/*'; inp.multiple = true;
    inp.onchange = () => { if (inp.files.length) examUploadFiles(inp.files, qid); };
    inp.click();
}
function examCamera(qid) {
    const inp = document.createElement('input');
    inp.type = 'file'; inp.accept = 'image/*'; inp.capture = 'environment';
    inp.onchange = () => { if (inp.files.length) examUploadFiles(inp.files, qid); };
    inp.click();
}
async function examUploadFiles(files, qid) {
    for (const file of files) {
        if (file.size > 10*1024*1024) { alert('文件不能超过10MB'); continue; }
        const fd = new FormData();
        fd.append('file', file);
        try {
            const res = await fetch('/api/upload', {method:'POST', body: fd});
            const d = await res.json();
            if (d.success) {
                const ta = document.querySelector(`[name="q-${qid}"]`);
                if (ta) {
                    const tag = `\n[img:${d.url}]\n`;
                    ta.value += tag;
                    onAnswerChange(qid);
                }
                const preview = document.getElementById('img-preview-' + qid);
                if (preview) {
                    const div = document.createElement('div');
                    div.className = 'relative group';
                    div.innerHTML = `<img src="${d.url}" class="w-16 h-16 object-cover rounded border border-slate-200"><button type="button" onclick="this.parentElement.remove()" class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white rounded-full text-xs leading-none flex items-center justify-center opacity-0 group-hover:opacity-100">×</button>`;
                    preview.appendChild(div);
                }
            } else { alert(d.message); }
        } catch(e) { alert('上传失败'); }
    }
}

// 初始化：从服务器草稿或localStorage恢复答案
function initAnswers() {
    // 优先从服务器草稿恢复
    {% if draft %}
    const serverDraft = {{ draft.answers | tojson }};
    if (serverDraft && typeof serverDraft === 'object' && Object.keys(serverDraft).length > 0) {
        answers = serverDraft;
        restoreAnswersToForm();
        saveToLocal();
        updateNavStatus();
        return;
    }
    {% endif %}
    // 其次从localStorage恢复
    const saved = localStorage.getItem(STORAGE_KEY);
    if (saved) {
        try {
            answers = JSON.parse(saved);
            restoreAnswersToForm();
        } catch(e) {}
    }
    updateNavStatus();
}

function restoreAnswersToForm() {
    for (const [qid, val] of Object.entries(answers)) {
        const radio = document.querySelector(`input[name="q-${qid}"][value="${val}"]`);
        if (radio) { radio.checked = true; continue; }
        const input = document.querySelector(`[name="q-${qid}"]`);
        if (input) input.value = val;
        // 恢复图片预览
        const imgMatches = val.matchAll(/\[img:(\/static\/uploads\/[^\]]+)\]/g);
        const preview = document.getElementById('img-preview-' + qid);
        if (preview) {
            for (const m of imgMatches) {
                const div = document.createElement('div');
                div.className = 'relative group';
                div.innerHTML = `<img src="${m[1]}" class="w-16 h-16 object-cover rounded border border-slate-200"><button type="button" onclick="this.parentElement.remove()" class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white rounded-full text-xs leading-none flex items-center justify-center opacity-0 group-hover:opacity-100">×</button>`;
                preview.appendChild(div);
            }
        }
    }
}

function onAnswerChange(qid) {
    const radio = document.querySelector(`input[name="q-${qid}"]:checked`);
    if (radio) {
        answers[String(qid)] = radio.value;
    } else {
        const input = document.querySelector(`[name="q-${qid}"]`);
        if (input) answers[String(qid)] = input.value;
    }
    saveToLocal();
    updateNavStatus();
    debounceSaveToServer();
}

function saveToLocal() {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(answers));
}

let saveTimer = null;
function debounceSaveToServer() {
    clearTimeout(saveTimer);
    saveTimer = setTimeout(saveToServer, 3000);
}

function saveToServer() {
    fetch(`/api/exams/${EXAM_ID}/save-draft`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({answers})
    }).then(r => r.json()).then(data => {
        if (data.success) {
            document.getElementById('save-status').textContent = '已保存 ' + new Date().toLocaleTimeString();
        }
    }).catch(() => {});
}

// 题号导航状态
function updateNavStatus() {
    let answeredCount = 0;
    for (let i = 0; i < TOTAL_Q; i++) {
        const qid = getQidByIndex(i);
        const isAnswered = answers[String(qid)] && answers[String(qid)].trim() !== '';
        const isCurrent = i === currentIndex;
        if (isAnswered) answeredCount++;

        ['nav-', 'nav-m-'].forEach(prefix => {
            const btn = document.getElementById(prefix + i);
            if (!btn) return;
            btn.className = 'w-' + (prefix === 'nav-' ? '8 h-8' : '7 h-7') + ' rounded' + (prefix === 'nav-' ? '-md' : '') + ' text-xs font-medium border flex items-center justify-center transition-colors ';
            if (isCurrent) {
                btn.className += 'border-primary bg-primary text-white';
            } else if (isAnswered) {
                btn.className += 'border-green-400 bg-green-500 text-white';
            } else {
                btn.className += 'border-slate-200 bg-slate-50 text-slate-600 hover:border-primary hover:text-primary';
            }
        });
    }
    document.getElementById('progress-text').textContent = answeredCount;
    document.getElementById('progress-bar').style.width = (answeredCount / TOTAL_Q * 100) + '%';
}

function getQidByIndex(idx) {
    const qids = [{% for q in questions %}{{ q.id }}{% if not loop.last %},{% endif %}{% endfor %}];
    return qids[idx];
}

// 分页切换
function showQuestion(idx) {
    document.querySelectorAll('.question-card').forEach((card, i) => {
        card.style.display = i === idx ? '' : 'none';
    });
    currentIndex = idx;
    document.getElementById('current-num').textContent = idx + 1;
    document.getElementById('prev-btn').disabled = idx === 0;

    // 渲染当前题目的数学公式
    const card = document.querySelectorAll('.question-card')[idx];
    if (card && typeof renderMathInElement === 'function') {
        renderMathInElement(card, {
            delimiters: [{left:'$$',right:'$$',display:true},{left:'$',right:'$',display:false}],
            throwOnError: false
        });
    }

    if (idx === TOTAL_Q - 1) {
        document.getElementById('next-btn').classList.add('hidden');
        document.getElementById('submit-btn').classList.remove('hidden');
    } else {
        document.getElementById('next-btn').classList.remove('hidden');
        document.getElementById('submit-btn').classList.add('hidden');
    }
    updateNavStatus();
    window.scrollTo({top: 0, behavior: 'smooth'});
}

function goToQuestion(idx) { showQuestion(idx); }
function prevQuestion() { if (currentIndex > 0) showQuestion(currentIndex - 1); }
function nextQuestion() { if (currentIndex < TOTAL_Q - 1) showQuestion(currentIndex + 1); }

// 计时器（持久化，支持预定结束时间）
function initTimer() {
    let startTime = localStorage.getItem(TIMER_KEY);
    if (!startTime) {
        startTime = Date.now();
        localStorage.setItem(TIMER_KEY, startTime);
    } else {
        startTime = parseInt(startTime);
    }
    const durationEnd = startTime + DURATION * 60 * 1000;
    // 如果有预定结束时间，取两者中较早的
    const endTime = SCHEDULED_END ? Math.min(durationEnd, SCHEDULED_END) : durationEnd;

    function tick() {
        const remaining = Math.max(0, Math.floor((endTime - Date.now()) / 1000));
        if (remaining <= 0) {
            document.getElementById('timer').textContent = '00:00:00';
            autoSubmit();
            return;
        }
        const h = Math.floor(remaining / 3600);
        const m = Math.floor((remaining % 3600) / 60);
        const s = remaining % 60;
        document.getElementById('timer').textContent =
            `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;

        // 最后5分钟变红闪烁
        if (remaining <= 300) {
            document.getElementById('timer').classList.add('animate-pulse');
        }
        setTimeout(tick, 1000);
    }
    tick();
}

function autoSubmit() {
    alert('考试时间到，系统将自动提交试卷！');
    doSubmit();
}

// 防切屏
function initTabDetection() {
    document.addEventListener('visibilitychange', () => {
        if (document.hidden) {
            tabSwitchCount++;
            document.getElementById('tab-count').textContent = tabSwitchCount;
            document.getElementById('tab-warning').classList.remove('hidden');
            if (tabSwitchCount >= 3) {
                alert('警告：您已切屏' + tabSwitchCount + '次！频繁切屏可能被视为作弊行为。');
            }
        }
    });
}

// 提交
function handleSubmit(e) {
    e.preventDefault();
    // 检查未答题数
    let unanswered = 0;
    for (let i = 0; i < TOTAL_Q; i++) {
        const qid = getQidByIndex(i);
        if (!answers[String(qid)] || answers[String(qid)].trim() === '') unanswered++;
    }
    let msg = '确定提交试卷？提交后不可修改。';
    if (unanswered > 0) msg = `您还有 ${unanswered} 道题未作答，${msg}`;
    if (!confirm(msg)) return;
    doSubmit();
}

function doSubmit() {
    const btn = document.getElementById('submit-btn');
    btn.disabled = true;
    btn.textContent = '正在提交...';

    fetch(`/api/exams/${EXAM_ID}/submit`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({answers})
    }).then(r => r.json()).then(data => {
        if (data.success) {
            // 清除本地存储
            localStorage.removeItem(STORAGE_KEY);
            localStorage.removeItem(TIMER_KEY);
            alert('提交成功！');
            window.location.href = `/exams/${EXAM_ID}/result`;
        } else {
            alert(data.message);
            btn.disabled = false;
            btn.textContent = '提交试卷';
        }
    }).catch(() => {
        alert('提交失败，请重试');
        btn.disabled = false;
        btn.textContent = '提交试卷';
    });
}

// 初始化
initAnswers();
initTimer();
initTabDetection();
showQuestion(0);

// 离开页面提醒
window.addEventListener('beforeunload', (e) => {
    e.preventDefault();
    e.returnValue = '';
});
</script>
{% endif %}
{% endblock %}