Hướng dẫn how do i create a multiple choice quiz in html and css? - làm cách nào để tạo một bài kiểm tra trắc nghiệm trong html và css?

Theo kinh nghiệm của tôi, việc bổ sung nghiên cứu với các bài tập thực tế giúp cải thiện đáng kể sự hiểu biết của tôi về một chủ đề. Điều này đặc biệt đúng khi tôi có thể kiểm tra kiến ​​thức của mình khi tôi đi và nhận phản hồi tức thì cho mỗi câu hỏi.

Định dạng bài kiểm tra trắc nghiệm là hoàn hảo cho việc này. Tôi đã phát triển một phương pháp để nhúng nhiều câu hỏi lựa chọn trong các bài viết toán học mà tôi viết cho Freecodecamp và tôi muốn chỉ cho các tác giả khác cách làm điều tương tự.

Cách thêm mã vào bài viết của bạn

Trình chỉnh sửa ma cho phép bạn nhúng các khối mã trong suốt một bài viết. Trình chỉnh sửa mã có thể được truy cập bằng cách nhấp vào nút tròn bằng dấu cộng (+) được sử dụng để thêm hình ảnh, video YouTube, v.v.(+) used for adding images, YouTube videos, and so on:

Nhấp vào nút "HTML" để thêm trình soạn thảo vào bài viết. Trình chỉnh sửa hỗ trợ HTML, CSS và thậm chí JavaScript.

Khi bạn bắt đầu thêm mã, nhấp vào bất cứ nơi nào bên ngoài khung trình soạn thảo để hiển thị mã và xem tiến trình của bạn. Nhấp đúp chuột vào đầu ra được hiển thị để mở lại cửa sổ Trình chỉnh sửa:

Để kiểm tra chức năng của mã của bạn, hãy lưu bài viết bằng cách nhấn Ctrl/⌘ + S, sau đó nhấp vào nút "Xem trước" xuất hiện ở góc dưới bên trái:

Bài viết của bạn sẽ mở trong một tab riêng, nơi bạn có thể thấy mã của bạn sẽ được hiển thị như thế nào sau khi bài viết của bạn được xuất bản. Dành một chút thời gian để kiểm tra kiểu dáng và chức năng của bài kiểm tra trắc nghiệm của bạn.

Mã Boilerplate cho bài kiểm tra trắc nghiệm có sẵn trong phần tiếp theo. Tất cả những gì bạn cần làm là dán nó vào bài viết của riêng bạn và thay đổi câu hỏi và câu trả lời.

Cách kiểm tra trắc nghiệm hoạt động

Bạn có thể thêm nhiều câu hỏi khác nhau như bạn muốn. Tuy nhiên, trong khi bài viết của bạn có thể có nhiều câu đố, tất cả chúng đều được chứa trong một cơ thể HTML phía sau hậu trường. Mỗi phần tử câu hỏi bắt đầu bằng mã sau:single HTML body behind the scenes. Each question element starts with the following code:

  
WRITE YOUR QUESTION HERE
  
Choose 1 answer
  

Mỗi phần tử div sau đây chứa một câu trả lời có thể:

  ...
  

    
      
      ANSWER 1
    
  
  


  

    
      
      ANSWER 2
    
  
  

  ...

Tại thời điểm viết, trình chỉnh sửa mã nhúng của Ghost không hỗ trợ các mẫu mẫu, vì vậy một số điều phải được mã hóa cứng.

Hãy nhớ rằng tất cả các câu hỏi về cơ bản được tải cùng nhau sau hậu trường, vì vậy hai số chữ số trong mỗi id đại diện cho các mục sau:

• Digit đầu tiên cho biết thứ tự của câu hỏi trắc nghiệm trong bài viết (1 là câu hỏi một, 2 là câu hỏi hai, v.v.)first digit indicates the order of the multiple choice question in the article (1 is question one, 2 is question two, and so on)
• Chữ số thứ hai cho biết thứ tự của mỗi câu trả lời có thể trong khối câu hỏi của nó (1 là câu trả lời lựa chọn một, 2 là câu trả lời lựa chọn hai, v.v.)second digit indicates the order of each possible answer within its question block (1 is answer choice one, 2 is answer choice two, etc.)

Ví dụ: block-12 đại diện cho câu hỏi1/lựa chọn câu trả lời 2, trong khi block-43 là câu hỏi 4/lựa chọn câu trả lời 3.question 1/answer choice 2, while block-43 is question 4/answer choice 3.

