HTML历理 智慧考试系统
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线考试系统 - 试卷页面</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.8.15/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.8.15/layui.min.js"></script>
<!-- 自定义Tailwind配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1E40AF', // 深蓝色作为主色调，代表专业和信任
secondary: '#3B82F6', // 中蓝色作为辅助色
accent: '#2563EB', // 亮蓝色作为强调色
neutral: '#F1F5F9', // 浅灰色作为中性背景色
dark: '#0F172A', // 深色文本
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.question-card {
@apply bg-white rounded-xl shadow-md p-6 mb-6 transition-all duration-300 hover:shadow-lg;
}
.btn-primary {
@apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/50;
}
.btn-secondary {
@apply bg-white border border-gray-300 hover:bg-gray-50 text-dark font-medium py-2 px-6 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-gray-200;
}
.option-item {
@apply p-3 rounded-lg border border-gray-200 mb-2 hover:bg-gray-50 transition-colors duration-200 cursor-pointer;
}
.option-item-selected {
@apply bg-primary/10 border-primary;
}
.timer {
@apply bg-primary/10 text-primary font-semibold px-4 py-2 rounded-lg;
}
.progress-bar {
@apply h-2 bg-gray-200 rounded-full overflow-hidden;
}
.progress-value {
@apply h-full bg-primary transition-all duration-500 ease-out;
}
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fa-solid fa-graduation-cap text-primary text-2xl"></i>
<h1 class="text-xl font-bold text-dark">智慧考试系统</h1>
</div>
<div class="flex items-center space-x-6">
<div class="hidden md:flex items-center space-x-2">
<i class="fa-regular fa-user-circle text-gray-500"></i>
<span class="text-sm">张同学</span>
</div>
<div class="timer flex items-center">
<i class="fa-regular fa-clock mr-2"></i>
<span id="countdown">01:59:59</span>
</div>
<button class="btn-secondary hidden md:block">
<i class="fa-solid fa-question-circle mr-2"></i>帮助
</button>
</div>
</div>
</header>
<main class="container mx-auto px-4 py-6 flex flex-col md:flex-row gap-6">
<!-- 左侧题目导航 -->
<div class="w-full md:w-64 order-2 md:order-1">
<div class="bg-white rounded-xl shadow-sm p-4 sticky top-24">
<h2 class="text-lg font-semibold mb-4 flex items-center">
<i class="fa-solid fa-list-ul text-primary mr-2"></i>题目导航
</h2>
<div class="mb-4">
<div class="flex justify-between text-sm mb-2">
<span>考试进度</span>
<span id="progress-text">0/20</span>
</div>
<div class="progress-bar">
<div id="progress-bar" class="progress-value" style="width: 0%"></div>
</div>
</div>
<div class="grid grid-cols-5 gap-2 mb-4">
<div class="flex items-center justify-center col-span-5 text-sm text-gray-500 mb-1">题目状态</div>
<div class="w-4 h-4 rounded-full bg-gray-200"></div>
<div class="text-xs">未答</div>
<div class="w-4 h-4 rounded-full bg-primary"></div>
<div class="text-xs">已答</div>
<div class="w-4 h-4 rounded-full bg-yellow-500"></div>
<div class="text-xs">标记</div>
</div>
<div class="grid grid-cols-5 gap-2">
<div id="question-nav-1" class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 cursor-pointer hover:bg-gray-300 transition-colors">1</div>
<div id="question-nav-2" class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 cursor-pointer hover:bg-gray-300 transition-colors">2</div>
<div id="question-nav-3" class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 cursor-pointer hover:bg-gray-300 transition-colors">3</div>
<div id="question-nav-4" class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 cursor-pointer hover:bg-gray-300 transition-colors">4</div>
<div id="question-nav-5" class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 cursor-pointer hover:bg-gray-300 transition-colors">5</div>
<div id="question-nav-6" class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 cursor-pointer hover:bg-gray-300 transition-colors">6</div>
<div id="question-nav-7" class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 cursor-pointer hover:bg-gray-300 transition-colors">7</div>
<div id="question-nav-8" class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 cursor-pointer hover:bg-gray-300 transition-colors">8</div>
<div id="question-nav-9" class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 cursor-pointer hover:bg-gray-300 transition-colors">9</div>
<div id="question-nav-10" class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 cursor-pointer hover:bg-gray-300 transition-colors">10</div>
<div id="question-nav-11" class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 cursor-pointer hover:bg-gray-300 transition-colors">11</div>
<div id="question-nav-12" class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 cursor-pointer hover:bg-gray-300 transition-colors">12</div>
<div id="question-nav-13" class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 cursor-pointer hover:bg-gray-300 transition-colors">13</div>
<div id="question-nav-14" class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 cursor-pointer hover:bg-gray-300 transition-colors">14</div>
<div id="question-nav-15" class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 cursor-pointer hover:bg-gray-300 transition-colors">15</div>
<div id="question-nav-16" class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 cursor-pointer hover:bg-gray-300 transition-colors">16</div>
<div id="question-nav-17" class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 cursor-pointer hover:bg-gray-300 transition-colors">17</div>
<div id="question-nav-18" class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 cursor-pointer hover:bg-gray-300 transition-colors">18</div>
<div id="question-nav-19" class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 cursor-pointer hover:bg-gray-300 transition-colors">19</div>
<div id="question-nav-20" class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 cursor-pointer hover:bg-gray-300 transition-colors">20</div>
</div>
<div class="mt-6">
<h3 class="text-sm font-medium text-gray-500 mb-2">题型分布</h3>
<ul class="text-sm space-y-1">
<li class="flex justify-between">
<span>单选题</span>
<span>1-10</span>
</li>
<li class="flex justify-between">
<span>多选题</span>
<span>11-15</span>
</li>
<li class="flex justify-between">
<span>判断题</span>
<span>16-18</span>
</li>
<li class="flex justify-between">
<span>填空题</span>
<span>19</span>
</li>
<li class="flex justify-between">
<span>作文题</span>
<span>20</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 右侧题目区域 -->
<div class="w-full md:flex-1 order-1 md:order-2">
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold text-dark">2025年春季学期期末考试</h2>
<span class="text-sm text-gray-500">总分: 100分</span>
</div>
<p class="text-gray-600 mb-4">考试时间：120分钟 出题人：教务处</p>
<div class="bg-blue-50 border-l-4 border-primary p-4 rounded-r-lg">
<p class="text-sm text-gray-700">
<i class="fa-solid fa-info-circle text-primary mr-2"></i>
请认真阅读题目，在规定时间内完成答题。考试过程中请勿刷新页面，否则可能导致答案丢失。
</p>
</div>
</div>
<!-- 题目容器 -->
<div id="questions-container">
<!-- 单选题 -->
<div class="question-card">
<div class="flex justify-between items-start mb-4">
<div class="flex items-start">
<span class="bg-primary text-white w-6 h-6 rounded-full flex items-center justify-center mr-2 mt-0.5">1</span>
<h3 class="font-semibold">单选题 <span class="text-sm text-gray-500 font-normal ml-2">(本题5分)</span></h3>
</div>
<button class="text-gray-400 hover:text-yellow-500 transition-colors" onclick="markQuestion(1)">
<i class="fa-regular fa-bookmark text-lg"></i>
</button>
</div>
<p class="mb-4">以下哪种编程语言是面向对象的编程语言？</p>
<div class="ml-6 space-y-2">
<div class="option-item" onclick="selectSingleOption(1, 'A')">
<label class="flex items-center cursor-pointer">
<input type="radio" name="question1" value="A" class="form-radio h-4 w-4 text-primary">
<span class="ml-2">A. C</span>
</label>
</div>
<div class="option-item" onclick="selectSingleOption(1, 'B')">
<label class="flex items-center cursor-pointer">
<input type="radio" name="question1" value="B" class="form-radio h-4 w-4 text-primary">
<span class="ml-2">B. Java</span>
</label>
</div>
<div class="option-item" onclick="selectSingleOption(1, 'C')">
<label class="flex items-center cursor-pointer">
<input type="radio" name="question1" value="C" class="form-radio h-4 w-4 text-primary">
<span class="ml-2">C. Python</span>
</label>
</div>
<div class="option-item" onclick="selectSingleOption(1, 'D')">
<label class="flex items-center cursor-pointer">
<input type="radio" name="question1" value="D" class="form-radio h-4 w-4 text-primary">
<span class="ml-2">D. 以上都是</span>
</label>
</div>
</div>
</div>
<!-- 单选题 -->
<div class="question-card">
<div class="flex justify-between items-start mb-4">
<div class="flex items-start">
<span class="bg-primary text-white w-6 h-6 rounded-full flex items-center justify-center mr-2 mt-0.5">2</span>
<h3 class="font-semibold">单选题 <span class="text-sm text-gray-500 font-normal ml-2">(本题5分)</span></h3>
</div>
<button class="text-gray-400 hover:text-yellow-500 transition-colors" onclick="markQuestion(2)">
<i class="fa-regular fa-bookmark text-lg"></i>
</button>
</div>
<p class="mb-4">在HTML中，以下哪个标签用于定义文档的主体？</p>
<div class="ml-6 space-y-2">
<div class="option-item" onclick="selectSingleOption(2, 'A')">
<label class="flex items-center cursor-pointer">
<input type="radio" name="question2" value="A" class="form-radio h-4 w-4 text-primary">
<span class="ml-2">A. <header></span>
</label>
</div>
<div class="option-item" onclick="selectSingleOption(2, 'B')">
<label class="flex items-center cursor-pointer">
<input type="radio" name="question2" value="B" class="form-radio h-4 w-4 text-primary">
<span class="ml-2">B. <body></span>
</label>
</div>
<div class="option-item" onclick="selectSingleOption(2, 'C')">
<label class="flex items-center cursor-pointer">
<input type="radio" name="question2" value="C" class="form-radio h-4 w-4 text-primary">
<span class="ml-2">C. <main></span>
</label>
</div>
<div class="option-item" onclick="selectSingleOption(2, 'D')">
<label class="flex items-center cursor-pointer">
<input type="radio" name="question2" value="D" class="form-radio h-4 w-4 text-primary">
<span class="ml-2">D. <section></span>
</label>
</div>
</div>
</div>
<!-- 多选题 -->
<div class="question-card">
<div class="flex justify-between items-start mb-4">
<div class="flex items-start">
<span class="bg-primary text-white w-6 h-6 rounded-full flex items-center justify-center mr-2 mt-0.5">11</span>
<h3 class="font-semibold">多选题 <span class="text-sm text-gray-500 font-normal ml-2">(本题8分)</span></h3>
</div>
<button class="text-gray-400 hover:text-yellow-500 transition-colors" onclick="markQuestion(11)">
<i class="fa-regular fa-bookmark text-lg"></i>
</button>
</div>
<p class="mb-4">以下哪些属于前端开发技术栈？</p>
<div class="ml-6 space-y-2">
<div class="option-item" onclick="selectMultiOption(11, 'A')">
<label class="flex items-center cursor-pointer">
<input type="checkbox" name="question11" value="A" class="form-checkbox h-4 w-4 text-primary">
<span class="ml-2">A. HTML</span>
</label>
</div>
<div class="option-item" onclick="selectMultiOption(11, 'B')">
<label class="flex items-center cursor-pointer">
<input type="checkbox" name="question11" value="B" class="form-checkbox h-4 w-4 text-primary">
<span class="ml-2">B. CSS</span>
</label>
</div>
<div class="option-item" onclick="selectMultiOption(11, 'C')">
<label class="flex items-center cursor-pointer">
<input type="checkbox" name="question11" value="C" class="form-checkbox h-4 w-4 text-primary">
<span class="ml-2">C. JavaScript</span>
</label>
</div>
<div class="option-item" onclick="selectMultiOption(11, 'D')">
<label class="flex items-center cursor-pointer">
<input type="checkbox" name="question11" value="D" class="form-checkbox h-4 w-4 text-primary">
<span class="ml-2">D. Node.js</span>
</label>
</div>
</div>
</div>
<!-- 判断题 -->
<div class="question-card">
<div class="flex justify-between items-start mb-4">
<div class="flex items-start">
<span class="bg-primary text-white w-6 h-6 rounded-full flex items-center justify-center mr-2 mt-0.5">16</span>
<h3 class="font-semibold">判断题 <span class="text-sm text-gray-500 font-normal ml-2">(本题5分)</span></h3>
</div>
<button class="text-gray-400 hover:text-yellow-500 transition-colors" onclick="markQuestion(16)">
<i class="fa-regular fa-bookmark text-lg"></i>
</button>
</div>
<p class="mb-4">CSS用于描述HTML文档的结构。</p>
<div class="ml-6 space-y-2">
<div class="option-item" onclick="selectTrueFalse(16, 'true')">
<label class="flex items-center cursor-pointer">
<input type="radio" name="question16" value="true" class="form-radio h-4 w-4 text-primary">
<span class="ml-2">A. 正确</span>
</label>
</div>
<div class="option-item" onclick="selectTrueFalse(16, 'false')">
<label class="flex items-center cursor-pointer">
<input type="radio" name="question16" value="false" class="form-radio h-4 w-4 text-primary">
<span class="ml-2">B. 错误</span>
</label>
</div>
</div>
</div>
<!-- 案例题 -->
<div class="question-card">
<div class="flex justify-between items-start mb-4">
<div class="flex items-start">
<span class="bg-primary text-white w-6 h-6 rounded-full flex items-center justify-center mr-2 mt-0.5">3</span>
<h3 class="font-semibold">案例分析题 <span class="text-sm text-gray-500 font-normal ml-2">(本题10分)</span></h3>
</div>
<button class="text-gray-400 hover:text-yellow-500 transition-colors" onclick="markQuestion(3)">
<i class="fa-regular fa-bookmark text-lg"></i>
</button>
</div>
<div class="bg-gray-50 p-4 rounded-lg mb-4">
<p class="font-medium mb-2">阅读以下案例，回答问题：</p>
<p class="text-sm">
某公司开发了一个在线购物平台，用户可以浏览商品、添加到购物车并完成支付。最近，该平台的用户数量急剧增加，但同时也出现了一些性能问题，如页面加载缓慢、支付失败率上升等。作为前端开发工程师，请分析可能的原因并提出解决方案。
</p>
</div>
<p class="mb-2">请分析可能的原因并提出解决方案：</p>
<textarea class="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary/50 resize-none" rows="6" placeholder="请输入你的分析和解决方案..." oninput="answerText(3, this.value)"></textarea>
</div>
<!-- 填空题 -->
<div class="question-card">
<div class="flex justify-between items-start mb-4">
<div class="flex items-start">
<span class="bg-primary text-white w-6 h-6 rounded-full flex items-center justify-center mr-2 mt-0.5">19</span>
<h3 class="font-semibold">填空题 <span class="text-sm text-gray-500 font-normal ml-2">(每空5分，共10分)</span></h3>
</div>
<button class="text-gray-400 hover:text-yellow-500 transition-colors" onclick="markQuestion(19)">
<i class="fa-regular fa-bookmark text-lg"></i>
</button>
</div>
<p class="mb-4">
在JavaScript中，<input type="text" class="border-b-2 border-gray-300 px-2 focus:outline-none focus:border-primary w-24" placeholder="填空1" oninput="answerText(19, this.value, 1)">
用于声明常量，而 <input type="text" class="border-b-2 border-gray-300 px-2 focus:outline-none focus:border-primary w-24" placeholder="填空2" oninput="answerText(19, this.value, 2)">
用于声明变量，且具有块级作用域。
</p>
</div>
<!-- 作文题 -->
<div class="question-card">
<div class="flex justify-between items-start mb-4">
<div class="flex items-start">
<span class="bg-primary text-white w-6 h-6 rounded-full flex items-center justify-center mr-2 mt-0.5">20</span>
<h3 class="font-semibold">作文题 <span class="text-sm text-gray-500 font-normal ml-2">(本题20分)</span></h3>
</div>
<button class="text-gray-400 hover:text-yellow-500 transition-colors" onclick="markQuestion(20)">
<i class="fa-regular fa-bookmark text-lg"></i>
</button>
</div>
<p class="mb-4">请以"人工智能对未来社会的影响"为题，撰写一篇不少于500字的论述文。</p>
<div class="layui-form">
<div class="layui-form-item layui-form-text">
<div class="layui-input-block">
<textarea id="editor" class="layui-textarea" placeholder="请输入作文内容..." style="height: 300px;" oninput="answerText(20, this.value)"></textarea>
</div>
</div>
<div class="flex justify-between items-center text-sm text-gray-500 mt-2">
<span>作文要求：观点明确，论据充分，逻辑清晰，语言流畅。</span>
<span id="word-count">0/1000 字</span>
</div>
</div>
</div>
</div>
<!-- 底部导航 -->
<div class="flex justify-between items-center mt-8">
<button class="btn-secondary">
<i class="fa-solid fa-arrow-left mr-2"></i>上一题
</button>
<div class="flex space-x-2">
<button class="btn-secondary">
<i class="fa-regular fa-save mr-2"></i>保存答案
</button>
<button class="btn-primary">
<i class="fa-solid fa-arrow-right mr-2"></i>下一题
</button>
</div>
<button class="btn-primary bg-red-600 hover:bg-red-700" onclick="submitExam()">
<i class="fa-solid fa-paper-plane mr-2"></i>交卷
</button>
</div>
</div>
</main>
<!-- 交卷确认模态框 -->
<div id="submit-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl shadow-xl w-full max-w-md p-6 transform transition-all duration-300 scale-95 opacity-0" id="modal-content">
<div class="text-center mb-4">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 mb-4">
<i class="fa-solid fa-exclamation-triangle text-red-500 text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-dark">确认交卷</h3>
<p class="text-gray-600 mt-2">你确定要提交试卷吗？提交后将无法修改答案。</p>
</div>
<div class="flex justify-center space-x-4 mt-6">
<button class="btn-secondary" onclick="closeModal()">
返回考试
</button>
<button class="btn-primary bg-red-600 hover:bg-red-700" onclick="confirmSubmit()">
确认交卷
</button>
</div>
</div>
</div>
<script>
// 模拟考试数据
const examData = {
totalQuestions: 20,
answeredQuestions: new Set(),
markedQuestions: new Set(),
answers: {},
startTime: new Date(),
duration: 120 * 60 * 1000, // 120分钟
endTime: null
};
// 初始化计时器
function initTimer() {
const endTime = new Date(examData.startTime.getTime() + examData.duration);
examData.endTime = endTime;
updateTimer();
setInterval(updateTimer, 1000);
}
// 更新计时器显示
function updateTimer() {
const now = new Date();
const diff = examData.endTime - now;
if (diff <= 0) {
document.getElementById('countdown').textContent = "00:00:00";
submitExam(); // 时间到自动提交
return;
}
const hours = Math.floor(diff / 3600000);
const minutes = Math.floor((diff % 3600000) / 60000);
const seconds = Math.floor((diff % 60000) / 1000);
document.getElementById('countdown').textContent =
`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
// 当剩余时间少于15分钟时，显示为红色
if (diff < 15 * 60 * 1000) {
document.getElementById('countdown').classList.add('text-red-500');
}
}
// 单选题选择
function selectSingleOption(questionNum, option) {
examData.answers[questionNum] = option;
examData.answeredQuestions.add(questionNum);
updateQuestionStatus(questionNum);
// 更新UI显示
const options = document.querySelectorAll(`input[name="question${questionNum}"]`);
options.forEach(opt => {
const parentDiv = opt.closest('.option-item');
if (opt.value === option) {
parentDiv.classList.add('option-item-selected');
} else {
parentDiv.classList.remove('option-item-selected');
}
});
}
// 多选题选择
function selectMultiOption(questionNum, option) {
if (!examData.answers[questionNum]) {
examData.answers[questionNum] = new Set();
}
const checkbox = document.querySelector(`input[name="question${questionNum}"][value="${option}"]`);
const parentDiv = checkbox.closest('.option-item');
if (checkbox.checked) {
examData.answers[questionNum].add(option);
parentDiv.classList.add('option-item-selected');
} else {
examData.answers[questionNum].delete(option);
parentDiv.classList.remove('option-item-selected');
}
// 如果至少选择了一个选项，则标记为已答
if (examData.answers[questionNum].size > 0) {
examData.answeredQuestions.add(questionNum);
} else {
examData.answeredQuestions.delete(questionNum);
}
updateQuestionStatus(questionNum);
}
// 判断题选择
function selectTrueFalse(questionNum, value) {
examData.answers[questionNum] = value;
examData.answeredQuestions.add(questionNum);
updateQuestionStatus(questionNum);
// 更新UI显示
const options = document.querySelectorAll(`input[name="question${questionNum}"]`);
options.forEach(opt => {
const parentDiv = opt.closest('.option-item');
if (opt.value === value) {
parentDiv.classList.add('option-item-selected');
} else {
parentDiv.classList.remove('option-item-selected');
}
});
}
// 文本类答案（案例分析、填空题、作文）
function answerText(questionNum, value, subQuestion = null) {
if (subQuestion) {
// 处理填空题的多个空
if (!examData.answers[questionNum]) {
examData.answers[questionNum] = {};
}
examData.answers[questionNum][subQuestion] = value;
// 检查是否所有空都已填写
let allFilled = true;
const inputs = document.querySelectorAll(`input[type="text"][oninput="answerText(${questionNum}, this.value, \\d+)"]`);
inputs.forEach(input => {
if (!input.value.trim()) {
allFilled = false;
}
});
if (allFilled) {
examData.answeredQuestions.add(questionNum);
} else {
examData.answeredQuestions.delete(questionNum);
}
} else {
// 处理普通文本答案
examData.answers[questionNum] = value;
if (value.trim()) {
examData.answeredQuestions.add(questionNum);
} else {
examData.answeredQuestions.delete(questionNum);
}
}
updateQuestionStatus(questionNum);
// 更新作文字数统计
if (questionNum === 20) {
document.getElementById('word-count').textContent = `${value.length}/1000 字`;
}
}
// 标记题目
function markQuestion(questionNum) {
const markButton = document.querySelector(`.question-card:nth-child(${questionNum}) button`);
if (examData.markedQuestions.has(questionNum)) {
examData.markedQuestions.delete(questionNum);
markButton.innerHTML = '<i class="fa-regular fa-bookmark text-lg"></i>';
markButton.classList.remove('text-yellow-500');
markButton.classList.add('text-gray-400');
} else {
examData.markedQuestions.add(questionNum);
markButton.innerHTML = '<i class="fa-solid fa-bookmark text-lg"></i>';
markButton.classList.remove('text-gray-400');
markButton.classList.add('text-yellow-500');
}
updateQuestionStatus(questionNum);
}
// 更新题目状态
function updateQuestionStatus(questionNum) {
const navItem = document.getElementById(`question-nav-${questionNum}`);
if (examData.markedQuestions.has(questionNum)) {
navItem.classList.remove('bg-gray-200', 'bg-primary');
navItem.classList.add('bg-yellow-500', 'text-white');
} else if (examData.answeredQuestions.has(questionNum)) {
navItem.classList.remove('bg-gray-200', 'bg-yellow-500');
navItem.classList.add('bg-primary', 'text-white');
} else {
navItem.classList.remove('bg-primary', 'bg-yellow-500', 'text-white');
navItem.classList.add('bg-gray-200');
}
// 更新进度条
const answeredCount = examData.answeredQuestions.size;
document.getElementById('progress-text').textContent = `${answeredCount}/${examData.totalQuestions}`;
document.getElementById('progress-bar').style.width = `${(answeredCount / examData.totalQuestions) * 100}%`;
}
// 打开交卷确认模态框
function submitExam() {
document.getElementById('submit-modal').classList.remove('hidden');
setTimeout(() => {
document.getElementById('modal-content').classList.remove('scale-95', 'opacity-0');
document.getElementById('modal-content').classList.add('scale-100', 'opacity-100');
}, 10);
}
// 关闭模态框
function closeModal() {
document.getElementById('modal-content').classList.remove('scale-100', 'opacity-100');
document.getElementById('modal-content').classList.add('scale-95', 'opacity-0');
setTimeout(() => {
document.getElementById('submit-modal').classList.add('hidden');
}, 300);
}
// 确认交卷
function confirmSubmit() {
// 模拟提交答案到服务器
console.log('提交的答案:', examData.answers);
// 显示提交成功消息
document.getElementById('modal-content').innerHTML = `
<div class="text-center mb-4">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4">
<i class="fa-solid fa-check text-green-500 text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-dark">交卷成功</h3>
<p class="text-gray-600 mt-2">你的试卷已成功提交，感谢参与考试！</p>
</div>
<div class="flex justify-center mt-6">
<button class="btn-primary" onclick="window.location.reload()">
返回首页
</button>
</div>
`;
}
// 初始化编辑器（作文题）
function initEditor() {
const editor = document.getElementById('editor');
editor.addEventListener('input', function() {
answerText(20, this.value);
});
}
// 初始化页面
document.addEventListener('DOMContentLoaded', function() {
initTimer();
initEditor();
// 为所有选项添加点击事件
document.querySelectorAll('.option-item').forEach(item => {
item.addEventListener('click', function() {
this.classList.add('option-item-selected');
});
});
});
</script>
</body>
</html>
效果图：
浙公网安备 33010602011771号