提示词页 · 点击跳转使用
四步实操提示词
第一场：做一个能打开的网页
请生成一个单文件 HTML 教学网页，主题是"等高线地形图"。
面向初中地理学生，用于课堂互动学习。
教师在课堂上用大屏幕展示，既是讲解辅助，也是学生自主探索的学习材料。
页面包含：
1. 标题区：课程标题"等高线地形图"和一句话学习目标。
2. 知识讲解区（2-3 张卡片，支持点击展开/收起）：
- 等高线基本概念：什么是等高线、等高距
- 地形判读口诀："凸高为谷，凸低为脊"
- 陡坡与缓坡的区分：等高线密集=陡坡，稀疏=缓坡
3. 互动练习区（3 道选择题，点击选项后立即判断对错）：
- 第 1 题：给出一段等高线图，判断哪里是山脊
- 第 2 题：比较两处等高线的疏密，判断哪边更陡
- 第 3 题：综合判读，选择正确的登山路线
4. 反馈区：选对变绿色、选错变红色并高亮正确答案，同时显示详细解析。底部实时显示"正确 X/3"和"重新练习"按钮。
交互要求：
- 点击选项后立即反馈，不延迟
- 正确选项变绿色，错误选项变红色，同时显示解析文字
- 答完全部题目后显示总分和简短评语
- 提供"重新练习"按钮，一键重置
视觉要求：
- 配色以自然色系（绿、棕、蓝）为主，符合地理学科主题
- 字号不小于 18px，教室后排学生也能看清
- 按钮和可点击区域最小 44px，方便触摸操作
- 卡片式布局，内容分区清晰，适合课堂投屏
输出要求：
1. HTML、CSS、JavaScript 全部写在一个文件里，不引入外部依赖。
2. 代码完整可运行，不要省略任何部分。
3. 使用语义化标签（header、main、section、article）。
4. 关键位置添加注释，方便教师理解和修改内容。
5. 复制后另存为 .html 文件，浏览器双击即可打开使用。
第二场：让网页读取 JSON
请制作一个 HTML 动态题库网页，题目数据存放在独立的 questions.json 文件中，网页通过 fetch 读取。
把题目和数据分开，教师以后只需修改 JSON 文件就能换题，不用动 HTML 代码。这是"能换题"的关键一步。
JSON 数据格式，每道题包含以下字段：
{
"id": 1,
"question": "题干内容",
"options": ["选项A", "选项B", "选项C", "选项D"],
"answer": 0,
"explanation": "解析文字，说明为什么选这个答案",
"knowledge": "知识点标签"
}
请给出至少 5 道示例题。
功能要求：
1. 页面加载时自动 fetch questions.json 读取题目。
2. 每次显示一道题，答完后点击"下一题"切换。
3. 点击选项后立即判断正误，正确变绿、错误变红，同时显示解析。
4. 顶部显示进度条（如"第 2 / 5 题"）。
5. 全部答完后显示得分统计（"正确 X / 总题数 Y"）和简短评语。
6. 提供"重新开始"按钮，一键重置所有状态。
7. 如果 JSON 文件加载失败，显示友好的错误提示，并说明原因。
文件交付：
1. index.html — 完整网页代码，内含 HTML/CSS/JS。
2. questions.json — 示例题库数据。
3. 请说明两个文件放在同一文件夹下，双击 index.html 打开。
注意：
因为浏览器安全策略，直接用 file:// 打开可能无法 fetch JSON。请同时给出两种解决方案：
方案一：用 VS Code Live Server 等插件启动本地服务器。
方案二：在 HTML 里先用内嵌数据兜底，fetch 成功后再替换为 JSON 数据。
代码中请按方案二实现，确保双击打开也能正常运行。
第三场：API 接入
请制作一个 HTML 页面，让学生可以在课堂上查询真实世界的数据，体验"网页能联网"。
例如：地理课上，学生输入城市名称，查询实时天气并分析气候特征；或输入两个地点对比天气差异，讨论气候成因。
功能要求：
1. 输入框：用户输入城市名称（支持中文城市名）。
2. 点击"查询"按钮或按回车键触发查询。
3. 调用公开的天气 API（建议使用 wttr.in 或 Open-Meteo，无需注册和 API Key）。
4. 展示以下信息：
- 当前温度、天气状况（晴/雨/阴等）
- 湿度、风速
- 一个简单的穿衣/出行建议（根据温度自动生成文案）
5. 查询时显示"加载中…"状态，期间按钮禁用防止重复点击。
6. 查询失败时显示友好的错误提示（如"未找到该城市，请换个城市试试"）。
API 说明：
推荐使用 https://wttr.in/{城市名}?format=j1，免费、无需注册、无需 API Key，直接 fetch 即可获取 JSON 数据。如果使用需要 Key 的 API，请用 YOUR_API_KEY 占位，并在代码中注释清楚去哪里申请和替换。
技术要求：
1. 使用 fetch 发起网络请求，async/await 处理异步。
2. 做好错误处理：网络断开、城市不存在、API 返回异常等。
3. 考虑请求超时情况（用 AbortController 设置超时）。
4. HTML、CSS、JS 写在一个文件里，完整可运行。
扩展（可选）：
- 同时显示两个城市的天气，方便课堂对比分析。
- 根据多次查询结果自动生成一个简单的温度变化图表。
第四场：后台管理
请制作一个单文件 HTML 教学题库后台管理页，教师用于维护课堂练习题和查看学生答题记录。
教师可以在"题库管理"标签页中添加、编辑、删除题目；在"提交记录"标签页中查看学生答题情况。所有数据保存在浏览器 localStorage 中，刷新不丢失。
题目字段：
题干、选项 A、选项 B、选项 C、选项 D、正确答案（下拉选择 A/B/C/D）、解析、知识点标签、难度（简单/中等/困难）。
提交记录字段：
学生姓名、题目编号、学生答案、正确答案、是否答对、提交时间。
页面结构：
顶部两个标签页切换按钮："题库管理"和"提交记录"。
题库管理标签页：
1. 题目列表：表格展示所有题目，每行显示题干摘要、知识点、难度、操作按钮（编辑/删除）。
2. 新增按钮：点击弹出表单，填写所有字段后保存。
3. 编辑按钮：点击弹出表单，预填已有数据，修改后保存。
4. 删除按钮：点击弹出确认框，确认后删除。
5. 搜索/筛选：支持按知识点或难度筛选题目。
6. 顶部显示题目总数统计。
提交记录标签页：
1. 记录列表：表格展示所有提交，按时间倒序排列。
2. 统计卡片：总提交数、正确率、各知识点正确率。
3. 支持按学生姓名或知识点筛选。
4. 提供"清空记录"按钮（需二次确认，防止误操作）。
5. 暂无记录时显示"暂无提交记录"的空状态提示。
技术要求：
1. HTML、CSS、JS 全部写在同一个文件中，不引入外部依赖。
2. 使用 localStorage 持久化数据，刷新页面后数据仍然保留。
3. 页面加载时自动读取 localStorage 中的数据并渲染。
4. 数据变更后立即同步到 localStorage。
5. 表单需做基本验证：题干不能为空，四个选项不能为空，正确答案必须选择。
6. 代码完整，不要省略任何部分。
视觉要求：
- 界面简洁清晰，适合教师在办公电脑上日常使用。
- 表格在宽屏上正常显示，移动端可横向滚动。
- 按钮按功能区分颜色：新增=绿色，删除=红色，编辑=蓝色。
- 弹窗/模态框居中显示，带半透明遮罩背景，点击遮罩可关闭。
