给访客的测验 · 跟马丁学编程

它会怎么工作

你要做一个测验：一个问题、三个选项、点击作答、最后显示分数。测验数据（问题和答案）存在 对象数组 里——听起来高级，其实就是整齐排列的列表。

跟我看：测验数据

const questions = [
  {
    text: "How many legs does a spider have?",
    choices: ["6", "8", "10"],
    correct: 1,
  },
  {
    text: "Which animal is the fastest?",
    choices: ["cheetah", "falcon", "hare"],
    correct: 1,
  },
  {
    text: "What's the name of our website?",
    choices: ["Code with Martin", "Code with Charlie", "Web with Wendy"],
    correct: 0,
  },
];

数组 [...] 是值的列表——你之前见过（photos 也是数组）。
对象 {...} 是带命名隔间的盒子：text、choices、correct。
correct: 1 意思是：选项 1 正确——从 0 开始数，所以是第二个。

跟我看：测验引擎

HTML：

<div class="card">
  <h2 id="quiz-question"></h2>
  <div id="quiz-choices"></div>
  <p id="quiz-status"></p>
</div>

JavaScript：

const questionEl = document.getElementById("quiz-question");
const choicesEl = document.getElementById("quiz-choices");
const statusEl = document.getElementById("quiz-status");

let questionNumber = 0;
let points = 0;

function showQuestion() {
  const question = questions[questionNumber];
  questionEl.textContent = question.text;
  choicesEl.innerHTML = "";   // clear the old buttons

  question.choices.forEach((choice, index) => {
    const button = document.createElement("button");
    button.textContent = choice;
    button.addEventListener("click", () => answer(index));
    choicesEl.appendChild(button);
  });

  statusEl.textContent = "Question " + (questionNumber + 1) + " of " + questions.length;
}

function answer(index) {
  if (index === questions[questionNumber].correct) {
    points++;
  }

  questionNumber++;

  if (questionNumber < questions.length) {
    showQuestion();
  } else {
    questionEl.textContent = "Done! 🎉";
    choicesEl.innerHTML = "";
    statusEl.textContent = "You scored " + points + " out of " + questions.length + " points.";
  }
}

showQuestion();

新东西：

document.createElement("button")——JavaScript 不仅能找元素，还能创建它们。每个选项创建一个按钮。
appendChild(...)——把创建的元素插入页面。
innerHTML = ""——清空元素内容（下一题前清掉旧按钮）。
两个函数互相传工作：showQuestion() 画界面，answer() 判分。把程序拆成小函数是专业习惯。

轮到你了 💪

用 你自己的 问题做测验——至少五题。项目想法：

🏫 关于我们学校的测验——学校多少岁？校长是谁？有多少间教室？
🙋 你有多了解我？——我最爱吃什么？我几岁？我的狗叫什么？
🌍 旅行测验——克罗地亚首都是哪？你国家最高的山？海在哪个方向？
⚽ 你有多了解我们队？——队长是谁？Tom 进了多少球？俱乐部颜色是什么？

只换 questions 数组的内容——测验引擎不变。这就是数据和逻辑分开的原因！

额外：答案彩色反馈

想让正确答案闪绿？调整 answer，先给按钮上色，一秒后再显示下一题：

function answer(index) {
  const buttons = choicesEl.querySelectorAll("button");
  const correct = questions[questionNumber].correct;

  buttons[correct].style.backgroundColor = "#16a34a";
  if (index !== correct) {
    buttons[index].style.backgroundColor = "#dc2626";
  } else {
    points++;
  }

  setTimeout(() => {
    questionNumber++;
    if (questionNumber < questions.length) {
      showQuestion();
    } else {
      questionEl.textContent = "Done! 🎉";
      choicesEl.innerHTML = "";
      statusEl.textContent = "You scored " + points + " out of " + questions.length + " points.";
    }
  }, 1000);
}

setTimeout(() => {...}, 1000) 意思是”1000 毫秒后运行这个。” style.backgroundColor 从 JavaScript 直接改 CSS。

✅

检查一下： 测验一题接一题，记分，最后显示结果。你刚刚写了第一个真正的应用——有数据、逻辑和用户界面。

这堂课你要记住

数据和逻辑（函数）分开——换问题就得到新测验。
JavaScript 能创建元素：createElement + appendChild。
setTimeout 延迟运行代码。