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

测验很有趣！它们是学习新主题的好方法，它们使您能够以有趣而有趣的方式吸引观众。从开发人员的角度来看，“如何进行JavaScript测验？”是人们学习Web开发的最常见问题之一，这是有充分理由的。

>编码自己的JavaScript测验游戏是一个很棒的学习练习。它教您如何处理事件，操纵DOM，处理用户输入，并使用本地存储来跟踪其分数。当您进行基本的测验启动和运行时，会有很多可能添加更多高级功能的可能性，例如分页。

> 在本教程中，我将介绍如何在JavaScript中进行测验，以适应您的需求并添加到自己的网站上。如果您想查看我们的最终结果，可以向前跳过并查看工作的JavaScript测验代码。

有关更多深入的JavaScript知识和挑战，请获得我们的免费书籍：学习与JavaScript进行编码。

>开始

之前需要注意的事情

在开始之前，这里有几件事要知道：

这是一个前端教程，这意味着任何知道如何通过页面源代码查看的人都可以找到答案。对于严重的测验，需要通过后端处理数据，这超出了本教程的范围。

>本文中的代码使用现代JavaScript语法（ES6），这意味着它与任何版本的Internet Explorer都不兼容。但是，它将在现代浏览器（包括Microsoft Edge）上工作。

如果您需要支持较旧的浏览器，我写了与IE8兼容的JavaScript测验教程。或者，如果您想在ES6上进行复习，请在SitePoint Premium上查看Darin Haener的这门课程。

• >您需要熟悉HTML，CSS和JavaScript，但是每行代码都会单独解释。
>
步骤1 - JavaScript测验的基本结构
>理想情况下，我们希望测验的问题和答案放在我们的JavaScript代码中，并使我们的脚本自动生成测验应用程序。这样，我们就不需要写很多重复的标记，我们可以轻松地添加和删除问题。
• >
在此示例中，我们将使用三个关键文件来构建我们的项目：>

基本用户界面（UI）的HTML文件。一个用于样式的CSS文件。

>一个用于处理所有交互功能的JavaScript文件。

>

但是，如果您愿意，您还可以将CSS和JavaScript代码直接包含在HTML文件中，作为Inline Code。

在学习如何在HTML和JavaScript中进行测验时，重要的是要了解HTML结构如何与JavaScript逻辑相互作用。因此，作为第一步，让我们设置JavaScript测验游戏的HTML结构。

• a
  举行测验。
