创作3：用 AI 做小游戏

先确定作品要解决什么

先决定一轮几题、什么时候加分、什么时候结束。参考作品是三题心算挑战，没有计时压力。选错后能看到正确答案，同一题只能计分一次。主题可以换成词语或科学知识，但先核对每题答案。

给 AI 的任务卡

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

请制作单文件 HTML 三题问答小游戏，每题3个选项。第一次选择后显示对错，锁定本题选项，答对加1分；回答后才能下一题；结束显示得分；重新挑战清零。按钮可用键盘操作，不用倒计时和外部服务。先列规则与测试，再生成程序。

从可运行的起点开始

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

做一次有理由的修改

请 AI 帮你加入第四道自己设计的题，保持正确选项与答案一致。再让它解释为什么点两次不该加两次分。把“重新挑战”作为必须保留的功能。

用实际操作验收

分别试全对、全错、混合答案；检查一题不能重复加分、未答不能下一题、最后显示分母4、重新挑战从0分开始。请一位同学试一次，只记录他卡在哪里，不替他点击。