创作1：用 AI 做学习卡

先确定作品要解决什么

一张卡的数据是稳定的 id、问题与答案；当前卡片位置和答案是否可见则属于界面状态。先验证基础翻卡，再设计“全部／未掌握”筛选。筛选改变后，下标可能失效，必须规定空列表时的行为。

给 AI 的任务卡

把主题和内容换成自己的版本，先检查助手复述的需求再生成代码。使用家长或学校允许的编程工具；本站提供的代码是预写参考，没有调用实时 AI。记录实际借助了什么帮助。

请用单文件 HTML 和原生 JavaScript 实现学习卡。卡片数据与 render 函数分离，以稳定 id 标识卡片。基础功能：答案初始隐藏、切卡隐藏、末尾循环。扩展：标记掌握，选择全部或未掌握；筛选为空时显示完成提示并禁用翻卡。暂不持久化，不联网。先列状态、边界与测试，再编码。

从可运行的起点开始

下方是完整参考代码，也已放入练习草稿。点击“导出当前草稿”，再在预览中点击“下载文件”；把下载的文件重命名为 cards.html，保留 .html 后缀，在电脑浏览器中打开。先验证原版，再另存自己的版本。代码在本地运行，不会训练或调用 GuppyLM。

<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>我的科学学习卡</title>
<style>
*{box-sizing:border-box}body{font:18px/1.7 system-ui;margin:24px auto;padding:0 20px;max-width:720px;color:#183b36;background:#f7faf9}
h1{font-size:28px}h2{font-size:22px}button,input{font:inherit}button,a{touch-action:manipulation}button{padding:10px 16px;margin:4px;border:1px solid #287b68;border-radius:6px;background:white;color:#183b36;cursor:pointer}button:disabled{opacity:.5;cursor:default}a{color:#1468a0}label{display:block;padding:6px 0}section{border-top:1px solid #bfcfc8;padding:16px 0}p,li{overflow-wrap:anywhere}img{max-width:100%}:focus-visible{outline:3px solid #cc7600;outline-offset:3px}
</style>
<h1>我的科学学习卡</h1>
<p id="position"></p>
<section><h2 id="question"></h2><p id="answer" hidden></p></section>
<button id="reveal">查看答案</button><button id="next">下一张</button>
<script>
const cards = [
  {id:'whale',question:'鲸鱼属于鱼类还是哺乳动物？',answer:'哺乳动物。鲸鱼用肺呼吸。'},
  {id:'sun',question:'太阳属于恒星还是行星？',answer:'恒星。它自身可以发光。'},
  {id:'ice',question:'冰变成液态水叫什么？',answer:'熔化。可以结合科学课本核对。'}
];
let index = 0;
const question = document.getElementById('question');
const answer = document.getElementById('answer');
const reveal = document.getElementById('reveal');
function render() {
  document.getElementById('position').textContent = (index + 1) + ' / ' + cards.length;
  question.textContent = cards[index].question;
  answer.textContent = cards[index].answer;
  answer.hidden = true;
  reveal.disabled = false;
}
reveal.onclick = () => { answer.hidden = false; reveal.disabled = true; };
document.getElementById('next').onclick = () => { index = (index + 1) % cards.length; render(); };
render();
</script>
</html>

做一次有理由的修改

在参考实现上加入掌握集合与筛选，明确 index 是当前筛选结果中的位置。变更筛选时重置或修正下标，避免访问不存在的卡片。先在内存中做好，再选做本地保存；不要把筛选中的位置当作永久身份。

用实际操作验收

测试正常翻卡、最后一张循环、切卡隐藏答案、只剩一张未掌握、全部掌握后空列表、切回全部。再修改卡片顺序，检查掌握状态仍跟随 id。知识内容与程序行为分别验收。