课程：软件开发与创新
作业类型：结对编程实验报告
成员：
-
学号1：2452827
-
学号2：2452833
完成时间：2026-04-06
一、项目背景与开发初衷
-
这个项目是由简单的html,css和js前端三大核心技术完成的，我和组员以结对编程的形式，合作开发了这套驾考宝典在线考试系统。
-
本项目模拟真实驾考理论考试流程，实现了题库展示、在线答题、自动判分、成绩统计、题目新增等完整功
能，既满足了学习实践需求，也打造了一个轻量化、可直接使用的驾考刷题工具。通过本次开发，我们不仅巩固了前端基础知识，更深刻体会到结对编程的协作价值与软件开发的完整流程。
二、算法设计思路
- 数据结构设计
系统核心采用数组 + 对象的结构存储题库数据，每道题目包含统一字段：编号、题干、选项、正确答案、解
析，保证数据规范、易于渲染和校验。
题库数据结构代码
const questions = [{id: 1, // 题目编号title: "机动车驾驶人初次申领驾驶证后的实习期是多长时间？", // 题干options: ["6个月", "12个月", "18个月", "24个月"], // 选项answer: "12个月", // 正确答案explain: "初次申领驾驶证实习期为12个月。 " // 答案解析},// 更多题目...
];
- 页面渲染算法
-
遍历题库数组，动态生成题目卡片与选项；
-
利用Dom操作将题目自动插入页面，无需手动编写大量html；
-
区分单选,多选和判断题型，统一渲染逻辑，提升代码复用性。
- 答题与判分核心算法
-
使用数组记录用户所选答案，与题目编号一一对应；
-
提交试卷时，循环对比用户答案与正确答案；
-
统计正确题数、错误题数，自动计算得分（总分60分，每题计5分）；
-
判分完成后高亮展示答案和题目解析。
- 功能流程设计
-
页面加载 → 自动渲染全部题库
-
用户答题 → 记录答案
-
点击提交 → 系统自动判分
-
展示成绩 → 标注对错 → 显示解析
-
支持重新答题、新增自定义题目扩展功能
三、核心程序代码
- HTML结构代码
点击查看代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>驾考宝典在线考试系统</title><style>/* 样式部分见下方 */</style>
</head>
<body><div class="container"><h1>驾考宝典在线考试系统</h1><div id="score-board" class="score-board">总分：<span id="score">0</span>分 正确：<span id="correct">0</span>题 错误：<span id="wrong">0</span>题</div><div id="questions-container"></div><button onclick="submitExam()" class="submit-btn">提交试卷</button></div><script>// JS 逻辑代码见下方</script>
</body>
</html>- CSS 样式代码
点击查看代码
{margin: 0;padding: 0;box-sizing: border-box;font-family: "Microsoft YaHei", sans-serif;
}body {background-color: #f5f7fa;padding: 20px;
}.container {max-width: 800px;margin: 0 auto;background: white;padding: 30px;border-radius: 12px;box-shadow: 0 0 10px rgba(0,0,0,0.1);
}h1 {text-align: center;color: #2d8cf0;margin-bottom: 20px;
}.score-board {text-align: center;font-size: 18px;margin-bottom: 20px;color: #333;
}.question {margin: 15px 0;padding: 15px;border: 1px solid #eee;border-radius: 8px;
}.question-title {font-size: 16px;font-weight: bold;margin-bottom: 10px;
}.option {margin: 8px 0;cursor: pointer;
}.submit-btn {display: block;width: 200px;height: 45px;background: #2d8cf0;color: white;font-size: 16px;border: none;border-radius: 6px;margin: 30px auto 0;cursor: pointer;
}
- JavaScript 核心逻辑代码
点击查看代码
const questions = [{id: 1,title: "机动车驾驶人初次申领驾驶证后的实习期是多长时间？",options: ["6个月", "12个月", "18个月", "24个月"],answer: "12个月",explain: "初次申领驾驶证实习期为12个月。"},{id: 2,title: "驾驶机动车不按规定避让校车的，一次记多少分？",options: ["1分", "3分", "6分", "12分"],answer: "3分",explain: "不按规定避让校车，一次记3分。"},{id: 3,title: "车辆在拥挤路段低速行驶时，遇其他车辆强行插队，应怎样做？",options: ["鸣喇叭警告，不得进入", "加速行驶，紧跟前车，不让其进入", "主动礼让，确保行车安全", "挤靠“加塞”车辆，逼其离开"],answer: "主动礼让，确保行车安全",explain: "文明驾驶，遇到强行插队应主动礼让。"}
];// 渲染题目到页面
function renderQuestions() {const container = document.getElementById("questions-container");let html = "";questions.forEach(q => {html += `<div class="question" id="q-${q.id}"><div class="question-title">${q.id}. ${q.title}</div><div class="options">`;q.options.forEach(opt => {html += `<div class="option"><input type="radio" name="q-${q.id}" value="${opt}" id="q-${q.id}-${opt}"><label for="q-${q.id}-${opt}">${opt}</label></div>`;});html += `</div><div class="explain" id="explain-${q.id}" style="display:none;margin-top:10px;color:red;"></div></div>`;});container.innerHTML = html;
}// 提交试卷并自动判分
function submitExam() {let correct = 0;let wrong = 0;questions.forEach(q => {const userAnswer = document.querySelector(`input[name="q-${q.id}"]:checked`);const explainDiv = document.getElementById(`explain-${q.id}`);if (!userAnswer) {wrong++;explainDiv.innerText = "未作答！正确答案：" + q.answer + " | " + q.explain;explainDiv.style.display = "block";return;}if (userAnswer.value === q.answer) {correct++;explainDiv.innerText = "回答正确！" + q.explain;explainDiv.style.color = "green";} else {wrong++;explainDiv.innerText = "回答错误！正确答案：" + q.answer + " | " + q.explain;explainDiv.style.color = "red";}explainDiv.style.display = "block";});// 计算总分const totalScore = Math.round((correct / questions.length) * 100);document.getElementById("score").innerText = totalScore;document.getElementById("correct").innerText = correct;document.getElementById("wrong").innerText = wrong;alert("提交成功！您的得分：" + totalScore + "分");
}window.onload = renderQuestions;
四、页面运行结果
- 网页主页面
主页展示网站的三大功能：答题，查看编辑题库，查看历史成绩。
- 答题过程
用户可逐题点击选项进行作答，页面布局清晰，移动端与电脑端均可正常使用。
- 提交试卷与判分结果
点击提交试卷后，系统自动判分，页面会实时显示总分、正确题数以及错误题数，并且在每道题目下方展示对错和官方解析，绿色代表正确，红色代表错误，一目了然。
4.历史成绩查看
用户可以查看历史考试成绩
五、作业体会与结对编程总结
- 技术学习收获
通过本次项目，我们熟练回顾了HTML页面结构搭建与语义化标签使用，CSS 页面美化、布局、盒子模型的实际应用，还有JavaScript是如何通过数组遍历、进行DOM操作进行事件处理和表单取值的完整流程
- 结对编程体会
通过本次结对编程完成驾考在线考试系统的开发，我收获颇丰，在实验中我们重新回顾了HTML，CSS，JavaScript 的基础用法，理解了前端页面渲染、数据处理与交互逻辑的实现流程，真正将课堂知识转化为实际开发能力,结对编程让我们深刻体会到团队协作的重要性，我们分工明确、互相配合，在代码编写、逻辑调试和界面优化中不断沟通，有效减少了错误、提高了效率。遇到难题时，两人共同思考、快速解决，比独自开发更高效。同时，我也认识到自己在代码规范和逻辑设计上的不足。今后我会更加注重代码结构优化与健壮性，提升问题分析能力。这次实践不仅巩固了专业知识，还培养了团队协作意识，为后续软件开发学习奠定了坚实基础。
- 遇到的问题与解决
| 问题 | 解决方法 |
|---|---|
| 无法正确获取用户选中的答案 | 学习使用 querySelector 获取单选框选中值 |
| 判分逻辑出错，统计不准确 | 逐题调试循环逻辑，统一答案对比规则 |
| 页面样式混乱，不够美观 | 使用盒子模型、居中、内边距优化界面效果 |
- 总结与展望
本次驾考系统开发，是我们从理论走向实践的重要一步。我们不仅完成了课程作业，更收获了项目经验与协作能力。系统虽小巧，但功能完整、可直接使用，也为我们后续学习更复杂的前端框架打下基础，未来我们会继续优化功能，增加错题本等模块，不断提升项目完整性与实用性。