任务
根据我给出的一个学习主题，直接创建一个完整、可运行的个人学习网站。 学习主题
- 【填写，例如：金融投资 / Python / 人工智能 / 日语】 重要
- 这个主题是在“开发网站之前”给你的。
- 你需要先生成这个主题的完整课程内容，再开发网站。
- 网站运行以后不需要自己调用 AI，也不要再让用户输入主题动态生成课程。
- 不要使用通用模板填充课程。
- 不要出现“本节将介绍……这是学习中的重要内容”这种空洞占位文本。
- 最终交付一个真正可以学习的网站，而不是课程生成器 Demo。
先生成完整课程内容
开发网页之前，先完成课程设计。 默认
- 4～6 个章节
- 每章 2～4 节
- 总计约 12～20 节
- 每节 2～3 个核心知识点
- 每节约 8～15 分钟 课程按照
- 基础 → 原理 → 应用 → 综合
- 逐步推进。
- 如果支持联网，优先参考：
- 官方资料、大学课程、专业教材、权威机构。
- 要求每一节都是真实、具体、可学习的内容。 禁止
- 占位文字
- 模板化套话
- 只有标题没有正文
- 只有第一节完整、后面全部敷衍
- 在开始写网页之前，先确保所有章节和课程内容已经生成完整。
每节课程结构
每节必须包含
- 学习目标
- 核心知识讲解
- 实际案例
- 常见误区
- 必要的教学图示
- 3～5 道练习题
- 主要学习内容默认直接展示。
- 不要把正文隐藏进“展开详情”“查看更多”或折叠面板。
- 只有参考资料可以折叠。
所有题目只能是四选一
这是最高优先级规则。 整个网站所有
- 课前回顾
- 单节练习
- 章节测试
- 错题重练
- 今日复习 全部只能使用
- A / B / C / D 四选一单项选择题。 绝对禁止
- 填空题
- 问答题
- 简答题
- 文本输入答题
- textarea
- “输入你的答案”
- “用自己的话解释”
- “写下你的理解”
- 即使是公式题、计算题，也必须改造成四个可点击答案。
- 每一节必须存在 3～5 道题，不允许空题库。 每题必须
- 4 个选项
- 只有一个明确正确答案
- 有简短答案解析
统一练习逻辑
全站所有练习复用同一套题目组件和逻辑。 固定流程
- 显示题目
- →
- 用户点击 A/B/C/D
- →
- 立即判断正确或错误
- →
- 显示正确答案和简短解析
- →
- 显示“下一题”
- →
- 进入下一题
- →
- 最后一题显示“完成练习” 禁止出现
- 点击答案没有反应
- 答完以后没有下一题
- 下一题点击无效
- 题号改变但题目不变
- 最后一题无法完成
- 切换课程以后继承上一节题目状态
- 每节课程单独保存自己的练习进度。
图文并茂
不要制作纯文字教材。 如果知识存在
- 流程
- 层级
- 分类
- 对比
- 因果
- 时间变化
- 数值变化
- 知识关系
- 请加入清晰的教学图示。 可使用
- SVG
- HTML + CSS
- Mermaid 例如
- 复利 → 增长曲线
- 资产配置 → 结构图
- 程序运行 → 流程图
- AI 模型 → 架构关系图
- 历史 → 时间轴
- 每节最多 1～2 张图。
- 图必须真正帮助理解。
- 不要生成巨大脑图、复杂连线或大量装饰图。
- 手机端图示必须可以正常阅读，不能溢出页面。
网站功能
只实现真正需要的功能：
- 首页
- 课程
- 学习
- 复习
- 知识地图
- 错题本
- 学习数据 首页突出
- 继续学习
- 今日复习
- 学习进度
- 薄弱知识
- 所有错题自动保存。
- 错题重新练习时仍然使用四选一选择题。
- 复习根据用户过去的答题情况安排，不需要展示复杂算法。
UI
UI 是核心要求。 整体风格
- 简洁、现代、高级、大气、克制、适合长时间阅读。 不要做成
- 后台管理系统
- 在线考试网站
- 儿童学习网站
- 廉价 AI Demo
- 赛博朋克
- 满屏渐变
- 大量 Emoji
- 巨大的空白卡片 推荐
- 暖灰白背景
-
- 白色内容区域
-
- 低饱和靛蓝作为主色。 桌面端
- 左侧导航，
- 主内容必须在剩余空间真正居中。
- 正文宽度控制在舒适阅读范围。 禁止
- 内容全部挤在左侧，
- 右边留下大片无意义空白。
- 学习页面应该更像高级数字教材，而不是表单。
移动端
必须真正适配手机。 小于 768px 时：
- 隐藏桌面左侧导航
- 使用顶部 Header 底部导航：首页 / 课程 / 复习 / 我的
- 内容改单列
- 左右留白约 16px
- 禁止横向滚动
- 图示自动适配
- 四个答案整行可点击
- 按钮适合手指操作 移动端不能只是把桌面页面缩小。
技术实现
为了生成快、稳定、方便分享： 优先使用
- HTML + CSS + JavaScript 可以生成
- index.html 或者
- index.html
- style.css
- app.js
- 不要默认引入复杂框架、后端或数据库。
- 使用 localStorage 保存：
- 学习进度
- 答题记录
- 错题
- 复习状态
- 课程完成状态
- 刷新以后不能丢失。
页面导航
使用简单可靠的 hash 路由。 例如
- #home
- #courses
- #lesson/ch1-sec2
- #review
- #wrong
- #data
- 点击导航时必须同步更新 URL hash。
- 页面初始化时根据当前 hash 恢复正确页面。
- 监听 hashchange。 保证
- 浏览器后退正常
- 浏览器前进正常
- 刷新后仍停留在当前页面
- 直接打开带 hash 的地址能够进入对应页面
- 移动端菜单按钮必须真实绑定点击事件并测试。
数据规则
课程内容必须保存为结构化数据。 每一节必须真正拥有自己的：
- 标题
- 学习目标
- 正文
- 案例
- 图示
- 选择题 禁止使用一段通用函数通过替换主题名称生成几十节模板课程。 如果一节课程没有完整内容： 不要创建这一节。 宁可课程少一点，也不要生成大量废话内容。 用户过去的成绩需要保留。 重新练习时
- 不要覆盖历史最好成绩。 可以同时记录
- 最近成绩
- 最佳成绩 错题重练中
- 某道原错题重新答对后，应更新该错题的掌握状态。
- 只有用户真正完成复习后，才更新 lastReviewDate。
- 不要在只是打开复习页面时更新。
完成前测试
完成后至少真实检查
- 所有课程都有真实内容
- 没有模板占位课程
- 每节都有选择题
- 全站没有填空题和文本答题框
- 点击答案正常
- 下一题正常
- 最后一题可以完成
- 错题可以保存和重新练习
- 刷新后进度仍存在
- 浏览器前进 / 后退导航正常
- 移动端菜单可以点击
- 手机端没有横向滚动
- 教学图示正常显示
- 桌面端内容真正居中
- 发现问题直接修复。
- 如果当前环境无法自动打开浏览器：
- 不要因此停止任务。
- 请启动可用的本地服务器，并告诉我访问地址和运行方式，由我手动打开测试。
- 最终交付
- 最终必须交付一个真正可运行、内容完整的学习网站。 优先保证
- 课程内容质量
- 练习可靠性
- 学习体验
- UI
- 额外功能
- 不要为了增加功能牺牲课程质量。 完成后只简要告诉我
- 项目位置
- 如何运行
- 章节数量
- 课程数量
- 练习题数量
- 主要功能
- 不要输出冗长开发日志。
- 现在开始执行。