Interactive Quiz Form

<div id="quiz">
  <div id="quizQuestions"></div>
  <button id="submitQuiz" onclick="submitQuiz()">Submit Quiz</button>
  <div id="quizResult" style="display:none"></div>
</div>
<script>
const questions = [
  { q: "What is your budget?", options: ["Under $100", "$100-$500", "$500+"] },
  { q: "Best time to contact?", options: ["Morning", "Afternoon", "Evening"] },
  { q: "Preferred contact method?", options: ["Email", "Phone", "WhatsApp"] },
];
let answers = {};
function renderQuiz() {
  const container = document.getElementById("quizQuestions");
  container.innerHTML = questions.map((item, i) =>
    `<div class="quiz-q" style="margin-bottom:20px">
      <p style="font-weight:600;margin-bottom:10px">${i + 1}. ${item.q}</p>
      ${item.options.map((opt, j) =>
        `<label style="display:block;padding:8px 12px;margin:4px 0;border:1px solid #ddd;border-radius:6px;cursor:pointer">
          <input type="radio" name="q${i}" value="${j}" onchange="answers[${i}]=${j}"> ${opt}
        </label>`).join("")}
    </div>`).join("");
}
function submitQuiz() {
  if (Object.keys(answers).length < questions.length) { alert("Please answer all questions"); return; }
  document.getElementById("quizQuestions").style.display = "none";
  document.getElementById("submitQuiz").style.display = "none";
  const resultDiv = document.getElementById("quizResult");
  resultDiv.style.display = "block";
  resultDiv.innerHTML = `<h3>Quiz Complete!</h3><p>You answered all ${questions.length} questions.</p>`;
}
renderQuiz();
</script>