让页面动起来

会动的页面才好玩——用「当……就……」把玩法说清楚。

⏱ 5–8 分钟讲 · 例 · 练 · 卡编号 make-10

学习证据学完后，怎么核对？如何核对 · 适用边界 · 最后复核

把学习结果留在一个可以回看、可以复做的动作里；这一区只写学生能自己检查的证据。

如何核对

用于小型作品的迭代和表达；受众、资源和场景变化时需重定验收标准。

2026 年 7 月 12 日

这是内容复核日期，不是学习截止日期。

讲解页是拿来读的。加上一点交互，页面就换了性质：点一下显示答案、按一下换一题、倒计时快到时数字变红——好玩的核心不是画面炫，是页面会回应你。

任何交互拆开都是两半：触发（用户干了什么）＋反应（页面变什么）。派活时用「当……就……」句式，一句说一个交互：

这个句式的妙处：不懂一行代码，也能把玩法说到 AI 能准确实现的精度。「做个能点的效果」出不了活；三句「当就」立刻能开工。

迭代三要诀在这里更要紧：交互一个一个加，加一个验一个——两个一起上，出了毛病分不清是谁闹的。

核心句：交互＝当（触发）＋就（反应）。说得出「当就」，页面就动得起来。

小雨想把自己的英语单词页升级成「玩的」。看她两轮各加一个交互：

小雨给我这个单词页（附文件内容）加一个玩法。当页面打开时，每个单词的中文意思都显示成「？？？」；当点击「？？？」，就翻出真正的意思；当再点一次，就变回「？？？」。一次只做这一个交互，其他别动。

AI好，这样就能先自测再核对。整份文件给你（略），改动只在意思那一列。

小雨验收过了，好玩。下一个：当点击某一行的「记住了」按钮，就把那一行变淡；当点页面顶部的「重置」，就全部恢复原样。

AI加好了（略）。变淡的行还会自动挪到列表底部，方便你集中打没记住的——这条是我加的，不要可以去掉。

小雨挪到底部这条我要了，算你提得好。这版收工——我妹现在抢着点「？？？」。

注意分工：玩法是小雨设计的——AI 只是把她的「当就」翻译成代码。它主动多给的那条，她也是验过才收的。

想让 AI 给页面加交互，哪种说法最能一次做对？

上手 · 15 分钟 · 给作品装开关

怎么算过关：页面新增至少 2 个交互，每个都对应你写下的一句「当就」——页面确实按你说的那样动。

复习卡 · 点一下翻面

交互的「语法」是什么？加交互的节奏是什么？

答案

交互＝当（触发）＋就（反应），一句说一个。节奏：一次加一个，加一个验一个。好玩的核心是页面会回应人。