1. Khối HTML Quiz

<div id="multi-quiz" class="uk-card uk-card-default uk-card-body uk-margin">
  <h3 id="quiz-question"></h3>
  <ul id="quiz-options" class="uk-list"></ul>
  <p id="quiz-feedback" class="uk-text-bold uk-margin-top"></p>
  <button id="next-question" class="uk-button uk-button-primary uk-margin-top" style="display:none;" onclick="nextQuestion()">Câu tiếp theo</button>
  <p id="quiz-result" class="uk-text-center uk-margin-top uk-text-lead"></p>
</div>

2. JavaScript điều khiển logic

// Danh sách câu hỏi
const questions = [
  {
    question: "WordPress được viết bằng ngôn ngữ gì?",
    options: ["Python", "PHP", "Ruby", "Java"],
    answer: 1
  },
  {
    question: "Cơ sở dữ liệu mặc định của WordPress là?",
    options: ["PostgreSQL", "MongoDB", "MySQL", "SQLite"],
    answer: 2
  },
  {
    question: "Hàm nào dùng để truy vấn bài viết trong WordPress?",
    options: ["get_post()", "WP_Query", "fetch_post()", "query_post()"],
    answer: 1
  }
];

let currentQuestion = 0;
let score = 0;

function renderQuestion() {
  const q = questions[currentQuestion];
  document.getElementById("quiz-question").innerText = q.question;

  const optionsEl = document.getElementById("quiz-options");
  optionsEl.innerHTML = "";

  q.options.forEach((opt, index) => {
    const li = document.createElement("li");
    const btn = document.createElement("button");
    btn.className = "uk-button uk-button-default uk-margin-small-bottom";
    btn.innerText = opt;
    btn.onclick = () => checkAnswer(index);
    li.appendChild(btn);
    optionsEl.appendChild(li);
  });

  document.getElementById("quiz-feedback").innerText = "";
  document.getElementById("next-question").style.display = "none";
}

function checkAnswer(selected) {
  const correct = questions[currentQuestion].answer;
  const feedback = document.getElementById("quiz-feedback");

  const buttons = document.querySelectorAll("#quiz-options button");
  buttons.forEach((btn, i) => {
    btn.disabled = true;
    if (i === correct) btn.classList.add("uk-button-success");
    if (i === selected && i !== correct) btn.classList.add("uk-button-danger");
  });

  if (selected === correct) {
    feedback.innerText = "Chính xác!";
    feedback.className = "uk-text-success uk-text-bold";
    score++;
  } else {
    feedback.innerText = "Sai rồi!";
    feedback.className = "uk-text-danger uk-text-bold";
  }

  document.getElementById("next-question").style.display = "inline-block";
}

function nextQuestion() {
  currentQuestion++;
  if (currentQuestion < questions.length) {
    renderQuestion();
  } else {
    showResult();
  }
}

function showResult() {
  document.getElementById("multi-quiz").innerHTML = `
    <h3 class="uk-text-center">Hoàn thành Quiz</h3>
    <p class="uk-text-center uk-text-lead">Bạn trả lời đúng <strong>${score} / ${questions.length}</strong> câu hỏi.</p>
    <p class="uk-text-center"><a class="uk-button uk-button-default" href="#" onclick="restartQuiz(); return false;">Làm lại</a></p>
  `;
}

function restartQuiz() {
  currentQuestion = 0;
  score = 0;
  const container = document.getElementById("multi-quiz");
  container.innerHTML = `
    <h3 id="quiz-question"></h3>
    <ul id="quiz-options" class="uk-list"></ul>
    <p id="quiz-feedback" class="uk-text-bold uk-margin-top"></p>
    <button id="next-question" class="uk-button uk-button-primary uk-margin-top" style="display:none;" onclick="nextQuestion()">Câu tiếp theo</button>
    <p id="quiz-result" class="uk-text-center uk-margin-top uk-text-lead"></p>
  `;
  renderQuestion();
}

// Bắt đầu quiz
renderQuestion();

3. Kết luận

Với một đoạn JavaScript đơn giản và vài dòng HTML, bạn đã có một hệ thống mini quiz nhiều câu hỏi tích hợp ngay trong bài viết hoặc trang WordPress. Cách này không cần plugin, có thể tùy biến để chấm điểm, lưu tiến độ, hay thậm chí là chia sẻ kết quả lên mạng xã hội.

Gợi ý: Bạn có thể lưu quiz dưới dạng <script type="application/json"> để nạp dữ liệu động, hoặc dùng shortcode để dễ quản lý nhiều quiz.