<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link rel="stylesheet" href="styles/mobile.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>蒙考通 - 模拟组卷</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background-color: #f5f7fa;
        }
        .glass-effect {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
        }
        .content-container {
            padding-bottom: 80px;
        }
        .scrollable-section {
            max-height: 70vh;
            overflow-y: auto;
        }
        .page-container {
            height: 100%;
            overflow-y: auto;
        }
        .exam-card {
            background: white;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        .exam-card:active {
            transform: scale(0.98);
        }
        .subject-card {
            background: white;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        .subject-card:active {
            transform: scale(0.98);
        }
        .history-card {
            background: white;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        .paper-card {
            background: white;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
    </style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
    <div class="max-w-md mx-auto bg-white min-h-screen relative shadow-lg">
        <!-- 顶部导航栏 -->
        <div class="glass-effect px-4 py-3 flex items-center justify-between sticky top-0 z-10">
            <div class="flex items-center">
                <a href="index.html" class="p-2 rounded-full hover:bg-indigo-100 mr-2">
                    <img src="https://unpkg.com/lucide-static@latest/icons/arrow-left.svg" class="w-5 h-5" alt="返回">
                </a>
                <h1 class="text-xl font-bold text-indigo-800">模拟组卷</h1>
            </div>
            <button id="helpButton" class="p-2 rounded-full hover:bg-indigo-100">
                <img src="https://unpkg.com/lucide-static@latest/icons/help-circle.svg" class="w-5 h-5" alt="帮助">
            </button>
        </div>

        <!-- 主要内容区域 -->
        <div class="p-4 pb-20">
            <!-- 主页 -->
            <div id="mainPage" class="page-container">
                <!-- 考试类型选择 -->
                <div class="mb-6">
                    <h2 class="text-lg font-bold text-gray-800 mb-4" id="selectionHeader">选择考试类型</h2>
                    
                    <!-- 返回按钮，默认隐藏 -->
                    <div id="backButtonContainer" class="mb-4 hidden">
                        <button id="backButton" class="flex items-center text-indigo-600 font-medium">
                            <img src="https://unpkg.com/lucide-static@latest/icons/arrow-left.svg" class="w-5 h-5 mr-1" alt="返回">
                            <span id="backButtonText">返回考试类型</span>
                        </button>
                    </div>
                    
                    <!-- 动态内容容器 -->
                    <div id="dynamicSelectionContainer" class="space-y-4">
                        <!-- 考试类型卡片将通过JS动态生成 -->
                    </div>
                </div>

                <!-- 历史组卷记录 -->
                <div>
                    <h2 class="text-lg font-bold text-gray-800 mb-4">考试历史</h2>
                    <div id="historyContainer" class="space-y-4">
                        <!-- 静态历史记录内容 -->
                        <div class="glass-effect rounded-xl p-4 border border-gray-100">
                            <div class="flex justify-between items-center">
                                <div class="w-3/5 pr-2">
                                    <h4 class="font-bold text-gray-800 mb-1 truncate">事业单位医疗卫生类职业能力倾向测试（E类）模拟卷</h4>
                                    <div class="flex items-center text-xs text-gray-500">
                                        <span>2025/3/21</span>
                                    </div>
                                </div>
                                <div class="flex items-center">
                                    <div class="flex flex-col items-end mr-3">
                                        <div class="text-green-600 font-bold">92分</div>
                                    </div>
                                    <button class="view-history-btn px-3 py-1 text-sm text-indigo-600 border border-indigo-300 rounded-md bg-indigo-50 hover:bg-indigo-100 transition-colors whitespace-nowrap" data-id="example-record-1">
                                        查看
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="glass-effect rounded-xl p-4 border border-gray-100">
                            <div class="flex justify-between items-center">
                                <div class="w-3/5 pr-2">
                                    <h4 class="font-bold text-gray-800 mb-1 truncate">公务员行测模拟卷</h4>
                                    <div class="flex items-center text-xs text-gray-500">
                                        <span>2025/3/18</span>
                                    </div>
                                </div>
                                <div class="flex items-center">
                                    <div class="flex flex-col items-end mr-3">
                                        <div class="text-blue-600 font-bold">78分</div>
                                    </div>
                                    <button class="view-history-btn px-3 py-1 text-sm text-indigo-600 border border-indigo-300 rounded-md bg-indigo-50 hover:bg-indigo-100 transition-colors whitespace-nowrap" data-id="example-record-2">
                                        查看
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="glass-effect rounded-xl p-4 border border-gray-100">
                            <div class="flex justify-between items-center">
                                <div class="w-3/5 pr-2">
                                    <h4 class="font-bold text-gray-800 mb-1 truncate">社会科学专技类职业能力倾向测试（B类）模拟卷</h4>
                                    <div class="flex items-center text-xs text-gray-500">
                                        <span>2025/3/15</span>
                                    </div>
                                </div>
                                <div class="flex items-center">
                                    <div class="flex flex-col items-end mr-3">
                                        <div class="text-green-600 font-bold">85分</div>
                                    </div>
                                    <button class="view-history-btn px-3 py-1 text-sm text-indigo-600 border border-indigo-300 rounded-md bg-indigo-50 hover:bg-indigo-100 transition-colors whitespace-nowrap" data-id="example-record-3">
                                        查看
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="glass-effect rounded-xl p-4 border border-gray-100">
                            <div class="flex justify-between items-center">
                                <div class="w-3/5 pr-2">
                                    <h4 class="font-bold text-gray-800 mb-1 truncate">公务员申论模拟卷</h4>
                                    <div class="flex items-center text-xs text-gray-500">
                                        <span>2025/3/12</span>
                                    </div>
                                </div>
                                <div class="flex items-center">
                                    <div class="flex flex-col items-end mr-3">
                                        <div class="text-amber-600 font-bold">65分</div>
                                    </div>
                                    <button class="view-history-btn px-3 py-1 text-sm text-indigo-600 border border-indigo-300 rounded-md bg-indigo-50 hover:bg-indigo-100 transition-colors whitespace-nowrap" data-id="example-record-4">
                                        查看
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="glass-effect rounded-xl p-4 border border-gray-100">
                            <div class="flex justify-between items-center">
                                <div class="w-3/5 pr-2">
                                    <h4 class="font-bold text-gray-800 mb-1 truncate">中小学教师类教育综合知识（D类）模拟卷</h4>
                                    <div class="flex items-center text-xs text-gray-500">
                                        <span>2025/3/9</span>
                                    </div>
                                </div>
                                <div class="flex items-center">
                                    <div class="flex flex-col items-end mr-3">
                                        <div class="text-red-600 font-bold">55分</div>
                                    </div>
                                    <button class="view-history-btn px-3 py-1 text-sm text-indigo-600 border border-indigo-300 rounded-md bg-indigo-50 hover:bg-indigo-100 transition-colors whitespace-nowrap" data-id="example-record-5">
                                        查看
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 试卷展示页 -->
            <div id="paperPage" class="page-container hidden">
                <!-- 返回按钮 -->
                <button onclick="backToPreviousPage()" class="mb-4 flex items-center text-indigo-600 font-medium">
                    <img src="https://unpkg.com/lucide-static@latest/icons/arrow-left.svg" class="w-5 h-5 mr-1" alt="返回">
                    返回学科选择
                </button>
                
                <div class="glass-effect rounded-xl p-4 mb-4">
                    <div class="flex items-center justify-between">
                        <h2 class="text-lg font-bold text-gray-800" id="paperTitle">试卷标题</h2>
                    </div>
                </div>
                
                <div class="glass-effect rounded-xl p-4 mb-4">
                    <div class="text-center py-4">
                        <img src="https://unpkg.com/lucide-static@latest/icons/file-text.svg" class="w-16 h-16 mx-auto mb-4 text-indigo-500" alt="试卷">
                        <h3 class="text-xl font-bold text-gray-800 mb-2">试卷准备就绪</h3>
                        <p class="text-gray-600 mb-4">根据您选择的考试类型和学科，系统已生成一份标准化的模拟试卷。</p>
                        <div class="flex justify-center space-x-4 mb-6">
                            <div class="text-center">
                                <div class="text-2xl font-bold text-indigo-600" id="questionCountDisplay">20</div>
                                <div class="text-sm text-gray-500">题目数量</div>
                            </div>
                            <div class="text-center">
                                <div class="text-2xl font-bold text-indigo-600" id="timeDisplay">60</div>
                                <div class="text-sm text-gray-500">考试时间(分钟)</div>
                            </div>
                        </div>
                        <div class="border-t border-gray-200 pt-4">
                            <h4 class="font-medium text-gray-800 mb-3">题目分布</h4>
                            <div class="grid grid-cols-3 gap-4">
                                <div class="text-center">
                                    <div class="text-xl font-bold text-blue-600" id="singleChoiceCount">14</div>
                                    <div class="text-xs text-gray-500">单选题</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-xl font-bold text-green-600" id="multiChoiceCount">4</div>
                                    <div class="text-xs text-gray-500">多选题</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-xl font-bold text-amber-600" id="judgmentCount">2</div>
                                    <div class="text-xs text-gray-500">判断题</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-6 space-y-3">
                    <button id="startExam" class="w-full py-3 bg-indigo-600 text-white font-medium rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none">
                        开始考试
                    </button>
                    <button id="exportPaper" class="w-full py-3 bg-white text-indigo-600 border border-indigo-600 font-medium rounded-lg shadow-sm hover:bg-indigo-50 focus:outline-none">
                        导出试卷
                    </button>
                    <button id="createNewPaper" class="w-full py-3 bg-white text-gray-700 border border-gray-300 font-medium rounded-lg shadow-sm hover:bg-gray-50 focus:outline-none">
                        重新组卷
                    </button>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="glass-effect fixed bottom-0 left-0 right-0 max-w-md mx-auto flex justify-around py-3 border-t border-gray-200">
            <div class="w-full max-w-md mx-auto flex justify-around">
                <a href="index.html" class="flex flex-col items-center text-indigo-600">
                    <img src="https://unpkg.com/lucide-static@latest/icons/book.svg" class="w-6 h-6" alt="学习">
                    <span class="text-xs mt-1 font-medium">学习</span>
                </a>
                <a href="recruitment.html" class="flex flex-col items-center text-gray-500">
                    <img src="https://unpkg.com/lucide-static@latest/icons/briefcase.svg" class="w-6 h-6" alt="招聘">
                    <span class="text-xs mt-1">招聘</span>
                </a>
                <a href="ai_chat.html" class="flex flex-col items-center text-gray-500">
                    <img src="https://unpkg.com/lucide-static@latest/icons/message-circle.svg" class="w-6 h-6" alt="AI">
                    <span class="text-xs mt-1">AI</span>
                </a>
                <a href="profile.html" class="flex flex-col items-center text-gray-500">
                    <img src="https://unpkg.com/lucide-static@latest/icons/user.svg" class="w-6 h-6" alt="我的">
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 配置数据
            const examConfig = {
                gongwuyuan: {
                    id: 'gongwuyuan',
                    title: '公务员',
                    description: '国考、省考、市考等各类公务员考试',
                    icon: '<div class="bg-blue-100 p-3 rounded-full mr-4"><img src="https://unpkg.com/lucide-static@latest/icons/briefcase.svg" class="w-6 h-6 text-blue-600" alt="公务员"></div>',
                    subjects: [
                        { id: 'xingce', title: '行测', icon: '📝', color: 'bg-blue-50' },
                        { id: 'shenlun', title: '申论', icon: '📄', color: 'bg-blue-50' }
                    ]
                },
                shiyedanwei: {
                    id: 'shiyedanwei',
                    title: '事业单位',
                    description: '综合管理类、专业技术类等岗位考试',
                    icon: '<div class="bg-green-100 p-3 rounded-full mr-4"><img src="https://unpkg.com/lucide-static@latest/icons/building.svg" class="w-6 h-6 text-green-600" alt="事业单位"></div>',
                    categories: [
                        {
                            id: 'a-lei',
                            title: '综合管理类（A类）',
                            description: '适用于行政、人事、财务等管理岗位',
                            icon: '📊',
                            color: 'bg-green-50',
                            subjects: [
                                { id: 'zhiye-a', title: '职业能力倾向测试（A类）', icon: '🔍', color: 'bg-green-50' },
                                { id: 'zonghe-a', title: '综合应用能力（A类）', icon: '📝', color: 'bg-green-50' }
                            ]
                        },
                        {
                            id: 'b-lei',
                            title: '社会科学专技类（B类）',
                            description: '适用于经济、法律、教育等专业岗位',
                            icon: '🔧',
                            color: 'bg-teal-50',
                            subjects: [
                                { id: 'zhiye-b', title: '职业能力倾向测试（B类）', icon: '🔍', color: 'bg-teal-50' },
                                { id: 'zhuanye-b', title: '综合应用能力（B类）', icon: '📝', color: 'bg-teal-50' }
                            ]
                        },
                        {
                            id: 'c-lei',
                            title: '自然科学专技类（C类）',
                            description: '适用于理工、医学等专业技术岗位',
                            icon: '🔬',
                            color: 'bg-cyan-50',
                            subjects: [
                                { id: 'zhiye-c', title: '职业能力倾向测试（C类）', icon: '🔍', color: 'bg-cyan-50' },
                                { id: 'zonghe-c', title: '综合应用能力（C类）', icon: '📝', color: 'bg-cyan-50' }
                            ]
                        },
                        {
                            id: 'd-lei',
                            title: '中小学教师类（D类）',
                            description: '适用于中小学教师岗位',
                            icon: '🎓',
                            color: 'bg-indigo-50',
                            subjects: [
                                { id: 'zhiye-d', title: '职业能力倾向测试（D类）', icon: '🔍', color: 'bg-indigo-50' },
                                { id: 'zhuanye-d', title: '教育综合知识（D类）', icon: '📚', color: 'bg-indigo-50' }
                            ]
                        },
                        {
                            id: 'e-lei',
                            title: '医疗卫生类（E类）',
                            description: '适用于医疗卫生系统岗位',
                            icon: '⚕️',
                            color: 'bg-red-50',
                            subjects: [
                                { id: 'zhiye-e', title: '职业能力倾向测试（E类）', icon: '🔍', color: 'bg-red-50' },
                                { id: 'yixue-e', title: '医学专业知识（E类）', icon: '💉', color: 'bg-red-50' }
                            ]
                        }
                    ]
                },
                qitakaoshi: {
                    id: 'qitakaoshi',
                    title: '其他考试',
                    description: '教师资格、会计、金融等考试',
                    icon: '<div class="bg-amber-100 p-3 rounded-full mr-4"><img src="https://unpkg.com/lucide-static@latest/icons/bookmark.svg" class="w-6 h-6 text-amber-600" alt="其他考试"></div>',
                    subjects: [
                        { id: 'jiaoshi', title: '教师资格', icon: '🎓', color: 'bg-purple-50' },
                        { id: 'kuaiji', title: '会计', icon: '💼', color: 'bg-purple-50' },
                        { id: 'jinrong', title: '金融', icon: '💰', color: 'bg-purple-50' }
                    ]
                }
            };

            // 应用状态
            const state = {
                currentView: 'examTypes', // examTypes, categories, subjects, paper
                currentExamType: null,
                currentCategory: null,
                currentSubject: null,
                paperName: '',
                questionCount: 20,
                estimatedTime: 60, // 分钟
                questionDistribution: {
                    singleChoice: 14,
                    multiChoice: 4,
                    judgment: 2
                },
                currentPaper: null
            };

            // 页面管理器
            const pageManager = {
                pages: ['mainPage', 'paperPage'],
                
                showPage: function(pageId) {
                    this.pages.forEach(page => {
                        const pageElement = document.getElementById(page);
                        if (pageElement) {
                            pageElement.classList.toggle('hidden', page !== pageId);
                        }
                    });
                    
                    if (pageId === 'mainPage') {
                        // 不重置状态，因为我们使用单页模式
                    }
                    
                    window.scrollTo(0, 0);
                }
            };

            // 切换视图
            function switchView(view, title) {
                state.currentView = view;
                
                // 更新标题
                const headerElement = document.getElementById('selectionHeader');
                if (headerElement && title) {
                    headerElement.textContent = title;
                }
                
                // 显示/隐藏返回按钮
                const backButtonContainer = document.getElementById('backButtonContainer');
                if (backButtonContainer) {
                    backButtonContainer.classList.toggle('hidden', view === 'examTypes');
                }
                
                // 清空容器
                const container = document.getElementById('dynamicSelectionContainer');
                if (container) {
                    container.innerHTML = '';
                }
                
                // 根据视图加载内容
                if (view === 'examTypes') {
                    renderExamTypes();
                } else if (view === 'categories') {
                    const examType = examConfig[state.currentExamType];
                    if (examType && examType.categories) {
                        renderCategories(examType.categories);
                    }
                } else if (view === 'subjects') {
                    const examType = examConfig[state.currentExamType];
                    if (examType) {
                        if (examType.categories && state.currentCategory) {
                            const category = examType.categories.find(c => c.id === state.currentCategory);
                            if (category) {
                                renderSubjects(category.subjects);
                            }
                        } else if (examType.subjects) {
                            renderSubjects(examType.subjects);
                        }
                    }
                }
            }

            // 渲染考试类型
            function renderExamTypes() {
                const container = document.getElementById('dynamicSelectionContainer');
                if (!container) return;
                
                container.innerHTML = '';
                
                Object.values(examConfig).forEach(examType => {
                    const examCard = document.createElement('div');
                    examCard.className = 'glass-effect rounded-xl p-5 hover:shadow-md transition-all cursor-pointer transform hover:scale-[0.99] border border-gray-100';
                    examCard.innerHTML = `
                        <div class="flex items-center">
                            ${examType.icon}
                            <div class="flex-1">
                                <h4 class="font-bold text-gray-800">${examType.title}</h4>
                                <p class="text-sm text-gray-600 mt-1">${examType.description}</p>
                            </div>
                            <div class="bg-indigo-50 p-2 rounded-full">
                                <img src="https://unpkg.com/lucide-static@latest/icons/chevron-right.svg" class="w-5 h-5 text-indigo-600" alt="选择">
                            </div>
                        </div>
                    `;
                    
                    examCard.addEventListener('click', () => {
                        selectExamType(examType.id);
                    });
                    
                    container.appendChild(examCard);
                });
            }

            // 选择考试类型
            function selectExamType(examTypeId) {
                state.currentExamType = examTypeId;
                const examType = examConfig[examTypeId];
                
                if (!examType) return;
                
                // 设置返回按钮文本
                const backButtonText = document.getElementById('backButtonText');
                if (backButtonText) {
                    backButtonText.textContent = '返回考试类型';
                }
                
                // 绑定返回按钮事件
                const backButton = document.getElementById('backButton');
                if (backButton) {
                    backButton.onclick = () => {
                        switchView('examTypes', '选择考试类型');
                    };
                }
                
                // 如果考试类型有分类，则切换到分类选择
                if (examType.categories) {
                    switchView('categories', `${examType.title}考试类别`);
                } else {
                    // 否则直接切换到科目选择
                    switchView('subjects', `${examType.title}考试科目`);
                }
            }

            // 渲染考试类别
            function renderCategories(categories) {
                const container = document.getElementById('dynamicSelectionContainer');
                if (!container) return;
                
                container.innerHTML = '';
                
                categories.forEach(category => {
                    const categoryCard = document.createElement('div');
                    categoryCard.className = 'glass-effect rounded-xl p-5 hover:shadow-md transition-all cursor-pointer transform hover:scale-[0.99] border border-gray-100';
                    categoryCard.innerHTML = `
                        <div class="flex items-center">
                            <div class="${category.color} p-3 rounded-full mr-4 flex items-center justify-center" style="width: 48px; height: 48px;">
                                <span class="text-lg">${category.icon}</span>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-bold text-gray-800">${category.title}</h4>
                                <p class="text-xs text-gray-500 mt-1">${category.description}</p>
                            </div>
                            <div class="bg-indigo-50 p-2 rounded-full">
                                <img src="https://unpkg.com/lucide-static@latest/icons/chevron-right.svg" class="w-5 h-5 text-indigo-600" alt="选择">
                            </div>
                        </div>
                    `;
                    
                    categoryCard.addEventListener('click', () => {
                        selectCategory(category.id, category.title);
                    });
                    
                    container.appendChild(categoryCard);
                });
            }

            // 选择考试类别
            function selectCategory(categoryId, categoryTitle) {
                state.currentCategory = categoryId;
                const examType = examConfig[state.currentExamType];
                
                if (!examType || !examType.categories) return;
                
                const category = examType.categories.find(c => c.id === categoryId);
                if (!category) return;
                
                // 设置返回按钮文本
                const backButtonText = document.getElementById('backButtonText');
                if (backButtonText) {
                    backButtonText.textContent = '返回考试类别';
                }
                
                // 绑定返回按钮事件
                const backButton = document.getElementById('backButton');
                if (backButton) {
                    backButton.onclick = () => {
                        switchView('categories', `${examType.title}考试类别`);
                    };
                }
                
                switchView('subjects', `${category.title}科目`);
            }

            // 渲染学科列表
            function renderSubjects(subjects) {
                const container = document.getElementById('dynamicSelectionContainer');
                if (!container) return;
                
                container.innerHTML = '';
                
                subjects.forEach(subject => {
                    const subjectCard = document.createElement('div');
                    subjectCard.className = 'glass-effect rounded-xl p-5 hover:shadow-md transition-all cursor-pointer transform hover:scale-[0.99] border border-gray-100';
                    subjectCard.innerHTML = `
                        <div class="flex items-center">
                            <div class="bg-${subject.color.split('-')[1]}-100 p-3 rounded-full mr-4 flex items-center justify-center" style="width: 48px; height: 48px;">
                                <span class="text-lg">${subject.icon}</span>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-bold text-gray-800">${subject.title}</h4>
                                <p class="text-xs text-gray-500 mt-1">点击选择此科目生成试卷</p>
                            </div>
                            <div class="bg-indigo-50 p-2 rounded-full">
                                <img src="https://unpkg.com/lucide-static@latest/icons/chevron-right.svg" class="w-5 h-5 text-indigo-600" alt="选择">
                            </div>
                        </div>
                    `;
                    
                    subjectCard.addEventListener('click', () => {
                        selectSubject(subject.id, subject.title);
                    });
                    
                    container.appendChild(subjectCard);
                });
            }

            // 选择学科
            function selectSubject(subjectId, subjectTitle) {
                state.currentSubject = subjectId;
                
                // 设置试卷名称
                const examType = examConfig[state.currentExamType];
                let examTypeName = '';
                let subjectName = subjectTitle;
                
                if (examType) {
                    examTypeName = examType.title;
                    
                    // 如果有分类，添加类别名称
                    if (examType.categories && state.currentCategory) {
                        const category = examType.categories.find(c => c.id === state.currentCategory);
                        if (category) {
                            examTypeName += category.title.replace(/（.*）/, '');
                        }
                    }
                }
                
                state.paperName = `${examTypeName}${subjectName}模拟卷`;
                
                // 生成随机试卷
                generateRandomPaper();
            }

            // 生成随机试卷
            function generateRandomPaper() {
                // 显示加载动画
                const loadingElement = document.createElement('div');
                loadingElement.className = 'fixed inset-0 flex items-center justify-center bg-white bg-opacity-75 z-50';
                loadingElement.innerHTML = `
                    <div class="text-center">
                        <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500 mx-auto mb-2"></div>
                        <p class="text-gray-700">正在生成试卷...</p>
                    </div>
                `;
                document.body.appendChild(loadingElement);
                
                // 模拟生成试卷的过程
                setTimeout(() => {
                    document.body.removeChild(loadingElement);
                    showPaper();
                }, 1500);
            }

            // 显示试卷
            function showPaper() {
                // 更新试卷标题
                const titleElement = document.getElementById('paperTitle');
                if (titleElement) {
                    titleElement.textContent = state.paperName;
                }
                
                // 更新题目数量
                const questionCountElement = document.getElementById('paperQuestionCount');
                if (questionCountElement) {
                    questionCountElement.textContent = `${state.questionCount}题`;
                }
                
                // 更新详细题目数量显示
                const questionCountDisplay = document.getElementById('questionCountDisplay');
                if (questionCountDisplay) {
                    questionCountDisplay.textContent = state.questionCount;
                }
                
                // 更新预估时间
                const timeElement = document.getElementById('paperEstimatedTime');
                if (timeElement) {
                    timeElement.textContent = `${state.estimatedTime}分钟`;
                }
                
                // 更新详细时间显示
                const timeDisplay = document.getElementById('timeDisplay');
                if (timeDisplay) {
                    timeDisplay.textContent = state.estimatedTime;
                }
                
                // 更新题型分布
                const singleChoiceCount = document.getElementById('singleChoiceCount');
                if (singleChoiceCount) {
                    singleChoiceCount.textContent = state.questionDistribution.singleChoice;
                }
                
                const multiChoiceCount = document.getElementById('multiChoiceCount');
                if (multiChoiceCount) {
                    multiChoiceCount.textContent = state.questionDistribution.multiChoice;
                }
                
                const judgmentCount = document.getElementById('judgmentCount');
                if (judgmentCount) {
                    judgmentCount.textContent = state.questionDistribution.judgment;
                }
                
                // 显示试卷页面
                pageManager.showPage('paperPage');
            }

            // 开始考试
            function startExam() {
                // 保存当前试卷信息到localStorage
                const examData = {
                    title: state.paperName,
                    totalTime: state.estimatedTime * 60, // 转换为秒
                    remainingTime: state.estimatedTime * 60,
                    questions: []
                };
                
                // 生成随机题目数据（这里只是示例，实际应用中可能需要从服务器获取）
                let questionIndex = 1;
                
                // 生成单选题
                for (let i = 0; i < state.questionDistribution.singleChoice; i++) {
                    examData.questions.push({
                        id: questionIndex++,
                        type: "单选题",
                        content: `这是一道单选题，内容将根据所选科目自动生成`,
                        options: [
                            { id: "A", text: `选项A的内容` },
                            { id: "B", text: `选项B的内容` },
                            { id: "C", text: `选项C的内容` },
                            { id: "D", text: `选项D的内容` }
                        ],
                        answer: null,
                        marked: false,
                        correctAnswer: "B" // 示例中的正确答案
                    });
                }
                
                // 生成多选题
                for (let i = 0; i < state.questionDistribution.multiChoice; i++) {
                    examData.questions.push({
                        id: questionIndex++,
                        type: "多选题",
                        content: `这是一道多选题，内容将根据所选科目自动生成`,
                        options: [
                            { id: "A", text: `选项A的内容` },
                            { id: "B", text: `选项B的内容` },
                            { id: "C", text: `选项C的内容` },
                            { id: "D", text: `选项D的内容` }
                        ],
                        answer: null,
                        marked: false,
                        correctAnswer: ["A", "C"] // 示例中的正确答案
                    });
                }
                
                // 生成判断题
                for (let i = 0; i < state.questionDistribution.judgment; i++) {
                    examData.questions.push({
                        id: questionIndex++,
                        type: "判断题",
                        content: `这是一道判断题，内容将根据所选科目自动生成`,
                        options: [
                            { id: "正确", text: `正确` },
                            { id: "错误", text: `错误` }
                        ],
                        answer: null,
                        marked: false,
                        correctAnswer: "正确" // 示例中的正确答案
                    });
                }
                
                // 保存考试数据
                localStorage.setItem('currentExam', JSON.stringify(examData));
                
                // 添加历史记录
                addHistoryRecord({
                    id: 'history-' + Date.now(),
                    name: state.paperName,
                    date: new Date().toLocaleDateString(),
                    examType: state.currentExamType,
                    category: state.currentCategory,
                    subject: state.currentSubject,
                    questionCount: state.questionCount
                });
                
                // 跳转到考试页面
                window.location.href = 'exam_in_progress.html';
            }

            // 返回上一页
            function backToPreviousPage() {
                if (state.currentView === 'paper') {
                    // 返回到主页，并保持之前的选择视图
                    pageManager.showPage('mainPage');
                    
                    if (state.currentCategory) {
                        // 如果有类别，返回到科目选择
                        const examType = examConfig[state.currentExamType];
                        const category = examType.categories.find(c => c.id === state.currentCategory);
                        if (category) {
                            switchView('subjects', `${category.title}科目`);
                        }
                    } else if (state.currentExamType) {
                        // 如果只有考试类型，返回到科目选择
                        const examType = examConfig[state.currentExamType];
                        if (examType) {
                            switchView('subjects', `${examType.title}考试科目`);
                        }
                    }
                }
            }

            // 初始化页面
            function initPage() {
                // 初始化视图
                switchView('examTypes', '选择考试类型');
                
                // 绑定帮助按钮事件
                const helpButton = document.getElementById('helpButton');
                if (helpButton) {
                    helpButton.addEventListener('click', function() {
                        alert('模拟组卷功能可以帮助你随机生成模拟试卷进行练习。选择考试类型和学科后，点击"开始考试"按钮即可进入模拟考试状态。');
                    });
                }
                
                // 绑定试卷页面按钮
                const startExamButton = document.getElementById('startExam');
                const exportPaperButton = document.getElementById('exportPaper');
                const createNewButton = document.getElementById('createNewPaper');
                
                if (startExamButton) {
                    startExamButton.addEventListener('click', function() {
                        startExam();
                    });
                }
                
                if (exportPaperButton) {
                    exportPaperButton.addEventListener('click', function() {
                        exportPaperToPDF();
                    });
                }
                
                if (createNewButton) {
                    createNewButton.addEventListener('click', function() {
                        pageManager.showPage('mainPage');
                        switchView('examTypes', '选择考试类型');
                    });
                }
                
                // 将backToPreviousPage函数添加到window
                window.backToPreviousPage = backToPreviousPage;
                
                // 绑定历史记录查看按钮事件
                document.querySelectorAll('.view-history-btn').forEach(button => {
                    button.addEventListener('click', function() {
                        const recordId = this.getAttribute('data-id');
                        // 跳转到考试结果页面
                        window.location.href = 'exam_result.html?id=' + recordId;
                    });
                });
            }

            // 添加历史记录
            function addHistoryRecord(record) {
                // 添加固定的考试成绩和状态信息，而不是随机生成
                record.score = 85; // 固定分数
                record.status = '已完成';
                record.time = 45; // 固定用时（分钟）
                
                let historyRecords = JSON.parse(localStorage.getItem('mockPaperHistory') || '[]');
                historyRecords.unshift(record);
                
                if (historyRecords.length > 10) {
                    historyRecords = historyRecords.slice(0, 10);
                }
                
                localStorage.setItem('mockPaperHistory', JSON.stringify(historyRecords));
            }

            // 导出试卷为PDF
            function exportPaperToPDF() {
                // 显示加载动画
                const loadingElement = document.createElement('div');
                loadingElement.className = 'fixed inset-0 flex items-center justify-center bg-white bg-opacity-75 z-50';
                loadingElement.innerHTML = `
                    <div class="text-center">
                        <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500 mx-auto mb-2"></div>
                        <p class="text-gray-700">正在导出试卷...</p>
                    </div>
                `;
                document.body.appendChild(loadingElement);
                
                // 模拟导出过程
                setTimeout(() => {
                    document.body.removeChild(loadingElement);
                    alert('试卷已成功导出为PDF格式，请在下载文件夹中查看。');
                    
                    // 添加历史记录
                    addHistoryRecord({
                        id: 'history-' + Date.now(),
                        name: state.paperName,
                        date: new Date().toLocaleDateString(),
                        examType: state.currentExamType,
                        subject: state.currentSubject,
                        questionCount: state.questionCount
                    });
                }, 1500);
            }

            // 页面初始化
            initPage();
        });
    </script>
    <script src="scripts/fix_mobile_height.js"></script>
    <script src="scripts/fix_horizontal_scroll.js"></script>
</body>
</html>