hoadh · April 11, 2025 12:32
diff --git a/huong-dan-quiz-oop.html b/huong-dan-quiz-oop.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
 </head>
 <body>
 <h1>Game Quiz Mini</h1>
 <p id="question">Câu ?: Nội dung câu hỏi ở đây</p>
 <button id="answer1" onclick="checkAnswer(0)" style="width: 200px;">Đáp án 1</button>
 <br><br>
 <button id="answer2" onclick="checkAnswer(1)" style="width: 200px;">Đáp án 2</button>
 <br><br>
 <button id="answer3" onclick="checkAnswer(2)" style="width: 200px;">Đáp án 3</button>
 <br><br>
 <button id="answer4" onclick="checkAnswer(3)" style="width: 200px;">Đáp án 4</button>
 <br><br>
 <button onclick="nextQuestion()" id="nextQuestion">Tiếp theo</button>
 <p id="result"></p>
 </body>
 <script>
    // Định nghĩa lớp Quiz
    // - question
    // - options (mảng) --> [ 0, 1, 2, 3 ]
    // - correctAnswer (chỉ số của đáp án đúng)

    class Quiz {
        constructor(question, options, correctAnswer) {
            this.question = question;
            this.options = options;
            this.correctAnswer = correctAnswer;
        }
    }

    let cauHoi1 = new Quiz("HTML viết tắt của từ gì?", [ "A", "B", "C", "D"  ], 2);
    let cauHoi2 = new Quiz("Toán tử nào dùng để so sánh giá trị và kiểu?", [ "E", "F", "G", "H"  ], 3);

    let quizzes = [
        cauHoi1, // mỗi biến là 1 đối tượng kiểu Quiz
        cauHoi2, // mỗi biến là 1 đối tượng kiểu Quiz
        new Quiz("JavaScript là ngôn ngữ gì?" , [ "A", "B", "C", "D"  ], 0) // mỗi biến là 1 đối tượng kiểu Quiz
    ];

  let currentQuestion = 0; // Mặc định là câu hỏi đầu tiên

  function renderQuestion() {
    // Câu hỏi hiện tại là câu nào?
    let currentText = quizzes[currentQuestion].question;
    let currentOptions = quizzes[currentQuestion].options;

    document.getElementById("question").innerHTML = currentText;
    document.getElementById("answer1").innerHTML = currentOptions[0];
    document.getElementById("answer2").innerHTML = currentOptions[1];
    document.getElementById("answer3").innerHTML = currentOptions[2];
    document.getElementById("answer4").innerHTML = currentOptions[3];
  }

  function nextQuestion() {
      // Làm sao để biết câu hỏi hiện tại là câu cuối cùng

      if (currentQuestion < quizzes.length - 1) {
          currentQuestion++; // chuyển qua câu hỏi tiếp theo
          renderQuestion();  // rồi mới hiển thị câu hỏi
      } else { // câu hỏi cuối cùng
          // Hiển thị tổng điểm số
      }
  }

  function checkAnswer(clickedIndex) {
      // kiểm tra đáp án đúng hay sai.
      let correctAnswer = quizzes[currentQuestion].correctAnswer;
      if (clickedIndex == correctAnswer) {
          document.getElementById("result").innerHTML = "Chính xác!";
      } else {
          document.getElementById("result").innerHTML = "Sai rồi!";
      }
  }

  renderQuestion(); // đây là dòng lệnh sẽ hiển thị câu hỏi đầu tiên khi người dùng vào game.
 </script>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<body>
	<h1>Game Quiz Mini</h1>
	<p id="question">Câu ?: Nội dung câu hỏi ở đây</p>
	<button id="answer1" onclick="checkAnswer(0)" style="width: 200px;">Đáp án 1</button>
	<br><br>
	<button id="answer2" onclick="checkAnswer(1)" style="width: 200px;">Đáp án 2</button>
	<br><br>
	<button id="answer3" onclick="checkAnswer(2)" style="width: 200px;">Đáp án 3</button>
	<br><br>
	<button id="answer4" onclick="checkAnswer(3)" style="width: 200px;">Đáp án 4</button>
	<br><br>
	<button onclick="nextQuestion()" id="nextQuestion">Tiếp theo</button>
	<p id="result"></p>
	</body>
	<script>
	// Định nghĩa lớp Quiz
	// - question
	// - options (mảng) --> [ 0, 1, 2, 3 ]
	// - correctAnswer (chỉ số của đáp án đúng)

	class Quiz {
	constructor(question, options, correctAnswer) {
	this.question = question;
	this.options = options;
	this.correctAnswer = correctAnswer;
	}
	}

	let cauHoi1 = new Quiz("HTML viết tắt của từ gì?", [ "A", "B", "C", "D" ], 2);
	let cauHoi2 = new Quiz("Toán tử nào dùng để so sánh giá trị và kiểu?", [ "E", "F", "G", "H" ], 3);

	let quizzes = [
	cauHoi1, // mỗi biến là 1 đối tượng kiểu Quiz
	cauHoi2, // mỗi biến là 1 đối tượng kiểu Quiz
	new Quiz("JavaScript là ngôn ngữ gì?" , [ "A", "B", "C", "D" ], 0) // mỗi biến là 1 đối tượng kiểu Quiz
	];

	let currentQuestion = 0; // Mặc định là câu hỏi đầu tiên

	function renderQuestion() {
	// Câu hỏi hiện tại là câu nào?
	let currentText = quizzes[currentQuestion].question;
	let currentOptions = quizzes[currentQuestion].options;

	document.getElementById("question").innerHTML = currentText;
	document.getElementById("answer1").innerHTML = currentOptions[0];
	document.getElementById("answer2").innerHTML = currentOptions[1];
	document.getElementById("answer3").innerHTML = currentOptions[2];
	document.getElementById("answer4").innerHTML = currentOptions[3];
	}

	function nextQuestion() {
	// Làm sao để biết câu hỏi hiện tại là câu cuối cùng

	if (currentQuestion < quizzes.length - 1) {
	currentQuestion++; // chuyển qua câu hỏi tiếp theo
	renderQuestion(); // rồi mới hiển thị câu hỏi
	} else { // câu hỏi cuối cùng
	// Hiển thị tổng điểm số
	}
	}

	function checkAnswer(clickedIndex) {
	// kiểm tra đáp án đúng hay sai.
	let correctAnswer = quizzes[currentQuestion].correctAnswer;
	if (clickedIndex == correctAnswer) {
	document.getElementById("result").innerHTML = "Chính xác!";
	} else {
	document.getElementById("result").innerHTML = "Sai rồi!";
	}
	}

	renderQuestion(); // đây là dòng lệnh sẽ hiển thị câu hỏi đầu tiên khi người dùng vào game.
	</script>
	</html>