• a 提交答案。
• a
  显示结果。>

  这是这样的外观：

  >

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

  这个结构是如何创建测验HTML代码的简单示例，该代码是您的JavaScript测验模板的基础。如果您现在运行该应用程序，则只需看到一个“提交测验”按钮。

  >

  >步骤2 - 初始化JavaScript变量

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

  <span>const quizContainer = document.getElementById('quiz');
  </span><span>const resultsContainer = document.getElementById('results');
  </span><span>const submitButton = document.getElementById('submit');</span>

  我们测验应用程序需要的下一件事是要显示一些问题。我们将使用JavaScript对象文字来表示单个问题和一个数组，以保存组成我们测验应用程序的所有问题。使用阵列将使问题容易迭代：>

  可以随意提出任意多的问题或答案。

  <span>const myQuestions = [
  </span>  <span>{
  </span>    <span>question: "Who invented JavaScript?",
  </span>    <span>answers: {
  </span>      <span>a: "Douglas Crockford",
  </span>      <span>b: "Sheryl Sandberg",
  </span>      <span>c: "Brendan Eich"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which one of these is a JavaScript package manager?",
  </span>    <span>answers: {
  </span>      <span>a: "Node.js",
  </span>      <span>b: "TypeScript",
  </span>      <span>c: "npm"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which tool can you use to ensure code quality?",
  </span>    <span>answers: {
  </span>      <span>a: "Angular",
  </span>      <span>b: "jQuery",
  </span>      <span>c: "RequireJS",
  </span>      <span>d: "ESLint"
  </span>    <span>},
  </span>    <span>correctAnswer: "d"
  </span>  <span>}
  </span><span>];
  </span>

  >

  >

  note

  >：由于这是一个数组，这些问题将以列出的顺序出现。如果您想在将问题呈现给用户之前以任何方式对问题进行排序，请在> 上查看我们的快速提示。 >步骤3 - 构建测验函数 >现在我们有了问题列表，我们可以在页面上显示它们。为此，我们将使用名为buildquix（）的函数。让我们逐行浏览以下JavaScript行以查看其工作原理：> 首先，我们创建一个输出变量，以包含所有HTML输出，包括问题和答案选择。

  。

  接下来，我们可以开始为每个问题构建HTML。我们需要循环解决这样的每个问题：

  >简洁，我们正在使用箭头功能在每个问题上执行我们的操作。因为这是在foreach循环中，所以我们获得当前值，索引（数组中当前项目的位置编号）以及数组本身作为参数。我们只需要当前值和索引，出于我们的目的，我们将分别命名CurrentQuestion和问卷。

  <span>function buildQuiz(){
  </span>  <span>// variable to store the HTML output
  </span>  <span>const output = [];
  </span>
    <span>// for each question...
  </span>  myQuestions<span>.forEach(
  </span>    <span>(currentQuestion<span>, questionNumber</span>) => {
  </span>
        <span>// variable to store the list of possible answers
  </span>      <span>const answers = [];
  </span>
        <span>// and for each available answer...
  </span>      <span>for(letter in currentQuestion.answers){
  </span>
          <span>// ...add an HTML radio button
  </span>        answers<span>.push(
  </span>          <span><span>`<label>
  </span></span><span><span>            <input type="radio" name="question<span>${questionNumber}</span>" value="<span>${letter}</span>">
  </span></span><span><span>            <span>${letter}</span> :
  </span></span><span><span>            <span>${currentQuestion.answers[letter]}</span>
  </span></span><span><span>          </label>`</span>
  </span>        <span>);
  </span>      <span>}
  </span>
        <span>// add this question and its answers to the output
  </span>      output<span>.push(
  </span>        <span><span>`<div > <span>${currentQuestion.question}</span> </div>
  </span></span><span><span>        <div > <span>${answers.join('')}</span> </div>`</span>
  </span>      <span>);
  </span>    <span>}
  </span>  <span>);
  </span>
    <span>// finally combine our output list into one string of HTML and put it on the page
  </span>  quizContainer<span>.innerHTML = output.join('');
  </span><span>}</span>

  >

  现在，让我们看一下循环中的代码：

  对于每个问题，我们都需要生成正确的HTML。因此，我们的第一步是创建一个数组来保存可能的答案列表。

  接下来，我们将使用一个循环来填写当前问题的可能答案。对于每个选择，我们都创建一个HTML广播按钮，我们将其包含在元素中。这样可以确保用户可以单击答案文本上的任何地方以选择该答案。如果省略了标签，则用户将必须单击“广播”按钮本身，这不是很容易访问。

  >

  >在这里，我们使用的模板文字是字符串，但功能更强大。我们将利用模板文字的以下功能：

  多行能力。
  >不需要在引号中使用逃生引号，​​因为模板文字使用了背景。>
  • >字符串插值允许将JavaScript表达式嵌入到您的字符串中：$ {code_goes_here}。
  >一旦我们拥有答案按钮列表，我们就可以将问题和答案html推入我们的整体输出列表。

  请注意，我们使用模板字面和一些嵌入式表达式来首先创建问题div，然后创建答案div。联接表达式获取我们的答案列表，并将它们放在一个字符串中，我们可以输出我们的答案div。

  >现在我们已经为每个问题生成了HTML，我们可以将所有问题加入其中并在页面上显示：>

  现在，我们的buildquiz函数已完成，您应该能够运行测验应用程序并查看显示的问题。

  但是，您的代码结构很重要。由于所谓的时间死区，您无法在定义问题数组之前参考问题。

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

  回顾一下，这是正确的结构：

  >

  步骤4 - 显示测验结果 在这一点上，我们想构建我们的ShowResults功能，以循环回答，检查它们并显示结果。这是任何测验游戏JavaScript实现的关键部分，因为它会根据用户的性能立即向用户提供反馈。

  这是该功能，接下来我们将详细介绍：>

  首先，我们在测验的HTML中选择所有答案容器。然后，我们将创建变量以跟踪用户当前答案和正确答案的总数。

  >现在，我们可以循环浏览每个问题并检查答案。

  <span>const quizContainer = document.getElementById('quiz');
  </span><span>const resultsContainer = document.getElementById('results');
  </span><span>const submitButton = document.getElementById('submit');</span>

  >

  我们将使用3个步骤：

  在html中找到所选答案。

  处理答案是正确的。

  处理答案是错误的情况。

  <span>const myQuestions = [
  </span>  <span>{
  </span>    <span>question: "Who invented JavaScript?",
  </span>    <span>answers: {
  </span>      <span>a: "Douglas Crockford",
  </span>      <span>b: "Sheryl Sandberg",
  </span>      <span>c: "Brendan Eich"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which one of these is a JavaScript package manager?",
  </span>    <span>answers: {
  </span>      <span>a: "Node.js",
  </span>      <span>b: "TypeScript",
  </span>      <span>c: "npm"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which tool can you use to ensure code quality?",
  </span>    <span>answers: {
  </span>      <span>a: "Angular",
  </span>      <span>b: "jQuery",
  </span>      <span>c: "RequireJS",
  </span>      <span>d: "ESLint"
  </span>    <span>},
  </span>    <span>correctAnswer: "d"
  </span>  <span>}
  </span><span>];
  </span>

  >让我们更仔细地看一下我们如何在html中找到所选答案：

  <span>function buildQuiz(){
  </span>  <span>// variable to store the HTML output
  </span>  <span>const output = [];
  </span>
    <span>// for each question...
  </span>  myQuestions<span>.forEach(
  </span>    <span>(currentQuestion<span>, questionNumber</span>) => {
  </span>
        <span>// variable to store the list of possible answers
  </span>      <span>const answers = [];
  </span>
        <span>// and for each available answer...
  </span>      <span>for(letter in currentQuestion.answers){
  </span>
          <span>// ...add an HTML radio button
  </span>        answers<span>.push(
  </span>          <span><span>`<label>
  </span></span><span><span>            <input type="radio" name="question<span>${questionNumber}</span>" value="<span>${letter}</span>">
  </span></span><span><span>            <span>${letter}</span> :
  </span></span><span><span>            <span>${currentQuestion.answers[letter]}</span>
  </span></span><span><span>          </label>`</span>
  </span>        <span>);
  </span>      <span>}
  </span>
        <span>// add this question and its answers to the output
  </span>      output<span>.push(
  </span>        <span><span>`<div > <span>${currentQuestion.question}</span> </div>
  </span></span><span><span>        <div > <span>${answers.join('')}</span> </div>`</span>
  </span>      <span>);
  </span>    <span>}
  </span>  <span>);
  </span>
    <span>// finally combine our output list into one string of HTML and put it on the page
  </span>  quizContainer<span>.innerHTML = output.join('');
  </span><span>}</span>

  首先，我们要确保我们在答案容器中查看当前问题。

  在下一行中，我们定义一个CSS选择器，该选择器将使我们查看哪个广播按钮。 然后，我们正在使用JavaScript的QuerySelector在先前定义的AnswerContainer中搜索我们的CSS选择器。本质上，这意味着我们会发现选中了哪个答案的广播按钮。

  >

  >最后，我们可以通过使用.Value获得该答案的值。

  处理不完整的用户输入

  >用户留下答案空白怎么办？在这种情况下，使用.value会导致错误，因为您无法获得不存在的东西的值。为了解决这个问题，我们添加了||，意思是“或”，{}是一个空对象。现在，总体声明说：

  获取对我们选定的答案元素的引用，或者如果不存在，请使用一个空对象。

  获取第一个语句中任何内容的值。

  • 结果，该值要么是用户的答案，要么是未定义的，这意味着用户可以跳过问题而不会崩溃我们的测验应用程序。
  • 评估答案并显示结果

  我们的答案检查循环中的下一个陈述将使我们处理正确且错误的答案。

  >

  如果用户的答案与正确的选择相匹配，请增加一个正确答案的数量，并（（可选））选择一组绿色。如果答案是错误的或空白的，请为答案选择红色（再次，可选）。>

  >回答检查循环完成后，我们可以显示用户正确的问题：>

  >现在我们有一个工作JavaScript测验！

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

  如果您愿意，可以将整个测验包装在IIFE（立即调用函数表达式）中，该功能是在定义它后立即运行的函数。这将使您的变量不在全局范围之外，并确保您的测验应用不会干扰页面上运行的任何其他脚本。

  >现在您已经准备好了！随意添加或删除问题和答案，并按照您的意愿进行测验。

  <span>const quizContainer = document.getElementById('quiz');
  </span><span>const resultsContainer = document.getElementById('results');
  </span><span>const submitButton = document.getElementById('submit');</span>

  现在，如果您运行了应用程序，则可以选择答案并提交测验以获取结果。

  <span>const myQuestions = [
  </span>  <span>{
  </span>    <span>question: "Who invented JavaScript?",
  </span>    <span>answers: {
  </span>      <span>a: "Douglas Crockford",
  </span>      <span>b: "Sheryl Sandberg",
  </span>      <span>c: "Brendan Eich"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which one of these is a JavaScript package manager?",
  </span>    <span>answers: {
  </span>      <span>a: "Node.js",
  </span>      <span>b: "TypeScript",
  </span>      <span>c: "npm"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which tool can you use to ensure code quality?",
  </span>    <span>answers: {
  </span>      <span>a: "Angular",
  </span>      <span>b: "jQuery",
  </span>      <span>c: "RequireJS",
  </span>      <span>d: "ESLint"
  </span>    <span>},
  </span>    <span>correctAnswer: "d"
  </span>  <span>}
  </span><span>];
  </span>

  >步骤5 - 添加样式

  以来，我们进行了一个工作测验，让我们通过添加一些样式使其更加用户友好。但是，我不会详细介绍每种样式的细​​节。您可以将以下代码直接复制到styles.css文件中。

  >

  在这一点上，您的测验看起来像这样（带有一点点样式）

  步骤6 - 实施分页

  如您在上面的图像中所看到的，测验中的问题接一个地订购。我们必须向下滚动以选择答案。尽管这三个问题看起来不错，但是当问题数量增加时，您可能会开始努力回答它们。因此，我们需要找到一种通过分页一次仅显示一个问题的方法。

  为此，您需要：

  一种显示和隐藏问题的方法。

  >浏览测验的按钮。
  • 因此，让我们对我们的代码进行一些调整，从HTML开始：

  大多数标记与以前相同，但是现在我们添加了导航按钮和测验容器。测验容器将帮助我们将问题定位为我们可以显示和隐藏的层。

  下一

  接下来，我们可以使用一些CSS定位使幻灯片坐在彼此的层上。在此示例中，您会注意到我们正在使用Z indexes和不透明度过渡来允许我们的幻灯片逐渐消失。 CSS可能是这样的：

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

  >

  >现在，我们将添加一些JavaScript来使分页工作。和以前一样，订单很重要，因此这是我们代码的修订结构：

  >我们可以从一些变量开始，以存储我们导航按钮的引用，并跟踪我们正在使用的幻灯片。如上图所示，将其添加到Buildquiz（）之后：

  <span>const quizContainer = document.getElementById('quiz');
  </span><span>const resultsContainer = document.getElementById('results');
  </span><span>const submitButton = document.getElementById('submit');</span>

  >

  接下来，我们将编写一个函数以显示幻灯片。将其添加到现有函数（buildquiz and ShowResults）下方：>>>

  <span>const myQuestions = [
  </span>  <span>{
  </span>    <span>question: "Who invented JavaScript?",
  </span>    <span>answers: {
  </span>      <span>a: "Douglas Crockford",
  </span>      <span>b: "Sheryl Sandberg",
  </span>      <span>c: "Brendan Eich"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which one of these is a JavaScript package manager?",
  </span>    <span>answers: {
  </span>      <span>a: "Node.js",
  </span>      <span>b: "TypeScript",
  </span>      <span>c: "npm"
  </span>    <span>},
  </span>    <span>correctAnswer: "c"
  </span>  <span>},
  </span>  <span>{
  </span>    <span>question: "Which tool can you use to ensure code quality?",
  </span>    <span>answers: {
  </span>      <span>a: "Angular",
  </span>      <span>b: "jQuery",
  </span>      <span>c: "RequireJS",
  </span>      <span>d: "ESLint"
  </span>    <span>},
  </span>    <span>correctAnswer: "d"
  </span>  <span>}
  </span><span>];
  </span>

  这是前三行的作用：

  >

  <span>function buildQuiz(){
  </span>  <span>// variable to store the HTML output
  </span>  <span>const output = [];
  </span>
    <span>// for each question...
  </span>  myQuestions<span>.forEach(
  </span>    <span>(currentQuestion<span>, questionNumber</span>) => {
  </span>
        <span>// variable to store the list of possible answers
  </span>      <span>const answers = [];
  </span>
        <span>// and for each available answer...
  </span>      <span>for(letter in currentQuestion.answers){
  </span>
          <span>// ...add an HTML radio button
  </span>        answers<span>.push(
  </span>          <span><span>`<label>
  </span></span><span><span>            <input type="radio" name="question<span>${questionNumber}</span>" value="<span>${letter}</span>">
  </span></span><span><span>            <span>${letter}</span> :
  </span></span><span><span>            <span>${currentQuestion.answers[letter]}</span>
  </span></span><span><span>          </label>`</span>
  </span>        <span>);
  </span>      <span>}
  </span>
        <span>// add this question and its answers to the output
  </span>      output<span>.push(
  </span>        <span><span>`<div > <span>${currentQuestion.question}</span> </div>
  </span></span><span><span>        <div > <span>${answers.join('')}</span> </div>`</span>
  </span>      <span>);
  </span>    <span>}
  </span>  <span>);
  </span>
    <span>// finally combine our output list into one string of HTML and put it on the page
  </span>  quizContainer<span>.innerHTML = output.join('');
  </span><span>}</span>

  >通过删除Active-Slide类，隐藏当前的幻灯片。

  通过添加Active-Slide类显示新的幻灯片。

  myQuestions<span>.forEach( (currentQuestion<span>, questionNumber</span>) => {
  </span>  <span>// the code we want to run for each question goes here
  </span><span>});</span>

  >

  更新当前的幻灯片。

  <span>// we'll want to store the list of answer choices
  </span><span>const answers = [];
  </span>
  <span>// and for each available answer...
  </span><span>for(letter in currentQuestion.answers){
  </span>
    <span>// ...add an html radio button
  </span>  answers<span>.push(
  </span>    <span><span>`<label>
  </span></span><span><span>      <input type="radio" name="question<span>${questionNumber}</span>" value="<span>${letter}</span>">
  </span></span><span><span>      <span>${letter}</span> :
  </span></span><span><span>      <span>${currentQuestion.answers[letter]}</span>
  </span></span><span><span>    </label>`</span>
  </span>  <span>);
  </span><span>}
  </span>
  <span>// add this question and its answers to the output
  </span>output<span>.push(
  </span>  <span><span>`<div > <span>${currentQuestion.question}</span> </div>
  </span></span><span><span>  <div > <span>${answers.join('')}</span> </div>`</span>
  </span><span>);
  </span>

  下一行介绍以下JavaScript逻辑：

  • 如果我们在第一张幻灯片上，请隐藏
  上一个幻灯片
  • 按钮。否则，显示按钮。
  • 如果我们在最后一个幻灯片上，请隐藏
  下一个幻灯片

  按钮，并显示

  > submit

  按钮。否则，显示

  下一个幻灯片
  • 按钮，然后隐藏提交按钮。
  。
  • >写下功能后，我们可以立即致电Showslide（0）显示第一张幻灯片。这应该是在分页代码之后出现的： 接下来，我们可以编写功能以使导航按钮工作。这些位于显示屏函数下方： >在这里，我们正在利用我们的Showslide功能，以允许我们的导航按钮显示上一张幻灯片和下一个幻灯片。

    >最后，我们需要将导航按钮连接到这些功能上。这是在代码末尾出现的：

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

    现在您的测验有工作导航！

    下一步是什么？

    >现在您有了一个基本的JavaScript测验应用程序，是时候获得创造性和实验了。

    >

    以下是您可以尝试的一些建议：

    >
    • >尝试不同的答案方式或错误的答案。
    >
    • 样式的测验很好。
    >
    • 添加一个进度栏。
    • >让用户在提交之前审查答案。
    • >在提交后的答案后，给用户一个摘要。
    >
    • 更新导航以让用户跳过任何问题编号。
    >
    • >为每个结果级别创建自定义消息。例如，如果有人得分8/10或更高，请称他们为测验忍者。
    添加一个按钮以在社交媒体上共享结果。
    >使用localstorage节省高分。
    • >
    添加一个倒计时计时器，以查看人们是否可以击败时钟。>
    • 将本文中的概念应用于其他用途，例如项目价格估计器或社交“哪个角度”测验。
    。
    • 关于如何制作简单的JavaScript测验
    的常见问题
    我如何在JavaScript测验中添加更多问题？

    >在JavaScript测验中添加更多问题是一个简单的过程。您需要在JavaScript代码中的问题数组中添加更多对象。每个对象代表一个问题，并具有两个属性：文本（问题本身）和答案（一系列可能的答案）。这是您如何添加新问题的示例：

    >
    在此示例中，我们添加了一个有关法国首都的问题，并提供了四个可能的答案。正确的答案标有“正确：true”。
    如何在测验中随机化问题的顺序？

    <span>const quizContainer = document.getElementById('quiz');
    </span><span>const resultsContainer = document.getElementById('results');
    </span><span>const submitButton = document.getElementById('submit');</span>

    随机解决问题的顺序可以使您的测验更具挑战性和乐趣。您可以使用Sort（）方法与Math.random（）函数结合使用。您可以做到这一点：

    此代码每次加载页面时都会随机排序问题数组。

    如何在测验中添加计时器？

    <span>const myQuestions = [
    </span>  <span>{
    </span>    <span>question: "Who invented JavaScript?",
    </span>    <span>answers: {
    </span>      <span>a: "Douglas Crockford",
    </span>      <span>b: "Sheryl Sandberg",
    </span>      <span>c: "Brendan Eich"
    </span>    <span>},
    </span>    <span>correctAnswer: "c"
    </span>  <span>},
    </span>  <span>{
    </span>    <span>question: "Which one of these is a JavaScript package manager?",
    </span>    <span>answers: {
    </span>      <span>a: "Node.js",
    </span>      <span>b: "TypeScript",
    </span>      <span>c: "npm"
    </span>    <span>},
    </span>    <span>correctAnswer: "c"
    </span>  <span>},
    </span>  <span>{
    </span>    <span>question: "Which tool can you use to ensure code quality?",
    </span>    <span>answers: {
    </span>      <span>a: "Angular",
    </span>      <span>b: "jQuery",
    </span>      <span>c: "RequireJS",
    </span>      <span>d: "ESLint"
    </span>    <span>},
    </span>    <span>correctAnswer: "d"
    </span>  <span>}
    </span><span>];
    </span>

    添加计时器可以使您的测验更加令人兴奋。您可以使用JavaScript SetInterval（）函数轻松地将计时器添加到测验中。这是一个简单的例子：
    在此示例中，测验将持续30秒。计时器每秒都会更新，当时间到了，将显示警报。

    如果用户弄错了，我该如何显示正确的答案？

    >

    >您可以通过修改checkanswer（）函数来显示正确的答案。您可以在IF语句中添加其他子句，该子句检查答案是否正确。您可以做到这一点：

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

    在此示例中，如果用户的答案不正确，则会以正确的答案显示警报。

    如何将图像添加到问题上？

    >您可以通过在问题对象中添加“图像”属性来将图像添加到问题中。然后，您可以使用此属性在HTML中显示图像。这是一个示例：

    <span>const quizContainer = document.getElementById('quiz');
    </span><span>const resultsContainer = document.getElementById('results');
    </span><span>const submitButton = document.getElementById('submit');</span>

    在您的html中，您可以显示这样的图像：

    >

    在显示新问题时，您可以在JavaScript中更新图像的src属性：>

    <span>const myQuestions = [
    </span>  <span>{
    </span>    <span>question: "Who invented JavaScript?",
    </span>    <span>answers: {
    </span>      <span>a: "Douglas Crockford",
    </span>      <span>b: "Sheryl Sandberg",
    </span>      <span>c: "Brendan Eich"
    </span>    <span>},
    </span>    <span>correctAnswer: "c"
    </span>  <span>},
    </span>  <span>{
    </span>    <span>question: "Which one of these is a JavaScript package manager?",
    </span>    <span>answers: {
    </span>      <span>a: "Node.js",
    </span>      <span>b: "TypeScript",
    </span>      <span>c: "npm"
    </span>    <span>},
    </span>    <span>correctAnswer: "c"
    </span>  <span>},
    </span>  <span>{
    </span>    <span>question: "Which tool can you use to ensure code quality?",
    </span>    <span>answers: {
    </span>      <span>a: "Angular",
    </span>      <span>b: "jQuery",
    </span>      <span>c: "RequireJS",
    </span>      <span>d: "ESLint"
    </span>    <span>},
    </span>    <span>correctAnswer: "d"
    </span>  <span>}
    </span><span>];
    </span>

    在此示例中，显示问题时将显示大象的图像。

    我如何处理JavaScript测验中的多个正确答案？

    <span>function buildQuiz(){
    </span>  <span>// variable to store the HTML output
    </span>  <span>const output = [];
    </span>
      <span>// for each question...
    </span>  myQuestions<span>.forEach(
    </span>    <span>(currentQuestion<span>, questionNumber</span>) => {
    </span>
          <span>// variable to store the list of possible answers
    </span>      <span>const answers = [];
    </span>
          <span>// and for each available answer...
    </span>      <span>for(letter in currentQuestion.answers){
    </span>
            <span>// ...add an HTML radio button
    </span>        answers<span>.push(
    </span>          <span><span>`<label>
    </span></span><span><span>            <input type="radio" name="question<span>${questionNumber}</span>" value="<span>${letter}</span>">
    </span></span><span><span>            <span>${letter}</span> :
    </span></span><span><span>            <span>${currentQuestion.answers[letter]}</span>
    </span></span><span><span>          </label>`</span>
    </span>        <span>);
    </span>      <span>}
    </span>
          <span>// add this question and its answers to the output
    </span>      output<span>.push(
    </span>        <span><span>`<div > <span>${currentQuestion.question}</span> </div>
    </span></span><span><span>        <div > <span>${answers.join('')}</span> </div>`</span>
    </span>      <span>);
    </span>    <span>}
    </span>  <span>);
    </span>
      <span>// finally combine our output list into one string of HTML and put it on the page
    </span>  quizContainer<span>.innerHTML = output.join('');
    </span><span>}</span>

    >处理多个正确的答案涉及允许用户选择多个答案并检查所选答案是否正确。例如，您可以如何更新上面的ShowResults（）函数来处理多个正确的答案。

    >
    >是否有必要维护单独的JavaScript文件和CSS文件？

    维护单独的JavaScript和CSS文件不是必须的。但是，通常认为这是一个最佳实践，因为它可以提高您的代码的可读性和可维护性。

以上是如何制作简单的JavaScript测验：代码教程的详细内容。更多信息请关注PHP中文网其他相关文章！