"Làm thế nào để tôi thực hiện một bài kiểm tra JavaScript?" là một trong những câu hỏi phổ biến nhất được hỏi bởi những người học phát triển web và vì lý do chính đáng. Các câu đố là niềm vui! Họ là một cách tuyệt vời để tìm hiểu về các chủ đề mới và họ cho phép bạn thu hút khán giả của mình với một điều gì đó vui vẻ và vui tươi.

Mã hóa bài kiểm tra JavaScript của riêng bạn cũng là một bài tập học tập tuyệt vời. Nó dạy bạn cách đối phó với các sự kiện, thao túng DOM, xử lý đầu vào của người dùng, đưa ra phản hồi cho người dùng và theo dõi điểm số của họ (ví dụ: sử dụng lưu trữ phía máy khách). Và khi bạn có một bài kiểm tra cơ bản lên và chạy, có một loạt các khả năng để thêm chức năng nâng cao hơn, chẳng hạn như phân trang. Tôi đi vào điều này ở cuối bài viết.

Trong hướng dẫn này, tôi sẽ hướng dẫn bạn mặc dù đã tạo ra một bài kiểm tra JavaScript nhiều bước mà bạn sẽ có thể thích nghi với nhu cầu của bạn và thêm vào trang web của riêng bạn. Nếu bạn muốn xem những gì chúng tôi sẽ kết thúc, bạn có thể bỏ qua trước và xem bài kiểm tra làm việc.

Để biết thêm kiến ​​thức JavaScript chuyên sâu, hãy đọc JavaScript nổi tiếng của chúng tôi: Novice to Ninja, Phiên bản thứ 2.

Những điều cần lưu ý trước khi bắt đầu

Một vài điều cần biết trước khi bắt đầu:

• Đây là một hướng dẫn phía trước, có nghĩa là bất cứ ai biết cách xem qua mã nguồn của một trang đều có thể tìm thấy câu trả lời. Đối với các câu đố nghiêm trọng, dữ liệu cần được xử lý thông qua phía sau, nằm ngoài phạm vi của hướng dẫn này.
• Mã trong bài viết này sử dụng cú pháp JavaScript hiện đại (ES6+), có nghĩa là nó sẽ không tương thích với bất kỳ phiên bản nào của Internet Explorer. Tuy nhiên, nó sẽ hoạt động tốt trên các trình duyệt hiện đại, bao gồm Microsoft Edge.
• Nếu bạn cần hỗ trợ các trình duyệt cũ hơn, tôi đã viết một hướng dẫn đố JavaScript rằng mà tương thích với IE8. Hoặc, nếu bạn thích làm bồi thường trên ES6, hãy xem khóa học này của Darin Haener trên SitePoint Premium.
• Bạn sẽ cần một số quen thuộc với HTML, CSS và JavaScript, nhưng mỗi dòng mã sẽ được giải thích riêng lẻ.

Cấu trúc cơ bản của bài kiểm tra JavaScript của bạn

Lý tưởng nhất, chúng tôi muốn các câu hỏi và câu trả lời của bài kiểm tra nằm trong mã JavaScript của chúng tôi và có tập lệnh của chúng tôi tự động tạo bài kiểm tra. Bằng cách đó, chúng tôi đã giành chiến thắng cần phải viết rất nhiều đánh dấu lặp đi lặp lại và chúng tôi có thể thêm và xóa các câu hỏi một cách dễ dàng.

Để thiết lập cấu trúc của bài kiểm tra JavaScript của chúng tôi, chúng tôi sẽ cần bắt đầu với HTML sau:

• A

  function buildQuiz(){}
  
  function showResults(){}
  
  // display quiz right away
  buildQuiz();
  
  // on submit, show results
  submitButton.addEventListener('click', showResults);
  

  5 để giữ bài kiểm tra
• A

  function buildQuiz(){}
  
  function showResults(){}
  
  // display quiz right away
  buildQuiz();
  
  // on submit, show results
  submitButton.addEventListener('click', showResults);
  

  6 để gửi bài kiểm tra
• A

  function buildQuiz(){}
  
  function showResults(){}
  
  // display quiz right away
  buildQuiz();
  
  // on submit, show results
  submitButton.addEventListener('click', showResults);
  

  5 để hiển thị kết quả

