🧮 数量关系训练系统
一个专为行政能力测试设计的数量关系训练项目,帮助用户提升速算能力,轻松应对公务员考试中的数量关系题目。
🌟 项目特色
- 🤖 智能出题: 集成Qwen AI,自动生成高质量的数学计算题
- ⚡ 实时反馈: 答对自动跳转下一题,答错清空输入并提示
- 🎯 难度递进: 根据题目进度自动调整难度等级
- 📊 数据统计: 实时显示正确率、用时等关键指标
- 🎨 美观界面: 绿色白色主题,简洁现代的设计风格
- 📱 响应式: 完美适配桌面端和移动端设备
✨ 功能特性
🎯 核心功能
- 智能题目生成: 使用Qwen AI生成1-4位数的加减乘除运算题
- 自适应难度: 根据答题进度自动调整题目难度
- 实时验证: 答案正确自动跳转,错误时清空输入重新作答
- 进度跟踪: 显示当前题号、正确率、用时等统计信息
- 完整流程: 开始训练 → 答题练习 → 结果统计的完整体验
📊 统计功能
- 实时统计: 题目编号、正确率、用时显示
- 结果报告: 训练结束后显示详细的成绩统计
- 性能分析: 帮助用户了解自己的计算能力水平
🎨 界面设计
- 绿色主题: 护眼的绿色和白色配色方案
- 现代设计: 圆角卡片、渐变按钮、流畅动画
- 用户友好: 清晰的视觉层次和直观的操作流程
🛠️ 技术栈
- 前端: HTML5 + CSS3 + JavaScript (ES6+)
- AI服务: Qwen API
- 设计: 响应式布局 + CSS Grid/Flexbox
- 动画: CSS3 Transitions & Animations
📦 项目结构
math-training/
├── index.html # 主页面文件
├── style.css # 样式文件
├── script.js # 功能脚本
└── README.md # 项目说明
🚀 快速开始
1. 环境准备
- 现代浏览器(Chrome 80+, Firefox 75+, Safari 13+, Edge 80+)
- 网络连接(用于AI API调用)
2. API配置
- 注册Qwen账号并获取API密钥
- 在
script.js文件中替换API密钥:
const CONFIG = {
API_KEY: 'your-Qwen-api-key-here', // 替换为您的API密钥
// ...
};
3. 运行项目
- 下载项目文件到本地
- 在浏览器中打开
index.html文件 - 开始使用训练系统
🎨 界面说明
🏠 欢迎界面
- 项目介绍和功能特色展示
- 开始训练的入口按钮
- 简洁的功能特性说明
🔧 功能按钮
- 开始训练: 开始新的训练会话
- 提交答案: 提交当前题目的答案
- 下一题: 跳转到下一道题目
- 退出训练: 提前结束训练并查看结果
- 重新开始: 开始新一轮训练
- 返回首页: 回到欢迎界面
📝 训练界面
- 统计栏: 显示题目编号、正确率、用时
- 题目卡片: 显示当前数学题目
- 答题区: 输入答案和提交按钮
- 反馈区: 显示答题结果和提示信息
- 控制区: 下一题和退出训练按钮
⚡ 答题流程
- 答对: 显示正确提示,自动启用"下一题"按钮
- 答错: 显示错误提示和正确答案,清空输入框重新作答
- 跳过: 可以点击"下一题"按钮跳过当前题目
📊 查看统计
- 实时统计: 页面顶部显示当前进度和正确率
- 最终报告: 完成训练后查看详细的成绩统计
📚 使用说明 -部分
⚙️ 配置说明
🔧 基础配置
const CONFIG = {
API_KEY: 'your-api-key', // Qwen API密钥
API_URL: 'https://api.Qwen.com/chat/completions',
MAX_QUESTIONS: 20, // 最大题目数量
DIFFICULTY_LEVELS: { // 难度等级设置
EASY: { min: 1, max: 99 }, // 简单:1-2位数
MEDIUM: { min: 10, max: 999 }, // 中等:2-3位数
HARD: { min: 100, max: 9999 } // 困难:3-4位数
}
};
📈 难度调节
- 1-5题: 简单难度(1-2位数)
- 6-15题: 中等难度(2-3位数)
- 16-20题: 困难难度(3-4位数)
🔧 技术实现
🏗️ 架构设计
- TrainingState: 状态管理类,处理训练进度和统计
- QuestionGenerator: 题目生成器,集成AI和本地生成
- UIManager: 界面管理器,处理页面显示和交互
- MathTrainingApp: 主应用类,协调各个模块
🤖 AI集成
- 使用Qwen API生成高质量数学题目
- 智能解析AI响应,提取题目和答案
- 本地备用生成器,确保系统稳定性
📱 响应式设计
- CSS Grid和Flexbox布局
- 移动端优化的触摸交互
- 自适应的字体和间距
🚀 扩展功能
💡 可扩展特性
- 题型扩展: 添加更多数学运算类型
- 难度定制: 用户自定义难度等级
- 成绩保存: 本地存储历史成绩
- 排行榜: 添加成绩排名功能
- 主题切换: 多种颜色主题选择
🔧 开发建议
- 性能优化: 实现题目预加载机制
- 错误处理: 完善网络异常处理
- 用户体验: 添加音效和动画反馈
- 数据分析: 详细的答题时间分析
📱 浏览器支持
- ✅ Chrome 80+
- ✅ Firefox 75+
- ✅ Safari 13+
- ✅ Edge 80+
- ❌ Internet Explorer(不支持)
❓ 常见问题
Q: AI生成题目失败怎么办?
A: 系统会自动切换到本地生成模式,确保训练正常进行。请检查:
- API密钥是否正确
- 网络连接是否正常
- API额度是否充足
Q: 如何调整题目难度?
A: 修改 script.js 中的 DIFFICULTY_LEVELS 配置,或调整难度切换的题目数量。
Q: 可以自定义题目数量吗?
A: 修改 CONFIG.MAX_QUESTIONS 的值即可调整最大题目数量。
Q: 如何添加新的运算类型?
A: 在 QuestionGenerator 类中的 operations 数组添加新运算符,并在相应的计算方法中添加处理逻辑。
🙏 致谢
- Qwen - 提供优秀的AI语言模型服务
- 所有贡献者和用户的宝贵建议和支持
⭐ 如果这个项目对你有帮助,请给它一个星标!
🎯 助力公考成功,从提升数量关系能力开始!