Làm bài kiểm tra trắc nghiệm sử dụng mảng JavaScript

“Làm cách nào để tôi thực hiện một bài kiểm tra JavaScript?” . Câu đố rất thú vị. Chúng là một cách tuyệt vời để tìm hiểu về các chủ đề mới và chúng cho phép bạn thu hút khán giả của mình bằng nội dung thú vị và vui tươi

Viết mã 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ó hướng dẫn bạn cách xử lý các sự kiện, thao tác với 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 bộ nhớ phía máy khách). Và khi bạn thiết lập và chạy một bài kiểm tra cơ bản, sẽ có rất nhiều 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 vấn đề này tại

Trong hướng dẫn này, tôi sẽ hướng dẫn bạn cách tạo bài kiểm tra JavaScript gồm nhiều bước mà bạn có thể điều chỉnh theo nhu cầu của mình và thêm vào trang web của riêng mình. 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 và xem

Để biết thêm kiến ​​thức chuyên sâu về JavaScript và các thách thức, hãy đọc cuốn sách miễn phí của chúng tôi. Học cách viết mã bằng JavaScript

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à hướng dẫn về mặt trước, nghĩa là bất kỳ ai biết cách xem qua mã nguồn của trang đều có thể tìm thấy câu trả lời. Đối với các câu đố nghiêm túc, dữ liệu cần được xử lý thông qua phần cuối, điều này 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+), nghĩa là mã này sẽ không tương thích với bất kỳ phiên bản Internet Explorer nào. Tuy nhiên, nó sẽ hoạt động tốt trên các trình duyệt hiện đại, bao gồm cả 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 bài hướng dẫn về bài kiểm tra JavaScript tương thích với IE8. Hoặc, nếu bạn muốn xem lại ES6, hãy xem khóa học này của Darin Haener trên SitePoint Premium
• Bạn sẽ cần làm quen với HTML, CSS và JavaScript, nhưng mỗi dòng mã sẽ được giải thích riêng

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

Lý tưởng nhất là 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 mình và để 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 sẽ không cần phải viế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âu hỏi một cách dễ dàng

Để thiết lập cấu trúc 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

• Một

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

  5 để tổ chức bài kiểm tra
• Một

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

  6 để nộp bài kiểm tra
• Một

  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 nó sẽ trông như thế nào

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

Sau đó, chúng tôi có thể chọn các phần tử HTML này và lưu trữ các tham chiếu đến chúng trong 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 ta sẽ cần một cách để xây dựng 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 ta có thể bắt đầu bằng cách đặt ra các chức năng của mình và chúng ta sẽ điền chúng vào khi chúng ta tiếp tục

function buildQuiz(){}

function showResults(){}

// display quiz right away
buildQuiz();

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

Ở đây, chúng ta 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 mình 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âu hỏi trắc nghiệm

Điều tiếp theo bài kiểm tra 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 đối tượng bằng chữ để thể hiện các câu hỏi riêng lẻ và một mảng để chứa 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 đi lặp lại

________số 8_______

Vui lòng đặt bao nhiêu câu hỏi hoặc câu trả lời tùy thích

Ghi chú. vì đây là một mảng, các câu hỏi sẽ xuất hiện theo thứ tự được 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ề cách 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, chúng tôi có thể hiển thị chúng trên trang. Chúng ta sẽ đi qua từng dòng JavaScript sau để 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ả đầu ra HTML bao gồm các câu hỏi và lựa chọn trả lời

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

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

Để cho ngắn gọn, chúng tôi đang sử dụng chức năng mũi tên để thực hiện các thao tác của mình đối với từng câu hỏi. Vì đây là vòng lặp forEach, nên chúng ta lấy giá trị hiện tại, chỉ mục (số vị trí của mục hiện tại trong mảng) và chính mảng đó làm tham số. Chúng tôi chỉ cần giá trị hiện tại và chỉ mục, vì mục đích của chúng tôi, chúng tôi sẽ đặt tên lần lượt là

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 xem mã bên trong vòng lặp của chúng ta

