<div class="quiz-card">
  <h3>Which language runs in the browser?</h3>
  <div class="options">
    <button class="option-btn" onclick="checkAnswer(this, false)">Java</button>
    <button class="option-btn" onclick="checkAnswer(this, false)">Python</button>
    <button class="option-btn" onclick="checkAnswer(this, true)">JavaScript</button>
    <button class="option-btn" onclick="checkAnswer(this, false)">C++</button>
  </div>
  <div id="result" class="result-msg"></div>
</div>

.quiz-card {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #fff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  max-width: 400px;
  margin: 0 auto;
}
h3 {
  margin: 0 0 20px 0;
  color: #1f2937;
}
.options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.option-btn {
  padding: 12px;
  border: 2px solid #e5e7eb;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  text-align: left;
  transition: all 0.2s;
}
.option-btn:hover {
  background: #f9fafb;
}
.option-btn.correct {
  border-color: #10b981;
  background-color: #ecfdf5;
  color: #065f46;
}
.option-btn.wrong {
  border-color: #ef4444;
  background-color: #fef2f2;
  color: #991b1b;
}
.result-msg {
  margin-top: 15px;
  font-weight: 600;
  min-height: 24px;
}

function checkAnswer(btn, isCorrect) {
  // Reset previous selections
  const allBtns = document.querySelectorAll(".option-btn");
  allBtns.forEach(b => b.className = "option-btn");
  
  const result = document.getElementById("result");
  
  if (isCorrect) {
    btn.classList.add("correct");
    result.innerText = "Correct! Well done.";
    result.style.color = "#10b981";
  } else {
    btn.classList.add("wrong");
    result.innerText = "Incorrect. Try again!";
    result.style.color = "#ef4444";
  }
}

Back to Snippets

Interactive Quiz Card JS

Engage visitors with a simple quiz interface. Users can select an answer and get immediate visual feedback on whether they were right or wrong, making learning interactive and fun.

274

#javascript

#css

#quiz

#interactive

#game

#form

#learning

#ui

/HTML *CSS ()JS Output Live Updates

Interactive Quiz Card JS

Share Code Snippet