如何制作一个简单的JavaScript测验：代码教程

测验很有趣！它们是学习新主题的好方法，并能让您通过有趣和 playful 的方式与观众互动。从开发者的角度来看，“如何制作JavaScript测验？”是学习Web开发的人们最常问的问题之一，这是有充分理由的。

编写自己的JavaScript测验游戏是一个绝佳的学习练习。它教您如何处理事件、操作DOM、处理用户输入以及使用本地存储来跟踪分数。当您有一个基本的测验运行后，还有一大堆可能性可以添加更高级的功能，例如分页。

在本教程中，我将逐步指导您如何制作一个JavaScript测验，您可以根据自己的需求进行调整并添加到自己的网站中。

开始前需要注意的事项

在开始之前，有几点需要了解：

这是一个前端教程，意味着任何知道如何查看页面源代码的人都可以找到答案。对于严肃的测验，数据需要通过后端处理，这超出了本教程的范围。
本文中的代码使用现代JavaScript语法（ES6+），这意味着它与任何版本的Internet Explorer都不兼容。但是，它在现代浏览器（包括Microsoft Edge）上运行良好。
您需要对HTML、CSS和JavaScript有一定的熟悉，但每行代码都会单独解释。

第1步 – JavaScript测验的基本结构

理想情况下，我们希望测验的问题和答案都在我们的JavaScript代码中，并让我们的脚本自动生成测验应用程序。这样，我们就不需要编写大量重复的标记，并且可以轻松添加和删除问题。

在这个例子中，我们将使用三个关键文件来构建我们的项目：

用于基本用户界面（UI）的HTML文件
用于样式的CSS文件
用于处理所有交互功能的JavaScript文件

HTML结构如下：

1
2
3


<div id="quiz"></div>
<button id="submit">Submit Quiz</button>
<div id="results"></div>

第2步 – 初始化JavaScript变量

现在，我们可以使用JavaScript的document.getElementById方法选择上述HTML元素，并将引用存储在JavaScript测验代码中：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


const quizContainer = document.getElementById('quiz');
const resultsContainer = document.getElementById('results');
const submitButton = document.getElementById('submit');

const myQuestions = [
  {
    question: "Who invented JavaScript?",
    answers: {
      a: "Douglas Crockford",
      b: "Sheryl Sandberg",
      c: "Brendan Eich"
    },
    correctAnswer: "c"
  },
  // 更多问题...
];

第3步 – 构建测验函数

现在我们有了问题列表，可以在页面上显示它们。为此，我们将使用一个名为buildQuiz()的函数：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


function buildQuiz(){
  const output = [];
  
  myQuestions.forEach((currentQuestion, questionNumber) => {
    const answers = [];
    
    for(letter in currentQuestion.answers){
      answers.push(
        `<label>
          <input type="radio" name="question${questionNumber}" value="${letter}">
          ${letter} :
          ${currentQuestion.answers[letter]}
        </label>`
      );
    }
    
    output.push(
      `<div class="question"> ${currentQuestion.question} </div>
      <div class="answers"> ${answers.join('')} </div>`
    );
  });
  
  quizContainer.innerHTML = output.join('');
}

第4步 – 显示测验结果

此时，我们想要构建我们的showResults函数来循环检查答案并显示结果：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


function showResults(){
  const answerContainers = quizContainer.querySelectorAll('.answers');
  let numCorrect = 0;

  myQuestions.forEach((currentQuestion, questionNumber) => {
    const answerContainer = answerContainers[questionNumber];
    const selector = `input[name=question${questionNumber}]:checked`;
    const userAnswer = (answerContainer.querySelector(selector) || {}).value;

    if(userAnswer === currentQuestion.correctAnswer){
      numCorrect++;
      answerContainers[questionNumber].style.color = 'lightgreen';
    }
    else{
      answerContainers[questionNumber].style.color = 'red';
    }
  });

  resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length}`;
}

第5步 – 添加样式

现在我们有一个可用的测验，让我们通过添加一些样式使其更加用户友好：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600);

body{
  font-size: 20px;
  font-family: 'Work Sans', sans-serif;
  color: #333;
  font-weight: 300;
  text-align: center;
  background-color: #f8f6f0;
}

/* 更多样式规则... */

第6步 – 实现分页

随着问题数量的增加，我们需要找到一种方法一次只显示一个问题。为此，我们需要：

显示和隐藏问题的方法
用于导航测验的按钮

HTML结构更新为：

1
2
3
4
5
6
7


<div class="quiz-container">
  <div id="quiz"></div>
</div>
<button id="previous">Previous Question</button>
<button id="next">Next Question</button>
<button id="submit">Submit Quiz</button>
<div id="results"></div>

JavaScript分页功能：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


function showSlide(n) {
  slides[currentSlide].classList.remove('active-slide');
  slides[n].classList.add('active-slide');
  currentSlide = n;
  
  if(currentSlide === 0){
    previousButton.style.display = 'none';
  }
  else{
    previousButton.style.display = 'inline-block';
  }
  
  if(currentSlide === slides.length-1){
    nextButton.style.display = 'none';
    submitButton.style.display = 'inline-block';
  }
  else{
    nextButton.style.display = 'inline-block';
    submitButton.style.display = 'none';
  }
}

下一步是什么？

现在您有了一个基本的JavaScript测验应用程序，是时候发挥创意并进行实验了。以下是一些建议：

尝试不同的方式来响应正确答案或错误答案
美化测验样式
添加进度条
让用户在提交前查看答案
提交后为用户提供答案摘要
更新导航以让用户跳转到任何问题编号
为每个结果级别创建自定义消息
添加在社交媒体上分享结果的按钮
使用localStorage保存最高分
添加倒计时计时器
将本文的概念应用到其他用途

常见问题解答

如何向JavaScript测验添加更多问题？ 只需在JavaScript代码中的问题数组中添加更多对象即可。

如何随机化测验中的问题顺序？ 可以使用sort()方法结合Math.random()函数来实现。

如何向测验添加计时器？ 可以使用JavaScript的setInterval()函数轻松添加计时器。

如何处理JavaScript测验中的多个正确答案？ 这涉及允许用户选择多个答案并检查是否有任何选定的答案正确。

是否必须维护单独的JavaScript文件和CSS文件？ 不是必须的，但通常被认为是最佳实践，因为它提高了代码的可读性和可维护性。

手把手教你构建一个简单的JavaScript测验应用

本文详细介绍了如何使用原生JavaScript创建一个交互式测验应用，涵盖从基础结构搭建到样式设计和分页功能的完整实现过程，包括事件处理、DOM操作和本地存储等核心技术。