JavaScript Dom
~5 minutes
MCQ Quiz
Instructions: Click an option to select your answer. Use Show Answer to reveal the correct answer at any time. When ready, click Submit Quiz to see your score.
{
if (!timerActive || confirmed || finished) return;
if (timeLeft === 0) {
handleConfirm(true);
return;
}
const t = setTimeout(() => setTimeLeft(t => t - 1), 1000);
return () => clearTimeout(t);
}, [timeLeft, timerActive, confirmed, finished]);
function handleSelect(idx) {
if (confirmed) return;
setSelected(idx);
}
function handleConfirm(timedOut = false) {
if (selected === null && !timedOut) return;
setConfirmed(true);
setTimerActive(false);
const isCorrect = selected === q.correct;
if (isCorrect) setScore(s => s + 1);
setAnswers(prev => [...prev, { selected: timedOut ? null : selected, correct: q.correct, timedOut }]);
}
function handleNext() {
if (current + 1 >= total) {
setFinished(true);
} else {
setCurrent(c => c + 1);
setSelected(null);
setConfirmed(false);
setTimeLeft(30);
setTimerActive(true);
}
}
function handleRestart() {
setCurrent(0);
setSelected(null);
setConfirmed(false);
setScore(0);
setFinished(false);
setAnswers([]);
setShowReview(false);
setTimeLeft(30);
setTimerActive(true);
}
const percent = Math.round((score / total) * 100);
const grade = percent >= 80 ? "Excellent!" : percent >= 60 ? "Good Job!" : percent >= 40 ? "Keep Practicing!" : "Review the Tutorial";
const gradeColor = percent >= 80 ? "#00c896" : percent >= 60 ? "#f9a825" : percent >= 40 ? "#fb8c00" : "#ef5350";
const timerColor = timeLeft > 15 ? "#00c896" : timeLeft > 7 ? "#f9a825" : "#ef5350";
const timerDash = `${Math.round((timeLeft / 30) * 251)} 251`;
if (finished && showReview) {
return (
);
}
if (finished) {
return (
);
}
return (
);
}
const styles = {
wrap: {
minHeight: "100vh",
background: "linear-gradient(135deg, #060d1a 0%, #0a1628 50%, #060d1a 100%)",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "24px 16px",
fontFamily: "'Georgia', 'Times New Roman', serif",
},
card: {
background: "#0c1829",
border: "1px solid #1e2a3a",
borderRadius: "20px",
width: "100%",
maxWidth: "620px",
padding: "32px 28px 24px",
position: "relative",
boxShadow: "0 0 60px #4a9eff18, 0 20px 60px #00000080",
overflow: "hidden",
},
header: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "20px",
},
topicTag: {
background: "#4a9eff18",
border: "1px solid #4a9eff44",
color: "#4a9eff",
borderRadius: "20px",
padding: "4px 14px",
fontSize: "12px",
fontFamily: "monospace",
letterSpacing: "0.05em",
},
progress: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "6px" },
progressText: { color: "#4a6a8a", fontSize: "12px", fontFamily: "monospace" },
progressBar: { width: "120px", height: "4px", background: "#1e2a3a", borderRadius: "2px" },
progressFill: { height: "100%", background: "linear-gradient(90deg, #4a9eff, #00c896)", borderRadius: "2px", transition: "width 0.4s ease" },
timerWrap: {
position: "absolute", top: "28px", right: "28px",
display: "flex", alignItems: "center", justifyContent: "center",
},
timerNum: {
position: "absolute",
fontSize: "15px",
fontWeight: "bold",
fontFamily: "monospace",
},
qNum: { color: "#4a6a8a", fontSize: "12px", fontFamily: "monospace", margin: "0 0 10px", textTransform: "uppercase", letterSpacing: "0.1em" },
qText: { color: "#e8f0ff", fontSize: "18px", lineHeight: "1.6", margin: "0 0 24px", fontWeight: "normal" },
opts: { display: "flex", flexDirection: "column", gap: "10px", marginBottom: "20px" },
optBtn: {
display: "flex", alignItems: "flex-start", gap: "12px",
padding: "14px 16px",
borderRadius: "12px",
cursor: "pointer",
textAlign: "left",
fontSize: "14px",
lineHeight: "1.5",
transition: "all 0.2s",
fontFamily: "'Georgia', serif",
},
optLetter: {
minWidth: "26px", height: "26px",
border: "1.5px solid",
borderRadius: "6px",
display: "flex", alignItems: "center", justifyContent: "center",
fontSize: "12px", fontWeight: "bold", fontFamily: "monospace",
flexShrink: 0, marginTop: "1px",
},
expBox: {
display: "flex", gap: "12px", alignItems: "flex-start",
background: "#0a1628",
border: "1px solid #1e2a3a",
borderRadius: "12px",
padding: "14px 16px",
marginBottom: "20px",
},
expIcon: { fontSize: "18px", flexShrink: 0, marginTop: "1px" },
expText: { color: "#8aa8c8", fontSize: "13px", lineHeight: "1.6", margin: 0 },
actions: { display: "flex", justifyContent: "center", marginBottom: "20px" },
confirmBtn: {
background: "linear-gradient(135deg, #4a9eff, #2979cc)",
color: "#fff", border: "none", borderRadius: "12px",
padding: "13px 40px", fontSize: "15px", cursor: "pointer",
fontFamily: "'Georgia', serif", fontWeight: "bold",
boxShadow: "0 4px 20px #4a9eff40",
transition: "opacity 0.2s",
},
nextBtn: {
background: "linear-gradient(135deg, #00c896, #00a07a)",
color: "#fff", border: "none", borderRadius: "12px",
padding: "13px 40px", fontSize: "15px", cursor: "pointer",
fontFamily: "'Georgia', serif", fontWeight: "bold",
boxShadow: "0 4px 20px #00c89640",
},
footer: { display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: "16px", borderTop: "1px solid #1e2a3a" },
footerScore: { color: "#4a6a8a", fontSize: "13px" },
footerSite: { color: "#2a3a4a", fontSize: "11px", fontFamily: "monospace" },
// Finish screen
finishGlow: { position: "absolute", top: "-60px", left: "50%", transform: "translateX(-50%)", width: "300px", height: "300px", background: "radial-gradient(circle, #4a9eff10, transparent 70%)", pointerEvents: "none" },
trophyWrap: { textAlign: "center", marginBottom: "8px" },
trophy: { fontSize: "52px" },
finishTitle: { color: "#e8f0ff", fontSize: "26px", textAlign: "center", margin: "0 0 24px", fontWeight: "normal" },
scoreRing: { display: "flex", alignItems: "center", justifyContent: "center", position: "relative", marginBottom: "16px" },
scoreInner: { position: "absolute", textAlign: "center" },
scoreNum: { fontSize: "28px", fontWeight: "bold", fontFamily: "monospace" },
scoreDen: { fontSize: "16px", color: "#4a6a8a", fontFamily: "monospace" },
gradeLabel: { textAlign: "center", fontSize: "20px", margin: "0 0 6px", fontWeight: "bold" },
percentText: { textAlign: "center", color: "#4a6a8a", marginBottom: "28px", fontFamily: "monospace" },
finishBtns: { display: "flex", gap: "12px", justifyContent: "center" },
reviewBtn: { background: "#1e2a3a", color: "#8aa8c8", border: "1px solid #2a3a4a", borderRadius: "12px", padding: "12px 28px", cursor: "pointer", fontSize: "14px", fontFamily: "'Georgia', serif" },
restartBtn: { background: "linear-gradient(135deg, #4a9eff, #2979cc)", color: "#fff", border: "none", borderRadius: "12px", padding: "12px 28px", cursor: "pointer", fontSize: "14px", fontFamily: "'Georgia', serif", fontWeight: "bold" },
// Review screen
reviewHeader: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" },
reviewTitle: { color: "#e8f0ff", fontSize: "20px", margin: 0, fontWeight: "normal" },
backBtn: { background: "none", border: "1px solid #2a3a4a", color: "#4a9eff", borderRadius: "8px", padding: "6px 14px", cursor: "pointer", fontSize: "13px", fontFamily: "'Georgia', serif" },
reviewList: { display: "flex", flexDirection: "column", gap: "16px", maxHeight: "65vh", overflowY: "auto" },
reviewItem: { background: "#0a1628", borderRadius: "10px", padding: "14px 16px" },
reviewQ: { display: "flex", gap: "10px", alignItems: "flex-start", marginBottom: "8px" },
reviewBadge: { borderRadius: "6px", padding: "2px 8px", fontSize: "12px", fontFamily: "monospace", flexShrink: 0, marginTop: "2px" },
reviewQText: { color: "#c8d8f0", fontSize: "14px", lineHeight: "1.5" },
reviewAnswers: { display: "flex", flexDirection: "column", gap: "4px", marginBottom: "8px", paddingLeft: "4px" },
wrongAns: { color: "#ef5350", fontSize: "13px" },
correctAns: { color: "#00c896", fontSize: "13px" },
timedOutLabel: { color: "#f9a825", fontSize: "13px" },
reviewExp: { color: "#4a6a8a", fontSize: "12px", lineHeight: "1.5", margin: 0 },
};'>
Answer Review
{QUIZ_DATA.map((item, i) => {
const ans = answers[i];
const isCorrect = ans.selected === item.correct;
return (
);
})}
{isCorrect ? "✓" : "✗"} Q{i + 1}
{item.q}
{!isCorrect && (
{ans.timedOut ? (
⏱ Time ran out
) : (
Your answer: {item.opts[ans.selected]}
)}
✓ Correct: {item.opts[item.correct]}
)}
{item.exp}
{percent >= 80 ? "🏆" : percent >= 60 ? "🌟" : "📚"}
Quiz Complete!
{score}
/{total}
{grade}
{percent}% correct
{/* Header */}
{/* Timer */}
JavaScript DOM
{current + 1} / {total}
{timeLeft}
{/* Question */}
Question {current + 1}
{q.q}
{/* Options */}
{q.opts.map((opt, i) => {
let bg = "#111c2d";
let border = "#1e2a3a";
let color = "#c8d8f0";
if (confirmed) {
if (i === q.correct) { bg = "#00c89615"; border = "#00c896"; color = "#00c896"; }
else if (i === selected && i !== q.correct) { bg = "#ef535015"; border = "#ef5350"; color = "#ef5350"; }
} else if (selected === i) {
bg = "#1a3a5c"; border = "#4a9eff"; color = "#fff";
}
return (
);
})}
{/* Explanation */}
{confirmed && (
{selected === q.correct ? "✓" : "✗"}
)}
{/* Actions */}
{q.exp}
{!confirmed ? (
) : (
)}
{/* Score footer */}
Score: {score}
theiqra.edu.pk
0%
Your Result
0
Correct
0
Wrong
0
Skipped