如何製作簡單的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中文網其他相關文章！