quiz of 10 mcqs from topic of autonomic nervous system for class 2 nd year mbbs
| Q | Answer | Topic |
|---|---|---|
| 1 | B | Sympathetic outflow origin |
| 2 | C | Preganglionic neurotransmitter |
| 3 | B | Sweat gland exception |
| 4 | B | Adrenal medulla secretion |
| 5 | B | Pheochromocytoma - ectopic |
| 6 | C | Parasympathetic heart effects |
| 7 | C | Fight or flight response |
| 8 | C | Direct preganglionic innervation |
| 9 | B | Ganglionic receptors |
| 10 | B | Pre vs postganglionic fiber length |
In quiz form like online test
mkdir -p /home/daytona/workspace/ans-quiz
~/ans-quiz/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ANS Quiz β 2nd Year MBBS</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Segoe UI', Arial, sans-serif;
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.card {
background: #fff;
border-radius: 18px;
width: 100%;
max-width: 720px;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
overflow: hidden;
}
/* ββ TOP BAR ββ */
.topbar {
background: linear-gradient(90deg, #1a73e8, #0d47a1);
color: #fff;
padding: 14px 24px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.topbar-title { font-size: 1rem; font-weight: 700; letter-spacing: .3px; }
.topbar-meta { display: flex; gap: 16px; align-items: center; font-size: .9rem; }
.timer-wrap { display: flex; align-items: center; gap: 6px; }
.timer-icon { font-size: 1rem; }
#timer {
font-size: 1.1rem; font-weight: 700;
background: rgba(255,255,255,.2);
border-radius: 8px;
padding: 2px 10px;
min-width: 52px;
text-align: center;
transition: background .3s;
}
#timer.danger { background: #e53935; animation: pulse .6s infinite alternate; }
@keyframes pulse { to { opacity: .6; } }
.score-badge {
background: rgba(255,255,255,.2);
border-radius: 8px;
padding: 2px 10px;
font-weight: 600;
}
/* ββ PROGRESS BAR ββ */
.progress-container { height: 6px; background: #e0e0e0; }
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #1a73e8, #00c6ff);
transition: width .4s ease;
}
/* ββ BODY ββ */
.quiz-body { padding: 30px 30px 24px; }
.q-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.q-number {
font-size: .82rem;
font-weight: 700;
color: #1a73e8;
text-transform: uppercase;
letter-spacing: .5px;
}
.difficulty {
font-size: .75rem;
border-radius: 20px;
padding: 2px 10px;
font-weight: 600;
}
.easy { background: #e8f5e9; color: #2e7d32; }
.medium { background: #fff8e1; color: #f57f17; }
.hard { background: #fce4ec; color: #c62828; }
.question-text {
font-size: 1.08rem;
font-weight: 600;
line-height: 1.6;
color: #212121;
margin-bottom: 22px;
min-height: 60px;
}
/* ββ OPTIONS ββ */
.options { display: flex; flex-direction: column; gap: 11px; }
.option-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 16px;
border: 2px solid #e0e0e0;
border-radius: 12px;
background: #fafafa;
cursor: pointer;
font-size: .97rem;
text-align: left;
transition: border-color .2s, background .2s, transform .1s;
color: #333;
}
.option-btn:hover:not(:disabled) {
border-color: #1a73e8;
background: #e8f0fe;
transform: translateX(3px);
}
.option-btn .opt-label {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
border-radius: 50%;
background: #e0e0e0;
font-weight: 700;
font-size: .85rem;
flex-shrink: 0;
transition: background .2s, color .2s;
color: #555;
}
.option-btn .opt-text { flex: 1; }
.option-btn .opt-icon { font-size: 1.2rem; margin-left: auto; opacity: 0; transition: opacity .2s; }
/* States */
.option-btn.correct {
border-color: #2e7d32;
background: #e8f5e9;
}
.option-btn.correct .opt-label { background: #2e7d32; color: #fff; }
.option-btn.correct .opt-icon { opacity: 1; }
.option-btn.wrong {
border-color: #c62828;
background: #fce4ec;
}
.option-btn.wrong .opt-label { background: #c62828; color: #fff; }
.option-btn.wrong .opt-icon { opacity: 1; }
.option-btn.missed {
border-color: #2e7d32;
background: #e8f5e9;
opacity: .7;
}
.option-btn.missed .opt-label { background: #2e7d32; color: #fff; }
.option-btn:disabled { cursor: default; }
/* ββ EXPLANATION ββ */
.explanation {
display: none;
margin-top: 18px;
background: #f3f8ff;
border-left: 4px solid #1a73e8;
border-radius: 0 10px 10px 0;
padding: 14px 16px;
font-size: .92rem;
color: #333;
line-height: 1.6;
}
.explanation strong { color: #1a73e8; }
.explanation.show { display: block; }
/* ββ FOOTER ββ */
.quiz-footer {
display: flex;
justify-content: flex-end;
padding: 0 30px 28px;
}
.btn-next {
display: none;
background: linear-gradient(90deg, #1a73e8, #0d47a1);
color: #fff;
border: none;
border-radius: 10px;
padding: 12px 28px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: opacity .2s, transform .1s;
}
.btn-next:hover { opacity: .9; transform: scale(1.02); }
.btn-next.show { display: inline-block; }
/* ββ RESULT SCREEN ββ */
#result-screen {
display: none;
padding: 36px 30px 36px;
text-align: center;
}
.result-emoji { font-size: 4rem; margin-bottom: 10px; }
.result-title { font-size: 1.7rem; font-weight: 800; color: #212121; margin-bottom: 6px; }
.result-subtitle { color: #666; font-size: 1rem; margin-bottom: 24px; }
.score-circle {
width: 130px; height: 130px;
border-radius: 50%;
background: conic-gradient(#1a73e8 0deg, #1a73e8 var(--deg), #e0e0e0 var(--deg));
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
box-shadow: 0 4px 20px rgba(26,115,232,.3);
}
.score-inner {
width: 104px; height: 104px;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.score-num { font-size: 2rem; font-weight: 800; color: #1a73e8; line-height: 1; }
.score-denom{ font-size: .9rem; color: #888; }
.stats-row {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.stat-box {
background: #f5f5f5;
border-radius: 12px;
padding: 14px 22px;
min-width: 110px;
}
.stat-val { font-size: 1.5rem; font-weight: 800; }
.stat-lbl { font-size: .78rem; color: #888; margin-top: 2px; }
.green { color: #2e7d32; }
.red { color: #c62828; }
.grade-badge {
display: inline-block;
font-size: 1rem;
font-weight: 700;
border-radius: 20px;
padding: 6px 20px;
margin-bottom: 28px;
}
.grade-A { background: #e8f5e9; color: #1b5e20; }
.grade-B { background: #e3f2fd; color: #0d47a1; }
.grade-C { background: #fff8e1; color: #e65100; }
.grade-D { background: #fce4ec; color: #880e4f; }
.review-list {
text-align: left;
margin-bottom: 28px;
max-height: 340px;
overflow-y: auto;
}
.review-item {
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 10px;
font-size: .9rem;
line-height: 1.5;
}
.review-item.correct-r { background: #e8f5e9; border-left: 4px solid #2e7d32; }
.review-item.wrong-r { background: #fce4ec; border-left: 4px solid #c62828; }
.review-item .r-q { font-weight: 600; color: #212121; margin-bottom: 4px; }
.review-item .r-ans{ font-size: .82rem; }
.r-correct-txt { color: #2e7d32; font-weight: 600; }
.r-wrong-txt { color: #c62828; font-weight: 600; }
.btn-retake {
background: linear-gradient(90deg, #1a73e8, #0d47a1);
color: #fff;
border: none;
border-radius: 10px;
padding: 13px 36px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: opacity .2s;
}
.btn-retake:hover { opacity: .9; }
/* ββ START SCREEN ββ */
#start-screen {
padding: 40px 30px;
text-align: center;
}
.start-icon { font-size: 4rem; margin-bottom: 12px; }
.start-title { font-size: 1.8rem; font-weight: 800; color: #212121; margin-bottom: 8px; }
.start-sub { color: #555; font-size: 1rem; line-height: 1.6; margin-bottom: 28px; }
.start-info {
display: flex;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 32px;
}
.info-chip {
background: #e8f0fe;
color: #1a73e8;
border-radius: 20px;
padding: 6px 16px;
font-size: .88rem;
font-weight: 600;
}
.btn-start {
background: linear-gradient(90deg, #1a73e8, #0d47a1);
color: #fff;
border: none;
border-radius: 12px;
padding: 15px 48px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: opacity .2s, transform .1s;
box-shadow: 0 4px 18px rgba(26,115,232,.4);
}
.btn-start:hover { opacity: .9; transform: scale(1.02); }
/* ββ QUIZ SCREEN ββ */
#quiz-screen { display: none; }
@media (max-width: 500px) {
.quiz-body { padding: 20px 18px 16px; }
.quiz-footer{ padding: 0 18px 22px; }
.topbar { padding: 12px 18px; }
.start-info { gap: 10px; }
}
</style>
</head>
<body>
<div class="card">
<!-- ββββββββββββββ START SCREEN ββββββββββββββ -->
<div id="start-screen">
<div class="start-icon">π§ </div>
<div class="start-title">Autonomic Nervous System</div>
<div class="start-sub">2nd Year MBBS Β· Physiology & Pharmacology<br>Test your knowledge of the ANS with exam-style questions.</div>
<div class="start-info">
<span class="info-chip">π 10 Questions</span>
<span class="info-chip">β± 90 sec / question</span>
<span class="info-chip">β
Instant Feedback</span>
<span class="info-chip">π With Explanations</span>
</div>
<button class="btn-start" onclick="startQuiz()">Start Quiz β</button>
</div>
<!-- ββββββββββββββ QUIZ SCREEN ββββββββββββββ -->
<div id="quiz-screen">
<div class="topbar">
<span class="topbar-title">π§ ANS Quiz β 2nd Year MBBS</span>
<div class="topbar-meta">
<div class="timer-wrap">
<span class="timer-icon">β±</span>
<span id="timer">1:30</span>
</div>
<span class="score-badge" id="score-live">Score: 0</span>
</div>
</div>
<div class="progress-container">
<div class="progress-bar" id="progress-bar" style="width:10%"></div>
</div>
<div class="quiz-body">
<div class="q-meta">
<span class="q-number" id="q-number">Question 1 of 10</span>
<span class="difficulty" id="q-diff"></span>
</div>
<div class="question-text" id="q-text"></div>
<div class="options" id="options"></div>
<div class="explanation" id="explanation"></div>
</div>
<div class="quiz-footer">
<button class="btn-next" id="btn-next" onclick="nextQuestion()">Next β</button>
</div>
</div>
<!-- ββββββββββββββ RESULT SCREEN ββββββββββββββ -->
<div id="result-screen">
<div class="result-emoji" id="res-emoji"></div>
<div class="result-title" id="res-title"></div>
<div class="result-subtitle" id="res-sub"></div>
<div class="score-circle" id="score-circle">
<div class="score-inner">
<span class="score-num" id="res-score"></span>
<span class="score-denom">out of 10</span>
</div>
</div>
<div class="stats-row">
<div class="stat-box">
<div class="stat-val green" id="res-correct">0</div>
<div class="stat-lbl">Correct</div>
</div>
<div class="stat-box">
<div class="stat-val red" id="res-wrong">0</div>
<div class="stat-lbl">Incorrect</div>
</div>
<div class="stat-box">
<div class="stat-val" id="res-time" style="color:#1a73e8">0s</div>
<div class="stat-lbl">Avg Time</div>
</div>
</div>
<div class="grade-badge" id="grade-badge"></div>
<div class="review-list" id="review-list"></div>
<button class="btn-retake" onclick="retakeQuiz()">π Retake Quiz</button>
</div>
</div>
<script>
const QUESTIONS = [
{
q: "The sympathetic division of the ANS is called the 'thoracolumbar' division because its preganglionic neurons originate from:",
opts: [
"Cranial nerves III, VII, IX, X and sacral segments S2βS4",
"Thoracic T1 to lumbar L2βL3 segments of the spinal cord",
"All spinal cord segments from C1 to S5",
"Only the lumbar segments L1βL5"
],
ans: 1,
diff: "easy",
exp: "<strong>Thoracolumbar outflow (T1βL2/L3).</strong> Preganglionic sympathetic neurons are located in the intermediolateral (IML) column of the spinal cord at T1 through L2βL3. The parasympathetic division uses <em>craniosacral</em> outflow (CN III, VII, IX, X and S2βS4). <br><small>β Ganong's Review of Medical Physiology, 26th Ed.</small>"
},
{
q: "All preganglionic autonomic neurons β both sympathetic and parasympathetic β release which neurotransmitter?",
opts: [
"Norepinephrine",
"Dopamine",
"Acetylcholine",
"Serotonin"
],
ans: 2,
diff: "easy",
exp: "<strong>Acetylcholine (ACh).</strong> Whether in the sympathetic or parasympathetic division, ALL preganglionic neurons are cholinergic. Postganglionic neurons may be adrenergic (NE) or cholinergic (ACh). <br><small>β Costanzo Physiology, 7th Ed.</small>"
},
{
q: "Sweat glands are innervated by postganglionic fibers that are sympathetic in origin but release:",
opts: [
"Norepinephrine β adrenergic innervation",
"Acetylcholine β sympathetic cholinergic exception",
"Dopamine β dopaminergic innervation",
"Substance P β peptidergic innervation"
],
ans: 1,
diff: "medium",
exp: "<strong>Sympathetic cholinergic exception.</strong> Sweat glands receive sympathetic postganglionic fibers that are anatomically sympathetic but functionally cholinergic (release ACh, not NE). This is a classic exam exception. <br><small>β Costanzo Physiology, 7th Ed. (Fig. 2.1)</small>"
},
{
q: "The adrenal medulla secretes catecholamines in which ratio?",
opts: [
"80% Norepinephrine : 20% Epinephrine",
"80% Epinephrine : 20% Norepinephrine",
"50% Epinephrine : 50% Norepinephrine",
"100% Dopamine"
],
ans: 1,
diff: "easy",
exp: "<strong>80% Epinephrine : 20% NE.</strong> The enzyme PNMT in adrenal medullary chromaffin cells converts NE β Epinephrine. PNMT activity depends on cortisol supplied by the nearby adrenal cortex. Sympathetic postganglionic neurons (lacking PNMT) release NE only. <br><small>β Costanzo Physiology, 7th Ed.</small>"
},
{
q: "An ectopic pheochromocytoma (located away from the adrenal gland) predominantly secretes:",
opts: [
"Epinephrine, because PNMT is more active outside the adrenal gland",
"Equal epinephrine and norepinephrine",
"Norepinephrine, because it lacks cortisol needed to activate PNMT",
"Acetylcholine"
],
ans: 2,
diff: "hard",
exp: "<strong>Mainly Norepinephrine.</strong> Ectopic pheochromocytomas lack access to adrenal cortex cortisol, so PNMT cannot convert NE to epinephrine. Diagnosis is confirmed by elevated urinary VMA, metanephrines, and normetanephrines. Treatment starts with an Ξ±1-blocker before surgery. <br><small>β Costanzo Physiology, 7th Ed. (Box 2.1)</small>"
},
{
q: "Parasympathetic (vagal) stimulation of the heart produces:",
opts: [
"Increased heart rate and increased contractility",
"Increased heart rate and decreased contractility",
"Decreased heart rate and slight decrease in contractility",
"No change in heart rate; only decreases contractility"
],
ans: 2,
diff: "easy",
exp: "<strong>Decreased HR + slight β contractility.</strong> Vagal (parasympathetic) stimulation markedly slows heart rate (negative chronotropy) and slightly decreases contractility (negative inotropy). Sympathetic stimulation does the opposite β increases both HR and contractility. <br><small>β Guyton & Hall Textbook of Medical Physiology</small>"
},
{
q: "Which of the following is NOT a feature of the 'fight or flight' sympathetic response?",
opts: [
"Increased heart rate and cardiac output",
"Bronchodilation",
"Increased gastrointestinal motility and secretions",
"Redistribution of blood flow toward skeletal muscle"
],
ans: 2,
diff: "medium",
exp: "<strong>GI motility is DECREASED.</strong> During fight-or-flight, blood is redirected away from the GI tract toward skeletal muscle. GI motility and secretions are inhibited, not stimulated. All other options are true sympathetic effects. <br><small>β Costanzo Physiology, 7th Ed.</small>"
},
{
q: "Which is the ONLY effector organ that receives preganglionic axon terminals directly, without an intervening postganglionic neuron?",
opts: [
"Sweat glands",
"Heart (SA node)",
"Adrenal medulla",
"Iris of the eye"
],
ans: 2,
diff: "medium",
exp: "<strong>Adrenal medulla.</strong> Preganglionic sympathetic fibers synapse directly on chromaffin cells of the adrenal medulla β there are no postganglionic neurons. The chromaffin cells themselves are the functional equivalent of postganglionic neurons; they secrete catecholamines into the bloodstream. <br><small>β Ganong's Review of Medical Physiology, 26th Ed.</small>"
},
{
q: "Which type of receptors are found at the autonomic ganglia of BOTH sympathetic AND parasympathetic divisions?",
opts: [
"Muscarinic M2 receptors",
"Nicotinic (NN / ganglionic) receptors",
"Ξ±1-adrenoceptors",
"Ξ²2-adrenoceptors"
],
ans: 1,
diff: "medium",
exp: "<strong>Nicotinic (NN) receptors.</strong> ACh released from preganglionic neurons acts on nicotinic (ganglionic subtype NN) receptors on postganglionic neuron cell bodies in both divisions. Muscarinic receptors are located on target effector organs (not at ganglia). <br><small>β Costanzo Physiology, 7th Ed.</small>"
},
{
q: "Which best describes the fiber length difference between the sympathetic and parasympathetic divisions?",
opts: [
"Sympathetic: long pre-, short post-; Parasympathetic: short pre-, long post-",
"Sympathetic: short pre-, long post-; Parasympathetic: long pre-, short post-",
"Both divisions have equally long preganglionic and postganglionic fibers",
"Sympathetic ganglia are in the organ wall; parasympathetic ganglia are paravertebral"
],
ans: 1,
diff: "medium",
exp: "<strong>Sympathetic = short pre- + long post-; Parasympathetic = long pre- + short post-.</strong> Sympathetic ganglia (paravertebral chain / prevertebral) are close to the spinal cord β short preganglionic fibers, long postganglionic fibers to distant organs. Parasympathetic terminal ganglia are in or near the effector organ β long preganglionic fibers, very short postganglionic fibers. <br><small>β Ganong's Review of Medical Physiology, 26th Ed.</small>"
}
];
let current = 0, score = 0, answered = false;
let timerInterval = null, timeLeft = 90;
let startTime = 0, totalTime = 0;
let results = [];
function startQuiz() {
document.getElementById('start-screen').style.display = 'none';
document.getElementById('quiz-screen').style.display = 'block';
current = 0; score = 0; results = []; totalTime = 0;
loadQuestion();
}
function loadQuestion() {
answered = false;
timeLeft = 90;
startTime = Date.now();
const q = QUESTIONS[current];
document.getElementById('q-number').textContent = `Question ${current+1} of ${QUESTIONS.length}`;
document.getElementById('q-text').textContent = q.q;
document.getElementById('progress-bar').style.width = `${((current+1)/QUESTIONS.length)*100}%`;
document.getElementById('score-live').textContent = `Score: ${score}`;
document.getElementById('btn-next').classList.remove('show');
document.getElementById('explanation').classList.remove('show');
document.getElementById('explanation').innerHTML = '';
// Difficulty badge
const diff = document.getElementById('q-diff');
diff.textContent = q.diff.charAt(0).toUpperCase() + q.diff.slice(1);
diff.className = 'difficulty ' + q.diff;
// Options
const container = document.getElementById('options');
container.innerHTML = '';
const labels = ['A', 'B', 'C', 'D'];
q.opts.forEach((opt, i) => {
const btn = document.createElement('button');
btn.className = 'option-btn';
btn.innerHTML = `
<span class="opt-label">${labels[i]}</span>
<span class="opt-text">${opt}</span>
<span class="opt-icon" id="icon-${i}"></span>`;
btn.onclick = () => selectAnswer(i);
container.appendChild(btn);
});
// Timer
clearInterval(timerInterval);
updateTimerDisplay();
timerInterval = setInterval(() => {
timeLeft--;
updateTimerDisplay();
if (timeLeft <= 0) { clearInterval(timerInterval); autoSubmit(); }
}, 1000);
}
function updateTimerDisplay() {
const mins = Math.floor(timeLeft / 60);
const secs = timeLeft % 60;
const el = document.getElementById('timer');
el.textContent = `${mins}:${secs.toString().padStart(2,'0')}`;
if (timeLeft <= 15) el.classList.add('danger'); else el.classList.remove('danger');
}
function autoSubmit() {
if (answered) return;
answered = true;
const q = QUESTIONS[current];
const btns = document.querySelectorAll('.option-btn');
btns.forEach(b => b.disabled = true);
btns[q.ans].classList.add('missed');
btns[q.ans].querySelector('.opt-icon').textContent = 'β';
showExplanation(false, q.ans);
results.push({ correct: false, qIndex: current, chosen: -1 });
document.getElementById('btn-next').classList.add('show');
}
function selectAnswer(idx) {
if (answered) return;
answered = true;
clearInterval(timerInterval);
const elapsed = Math.round((Date.now() - startTime) / 1000);
totalTime += elapsed;
const q = QUESTIONS[current];
const btns = document.querySelectorAll('.option-btn');
btns.forEach(b => b.disabled = true);
const isCorrect = idx === q.ans;
if (isCorrect) {
score++;
btns[idx].classList.add('correct');
btns[idx].querySelector('.opt-icon').textContent = 'β';
results.push({ correct: true, qIndex: current, chosen: idx });
} else {
btns[idx].classList.add('wrong');
btns[idx].querySelector('.opt-icon').textContent = 'β';
btns[q.ans].classList.add('missed');
btns[q.ans].querySelector('.opt-icon').textContent = 'β';
results.push({ correct: false, qIndex: current, chosen: idx });
}
showExplanation(isCorrect, q.ans);
document.getElementById('score-live').textContent = `Score: ${score}`;
document.getElementById('btn-next').classList.add('show');
}
function showExplanation(correct, correctIdx) {
const q = QUESTIONS[current];
const exp = document.getElementById('explanation');
const labels = ['A','B','C','D'];
exp.innerHTML = `
<strong>${correct ? 'β
Correct!' : 'β Incorrect'}</strong>
${correct ? '' : ` | Correct answer: <strong>${labels[correctIdx]}) ${q.opts[correctIdx]}</strong><br><br>`}
${correct ? '<br>' : ''}
${q.exp}`;
exp.classList.add('show');
}
function nextQuestion() {
current++;
if (current < QUESTIONS.length) loadQuestion();
else showResult();
}
function showResult() {
document.getElementById('quiz-screen').style.display = 'none';
document.getElementById('result-screen').style.display = 'block';
const pct = Math.round((score / QUESTIONS.length) * 100);
const deg = Math.round((score / QUESTIONS.length) * 360);
const wrong = QUESTIONS.length - score;
const avgT = results.length ? Math.round(totalTime / results.length) : 0;
// Emoji & title
let emoji, title, sub, gradeClass, gradeText;
if (pct >= 90) {
emoji='π'; title='Outstanding!'; sub='Excellent command of the ANS. Keep it up!';
gradeClass='grade-A'; gradeText='Grade A β Distinction';
} else if (pct >= 70) {
emoji='π'; title='Well Done!'; sub='Good understanding. Review the explanations to perfect your knowledge.';
gradeClass='grade-B'; gradeText='Grade B β Pass';
} else if (pct >= 50) {
emoji='π'; title='Good Effort!'; sub='A few gaps remain. Re-read the ANS chapter and try again.';
gradeClass='grade-C'; gradeText='Grade C β Borderline';
} else {
emoji='πͺ'; title='Keep Practicing!'; sub='Review the Costanzo/Ganong ANS chapter thoroughly.';
gradeClass='grade-D'; gradeText='Grade D β Needs Improvement';
}
document.getElementById('res-emoji').textContent = emoji;
document.getElementById('res-title').textContent = title;
document.getElementById('res-sub').textContent = sub;
document.getElementById('res-score').textContent = score;
document.getElementById('res-correct').textContent = score;
document.getElementById('res-wrong').textContent = wrong;
document.getElementById('res-time').textContent = avgT + 's';
const circle = document.getElementById('score-circle');
circle.style.setProperty('--deg', deg + 'deg');
const badge = document.getElementById('grade-badge');
badge.textContent = gradeText;
badge.className = 'grade-badge ' + gradeClass;
// Review list
const reviewList = document.getElementById('review-list');
reviewList.innerHTML = '<div style="font-weight:700;margin-bottom:10px;font-size:.95rem;">π Question Review</div>';
results.forEach((r, i) => {
const q = QUESTIONS[r.qIndex];
const labels = ['A','B','C','D'];
const div = document.createElement('div');
div.className = 'review-item ' + (r.correct ? 'correct-r' : 'wrong-r');
const chosenText = r.chosen >= 0
? `Your answer: <span class="${r.correct ? 'r-correct-txt' : 'r-wrong-txt'}">${labels[r.chosen]}) ${q.opts[r.chosen]}</span>`
: `<span class="r-wrong-txt">β° Time's up β not answered</span>`;
div.innerHTML = `
<div class="r-q">${i+1}. ${q.q}</div>
<div class="r-ans">
${chosenText}
${!r.correct ? `<br>Correct: <span class="r-correct-txt">${labels[q.ans]}) ${q.opts[q.ans]}</span>` : ''}
</div>`;
reviewList.appendChild(div);
});
}
function retakeQuiz() {
document.getElementById('result-screen').style.display = 'none';
document.getElementById('start-screen').style.display = 'block';
}
</script>
</body>
</html>
cd /home/daytona/workspace/ans-quiz && wc -l index.html && echo "File size: $(duβ¦
index
HTML File Β· HTML
| Feature | Details |
|---|---|
| π Questions | 10 MCQs β one at a time |
| β± Timer | 90 seconds per question (turns red at 15s) |
| β Instant feedback | Green = correct, Red = wrong, shows missed answer |
| π Explanations | Detailed explanation with textbook source after each answer |
| π· Difficulty | Each question tagged Easy / Medium / Hard |
| π Score tracker | Live score in the top bar |
| π Results screen | Score circle, correct/wrong count, avg time, grade badge |
| π Question review | Full summary of all answers at the end |
| π Retake button | Restart the quiz anytime |