hamzaakbar15/flashcard-quiz-app
GitHub: hamzaakbar15/flashcard-quiz-app
一款基于 Node.js/Express 和原生 JavaScript 构建的响应式抽认卡学习与测验 Web 应用，支持卡片的完整 CRUD 管理和多模式自测。
Stars: 1 | Forks: 0
# FlashCard Quiz 应用
一款现代、响应式的 FlashCard Quiz Web 应用程序，用于创建、学习和测试自己的抽认卡。前端使用原生 HTML、CSS 和 JavaScript 构建，后端采用轻量级的 Express/JSON。
## 功能
- **主页** — 应用概述、实时抽认卡数量，以及导航至各种模式。
- **学习模式** — 通过流畅的 3D 翻转动画浏览抽认卡，支持前进/后退、随机洗牌或重新开始。
- **测验模式** — 随机的多项选择题（每题四个选项），提供即时的对错反馈、实时计分以及结果页面（总数、正确数、错误数、百分比、重新开始）。
- **管理抽认卡** — 添加、编辑和删除抽认卡，具备客户端和服务器端验证，同时支持即时创建新分类。
- **分类** — 五个默认分类（编程、历史、科学、地理、综合知识），并支持添加自定义分类。
- **优雅的错误处理** — 无抽认卡时的空状态提示、无效输入的友好提示信息，以及从数据文件丢失或损坏中恢复的能力。
## 技术栈
- Node.js
- Express.js
- HTML5
- CSS3
- 原生 JavaScript（原生 ES 模块，无需构建步骤）
- JSON 文件存储
## 文件夹结构
```
flashcard-quiz-app/
├── data/
│ └── flashcards.json # Flashcard data store
├── docs/
│ └── project.md # Original project spec
├── public/
│ ├── css/
│ │ └── style.css # Design system + all view styles
│ ├── js/
│ │ ├── api.js # Fetch wrapper for the REST API
│ │ ├── app.js # View routing and app bootstrap
│ │ ├── helpers.js # Shared utilities (shuffle)
│ │ ├── manage.js # Manage Flashcards (CRUD) view logic
│ │ ├── quiz.js # Quiz Mode logic
│ │ ├── study.js # Study Mode logic
│ │ └── ui.js # Toast + view-switching helpers
│ └── index.html
├── routes/
│ └── flashcards.js # REST API routes
├── utils/
│ ├── storage.js # JSON file read/write helpers
│ └── validateFlashcard.js # Server-side input validation
├── server.js
├── package.json
└── README.md
```
## 安装说明
1. 确保已安装 [Node.js](https://nodejs.org/)（建议 v16 或更高版本）。
2. 克隆或下载此代码库。
3. 安装依赖：
npm install
## 运行项目
启动服务器：
```
npm start
```
然后在浏览器中打开 [http://localhost:3000](http://localhost:3000)。
服务器默认监听 `3000` 端口，或者监听 `PORT` 环境变量指定的端口。
## API 文档
所有 endpoint 都带有 `/api/flashcards` 前缀，并使用 JSON 交换数据。
| 方法 | Endpoint | 描述 |
|--------|------------------------|----------------------------------|
| GET | `/api/flashcards` | 获取所有抽认卡 |
| POST | `/api/flashcards` | 创建新抽认卡 |
| PUT | `/api/flashcards/:id` | 更新现有抽认卡 |
| DELETE | `/api/flashcards/:id` | 删除抽认卡 |
**抽认卡数据结构：**
```
{
"id": "string",
"question": "string",
"answer": "string",
"category": "string"
}
```
`POST` 和 `PUT` 请求需要在 request body 中包含 `question`、`answer` 和 `category`；缺失或为空的字段将返回 `400` 状态码并附带验证错误列表。请求不存在的抽认卡将返回 `404`。
## 截图
**主页**
**学习模式** — 翻转卡片显示答案
**测验模式** — 答题后的即时反馈
**测验结果**
**管理抽认卡**
## 未来改进
- 在学习模式和测验模式中支持按分类筛选
- 持久化的测验历史记录和长期统计数据
- 以 JSON 格式导入/导出抽认卡组
- 用于管理多个个人卡组的用户账户
## 许可证
MIT
标签：CMS安全, Express, GNU通用公共许可证, JavaScript, MITM代理, Node.js, 自定义脚本