// 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 để chứa danh sách các câu trả lời có thể

Tiếp theo, chúng ta sẽ sử dụng một vòng lặp để điền vào các câu trả lời có thể có cho câu hỏi hiện tại. Đối với mỗi lựa chọn, chúng tôi đang tạo một nút radio HTML, mà chúng tôi đặt trong 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 kỳ đâu trên văn bản câu 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 chính nút radio, nút này rất khó truy cập

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

• khả năng đa dòng
• không còn phải trích dẫn trong dấu ngoặc kép vì thay vào đó, các mẫu chữ sử dụng backticks
• nội suy chuỗi, vì vậy bạn có thể nhúng các biểu thức JavaScript ngay vào chuỗi của mình 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 HTML câu hỏi và HTML câu trả lời vào danh sách đầu ra tổng thể của chúng tôi

Lưu ý rằng chúng tôi đang sử dụng một mẫu chữ và một số biểu thức được nhúng để tạo div câu hỏi trước tiên và sau đó tạo div câu trả lời. 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 ta và đặt chúng lại với nhau thành một chuỗi mà chúng ta có thể xuất ra 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

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ả lại với nhau và hiển thị trên trang

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

Bây giờ hàm

function buildQuiz(){}

function showResults(){}

// display quiz right away
buildQuiz();

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

8 của chúng ta đã hoàn thành

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 mã của bạn rất quan trọng. Do một thứ gọi là vùng chết tạm thời, bạn không thể tham chiếu mảng câu hỏi của mình 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ả bài kiểm tra

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

function buildQuiz(){}

function showResults(){}

// display quiz right away
buildQuiz();

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

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

Đây là chức năng mà chúng ta sẽ xem xét 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 vùng chứa câu trả lời trong HTML của bài kiểm tra 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 lại 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à đúng
• xử lý những gì xảy ra nếu câu trả lời là sai

Hãy xem xét kỹ hơn cách chúng tôi tìm câu trả lời đã chọn trong HTML của mình

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

2

Trước tiên, chúng tôi đảm bảo rằng chúng tôi đang tìm kiếm bên trong hộp 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 đang xác định bộ chọn CSS sẽ cho phép chúng tôi tìm thấy nút radio nào được chọn

Sau đó, chúng tôi đang sử dụ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"
  }
];

9 của JavaScript để 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 đã xác định trước đó. Về bản chất, điều này có nghĩa là chúng ta sẽ tìm thấy nút radio của câu trả lời nào được chọn

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 của người dùng không đầy đủ

Nhưng nếu người dùng để trống câu trả lời thì sao? . Để 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à “hoặc”, và

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ử câu 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
• Lấy giá trị của bất cứ thứ gì trong câu lệnh đầ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, có nghĩa là người dùng có thể bỏ qua 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â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 câu 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 đúng và sai

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 khớp với lựa chọn đúng, hãy tăng số câu trả lời đúng lên một và (tùy chọn) tô màu xanh lục cho tập hợp các lựa chọn. Nếu câu trả lời sai hoặc để trống, hãy tô màu đỏ cho các lựa chọn trả lời (một lần nữa, tùy chọn)

Khi vòng kiểm tra câu trả lời kết thúc, chúng tôi có thể hiển thị số lượng câu hỏi mà người dùng đã trả lời đúng

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

4

Và bây giờ chúng ta có một bài kiểm tra JavaScript đang hoạt động

Nếu muốn, bạn có thể bọc toàn bộ bài kiểm tra trong một IIFE (biểu thức hàm được gọi ngay lập tức), đây là hàm sẽ 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 nằm ngoà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 đang 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 đã sẵn sàng. Vui lòng thêm hoặc xóa câu hỏi và câu trả lời cũng như tạo kiểu cho bài kiểm tra theo cách bạn muốn

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 cây bút
Bài kiểm tra JavaScript đơn giản (Không phân trang) của SitePoint (@SitePoint)
trên CodePen

