Hướng dẫn how to create online test using html - cách tạo bài kiểm tra trực tuyến bằng html

Bạn có thể kiểm tra các kỹ năng HTML của mình với bài kiểm tra của W3Schools.

Các bài kiểm tra

Bài kiểm tra chứa 40 câu hỏi và không có giới hạn thời gian. & NBSP;

Bài kiểm tra không chính thức, đó chỉ là một cách hay để xem bạn biết bao nhiêu, hoặc không biết, về HTML.

Đếm điểm số của bạn

Bạn sẽ nhận được 1 điểm cho mỗi câu trả lời đúng. Vào cuối bài kiểm tra, tổng số điểm của bạn sẽ được hiển thị. Điểm tối đa là 40 điểm.

Nếu bạn không biết HTML, chúng tôi khuyên bạn nên đọc hướng dẫn HTML của chúng tôi từ đầu.

Khởi động sự nghiệp của bạn

Được chứng nhận bằng cách hoàn thành khóa họcthe course

Được chứng nhận

W3SchoolScertified.2022



Những gì bạn sẽ tạo ra

Xem câu đố JavaScript đơn giản của Yaphi [@yaphi1] trên Codepen.

Để thực hiện một bài kiểm tra JavaScript đơn giản, có bốn bước:

  1. Thiết lập cấu trúc
  2. Hiển thị các câu hỏi
  3. Khi gửi, hãy hiển thị kết quả
  4. Đặt nó tất cả cùng nhau

Điểm của hướng dẫn này là làm cho bài kiểm tra JavaScript đơn giản nhất có thể mà không cần bất kỳ mã bên ngoài nào cần thiết.

Chúng tôi cũng sẽ tránh hoạt hình, phong cách quá mức và bất cứ điều gì khác sẽ đánh lạc hướng khỏi bài kiểm tra JavaScript.

Một lưu ý nhanh trước khi bạn bắt đầu:

Hướng dẫn này giả định một sự hiểu biết cơ bản về JavaScript. Nếu bạn chưa ở đó, tôi đã kết hợp một bản đồ đường JavaScript để giúp bạn thoải mái với các khái niệm thực tế một cách nhanh chóng.

Bước 1: Thiết lập cấu trúc

Đầu tiên, chúng tôi sẽ tạo các div để giữ bài kiểm tra và kết quả của chúng tôi.

Sau đó, chúng tôi sẽ đặt một nút gửi.

Đây là HTML:


			
Get Results

Tiếp theo, chúng tôi sẽ tạo một chức năng để tạo một bài kiểm tra.

Chức năng của bạn sẽ cần các đầu vào này:

  • Các câu hỏi đố
  • Một nơi để đặt bài kiểm tra
  • Một nơi cho kết quả
  • Một nút gửi

Và nếu bạn đặt những thứ đó vào, chức năng sẽ nhổ ra một bài kiểm tra được hình thành đầy đủ.

Cấu trúc JavaScript:


			function generateQuiz[questions, quizContainer, resultsContainer, submitButton]{

				function showQuestions[questions, quizContainer]{
					// code will go here
				}

				function showResults[questions, quizContainer, resultsContainer]{
					// code will go here
				}

				// show the questions
				showQuestions[questions, quizContainer];

				// when user clicks submit, show results
				submitButton. title = function[]{
					showResults[questions, quizContainer, resultsContainer];
				}
			}
		

Nếu bạn nhìn kỹ vào cấu trúc JavaScript, bạn sẽ thấy rằng hàm


			function generateQuiz[questions, quizContainer, resultsContainer, submitButton]{

				function showQuestions[questions, quizContainer]{
					// code will go here
				}

				function showResults[questions, quizContainer, resultsContainer]{
					// code will go here
				}

				// show the questions
				showQuestions[questions, quizContainer];

				// when user clicks submit, show results
				submitButton. title = function[]{
					showResults[questions, quizContainer, resultsContainer];
				}
			}
		
0 của chúng tôi chứa các chức năng trợ giúp để hiển thị bài kiểm tra, chấp nhận đệ trình và hiển thị kết quả.

Bước 2: Hiển thị các câu hỏi

Đầu tiên chúng tôi sẽ cần các câu hỏi, vì vậy hãy đặt điều này vào JavaScript của bạn:


			var myQuestions = [
				{
					question: "What is 10/2?",
					answers: {
						a: '3',
						b: '5',
						c: '115'
					},
					correctAnswer: 'b'
				},
				{
					question: "What is 30/3?",
					answers: {
						a: '3',
						b: '5',
						c: '10'
					},
					correctAnswer: 'c'
				}
			];
		

Tiếp theo chúng ta sẽ cần một cách để thể hiện câu hỏi của chúng ta.

Đối với điều này, chúng tôi sẽ điền vào chức năng


			function generateQuiz[questions, quizContainer, resultsContainer, submitButton]{

				function showQuestions[questions, quizContainer]{
					// code will go here
				}

				function showResults[questions, quizContainer, resultsContainer]{
					// code will go here
				}

				// show the questions
				showQuestions[questions, quizContainer];

				// when user clicks submit, show results
				submitButton. title = function[]{
					showResults[questions, quizContainer, resultsContainer];
				}
			}
		
1 của chúng tôi.

Ý tưởng chung: Đối với mỗi câu hỏi, hãy hiển thị câu hỏi cùng với tất cả các lựa chọn câu trả lời của nó. Đọc qua các ý kiến ​​trong mã này để xem nó hoạt động như thế nào.
For each question, show the question along with all of its answer choices. Read through the comments in this code to see how it works.


			function showQuestions[questions, quizContainer]{
				// we'll need a place to store the output and the answer choices
				var output = [];
				var answers;

				// for each question...
				for[var i=0; i

Chủ Đề