南燕Jo最近在整理交互课件素材库，翻到这套编号“白板类-02-01”的课件时，我盯着文件名看了几秒——2026年3月26日做的“找影子01”，形态是html页面，运行场景写的是“希沃白板”。这个组合对很多老师来说可能有点陌生，但其实拆开看就是两件事：用html写一个小游戏，再放到教室的希沃触控大屏上让孩子玩。它解决的是一个很实在的问题：幼儿园和低年级孩子做影子配对练习时，不再需要用纸卡一张张摆，也不用老师在PPT里点来点去帮孩子翻页。孩子自己用手指在屏幕上点选，页面马上会用颜色、音效和动画给出反馈，像玩游戏一样就把观察力练了。这篇就把我制作、调试、现场使用这套课件的完整过程写出来，包括踩过的坑和可以直接复制的html源码。
1. “找影子01”到底是什么课
1.1 先说玩法：为什么孩子愿意反复点
这个游戏的核心交互非常简单，屏幕中央出现一只彩色的小动物，比如小猫，右侧或下方同时出现3个影子按钮，其中只有一个是这只小猫的影子轮廓。孩子需要观察彩色图的外形，再在几个黑色剪影里找出对应的一项，用手指点一下。点对了，页面播放一声轻快的提示音，按钮出现正确反馈，然后自动跳到下一题；点错了，按钮会轻轻抖一下，提示孩子再想一想，但不会直接跳到下一题，也不会扣分。
这个设计天然适合幼儿园中班到大班，也适合一年级刚接触“光和影子”概念的孩子。和传统纸质教具相比，它最大的优势是即时反馈。纸质卡片孩子答完，必须等老师确认，一对一场景还好，全班集体活动时后排孩子根本看不清，注意力很快就散了。而大屏页面上的反馈是即时的、视觉化的、有声音的，点一次就得到一次回应，这种“操作-反馈”的闭环是孩子愿意反复玩的核心原因。
很多老师第一反应是：这不就是用希沃白板自带课堂活动也能做吗？确实能做个大概，但希沃自带的模板通常把选项位置、题目格式、背景样式都固定了，想做出“左侧彩色图，右侧三个垂直排列的大影子按钮”这种适合低龄孩子的布局，反而要绕不少弯路。用html写的好处是，每一块位置、每一个大小、每一种反馈都是自己说了算，做完之后打开浏览器就能跑，不用安装任何额外软件。
1.2 这个活动真正在训练孩子的能力
从教育目标角度看，找影子绝对不是简单的“猜一猜”。孩子在完成配对时，其实在做三种认知活动：第一是观察轮廓，彩色小动物身上有颜色、花纹、眼睛、嘴巴这些细节，但影子是纯黑色块，