模拟试卷 - 中小学知识刷题平?/title>
<script src="/templates/shuati/js/tailwind.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body class="bg-gray-50 font-sans">
<!-- 导航?-->
<nav id="navbar" class="bg-white shadow-md fixed w-full z-10 transition-all duration-300">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<a href="/" class="flex-shrink-0 flex items-center">
<i class="fas fa-graduation-cap text-blue-600 text-2xl mr-2"></i>
<span class="text-xl font-bold text-blue-600">知学刷题</span>
</a>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="/" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">首页</a>
<a href="./knowledge.html" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">知识?/a>
<a href="./practice.html" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">习题练习</a>
<a href="./exam.html" class="text-blue-600 border-b-2 border-blue-600 px-3 py-2 rounded-md text-sm font-medium">模拟试卷</a>
<a href="./profile.html" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">个人中心</a>
</div>
<div class="flex items-center">
<button id="login-btn" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" onclick="window.location.href='login.html'">
登录/注册
</button>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" class="text-gray-700 hover:text-blue-600 focus:outline-none">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</div>
<!-- 移动端菜?-->
<div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg rounded-b-lg">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="./knowledge.html" class="block text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-base font-medium">知识?/a>
<a href="./practice.html" class="block text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-base font-medium">习题练习</a>
<a href="./exam.html" class="block text-blue-600 px-3 py-2 rounded-md text-base font-medium">模拟试卷</a>
<a href="./profile.html" class="block text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-base font-medium">个人中心</a>
</div>
</div>
</nav>
<!-- 主内容区?-->
<main class="pt-24 pb-16">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h1 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">模拟试卷</h1>
<p class="mt-4 text-xl text-gray-500 max-w-3xl mx-auto">
全真模拟考试环境，提升应试能力，熟悉考试题型
</p>
</div>
<!-- 考试状态区?-->
<div id="exam-status" class="bg-white rounded-lg shadow p-6 mb-8 hidden">
<div class="flex flex-col md:flex-row justify-between items-center mb-4">
<h2 class="text-xl font-semibold text-gray-900 mb-2 md:mb-0" id="current-exam-title">正在进行: 数学期中考试?/h2>
<div class="flex items-center bg-red-50 px-4 py-2 rounded-md">
<i class="fas fa-clock text-red-600 mr-2"></i>
<span class="text-red-600 font-medium" id="exam-timer">01:59:59</span>
</div>
</div>
<div class="flex flex-wrap justify-between items-center">
<div class="flex items-center mb-2 sm:mb-0">
<span class="text-gray-600 mr-2">题目进度:</span>
<div class="w-48 bg-gray-200 rounded-full h-2.5">
<div id="progress-bar" class="bg-blue-600 h-2.5 rounded-full" style="width: 25%"></div>
</div>
<span class="text-gray-600 ml-2" id="question-progress">5/20</span>
</div>
<div class="flex space-x-4">
<button id="show-question-nav" class="text-gray-600 hover:text-blue-600 px-3 py-1 rounded-md text-sm">
<i class="fas fa-th-list mr-1"></i> 题目导航
</button>
<button id="submit-exam" class="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
交卷
</button>
</div>
</div>
</div>
<!-- 题目导航模态框 -->
<div id="question-nav-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] overflow-y-auto">
<div class="p-6 border-b border-gray-200 flex justify-between items-center sticky top-0 bg-white">
<h3 class="text-lg font-semibold text-gray-900">题目导航</h3>
<button id="close-nav-modal" class="text-gray-400 hover:text-gray-500">
<i class="fas fa-times"></i>
</button>
</div>
<div class="p-6">
<div class="grid grid-cols-5 sm:grid-cols-6 md:grid-cols-10 gap-2 mb-4" id="question-nav-grid">
<!-- 题目导航按钮将通过JavaScript动态生?-->
</div>
<div class="flex justify-center space-x-6 text-sm mt-4">
<div class="flex items-center">
<div class="w-4 h-4 bg-gray-200 rounded-full mr-2"></div>
<span>未作?/span>
</div>
<div class="flex items-center">
<div class="w-4 h-4 bg-blue-100 rounded-full mr-2"></div>
<span>已作?/span>
</div>
<div class="flex items-center">
<div class="w-4 h-4 bg-yellow-100 rounded-full mr-2"></div>
<span>标记</span>
</div>
</div>
</div>
</div>
</div>
<!-- 考试内容区域 -->
<div id="exam-container" class="bg-white rounded-lg shadow p-6 mb-8 hidden">
<div class="mb-8">
<h3 class="text-xl font-semibold text-gray-900 mb-4" id="exam-question-title">??(选择?</h3>
<div id="exam-question-content" class="text-gray-700 mb-6">
<!-- 题目内容将通过JavaScript动态生?-->
</div>
<div id="exam-answer-content" class="mb-6">
<!-- 答题区域将通过JavaScript动态生?-->
</div>
<div class="flex justify-between items-center pt-4 border-t border-gray-200">
<button id="mark-question" class="bg-yellow-100 text-yellow-600 px-4 py-2 rounded-md hover:bg-yellow-200 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500">
<i class="fas fa-flag mr-1"></i> 标记此题
</button>
<div class="flex space-x-3">
<button id="prev-exam-question" class="bg-gray-100 text-gray-600 px-4 py-2 rounded-md hover:bg-gray-200 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
上一?
</button>
<button id="next-exam-question" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
下一?
</button>
</div>
</div>
</div>
</div>
<!-- 试卷结果区域 -->
<div id="exam-result" class="bg-white rounded-lg shadow p-8 text-center hidden">
<div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-check text-green-500 text-3xl"></i>
</div>
<h3 class="text-xl font-medium text-gray-900 mb-2" id="result-exam-title">数学期中考试?/h3>
<p class="text-gray-500 mb-2">考试完成时间: <span id="result-finish-time">2023-10-25 15:30:22</span></p>
<p class="text-gray-500 mb-6">用时: <span id="result-time-used">58分钟32?/span></p>
<div class="flex flex-col md:flex-row justify-center items-center mb-8">
<div class="text-5xl font-bold text-blue-600 mr-0 md:mr-8 mb-4 md:mb-0" id="result-score">85</div>
<div class="grid grid-cols-3 gap-4 w-full md:w-auto">
<div class="bg-gray-50 p-4 rounded-md">
<div class="text-2xl font-bold text-gray-900" id="result-total-questions">20</div>
<div class="text-gray-500 text-sm">总题?/div>
</div>
<div class="bg-green-50 p-4 rounded-md">
<div class="text-2xl font-bold text-green-600" id="result-correct-questions">17</div>
<div class="text-gray-500 text-sm">正确</div>
</div>
<div class="bg-red-50 p-4 rounded-md">
<div class="text-2xl font-bold text-red-600" id="result-incorrect-questions">3</div>
<div class="text-gray-500 text-sm">错误</div>
</div>
</div>
</div>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button id="review-exam" class="bg-blue-100 text-blue-600 px-4 py-2 rounded-md hover:bg-blue-200 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
查看详情
</button>
<button id="new-exam" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
再考一?
</button>
</div>
</div>
<!-- 试卷筛选和搜索 -->
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
<div class="flex flex-col md:flex-row justify-between gap-4 mb-4">
<div class="flex flex-wrap gap-2">
<select id="grade-filter" class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
<option value="all">全部年级</option>
<option value="初一">初一</option>
<option value="初二">初二</option>
<option value="初三">初三</option>
<option value="高一">高一</option>
<option value="高二">高二</option>
<option value="高三">高三</option>
</select>
<select id="subject-filter" class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
<option value="all">全部学科</option>
<option value="数学">数学</option>
<option value="语文">语文</option>
<option value="英语">英语</option>
<option value="物理">物理</option>
<option value="化学">化学</option>
<option value="生物">生物</option>
<option value="历史">历史</option>
<option value="地理">地理</option>
<option value="政治">政治</option>
</select>
<select id="difficulty-filter" class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
<option value="all">全部难度</option>
<option value="简?>简?/option>
<option value="中等">中等</option>
<option value="困难">困难</option>
</select>
</div>
<div class="relative w-full md:w-64">
<input type="text" id="exam-search" placeholder="搜索试卷..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
</div>
<div class="flex justify-between items-center text-sm text-gray-500">
<div>找到 <span id="exam-count">6</span> 份试?/div>
<div class="flex items-center gap-2">
<span>排序:</span>
<select id="sort-exam" class="px-3 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
<option value="newest">最新上?/option>
<option value="popularity">人气最?/option>
<option value="difficulty">难度递增</option>
<option value="duration">时间最?/option>
</select>
</div>
</div>
</div>
<!-- 试卷列表区域 -->
<div id="exam-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- 静态试? -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 group">
<div class="p-6">
<div class="flex flex-wrap gap-2 mb-3">
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">初中</span>
<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">数学</span>
<span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">初一</span>
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">简?/span>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-200">初一数学单元测试</h3>
<p class="text-gray-600 text-sm mb-4 line-clamp-2 h-10">本测试涵盖一元一次方程的相关知识点，?0道题，满?00分，考试时间60分钟?/p>
<div class="flex flex-wrap justify-between items-center mb-4 text-sm">
<div class="flex items-center text-gray-500 mr-4 mb-2 sm:mb-0">
<i class="fas fa-question-circle mr-1"></i> 10?
</div>
<div class="flex items-center text-gray-500 mr-4 mb-2 sm:mb-0">
<i class="fas fa-clock mr-1"></i> 60分钟
</div>
<div class="flex items-center text-gray-500 mb-2 sm:mb-0">
<i class="fas fa-scoreboard mr-1"></i> 100?
</div>
</div>
<div class="flex justify-between items-center mb-4 text-sm text-gray-500">
<div class="flex items-center">
<i class="fas fa-user-graduate mr-1"></i> 245人已?
</div>
<div class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-1"></i> 4.8
</div>
</div>
<button class="start-exam-btn w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 transform hover:scale-105" data-exam-id="exam_1">
开始考试
</button>
</div>
</div>
<!-- 静态试? -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 group">
<div class="p-6">
<div class="flex flex-wrap gap-2 mb-3">
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">初中</span>
<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">生物</span>
<span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">初一</span>
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">简?/span>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-200">初一生物基础知识测试</h3>
<p class="text-gray-600 text-sm mb-4 line-clamp-2 h-10">本测试涵盖细胞的基本结构和细胞分裂分化的相关知识点，?0道题，满?00分，考试时间45分钟?/p>
<div class="flex flex-wrap justify-between items-center mb-4 text-sm">
<div class="flex items-center text-gray-500 mr-4 mb-2 sm:mb-0">
<i class="fas fa-question-circle mr-1"></i> 10?
</div>
<div class="flex items-center text-gray-500 mr-4 mb-2 sm:mb-0">
<i class="fas fa-clock mr-1"></i> 45分钟
</div>
<div class="flex items-center text-gray-500 mb-2 sm:mb-0">
<i class="fas fa-scoreboard mr-1"></i> 100?
</div>
</div>
<div class="flex justify-between items-center mb-4 text-sm text-gray-500">
<div class="flex items-center">
<i class="fas fa-user-graduate mr-1"></i> 187人已?
</div>
<div class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-1"></i> 4.6
</div>
</div>
<button class="start-exam-btn w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 transform hover:scale-105" data-exam-id="exam_2">
开始考试
</button>
</div>
</div>
<!-- 新增试卷3 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 group">
<div class="p-6">
<div class="flex flex-wrap gap-2 mb-3">
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">初中</span>
<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">英语</span>
<span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">初二</span>
<span class="bg-orange-100 text-orange-800 text-xs font-medium px-2.5 py-0.5 rounded">中等</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-200">初二英语词汇语法测试</h3>
<p class="text-gray-600 text-sm mb-4 line-clamp-2 h-10">本测试涵盖初二上册前半部分的词汇和语法知识点，共15道题，满?00分，考试时间40分钟?/p>
<div class="flex flex-wrap justify-between items-center mb-4 text-sm">
<div class="flex items-center text-gray-500 mr-4 mb-2 sm:mb-0">
<i class="fas fa-question-circle mr-1"></i> 15?
</div>
<div class="flex items-center text-gray-500 mr-4 mb-2 sm:mb-0">
<i class="fas fa-clock mr-1"></i> 40分钟
</div>
<div class="flex items-center text-gray-500 mb-2 sm:mb-0">
<i class="fas fa-scoreboard mr-1"></i> 100?
</div>
</div>
<div class="flex justify-between items-center mb-4 text-sm text-gray-500">
<div class="flex items-center">
<i class="fas fa-user-graduate mr-1"></i> 312人已?
</div>
<div class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-1"></i> 4.7
</div>
</div>
<button class="start-exam-btn w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 transform hover:scale-105" data-exam-id="exam_3">
开始考试
</button>
</div>
</div>
<!-- 新增试卷4 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 group">
<div class="p-6">
<div class="flex flex-wrap gap-2 mb-3">
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">初中</span>
<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">物理</span>
<span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">初二</span>
<span class="bg-orange-100 text-orange-800 text-xs font-medium px-2.5 py-0.5 rounded">中等</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-200">初二物理力学基础测试</h3>
<p class="text-gray-600 text-sm mb-4 line-clamp-2 h-10">本测试涵盖力的基本概念、牛顿运动定律等知识点，?2道题，满?00分，考试时间50分钟?/p>
<div class="flex flex-wrap justify-between items-center mb-4 text-sm">
<div class="flex items-center text-gray-500 mr-4 mb-2 sm:mb-0">
<i class="fas fa-question-circle mr-1"></i> 12?
</div>
<div class="flex items-center text-gray-500 mr-4 mb-2 sm:mb-0">
<i class="fas fa-clock mr-1"></i> 50分钟
</div>
<div class="flex items-center text-gray-500 mb-2 sm:mb-0">
<i class="fas fa-scoreboard mr-1"></i> 100?
</div>
</div>
<div class="flex justify-between items-center mb-4 text-sm text-gray-500">
<div class="flex items-center">
<i class="fas fa-user-graduate mr-1"></i> 215人已?
</div>
<div class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-1"></i> 4.5
</div>
</div>
<button class="start-exam-btn w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 transform hover:scale-105" data-exam-id="exam_4">
开始考试
</button>
</div>
</div>
<!-- 初一上学期期中考试试卷 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 group">
<div class="p-6">
<div class="flex flex-wrap gap-2 mb-3">
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">初中</span>
<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">数学</span>
<span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">初一</span>
<span class="bg-orange-100 text-orange-800 text-xs font-medium px-2.5 py-0.5 rounded">中等</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-200">初一上学期数学期中考试试卷</h3>
<p class="text-gray-600 text-sm mb-4 line-clamp-2 h-10">本试卷涵盖初一上学期全部知识点，共20道题，满?00分，考试时间90分钟?/p>
<div class="flex flex-wrap justify-between items-center mb-4 text-sm">
<div class="flex items-center text-gray-500 mr-4 mb-2 sm:mb-0">
<i class="fas fa-question-circle mr-1"></i> 20?
</div>
<div class="flex items-center text-gray-500 mr-4 mb-2 sm:mb-0">
<i class="fas fa-clock mr-1"></i> 90分钟
</div>
<div class="flex items-center text-gray-500 mb-2 sm:mb-0">
<i class="fas fa-scoreboard mr-1"></i> 100?
</div>
</div>
<div class="flex justify-between items-center mb-4 text-sm text-gray-500">
<div class="flex items-center">
<i class="fas fa-user-graduate mr-1"></i> 320人已?
</div>
<div class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-1"></i> 4.7
</div>
</div>
<button class="start-exam-btn w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 transform hover:scale-105" data-exam-id="exam_2023_midterm">
开始考试
</button>
</div>
</div>
<!-- 新增试卷5 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 group">
<div class="p-6">
<div class="flex flex-wrap gap-2 mb-3">
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">初中</span>
<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">化学</span>
<span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">初三</span>
<span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">困难</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-200">初三化学酸碱盐专题测?/h3>
<p class="text-gray-600 text-sm mb-4 line-clamp-2 h-10">本测试涵盖酸碱盐的性质、化学反应及应用等知识点，共15道题，满?00分，考试时间60分钟?/p>
<div class="flex flex-wrap justify-between items-center mb-4 text-sm">
<div class="flex items-center text-gray-500 mr-4 mb-2 sm:mb-0">
<i class="fas fa-question-circle mr-1"></i> 15?
</div>
<div class="flex items-center text-gray-500 mr-4 mb-2 sm:mb-0">
<i class="fas fa-clock mr-1"></i> 60分钟
</div>
<div class="flex items-center text-gray-500 mb-2 sm:mb-0">
<i class="fas fa-scoreboard mr-1"></i> 100?
</div>
</div>
<div class="flex justify-between items-center mb-4 text-sm text-gray-500">
<div class="flex items-center">
<i class="fas fa-user-graduate mr-1"></i> 176人已?
</div>
<div class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-1"></i> 4.3
</div>
</div>
<button class="start-exam-btn w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 transform hover:scale-105" data-exam-id="exam_5">
开始考试
</button>
</div>
</div>
<!-- 新增试卷6 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 group border-2 border-blue-500">
<div class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg">
热门
</div>
<div class="p-6">
<div class="flex flex-wrap gap-2 mb-3">
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">高中</span>
<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">数学</span>
<span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">高一</span>
<span class="bg-orange-100 text-orange-800 text-xs font-medium px-2.5 py-0.5 rounded">中等</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-200">高一数学函数综合测试</h3>
<p class="text-gray-600 text-sm mb-4 line-clamp-2 h-10">本测试涵盖函数的概念、性质及应用等知识点，?0道题，满?00分，考试时间90分钟?/p>
<div class="flex flex-wrap justify-between items-center mb-4 text-sm">
<div class="flex items-center text-gray-500 mr-4 mb-2 sm:mb-0">
<i class="fas fa-question-circle mr-1"></i> 20?
</div>
<div class="flex items-center text-gray-500 mr-4 mb-2 sm:mb-0">
<i class="fas fa-clock mr-1"></i> 90分钟
</div>
<div class="flex items-center text-gray-500 mb-2 sm:mb-0">
<i class="fas fa-scoreboard mr-1"></i> 100?
</div>
</div>
<div class="flex justify-between items-center mb-4 text-sm text-gray-500">
<div class="flex items-center">
<i class="fas fa-user-graduate mr-1"></i> 521人已?
</div>
<div class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-1"></i> 4.9
</div>
</div>
<button class="start-exam-btn w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 transform hover:scale-105" data-exam-id="exam_6">
开始考试
</button>
</div>
</div>
</div>
</div>
</main>
<!-- 页脚 -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-lg font-semibold mb-4 flex items-center">
<i class="fas fa-graduation-cap mr-2"></i> 知学刷题
</h3>
<p class="text-gray-400 mb-4">
专为中小学学生打造的高效学习平台，助力提升学习效率和成绩?
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weixin text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weibo text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-qq text-xl"></i></a>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">快速链?/h3>
<ul class="space-y-2">
<li><a href="../index.html" class="text-gray-400 hover:text-white">首页</a></li>
<li><a href="./knowledge.html" class="text-gray-400 hover:text-white">知识?/a></li>
<li><a href="practice.html" class="text-gray-400 hover:text-white">习题练习</a></li>
<li><a href="exam.html" class="text-gray-400 hover:text-white">模拟试卷</a></li>
<li><a href="profile.html" class="text-gray-400 hover:text-white">个人中心</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">学科分类</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">数学</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">语文</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">英语</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">物理</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">化学</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">生物</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">联系我们</h3>
<ul class="space-y-2 text-gray-400">
<li class="flex items-start">
<i class="fas fa-envelope mt-1 mr-2"></i>
<span>{$site.contact_email}</span>
</li>
<li class="flex items-center">
<i class="fas fa-phone-alt mr-2"></i>
<span>400-123-4567</span>
</li>
</ul>
</div>
</div>
<div class="mt-12 pt-8 border-t border-gray-700 text-center text-gray-400">
<p>© 2023 知学刷题平台 版权所?/p>
</div>
</div>
</footer>
<!-- JavaScript -->
<script>
// 静态模拟数?
const staticData = {
exams: [
{
id: 'exam_1',
title: '初一数学单元测试',
学段: '初中',
学科: '数学',
grade: '初一',
duration: 60,
totalScore: 100,
description: '本测试涵盖一元一次方程的相关知识点，?0道题，满?00分，考试时间60分钟?,
questionIds: ['ques_1', 'ques_2']
},
{
id: 'exam_2',
title: '初一生物基础知识测试',
学段: '初中',
学科: '生物',
grade: '初一',
duration: 45,
totalScore: 100,
description: '本测试涵盖细胞的基本结构和细胞分裂分化的相关知识点，?0道题，满?00分，考试时间45分钟?,
questionIds: ['ques_3', 'ques_4']
}
],
questions: [
{
id: 'ques_1',
content: '若x=3是方?x + a = 7的解，则a的值为?,
type: '选择?,
学段: '初中',
学科: '数学',
grade: '初一',
difficulty: '简?,
knowledgePointId: 'know_1',
options: [
{ id: 'opt_1_1', text: '1' },
{ id: 'opt_1_2', text: '2' },
{ id: 'opt_1_3', text: '3' },
{ id: 'opt_1_4', text: '4' }
],
correctAnswer: 'opt_1_1',
explanation: '将x=3代入方程2x + a = 7，得?×3 + a = 7，解得a=1?,
score: 10
},
{
id: 'ques_2',
content: '解方程组：{x + y = 5} {2x - y = 1}',
type: '解答?,
学段: '初中',
学科: '数学',
grade: '初二',
difficulty: '中等',
knowledgePointId: 'know_2',
options: [],
correctAnswer: 'x=2, y=3',
explanation: '使用加减消元法，将两个方程相加得?x=6，解得x=2，代入第一个方程得y=3?,
score: 20
},
{
id: 'ques_3',
content: '下列结构中，植物细胞特有的是?,
type: '选择?,
学段: '初中',
学科: '生物',
grade: '初一',
difficulty: '简?,
knowledgePointId: 'know_3',
options: [
{ id: 'opt_3_1', text: '细胞? },
{ id: 'opt_3_2', text: '细胞? },
{ id: 'opt_3_3', text: '细胞? },
{ id: 'opt_3_4', text: '细胞? }
],
correctAnswer: 'opt_3_3',
explanation: '植物细胞特有的结构包括细胞壁、液泡和叶绿体，动物细胞没有这些结构?,
score: 10
},
{
id: 'ques_4',
content: '细胞分裂的结果是?,
type: '选择?,
学段: '初中',
学科: '生物',
grade: '初一',
difficulty: '简?,
knowledgePointId: 'know_4',
options: [
{ id: 'opt_4_1', text: '细胞体积增大' },
{ id: 'opt_4_2', text: '细胞数目增多' },
{ id: 'opt_4_3', text: '细胞形态改? },
{ id: 'opt_4_4', text: '细胞功能专门? }
],
correctAnswer: 'opt_4_2',
explanation: '细胞分裂是一个细胞分成两个细胞的过程，结果是细胞数目增多?,
score: 10
}
]
};
</script>
<!-- 移除了对user.js和main.js的引?-->
<script>
// 静态试卷页面脚?- 使用静态数?
document.addEventListener('DOMContentLoaded', function() {
// 加载试卷列表
loadExamList();
// 为开始考试按钮添加事件
document.querySelectorAll('.start-exam-btn').forEach(btn => {
btn.addEventListener('click', function() {
const examId = this.getAttribute('data-exam-id');
startExam(examId);
});
});
// 题目导航模态框相关事件
document.getElementById('show-question-nav')?.addEventListener('click', function() {
document.getElementById('question-nav-modal').classList.remove('hidden');
});
document.getElementById('close-nav-modal')?.addEventListener('click', function() {
document.getElementById('question-nav-modal').classList.add('hidden');
});
// 交卷按钮事件
document.getElementById('submit-exam')?.addEventListener('click', function() {
if (confirm('确定要交卷吗？交卷后将无法修改答案?)) {
finishExam();
}
});
// 上一?下一题按钮事?
document.getElementById('prev-exam-question')?.addEventListener('click', showPrevExamQuestion);
document.getElementById('next-exam-question')?.addEventListener('click', showNextExamQuestion);
// 标记此题按钮事件
document.getElementById('mark-question')?.addEventListener('click', toggleQuestionMark);
// 再考一次按钮事?
document.getElementById('new-exam')?.addEventListener('click', function() {
document.getElementById('exam-result').classList.add('hidden');
loadExamList();
});
// 查看详情按钮事件
document.getElementById('review-exam')?.addEventListener('click', function() {
// 此处可以实现查看试卷详情功能
alert('查看详情功能待实?);
});
});
// 全局变量
let currentExam = null; // 当前考试
let currentQuestionIndex = 0; // 当前题目索引
let userAnswers = {}; // 用户答案
let markedQuestions = new Set(); // 标记的题?
let examStartTime = null; // 考试开始时?
let examTimerInterval = null; // 考试计时?
// 加载试卷列表 - 已改为直接显示静态HTML
function loadExamList() {
document.getElementById('exam-status').classList.add('hidden');
document.getElementById('exam-container').classList.add('hidden');
document.getElementById('exam-result').classList.add('hidden');
document.getElementById('exam-list').classList.remove('hidden');
}
// 开始考试
function startExam(examId) {
// 特殊处理初一上学期期中考试试卷
if (examId === 'exam_2023_midterm') {
window.location.href = 'exam-detail.html';
} else {
// 其他试卷跳转到优化后的考试页面
window.location.href = 'optimized-exam.html?examId=' + examId;
}
}
// 加载考试题目
function loadExamQuestions() {
currentExam.questions = currentExam.questionIds.map(id => {
return staticData.questions.find(q => q.id === id);
}).filter(q => q); // 过滤掉不存在的题?
}
// 显示考试题目
function showExamQuestion(index) {
if (index < 0 || index >= currentExam.questions.length) {
return;
}
currentQuestionIndex = index;
const question = currentExam.questions[index];
// 更新题目标题
document.getElementById('exam-question-title').textContent = `?{index + 1}?(${question.type})`;
// 更新题目内容
const questionContent = document.getElementById('exam-question-content');
questionContent.innerHTML = question.content;
// 更新答题区域
const answerContent = document.getElementById('exam-answer-content');
answerContent.innerHTML = '';
// 根据题型生成答题区域
if (question.type === '选择?) {
question.options.forEach(option => {
const optionCard = document.createElement('div');
optionCard.className = `option-card ${userAnswers[question.id] === option.id ? 'selected' : ''}`;
optionCard.setAttribute('data-option-id', option.id);
optionCard.innerHTML = `
<div class="flex items-center">
<div class="w-5 h-5 border border-gray-300 rounded-md flex-shrink-0 mr-3 ${userAnswers[question.id] === option.id ? 'bg-blue-600 border-blue-600' : ''}">
${userAnswers[question.id] === option.id ? '<i class="fas fa-check text-white text-xs"></i>' : ''}
</div>
<span>${option.text}</span>
</div>
`;
// 添加点击事件
optionCard.addEventListener('click', function() {
// 移除其他选项的选中状?
document.querySelectorAll('.option-card').forEach(card => {
card.classList.remove('selected');
card.querySelector('div:first-child').classList.remove('bg-blue-600', 'border-blue-600');
card.querySelector('i')?.remove();
});
// 添加当前选项的选中状?
this.classList.add('selected');
const radio = this.querySelector('div:first-child');
radio.classList.add('bg-blue-600', 'border-blue-600');
radio.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
// 保存答案
userAnswers[question.id] = option.id;
// 更新题目导航
updateQuestionNav();
});
answerContent.appendChild(optionCard);
});
} else if (question.type === '填空?) {
const input = document.createElement('textarea');
input.className = 'form-input w-full h-32';
input.placeholder = '请输入答?..';
input.value = userAnswers[question.id] || '';
// 添加输入事件
input.addEventListener('input', function() {
userAnswers[question.id] = this.value;
// 更新题目导航
updateQuestionNav();
});
answerContent.appendChild(input);
} else if (question.type === '解答?) {
const textarea = document.createElement('textarea');
textarea.className = 'form-input w-full h-48';
textarea.placeholder = '请输入解答过?..';
textarea.value = userAnswers[question.id] || '';
// 添加输入事件
textarea.addEventListener('input', function() {
userAnswers[question.id] = this.value;
// 更新题目导航
updateQuestionNav();
});
answerContent.appendChild(textarea);
}
// 更新标记按钮状?
if (markedQuestions.has(question.id)) {
document.getElementById('mark-question').classList.add('bg-yellow-200');
document.getElementById('mark-question').innerHTML = '<i class="fas fa-flag-checkered mr-1"></i> 取消标记';
} else {
document.getElementById('mark-question').classList.remove('bg-yellow-200');
document.getElementById('mark-question').innerHTML = '<i class="fas fa-flag mr-1"></i> 标记此题';
}
// 更新按钮状?
document.getElementById('prev-exam-question').disabled = index === 0;
document.getElementById('next-exam-question').disabled = index === currentExam.questions.length - 1;
// 更新进度
updateExamProgress();
// 更新题目导航
updateQuestionNav();
}
// 上一?
function showPrevExamQuestion() {
if (currentQuestionIndex > 0) {
showExamQuestion(currentQuestionIndex - 1);
}
}
// 下一?
function showNextExamQuestion() {
if (currentQuestionIndex < currentExam.questions.length - 1) {
showExamQuestion(currentQuestionIndex + 1);
}
}
// 切换题目标记
function toggleQuestionMark() {
const question = currentExam.questions[currentQuestionIndex];
if (markedQuestions.has(question.id)) {
markedQuestions.delete(question.id);
document.getElementById('mark-question').classList.remove('bg-yellow-200');
document.getElementById('mark-question').innerHTML = '<i class="fas fa-flag mr-1"></i> 标记此题';
} else {
markedQuestions.add(question.id);
document.getElementById('mark-question').classList.add('bg-yellow-200');
document.getElementById('mark-question').innerHTML = '<i class="fas fa-flag-checkered mr-1"></i> 取消标记';
}
// 更新题目导航
updateQuestionNav();
}
// 更新考试进度
function updateExamProgress() {
const progress = (currentQuestionIndex + 1) / currentExam.questions.length * 100;
document.getElementById('progress-bar').style.width = `${progress}%`;
document.getElementById('question-progress').textContent = `${currentQuestionIndex + 1}/${currentExam.questions.length}`;
}
// 更新题目导航
function updateQuestionNav() {
const navGrid = document.getElementById('question-nav-grid');
navGrid.innerHTML = '';
currentExam.questions.forEach((question, index) => {
const navBtn = document.createElement('button');
navBtn.className = 'w-8 h-8 flex items-center justify-center rounded-md text-sm font-medium focus:outline-none';
navBtn.textContent = index + 1;
// 设置按钮样式
if (markedQuestions.has(question.id)) {
navBtn.classList.add('bg-yellow-100', 'text-yellow-600');
} else if (userAnswers[question.id]) {
navBtn.classList.add('bg-blue-100', 'text-blue-600');
} else {
navBtn.classList.add('bg-gray-100', 'text-gray-600');
}
// 当前题目特殊样式
if (index === currentQuestionIndex) {
navBtn.classList.add('ring-2', 'ring-blue-500');
}
// 添加点击事件
navBtn.addEventListener('click', function() {
showExamQuestion(index);
document.getElementById('question-nav-modal').classList.add('hidden');
});
navGrid.appendChild(navBtn);
});
}
// 更新考试计时?
function updateExamTimer() {
const now = new Date();
const elapsedSeconds = Math.floor((now - examStartTime) / 1000);
const totalSeconds = currentExam.timeLimit * 60;
const remainingSeconds = totalSeconds - elapsedSeconds;
if (remainingSeconds <= 0) {
// 时间到，自动交卷
finishExam();
return;
}
// 格式化时?
const hours = Math.floor(remainingSeconds / 3600);
const minutes = Math.floor((remainingSeconds % 3600) / 60);
const seconds = remainingSeconds % 60;
const formattedTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
document.getElementById('exam-timer').textContent = formattedTime;
// 剩余时间小于10分钟时，显示警告颜色
if (remainingSeconds < 600) {
document.getElementById('exam-timer').classList.add('text-red-600');
document.getElementById('exam-timer').classList.remove('text-gray-600');
}
}
// 完成考试
function finishExam() {
// 停止计时?
clearInterval(examTimerInterval);
// 计算成绩
let correctCount = 0;
currentExam.questions.forEach(question => {
if (question.type === '选择?) {
if (userAnswers[question.id] === question.correctAnswer) {
correctCount++;
}
} else if (question.type === '填空? || question.type === '解答?) {
// 简单比较，实际应用中可能需要更复杂的判?
if (userAnswers[question.id]?.trim() === question.correctAnswer?.trim()) {
correctCount++;
}
}
});
const score = Math.round((correctCount / currentExam.questions.length) * currentExam.fullScore);
// 记录考试结果
const examResult = {
examId: currentExam.id,
examTitle: currentExam.title,
score: score,
correctCount: correctCount,
totalCount: currentExam.questions.length,
finishTime: new Date(),
timeUsed: Math.floor((new Date() - examStartTime) / 60000) // 分钟
};
// 保存考试结果
UserManager.saveExamResult(examResult);
// 更新UI
document.getElementById('exam-status').classList.add('hidden');
document.getElementById('exam-container').classList.add('hidden');
document.getElementById('exam-result').classList.remove('hidden');
// 更新结果信息
document.getElementById('result-exam-title').textContent = currentExam.title;
document.getElementById('result-finish-time').textContent = formatDate(new Date());
document.getElementById('result-time-used').textContent = `${examResult.timeUsed}分钟${Math.floor(((new Date() - examStartTime) % 60000) / 1000)}秒`;
document.getElementById('result-score').textContent = score;
document.getElementById('result-total-questions').textContent = currentExam.questions.length;
document.getElementById('result-correct-questions').textContent = correctCount;
document.getElementById('result-incorrect-questions').textContent = currentExam.questions.length - correctCount;
}
// 格式化日?
function formatDate(date) {
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getSeconds().toString().padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
</script>
<script src="../js/data.js"></script>
<script src="../js/user.js"></script>
<script>
// 初始化页?
document.addEventListener('DOMContentLoaded', function() {
// 登录按钮事件
const loginBtn = document.getElementById('login-btn');
if (loginBtn) {
loginBtn.addEventListener('click', function() {
window.location.href = 'login.html';
});
}
// 开始考试按钮事件
const startExamBtns = document.querySelectorAll('.start-exam-btn');
startExamBtns.forEach(btn => {
btn.addEventListener('click', function() {
const examId = this.getAttribute('data-exam-id');
startExam(examId);
});
});
});
</script>
</body>
</html>