结对编程实验博客随笔（英语在线考试系统）

一、实验背景与目的
本次实验为结对编程实践，我们以HTML/CSS/JavaScript为技术栈，合作开发了一个完整的英语在线考试系统，实现了从考生信息录入、在线答题、倒计时控制到成绩统计与错题分析的全流程功能。
实验目标：
1.掌握前端页面开发、表单验证、交互逻辑实现的核心技术；
2.实践结对编程流程：分工协作、代码审核、角色互换，提升团队协作能力；
3.完成系统功能的全流程测试，确保考试流程稳定、数据统计准确。
二、结对分工与开发流程
1. 结对分工（角色互换模式）

阶段 角色 A（编码者） 角色 B（审核者） 交付物
需求分析与方案设计 梳理考试系统核心流程，设计页面结构与功能模块 审核需求完整性，提出优化建议（如增加表单验证、错题导出功能） 功能模块清单、页面原型
前端页面开发 编写 HTML 结构、CSS 样式，实现三页面布局（开始 / 考试 / 结果页） 审核代码规范性、响应式设计兼容性，提出样式优化建议 静态页面文件（index.html + style.css）
交互逻辑开发 编写 JavaScript 核心逻辑：表单验证、题目渲染、倒计时、答题控制 审核逻辑健壮性，提出边界情况处理方案（如超时自动交卷、答案多选校验） 动态交互脚本（script.js）
测试与调试 完成系统全流程测试，修复功能 bug 交叉测试功能模块，验证数据准确性，补充测试用例 测试报告、bug 修复记录
优化与完善 根据审核意见优化代码结构、完善功能细节 二次审核优化后的代码，确认功能达标 最终版完整代码
  1. 开发时间线
    1.第 1-2 天：需求分析与方案设计，确定技术栈与功能模块，完成页面原型规划；
    2.第 3-4 天：开发静态页面，实现三页面布局与基础样式，完成响应式适配；
    3.第 5-6 天：开发核心交互逻辑，实现表单验证、题目渲染、倒计时、答题控制等功能；
    4.第 7 天：系统测试与 bug 修复，优化代码结构，补充错题导出、排名统计等功能；
    5.第 8 天：结对审核与角色互换，完善代码注释，整理实验文档与博客随笔。
    三、系统功能设计与实现
  2. 核心功能模块
    （1）开始页面：考生信息录入与表单验证
    ·实现功能：姓名 / 班级 / 学号录入，表单实时验证（姓名仅中英文字符、学号仅数字），提交校验；
    ·关键代码：
    function validateName(input) {
    const name = input.value;
    const nameError = document.getElementById('name-error');
    const nameRegex = /[1]+$/;
    if (name && !nameRegex.test(name)) {
    nameError.textContent = '姓名只能包含中文和英文，不能有特殊符号或数字';
    nameError.style.color = '#d32f2f';
    input.style.borderColor = '#d32f2f';
    return false;
    } else {
    nameError.textContent = '';
    input.style.borderColor = '#e3f2fd';
    return true;
    }
    }
    （2）考试页面：在线答题与实时控制
    ·实现功能：题目导航栏（45 题分题型展示）、倒计时（15 分钟超时自动交卷）、上一题 / 下一题切换、单选 / 多选 / 判断题答题逻辑；
    ·关键代码：
    function showQuestion(index) {
    currentQuestion = index;
    const question = examData.questions[index];
    // 更新题目导航状态
    updateQuestionNav();
    // 生成题目内容HTML
    let questionHTML = <div class="question"> <div class="question-type-badge ${question.type}">${typeText}</div> <h4>${question.id}. ${question.question}</h4> <div class="options"> ;
    // 根据题型渲染选项（单选/多选/判断）
    // 绑定选项事件，记录用户答案
    bindOptionEvents();
    }
    （3）结果页面：成绩统计与错题分析
    ·实现功能：最终得分展示、答题用时统计、历史排名、总正确率 / 题型正确率图表（Chart.js 实现）、错题列表展示、成绩导出 CSV、重做试卷；
    ·关键代码：
    function calculateScore() {
    let score = 0;
    const wrongQuestions = [];
    const typeStats = {
    single: { total: 0, correct: 0 },
    multiple: { total: 0, correct: 0 },
    judgment: { total: 0, correct: 0 }
    };
    examData.questions.forEach(question => {
    typeStats[question.type].total++;
    const userAnswer = answers[question.id];
    const isCorrect = checkAnswer(userAnswer, question.answer);
    if (isCorrect) {
    score += question.score;
    typeStats[question.type].correct++;
    } else {
    wrongQuestions.push({ question, userAnswer });
    }
    });
    return { score, wrongQuestions, typeStats, ... };
    }
  3. 技术实现亮点
    ·多题型支持：兼容单选题（2 分）、多选题（3 分）、判断题（2 分）三种题型，实现不同答题逻辑；
    ·实时交互反馈：题目导航栏实时更新 “已答 / 未答 / 当前” 状态，倒计时动态显示，选项选中即时记录；
    ·数据可视化：使用 Chart.js 实现总正确率（环形图）、题型正确率（环形图）图表，直观展示答题情况；
    ·数据持久化：通过 localStorage 存储历史考试记录，实现排名统计功能；
    ·导出功能：支持将成绩导出为 CSV 文件，方便后续存档与分析；
    ·响应式设计：适配 PC / 移动端不同屏幕尺寸，保证多设备使用体验。
    四、系统测试与运行结果
    1.测试用例
