【VibeCoding】玄学求上岸?资料分析?数量关系?再也难不倒我!

330 阅读6分钟

🧮 数量关系训练系统

一个专为行政能力测试设计的数量关系训练项目,帮助用户提升速算能力,轻松应对公务员考试中的数量关系题目。

🌟 项目特色

  • 🤖 智能出题: 集成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配置

  1. 注册Qwen账号并获取API密钥
  2. script.js 文件中替换API密钥:
const CONFIG = {
    API_KEY: 'your-Qwen-api-key-here', // 替换为您的API密钥
    // ...
};

3. 运行项目

  1. 下载项目文件到本地
  2. 在浏览器中打开 index.html 文件
  3. 开始使用训练系统

🎨 界面说明

🏠 欢迎界面

  • 项目介绍和功能特色展示
  • 开始训练的入口按钮
  • 简洁的功能特性说明

页面预览

🔧 功能按钮

  • 开始训练: 开始新的训练会话
  • 提交答案: 提交当前题目的答案
  • 下一题: 跳转到下一道题目
  • 退出训练: 提前结束训练并查看结果
  • 重新开始: 开始新一轮训练
  • 返回首页: 回到欢迎界面

选位数

调用AI生成随机题目

📝 训练界面

  • 统计栏: 显示题目编号、正确率、用时
  • 题目卡片: 显示当前数学题目
  • 答题区: 输入答案和提交按钮
  • 反馈区: 显示答题结果和提示信息
  • 控制区: 下一题和退出训练按钮

答题页面

⚡ 答题流程

  • 答对: 显示正确提示,自动启用"下一题"按钮
  • 答错: 显示错误提示和正确答案,清空输入框重新作答
  • 跳过: 可以点击"下一题"按钮跳过当前题目

回答正确

回答错误

查看答案

📊 查看统计

  • 实时统计: 页面顶部显示当前进度和正确率
  • 最终报告: 完成训练后查看详细的成绩统计

统计页面

📚 使用说明 -部分

使用说明

⚙️ 配置说明

🔧 基础配置

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布局
  • 移动端优化的触摸交互
  • 自适应的字体和间距

🚀 扩展功能

💡 可扩展特性

  • 题型扩展: 添加更多数学运算类型
  • 难度定制: 用户自定义难度等级
  • 成绩保存: 本地存储历史成绩
  • 排行榜: 添加成绩排名功能
  • 主题切换: 多种颜色主题选择

🔧 开发建议

  1. 性能优化: 实现题目预加载机制
  2. 错误处理: 完善网络异常处理
  3. 用户体验: 添加音效和动画反馈
  4. 数据分析: 详细的答题时间分析

📱 浏览器支持

  • ✅ 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语言模型服务
  • 所有贡献者和用户的宝贵建议和支持

如果这个项目对你有帮助,请给它一个星标!

🎯 助力公考成功,从提升数量关系能力开始!