Thêm phân trang

Bây giờ chúng ta đã chạy bài kiểm tra cơ bản, hãy xem xét một số tính năng nâng cao hơn. Ví dụ: giả sử bạn chỉ muốn 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âu hỏi
• các nút để điều hướng bài kiểm tra

Chúng tôi sẽ cần 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 đánh dấ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à vùng chứa bài kiểm tra. Bộ chứa bài kiểm tra sẽ giúp chúng tôi định vị các câu hỏi dưới dạng các lớp mà chúng tôi có thể hiển thị và ẩn

Tiếp theo, bên trong hàm

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 một 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 để chứa các bộ chứa câu hỏi và câu 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 trang trình bày xếp thành các lớp chồng lên nhau. Trong ví dụ này, bạn sẽ nhận thấy chúng tôi đang sử dụng chỉ mục z và chuyển đổi độ mờ để cho phép các trang trình bày của chúng tôi mờ dần trong và ngoài. Đây là 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 ta 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 ta 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 mình và theo dõi xem chúng ta đang ở trang trình bày nào. 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 ta sẽ viết hàm trình chiếu slide. Thêm phần 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 là những gì ba dòng đầu tiên làm

• Ẩn slide hiện tại bằng cách loại bỏ lớp

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

  2
• Hiển thị trang chiếu 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 ta đang ở slide đầu tiên, hãy ẩn nút Previous Slide. Nếu không, hiển thị nút
• Nếu chúng ta đang ở trang chiếu cuối cùng, hãy ẩn nút Trang trình bày Tiếp theo và hiển thị nút Gửi. Nếu không, hãy hiển thị nút Trang trình bày 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ị trang trình bày đầ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 hàm để làm cho các nút điều hướng hoạt động. Chúng nằm bên dưới hàm

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 đang sử dụng chức năng

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

5 để cho phép các nút điều hướng hiển thị trang trình bày trước và trang trình bày tiếp theo

Cuối cùng, chúng ta sẽ cần kết nối các nút điều hướng với các chức năng này. Điều này đến ở phần cuối của 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 hoạt động

Xem cây bút
Câu đố JavaScript đơn giản với phân trang theo SitePoint (@SitePoint)
trên 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 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ử những cách khác nhau để trả lời một câu trả lời đúng hoặc một câu trả lời sai
• Phong cách bài kiểm tra độc đáo
• Thêm thanh tiến trình
• Cho phép người dùng xem lại câu trả lời trước khi gửi
• Cung cấp cho người dùng 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 báo tùy chỉnh cho từng cấp kết quả. Ví dụ: nếu ai đó đạt điểm 8/10 trở lên, hãy gọi họ là ninja đố vui
• Thêm nút để chia sẻ kết quả lên mạng xã hội
• Lưu điểm cao của bạn bằng cách sử dụng localStorage
• Thêm đồng hồ đếm ngược để xem mọi người có thể vượt qua đồ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ư công cụ ước tính giá dự án hoặc bài kiểm tra xã hội “bạn là nhân vật nào”

Chia sẻ bài viết này

Yaphi Berhanu

Yaphi Berhanu là một nhà phát triển web thích giúp mọi người nâng cao kỹ năng viết mã của họ. Anh ấy viết mẹo và thủ thuật tại http. //mã bước đơn giản. com. Theo ý kiến ​​​​hoàn toàn không thiên vị của mình, anh ấy đề nghị kiểm tra nó

Làm cách nào để tạo bài kiểm tra trắc nghiệm bằng JavaScript?

Làm cách nào để tạo bài kiểm tra với các câu hỏi ngẫu nhiên bằng JavaScript?

Làm cách nào để làm cho các câu hỏi đố xuất hiện cùng một lúc trong JavaScript?

Mảng Mcq là gì?