Đây là cách mà nó sẽ trông như thế nào:

<div id="quiz">div>
<button id="submit">Submit Quizbutton>
<div id="results">div>

Sau đó, chúng ta có thể chọn các phần tử HTML này và lưu trữ tham chiếu cho chúng theo các biến như vậy:

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

Tiếp theo, chúng tôi sẽ cần một cách để xây dựng một bài kiểm tra, hiển thị kết quả và kết hợp tất cả lại với nhau. Chúng tôi có thể bắt đầu bằng cách đưa ra các chức năng của mình và chúng tôi sẽ điền chúng khi chúng tôi đi:

function buildQuiz(){}

function showResults(){}

// display quiz right away
buildQuiz();

// on submit, show results
submitButton.addEventListener('click', showResults);

Ở đây, chúng tôi có các chức năng để xây dựng bài kiểm tra và hiển thị kết quả. Chúng tôi sẽ chạy chức năng

function buildQuiz(){}

function showResults(){}

// display quiz right away
buildQuiz();

// on submit, show results
submitButton.addEventListener('click', showResults);

8 của chúng tôi ngay lập tức và chúng tôi sẽ chạy chức năng

function buildQuiz(){}

function showResults(){}

// display quiz right away
buildQuiz();

// on submit, show results
submitButton.addEventListener('click', showResults);

9 khi người dùng nhấp vào nút Gửi.

Hiển thị các câu hỏi đố

Điều tiếp theo của chúng tôi cần là một số câu hỏi để hiển thị. Chúng tôi sẽ sử dụng các chữ cái đối tượng để thể hiện các câu hỏi cá nhân và một mảng để giữ tất cả các câu hỏi tạo nên bài kiểm tra của chúng tôi. Sử dụng một mảng sẽ làm cho các câu hỏi dễ dàng lặp lại:

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

Hãy thoải mái đặt bao nhiêu câu hỏi hoặc câu trả lời như bạn muốn.

Lưu ý: Vì đây là một mảng, các câu hỏi sẽ xuất hiện theo thứ tự mà họ liệt kê. Nếu bạn muốn sắp xếp các câu hỏi theo bất kỳ cách nào trước khi trình bày chúng cho người dùng, hãy xem mẹo nhanh của chúng tôi về việc sắp xếp một mảng các đối tượng trong JavaScript.

Bây giờ chúng tôi có danh sách các câu hỏi của chúng tôi, chúng tôi có thể hiển thị chúng trên trang. Chúng tôi sẽ đi qua dòng JavaScript sau đây để xem nó hoạt động như thế nào:

function buildQuiz(){
  // variable to store the HTML output
  const output = [];

  // for each question...
  myQuestions.forEach(
    (currentQuestion, questionNumber) => {

      // variable to store the list of possible answers
      const answers = [];

      // and for each available answer...
      for(letter in currentQuestion.answers){

        // ...add an HTML radio button
        answers.push(
          `
            
            ${letter} :
            ${currentQuestion.answers[letter]}
          `
        );
      }

      // add this question and its answers to the output
      output.push(
        `
 ${currentQuestion.question} 
 ${answers.join('')} `
);
}
);
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join('');
}

Đầu tiên, chúng tôi tạo một biến

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

0 để chứa tất cả các đầu ra HTML bao gồm các câu hỏi và lựa chọn câu trả lời.

Tiếp theo, chúng ta có thể bắt đầu xây dựng HTML cho mỗi câu hỏi. Chúng tôi sẽ cần phải lặp qua từng câu hỏi như vậy:

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

Để biết ngắn gọn, chúng tôi sử dụng một chức năng mũi tên để thực hiện các hoạt động của chúng tôi trên mỗi câu hỏi. Bởi vì đây là trong một vòng lặp foreach, chúng tôi nhận được giá trị hiện tại, chỉ mục (số vị trí của mục hiện tại trong mảng) và bản thân mảng làm tham số. Chúng tôi chỉ cần giá trị hiện tại và chỉ số, cho mục đích của chúng tôi, chúng tôi sẽ đặt tên tương ứng

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

1 và

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

2.

Bây giờ, hãy để Look nhìn một mã bên trong vòng lặp của chúng tôi:

// we'll want to store the list of answer choices
const answers = [];

// and for each available answer...
for(letter in currentQuestion.answers){

  // ...add an html radio button
  answers.push(
    `
      
      ${letter} :
      ${currentQuestion.answers[letter]}
    `
  );
}

// add this question and its answers to the output
output.push(
  `
 ${currentQuestion.question} 
 ${answers.join('')} `
);

Đối với mỗi câu hỏi, chúng tôi sẽ muốn tạo HTML chính xác và vì vậy bước đầu tiên của chúng tôi là tạo một mảng để giữ danh sách các câu trả lời có thể.

Tiếp theo, chúng tôi sẽ sử dụng một vòng lặp để điền vào các câu trả lời có thể cho câu hỏi hiện tại. Đối với mỗi lựa chọn, chúng tôi sẽ tạo một nút radio HTML, chúng tôi gửi kèm theo phần tử

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

3. Điều này là để người dùng có thể nhấp vào bất cứ nơi nào trên văn bản trả lời để chọn câu trả lời đó. Nếu nhãn bị bỏ qua, thì người dùng sẽ phải nhấp vào nút radio, điều này không thể truy cập được lắm.

Lưu ý rằng chúng tôi sử dụng các mẫu chữ, đó là chuỗi nhưng mạnh mẽ hơn. Chúng tôi sẽ sử dụng các tính năng sau:

• Khả năng đa dòng
• Không còn phải thoát khỏi trích dẫn trong trích dẫn vì mẫu chữ
• Nội suy chuỗi, vì vậy bạn có thể nhúng các biểu thức JavaScript ngay vào các chuỗi của bạn như thế này:

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

  4.

Khi chúng tôi có danh sách các nút trả lời, chúng tôi có thể đẩy câu hỏi HTML và câu trả lời HTML vào danh sách đầu ra tổng thể của chúng tôi.

Lưu ý rằng chúng tôi sử dụng một mẫu theo nghĩa đen và một số biểu thức nhúng để tạo câu hỏi div và sau đó tạo câu trả lời div. Biểu thức

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

5 lấy danh sách các câu trả lời của chúng tôi và đặt chúng lại với nhau trong một chuỗi mà chúng tôi có thể xuất vào div

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

6 của chúng tôi.

Bây giờ chúng tôi đã tạo HTML cho mỗi câu hỏi, chúng tôi có thể kết hợp tất cả cùng nhau và hiển thị nó trên trang:

quizContainer.innerHTML = output.join('');

Bây giờ chức năng

function buildQuiz(){}

function showResults(){}

// display quiz right away
buildQuiz();

// on submit, show results
submitButton.addEventListener('click', showResults);

8 của chúng tôi đã hoàn tất.

Bạn sẽ có thể chạy bài kiểm tra vào thời điểm này và xem các câu hỏi được hiển thị. Tuy nhiên, xin lưu ý rằng cấu trúc của mã của bạn là quan trọng. Do một thứ gọi là vùng chết tạm thời, bạn có thể tham khảo mảng câu hỏi của bạn trước khi nó được xác định.

Tóm lại, đây là cấu trúc chính xác:

// Functions
function buildQuiz(){ ... }
function showResults(){ ... }

// Variables
const quizContainer = document.getElementById('quiz');
const resultsContainer = document.getElementById('results');
const submitButton = document.getElementById('submit');
const myQuestions = [ ... ];

// Kick things off
buildQuiz();

// Event listeners
submitButton.addEventListener('click', showResults);

Hiển thị kết quả đố

Tại thời điểm này, chúng tôi muốn xây dựng chức năng

function buildQuiz(){}

function showResults(){}

// display quiz right away
buildQuiz();

// on submit, show results
submitButton.addEventListener('click', showResults);

9 của mình để lặp qua các câu trả lời, kiểm tra chúng và hiển thị kết quả.

Ở đây, chức năng mà chúng tôi sẽ trải qua chi tiết tiếp theo:

