# form-example

**Repository Path**: yldj-it/form-example

## Basic Information

- **Project Name**: form-example
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-09
- **Last Updated**: 2026-07-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 📡 科技节 · 编码探险闯关 - 数据统计系统

## 📋 项目概述

基于原有做题页面，开发配套的数据统计系统，实现答题数据收集、班级筛选和可视化看板功能。

---

## ✨ 功能特性

### 做题页面
- 学生填写姓名、学号、班级后答题
- 支持单选、判断、填空三种题型
- 提交后自动判分并保存到数据库
- 提交成功后显示状态提示
- 无登录要求，直接使用

### 数据看板
- **班级筛选**：顶部下拉框选择班级，所有统计数据自动按班级筛选
- **概览统计**：提交人数、平均分、最高分、总正确率
- **班级统计**：各班级独立卡片，显示提交人数、平均分、最高分、正确率
- **题目正确率**：柱状图展示10道题的答对率，颜色标识高低
- **学生成绩列表**：支持按姓名/学号搜索，显示详细成绩和正确率

---

## 🏗️ 技术架构

| 组件 | 技术选型 | 说明 |
|------|----------|------|
| 后端框架 | Express | 轻量高效的 Node.js 框架 |
| 数据库 | SQLite (sql.js) | 纯 JS 实现，无需编译原生模块 |
| 前端图表 | Chart.js | 轻量级图表库，柱状图展示 |
| 样式 | 内联 CSS | 与原页面风格统一 |

---

## 📁 项目结构

```
form-example/
├── README.md              # 项目说明文档
├── PLAN.md                # 开发计划文档
├── package.json           # 依赖配置
├── server.js              # Node.js 主服务
├── database/
│   └── db.js              # SQLite 数据库层
├── public/
│   ├── index.html         # 做题页面
│   └── dashboard.html     # 数据看板页面
└── data/
    └── exam.db            # SQLite 数据库文件（自动生成）
```

---

## 🚀 快速开始

### 环境要求
- Node.js >= 14.0.0
- npm >= 6.0.0

### 安装步骤

```bash
# 1. 进入项目目录
cd D:\phpstudy_pro\WWW\form-example

# 2. 安装依赖
npm install

# 3. 启动服务
npm start
```

### 访问地址

启动后会自动显示访问地址：

```
📡 服务器已启动
────────────────────────────────────────
本机访问:   http://localhost:3000
局域网访问: http://192.168.x.x:3000
────────────────────────────────────────
做题页面:   http://192.168.x.x:3000/index.html
数据看板:   http://192.168.x.x:3000/dashboard.html
```

---

## 📊 数据库设计

### students 表（学生提交记录）

| 字段 | 类型 | 说明 |
|------|------|------|
| id | INTEGER | 主键自增 |
| name | TEXT | 学生姓名 |
| student_id | TEXT | 学号 |
| class_name | TEXT | 班级（x2201-x2207） |
| total_score | INTEGER | 总分（0-100） |
| correct_count | INTEGER | 答对题数（0-10） |
| submit_time | DATETIME | 提交时间 |

### answers 表（每题答题详情）

| 字段 | 类型 | 说明 |
|------|------|------|
| id | INTEGER | 主键自增 |
| student_id | TEXT | 学号（关联） |
| question_id | INTEGER | 题号（1-10） |
| user_answer | TEXT | 学生答案 |
| is_correct | INTEGER | 是否正确（0/1） |

---

## 🔌 API 接口

| 方法 | 路径 | 说明 | 参数 |
|------|------|------|------|
| POST | /api/submit | 提交答题结果 | Body: {studentInfo, answers} |
| GET | /api/stats/overview | 获取概览统计 | ?className=xxx（可选） |
| GET | /api/stats/class | 获取班级统计 | 无 |
| GET | /api/stats/question | 获取题目统计 | ?className=xxx（可选） |
| GET | /api/students | 获取学生列表 | ?className=xxx（可选） |

### API 响应格式

```json
{
  "success": true,
  "data": { ... }
}
```

---

## 📱 使用说明

### 学生端（做题页面）
1. 打开做题页面 http://localhost:3000
2. 填写姓名、学号、选择班级
3. 完成10道题目
4. 点击"提交 · 立即判分"按钮
5. 查看得分和正确答案

### 管理端（数据看板）
1. 打开数据看板 http://localhost:3000/dashboard.html
2. 使用顶部班级筛选器选择班级（可选）
3. 查看概览统计、班级统计、题目正确率
4. 在学生成绩列表中搜索特定学生

---

## 🔧 配置说明

### 修改端口

编辑 `server.js` 文件，修改 `PORT` 常量：

```javascript
const PORT = 3000;  // 修改为其他端口
```

### 修改班级列表

编辑 `public/index.html` 和 `public/dashboard.html`，修改班级下拉框选项：

```html
<option value="x2201">x2201</option>
<option value="x2202">x2202</option>
<!-- 添加更多班级 -->
```

---

## 📈 开发进度

| 阶段 | 功能 | 状态 |
|------|------|------|
| 项目初始化 | package.json、依赖安装 | ✅ 完成 |
| 数据库层 | SQLite 数据库设计与初始化 | ✅ 完成 |
| 后端 API | Express 服务 + RESTful API | ✅ 完成 |
| 做题页面 | 添加 API 提交功能 | ✅ 完成 |
| 数据看板 | 可视化统计展示 | ✅ 完成 |
| 功能增强 | 班级筛选、最高分统计 | ✅ 完成 |
| 局域网支持 | 监听 0.0.0.0 | ✅ 完成 |

---

## 📝 更新日志

### v1.1.0（2026-07-09）
- 移除做题页面的看板链接，学生无法直接跳转
- 数据看板增加班级筛选功能，影响所有统计数据
- 新增最高分统计，概览和班级卡片均显示
- 服务器启动时自动显示局域网访问地址

### v1.0.0（2026-07-09）
- 初始版本发布
- 做题页面改造，支持数据提交
- 数据看板页面，可视化统计展示
- SQLite 数据库存储

---

## 📄 许可证

MIT License

---

**最后更新**: 2026-07-09