创作3：用 AI 做小游戏

先确定作品要解决什么

游戏可分为等待回答、已回答和已结束三个状态。按钮能否操作由状态决定，避免重复计分。打乱选项时，正确答案不能再依赖打乱前的位置，应使用稳定选项 id 或把正确标记和选项一起移动。

给 AI 的任务卡

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

请在单文件 HTML 问答游戏上增加题目与选项乱序。先定义 waiting、answered、finished 状态与合法操作。选项带稳定 id，判题不能使用打乱前的下标。一题只计分一次，记录错题并支持重新挑战。给出计分与状态转换的可测试函数，先写测试，再接界面。

从可运行的起点开始

下方是完整参考代码，也已放入练习草稿。点击“导出当前草稿”，再在预览中点击“下载文件”；把下载的文件重命名为 game.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><h2 id="question"></h2><div id="answers"></div>
<p id="result" role="status"></p><button id="next" disabled>下一题</button><button id="restart">重新挑战</button>
<script>
const questions = [
  {text:'3 + 4 = ?',options:['6','7','8'],correct:1},
  {text:'9 - 5 = ?',options:['4','5','3'],correct:0},
  {text:'2 × 3 = ?',options:['5','8','6'],correct:2}
];
let index = 0, score = 0, answered = false;
const next = document.getElementById('next');
function render() {
  answered = false;
  next.disabled = true;
  document.getElementById('position').textContent = '第 ' + (index + 1) + ' / ' + questions.length + ' 题';
  document.getElementById('question').textContent = questions[index].text;
  document.getElementById('result').textContent = '';
  const answers = document.getElementById('answers');
  answers.replaceChildren();
  questions[index].options.forEach((label, choice) => {
    const button = document.createElement('button');
    button.textContent = label;
    button.onclick = () => {
      if (answered) return;
      answered = true;
      const correct = choice === questions[index].correct;
      if (correct) score++;
      document.getElementById('result').textContent = correct ? '答对了！' : '再想一想，正确答案是 ' + questions[index].options[questions[index].correct];
      for (const item of answers.children) item.disabled = true;
      next.disabled = false;
    };
    answers.append(button);
  });
}
next.onclick = () => {
  if (!answered) return;
  if (index < questions.length - 1) { index++; render(); }
  else {
    next.disabled = true;
    document.getElementById('result').textContent = '本轮得分：' + score + ' / ' + questions.length;
  }
};
document.getElementById('restart').onclick = () => { index = 0; score = 0; render(); };
render();
</script>
</html>

做一次有理由的修改

以参考作品为基线，先抽出判题函数，再增加乱序和错题记录。一次只改一个功能。不要让随机顺序掩盖错误：测试时固定一组顺序，同时保留正常随机游戏。

用实际操作验收

测试选项重排后判题正确、重复提交只计一次、未作答不能前进、最后一题结束、重启清空状态、错题记录无重复。可补充几百轮纯逻辑运行，但自动检查不能代替手机与键盘试用。