在线互动考试系统 - 参赛指南与部署手册
一、项目介绍
项目名称:
智能在线互动考试系统
参赛赛道:
Code-with-SOLO
Hello-AI-科技致善
核心价值:
用 SOLO 从零搭建一个教师减负神器,让老师告别繁琐的出题、阅卷工作,让学生获得即时反馈的学习体验。
二、核心功能演示
教师端功能
Excel 批量导入题目 - 5分钟创建一场考试
一键生成考试链接 - 学生直接访问即可答题
IP 防作弊机制 - 同一 IP 不能重复提交(可选)
实时数据看板
每题正确率柱状图
成绩分布饼图
错误学生名单
学校→年级→班级三级筛选
学情分析报告
班级平均分
知识点掌握度
学生排名
学生端功能
快速入场 - 输入学校、年级、班级、姓名
流畅答题 - 支持单选/判断题
即时反馈 - 提交后立即显示正确率
错题解析 - 每一道错题都有详细解析
响应式设计 - 手机、平板、电脑都能用
三、解决的实际问题
痛点 解决方案 效果
出题耗时 Excel 一键导入 效率提升 80%
手工阅卷 系统自动批改 零负担
学情不透明 数据看板可视化 一目了然
学生无反馈 即时显示结果 学习闭环
纸质试卷浪费 纯在线答题 环保高效
四、技术架构
前端技术栈:
React 18 + TypeScript + Vite
├── 状态管理: React Hooks (useState, useEffect)
├── 路由: React Router v6
├── 样式: Tailwind CSS
├── 图表: Chart.js + react-chartjs-2
├── 图标: Lucide React
└── 构建工具: Vite
后端技术栈:
Express.js + SQLite
├── API 设计: RESTful
├── 数据库: SQLite (轻量、零配置)
├── 文件解析: XLSX (Excel 导入)
└── 安全: CORS 跨域 + IP 记录
数据模型:
1.exams 表
id: 试卷ID
title: 试卷标题
questions: 题目JSON
created_at: 创建时间
ip_restricted: IP限制开关
2.student_answers 表
exam_id: 试卷ID
school/grade/class/name: 学生信息
question_num: 题号
student_answer: 学生答案
correct_answer: 正确答案
is_correct: 是否正确
submitted_at: 提交时间
ip_address: IP地址
五、快速部署
方式一:一键部署(推荐)
1. 克隆项目
git clone <你的GitHub仓库地址>
cd online-exam-system
2. 一键部署
chmod +x deploy.sh
./deploy.sh
3. 访问
前端: http://localhost:5173
管理后台: http://localhost:5173/admin
方式二:手动部署
1. 安装依赖
npm install
2. 启动开发服务器
npm run dev
3. 或构建生产版本
npm run build
npm start
1. 安装依赖
npm install
2. 启动开发服务器
npm run dev
3. 或构建生产版本
npm run build
npm start
方式三:云服务器部署
方式三:云服务器部署
1.购买云服务器(阿里云/腾讯云/华为云)
2.安装 Node.js 18+
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs
3.上传项目文件
scp -r ./online-exam-system root@你的服务器IP:/var/www/
4.安装并启动
cd /var/www/online-exam-system
npm install --production
npm start
5.配置 Nginx 反向代理(可选)
六、使用教程
教师端操作流程
Step 1: 创建试卷
访问 http://localhost:5173/admin
点击"上传 Excel"按钮
选择准备好的题目文件(参考 题目模板.xlsx)
填写试卷标题
点击"创建试卷"
Step 2: 分发考试
在试卷列表找到刚创建的试卷
点击"学生端"按钮获取访问地址
将链接分享给学生
Step 3: 查看数据
点击"数据看板"
选择要查看的试卷
使用筛选功能查看不同班级数据
分析正确率图表和错误学生名单
学生端操作流程
Step 1: 填写信息
访问老师提供的考试链接
填写学校、年级、班级、姓名
Step 2: 答题
阅读题目,选择答案
点击"下一题"继续
完成所有题目后点击"提交"
Step 3: 查看结果
系统显示正确率
错题高亮显示
每道错题都有详细解析
七、Excel 题目模板
我已经为你准备了示例模板文件:题目模板.xlsx
模板格式说明:
列名 说明 示例
题号 题目序号 1, 2, 3…
题目 题目内容 下列哪个是JavaScript的数据类型?
选项A-D 四个选项 String, Number, Boolean, Object
正确答案 正确选项 A/B/C/D
解析 答案解析 JavaScript有string、number等数据类型
注意事项:
第一行必须为表头
题目数量不限
支持中英文题目
选项必须填写完整
八、界面预览
管理后台
数据看板:柱状图 + 饼图 + 数据表格
试卷管理:上传、创建、删除试卷
学情分析:班级排名、知识点分析
学生端
简洁表单:学校、年级、班级、姓名
清晰题面:选项对齐、高亮选中
即时反馈:正确率 + 错题解析
九、致谢
感谢 SOLO 平台,让我这样的非程序员也能快速搭建实用工具!
通过这次开发,我深刻体会到:
AI 编程工具大大降低了技术门槛
好的工具应该解决实际问题
从需求出发,用技术赋能教育
十、项目地址
GitHub: https://github.com/laozhouzhouzhou/onlinetest
使用方法: git clone https://github.com/laozhouzhouzhou/onlinetest.git && npm install && npm run dev
开发者: laozhou
十一、联系方式
如果你有任何问题或建议,欢迎:
在评论区留言
发邮件:2456487813@qq.com
许可证
本项目采用 MIT 许可证,可以自由使用、修改和分发。