<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>

// 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();