电解质的电离与离子反应（交互动画）-2026-2027学年高一上学期化学人教版必修第一册

null《电解质的电离与离子反应》交互动画 —— 完整流程点设计文档 适用：人教版 高中化学 必修第一册 第一章 第二节「离子反应」 文件：02_电解质的电离与离子反应（交互动画）.html ==================================================================== 一、总体设计目标 -------------------------------------------------------------------- 1. 用 2D 微观交互动画，把「看不见的微粒行为」变成可拖、可拽、可观察的过程。 2. 核心场景一（电离）：NaCl 晶体投入水中，水分子如何定向靠近、如何把 Na+ / Cl- 从晶格中一个一个"拔"出来，形成水合钠离子与水合氯离子。 3. 核心场景二（离子反应本质）：手动拖动 Ba2+ 与 SO4^2- 靠近，动画演示 二者结合生成 BaSO4 白色沉淀的微观瞬间；同一溶液里的 Na+ 与 Cl- 全程 自由游动、互不结合，作为"旁观离子"，从而理解"离子反应的实质是某些 离子浓度的减小"。 4. 交互具备多样性：鼠标拖拽（宏观器材 + 微观单个离子）、点击、双击、 长按搅拌、滑块、开关、悬停、键盘快捷键、单选判断题。 5. 设置「错误操作 / 认知误区沙盒」，共 12 类。错误一旦触发立即演示后果 动画（电弧、飞溅、腐蚀、爆沸、报警）+ 红色警告弹窗 + 扣分 + 正确解释， 错误可撤销、可重来。 6. 全程生成操作日志与学习报告，可复盘、可导出。 二、界面区域划分 -------------------------------------------------------------------- [顶栏] 标题 / 当前离子方程式芯片 / 四个场景标签 / 掌握分（初始 100） / 音效开关 / 帮助 / 一键重置 [左栏] 试剂与器材架（拖拽源，随场景切换） · 场景①：NaCl、NaOH、HCl、CH3COOH、蔗糖、酒精、CaCO3、BaSO4、 CO2、铜丝、【危险区】手指、金属勺、加热到沸腾 · 场景②：NaCl 固体、NaOH 固体、BaSO4 固体、蔗糖固体、铜块 · 场景③：Na2SO4 溶液瓶、BaCl2 溶液瓶、HCl、NaOH、Na2CO3、 CuSO4、KNO3 溶液瓶 · 场景④：12 种常见离子（Na+ K+ Ba2+ Cu2+ Ag+ H+ Cl- SO4^2- CO3^2- OH- NO3- CH3COO-） [中栏] 微观舞台（Canvas 主渲染区） · 主体：放大 10^9 倍的溶液视野（水分子 + 离子 + 晶体 + 沉淀） · 左上角：倍率徽章「微观视野 · 放大约 10^9 倍」 · 右上角：宏观现象窗（画中画）—— 同步显示烧杯真实外观： 澄清 / 浑浊 / 白色沉淀分层 / 蓝色沉淀 / 冒气泡 / 灯泡亮暗 · 顶部：导电性检测电路（电源 + 开关 + 电流表 + 小灯泡 + 双电极） · 底部：溶液液面、沉淀堆积层 [右栏] ① 现象观察卡（逐条点亮：定向、水合、脱离晶格、自由移动、 定向移动导电、沉淀生成、离子减少…） ② 操作日志（时间戳 + 行为 + 判定） ③ 知识卡（电离方程式 / 化学方程式 / 离子方程式四步推导） ④ 易错挑战（判断题 + 离子共存判断） [底栏] 参数控制：温度滑块 / 电压滑块 / 浓度滑块 / 显示水分子 / 显示水合层 / 显示电荷 / 慢动作 / 旁观离子高亮 / 通电开关 [弹层] 红色警告弹窗、知识弹窗、学习报告弹窗、悬停气泡提示 三、场景① 电解质的电离（水溶液）—— 主流程 8 步 -------------------------------------------------------------------- 步骤 0 · 认识纯水 操作：进入即见一杯纯水，画面中约 90 个水分子在做无规则热运动。 引导：点击任意一个水分子 → 放大显示 H2O 结构：O 端带部分负电荷（δ-）， H 端带部分正电荷（δ+），是一个"小磁铁"一样的极性分子。 测试：点击「合上开关」通电 → 灯泡几乎不亮，电流表读数 ≈ 0。 结论：纯水是极弱电解质，自由离子极少，几乎不导电。 判定：完成 → +5 分，点亮观察卡「水是极性分子」。 步骤 1 · 投入 NaCl 晶体（核心动画一） 操作：把左栏「NaCl 晶体」拖到烧杯中松开鼠标（自定义拖拽，有拖影与 落点高亮）。 画面：舞台中央出现一个 6×6 的氯化钠离子晶体（紫色 Na+ 与绿色 Cl- 交替排列的立方晶格），晶格上的离子只在原位小幅振动，不能移动。 提示语：固体 NaCl 中，Na+ 和 Cl- 被强大的离子键锁在晶格结点上， 只能振动、不能自由移动 —— 所以固体 NaCl 不导电。 判定：+5 分，点亮观察卡「晶格中离子不能自由移动」。 步骤 2 · 水分子定向靠近（核心动画二） 自动/可拖拽触发：水分子开始被晶体表面的离子吸引。 画面细节（本动画的重点，慢动作开关可逐帧观察）： · 面向 Na+ 的水分子，把带 δ- 的氧原子端转过来正对 Na+； · 面向 Cl- 的水分子，把带 δ+ 的两个氢原子端转过来正对 Cl-； · 靠近的水分子之间出现淡蓝色虚线（表示静电作用）。 观察卡点亮：「水分子定向排列」。 可交互：拖动任意一个水分子放到某个表面离子旁 → 它会自动转向正确方向， 并在旁边弹出说明「同性相斥、异性相吸：O 端对阳离子，H 端对阴离子」。 步骤 3 · 离子脱离晶格 → 水合离子（核心动画三） 自动过程 + 手动加速： · 每个棱角处的离子被若干水分子"围攻"，进度条（吸引强度）积累； · 进度满 → 该离子被"拔"出晶格，晶格出现一个空位，离子带着 5~6 个 定向排列的水分子一起飘入水中 → 形成水合钠离子 Na+(aq)、 水合氯离子 Cl-(aq)； · 被拔出的瞬间有一圈淡色扩散波纹与轻微"啵"的音效。 手动交互（重要）： · 直接用鼠标拖拽晶格棱角上的离子，可以人工把它"拔"出来，体验 "克服离子键需要能量"；拖离所需距离越靠内层越远（内部离子拖不动， 提示「内部离子被六个异号离子包围，必须先溶解表层」）。 · 长按鼠标在烧杯内画圈 = 搅拌，溶解速率明显加快。 · 温度滑块升高 → 水分子运动加快，溶解加快。 观察卡点亮：「离子脱离晶格」「形成水合离子」。 电离方程式弹出：NaCl = Na+ + Cl- 强调：电离不需要通电！是溶于水（或受热熔化）时自发发生的。 判定：晶体完全溶解 → +10 分。 步骤 4 · 自由离子与导电（核心动画四） 操作：点击顶部电路的「合上开关」，拖动电压滑块（0~10 V）。 画面： · 阳离子 Na+ 整体向阴极（负极）定向移动； · 阴离子 Cl- 整体向阳极（正极）定向移动； · 离子仍带着水合层，运动轨迹呈"热运动 + 定向漂移"叠加； · 小灯泡由暗变亮，亮度与自由离子数量（浓度滑块）正相关； · 电流表指针摆动并显示读数。 观察卡点亮：「离子定向移动 → 导电」。 提示语：溶液导电的本质是自由移动的离子做定向移动； 金属导电的本质是自由电子定向移动 —— 两者机理不同。 判定：+10 分。 步骤 5 · 对比实验：换成别的物质（认知辨析核心） 操作：点击「倒掉重来」，依次把下列物质拖入水中，观察灯泡与微观画面。 ┌────────────┬──────────────────────────┬────────┬──────────────┐ │ 物质 │ 微观画面 │ 灯泡 │ 结论 │ ├────────────┼──────────────────────────┼────────┼──────────────┤ │ NaCl │ 晶格瓦解，全部变自由离子 │ 很亮 │ 强电解质 │ │ NaOH │ 晶格瓦解 → Na+ + OH- │ 很亮 │ 强电解质 │ │ HCl(气) │ HCl 分子入水后全部裂开 │ 很亮 │ 强电解质 │ │ │ → H+ + Cl-（共价化合物） │ │ （液态HCl不导电）│ │ CH3COOH │ 少数分子裂开又不断复合 │ 微亮闪烁│ 弱电解质 │ │ │ （电离↔结合动态平衡） │ │ 部分电离 │ │ 蔗糖 │ 整个分子分散，无离子 │ 不亮 │ 非电解质 │ │ 酒精 │ 整个分子分散，无离子 │ 不亮 │ 非电解质 │ │ CaCO3 │ 晶体几乎不溶，仅极少离子 │ 几乎不亮│ 强电解质(难溶)│ │ BaSO4 │ 晶体几乎不溶，仅极少离子 │ 几乎不亮│ 强电解质(难溶)│ │ CO2 │ CO2 + H2O → H2CO3 少量电离 │ 微亮 │ CO2 是非电解质│ │ │ （导电的是 H2CO3 不是 CO2）│ │ 【经典易错】 │ │ 铜丝 │ 不溶解，无离子进入溶液 │ 不亮* │ 单质既不是电解│ │ │ *但直接搭在两电极上灯会亮 │ │ 质也不是非电解│ │ │ （金属导电，不是电解质导电）│ │ 质【经典易错】│ └────────────┴──────────────────────────┴────────┴──────────────┘ 判定：完整试完 ≥6 种 → +10 分，解锁「易错挑战」加分题。 步骤 6 · 弱电解质的动态平衡（可选深化） 操作：投入 CH3COOH 后打开「慢动作」。 画面：CH3COOH 分子中不断有个别分子裂成 H+ 和 CH3COO-，同时也有 H+ 与 CH3COO- 重新结合成分子，两个过程同时进行、速率相等。 电离方程式：CH3COOH ⇌ CH3COO- + H+（注意用可逆号） 提示：强电解质用「=」，弱电解质用「⇌」，写错即判错。 步骤 7 · 小结与评价 自动生成本场景结论： · 电解质：在水溶液中或熔融状态下能够导电的化合物（酸、碱、盐、 活泼金属氧化物、水）。 · 非电解质：在水溶液中和熔融状态下都不能导电的化合物 （多数有机物、CO2、SO2、NH3 等）。 · 电解质与非电解质都必须是化合物 —— 单质和混合物两者都不是。 · 电离条件：溶于水 或 受热熔融，不需要通电。 四、场景② 固体与熔融导电台 -------------------------------------------------------------------- 步骤 M1 · 干燥固体测试 操作：把 NaCl 固体拖入两电极之间的坩埚中，合上开关。 现象：灯泡不亮，电流表为 0。晶格中的离子只在原地振动。 提示：离子被"锁死"，无法定向移动 → 固体 NaCl 不导电。 步骤 M2 · 加热熔融 操作：拖动「温度」滑块从 25 ℃ 升到 801 ℃ 以上（酒精灯/电炉火焰随 温度增大，晶体振幅同步增大）。 现象： · 25→400 ℃：晶格振动幅度加大，仍不导电； · 接近 801 ℃：晶格出现塌缩、离子"松动"； · 超过 801 ℃：晶格彻底瓦解，Na+ 与 Cl- 变成自由离子（无水合层， 因为没有水），在熔体中自由移动 → 灯泡亮起，电流表有读数。 电离方程式：NaCl =(熔融)= Na+ + Cl- 判定：成功熔融导电 → +10 分，点亮观察卡「熔融状态下能导电」。 步骤 M3 · 反例对照 · BaSO4 固体：加热到熔融同样导电 → 证明「难溶盐也是电解质」。 · 蔗糖固体：加热只会熔化成糖浆、继续加热变焦发黑，全程不导电 → 非电解质。 · 铜块：常温就导电（金属键，自由电子）→ 但它是单质，不是电解质。 判定：三个反例全部做完 → +10 分。 五、场景③ 离子反应的本质（核心场景） -------------------------------------------------------------------- 步骤 B1 · 配制两种溶液 操作：把「Na2SO4 溶液瓶」拖到大烧杯上方倾倒 → 微观视野中出现 4 个 Na+ 和 2 个 SO4^2-（均带水合层，自由游动）。 再把「BaCl2 溶液瓶」拖来倾倒 → 出现 2 个 Ba2+ 和 4 个 Cl-。 提示：可溶性强电解质在水中完全以自由离子形式存在， 溶液里根本不存在"Na2SO4 分子"或"BaCl2 分子"。 观察卡点亮：「溶液中以自由离子形式存在」。 步骤 B2 · 手动撮合（核心交互） 操作：用鼠标按住一个橙色 Ba2+，把它慢慢拖向一个黄色 SO4^2-。 画面分级反馈： · 距离 > 120 px：两者各自随机游动，无明显作用； · 距离 60~120 px：出现淡黄色引力虚线，两离子有轻微相向趋势， 提示语「静电引力开始起作用」； · 距离 < 60 px：引力线变亮变粗，离子加速靠拢，画面轻微聚焦； · 接触瞬间：白光闪烁 → 水合层被"甩开"（水分子四散归入本体）→ 两离子结合成一个白色不透明的 BaSO4 微粒 → 微粒受重力下沉 → 在杯底堆积成白色沉淀层 → 播放低沉"沉降"音效。 同步：右上角宏观窗中，澄清溶液立刻变浑浊、白色沉淀缓慢下沉分层。 观察卡点亮：「Ba2+ 与 SO4^2- 结合成沉淀」「溶液中离子浓度减小」。 判定：手动完成第 1 对 → +10 分。 步骤 B3 · 旁观离子体验（核心认知） 操作：尝试用鼠标把一个 Na+ 拖向一个 Cl-。 画面： · 两者能靠得很近，但一旦接触就像同名磁极一样被水分子挤开、弹回， 并保持各自的水合层； · 弹出黄色提示「NaCl 易溶于水，Na+ 与 Cl- 在溶液中不会结合， 它们没有参加反应 —— 称为旁观离子」。 操作：点击右栏「高亮旁观离子」按钮 → 所有 Na+、Cl- 加上灰色虚线圈 和"旁观"标签，画面其余部分变暗，突出真正参加反应的两种离子。 判定：完成体验 → +10 分。 步骤 B4 · 反应完毕，观察剩下什么 操作：点击「自动完成」，剩余 Ba2+ 与 SO4^2- 自动碰撞成沉淀。 结果：视野中只剩下 4 个 Na+ 和 4 个 Cl- 在自由游动，杯底一堆 BaSO4。 结论：所谓"Na2SO4 + BaCl2 = BaSO4↓ + 2NaCl"，上层清液其实就是 NaCl 溶液；反应的实质只是 Ba2+ 与 SO4^2- 结合成难溶物。 步骤 B5 · 离子方程式四步推导（知识卡分步点开） ① 写：Na2SO4 + BaCl2 = BaSO4↓ + 2NaCl （写出并配平化学方程式） ② 拆：2Na+ + SO4^2- + Ba2+ + 2Cl- = BaSO4↓ + 2Na+ + 2Cl- （易溶且易电离的物质拆成离子；沉淀、气体、水、氧化物、 难电离物质、单质一律不拆） ③ 删：删去两边相同的 2Na+ 和 2Cl-（旁观离子） ④ 查：Ba2+ + SO4^2- = BaSO4↓ 检查：原子守恒（√）电荷守恒：左 +2-2=0，右 0（√） 拓展意义：该式还代表所有"可溶性钡盐 + 可溶性硫酸盐"的反应。 步骤 B6 · 切换其它反应类型（下拉选择，每种都可手动拖拽撮合） ① 沉淀型：Ba2+ + SO4^2- = BaSO4↓ 白色沉淀下沉 ② 沉淀型：Ag+ + Cl- = AgCl↓ 白色凝乳状沉淀 ③ 沉淀型：Cu2+ + 2OH- = Cu(OH)2↓ 蓝色絮状沉淀 （交互：Cu2+ 先抓住第 1 个 OH-，再抓住第 2 个才成沉淀） ④ 中和型：H+ + OH- = H2O 结合成水分子，闪光后 并入水体，灯泡亮度下降（离子减少，导电能力下降） ⑤ 气体型：CO3^2- + 2H+ = H2O + CO2↑ CO3^2- 先后抓住 2 个 H+， 生成的 H2CO3 立即分解，气泡上浮、破裂逸出，宏观窗冒泡 ⑥ 不反应：NaCl 溶液 + KNO3 溶液 四种离子全部自由游动， 无沉淀、无气体、无水生成 → 不发生离子反应【重要反例】 归纳：复分解型离子反应发生的条件 —— 生成沉淀、放出气体、生成水 （难电离物质），三者具其一即可。 六、场景④ 离子共存沙盒 + 易错挑战 -------------------------------------------------------------------- 玩法 1 · 自由投放 操作：从左栏 12 种离子中任意拖入试管，系统实时判断。 · 若投入的离子与管内已有离子能结合 → 立即演示沉淀/气泡/生成水， 并弹出「××与××不能大量共存」+ 离子方程式。 · 若都不结合 → 显示绿色「可以大量共存」。 经典组合内置提示： H+ 与 CO3^2- / OH- / CH3COO- 不共存 Ba2+ 与 SO4^2- / CO3^2- 不共存 Ag+ 与 Cl- 不共存 Cu2+ 与 OH- 不共存 Na+ K+ NO3- 与谁都共存（常见旁观离子） 玩法 2 · 判断题闯关（8 题，答错即弹出解析并扣分） Q1 铜能导电，所以铜是电解质。 （×，单质） Q2 BaSO4 难溶于水，所以 BaSO4 是非电解质。 （×，熔融导电） Q3 CO2 水溶液能导电，所以 CO2 是电解质。 （×，导电的是H2CO3） Q4 NaCl 固体不导电，所以 NaCl 不是电解质。 （×，看水溶液/熔融） Q5 电离必须通电才能发生。 （×，溶解/熔融即可） Q6 强电解质溶液的导电能力一定强于弱电解质溶液。 （×，还要看浓度） Q7 离子反应发生的条件之一是生成难电离的水。 （√） Q8 Na2SO4 与 BaCl2 反应的离子方程式可写作 Ba2+ + SO4^2- = BaSO4↓。 （√） 七、错误操作 / 认知误区沙盒（共 12 类，多样性警告） -------------------------------------------------------------------- 每条：触发条件 → 后果动画 → 红色警告弹窗 → 扣分 → 正确做法/正确认识。 E1【徒手接触电极或伸手入通电溶液】 -25 分 ★最严重 触发：把"手指"图标拖到通电状态的电极或溶液上。 动画：蓝白色电弧噼啪闪烁、屏幕剧烈震动并闪红、心电图报警声。 后果：电解质溶液是导体，人体也是导体，通电时伸手会触电， 严重可致心室颤动、死亡。 正确：任何通电电路都必须先断电再操作；导电性实验中严禁触碰电极。 E2【徒手抓取 NaOH 固体 / 触摸强碱溶液】 -20 分 触发：把"手指"拖到 NaOH 固体或其溶液上。 动画：指尖泛白起皱、出现腐蚀纹理并冒白雾，弹出灼伤示意。 后果：NaOH 是强碱，有强腐蚀性，会溶解皮肤蛋白质造成化学灼伤。 正确：用药匙取用，佩戴手套护目镜；溅到立即大量流水冲洗。 E3【品尝 / 闻嗅溶液】 -20 分 触发：点击"尝一尝"或把嘴/鼻图标拖到烧杯上。 动画：视角俯冲到杯口 → 屏幕泛红 → 咳嗽与警报音。 后果：实验室任何药品都不得品尝；闻气味须用手轻轻扇气。 正确：严禁品尝，严禁把鼻子凑到容器口直接猛吸。 E4【把电极短路 / 用铜丝直接搭接两极】 -15 分 触发：把"铜丝"拖到两个电极上搭接。 动画：电流表指针瞬间打满并卡死、导线发红冒烟、保险丝熔断。 后果：短路电流极大，会烧毁电源和电流表，甚至引燃导线。 提醒（认知）：这时灯亮是"金属导电"，与电解质无关，不能据此说 铜是电解质。铜是单质，既不是电解质也不是非电解质。 E5【加热到沸腾并俯身观察】 -15 分 触发：温度滑块拉到 100 ℃ 以上，或点击"凑近看"。 动画：溶液暴沸、液滴飞溅到镜头上、屏幕被水渍糊住。 后果：暴沸飞溅的热碱液会烫伤、灼伤眼睛和面部。 正确：加热时不得俯视容器口，试管口不得对人。 E6【认为"电离需要通电"】 -10 分 触发：在未通电时点击"为什么还没电离？需要先通电"提示按钮，或 在挑战题中选错。 动画：出现一个被划掉的电源符号，弹出对比动画（断电时晶体照样溶解电离）。 后果：概念性错误，会导致后续大量判断失误。 正确：电离是电解质溶于水或受热熔化时自动发生的，与通电无关； 通电只是让已经自由的离子发生"定向移动"。 E7【把离子拖出液面】 -10 分 触发：按住某个水合离子拖到液面以上或拖出烧杯。 动画：离子在空气中失去水合层，闪烁报错，被弹回液面并溅起水花。 后果：概念错误 —— 离子不能脱离溶液（或熔融体）单独稳定存在。 正确：微观模型只在溶液内部讨论；溶液始终保持电中性 （正电荷总数 = 负电荷总数）。 E8【强行拉扯晶体内部离子】 -5 分 触发：反复拖拽晶格内部（非表面）的离子。 动画：晶格被拉伸出裂纹并回弹，画面抖动。 后果：内部离子被 6 个异号离子包围，作用力极强，必须先溶解表层。 正确：溶解是从棱、角、面逐层向内进行的。 E9【把 BaSO4 沉淀又拖回溶液想"拆开"】 -10 分 触发：拖动已生成的白色沉淀颗粒回到溶液中。 动画：沉淀被拖起后立刻重新下沉，出现"不可拆"锁链图标。 后果：概念错误 —— 沉淀是难溶物，在离子方程式中不能拆成离子。 正确：书写离子方程式时，沉淀、气体、水、弱电解质、氧化物、单质 一律写化学式，不能拆。 E10【离子方程式电荷不守恒】 -10 分 触发：在挑战题中选择 Ba2+ + SO4^2- = BaSO4 而漏写"↓"，或选择 Fe + Fe3+ = 2Fe2+ 之类电荷不守恒的式子。 动画：天平模型左右失衡、倾倒，红色打叉。 后果：离子方程式必须同时满足原子守恒与电荷守恒。 正确：写完必查两守恒，沉淀标↓、气体标↑。 E11【把 H+ 与 CO3^2- 装进同一支试管却说能共存】 -10 分 触发：场景④中同时投入 H+ 与 CO3^2-。 动画：立刻剧烈冒泡、液面上涌、气体从管口逸出。 后果：二者立即反应放出 CO2，不能大量共存。 正确：判断共存必须逐对检查能否生成沉淀、气体或水。 E12【废液直接倒入下水道】 -10 分 触发：实验结束后把含 Ba2+ / Cu2+ 的废液拖到"下水道"图标。 动画：下水道口冒出警告标志、水体变色、显示重金属污染提示。 后果：钡盐、铜盐属有毒重金属废液，直接排放污染水体、危害健康。 正确：分类倒入指定废液回收桶，实验台面与器材清洗干净。 八、交互方式清单（多样性保证） -------------------------------------------------------------------- 1. 器材/试剂拖拽（自定义实现，非 HTML5 DnD）：拖药品入水、拖溶液瓶倾倒、 拖固体进坩埚、拖离子进试管、拖手指入危险区。 2. 微观离子拖拽：在 Canvas 内直接按住任意离子移动（含命中检测、 惯性甩动、越界回弹）。 3. 晶格离子拔出：按住晶体棱角上的离子向外拖，克服"离子键"后拔出。 4. 长按画圈搅拌：在烧杯内按住鼠标绕圈，加速溶解（有旋涡与轨迹特效）。 5. 点击：合上/断开开关、点击水分子看极性、点击离子看信息卡、 点击沉淀看成分。 6. 双击：双击晶体 = 研碎成粉末（增大接触面积，溶解显著加快）。 7. 滑块：温度 0~1000 ℃、电压 0~10 V、浓度 1~5 档、动画速度。 8. 开关：显示水分子 / 显示水合层 / 显示电荷符号 / 慢动作 / 旁观离子高亮 / 引力连线 / 音效。 9. 悬停：试剂名称与类别气泡（强电解质/弱电解质/非电解质/单质）； 悬停离子显示符号、电荷、水合数。 10. 下拉选择：切换 6 种离子反应类型。 11. 键盘：1/2/3/4 切换场景，Space 暂停/继续，S 慢动作， W 显示/隐藏水分子，R 重置，Esc 关闭弹窗。 12. 判断题单选作答 + 即时解析。 13. 一键「自动完成」与「倒掉重来」。 14. 学习报告导出（可复制文本）。 九、评分与反馈机制 -------------------------------------------------------------------- 初始掌握分 100。正确步骤累计加分（最高 +80），错误按第七节扣分。 90~100 分：A 级 —— 概念清晰，微观本质理解到位 75~89 分：B 级 —— 基本掌握，个别易错点需巩固 60~74 分：C 级 —— 存在明显概念混淆，建议重做 <60 分：D 级 —— 概念性错误较多，需重新学习本节 右栏操作日志实时刷新：[时间] 行为描述 → 判定（正确 / 提醒 / 严重错误）。 学习报告包含：完成步骤、掌握分与等级、触发的错误清单与正确认识、 观察到的现象条目、涉及的全部方程式。 十、知识点小结（动画内嵌） -------------------------------------------------------------------- · 电解质：在水溶液中或熔融状态下能导电的化合物（酸、碱、盐、水、 活泼金属氧化物）。 · 非电解质：在水溶液中和熔融状态下都不能导电的化合物 （蔗糖、酒精、CO2、SO2、NH3 等）。 · 单质与混合物既不是电解质也不是非电解质。 · 电离：电解质溶于水或受热熔化时，离解成自由移动离子的过程； 不需要通电。 · 电离方程式：NaCl = Na+ + Cl-；NaOH = Na+ + OH-； HCl = H+ + Cl-；H2SO4 = 2H+ + SO4^2-； CH3COOH ⇌ CH3COO- + H+（弱电解质用可逆号）。 · 酸：电离时生成的阳离子全部是 H+ 的化合物。 碱：电离时生成的阴离子全部是 OH- 的化合物。 盐：电离时生成金属阳离子（或 NH4+）和酸根阴离子的化合物。 · 溶液导电能力取决于自由离子的浓度和离子所带电荷数， 与电解质强弱不直接等同。 · 离子反应：有离子参加或生成的反应。 实质：溶液中某些离子的浓度发生减小。 · 复分解型离子反应发生的条件：生成沉淀、放出气体、生成水（弱电解质）， 三者有其一即可发生。 · 离子方程式书写四步：写 → 拆 → 删 → 查。 可拆：强酸、强碱、可溶性盐。 不拆：沉淀、气体、水、弱酸弱碱、氧化物、单质。 查：原子守恒 + 电荷守恒 + ↓↑ 符号。 · 旁观离子：反应前后没有变化、未参加反应的离子（本例中 Na+ 与 Cl-）。 · 离子共存：能相互结合生成沉淀、气体或水的离子不能大量共存。 十一、技术实现要点 -------------------------------------------------------------------- · 单文件 HTML，零外部依赖、零网络请求，双击即可离线运行。 · Canvas 2D 渲染全部微观粒子：水分子（O 红 + 双 H 白 + 键）、 离子（带电荷标注的彩色球 + 水合层）、离子晶格、沉淀颗粒、气泡、 电极与电路、宏观画中画。 · requestAnimationFrame 主循环，固定步长积分，支持暂停与慢动作。 · 简易分子动力学：热运动 + 边界反弹 + 静电吸引/排斥 + 水合层跟随 + 重力沉降 + 沉淀堆积。 · 反应引擎：规则表驱动（1:1 与 1:2 两类），支持"逐个抓取配体"的 分步结合动画（Cu2+ 抓 2 个 OH-、CO3^2- 抓 2 个 H+）。 · 自定义拖拽层：mousedown/mousemove/mouseup + 画布坐标命中检测 + DOM 拖影 + 落点高亮 + 触摸事件兼容。 · Web Audio API 实时合成音效：溶解沙沙声、离子脱落"啵"声、沉淀沉降声、 气泡破裂声、电流嗡鸣、电弧噼啪、报警双音、答对提示音。可一键静音。 · 事故特效：屏幕震动（CSS transform）、闪红、电弧折线、裂纹叠加、 水渍糊屏。 · 深色实验室主题，与《01 钠与水的反应》保持统一视觉语言， 适配 1280×720 以上屏幕。 （完） $