javascript如何制作一个出题器-CFANZ编程社区

JavaScript如何制作一个出题器

问题描述

我们要解决的具体问题是制作一个出题器，该出题器可以随机生成数学题目，并根据用户的答案给出正确或错误的反馈。

解决方案

为了实现这个出题器，我们可以使用JavaScript编写一个简单的网页应用。以下是一个基本的方案：

创建一个HTML文件，命名为quiz.html，并在文件中添加必要的HTML结构和样式。

<!DOCTYPE html>
<html>
<head>
  <title>出题器</title>
  <link rel="stylesheet" type="text/css" href="quiz.css">
</head>
<body>
  <header>
    出题器
  </header>
  <section id="question">
    <h2>问题</h2>
    <p id="question-text"></p>
    <input type="text" id="answer" placeholder="请输入答案">
    <button id="submit">提交</button>
    <p id="feedback"></p>
  </section>
  <script src="quiz.js"></script>
</body>
</html>

创建一个CSS文件，命名为quiz.css，并为网页的元素添加一些基本的样式。

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

header h1 {
  margin: 0;
}

section {
  padding: 20px;
}

h2 {
  margin-top: 0;
}

#feedback {
  font-weight: bold;
}

button {
  margin-top: 10px;
}

创建一个JavaScript文件，命名为quiz.js，并编写生成题目和验证答案的代码。

// 生成两个随机数
function generateNumbers() {
  return [Math.floor(Math.random() * 10), Math.floor(Math.random() * 10)];
}

// 生成问题
function generateQuestion() {
  var numbers = generateNumbers();
  var questionText = "计算 " + numbers[0] + " + " + numbers[1] + " 的值是多少？";
  document.getElementById("question-text").textContent = questionText;
}

// 验证答案
function checkAnswer() {
  var answer = parseInt(document.getElementById("answer").value);
  var numbers = generateNumbers();
  var correctAnswer = numbers[0] + numbers[1];
  
  if (answer === correctAnswer) {
    document.getElementById("feedback").textContent = "回答正确！";
  } else {
    document.getElementById("feedback").textContent = "回答错误，正确答案是 " + correctAnswer;
  }
}

// 为提交按钮添加点击事件监听器
document.getElementById("submit").addEventListener("click", checkAnswer);

// 页面加载时生成第一个问题
generateQuestion();

以上的代码实现了一个简单的出题器。每次刷新页面时，都会生成一个随机的加法题目，并在用户提交答案后给出正确或错误的反馈。

运行结果

以下是运行出题器的一些示例：

注：这里使用mermaid语法中的journey来表示整个运行流程。

journey
  title 运行出题器的示例

  section 生成问题
    quiz.js ==> generateQuestion()
    quiz.js -->> quiz.html: 显示问题

  section 用户回答问题
    quiz.html -->> quiz.js: 获取用户答案
    quiz.js --> checkAnswer()
    quiz.js -->> quiz.html: 显示反馈

  section 生成下一个问题
    quiz.js ==> generateQuestion()
    quiz.js -->> quiz.html: 显示问题

  section 用户回答问题
    quiz.html -->> quiz.js: 获取用户答案
    quiz.js --> checkAnswer()
    quiz.js -->> quiz.html: 显示反馈

  section ...
    ...

用户打开quiz.html后，会看到一个问题，如下所示：

问题

计算 7 + 3 的值是多少？

[输入答案的输入框] [提交按钮] [反馈信息]

用户输入答案后点击提交按钮，出题器会验证答案并显示反馈信息。

例如，如果用户输入答案10并点击提交按钮，出题器会显示以下反馈：

回答正确！

如果用户输入答案错误，出题器会显示以下反馈：

回答错误，正确答案是 10

出题器会持续