创作2：用 AI 做互动故事

先确定作品要解决什么

先画三到四个故事框，用箭头连接选择与后果。主角用虚构的小鱼，每个选择都要真的改变后面的内容。AI 可以帮你补句子和按钮，你来决定故事方向；科学知识与虚构情节要分清。

给 AI 的任务卡

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

请按我的故事图制作单文件 HTML 互动故事。每一幕有标题、正文和选择按钮；至少两个不同结局；结局没有继续选择；始终能回到开头。切换时清除上一幕的按钮。全部文字是虚构，不联网。先用文字列出分支图，等我检查后生成代码。

从可运行的起点开始

下方是完整参考代码，也已放入练习草稿。点击“导出当前草稿”，再在预览中点击“下载文件”；把下载的文件重命名为 story.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>虚构故事</p><section><h2 id="scene-title"></h2><p id="scene-text"></p><div id="choices"></div></section>
<button id="restart">回到故事开头</button>
<script>
const scenes = {
  start:{title:'出发',text:'小鱼想为海底图书角找一个安静的位置。它先去哪里？',choices:[['观察海草区','garden'],['观察礁石区','reef']]},
  garden:{title:'海草旁的图书角',text:'这里水流平缓。小鱼邀请伙伴一起整理书架，完成了计划。',choices:[]},
  reef:{title:'礁石边',text:'这里很热闹。怎样让图书角更安静？',choices:[['与伙伴商量安静时段','quiet'],['换到海草区','garden']]},
  quiet:{title:'一起商量',text:'伙伴们约好阅读时段，小鱼把计划画在公告板上。',choices:[]}
};
function show(id) {
  const scene = scenes[id];
  if (!scene) { document.getElementById('scene-text').textContent = '这一页还没写好，请回到开头。'; document.getElementById('choices').replaceChildren(); return; }
  document.getElementById('scene-title').textContent = scene.title;
  document.getElementById('scene-text').textContent = scene.text;
  const choices = document.getElementById('choices');
  choices.replaceChildren();
  for (const [label,target] of scene.choices) {
    const button = document.createElement('button');
    button.textContent = label;
    button.onclick = () => show(target);
    choices.append(button);
  }
}
document.getElementById('restart').onclick = () => show('start');
show('start');
</script>
</html>

做一次有理由的修改

给参考故事增加一个新选择和一个新结尾。先写清按钮文字、要跳到的场景名字和结尾内容，再请 AI 只补这条路线。改完把旧路线也重新走一遍。

用实际操作验收

从开头走遍每条路线，检查按钮与正文对应、不同结局确实不同、结尾没有旧按钮、重新开始能回到开头。让同学说出他为什么选择某条路，观察你的文字是否清楚。