测试场景 测试内容 预期结果 实际结果
表单验证 输入含特殊字符的姓名、含字母的学号 提示错误，无法提交 ✅ 符合预期
答题流程 正常答题、切换题目、提交试卷 题目状态更新正常，提交后跳转结果页 ✅ 符合预期
超时控制 等待 15 分钟不答题 自动交卷并跳转结果页 ✅ 符合预期
成绩统计 全对 / 全错 / 部分答对 得分、正确率、错题列表计算准确 ✅ 符合预期
数据导出 点击 “导出成绩” 按钮 下载 CSV 文件，包含姓名 / 班级 / 学号 / 得分 / 用时 ✅ 符合预期

2. 运行结果截图
1)开始页面：考生信息录入界面，含表单验证提示；
image
2)考试页面：题目导航栏 + 答题区，倒计时动态显示；
image
3)结果页面：得分统计、正确率图表、错题列表展示；
image
4)错题详情：显示用户答案与正确答案对比及解析。
image
五、结对编程实验体会
1. 协作收获
1）分工协作效率提升：通过 “编码者 + 审核者” 的模式，避免了单人开发的思维盲区，代码错误率显著降低，开发效率比单人开发提升约 30%；
2)角色互换的成长：两次角色互换让我们既体验了快速实现功能的编码过程，也学会了从全局视角审核代码的规范性、健壮性，理解了 “写代码” 和 “审代码” 的双重思维；
3)沟通与问题解决：在功能分歧（如多选答案校验逻辑、错题展示方式）中，通过讨论快速达成共识，学会了如何清晰表达需求、如何高效反馈修改意见；
4)代码质量提升：审核者提出的边界情况处理（如未答题提交、答案为空校验）、代码结构优化建议，让系统的健壮性和可维护性大幅提升。
2. 遇到的问题与解决

问题描述 解决过程
多选题答案校验逻辑错误，部分正确答案判定为错误 结对讨论发现：原代码未对用户答案数组和正确答案数组进行排序比较，修改为排序后再对比，解决问题
倒计时结束后未自动交卷 审核者发现倒计时回调中未调用 submitExam () 函数，补充后实现超时自动交卷
错题列表中用户答案与正确答案显示混乱 结对梳理错题渲染逻辑，明确不同题型的答案对比方式，修复显示问题

3. 个人总结
本次结对编程实验让我深刻体会到，软件开发从来不是 “一个人的战斗”。编码者专注实现功能，审核者把控方向和质量，这种模式不仅能减少错误，更能通过思维碰撞优化方案。角色互换让我跳出了单一视角，既学会了高效编码，也理解了如何从全局和用户视角审核系统。
未来的开发中，我会继续践行结对编程的理念，在团队协作中主动沟通、互相审核，同时也会更加注重代码的健壮性和用户体验，避免单人开发的思维盲区。

六、实验代码（核心片段）

1. index.html（页面结构）
`

英语在线考试系统
` ****2. style.css（核心样式）****

{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
min-height: 100vh;
color: #333;
}
/* 页面切换样式 /
.page { display: none; min-height: 100vh; padding: 20px 0; }
.page.active { display: block; animation: fadeIn 0.5s ease-out; }
/ 按钮、表单、题目导航等样式省略 /
3. script.js（核心逻辑）
// 全局变量
let currentQuestion = 0;
let answers = {};
let startTime = 0;
let countdownInterval = null;
// 题目数据
const examData = { questions: [/ 45道题目数据省略 */] };
// 初始化页面
function init() {
// 绑定事件：上一题/下一题/交卷/导出/重做等
}
// 表单验证、题目渲染、倒计时、成绩计算等函数省略
七、博客随笔补充说明
参与结对的两位同学学号：2452533（编码者）、2452530（审核者）；

  1. \u4e00-\u9fa5a-zA-Z ↩︎

posted @ 2026-04-21 22:09  云泽～～  阅读(5)  评论(0)    收藏  举报