<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";
}
}
