Give 15 mcqs on Anatomy from whole BDC book The pattern should be of Mcqs but I should pick one option and then it should show answers and like it's online exam and below that explaintaion should be there
Reading File
Finding Sources
Running Command
ls -la /home/daytona/workspace/
Writing File
~/anatomy-mcq/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>BDC Anatomy – Online MCQ Exam</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
min-height: 100vh;
color: #f1f5f9;
padding: 20px;
}
.container {
max-width: 820px;
margin: 0 auto;
}
/* ─── Header ─── */
.header {
text-align: center;
margin-bottom: 28px;
}
.header .badge {
display: inline-block;
background: linear-gradient(90deg, #6366f1, #8b5cf6);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 4px 14px;
border-radius: 50px;
margin-bottom: 10px;
}
.header h1 {
font-size: 28px;
font-weight: 700;
background: linear-gradient(90deg, #a5b4fc, #c4b5fd);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 6px;
}
.header p {
color: #94a3b8;
font-size: 14px;
}
/* ─── Progress bar ─── */
.progress-wrap {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.progress-bar-outer {
flex: 1;
height: 8px;
background: #1e293b;
border-radius: 50px;
overflow: hidden;
border: 1px solid #334155;
}
.progress-bar-inner {
height: 100%;
background: linear-gradient(90deg, #6366f1, #8b5cf6);
border-radius: 50px;
transition: width 0.4s ease;
}
.progress-label {
font-size: 13px;
color: #94a3b8;
white-space: nowrap;
}
/* ─── Question Card ─── */
.question-card {
background: #1e293b;
border: 1px solid #334155;
border-radius: 18px;
padding: 28px 30px;
margin-bottom: 20px;
box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.q-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.q-number {
font-size: 12px;
font-weight: 700;
color: #6366f1;
text-transform: uppercase;
letter-spacing: 1px;
}
.q-topic {
font-size: 11px;
color: #64748b;
background: #0f172a;
padding: 3px 10px;
border-radius: 50px;
border: 1px solid #334155;
}
.q-text {
font-size: 16px;
font-weight: 500;
line-height: 1.6;
color: #e2e8f0;
margin-bottom: 20px;
}
/* ─── Options ─── */
.options {
display: flex;
flex-direction: column;
gap: 10px;
}
.option {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 18px;
border-radius: 12px;
border: 2px solid #334155;
background: #0f172a;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
}
.option:hover:not(.locked) {
border-color: #6366f1;
background: #1a1f35;
transform: translateX(4px);
}
.option .opt-key {
width: 32px;
height: 32px;
border-radius: 8px;
border: 2px solid #334155;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
color: #94a3b8;
flex-shrink: 0;
transition: all 0.2s ease;
}
.option .opt-text {
font-size: 14.5px;
color: #cbd5e1;
line-height: 1.4;
}
/* States */
.option.selected {
border-color: #6366f1;
background: rgba(99,102,241,0.12);
}
.option.selected .opt-key {
background: #6366f1;
border-color: #6366f1;
color: #fff;
}
.option.correct {
border-color: #22c55e !important;
background: rgba(34,197,94,0.1) !important;
}
.option.correct .opt-key {
background: #22c55e !important;
border-color: #22c55e !important;
color: #fff !important;
}
.option.wrong {
border-color: #ef4444 !important;
background: rgba(239,68,68,0.1) !important;
}
.option.wrong .opt-key {
background: #ef4444 !important;
border-color: #ef4444 !important;
color: #fff !important;
}
.option.locked {
cursor: default;
}
/* ─── Explanation ─── */
.explanation {
display: none;
margin-top: 18px;
padding: 18px 20px;
background: #0f172a;
border-radius: 12px;
border-left: 4px solid #6366f1;
}
.explanation.show { display: block; animation: fadeIn 0.4s ease; }
.explanation .exp-title {
font-size: 12px;
font-weight: 700;
color: #6366f1;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}
.explanation p {
font-size: 14px;
line-height: 1.7;
color: #94a3b8;
}
.explanation .correct-label {
display: inline-block;
background: rgba(34,197,94,0.15);
color: #4ade80;
border: 1px solid #22c55e44;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
padding: 2px 10px;
margin-bottom: 8px;
}
/* ─── Nav Buttons ─── */
.nav-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 24px;
}
.btn {
padding: 11px 28px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
border: none;
transition: all 0.2s ease;
}
.btn-primary {
background: linear-gradient(90deg, #6366f1, #8b5cf6);
color: #fff;
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-outline {
background: transparent;
color: #94a3b8;
border: 2px solid #334155;
}
.btn-outline:hover { border-color: #6366f1; color: #a5b4fc; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
/* ─── Question Navigator ─── */
.q-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
}
.q-dot {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: 2px solid #334155;
background: #0f172a;
color: #64748b;
transition: all 0.2s ease;
}
.q-dot:hover { border-color: #6366f1; color: #a5b4fc; }
.q-dot.active { border-color: #6366f1; background: #6366f1; color: #fff; }
.q-dot.answered-correct { border-color: #22c55e; background: rgba(34,197,94,0.15); color: #4ade80; }
.q-dot.answered-wrong { border-color: #ef4444; background: rgba(239,68,68,0.15); color: #f87171; }
.q-dot.answered-unattempted { border-color: #f59e0b; background: rgba(245,158,11,0.15); color: #fbbf24; }
/* ─── Result Screen ─── */
#result-screen { display: none; }
.result-card {
background: #1e293b;
border: 1px solid #334155;
border-radius: 20px;
padding: 40px;
text-align: center;
margin-bottom: 24px;
}
.result-card .score-circle {
width: 140px;
height: 140px;
border-radius: 50%;
margin: 0 auto 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 36px;
font-weight: 800;
position: relative;
}
.result-card h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
}
.result-card .subtitle { color: #64748b; font-size: 15px; margin-bottom: 28px; }
.stats-row {
display: flex;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
margin-top: 8px;
}
.stat-box {
background: #0f172a;
border: 1px solid #334155;
border-radius: 12px;
padding: 14px 22px;
text-align: center;
min-width: 90px;
}
.stat-box .stat-val { font-size: 24px; font-weight: 700; }
.stat-box .stat-lbl { font-size: 11px; color: #64748b; margin-top: 2px; }
/* ─── Animations ─── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.result-grid {
display: flex;
flex-direction: column;
gap: 12px;
text-align: left;
}
.result-item {
background: #0f172a;
border: 1px solid #334155;
border-radius: 12px;
padding: 16px 18px;
}
.result-item .ri-q { font-size: 13.5px; color: #cbd5e1; margin-bottom: 6px; font-weight: 500; }
.result-item .ri-row { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; margin-top: 4px; }
.ri-your { color: #f87171; }
.ri-correct { color: #4ade80; }
.ri-correct-only { color: #4ade80; }
.restart-btn {
background: linear-gradient(90deg, #6366f1, #8b5cf6);
color: #fff;
padding: 13px 36px;
border-radius: 12px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
border: none;
transition: all 0.2s;
margin-top: 18px;
}
.restart-btn:hover { opacity: 0.88; }
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<div class="header">
<div class="badge">BDC Anatomy</div>
<h1>Anatomy MCQ Exam</h1>
<p>15 Questions · Full Body Coverage · Tap an option to answer</p>
</div>
<!-- Exam Screen -->
<div id="exam-screen">
<!-- Q Navigator -->
<div class="q-nav" id="q-nav"></div>
<!-- Progress -->
<div class="progress-wrap">
<div class="progress-bar-outer">
<div class="progress-bar-inner" id="progress-bar" style="width:0%"></div>
</div>
<span class="progress-label" id="progress-label">0 / 15</span>
</div>
<!-- Question -->
<div class="question-card" id="q-card">
<div class="q-meta">
<span class="q-number" id="q-number">Question 1</span>
<span class="q-topic" id="q-topic"></span>
</div>
<div class="q-text" id="q-text"></div>
<div class="options" id="options"></div>
<div class="explanation" id="explanation">
<div class="exp-title">📖 Explanation</div>
<div class="correct-label" id="correct-label"></div>
<p id="exp-text"></p>
</div>
</div>
<!-- Nav Row -->
<div class="nav-row">
<button class="btn btn-outline" id="btn-prev" onclick="navigate(-1)">← Previous</button>
<button class="btn btn-primary" id="btn-next" onclick="navigate(1)">Next →</button>
<button class="btn btn-primary" id="btn-submit" onclick="submitExam()" style="display:none">Submit Exam</button>
</div>
</div>
<!-- Result Screen -->
<div id="result-screen">
<div class="result-card" id="result-card"></div>
<div class="result-grid" id="result-grid"></div>
<div style="text-align:center">
<button class="restart-btn" onclick="restartExam()">🔄 Restart Exam</button>
</div>
</div>
</div>
<script>
const questions = [
{
topic: "Upper Limb",
q: "Which muscle is responsible for the 'anatomical snuffbox'? Its absence leads to wrist drop when the radial nerve is damaged at the spiral groove of humerus — but which specific muscle is tested for C7 nerve root integrity?",
opts: ["Brachioradialis", "Extensor carpi radialis longus", "Triceps brachii", "Extensor digitorum"],
ans: 2,
exp: "Triceps brachii (elbow extension) is the key muscle tested for C7 nerve root integrity. Brachioradialis is C5–C6. Radial nerve injury at the spiral groove of the humerus spares brachioradialis and brachialis (both branch proximal) but causes wrist drop by paralysing extensor carpi radialis brevis and extensor digitorum. Triceps reflex (C7) is used clinically to test C7 root."
},
{
topic: "Upper Limb",
q: "A patient cannot abduct the little finger or hold a piece of paper between the fingers (Froment's sign positive). Which nerve is most likely injured?",
opts: ["Median nerve", "Radial nerve", "Ulnar nerve", "Musculocutaneous nerve"],
ans: 2,
exp: "The ulnar nerve supplies all interossei (abduction/adduction of fingers) and the hypothenar muscles (including abductor digiti minimi). Froment's sign (compensatory thumb flexion using flexor pollicis longus when adductor pollicis is weak) is pathognomonic of ulnar nerve palsy. Median nerve injury causes 'ape hand' and loss of thenar muscles. Radial nerve causes wrist drop."
},
{
topic: "Lower Limb",
q: "In a posterior dislocation of the hip, which nerve is most commonly injured?",
opts: ["Femoral nerve", "Obturator nerve", "Sciatic nerve", "Superior gluteal nerve"],
ans: 2,
exp: "The sciatic nerve exits the greater sciatic foramen below piriformis and lies directly posterior to the hip joint. In posterior dislocation, the femoral head is driven posteriorly, stretching or directly injuring the sciatic nerve (or specifically its common peroneal division). This causes foot drop (extensor hallucis longus, tibialis anterior) and loss of sensation over the dorsum of the foot."
},
{
topic: "Lower Limb",
q: "Which structure passes through the adductor hiatus to enter the popliteal fossa?",
opts: ["Great saphenous vein", "Femoral artery becoming popliteal artery", "Obturator artery", "Deep femoral artery"],
ans: 1,
exp: "The femoral artery passes through the adductor hiatus (a gap in adductor magnus) to enter the popliteal fossa, where it becomes the popliteal artery. The femoral vein also passes through. The great saphenous vein drains into the femoral vein at the saphenous opening (not the adductor hiatus). The deep femoral artery (profunda femoris) terminates in the thigh as perforating arteries."
},
{
topic: "Thorax",
q: "The right coronary artery most commonly supplies the SA node. However, the AV node is typically supplied by the dominant artery. In 70% of people, which artery supplies the AV node?",
opts: ["Left anterior descending", "Left circumflex", "Right coronary artery", "Diagonal branch"],
ans: 2,
exp: "In approximately 70% of individuals (right dominant circulation), the posterior interventricular branch arises from the right coronary artery (RCA) and gives off the AV nodal artery. In left-dominant individuals (~15%), the left circumflex artery supplies the AV node. This is why inferior MI (RCA territory) can cause complete heart block — loss of AV nodal blood supply."
},
{
topic: "Thorax",
q: "A stab wound at the left 5th intercostal space, midclavicular line, most likely injures which structure?",
opts: ["Aortic arch", "Right ventricle", "Left ventricle", "Pulmonary trunk"],
ans: 2,
exp: "The left ventricle forms the left border and apex of the heart. The apex beat is normally felt at the 5th intercostal space, midclavicular line. A stab at this location would most directly injure the left ventricle. The right ventricle is more anterior (behind the sternum). The aortic arch is in the superior mediastinum at a higher level. Pericardial tamponade can result from any ventricular injury."
},
{
topic: "Abdomen",
q: "Which structure forms the floor of Hesselbach's (inguinal) triangle?",
opts: ["Inguinal ligament", "Transversalis fascia", "Conjoint tendon", "Pectineal ligament"],
ans: 1,
exp: "Hesselbach's triangle is bounded: medially by the lateral border of rectus abdominis, laterally by the inferior epigastric vessels, and inferiorly by the inguinal ligament. The floor is formed by the transversalis fascia. Direct inguinal hernias pass through the transversalis fascia within this triangle (medial to inferior epigastric vessels), distinguishing them from indirect hernias (which exit through the deep inguinal ring, lateral to those vessels)."
},
{
topic: "Abdomen",
q: "The portal triad in the liver contains the portal vein radicle, hepatic artery radicle, and bile duct. The central vein drains into which structure?",
opts: ["Portal vein", "Inferior vena cava via hepatic veins", "Superior mesenteric vein", "Splenic vein"],
ans: 1,
exp: "The central veins (terminal hepatic venules) at the centre of each hepatic lobule collect blood from the sinusoids and drain sequentially into sublobular veins → hepatic veins (right, middle, left) → inferior vena cava. This is the hepatic venous drainage. The portal triad sits at the periphery of the classical lobule and carries incoming blood (portal vein + hepatic artery) and outgoing bile (bile ductule)."
},
{
topic: "Head & Neck",
q: "Which cranial nerve is at greatest risk during surgery for parotid gland tumours?",
opts: ["Trigeminal nerve (V)", "Glossopharyngeal nerve (IX)", "Vagus nerve (X)", "Facial nerve (VII)"],
ans: 3,
exp: "The facial nerve (CN VII) exits the stylomastoid foramen and fans out within the parotid gland into its five terminal branches: temporal, zygomatic, buccal, marginal mandibular, and cervical. Because the nerve courses through the substance of the parotid, it is at greatest risk during parotidectomy. Injury causes ipsilateral facial palsy (LMN type) — loss of all voluntary facial movements including forehead wrinkling."
},
{
topic: "Head & Neck",
q: "A patient is unable to shrug the shoulder and has weakness turning the head to the opposite side. Which nerve is injured?",
opts: ["Cervical plexus (C3–C4)", "Spinal accessory nerve (CN XI)", "Phrenic nerve (C3–C5)", "Long thoracic nerve"],
ans: 1,
exp: "The spinal accessory nerve (CN XI) supplies trapezius (shoulder shrug + scapular stability) and sternocleidomastoid (head rotation to opposite side). It is vulnerable in posterior triangle neck dissections and lymph node biopsies. Injury causes shoulder drop, winging of the scapula (lower trapezius), and inability to elevate the arm above 90°. The cervical plexus contribution to trapezius is mainly proprioceptive."
},
{
topic: "Neuroanatomy",
q: "A patient has loss of pain and temperature from the contralateral side of the body but ipsilateral loss of vibration and proprioception below a spinal cord lesion. This pattern is consistent with:",
opts: ["Complete cord transection", "Posterior cord syndrome", "Brown-Séquard syndrome", "Central cord syndrome"],
ans: 2,
exp: "Brown-Séquard syndrome (hemisection of the spinal cord) classically produces: ipsilateral loss of vibration/proprioception/discriminative touch (dorsal columns do not cross until the medulla) + contralateral loss of pain and temperature (spinothalamic tract crosses within 1–2 segments of entry). There is also ipsilateral LMN signs at the level and UMN signs below. Common causes: penetrating trauma, MS, spinal AVM."
},
{
topic: "Embryology",
q: "Meckel's diverticulum is a remnant of which embryological structure?",
opts: ["Urachus", "Vitelline (omphalomesenteric) duct", "Allantois", "Branchial cleft"],
ans: 1,
exp: "Meckel's diverticulum is a true diverticulum (all bowel wall layers) arising from the anti-mesenteric border of the ileum ~60 cm from the ileocaecal valve. It is the remnant of the vitelline (omphalomesenteric) duct that connects the midgut to the yolk sac. Rule of 2's: 2% of population, 2 inches long, within 2 feet of ileocaecal valve, 2:1 male predominance, symptomatic before age 2 in children. It may contain ectopic gastric or pancreatic tissue."
},
{
topic: "Upper Limb",
q: "Which rotator cuff tendon is MOST commonly ruptured?",
opts: ["Subscapularis", "Infraspinatus", "Supraspinatus", "Teres minor"],
ans: 2,
exp: "Supraspinatus is by far the most commonly torn rotator cuff tendon. It passes beneath the coracoacromial arch and is compressed between the acromion and greater tubercle of the humerus during abduction — a region called the 'critical zone' (1 cm from insertion), which has poor vascularity. Tears cause inability to initiate abduction (the 'painful arc' between 60–120°). The remaining arc may be completed by deltoid."
},
{
topic: "Pelvis",
q: "The ureter is at risk of being 'ligated in error' during which gynaecological surgery, particularly due to its relationship with the uterine artery?",
opts: ["Oophorectomy", "Hysterectomy", "Salpingectomy", "Colporrhaphy"],
ans: 1,
exp: "During hysterectomy, the ureter is most at risk at the point where the uterine artery crosses over it — 'water under the bridge' — approximately 1.5 cm lateral to the cervix, near the uterosacral ligament. The ureter runs beneath the uterine artery as it crosses from the lateral pelvic wall. Blind clamping of the uterine artery can inadvertently ligate the ureter, causing hydronephrosis or urinoma post-op."
},
{
topic: "Thorax",
q: "The thoracic duct drains lymph from most of the body and terminates at the junction of which two vessels?",
opts: ["Right subclavian + right internal jugular veins", "Left subclavian + left internal jugular veins", "Superior vena cava + azygos vein", "Brachiocephalic vein + left subclavian vein"],
ans: 1,
exp: "The thoracic duct (the largest lymphatic vessel) begins at the cisterna chyli (L1–L2), ascends through the posterior mediastinum, arches over the left subclavian artery, and drains into the venous system at the left venous angle — the junction of the left subclavian vein and left internal jugular vein (forming the left brachiocephalic vein). It drains the entire body below the diaphragm + left thorax + left upper limb + left head and neck. The right lymphatic duct drains the right side above the diaphragm."
}
];
let current = 0;
let userAnswers = Array(questions.length).fill(null);
let submitted = false;
function init() {
buildNav();
renderQuestion();
}
function buildNav() {
const nav = document.getElementById('q-nav');
nav.innerHTML = '';
questions.forEach((_, i) => {
const dot = document.createElement('div');
dot.className = 'q-dot' + (i === current ? ' active' : '');
dot.id = `dot-${i}`;
dot.textContent = i + 1;
dot.onclick = () => goTo(i);
nav.appendChild(dot);
});
}
function goTo(i) {
current = i;
buildNav();
renderQuestion();
}
function renderQuestion() {
const q = questions[current];
document.getElementById('q-number').textContent = `Question ${current + 1} of ${questions.length}`;
document.getElementById('q-topic').textContent = q.topic;
document.getElementById('q-text').textContent = q.q;
const opts = document.getElementById('options');
opts.innerHTML = '';
const keys = ['A', 'B', 'C', 'D'];
q.opts.forEach((opt, i) => {
const div = document.createElement('div');
div.className = 'option' + (userAnswers[current] !== null ? ' locked' : '');
div.id = `opt-${i}`;
div.innerHTML = `<div class="opt-key">${keys[i]}</div><div class="opt-text">${opt}</div>`;
// Apply previous answer styling
if (userAnswers[current] !== null) {
if (i === q.ans) div.classList.add('correct');
else if (i === userAnswers[current]) div.classList.add('wrong');
}
div.onclick = () => selectOption(i);
opts.appendChild(div);
});
// Explanation
const expDiv = document.getElementById('explanation');
if (userAnswers[current] !== null) {
document.getElementById('correct-label').textContent = `✓ Correct Answer: ${keys[q.ans]}. ${q.opts[q.ans]}`;
document.getElementById('exp-text').textContent = q.exp;
expDiv.classList.add('show');
} else {
expDiv.classList.remove('show');
}
// Progress
const answered = userAnswers.filter(a => a !== null).length;
document.getElementById('progress-bar').style.width = (answered / questions.length * 100) + '%';
document.getElementById('progress-label').textContent = `${answered} / ${questions.length} answered`;
// Buttons
document.getElementById('btn-prev').disabled = current === 0;
const isLast = current === questions.length - 1;
document.getElementById('btn-next').style.display = isLast ? 'none' : 'inline-block';
document.getElementById('btn-submit').style.display = isLast ? 'inline-block' : 'none';
// Update dot
updateDot(current);
}
function selectOption(i) {
if (userAnswers[current] !== null) return; // already answered
userAnswers[current] = i;
renderQuestion();
}
function updateDot(idx) {
const dot = document.getElementById(`dot-${idx}`);
if (!dot) return;
dot.className = 'q-dot';
if (idx === current) dot.classList.add('active');
if (userAnswers[idx] !== null) {
if (userAnswers[idx] === questions[idx].ans) dot.classList.add('answered-correct');
else dot.classList.add('answered-wrong');
}
}
function navigate(dir) {
const next = current + dir;
if (next < 0 || next >= questions.length) return;
current = next;
buildNav();
renderQuestion();
}
function submitExam() {
const unanswered = userAnswers.filter(a => a === null).length;
if (unanswered > 0) {
if (!confirm(`You have ${unanswered} unanswered question(s). Submit anyway?`)) return;
}
showResult();
}
function showResult() {
document.getElementById('exam-screen').style.display = 'none';
document.getElementById('result-screen').style.display = 'block';
let correct = 0, wrong = 0, skipped = 0;
questions.forEach((q, i) => {
if (userAnswers[i] === null) skipped++;
else if (userAnswers[i] === q.ans) correct++;
else wrong++;
});
const pct = Math.round((correct / questions.length) * 100);
let grade, color;
if (pct >= 80) { grade = 'Excellent!'; color = '#22c55e'; }
else if (pct >= 60) { grade = 'Good Job!'; color = '#f59e0b'; }
else { grade = 'Keep Practicing!'; color = '#ef4444'; }
const rc = document.getElementById('result-card');
rc.innerHTML = `
<div class="score-circle" style="background: conic-gradient(${color} ${pct * 3.6}deg, #1e293b 0deg);">
<span>${pct}%</span>
</div>
<h2>${grade}</h2>
<p class="subtitle">You scored ${correct} out of ${questions.length}</p>
<div class="stats-row">
<div class="stat-box"><div class="stat-val" style="color:#4ade80">${correct}</div><div class="stat-lbl">Correct</div></div>
<div class="stat-box"><div class="stat-val" style="color:#f87171">${wrong}</div><div class="stat-lbl">Wrong</div></div>
<div class="stat-box"><div class="stat-val" style="color:#fbbf24">${skipped}</div><div class="stat-lbl">Skipped</div></div>
</div>`;
const rg = document.getElementById('result-grid');
rg.innerHTML = '<h3 style="color:#94a3b8;font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;">Question Review</h3>';
const keys = ['A','B','C','D'];
questions.forEach((q, i) => {
const ua = userAnswers[i];
const isCorrect = ua === q.ans;
const isSkipped = ua === null;
let status = isSkipped ? '⬜ Skipped' : (isCorrect ? '✅ Correct' : '❌ Wrong');
let yourAns = isSkipped ? '—' : `${keys[ua]}. ${q.opts[ua]}`;
let ri = document.createElement('div');
ri.className = 'result-item';
ri.innerHTML = `
<div class="ri-q">${i+1}. ${q.q.substring(0,100)}${q.q.length>100?'…':''}</div>
<div class="ri-row">
<span>${status}</span>
${!isCorrect ? `<span class="ri-your">Your: ${yourAns}</span>` : ''}
<span class="ri-correct-only">Answer: ${keys[q.ans]}. ${q.opts[q.ans]}</span>
</div>`;
rg.appendChild(ri);
});
}
function restartExam() {
userAnswers = Array(questions.length).fill(null);
current = 0;
submitted = false;
document.getElementById('result-screen').style.display = 'none';
document.getElementById('exam-screen').style.display = 'block';
init();
}
init();
</script>
</body>
</html>
Your interactive anatomy MCQ exam is ready!
index
HTML File · HTML
Here's what's included:
15 Questions covering all BDC regions:
| # | Topic | Clinical Focus |
|---|---|---|
| 1–2 | Upper Limb | Radial/Ulnar nerve injury, Froment's sign |
| 3–4 | Lower Limb | Hip dislocation, adductor hiatus |
| 5–6 | Thorax | Coronary artery dominance, cardiac stab wounds |
| 7–8 | Abdomen | Inguinal triangle, portal/hepatic venous drainage |
| 9–10 | Head & Neck | Facial nerve in parotid, spinal accessory nerve |
| 11 | Neuroanatomy | Brown-Séquard syndrome |
| 12 | Embryology | Meckel's diverticulum |
| 13 | Upper Limb | Supraspinatus tear |
| 14 | Pelvis | Ureter & uterine artery |
| 15 | Thorax | Thoracic duct termination |
Exam Features:
- Click any option → instantly locks your answer and reveals ✅/❌ color coding
- Detailed explanation appears below each question after you answer
- Question navigator dots (green = correct, red = wrong) at the top
- Submit → full score card with %, correct/wrong/skipped breakdown
- Full question review panel at the end
- Restart button to retake the exam
Nice
Glad you liked it! 😊
If you want more, I can:
- Add more questions (30, 50, or topic-specific sets)
- Filter by region — e.g. only Upper Limb or Head & Neck
- Add a timer for exam simulation
- Include images/diagrams in questions
- Adjust difficulty — USMLE-style clinicals or straightforward fact-based
Just say the word!
Can u do the same for medium level 15 mcqs on Antomy
Writing File
~/anatomy-mcq-medium/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>BDC Anatomy – Medium Level MCQ Exam</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
min-height: 100vh;
color: #f1f5f9;
padding: 20px;
}
.container { max-width: 820px; margin: 0 auto; }
.header { text-align: center; margin-bottom: 28px; }
.header .badge {
display: inline-block;
background: linear-gradient(90deg, #0ea5e9, #06b6d4);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 4px 14px;
border-radius: 50px;
margin-bottom: 10px;
}
.header h1 {
font-size: 28px;
font-weight: 700;
background: linear-gradient(90deg, #7dd3fc, #67e8f9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 6px;
}
.header p { color: #94a3b8; font-size: 14px; }
.progress-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.progress-bar-outer {
flex: 1; height: 8px; background: #1e293b;
border-radius: 50px; overflow: hidden; border: 1px solid #334155;
}
.progress-bar-inner {
height: 100%;
background: linear-gradient(90deg, #0ea5e9, #06b6d4);
border-radius: 50px; transition: width 0.4s ease;
}
.progress-label { font-size: 13px; color: #94a3b8; white-space: nowrap; }
.question-card {
background: #1e293b; border: 1px solid #334155;
border-radius: 18px; padding: 28px 30px; margin-bottom: 20px;
box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.q-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.q-number { font-size: 12px; font-weight: 700; color: #0ea5e9; text-transform: uppercase; letter-spacing: 1px; }
.q-topic {
font-size: 11px; color: #64748b; background: #0f172a;
padding: 3px 10px; border-radius: 50px; border: 1px solid #334155;
}
.difficulty-badge {
display: inline-block;
background: rgba(251,191,36,0.15);
color: #fbbf24;
border: 1px solid #f59e0b44;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
padding: 2px 10px;
margin-bottom: 12px;
letter-spacing: 0.5px;
}
.q-text { font-size: 16px; font-weight: 500; line-height: 1.6; color: #e2e8f0; margin-bottom: 20px; }
.options { display: flex; flex-direction: column; gap: 10px; }
.option {
display: flex; align-items: center; gap: 14px;
padding: 13px 18px; border-radius: 12px;
border: 2px solid #334155; background: #0f172a;
cursor: pointer; transition: all 0.2s ease; user-select: none;
}
.option:hover:not(.locked) { border-color: #0ea5e9; background: #0f1f2e; transform: translateX(4px); }
.option .opt-key {
width: 32px; height: 32px; border-radius: 8px;
border: 2px solid #334155;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; color: #94a3b8;
flex-shrink: 0; transition: all 0.2s ease;
}
.option .opt-text { font-size: 14.5px; color: #cbd5e1; line-height: 1.4; }
.option.selected { border-color: #0ea5e9; background: rgba(14,165,233,0.1); }
.option.selected .opt-key { background: #0ea5e9; border-color: #0ea5e9; color: #fff; }
.option.correct { border-color: #22c55e !important; background: rgba(34,197,94,0.1) !important; }
.option.correct .opt-key { background: #22c55e !important; border-color: #22c55e !important; color: #fff !important; }
.option.wrong { border-color: #ef4444 !important; background: rgba(239,68,68,0.1) !important; }
.option.wrong .opt-key { background: #ef4444 !important; border-color: #ef4444 !important; color: #fff !important; }
.option.locked { cursor: default; }
.explanation {
display: none; margin-top: 18px; padding: 18px 20px;
background: #0f172a; border-radius: 12px; border-left: 4px solid #0ea5e9;
}
.explanation.show { display: block; animation: fadeIn 0.4s ease; }
.explanation .exp-title { font-size: 12px; font-weight: 700; color: #0ea5e9; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.explanation p { font-size: 14px; line-height: 1.7; color: #94a3b8; }
.explanation .correct-label {
display: inline-block; background: rgba(34,197,94,0.15);
color: #4ade80; border: 1px solid #22c55e44;
border-radius: 6px; font-size: 12px; font-weight: 600;
padding: 2px 10px; margin-bottom: 8px;
}
.nav-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }
.btn { padding: 11px 28px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s ease; }
.btn-primary { background: linear-gradient(90deg, #0ea5e9, #06b6d4); color: #fff; }
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-outline { background: transparent; color: #94a3b8; border: 2px solid #334155; }
.btn-outline:hover { border-color: #0ea5e9; color: #7dd3fc; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.q-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.q-dot {
width: 36px; height: 36px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 600; cursor: pointer;
border: 2px solid #334155; background: #0f172a;
color: #64748b; transition: all 0.2s ease;
}
.q-dot:hover { border-color: #0ea5e9; color: #7dd3fc; }
.q-dot.active { border-color: #0ea5e9; background: #0ea5e9; color: #fff; }
.q-dot.answered-correct { border-color: #22c55e; background: rgba(34,197,94,0.15); color: #4ade80; }
.q-dot.answered-wrong { border-color: #ef4444; background: rgba(239,68,68,0.15); color: #f87171; }
#result-screen { display: none; }
.result-card {
background: #1e293b; border: 1px solid #334155;
border-radius: 20px; padding: 40px; text-align: center; margin-bottom: 24px;
}
.result-card .score-circle {
width: 140px; height: 140px; border-radius: 50%;
margin: 0 auto 20px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
font-size: 36px; font-weight: 800;
}
.result-card h2 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.result-card .subtitle { color: #64748b; font-size: 15px; margin-bottom: 28px; }
.stats-row { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.stat-box {
background: #0f172a; border: 1px solid #334155;
border-radius: 12px; padding: 14px 22px; text-align: center; min-width: 90px;
}
.stat-box .stat-val { font-size: 24px; font-weight: 700; }
.stat-box .stat-lbl { font-size: 11px; color: #64748b; margin-top: 2px; }
.result-grid { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.result-item { background: #0f172a; border: 1px solid #334155; border-radius: 12px; padding: 16px 18px; }
.result-item .ri-q { font-size: 13.5px; color: #cbd5e1; margin-bottom: 6px; font-weight: 500; }
.result-item .ri-row { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; margin-top: 4px; }
.ri-your { color: #f87171; }
.ri-correct-only { color: #4ade80; }
.restart-btn {
background: linear-gradient(90deg, #0ea5e9, #06b6d4);
color: #fff; padding: 13px 36px; border-radius: 12px;
font-size: 15px; font-weight: 700; cursor: pointer;
border: none; transition: all 0.2s; margin-top: 18px;
}
.restart-btn:hover { opacity: 0.88; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="badge">⚡ Medium Level · BDC Anatomy</div>
<h1>Anatomy MCQ Exam</h1>
<p>15 Questions · Moderate Difficulty · Full Body Coverage</p>
</div>
<div id="exam-screen">
<div class="q-nav" id="q-nav"></div>
<div class="progress-wrap">
<div class="progress-bar-outer">
<div class="progress-bar-inner" id="progress-bar" style="width:0%"></div>
</div>
<span class="progress-label" id="progress-label">0 / 15</span>
</div>
<div class="question-card" id="q-card">
<div class="q-meta">
<span class="q-number" id="q-number">Question 1</span>
<span class="q-topic" id="q-topic"></span>
</div>
<div class="difficulty-badge">⚡ Medium</div>
<div class="q-text" id="q-text"></div>
<div class="options" id="options"></div>
<div class="explanation" id="explanation">
<div class="exp-title">📖 Explanation</div>
<div class="correct-label" id="correct-label"></div>
<p id="exp-text"></p>
</div>
</div>
<div class="nav-row">
<button class="btn btn-outline" id="btn-prev" onclick="navigate(-1)">← Previous</button>
<button class="btn btn-primary" id="btn-next" onclick="navigate(1)">Next →</button>
<button class="btn btn-primary" id="btn-submit" onclick="submitExam()" style="display:none">Submit Exam</button>
</div>
</div>
<div id="result-screen">
<div class="result-card" id="result-card"></div>
<div class="result-grid" id="result-grid"></div>
<div style="text-align:center">
<button class="restart-btn" onclick="restartExam()">🔄 Restart Exam</button>
</div>
</div>
</div>
<script>
const questions = [
{
topic: "Upper Limb",
q: "Which muscle forms the medial wall of the axilla?",
opts: [
"Subscapularis",
"Serratus anterior",
"Pectoralis minor",
"Coracobrachialis"
],
ans: 1,
exp: "The axilla has four walls: anterior (pectoralis major and minor), posterior (subscapularis, teres major, latissimus dorsi), lateral (intertubercular groove of humerus), and medial (serratus anterior overlying ribs 1–4). Serratus anterior is also important for protracting and rotating the scapula — its paralysis (long thoracic nerve injury) causes winging of the scapula."
},
{
topic: "Upper Limb",
q: "The anatomical snuffbox is bounded by two tendons. Which tendon forms its medial (ulnar) boundary?",
opts: [
"Abductor pollicis longus",
"Extensor pollicis brevis",
"Extensor pollicis longus",
"Flexor pollicis longus"
],
ans: 2,
exp: "The anatomical snuffbox is a depression on the radial side of the wrist. Its lateral (radial) border is formed by abductor pollicis longus and extensor pollicis brevis, while its medial (ulnar) border is formed by extensor pollicis longus. The floor contains the scaphoid and trapezium bones, and the radial artery passes through its floor. Tenderness here suggests scaphoid fracture."
},
{
topic: "Lower Limb",
q: "Which nerve supplies the skin of the medial side of the leg and foot (not the sole)?",
opts: [
"Superficial peroneal nerve",
"Saphenous nerve",
"Sural nerve",
"Deep peroneal nerve"
],
ans: 1,
exp: "The saphenous nerve is the terminal cutaneous branch of the femoral nerve (L3–L4). It accompanies the great saphenous vein and supplies skin over the medial side of the knee, leg, and foot as far as the ball of the big toe. It is the only branch of the femoral nerve that descends below the knee. It is at risk during great saphenous vein harvesting for bypass surgery."
},
{
topic: "Lower Limb",
q: "Which muscle is the chief invertor of the foot, supplied by the deep peroneal nerve?",
opts: [
"Tibialis posterior",
"Tibialis anterior",
"Peroneus longus",
"Extensor digitorum longus"
],
ans: 1,
exp: "Tibialis anterior (deep peroneal nerve, L4) dorsiflexes and inverts the foot. Its tendon passes medially to insert on the medial cuneiform and base of the 1st metatarsal. Tibialis posterior (tibial nerve) is the chief invertor from the posterior compartment. Note: Peroneus longus and brevis are evertors. In foot drop (deep peroneal nerve injury), both dorsiflexion and inversion are lost."
},
{
topic: "Thorax",
q: "Which intercostal structure is found in the COSTAL GROOVE and is therefore most protected from trauma?",
opts: [
"Intercostal vein only",
"Intercostal artery only",
"Intercostal nerve",
"Vein, artery, and nerve — all three"
],
ans: 3,
exp: "The costal groove on the inferior surface of each rib shelters all three intercostal structures, arranged from superior to inferior as: Vein, Artery, Nerve (VAN). The vein lies most superiorly (best protected), the nerve most inferiorly (least protected). When performing thoracocentesis or inserting a chest drain, the needle is passed just above the upper border of the lower rib to avoid the neurovascular bundle."
},
{
topic: "Thorax",
q: "Which structure separates the superior mediastinum from the posterior mediastinum?",
opts: [
"Angle of Louis (sternal angle)",
"Plane of thoracic inlet",
"Fibrous pericardium",
"Tracheal bifurcation"
],
ans: 0,
exp: "The sternal angle (angle of Louis) marks the junction of the manubrium and body of the sternum at the level of T4/T5. This is the key landmark separating the superior mediastinum (above) from the inferior mediastinum (below). The inferior mediastinum is further divided into anterior, middle, and posterior. The sternal angle also marks: the 2nd costal cartilage, the bifurcation of the trachea, the aortic arch start and end, and the azygos vein entering the SVC."
},
{
topic: "Abdomen",
q: "The McBurney's point, used to locate the appendix, is situated at what landmark?",
opts: [
"Midpoint of the line joining umbilicus to right ASIS",
"Junction of medial 1/3 and lateral 2/3 of right ASIS to umbilicus",
"Right iliac fossa, 5 cm below ASIS",
"Midpoint between right ASIS and pubic symphysis"
],
ans: 1,
exp: "McBurney's point is located 1/3 of the way from the right anterior superior iliac spine (ASIS) to the umbilicus — i.e., at the junction of the lateral 2/3 and medial 1/3. Maximum tenderness at this point is a sign of acute appendicitis. The appendix itself is highly variable in position (retrocaecal most common ~65%), but its base is consistently at the confluence of the three taeniae coli on the caecum."
},
{
topic: "Abdomen",
q: "Which part of the duodenum is the only intraperitoneal part?",
opts: [
"1st part (superior)",
"2nd part (descending)",
"3rd part (horizontal)",
"4th part (ascending)"
],
ans: 0,
exp: "The 1st (superior) part of the duodenum (the 'duodenal cap') is mobile and covered by peritoneum on both its anterior and posterior surfaces — it is intraperitoneal. The remaining 2nd, 3rd, and 4th parts are retroperitoneal (fixed). The duodenal cap is the commonest site for peptic ulcers. Anterior ulcers may perforate into the peritoneal cavity; posterior ulcers may erode into the gastroduodenal artery, causing haemorrhage."
},
{
topic: "Head & Neck",
q: "Which muscle is the only muscle of the tongue NOT supplied by the hypoglossal nerve (CN XII)?",
opts: [
"Genioglossus",
"Styloglossus",
"Palatoglossus",
"Hyoglossus"
],
ans: 2,
exp: "All intrinsic muscles of the tongue and all extrinsic muscles EXCEPT palatoglossus are supplied by the hypoglossal nerve (CN XII). Palatoglossus is supplied by the vagus nerve (CN X) via the pharyngeal plexus. This is an important exception to remember. Clinically, a unilateral CN XII lesion causes the tongue to deviate toward the side of the lesion on protrusion (genioglossus on the normal side pushes the tongue to the weak side)."
},
{
topic: "Head & Neck",
q: "The cavernous sinus lies on either side of the sella turcica. Which structure runs within the substance of the cavernous sinus (not in its lateral wall)?",
opts: [
"Oculomotor nerve (CN III)",
"Trochlear nerve (CN IV)",
"Abducens nerve (CN VI)",
"Ophthalmic division of trigeminal (V1)"
],
ans: 2,
exp: "The cavernous sinus contains: in its lateral wall from superior to inferior — CN III, CN IV, V1 (ophthalmic), V2 (maxillary); and passing through the sinus itself — the internal carotid artery and CN VI (abducens). Because CN VI runs within the sinus (not in the protective lateral wall), it is the most vulnerable to compression in raised intracranial pressure, cavernous sinus thrombosis, or pituitary tumours, causing lateral rectus palsy (convergent squint)."
},
{
topic: "Neuroanatomy",
q: "Which tract carries fine touch, vibration, and proprioception from the ipsilateral side of the body and crosses in the medulla?",
opts: [
"Lateral spinothalamic tract",
"Anterior spinothalamic tract",
"Dorsal columns (fasciculus gracilis and cuneatus)",
"Corticospinal tract"
],
ans: 2,
exp: "The dorsal columns (posterior funiculus) carry fine/discriminative touch, vibration, pressure, and proprioception. First-order neurons ascend ipsilaterally in the dorsal columns (fasciculus gracilis = lower limb; fasciculus cuneatus = upper limb) and synapse in the nucleus gracilis and nucleus cuneatus in the medulla. Second-order neurons cross as internal arcuate fibres (medial lemniscus) and ascend to the thalamus. Lesions cause ipsilateral loss of these modalities below the level of injury."
},
{
topic: "Pelvis",
q: "The levator ani muscle has three components. Which component supports the prostate in males and forms the 'puborectalis sling' essential for faecal continence?",
opts: [
"Iliococcygeus",
"Coccygeus",
"Pubococcygeus",
"Ischiococcygeus"
],
ans: 2,
exp: "Levator ani has three parts: pubococcygeus (most medial and important), iliococcygeus, and puborectalis. The pubococcygeus component includes the puborectalis, which forms a U-shaped sling around the anorectal junction, pulling it anteriorly to create the anorectal angle (~90°). This angle is essential for faecal continence. Pubococcygeus also supports the prostate (male) or vagina (female). Levator ani is supplied by the nerve to levator ani (S3–S4) and the perineal branch of S4."
},
{
topic: "Embryology",
q: "Patent ductus arteriosus (PDA) connects the pulmonary trunk to the aorta. It is a remnant of which embryological structure?",
opts: [
"Left 3rd aortic arch",
"Left 4th aortic arch",
"Left 6th aortic arch",
"Left 5th aortic arch"
],
ans: 2,
exp: "The ductus arteriosus is derived from the left 6th aortic arch. It connects the pulmonary trunk to the descending aorta (distal to the left subclavian artery origin) in the fetus, shunting blood away from the uninflated lungs. It normally closes within 24–72 hours after birth (functional closure) due to increased oxygen tension and decreased prostaglandins. Patent DA can be closed with indomethacin (NSAIDs reduce prostaglandins) or surgical ligation. The right 6th arch forms the right pulmonary artery."
},
{
topic: "Upper Limb",
q: "A patient sustains a fracture of the medial epicondyle of the humerus. Which nerve is most likely to be injured?",
opts: [
"Median nerve",
"Radial nerve",
"Ulnar nerve",
"Anterior interosseous nerve"
],
ans: 2,
exp: "The ulnar nerve passes posterior to the medial epicondyle in the cubital tunnel (ulnar groove). It is the most superficial nerve at the elbow, making it vulnerable to 'funny bone' injuries and fractures of the medial epicondyle. Injury here causes: clawing of the ring and little fingers, weakness of intrinsic hand muscles (interossei, hypothenar, medial two lumbricals), loss of sensation over the medial 1.5 fingers and medial palm, and loss of wrist flexion (flexor carpi ulnaris)."
},
{
topic: "Abdomen",
q: "Which of the following is a branch of the coeliac trunk?",
opts: [
"Inferior mesenteric artery",
"Superior mesenteric artery",
"Left gastric artery",
"Middle colic artery"
],
ans: 2,
exp: "The coeliac trunk (T12 level) has three branches: left gastric artery, splenic artery, and common hepatic artery — easily remembered as 'Left Surgeon Cuts' or 'LSC'. The superior mesenteric artery arises at L1 and supplies the midgut (duodenum to 2/3 of transverse colon). The inferior mesenteric artery arises at L3 and supplies the hindgut (descending colon to upper rectum). Middle colic artery is a branch of the SMA."
}
];
let current = 0;
let userAnswers = Array(questions.length).fill(null);
function init() {
buildNav();
renderQuestion();
}
function buildNav() {
const nav = document.getElementById('q-nav');
nav.innerHTML = '';
questions.forEach((_, i) => {
const dot = document.createElement('div');
dot.className = 'q-dot' + (i === current ? ' active' : '');
dot.id = `dot-${i}`;
dot.textContent = i + 1;
dot.onclick = () => goTo(i);
nav.appendChild(dot);
});
}
function goTo(i) {
current = i;
buildNav();
renderQuestion();
}
function renderQuestion() {
const q = questions[current];
document.getElementById('q-number').textContent = `Question ${current + 1} of ${questions.length}`;
document.getElementById('q-topic').textContent = q.topic;
document.getElementById('q-text').textContent = q.q;
const opts = document.getElementById('options');
opts.innerHTML = '';
const keys = ['A', 'B', 'C', 'D'];
q.opts.forEach((opt, i) => {
const div = document.createElement('div');
div.className = 'option' + (userAnswers[current] !== null ? ' locked' : '');
div.innerHTML = `<div class="opt-key">${keys[i]}</div><div class="opt-text">${opt}</div>`;
if (userAnswers[current] !== null) {
if (i === q.ans) div.classList.add('correct');
else if (i === userAnswers[current]) div.classList.add('wrong');
}
div.onclick = () => selectOption(i);
opts.appendChild(div);
});
const expDiv = document.getElementById('explanation');
if (userAnswers[current] !== null) {
document.getElementById('correct-label').textContent = `✓ Correct Answer: ${keys[q.ans]}. ${q.opts[q.ans]}`;
document.getElementById('exp-text').textContent = q.exp;
expDiv.classList.add('show');
} else {
expDiv.classList.remove('show');
}
const answered = userAnswers.filter(a => a !== null).length;
document.getElementById('progress-bar').style.width = (answered / questions.length * 100) + '%';
document.getElementById('progress-label').textContent = `${answered} / ${questions.length} answered`;
document.getElementById('btn-prev').disabled = current === 0;
const isLast = current === questions.length - 1;
document.getElementById('btn-next').style.display = isLast ? 'none' : 'inline-block';
document.getElementById('btn-submit').style.display = isLast ? 'inline-block' : 'none';
updateDot(current);
}
function selectOption(i) {
if (userAnswers[current] !== null) return;
userAnswers[current] = i;
renderQuestion();
}
function updateDot(idx) {
const dot = document.getElementById(`dot-${idx}`);
if (!dot) return;
dot.className = 'q-dot';
if (idx === current) dot.classList.add('active');
if (userAnswers[idx] !== null) {
dot.classList.add(userAnswers[idx] === questions[idx].ans ? 'answered-correct' : 'answered-wrong');
}
}
function navigate(dir) {
const next = current + dir;
if (next < 0 || next >= questions.length) return;
current = next;
buildNav();
renderQuestion();
}
function submitExam() {
const unanswered = userAnswers.filter(a => a === null).length;
if (unanswered > 0 && !confirm(`You have ${unanswered} unanswered question(s). Submit anyway?`)) return;
showResult();
}
function showResult() {
document.getElementById('exam-screen').style.display = 'none';
document.getElementById('result-screen').style.display = 'block';
let correct = 0, wrong = 0, skipped = 0;
questions.forEach((q, i) => {
if (userAnswers[i] === null) skipped++;
else if (userAnswers[i] === q.ans) correct++;
else wrong++;
});
const pct = Math.round((correct / questions.length) * 100);
let grade, color;
if (pct >= 80) { grade = 'Excellent!'; color = '#22c55e'; }
else if (pct >= 60) { grade = 'Good Job!'; color = '#f59e0b'; }
else { grade = 'Keep Practicing!'; color = '#ef4444'; }
document.getElementById('result-card').innerHTML = `
<div class="score-circle" style="background: conic-gradient(${color} ${pct * 3.6}deg, #1e293b 0deg);">
<span>${pct}%</span>
</div>
<h2>${grade}</h2>
<p class="subtitle">You scored ${correct} out of ${questions.length}</p>
<div class="stats-row">
<div class="stat-box"><div class="stat-val" style="color:#4ade80">${correct}</div><div class="stat-lbl">Correct</div></div>
<div class="stat-box"><div class="stat-val" style="color:#f87171">${wrong}</div><div class="stat-lbl">Wrong</div></div>
<div class="stat-box"><div class="stat-val" style="color:#fbbf24">${skipped}</div><div class="stat-lbl">Skipped</div></div>
</div>`;
const rg = document.getElementById('result-grid');
rg.innerHTML = '<h3 style="color:#94a3b8;font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;">Question Review</h3>';
const keys = ['A','B','C','D'];
questions.forEach((q, i) => {
const ua = userAnswers[i];
const isCorrect = ua === q.ans;
const isSkipped = ua === null;
const ri = document.createElement('div');
ri.className = 'result-item';
ri.innerHTML = `
<div class="ri-q">${i+1}. ${q.q.substring(0,110)}${q.q.length>110?'…':''}</div>
<div class="ri-row">
<span>${isSkipped ? '⬜ Skipped' : isCorrect ? '✅ Correct' : '❌ Wrong'}</span>
${!isCorrect && !isSkipped ? `<span class="ri-your">Your: ${keys[ua]}. ${q.opts[ua]}</span>` : ''}
<span class="ri-correct-only">Answer: ${keys[q.ans]}. ${q.opts[q.ans]}</span>
</div>`;
rg.appendChild(ri);
});
}
function restartExam() {
userAnswers = Array(questions.length).fill(null);
current = 0;
document.getElementById('result-screen').style.display = 'none';
document.getElementById('exam-screen').style.display = 'block';
init();
}
init();
</script>
</body>
</html>
Here's your Medium Level exam — fresh set of 15 questions, cyan theme to distinguish it from the previous one!
index
HTML File · HTML
15 Medium-level questions covering:
| # | Topic | Concept Tested |
|---|---|---|
| 1 | Upper Limb | Walls of the axilla |
| 2 | Upper Limb | Anatomical snuffbox boundaries |
| 3 | Lower Limb | Saphenous nerve distribution |
| 4 | Lower Limb | Tibialis anterior vs posterior |
| 5 | Thorax | Costal groove — VAN arrangement |
| 6 | Thorax | Mediastinal divisions (Sternal angle) |
| 7 | Abdomen | McBurney's point landmark |
| 8 | Abdomen | Intraperitoneal part of duodenum |
| 9 | Head & Neck | Palatoglossus — CN X exception |
| 10 | Head & Neck | Cavernous sinus contents (CN VI) |
| 11 | Neuroanatomy | Dorsal columns pathway |
| 12 | Pelvis | Levator ani — puborectalis sling |
| 13 | Embryology | PDA — 6th aortic arch |
| 14 | Upper Limb | Medial epicondyle fracture & ulnar nerve |
| 15 | Abdomen | Coeliac trunk branches |
Same interactive features — tap to answer, instant feedback, explanation below every question, score card at the end, and restart option. 🎯
This is a shared conversation. Sign in to Orris to start your own chat.