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

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.onclick = 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.onclick = function(){
					showResults(questions, quizContainer, resultsContainer);
				}
			}
		

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.onclick = function(){
					showResults(questions, quizContainer, resultsContainer);
				}
			}
		

Ý 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'
								+ ''
								+ letter + ': '
								+ questions[i].answers[letter]
							+ ''
						);
					}

					// add this question and its answers to the output
					output.push(
						'
' + questions[i].question + '
'
						+ '
' + answers.join('') + '
'
					);
				}

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

Khi đã sẵn sàng, bạn có thể chạy chức năng như thế này:

			showQuestions(questions, quizContainer);
		

Lưu ý rằng trong dòng này, các giá trị

			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.onclick = function(){
					showResults(questions, quizContainer, resultsContainer);
				}
			}
		

			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.onclick = function(){
					showResults(questions, quizContainer, resultsContainer);
				}
			}
		

Phần hay về mã của chúng tôi là nó hoạt động cho bất kỳ số lượng câu hỏi hoặc lựa chọn trả lời nào bạn có thể có trong bài kiểm tra JavaScript của mình.

Bước 3: Khi gửi, hãy hiển thị kết quả

Chúng tôi sẽ cần đ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.onclick = function(){
					showResults(questions, quizContainer, resultsContainer);
				}
			}
		

Đây là cách logic JavaScript của chúng tôi sẽ trông:

• Đối với mỗi câu hỏi, hãy tìm câu trả lời đã chọn
• Nếu câu trả lời là chính xác, hãy trả lời phù hợp
• Nếu câu trả lời là sai, hãy trả lời phù hợp
• Hiển thị số lượng câu trả lời đúng trong tổng số

Và đây là JavaScript để hiển thị kết quả của bài kiểm tra của chúng tôi:

			function showResults(questions, quizContainer, resultsContainer){
				
				// gather answer containers from our quiz
				var answerContainers = quizContainer.querySelectorAll('.answers');
				
				// keep track of user's answers
				var userAnswer = '';
				var numCorrect = 0;
				
				// for each question...
				for(var i=0; i

Trong dòng nói rằng "// Tìm câu trả lời được chọn", chúng tôi đã thực hiện một mẹo nhỏ. Chúng tôi đã sử dụng toán tử

			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.onclick = function(){
					showResults(questions, quizContainer, resultsContainer);
				}
			}
		

			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.onclick = function(){
					showResults(questions, quizContainer, resultsContainer);
				}
			}
		

			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.onclick = function(){
					showResults(questions, quizContainer, resultsContainer);
				}
			}
		

			// on submit, show results
			submitButton.onclick = function(){
				showResults(questions, quizContainer, resultsContainer);
			}
		

			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.onclick = function(){
					showResults(questions, quizContainer, resultsContainer);
				}
			}
		

			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.onclick = function(){
					showResults(questions, quizContainer, resultsContainer);
				}
			}
		

			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'
				}
			];
		

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

			generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton);
		

			body{
				font-size: 20px;
				font-family: sans-serif;
				color: #333;
			}
			.question{
				font-weight: 600;
			}
			.answers {
			    margin-bottom: 20px;
			}
			#submit{
				font-family: sans-serif;
				font-size: 20px;
				background-color: #297;
				color: #fff;
				border: 0px;
				border-radius: 3px;
				padding: 20px;
				cursor: pointer;
				margin-bottom: 20px;
			}
			#submit:hover{
				background-color: #3a8;
			}