Quy ước lập chỉ mục này là cần thiết cho các khối câu hỏi khác nhau để hoạt động độc lập với nhau.

Logic tương tự áp dụng cho các tên chức năng chịu trách nhiệm cho tính tương tác. Mã xử lý tương tác người dùng được đặt trong các thẻ ____99 và bao gồm hai phần. Phần đầu tiên là chức năng đánh giá câu trả lời và hiển thị kết quả:

function displayAnswer1() {
    if (document.getElementById('option-11').checked) {
      document.getElementById('block-11').style.border = '3px solid limegreen'
      document.getElementById('result-11').style.color = 'limegreen'
      document.getElementById('result-11').innerHTML = 'Correct!'
    }
    if (document.getElementById('option-12').checked) {
      document.getElementById('block-12').style.border = '3px solid red'
      document.getElementById('result-12').style.color = 'red'
      document.getElementById('result-12').innerHTML = 'Incorrect!'
      showCorrectAnswer1()
    }
    if (document.getElementById('option-13').checked) {
      document.getElementById('block-13').style.border = '3px solid red'
      document.getElementById('result-13').style.color = 'red'
      document.getElementById('result-13').innerHTML = 'Incorrect!'
      showCorrectAnswer1()
    }
    if (document.getElementById('option-14').checked) {
      document.getElementById('block-14').style.border = '3px solid red'
      document.getElementById('result-14').style.color = 'red'
      document.getElementById('result-14').innerHTML = 'Incorrect!'
      showCorrectAnswer1()
    }
  }

Giống như tên cho thấy, hàm

  ...
  

    
      
      ANSWER 1
    
  
  


  

    
      
      ANSWER 2
    
  
  

  ...

  ...
  

    
      
      ANSWER 1
    
  
  


  

    
      
      ANSWER 2
    
  
  

  ...

Trong ví dụ trên,

  ...
  

    
      
      ANSWER 1
    
  
  


  

    
      
      ANSWER 2
    
  
  

  ...

  ...
  

    
      
      ANSWER 1
    
  
  


  

    
      
      ANSWER 2
    
  
  

  ...

Hãy chơi với các chức năng

  ...
  

    
      
      ANSWER 1
    
  
  


  

    
      
      ANSWER 2
    
  
  

  ...

Đây là phần thứ hai của mã xử lý tương tác người dùng:

function showCorrectAnswer1() {
    let showAnswer1 = document.createElement('p')
    showAnswer1.innerHTML = 'Show Corrent Answer'
    showAnswer1.style.position = 'relative'
    showAnswer1.style.top = '-180px'
    showAnswer1.style.fontSize = '1.75rem'
    document.getElementById('showanswer1').appendChild(showAnswer1)
    showAnswer1.addEventListener('click', () => {
      document.getElementById('block-11').style.border = '3px solid limegreen'
      document.getElementById('result-11').style.color = 'limegreen'
      document.getElementById('result-11').innerHTML = 'Correct!'
      document.getElementById('showanswer1').removeChild(showAnswer1)
    })
  }

Hàm này được gọi là

  ...
  

    
      
      ANSWER 1
    
  
  


  

    
      
      ANSWER 2
    
  
  

  ...

  ...
  

    
      
      ANSWER 1
    
  
  


  

    
      
      ANSWER 2
    
  
  

  ...

  ...
  

    
      
      ANSWER 1
    
  
  


  

    
      
      ANSWER 2
    
  
  

  ...

Vui lòng chơi xung quanh với kiểu dáng và kích thước được sử dụng trong suốt mã và tùy chỉnh nó theo sở thích của bạn. Ngoài ra, tôi chắc chắn có những cách khác để thực hiện các câu đố trắc nghiệm, nhưng đây là của tôi và tôi rất vui khi chia sẻ nó với bạn.

Đây là mã đầy đủ và một ví dụ làm việc:

  
What fraction of a day is 6 hours?
  
Choose 1 answer
  


  

    
      
      6/24
    
  
  


  

    
      
      6
    
  
  


  

    
      
      1/3
    
  
  


  

    
      
      1/6
    
  
  

  Submit

Phần nào của một ngày là 6 giờ?

Chọn 1 câu trả lời

6/24

6

1/3

1/6

Bạn cũng có thể tìm thấy mã nồi hơi hoàn chỉnh ở đây trên GitHub.