创作1：用 AI 做学习卡

先确定作品要解决什么

选正在学习的三个知识点，先在纸上写问题和答案，再查课本。AI 可以帮你把卡片变成网页，但答案是否正确仍要核对。参考例子用了鲸鱼、太阳和冰，你可以换成自己的主题。

给 AI 的任务卡

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

请做单文件 HTML 学习卡，包含3张科学卡片，字段为 id、question、answer。打开时隐藏答案；点击查看才显示；下一张必须重新隐藏答案；最后一张之后回到第一张。显示当前位置，不联网、不安装依赖。先复述规则，再给代码并解释下一张怎样工作。

从可运行的起点开始

下方是完整参考代码，也已放入练习草稿。点击“导出当前草稿”，再在预览中点击“下载文件”；把下载的文件重命名为 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>

做一次有理由的修改

让 AI 帮你换成三个已核对的知识点，并增加第四张。要求它只改卡片数据，不改翻卡规则。你来检查问题与答案是否一一对应；没有用 AI 时，直接照着对象格式修改参考代码。

用实际操作验收

依次检查：初始答案隐藏；查看后显示正确答案；切到下一张时答案重新隐藏；四张都能到达；最后一张回到第一张。先自己作答再翻卡，记录哪道题还没理解。