精品学习资源 · 教师信息素养提升参赛作品

「认识人工智能」初中自主学习专题网站
内容结构与课程设计

面向初中学生的 AI 主题自主学习网站规划方案，以 HTML + 原生 JavaScript 实现，可调用大模型，遵循"体验—认知—探究—实践—反思"五阶学习路径。

8核心学习模块 5阶学习路径 4维素养目标 0框架依赖

01项目概述

本方案为教师信息素养提升实践活动设计一个面向初中学生的「认识人工智能」自主学习专题网站。网站以纯 HTML + 原生 JavaScript 构建，可调用大语言模型，内容紧扣 2025 年国家《中小学人工智能通识教育指南》对初中阶段的要求。

设计背景与政策依据

2025 年 5 月，教育部基础教育教学指导委员会发布《中小学人工智能通识教育指南（2025 年版）》，明确提出构建"分层递进、螺旋上升"的通识教育体系，通过知识、技能、思维与价值观的有机融合，形成"四位一体"的人工智能素养[1]。该指南对初中阶段的定位是：认知上侧重理解技术逻辑（掌握机器学习基本流程与监督学习概念），技能上强调实际问题解决（通过项目式学习与智能体搭建完成场景化应用），思维上发展工程思维（形成"需求分析—技术适配—效果评估"的技术决策链），价值观上深化伦理认知（在生成式 AI 应用中辨析虚假信息风险）[1][2]。

中国教育报指出，初中阶段的活动设计应"利用学科教学和技术实践并进的模式，设计富有学科特色的实践项目，实现从感性体验向理性探究的转变"[2]。本网站正是以此为依据，将上述要求转化为可交互、可自主探索的网页学习资源。

设计目标

围绕"四位一体"素养框架，本网站设定四个维度的培养目标：

知识

建立 AI 整体认知框架

了解人工智能的基本概念、发展脉络、三要素（数据/算法/算力）与机器学习基本流程，理解大语言模型的简化原理。

技能

掌握 AI 工具的实际应用

学会调用大模型完成对话、创作与问题解决，掌握提示词技巧，能通过项目式学习用 AI 解决真实场景问题。

思维

发展计算与工程思维

通过分类实验、神经网络可视化体验"训练—预测"过程，形成"需求分析—技术适配—效果评估"的工程决策链与批判意识。

价值观

深化伦理与社会责任

理解 AI 技术的双面性，学会辨别 AI 生成内容与虚假信息，认识人机协作中人类的独特价值，树立安全与隐私意识。

目标用户与技术约束

维度说明
目标用户初中学生（七至九年级），具备基础的信息科技操作能力，可独立或半独立地通过浏览器自主学习
技术栈纯 HTML + 原生 JavaScript（ES6+），不使用 Node.js、不依赖任何前后端框架（如 React/Vue）
大模型接入通过浏览器 fetch 调用兼容 OpenAI 格式的大模型 API，实现对话、创作、引导等交互
运行环境任意现代浏览器直接打开 index.html 即可运行，无需服务器，可部署于静态空间或本地
数据存储使用浏览器 localStorage 保存学习进度、徽章成就与学生作品，无需后端数据库
作品形式专题网站（新媒体资源），符合"精品学习资源"中"专题网站"的作品形式要求

02设计理念

以"做中学、玩中悟"为核心，构建一条从感性体验到理性反思的完整学习链路，让初中生在互动中建立对人工智能的真实理解。

五阶学习路径

网站内容按"体验 → 认知 → 探究 → 实践 → 反思"五阶递进设计，符合初中生"从感性体验向理性探究转变"的认知规律[2]。每一阶对应若干模块，难度螺旋上升：

①
体验
感受身边的 AI，激发好奇
②
认知
建立概念框架与发展脉络
③
探究
拆解原理，动手做实验
④
实践
调用大模型，项目创造
⑤
反思
伦理思辨，形成价值观

自主学习支持设计

为支持学生独立探索，网站内嵌三项自主学习机制：

  • AI 学习伙伴：常驻悬浮入口，学生随时可向大模型提问，模型以"引导者"身份作答（不直接给答案，而是启发思考），降低自主学习中的无助感。
  • 学习进度地图：首页可视化展示各模块完成状态，用 localStorage 记录进度，学生可自由选择学习顺序并随时续学。
  • 分层任务设计：每个模块设"基础挑战"与"进阶探索"两级任务，照顾不同基础学生的差异化需求，呼应指南"设计分层教学内容"的要求[1]。