function showResults(){

  // gather answer containers from our quiz
  const answerContainers = quizContainer.querySelectorAll('.answers');

  // keep track of user's answers
  let numCorrect = 0;

  // for each question...
  myQuestions.forEach( (currentQuestion, questionNumber) => {

    // find selected answer
    const answerContainer = answerContainers[questionNumber];
    const selector = `input[name=question${questionNumber}]:checked`;
    const userAnswer = (answerContainer.querySelector(selector) || {}).value;

    // if answer is correct
    if(userAnswer === currentQuestion.correctAnswer){
      // add to the number of correct answers
      numCorrect++;

      // color the answers green
      answerContainers[questionNumber].style.color = 'lightgreen';
    }
    // if answer is wrong or blank
    else{
      // color the answers red
      answerContainers[questionNumber].style.color = 'red';
    }
  });

  // show number of correct answers out of total
  resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length}`;
}

Đầu tiên, chúng tôi chọn tất cả các thùng chứa câu trả lời trong bài kiểm tra HTML của chúng tôi. Sau đó, chúng tôi sẽ tạo các biến để theo dõi câu trả lời hiện tại của người dùng và tổng số câu trả lời đúng.

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

0

Bây giờ chúng ta có thể lặp qua từng câu hỏi và kiểm tra câu trả lời.

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

1

Ý chính chung của mã này là:

• Tìm câu trả lời đã chọn trong HTML
• xử lý những gì xảy ra nếu câu trả lời là chính xác
• Xử lý những gì xảy ra nếu câu trả lời là sai.

Hãy cùng xem xét kỹ hơn về cách chúng tôi tìm thấy câu trả lời được chọn trong HTML của chúng tôi:

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

2

Đầu tiên, chúng tôi đảm bảo rằng chúng tôi đang nhìn vào bên trong thùng chứa câu trả lời cho câu hỏi hiện tại.

Trong dòng tiếp theo, chúng tôi đã xác định một bộ chọn CSS sẽ cho phép chúng tôi tìm thấy nút radio nào được kiểm tra.

Sau đó, chúng tôi sử dụng JavaScript từ

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

9 để tìm kiếm bộ chọn CSS của chúng tôi trong

function buildQuiz(){
  // variable to store the HTML output
  const output = [];

  // for each question...
  myQuestions.forEach(
    (currentQuestion, questionNumber) => {

      // variable to store the list of possible answers
      const answers = [];

      // and for each available answer...
      for(letter in currentQuestion.answers){

        // ...add an HTML radio button
        answers.push(
          `
            
            ${letter} :
            ${currentQuestion.answers[letter]}
          `
        );
      }

      // add this question and its answers to the output
      output.push(
        `
 ${currentQuestion.question} 
 ${answers.join('')} `
);
}
);
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join('');
}

0 được xác định trước đó. Về bản chất, điều này có nghĩa là chúng tôi sẽ tìm thấy nút câu trả lời nào được kiểm tra.

Cuối cùng, chúng ta có thể nhận được giá trị của câu trả lời đó bằng cách sử dụng

function buildQuiz(){
  // variable to store the HTML output
  const output = [];

  // for each question...
  myQuestions.forEach(
    (currentQuestion, questionNumber) => {

      // variable to store the list of possible answers
      const answers = [];

      // and for each available answer...
      for(letter in currentQuestion.answers){

        // ...add an HTML radio button
        answers.push(
          `
            
            ${letter} :
            ${currentQuestion.answers[letter]}
          `
        );
      }

      // add this question and its answers to the output
      output.push(
        `
 ${currentQuestion.question} 
 ${answers.join('')} `
);
}
);
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join('');
}

1.

Xử lý đầu vào người dùng không đầy đủ

Nhưng điều gì sẽ xảy ra nếu người dùng để trống câu trả lời? Trong trường hợp này, sử dụng

function buildQuiz(){
  // variable to store the HTML output
  const output = [];

  // for each question...
  myQuestions.forEach(
    (currentQuestion, questionNumber) => {

      // variable to store the list of possible answers
      const answers = [];

      // and for each available answer...
      for(letter in currentQuestion.answers){

        // ...add an HTML radio button
        answers.push(
          `
            
            ${letter} :
            ${currentQuestion.answers[letter]}
          `
        );
      }

      // add this question and its answers to the output
      output.push(
        `
 ${currentQuestion.question} 
 ${answers.join('')} `
);
}
);
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join('');
}

1 sẽ gây ra lỗi vì bạn có thể nhận được giá trị của một thứ gì đó mà không có ở đó. Để giải quyết vấn đề này, chúng tôi đã thêm

function buildQuiz(){
  // variable to store the HTML output
  const output = [];

  // for each question...
  myQuestions.forEach(
    (currentQuestion, questionNumber) => {

      // variable to store the list of possible answers
      const answers = [];

      // and for each available answer...
      for(letter in currentQuestion.answers){

        // ...add an HTML radio button
        answers.push(
          `
            
            ${letter} :
            ${currentQuestion.answers[letter]}
          `
        );
      }

      // add this question and its answers to the output
      output.push(
        `
 ${currentQuestion.question} 
 ${answers.join('')} `
);
}
);
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join('');
}

3, có nghĩa là có nghĩa là hoặc hoặc

function buildQuiz(){
  // variable to store the HTML output
  const output = [];

  // for each question...
  myQuestions.forEach(
    (currentQuestion, questionNumber) => {

      // variable to store the list of possible answers
      const answers = [];

      // and for each available answer...
      for(letter in currentQuestion.answers){

        // ...add an HTML radio button
        answers.push(
          `
            
            ${letter} :
            ${currentQuestion.answers[letter]}
          `
        );
      }

      // add this question and its answers to the output
      output.push(
        `
 ${currentQuestion.question} 
 ${answers.join('')} `
);
}
);
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join('');
}

4, đó là một đối tượng trống. Bây giờ tuyên bố tổng thể nói:

• Nhận tham chiếu đến phần tử trả lời đã chọn của chúng tôi hoặc, nếu điều đó không tồn tại, hãy sử dụng một đối tượng trống.
• Nhận giá trị của bất cứ điều gì trong tuyên bố đầu tiên.

Do đó, giá trị sẽ là câu trả lời của người dùng hoặc

function buildQuiz(){
  // variable to store the HTML output
  const output = [];

  // for each question...
  myQuestions.forEach(
    (currentQuestion, questionNumber) => {

      // variable to store the list of possible answers
      const answers = [];

      // and for each available answer...
      for(letter in currentQuestion.answers){

        // ...add an HTML radio button
        answers.push(
          `
            
            ${letter} :
            ${currentQuestion.answers[letter]}
          `
        );
      }

      // add this question and its answers to the output
      output.push(
        `
 ${currentQuestion.question} 
 ${answers.join('')} `
);
}
);
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join('');
}

5, điều đó có nghĩa là người dùng có thể bỏ qua một câu hỏi mà không làm hỏng bài kiểm tra của chúng tôi.

Đánh giá các câu trả lời và hiển thị kết quả

Các câu lệnh tiếp theo trong vòng kiểm tra trả lời của chúng tôi sẽ cho phép chúng tôi xử lý các câu trả lời chính xác và không chính xác.

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

3

Nếu câu trả lời của người dùng phù hợp với sự lựa chọn chính xác, hãy tăng số lượng câu trả lời đúng lên một và (tùy chọn) tô màu cho tập hợp các lựa chọn màu xanh lá cây. Nếu câu trả lời là sai hoặc trống, hãy tô màu các lựa chọn trả lời màu đỏ (một lần nữa, tùy chọn).

Khi vòng lặp kiểm tra câu trả lời kết thúc, chúng tôi có thể hiển thị có bao nhiêu câu hỏi mà người dùng nhận được đúng:

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

4

Và bây giờ chúng tôi có một bài kiểm tra JavaScript làm việc!

Nếu bạn thích, bạn có thể bọc toàn bộ bài kiểm tra trong một iife (ngay lập tức được gọi biểu thức chức năng), đây là một hàm chạy ngay khi bạn xác định nó. Điều này sẽ giữ cho các biến của bạn ra khỏi phạm vi toàn cầu và đảm bảo rằng bài kiểm tra của bạn không can thiệp vào bất kỳ tập lệnh nào khác chạy trên trang.

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

5

Bây giờ bạn đã thiết lập tất cả! Hãy thoải mái thêm hoặc xóa câu hỏi và câu trả lời và tạo kiểu cho bài kiểm tra theo cách bạn thích.

Tại thời điểm này, bài kiểm tra của bạn có thể trông như thế này (với một chút kiểu dáng):

Xem Bút Câu đố JavaScript đơn giản (không phân trang) của SitePoint (@SitePoint) trên CodePen.
Simple JavaScript Quiz (No Pagination) by SitePoint (@SitePoint)
on CodePen.

Bây giờ chúng tôi có bài kiểm tra cơ bản của chúng tôi đang chạy, hãy để một số tính năng nâng cao hơn. Ví dụ, hãy để nói rằng bạn muốn chỉ hiển thị một câu hỏi tại một thời điểm.

Có thể bạn sẽ cần:

• một cách để hiển thị và ẩn các câu hỏi
• các nút để điều hướng bài kiểm tra.

Chúng tôi sẽ cần phải thực hiện một số cập nhật, vì vậy hãy để bắt đầu với HTML:

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

6

Hầu hết các đánh dấu đó đều giống như trước đây, nhưng bây giờ chúng tôi đã thêm các nút điều hướng và một thùng chứa đố. Container đố sẽ giúp chúng tôi định vị các câu hỏi là các lớp mà chúng tôi có thể hiển thị và ẩn.

Tiếp theo, bên trong chức năng

function buildQuiz(){}

function showResults(){}

// display quiz right away
buildQuiz();

// on submit, show results
submitButton.addEventListener('click', showResults);

8, chúng ta cần thêm phần tử

function buildQuiz(){}

function showResults(){}

// display quiz right away
buildQuiz();

// on submit, show results
submitButton.addEventListener('click', showResults);

5 với lớp

function buildQuiz(){
  // variable to store the HTML output
  const output = [];

  // for each question...
  myQuestions.forEach(
    (currentQuestion, questionNumber) => {

      // variable to store the list of possible answers
      const answers = [];

      // and for each available answer...
      for(letter in currentQuestion.answers){

        // ...add an HTML radio button
        answers.push(
          `
            
            ${letter} :
            ${currentQuestion.answers[letter]}
          `
        );
      }

      // add this question and its answers to the output
      output.push(
        `
 ${currentQuestion.question} 
 ${answers.join('')} `
);
}
);
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join('');
}

8 để giữ các thùng chứa câu hỏi và trả lời mà chúng ta vừa tạo:

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

7

Tiếp theo, chúng ta có thể sử dụng một số định vị CSS để làm cho các slide ngồi làm các lớp trên đầu nhau. Trong ví dụ này, bạn sẽ nhận thấy chúng tôi sử dụng các chỉ số z và chuyển tiếp opacity để cho phép các slide của chúng tôi mờ dần vào và ra. Ở đây, những gì CSS có thể trông như thế nào:

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

8

Bây giờ chúng tôi sẽ thêm một số JavaScript để làm cho việc phân trang hoạt động. Như trước đây, thứ tự là quan trọng, vì vậy đây là cấu trúc sửa đổi của mã của chúng tôi:

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

9

Chúng tôi có thể bắt đầu với một số biến để lưu trữ các tham chiếu đến các nút điều hướng của chúng tôi và theo dõi trình chiếu nào chúng tôi trên. Thêm những thứ này sau cuộc gọi đến

function buildQuiz(){
  // variable to store the HTML output
  const output = [];

  // for each question...
  myQuestions.forEach(
    (currentQuestion, questionNumber) => {

      // variable to store the list of possible answers
      const answers = [];

      // and for each available answer...
      for(letter in currentQuestion.answers){

        // ...add an HTML radio button
        answers.push(
          `
            
            ${letter} :
            ${currentQuestion.answers[letter]}
          `
        );
      }

      // add this question and its answers to the output
      output.push(
        `
 ${currentQuestion.question} 
        
 ${answers.join('')} `
      );
    }
  );

  // finally combine our output list into one string of HTML and put it on the page
  quizContainer.innerHTML = output.join('');
}

9, như được hiển thị ở trên:

function buildQuiz(){}

function showResults(){}

// display quiz right away
buildQuiz();

// on submit, show results
submitButton.addEventListener('click', showResults);

0

Tiếp theo, chúng tôi sẽ viết một chức năng để hiển thị một slide. Thêm điều này bên dưới các chức năng hiện có (

function buildQuiz(){}

function showResults(){}

// display quiz right away
buildQuiz();

// on submit, show results
submitButton.addEventListener('click', showResults);

8 và

function buildQuiz(){}

function showResults(){}

// display quiz right away
buildQuiz();

// on submit, show results
submitButton.addEventListener('click', showResults);

9):

function buildQuiz(){}

function showResults(){}

// display quiz right away
buildQuiz();

// on submit, show results
submitButton.addEventListener('click', showResults);

1

Ở đây, những gì ba dòng đầu tiên làm:

• Ẩn slide hiện tại bằng cách xóa lớp

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

  2.
• Hiển thị slide mới bằng cách thêm lớp

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

  2.
• Cập nhật số slide hiện tại.

Các dòng tiếp theo giới thiệu logic sau:

• Nếu chúng tôi ở trên slide đầu tiên, hãy ẩn nút trượt trước đó. Nếu không, hiển thị nút.
• Nếu chúng tôi ở slide cuối cùng, hãy ẩn nút trượt tiếp theo và hiển thị nút gửi. Nếu không, hiển thị nút trượt tiếp theo và ẩn nút gửi.

Sau khi chúng tôi viết chức năng của mình, chúng tôi có thể gọi ngay

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

4 để hiển thị slide đầu tiên. Điều này sẽ đến sau mã phân trang:

function buildQuiz(){}

function showResults(){}

// display quiz right away
buildQuiz();

// on submit, show results
submitButton.addEventListener('click', showResults);

2

Tiếp theo chúng ta có thể viết các chức năng để làm cho các nút điều hướng hoạt động. Chúng đi bên dưới chức năng

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

5:

function buildQuiz(){}

function showResults(){}

// display quiz right away
buildQuiz();

// on submit, show results
submitButton.addEventListener('click', showResults);

3

Ở đây, chúng tôi sử dụng chức năng

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

5 của chúng tôi để cho phép các nút điều hướng của chúng tôi hiển thị slide trước đó và slide tiếp theo.

Cuối cùng, chúng tôi sẽ cần kết nối các nút điều hướng lên các chức năng này. Điều này xuất hiện ở cuối mã:

function buildQuiz(){}

function showResults(){}

// display quiz right away
buildQuiz();

// on submit, show results
submitButton.addEventListener('click', showResults);

4

Bây giờ bài kiểm tra của bạn có điều hướng làm việc!

Xem câu đố JavaScript đơn giản với giao diện bởi SitePoint (@SitePoint) trên CodePen.
Simple JavaScript Quiz With Pagination by SitePoint (@SitePoint)
on CodePen.

Cái gì tiếp theo?

Bây giờ bạn đã có một bài kiểm tra JavaScript cơ bản, đã đến lúc phải sáng tạo và thử nghiệm.

Dưới đây là một số gợi ý bạn có thể thử:

• Hãy thử các cách khác nhau để trả lời câu trả lời đúng hoặc câu trả lời sai.
• Phong cách bài kiểm tra độc đáo.
• Thêm một thanh tiến trình.
• Cho phép người dùng xem xét câu trả lời trước khi gửi.
• Cung cấp cho người dùng một bản tóm tắt câu trả lời của họ sau khi họ gửi.
• Cập nhật điều hướng để cho phép người dùng bỏ qua bất kỳ số câu hỏi nào.
• Tạo thông điệp tùy chỉnh cho từng cấp độ của kết quả. Ví dụ: nếu ai đó ghi bàn 8/10 trở lên, hãy gọi họ là một ninja đố.
• Thêm một nút để chia sẻ kết quả vào phương tiện truyền thông xã hội.
• Lưu điểm số cao của bạn bằng cách sử dụng LocalStorage.
• Thêm một bộ đếm thời gian đếm ngược để xem mọi người có thể đánh bại đồng hồ không.
• Áp dụng các khái niệm từ bài viết này cho các mục đích sử dụng khác, chẳng hạn như một công cụ ước tính giá dự án hoặc một câu đố xã hội mà-saracter-are-bạn.

Làm thế nào để bạn thực hiện một bài kiểm tra xuất hiện một lần trong JavaScript?

Làm thế nào để bạn thực hiện một bài kiểm tra từng bước?

Làm thế nào để bạn thực hiện một bài kiểm tra trong mã HTML?