设计原则小结

兴趣先行（先玩后讲）、原理可视（把抽象变可见）、创造驱动（用 AI 做作品）、价值引领（边学边思辨）。四者贯穿全站，确保资源既能"引起兴趣、激发创造力"，又能落实素养目标。

03网站内容结构

网站采用"首页导览 + 八大学习模块 + 全局辅助"的结构。首页承担学习地图与进度追踪，八大模块按五阶路径组织，全局辅助（AI 学习伙伴、导航栏、页脚）贯穿全站。

架构总览

flowchart TD
  HOME["🏠 首页 · 学习地图
进度追踪 / 路径导览 / AI伙伴入口"]
  HOME --> M1
  HOME --> M2
  HOME --> M3
  HOME --> M4
  HOME --> M5
  HOME --> M6
  HOME --> M7
  HOME --> M8

  subgraph P1["① 体验"]
    M1["模块1 · AI初体验
身边的AI / 谁是AI / 对话初体验"]
  end
  subgraph P2["② 认知"]
    M2["模块2 · 认识AI
什么是AI / 发展史 / 三要素"]
  end
  subgraph P3["③ 探究"]
    M3["模块3 · 探秘AI原理
机器学习流程 / 分类实验 / 神经网络 / 大模型"]
  end
  subgraph P4["④ 实践"]
    M4["模块4 · 玩转AI
对话实验室 / 创作工坊 / 提示词挑战"]
    M5["模块5 · AI创客空间
项目式学习 / 创意挑战 / 作品展厅"]
  end
  subgraph P5["⑤ 反思"]
    M6["模块6 · AI与未来
伦理思辨 / 辨别伪造 / 人机协作 / AI宣言"]
  end
  subgraph AUX["全局辅助"]
    M7["模块7 · 学习评价
知识闯关 / 素养雷达 / 徽章墙"]
    M8["模块8 · 资源中心
拓展阅读 / 视频 / 术语词典 / 工具"]
  end

  M1 --> M2 --> M3 --> M4 --> M5 --> M6
  M7 -.贯穿评价.-> M1
  M7 -.贯穿评价.-> M6
  BUDDY["🤖 AI学习伙伴（悬浮常驻）"]:::buddy
  BUDDY -.随时提问.-> M1
  BUDDY -.随时提问.-> M6
  classDef buddy fill:#06b6d4,color:#fff,stroke:#0e7490;
图1 · 网站内容架构与五阶学习路径

八大模块一览

模块名称学习阶段核心内容主要交互形式
1AI 初体验① 体验身边的 AI 应用、"谁才是 AI"判断游戏、AI 对话初体验翻牌卡片、判断小游戏、对话气泡
2认识 AI② 认知AI 概念辨析、发展简史时间轴、数据/算法/算力三要素套娃关系图、可点击时间轴、拖拽演示
3探秘 AI 原理③ 探究机器学习四步流程、监督学习分类实验、神经网络可视化、大模型原理流程动画、分类实验、Canvas 可视化、文字接龙
4玩转 AI④ 实践AI 对话实验室、提示词技巧、AI 创作工坊、提示词工程师挑战大模型对话、创作展示、闯关游戏
5AI 创客空间④ 实践三大项目式学习任务、创意挑战赛、学生作品展示厅项目引导卡、作品上传、作品画廊
6AI 与未来⑤ 反思AI 伦理案例、辨别 AI 生成内容、人机协作讨论、我的 AI 宣言案例卡、投票组件、对比展示、宣言编辑器
7学习评价贯穿分模块知识闯关、四维素养雷达图、学习徽章成就即时测验、ECharts 雷达图、徽章墙
8资源中心拓展拓展阅读、推荐视频、AI 术语词典、中学生 AI 工具清单资源卡片、可搜索词典

结构设计说明

模块 1–6 构成主线学习路径，建议按序学习但允许自由跳转；模块 7（评价）与模块 8（资源）为全局辅助，可在任意阶段使用。每个模块页面顶部均显示"你在哪一阶"的路径指示器，帮助学生定位学习进度。

04课程内容详细设计

以下逐模块给出学习目标、核心知识点、互动活动设计与页面呈现方式。每个模块均包含"基础挑战"与"进阶探索"两级任务，并标注所调用的技术手段（原生 JS / Canvas / 大模型 API）。

模块 1 · AI 初体验

① 体验 · 约 1 课时

学习目标：激发学生对 AI 的好奇心，建立"AI 就在身边"的初步感知，破除对人工智能的神秘感。

活动 1.1 「你身边的 AI」互动墙

以卡片墙形式展示 12 个生活场景：人脸识别解锁、短视频推荐、语音助手、实时翻译、自动驾驶、智能客服、美颜滤镜、扫地机器人、手写识别、智能音箱、AI 绘画、垃圾邮件过滤。学生点击卡片翻转，背面揭示该场景背后的 AI 技术（如"推荐算法""计算机视觉""自然语言处理"）。

翻牌动效（CSS 3D transform）卡片数据用 JS 数组配置翻转触发技术解析

活动 1.2 「谁才是 AI？」判断游戏

给出 10 个事物（普通计算器、传统闹钟、电子表格、搜索引擎、ChatGPT、指纹解锁、扫地机器人、红绿灯定时器、AI 下棋程序、电子词典），学生逐一判断"是否用了 AI"。提交后即时反馈对错并给出解析，全部完成显示得分与"AI 侦探"称号。

JS 状态机管理题目流即时反馈 + 解析弹窗得分计入 localStorage

教学意图

通过"判断"活动引导学生区分"自动化程序"与"具备学习能力的人工智能"，这是建立 AI 正确认知的第一步，也呼应指南中"对比人工智能与人类行为差异培养质疑意识"的要求[1]。

活动 1.3 AI 对话初体验

首次调用大模型。页面预设 4 个趣味引导问题（"你能做什么？""你觉得你会思考吗？""AI 会取代人类吗？""给我讲个关于机器人的笑话"），学生点击即发送，也可自由输入。对话以气泡形式呈现，让学生直观感受生成式 AI 的能力边界。

调用大模型 API预设引导问题气泡式对话 UI

分层任务

  • 基础挑战：完成"谁才是 AI"游戏，得分 ≥ 80 分。
  • 进阶探索：在 AI 对话中提出一个"你最好奇的问题"，记录 AI 的回答并写下你的评价（它回答得好不好？哪里像人、哪里不像人？）。

模块 2 · 认识 AI

② 认知 · 约 1.5 课时

学习目标：建立人工智能的整体概念框架，了解 AI 的发展脉络与三大要素，理解 AI、机器学习、深度学习的包含关系。

活动 2.1 什么是人工智能

用类比引入："AI 像一个能从大量经验中学习的学生——你给它看一万张猫的照片，它就慢慢学会了认猫。"随后用"俄罗斯套娃"关系图辨析三个概念：人工智能（最大）⊃ 机器学习 ⊃ 深度学习（最小）。点击每一层展开说明与典型例子。

SVG 套娃关系图点击分层展开概念卡片

活动 2.2 AI 发展简史时间轴

横向可滚动时间轴，标注 8 个里程碑节点。点击节点弹出故事卡片：

年份事件意义
1950图灵提出"图灵测试"首次定义"机器能否思考"的问题
1956达特茅斯会议"人工智能"一词正式诞生
1980s专家系统兴起AI 首次走向实用，模拟专家决策
1997深蓝击败国际象棋冠军算力 + 搜索算法的胜利
2012AlexNet 深度学习突破深度学习在图像识别中一战成名
2016AlphaGo 战胜李世石AI 在复杂博弈中超越人类
2022ChatGPT 发布大语言模型走入大众视野
2024+多模态大模型普及AI 同时理解文字、图像、声音
JS 横向时间轴节点点击弹窗动画进入效果

活动 2.3 AI 三要素：数据 · 算法 · 算力

用"做菜"类比讲解三要素：数据是食材、算法是菜谱、算力是厨具。三者缺一不可。互动演示：学生拖动三个要素到"AI 大厨"的灶台，缺少任何一个时大厨"罢工"，集齐后播放一段"AI 学做菜"的动画，直观说明三要素的协同关系。

HTML5 拖拽 API条件判断反馈CSS 动画

分层任务

  • 基础挑战：在时间轴上找出"AI 经历过几次低谷（AI 寒冬）"，并简述原因。
  • 进阶探索：用一句话向没学过 AI 的同学解释"为什么 2012 年后 AI 突然变厉害了"（提示：联系三要素）。

模块 3 · 探秘 AI 原理

③ 探究 · 约 2 课时

学习目标：理解机器学习的基本流程与监督学习概念，通过动手实验体验"训练—预测"过程，初步认识神经网络与大语言模型原理。这是落实指南"掌握机器学习基本流程与监督学习概念"要求的核心模块[1]。

活动 3.1 机器如何学习——四步流程

以"教 AI 认水果"为故事线，用动画依次演示机器学习四步流程：数据采集（收集苹果/香蕉照片）→ 数据标注（给每张照片打上"苹果"或"香蕉"标签）→ 模型训练（AI 从标注数据中找规律）→ 预测应用（给一张新照片，AI 判断是什么水果）。每一步学生可点击触发，观察数据如何流动。

分步流程动画点击触发节点故事化叙事

活动 3.2 监督学习分类小实验

这是本模块的重点互动。学生亲手"训练"一个简化分类器：页面上是一个二维坐标平面，横轴=重量、纵轴=甜度，散布着已标注的"苹果"（红点）和"橘子"（橙点）。学生拖动滑块调整一条"决策边界线"，目标是把两类点尽可能分开。调好后点击"测试"，系统放入新样本点，看 AI 根据边界线如何分类。

实验后引导学生思考：如果两类点有重叠怎么办？数据太少会怎样？——自然引出"过拟合""数据质量"等概念，培养系统思维与批判意识。

Canvas 绘制坐标与散点滑块控制决策边界JS 实现分类逻辑

教学意图

将抽象的"监督学习"转化为可视、可操作的拖拽实验，让学生在"调线"中体会"特征—标签—决策边界"的关系，这正是指南要求的"认知数据特征与算法选择的关系"[1]。

活动 3.3 神经网络探秘

用 Canvas 绘制一个简化的三层神经网络（输入层 3 个神经元 → 隐藏层 4 个 → 输出层 2 个）。学生拖动输入层的三个滑块（代表三个特征值），观察信号如何经隐藏层加权传递到输出层，输出层用概率条显示结果。连线粗细代表权重，颜色深浅代表激活强度。无需数学公式，让学生直观感受"信息在网络中流动"。

Canvas 神经网络可视化滑块输入实时更新权重连线动画

活动 3.4 大模型是怎么工作的

用"读很多书 → 预测下一个字"的类比解释大语言模型原理。互动"文字接龙"游戏：给出半句话（如"床前明月光，疑是地上___"），让学生先猜，再点击"让 AI 接龙"对比。随后展示一段文字让 AI 续写，讨论"AI 为什么有时会一本正经地胡说（幻觉）"，引出大模型的概率本质与局限。

调用大模型续写人机对比接龙幻觉现象讨论

分层任务

  • 基础挑战：完成分类实验，使决策边界正确分类 ≥ 90% 的样本，并用自己的话解释"什么是监督学习"。
  • 进阶探索：在神经网络可视化中，尝试找到一组输入让"输出 A"的概率最高，记录你的发现并思考：这和"训练"有什么关系？

模块 4 · 玩转 AI

④ 实践 · 约 2 课时

学习目标：掌握大模型的使用方法与提示词技巧，能运用 AI 完成对话、创作等任务，理解"好的提示词"如何影响 AI 输出质量。这是落实指南"具备基础的人机交互能力，能够使用生成式工具完成内容创作"要求的关键模块[3]。

活动 4.1 AI 对话实验室

提供完整的大模型对话界面，左侧为对话区，右侧为"提示词技巧"侧栏，教授三条核心技巧：

  • 角色设定：告诉 AI 它是谁（"你是一位幽默的物理老师"）。
  • 具体描述：把模糊需求变具体（"用生活中的例子解释牛顿第一定律，300 字以内"）。
  • 分步指令：复杂任务拆成步骤（"第一步…第二步…"）。

侧栏提供 6 个提示词模板（学习辅导、写作助手、头脑风暴、知识解释、翻译润色、代码帮助），学生点击即填入输入框，可在此基础上修改后发送。

调用大模型 API提示词模板库流式输出展示

活动 4.2 好提示词 vs 差提示词

对比实验：同一目标用两种提示词分别调用大模型，让学生直观看到差异。例如目标"解释光合作用"——差提示词"解释光合作用"vs 好提示词"你是一位初中生物老师，请用比喻的方式向初一学生解释光合作用，举一个厨房里的例子，200 字以内"。学生可投票选出更好的回答，并分析原因。

双栏对比展示调用大模型两次投票与解析

活动 4.3 AI 创作工坊

三个创作子活动，均调用大模型：

  • AI 写诗：输入主题与风格（如"秋天 / 现代诗"），AI 生成诗歌，学生可反复"重新生成"挑选满意的作品。
  • 故事接龙：学生写开头，AI 续写一段，学生再接，循环创作一个完整故事。
  • AI 起名：输入关键词与用途（如"环保社团 / 有诗意"），AI 生成多个候选名供挑选。

每个创作完成后，引导学生反思："AI 生成的内容有哪些是好的？哪些需要你修改？"——培养批判性使用生成式工具的能力。

调用大模型生成多轮交互作品保存到 localStorage

活动 4.4 提示词工程师挑战

闯关游戏，共 5 关，难度递增。每关给出一个目标（如"让 AI 用 3 个比喻解释什么是机器学习""让 AI 写一首藏头诗，藏'人工智能'四个字"），学生编写提示词达成。系统通过预设关键词匹配 + 大模型辅助判断来评分，通关获得"提示词工程师"徽章。

闯关状态机关键词 + 大模型评分徽章奖励

分层任务

  • 基础挑战：使用提示词模板完成一次有效的 AI 对话，并说明你修改了模板的哪些部分。
  • 进阶探索：通过提示词工程师挑战第 3 关，记录你尝试了几次、每次如何改进提示词。

模块 5 · AI 创客空间

④ 实践 · 约 2-3 课时

学习目标：通过项目式学习（PBL）运用 AI 解决真实问题，形成"需求分析—技术适配—效果评估"的工程思维，激发创造力。这是落实指南"通过项目式学习完成场景化应用实践""通过智能体搭建开发完成场景化应用"要求的核心模块[1]。

活动 5.1 三大项目式学习任务（任选其一）

A

智能校园设计师

调研校园中的一个真实问题（食堂排队、图书查找、失物招领等），用大模型辅助 brainstorm 解决方案，撰写一份"智能校园改进提案"，包含问题分析、AI 方案设想、预期效果。

B

我的 AI 学习助手

设计一个能帮助同学学习的 AI 助手：编写系统提示词设定其角色、擅长学科与回答风格，调用大模型实现对话，测试它能否解答几道学科题目，评估其表现并优化提示词。

C

AI 创意作品

用 AI 协作完成一个数字作品：用大模型生成故事文本、生成配图描述文案、生成配音脚本，整合成一个图文并茂的"AI 协作绘本"或"数字故事"。

每个项目提供"项目引导卡"，按"需求分析 → 方案设计 → 动手实现 → 效果评估 → 反思总结"五步引导，学生可逐步完成。项目过程中随时可调用大模型获取建议。

项目引导卡（分步表单）调用大模型辅助工程思维五步法

教学意图

项目 B"我的 AI 学习助手"实质是简化的智能体搭建，让学生在设定系统提示词、测试优化的过程中，体验"需求分析—技术适配—效果评估"的完整工程决策链，这正是指南对初中阶段思维培养的核心要求[1]。

活动 5.2 创意闪电挑战

限时创意活动（教师可课堂组织）：给出一个开放主题（如"用 AI 为学校设计一个吉祥物形象描述""用 AI 写一首 100 字的校歌歌词"），学生在 10 分钟内调用大模型完成，强调"快速试错、大胆想象"。

活动 5.3 作品展示厅

学生将项目成果（文字/方案/故事）通过表单提交，存入 localStorage 并在"作品画廊"中以卡片形式展示。每件作品可显示作者、项目类型与简介，支持同学间互相浏览。教师可导出作品集用于展评。

作品上传表单localStorage 存储卡片画廊展示

分层任务

  • 基础挑战：完成任一项目的"需求分析"与"方案设计"两步，提交一份方案文档。
  • 进阶探索：完整完成一个项目并提交到作品展示厅，附上"我用了哪些提示词技巧"的说明。

模块 6 · AI 与未来

⑤ 反思 · 约 1.5 课时

学习目标：深化 AI 伦理认知，学会辨别 AI 生成内容与虚假信息，理解人机协作中人类的独特价值，形成负责任的 AI 使用观。这是落实指南"在生成式人工智能技术应用中辨析虚假信息风险""深化伦理认知"要求的模块[1]。

活动 6.1 AI 伦理思考站

三个真实情景案例，每个含讨论问题与全班投票：

  • 案例一·信息茧房：短视频 AI 越推荐越准，小明每天只看到自己喜欢的内容，渐渐觉得"全世界都这么想"。这有什么风险？
  • 案例二·算法偏见：某公司用 AI 筛选简历，发现它总是给男生打更高分。AI 也会"歧视"吗？原因可能是什么？
  • 案例三·AI 假新闻：有人用 AI 生成"某明星去世"的假新闻并配上 AI 合成图片，迅速传播。该如何应对？

每个案例后设置投票（如"你认为该不该用 AI 筛选简历？"），投票后展示全班结果，并可调用大模型以"伦理引导者"身份给出多角度分析，启发学生辩证思考。

案例卡片JS 投票组件大模型多角度分析

活动 6.2 火眼金睛——辨别 AI 生成内容

展示 6 组内容（3 组 AI 生成图片 vs 真实图片，3 组 AI 生成文本 vs 人类写作），学生判断哪些是 AI 生成的。判断后揭示答案并讲解识别技巧：看图片中手指/文字是否变形、看文本是否过于"完美"而缺少个人风格等。引导学生认识深度伪造的风险与防护。

对比展示组件判断 + 揭秘识别技巧讲解

活动 6.3 人机协作——AI 能做与不能做

拖拽分类活动：列出 12 项能力（计算速度、模式识别、创造性想象、情感共鸣、道德判断、海量记忆、幽默感、重复劳动、艺术原创、逻辑推理、同理心、24 小时工作），学生将它们拖入"AI 擅长"或"人类擅长"两栏。完成后展示参考答案，引导学生认识：AI 是增强人类能力的工具，而非替代，人类的创造力、同理心与道德判断是不可替代的独特优势。

拖拽分类游戏参考答案对比价值引导

活动 6.4 我的 AI 宣言

学生在编辑器中写下自己的"AI 使用宣言"（如"我会用 AI 辅助学习，但不让它替我思考""我会辨别 AI 生成的内容，不传播虚假信息"）。提交后调用大模型以鼓励性语气给出反馈，并将宣言生成一张可保存的"宣言卡片"图片。

富文本编辑器调用大模型反馈Canvas 生成宣言卡片

分层任务

  • 基础挑战：完成"火眼金睛"活动，正确辨别 ≥ 4 组，并写出一条辨别 AI 内容的技巧。
  • 进阶探索：撰写并提交"我的 AI 宣言"，至少包含三条你对负责任使用 AI 的承诺。

模块 7 · 学习评价

贯穿 · 过程性评价

学习目标：通过多元评价方式记录学习过程，帮助学生了解自身 AI 素养发展，呼应指南"构建多元评价体系""注重过程性评价与结果性评价相结合"的要求[1]。

活动 7.1 分模块知识闯关

每个主线模块（1-6）结束后配有 5 道题的小测验（选择题 + 判断题），覆盖该模块核心知识点。学生提交后即时判分，错题附解析。所有测验成绩存入 localStorage，形成学习记录。

JS 题库 + 即时判分错题解析成绩存档

活动 7.2 四维素养雷达图

学生完成全部模块后，系统综合"知识闯关成绩（知识）、项目作品完成度（技能）、实验与挑战表现（思维）、宣言与伦理活动参与（价值观）"四项数据，用雷达图可视化展示其 AI 素养画像。学生可对比"学习前"与"学习后"的变化，感受成长。

ECharts 雷达图四维数据聚合前后对比

活动 7.3 学习徽章墙

设置 8 枚徽章，完成对应任务自动解锁：AI 侦探（模块1）、历史通（模块2）、原理探索家（模块3）、提示词工程师（模块4）、AI 创客（模块5）、伦理卫士（模块6）、全勤学者（完成所有模块）、素养达人（雷达图四维均达标）。徽章墙以网格展示，未解锁的为灰色锁定状态。

徽章解锁逻辑localStorage 记录网格展示墙

模块 8 · 资源中心

拓展 · 自主延伸

学习目标：为学有余力或意犹未尽的学生提供延伸学习资源，支持个性化拓展，培养自主学习能力。

活动 8.1 拓展阅读与推荐视频

精选适合初中生的 AI 科普资源：推荐书目（如《人工智能简史》青少年版、《给孩子讲人工智能》）、科普视频清单（按主题分类：原理类、应用类、伦理类）、优质纪录片推荐。每条资源附简介与适学年级。

活动 8.2 AI 术语词典

可搜索的术语表，收录 40+ 核心术语（人工智能、机器学习、深度学习、神经网络、大语言模型、训练、推理、提示词、多模态、算法偏见等）。支持关键词搜索，每个术语含通俗解释与"一句话例子"。

JS 实时搜索过滤术语卡片通俗解释

活动 8.3 中学生 AI 工具清单

推荐适合中学生安全使用的 AI 工具（对话类、写作类、学习辅导类），每款标注用途、适用场景与使用注意事项，引导学生合理、安全地使用 AI 工具。

05大模型交互功能设计

网站通过浏览器原生 fetch 调用兼容 OpenAI 格式的大模型 API，封装统一调用函数，在多个模块中复用。以下是技术方案、功能场景与安全引导设计。

技术调用方案

封装一个 callLLM() 函数，统一处理请求构造、错误处理与流式输出。所有模块通过该函数调用大模型，避免重复代码：

// js/llm.js —— 统一大模型调用封装
const LLM_CONFIG = {
  apiUrl: 'https://your-api-endpoint/v1/chat/completions',
  apiKey: localStorage.getItem('ai_api_key') || '',
  model: 'gpt-4o-mini'
};

// 教育引导型系统提示词，约束 AI 以引导者身份作答
const EDU_SYSTEM_PROMPT = `你是一位面向初中生的AI学习伙伴。
请用通俗易懂、生动有趣的语言回答，避免复杂术语。
遇到开放性问题，先启发学生思考再给出参考，不要直接给答案。
拒绝任何不适合未成年人的内容。`;

async function callLLM(messages, onChunk) {
  const res = await fetch(LLM_CONFIG.apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${LLM_CONFIG.apiKey}`
    },
    body: JSON.stringify({
      model: LLM_CONFIG.model,
      messages: [{ role: 'system', content: EDU_SYSTEM_PROMPT }, ...messages],
      stream: true,        // 流式输出，提升体验
      temperature: 0.7
    })
  });
  // 逐块读取流式响应，通过 onChunk 回调实时渲染
  const reader = res.body.getReader();
  let full = '';
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    const text = new TextDecoder().decode(value);
    // 解析 SSE 数据块并拼接...
    onChunk(text);
  }
  return full;
}

功能场景一览

模块调用场景系统提示词策略
模块1AI 对话初体验通用引导者，鼓励学生提问
模块3文字接龙 / 续写限制为续写模式，控制长度
模块4对话实验室 / 创作工坊 / 提示词评分按学生设定的角色作答；评分时返回 JSON 结构
模块5项目辅助 / AI 助手对话采用学生自定义系统提示词（智能体搭建）
模块6伦理多角度分析 / 宣言反馈伦理引导者，呈现正反观点，鼓励性反馈
全局AI 学习伙伴（悬浮常驻）苏格拉底式引导，启发思考不直接给答案

安全与引导设计

四重安全保障

① 系统提示词约束：所有调用均注入教育引导型系统提示词，约束 AI 以教育者身份作答并拒绝不当内容。② 输入长度限制：前端限制单次输入 ≤ 500 字，防止滥用。③ 敏感词过滤：提交前进行基础敏感词检测。④ API Key 管理：Key 由教师在配置页填入并存于 localStorage，学生端无需接触密钥；建议部署时通过教师可控的代理转发请求，避免密钥暴露在前端。

引导式而非答案式

AI 学习伙伴的系统提示词特别强调"苏格拉底式引导"——遇到学生提问时，先用反问或提示启发思考，而非直接给出完整答案。这既保护了学生的自主探究空间，也培养了独立思考能力，契合自主学习资源的设计初衷。

06技术实现要点

在"纯 HTML + 原生 JS、零框架"的约束下，通过合理的文件组织与原生 API 运用即可实现上述全部功能。以下是项目结构与关键技术实现说明。

项目文件结构

ai-website/
├── index.html              # 首页（学习地图 + 导航）
├── pages/
│   ├── m1-experience.html  # 模块1 AI初体验
│   ├── m2-know.html        # 模块2 认识AI
│   ├── m3-principle.html   # 模块3 探秘AI原理
│   ├── m4-play.html        # 模块4 玩转AI
│   ├── m5-maker.html       # 模块5 AI创客空间
│   ├── m6-future.html      # 模块6 AI与未来
│   ├── m7-assess.html      # 模块7 学习评价
│   └── m8-resource.html    # 模块8 资源中心
├── css/
│   └── style.css           # 全站统一样式
├── js/
│   ├── llm.js              # 大模型调用封装
│   ├── progress.js         # 进度追踪与徽章逻辑
│   ├── nav.js              # 导航与路由
│   └── modules/            # 各模块专属脚本
└── assets/                 # 图片、图标等静态资源

关键技术实现

页面导航与路由

采用多 HTML 页面 + 顶部导航栏的方式，或用 hash 路由（location.hash）实现单页切换。导航栏在所有页面共享，通过 nav.js 高亮当前模块。

进度与数据持久化

用 localStorage 存储学习进度、测验成绩、徽章状态与学生作品。progress.js 统一管理读写，首页读取后渲染学习地图的完成状态。

Canvas 互动可视化

模块3 的分类实验与神经网络可视化用原生 Canvas API 绘制：散点图、决策边界线、神经元节点与权重连线，配合滑块 input 事件实时重绘。

拖拽交互

模块2 三要素、模块6 能力分类使用 HTML5 Drag and Drop API（dragstart/drop）实现，移动端降级为点击选择。

大模型流式对话

用 fetch + ReadableStream 读取 SSE 流式响应，逐字渲染到对话气泡，营造"AI 正在思考打字"的真实感。

响应式适配

用 CSS 媒体查询适配桌面、平板与手机，Canvas 元素监听 resize 重绘，确保移动端互动实验可用。

无需框架即可实现的依据

本方案所有功能均基于浏览器原生能力：内容呈现用 HTML/CSS，交互逻辑用原生 JS（ES6 模块、async/await），数据可视化用 Canvas 与 ECharts（单文件引入），大模型调用用 fetch API，数据存储用 localStorage。不依赖 React/Vue 等框架，不使用 Node.js 或任何构建工具，双击 index.html 即可运行，完全满足参赛技术要求。

07学习评价体系

围绕"知识—技能—思维—价值观"四维素养，构建过程性评价与结果性评价相结合的多元评价体系，呼应指南"依托数字技术记录学习过程数据，形成学生人工智能素养成长档案"的要求[1]。

图2 · 四维 AI 素养评价雷达图（示例：学习前后对比）

评价维度与数据来源

维度评价内容数据来源评价方式
知识AI 概念、原理、发展史等认知水平各模块知识闯关成绩结果性（自动判分）
技能大模型使用、提示词运用、项目完成项目作品完成度、提示词挑战通关过程性 + 结果性
思维实验探究、工程决策、批判思考分类实验表现、神经网络探索记录过程性（行为记录）
价值观伦理认知、辨别能力、责任意识伦理活动参与、宣言提交、辨别正确率过程性 + 表现性

评价特色

评价不是终点而是成长的镜子：雷达图让学生直观看到自己的素养画像与进步轨迹，徽章系统提供即时正反馈，错题解析引导查漏补缺。整个过程数据由 localStorage 自动记录，形成可追溯的"素养成长档案"，既支持学生自我反思，也便于教师了解学情[1]。

方案总结

本方案以国家 2025 年《中小学人工智能通识教育指南》为依据，面向初中学生设计了一个"认识人工智能"自主学习专题网站。网站包含 8 大模块、20+ 互动活动，遵循"体验—认知—探究—实践—反思"五阶路径，覆盖知识、技能、思维、价值观四维素养目标。技术上以纯 HTML + 原生 JavaScript 实现，通过 fetch 调用大模型，无需任何框架与后端，内容形式新颖、互动丰富，既能引起学生兴趣、激发创造力，又切实落实了 AI 通识教育的素养要求，符合"精品学习资源"的参赛定位。