Give 10 mcqs on Fistula The pattern should be of Mcqs but I should pic

Give 10 mcqs on Fistula 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.medium level hard

Reading File

Finding Sources

Reading File

Finding Sources

Running Command

ls -la /home/daytona/workspace/

Writing File

~/fistula-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>Fistula MCQ Exam</title>
<style>
  :root {
    --primary: #1a73e8;
    --success: #1e8e3e;
    --danger: #d93025;
    --bg: #f0f4f9;
    --card: #ffffff;
    --text: #202124;
    --sub: #5f6368;
    --border: #dadce0;
    --radius: 12px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    padding: 24px 16px 60px;
  }
  header {
    text-align: center;
    margin-bottom: 32px;
  }
  header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
  }
  header p {
    color: var(--sub);
    margin-top: 6px;
    font-size: 0.95rem;
  }
  .progress-bar-wrap {
    background: var(--border);
    border-radius: 99px;
    height: 8px;
    width: 100%;
    max-width: 700px;
    margin: 16px auto 0;
    overflow: hidden;
  }
  .progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 99px;
    transition: width 0.4s ease;
  }
  .question-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 32px;
    max-width: 700px;
    margin: 0 auto 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }
  .q-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
  }
  .q-number {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .q-difficulty {
    font-size: 0.75rem;
    background: #fce8e6;
    color: #c5221f;
    border-radius: 99px;
    padding: 3px 10px;
    font-weight: 600;
  }
  .q-text {
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  .options-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .option-btn {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f8f9fa;
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    font-size: 0.97rem;
    text-align: left;
    transition: all 0.18s ease;
    width: 100%;
  }
  .option-btn:hover:not(:disabled) {
    border-color: var(--primary);
    background: #e8f0fe;
  }
  .option-label {
    font-weight: 700;
    min-width: 22px;
    color: var(--primary);
  }
  .option-btn.correct {
    border-color: var(--success);
    background: #e6f4ea;
  }
  .option-btn.correct .option-label { color: var(--success); }
  .option-btn.wrong {
    border-color: var(--danger);
    background: #fce8e6;
  }
  .option-btn.wrong .option-label { color: var(--danger); }
  .option-btn:disabled { cursor: default; }
  .feedback {
    display: none;
    margin-top: 18px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
  }
  .feedback.show { display: block; }
  .feedback-verdict {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
  }
  .feedback-verdict.correct-v { color: var(--success); }
  .feedback-verdict.wrong-v { color: var(--danger); }
  .feedback-explanation {
    font-size: 0.93rem;
    color: var(--text);
    line-height: 1.65;
    background: #f8f9fa;
    border-left: 4px solid var(--primary);
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
  }
  .feedback-explanation strong { color: var(--primary); }

  /* Score screen */
  #score-screen {
    display: none;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px 32px;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  #score-screen h2 {
    font-size: 1.6rem;
    color: var(--primary);
    margin-bottom: 12px;
  }
  .score-big {
    font-size: 4rem;
    font-weight: 800;
    color: var(--primary);
    margin: 16px 0;
  }
  .score-sub {
    color: var(--sub);
    font-size: 1rem;
    margin-bottom: 24px;
  }
  .score-msg {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 28px;
  }
  .restart-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
  }
  .restart-btn:hover { opacity: 0.88; }

  @media (max-width: 520px) {
    .question-card { padding: 20px 16px; }
    header h1 { font-size: 1.5rem; }
  }
</style>
</head>
<body>

<header>
  <h1>🩺 Fistula MCQ Exam</h1>
  <p>10 Questions &nbsp;|&nbsp; Medium–Hard &nbsp;|&nbsp; Click an option to see the answer</p>
  <div class="progress-bar-wrap">
    <div class="progress-bar" id="progressBar" style="width:0%"></div>
  </div>
</header>

<div id="quiz-container"></div>

<div id="score-screen">
  <h2>Exam Complete!</h2>
  <div class="score-big" id="scoreDisplay">0/10</div>
  <div class="score-sub" id="scoreSub"></div>
  <div class="score-msg" id="scoreMsg"></div>
  <button class="restart-btn" onclick="restartQuiz()">Restart Exam</button>
</div>

<script>
const questions = [
  {
    q: "A 45-year-old man presents with recurrent perianal discharge and pain. Examination reveals an external opening 3 cm from the anal verge in the posterior midline. According to Goodsall's rule, the internal opening of this fistula is most likely located at:",
    options: [
      "The anterior midline of the dentate line",
      "The posterior midline of the dentate line",
      "Directly radial to the external opening",
      "The lateral wall of the anal canal",
      "The anorectal junction anteriorly"
    ],
    answer: 1,
    explanation: "<strong>Goodsall's Rule:</strong> External openings posterior to a transverse line drawn through the anus open internally at the <em>posterior midline</em> of the dentate line (curved track). External openings anterior to this line open directly radial (straight track). Because this external opening is in the posterior midline, the internal opening is at the posterior midline of the dentate line. This rule helps predict fistula anatomy and guides surgical planning."
  },
  {
    q: "In Parks' classification of anal fistulae, which type passes through both the internal and external anal sphincters, traversing the ischiorectal fossa to reach the skin?",
    options: [
      "Intersphincteric fistula",
      "Suprasphincteric fistula",
      "Extrasphincteric fistula",
      "Trans-sphincteric fistula",
      "Submucosal fistula"
    ],
    answer: 3,
    explanation: "<strong>Parks' Classification:</strong> A <em>trans-sphincteric fistula</em> passes through both the internal sphincter (at the dentate line) and the external sphincter, then through the ischiorectal fossa to exit at the perianal skin. It is the most common type. Intersphincteric travels only between the two sphincters. Suprasphincteric passes above the puborectalis. Extrasphincteric (the most complex) bypasses all sphincters entirely."
  },
  {
    q: "A 50-year-old woman with a history of sigmoid diverticulitis presents with pneumaturia and fecaluria. CT scan confirms a colovesicular fistula. Which of the following statements about this fistula is TRUE?",
    options: [
      "It is equally common in men and women",
      "Fecaluria is merely suggestive but not pathognomonic",
      "Fecaluria is pathognomonic for colovesicular fistula",
      "Colovaginal fistula is more common than colovesicular in diverticulitis",
      "Cystoscopy is contraindicated as it worsens the fistula"
    ],
    answer: 2,
    explanation: "<strong>Colovesicular fistula</strong> is the most common fistula complicating diverticulitis (~65% of diverticulitis-associated fistulae). <em>Fecaluria is pathognomonic</em>. Women are half as likely to develop it because the uterus protects the bladder. Colovaginal fistula accounts for ~25% of cases. Cystoscopy, cystography, and barium enema are all useful diagnostic tools. — Sleisenger and Fordtran's GI and Liver Disease"
  },
  {
    q: "After total laryngectomy with prior radiotherapy, a patient develops a pharyngocutaneous fistula. Which of the following is the GOLD STANDARD flap for closure of a large pharyngocutaneous fistula?",
    options: [
      "Radial forearm free flap",
      "Anterolateral thigh free flap",
      "Pectoralis major myocutaneous pedicled flap",
      "Deltopectoral flap",
      "Latissimus dorsi free flap"
    ],
    answer: 2,
    explanation: "<strong>Pharyngocutaneous fistula</strong> is a known complication of total laryngectomy, especially with prior radiation and malnutrition. The <em>pectoralis major muscle flap is the gold standard</em> for closure of large fistulas — its robust muscle seals areas with tenuous tissue quality and obliterates dead space. Both radial forearm and ALT flaps are used to reinforce pharyngeal closure primarily, not as standard fistula salvage. — Sabiston Textbook of Surgery"
  },
  {
    q: "A patient with a small pharyngocutaneous fistula after neck dissection is managed conservatively. Which of the following is INCORRECT in the conservative management of such a fistula?",
    options: [
      "Regular debridement of the wound bed",
      "Keeping the patient NPO with enteral nutrition",
      "Dry packing or wet-to-dry dressings",
      "Oral diet can be resumed once the fistula appears visually closed",
      "Barium swallow study before resuming oral intake"
    ],
    answer: 3,
    explanation: "In conservative fistula management, oral diet must NOT be resumed on visual inspection alone. A <em>barium swallow study</em> must confirm fistula closure before any oral intake is started. Keeping the patient strictly NPO (enteral feeds via NG or PEG tube), regular debridement, and dry/wet-to-dry dressings to prevent saliva pooling are all correct conservative measures. — Sabiston Textbook of Surgery"
  },
  {
    q: "In diverticulitis-associated fistulae, which adjacent organ is involved in the SECOND most common fistula type?",
    options: [
      "Bladder",
      "Vagina",
      "Small intestine",
      "Uterus",
      "Skin"
    ],
    answer: 1,
    explanation: "<strong>Diverticulitis fistulae frequency:</strong> Colovesicular (~65%) → Colovaginal (~25%) → Coloenteric, colouterine, and colocutaneous (much less common). Colovaginal fistulas are the <em>second most common type</em>, and are frequently associated with prior hysterectomy. The passage of stool or flatus per vagina is pathognomonic for colovaginal fistula. — Sleisenger and Fordtran's GI and Liver Disease"
  },
  {
    q: "A 35-year-old man with Crohn's disease develops a complex perianal fistula. Which of the following features indicates a 'complex' rather than 'simple' perianal fistula in Crohn's disease?",
    options: [
      "Single external opening",
      "Low intersphincteric or low trans-sphincteric tract",
      "Presence of proctitis, rectovaginal fistula, or multiple tracts",
      "Fistula present for less than 3 months",
      "No prior immunosuppressive therapy"
    ],
    answer: 2,
    explanation: "Complex perianal fistulas in Crohn's disease are characterised by: high trans-sphincteric, suprasphincteric or extrasphincteric location; multiple external openings; associated proctitis; rectovaginal involvement; or fistula in the setting of active rectal inflammation. Simple fistulas are low (intersphincteric or low trans-sphincteric), have a single external opening, and have no associated proctitis, abscess, or rectovaginal component. Biologics (anti-TNF agents like infliximab) are indicated for complex perianal Crohn's fistulae."
  },
  {
    q: "An arteriovenous fistula (AVF) is created for haemodialysis access. Which of the following is the preferred FIRST choice site for AVF creation according to the 'Fistula First' principle?",
    options: [
      "Femoral AVF (saphenous vein to femoral artery)",
      "Upper arm brachiocephalic AVF",
      "Radiocephalic AVF at the wrist (Brescia-Cimino fistula)",
      "Basilic vein transposition at the upper arm",
      "Prosthetic AV graft in the forearm"
    ],
    answer: 2,
    explanation: "The <strong>Brescia-Cimino radiocephalic AVF at the wrist</strong> is the preferred first-choice site under the 'Fistula First' principle for haemodialysis access. It has the best long-term patency, lowest infection rate, and fewest complications. If this is not feasible (poor vessels), the brachiocephalic AVF in the upper arm is next. Basilic vein transposition and prosthetic grafts are used when native vein options are exhausted. Femoral access is reserved for limited options due to high infection risk."
  },
  {
    q: "A tracheoesophageal fistula (TEF) is discovered in a neonate shortly after birth. The MOST COMMON anatomical type of TEF is:",
    options: [
      "Pure oesophageal atresia with no fistula (Type A)",
      "H-type fistula without atresia (Type E)",
      "Proximal oesophageal atresia with distal TEF (Type C)",
      "Proximal TEF with distal atresia (Type B)",
      "Both proximal and distal fistulae with atresia (Type D)"
    ],
    answer: 2,
    explanation: "The most common type of tracheoesophageal fistula is <strong>Type C (Gross classification)</strong> — proximal oesophageal atresia with a distal tracheoesophageal fistula — accounting for approximately 85–90% of cases. The classic presentation is the 3 Cs: Coughing, Choking, and Cyanosis with feeding. The H-type (pure fistula, no atresia) accounts for ~4% and may present later with recurrent aspiration pneumonia. Type A (pure atresia) accounts for ~8%."
  },
  {
    q: "A patient with a ureterovaginal fistula after hysterectomy presents with continuous urinary leakage per vagina. What is the MOST useful initial investigation to differentiate a vesicovaginal fistula (VVF) from a ureterovaginal fistula (UVF)?",
    options: [
      "Intravenous pyelogram (IVP)",
      "Cystoscopy",
      "Three-swab test (dye test)",
      "Retrograde urethrogram",
      "Pelvic MRI"
    ],
    answer: 2,
    explanation: "<strong>The three-swab (dye) test:</strong> Methylene blue or indigo carmine is instilled into the bladder. Swabs placed in the vagina are then examined. Staining of the uppermost swab with clear urine (after IV phenazopyridine) indicates UVF (dye bypasses the fistula entirely — urine comes from the ureter above the fistula). Staining of the lower swab with blue dye indicates VVF. This simple test differentiates the two. IVP and CT urogram then confirm UVF anatomy. Cystoscopy identifies VVF location. — Campbell-Walsh Wein Urology"
  }
];

let answered = 0;
let score = 0;

function buildQuiz() {
  const container = document.getElementById('quiz-container');
  container.innerHTML = '';
  answered = 0;
  score = 0;
  updateProgress();
  document.getElementById('score-screen').style.display = 'none';

  questions.forEach((q, idx) => {
    const card = document.createElement('div');
    card.className = 'question-card';
    card.id = 'card-' + idx;

    const optionsHTML = q.options.map((opt, i) => {
      const label = String.fromCharCode(65 + i);
      return `<li>
        <button class="option-btn" onclick="selectOption(${idx}, ${i})" id="opt-${idx}-${i}">
          <span class="option-label">${label}.</span>
          <span>${opt}</span>
        </button>
      </li>`;
    }).join('');

    card.innerHTML = `
      <div class="q-meta">
        <span class="q-number">Question ${idx + 1} of ${questions.length}</span>
        <span class="q-difficulty">Medium–Hard</span>
      </div>
      <div class="q-text">${q.q}</div>
      <ul class="options-list">${optionsHTML}</ul>
      <div class="feedback" id="feedback-${idx}">
        <div class="feedback-verdict" id="verdict-${idx}"></div>
        <div class="feedback-explanation">${q.explanation}</div>
      </div>
    `;
    container.appendChild(card);
  });
}

function selectOption(qIdx, optIdx) {
  const q = questions[qIdx];
  // Disable all buttons for this question
  q.options.forEach((_, i) => {
    const btn = document.getElementById(`opt-${qIdx}-${i}`);
    btn.disabled = true;
  });

  const chosen = document.getElementById(`opt-${qIdx}-${optIdx}`);
  const correct = document.getElementById(`opt-${qIdx}-${q.answer}`);
  const feedback = document.getElementById(`feedback-${qIdx}`);
  const verdict = document.getElementById(`verdict-${qIdx}`);

  if (optIdx === q.answer) {
    chosen.classList.add('correct');
    verdict.textContent = '✅ Correct!';
    verdict.className = 'feedback-verdict correct-v';
    score++;
  } else {
    chosen.classList.add('wrong');
    correct.classList.add('correct');
    verdict.textContent = '❌ Incorrect — See explanation below';
    verdict.className = 'feedback-verdict wrong-v';
  }

  feedback.classList.add('show');
  answered++;
  updateProgress();

  if (answered === questions.length) {
    setTimeout(showScore, 600);
  }
}

function updateProgress() {
  const pct = (answered / questions.length) * 100;
  document.getElementById('progressBar').style.width = pct + '%';
}

function showScore() {
  document.getElementById('score-screen').style.display = 'block';
  document.getElementById('scoreDisplay').textContent = score + '/' + questions.length;
  document.getElementById('scoreSub').textContent = `You answered ${score} out of ${questions.length} questions correctly.`;
  const pct = (score / questions.length) * 100;
  let msg = '';
  if (pct === 100) msg = '🏆 Perfect score! Outstanding knowledge of fistula pathology.';
  else if (pct >= 80) msg = '🌟 Excellent! Strong grasp of fistula concepts.';
  else if (pct >= 60) msg = '👍 Good effort. Review the explanations for a stronger foundation.';
  else if (pct >= 40) msg = '📖 Fair attempt. Revisit fistula classification and management.';
  else msg = '💪 Keep studying! Focus on fistula types, Goodsall\'s rule, and Parks\' classification.';
  document.getElementById('scoreMsg').textContent = msg;
  document.getElementById('score-screen').scrollIntoView({ behavior: 'smooth' });
}

function restartQuiz() {
  buildQuiz();
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

buildQuiz();
</script>
</body>
</html>

Your interactive Fistula MCQ exam is ready!

index

HTML File · HTML

Here's a preview of what's inside:

#	Topic Covered
1	Goodsall's Rule — posterior fistula tract direction
2	Parks' Classification — trans-sphincteric fistula
3	Colovesicular fistula — pathognomonic feature (fecaluria)
4	Gold standard flap for pharyngocutaneous fistula
5	Conservative management of pharyngocutaneous fistula
6	Second most common diverticulitis fistula type
7	Complex vs simple perianal fistula in Crohn's disease
8	Brescia-Cimino AVF — Fistula First principle
9	Most common type of tracheoesophageal fistula (Type C)
10	Three-swab dye test — VVF vs ureterovaginal fistula

How it works:

Click an option → answer is instantly revealed with ✅ or ❌
The correct answer highlights green; your wrong pick highlights red
A detailed explanation appears below every question
A score screen at the end shows your total with a performance message
Hit Restart Exam to redo it

Give 10 mcqs on Biliary atresia 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.medium level hard

Reading File

Finding Sources

Reading File

Finding Sources

Running Command

ls -la /home/daytona/workspace/

Writing File

~/fistula-mcq-v2/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Fistula MCQ Exam</title>
<style>
  :root{--primary:#1a73e8;--success:#1e8e3e;--danger:#d93025;--warn:#f9ab00;--bg:#f0f4f9;--card:#fff;--text:#202124;--sub:#5f6368;--border:#dadce0;--radius:14px}
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;padding:24px 16px 80px}
  header{text-align:center;margin-bottom:32px}
  header h1{font-size:2rem;font-weight:800;color:var(--primary)}
  header p{color:var(--sub);margin-top:6px;font-size:.95rem}
  .progress-wrap{background:var(--border);border-radius:99px;height:8px;max-width:720px;margin:14px auto 0;overflow:hidden}
  .progress-bar{height:100%;background:linear-gradient(90deg,#1a73e8,#0d47a1);border-radius:99px;transition:width .4s ease;width:0%}
  .stat-row{display:flex;justify-content:center;gap:28px;max-width:720px;margin:14px auto 0}
  .stat{text-align:center;font-size:.82rem;color:var(--sub)}
  .stat span{display:block;font-size:1.25rem;font-weight:700;color:var(--primary)}
  .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 32px;max-width:720px;margin:0 auto 22px;box-shadow:0 1px 6px rgba(0,0,0,.07)}
  .q-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
  .q-num{font-size:.78rem;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.05em}
  .q-tag{font-size:.72rem;background:#fce8e6;color:#c5221f;border-radius:99px;padding:3px 11px;font-weight:700}
  .q-text{font-size:1.05rem;font-weight:500;line-height:1.65;margin-bottom:20px}
  .opts{list-style:none;display:flex;flex-direction:column;gap:10px}
  .opt{display:flex;align-items:flex-start;gap:12px;background:#f8f9fa;border:2px solid var(--border);border-radius:10px;padding:13px 16px;cursor:pointer;font-size:.97rem;text-align:left;transition:border-color .15s,background .15s;width:100%}
  .opt:hover:not(:disabled){border-color:var(--primary);background:#e8f0fe}
  .opt-lbl{font-weight:700;min-width:22px;color:var(--primary);flex-shrink:0}
  .opt.correct{border-color:var(--success)!important;background:#e6f4ea!important}
  .opt.correct .opt-lbl{color:var(--success)}
  .opt.wrong{border-color:var(--danger)!important;background:#fce8e6!important}
  .opt.wrong .opt-lbl{color:var(--danger)}
  .opt:disabled{cursor:default}
  .feedback{display:none;margin-top:18px;border-top:1px solid var(--border);padding-top:16px}
  .feedback.show{display:block}
  .verdict{font-size:1rem;font-weight:700;margin-bottom:10px}
  .verdict.ok{color:var(--success)}
  .verdict.no{color:var(--danger)}
  .expl{font-size:.93rem;line-height:1.7;background:#f8f9fa;border-left:4px solid var(--primary);padding:12px 16px;border-radius:0 8px 8px 0}
  .expl strong{color:var(--primary)}
  .expl em{font-style:italic}
  /* score */
  #score-screen{display:none;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:44px 32px;max-width:720px;margin:0 auto;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.1)}
  #score-screen h2{font-size:1.6rem;color:var(--primary);margin-bottom:10px}
  .score-big{font-size:4.5rem;font-weight:800;color:var(--primary);margin:14px 0 6px}
  .score-sub{color:var(--sub);margin-bottom:8px}
  .score-msg{font-size:1.05rem;font-weight:500;margin-bottom:28px;color:var(--text)}
  .restart-btn{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:13px 36px;font-size:1rem;font-weight:700;cursor:pointer;transition:opacity .2s}
  .restart-btn:hover{opacity:.87}
  @media(max-width:540px){.card{padding:18px 14px}header h1{font-size:1.45rem}}
</style>
</head>
<body>
<header>
  <h1>🩺 Fistula — Online MCQ Exam</h1>
  <p>10 Questions &nbsp;|&nbsp; Medium–Hard &nbsp;|&nbsp; Click an option to reveal the answer</p>
  <div class="progress-wrap"><div class="progress-bar" id="pbar"></div></div>
  <div class="stat-row">
    <div class="stat"><span id="s-answered">0</span>Answered</div>
    <div class="stat"><span id="s-correct" style="color:#1e8e3e">0</span>Correct</div>
    <div class="stat"><span id="s-wrong" style="color:#d93025">0</span>Wrong</div>
  </div>
</header>
<div id="quiz"></div>
<div id="score-screen">
  <h2>Exam Complete!</h2>
  <div class="score-big" id="scoreNum">0/10</div>
  <div class="score-sub" id="scoreSub"></div>
  <div class="score-msg" id="scoreMsg"></div>
  <button class="restart-btn" onclick="init()">Restart Exam</button>
</div>
<script>
const Q=[
  {
    q:"A 42-year-old man with a 3-year history of perianal discharge undergoes examination under anaesthesia. An external opening is found 2 cm posterior to the anus at the 6 o'clock position. According to Goodsall's rule, where is the internal opening most likely located?",
    opts:["Directly radially opposite (at 6 o'clock of dentate line)","Anterior midline at the dentate line","Posterior midline at the dentate line","Lateral wall of the anal canal","At the anorectal junction, above the dentate line"],
    ans:2,
    expl:"<strong>Goodsall's Rule:</strong> External openings <em>posterior</em> to a transverse line through the anus have a curved track that opens internally at the <em>posterior midline</em> of the dentate line. External openings <em>anterior</em> to the line have a straight, radial track. Since this external opening is in the posterior midline (6 o'clock), the internal opening follows the curved path to the posterior midline of the dentate line — not radially opposite."
  },
  {
    q:"In Parks' classification of fistula-in-ano, which type has the highest risk of causing faecal incontinence if treated with simple lay-open (fistulotomy)?",
    opts:["Submucosal fistula","Intersphincteric fistula","Low trans-sphincteric fistula","Suprasphincteric fistula","Extrasphincteric fistula"],
    ans:3,
    expl:"<strong>Parks' Classification:</strong> The <em>suprasphincteric fistula</em> passes above the puborectalis, looping over it and coming down through the ischiorectal fossa. Laying it open would divide the entire external sphincter and puborectalis, causing severe faecal incontinence. Extrasphincteric fistulas are even more complex (bypass all sphincters), but suprasphincteric carries the highest realistic incontinence risk if inadvertently laid open. Submucosal and low intersphincteric fistulas can be safely laid open with minimal continence risk."
  },
  {
    q:"A 52-year-old man presents with pneumaturia and fecaluria following two episodes of diverticulitis. CT confirms a colovesicular fistula. Which of the following is the MOST appropriate definitive surgical management?",
    opts:["Colostomy alone (Hartmann's without fistula repair)","Drainage of pericolic abscess and antibiotics only","Single-stage sigmoid resection with bladder repair and primary anastomosis","Cystectomy and colostomy","Long-term suppressive antibiotics with repeat imaging"],
    ans:2,
    expl:"<strong>Colovesicular fistula</strong> from diverticulitis is best managed surgically. In a well-prepared, haemodynamically stable patient, <em>single-stage sigmoid resection with fistula closure (primary anastomosis)</em> is the procedure of choice and was performed in ~75% of patients in a Cleveland Clinic series, with &lt;4% mortality. A Hartmann's procedure (colostomy alone) is reserved for acutely ill patients with peritonitis or unprepared bowel. Antibiotics alone do not cure the fistula. — Sleisenger & Fordtran's GI and Liver Disease"
  },
  {
    q:"A pharyngocutaneous fistula develops 10 days after total laryngectomy in a patient who had prior radiotherapy. The fistula is small, non-infected, and the patient is haemodynamically stable. Which of the following is the FIRST line of management?",
    opts:["Immediate return to theatre for pectoralis major flap closure","Oral diet resumption to stimulate wound healing","Hyperbaric oxygen therapy","Conservative: NPO, enteral tube feeding, local wound care, and dressings","IV broad-spectrum antibiotics and urgent CT neck"],
    ans:3,
    expl:"<strong>Small, non-infected pharyngocutaneous fistula</strong> is initially managed <em>conservatively</em>: strict NPO with enteral nutrition (NG or gastrostomy tube), regular wound debridement, and dry/wet-to-dry dressings to prevent saliva pooling. A barium swallow study must confirm closure before resuming oral intake. Surgical intervention (pectoralis major flap) is reserved for large fistulas, uncontrolled infection, tissue destruction, or risk of carotid blowout. Prior radiotherapy is a major risk factor for fistula formation. — Sabiston Textbook of Surgery"
  },
  {
    q:"A 38-year-old woman with Crohn's disease and active proctitis develops a rectovaginal fistula with multiple perianal openings and recurrent sepsis. This fistula is best classified as:",
    opts:["Simple perianal fistula","Low intersphincteric fistula amenable to lay-open","Complex perianal fistula","Parks Type I fistula","A complication of ulcerative colitis, not Crohn's disease"],
    ans:2,
    expl:"<strong>Complex perianal fistula</strong> in Crohn's disease is defined by: high trans-sphincteric, suprasphincteric, or extrasphincteric location; multiple external openings; rectovaginal fistula; associated proctitis; or history of local sepsis. This patient has all three hallmarks (rectovaginal fistula + multiple openings + proctitis). Management involves combined medical therapy (anti-TNF biologics — infliximab is first-line) and surgical drainage of sepsis, with consideration of a defunctioning stoma. Rectovaginal fistulas are a recognised complication of Crohn's disease, not ulcerative colitis."
  },
  {
    q:"A 34-year-old man with end-stage renal disease needs permanent haemodialysis access. Which is the CORRECT order of preference for arteriovenous access creation according to the 'Fistula First' principle?",
    opts:["Prosthetic AV graft → Basilic vein transposition → Radiocephalic AVF","Radiocephalic AVF (wrist) → Brachiocephalic AVF (elbow) → Basilic vein transposition → Prosthetic AV graft","Femoral AVF → Radiocephalic AVF → AV graft","Brachiocephalic AVF → Radiocephalic AVF → Femoral AVF","Any available vein site → AV graft if veins are poor"],
    ans:1,
    expl:"The <strong>'Fistula First' initiative</strong> prioritises native AVFs for haemodialysis access in this order: (1) <em>Radiocephalic AVF at the wrist (Brescia-Cimino)</em> — longest patency, lowest infection/thrombosis; (2) <em>Brachiocephalic AVF at the elbow</em>; (3) <em>Basilic vein transposition</em> (upper arm); (4) <em>Prosthetic AV graft</em> only if native veins are exhausted. Femoral AVF is a last resort due to very high infection risk. Native fistulas outperform grafts in long-term outcomes."
  },
  {
    q:"A neonate presents at 48 hours of life with excessive oral secretions, choking with feeds, and desaturation. A feeding tube cannot be passed beyond 10 cm. Chest X-ray shows the tube coiled in the upper chest. Which is the MOST likely tracheoesophageal fistula type?",
    opts:["Type A — pure oesophageal atresia, no fistula (~8%)","Type B — proximal fistula with distal atresia (~1%)","Type C — proximal atresia with distal TEF (~85–90%)","Type D — both proximal and distal fistulae (~1%)","Type E (H-type) — fistula without atresia (~4%)"],
    ans:2,
    expl:"<strong>Type C TEF (Gross classification)</strong> — proximal oesophageal atresia with a distal tracheoesophageal fistula — is the most common type (~85–90%). The classic presentation includes: inability to pass NG tube (tube coils in blind-ending proximal pouch), excessive secretions, coughing/choking with feeds, and the 3 Cs (Coughing, Choking, Cyanosis). The distal fistula means air enters the stomach (air under diaphragm on X-ray). Type E (H-type) has no atresia and presents later with recurrent aspiration. — Schwartz's Principles of Surgery"
  },
  {
    q:"A woman presents with continuous dribbling of urine per vagina 10 days after undergoing total abdominal hysterectomy. The 3-swab (dye) test is performed — methylene blue is instilled into the bladder and phenazopyridine given IV. The uppermost vaginal swab is stained orange/yellow, while the lower swabs remain unstained. What is the MOST likely diagnosis?",
    opts:["Vesicovaginal fistula (VVF)","Urethrovaginal fistula","Ureterovaginal fistula (UVF)","Stress urinary incontinence","Vesicoenteric fistula"],
    ans:2,
    expl:"<strong>The 3-swab (dye) test interpretation:</strong> Methylene blue in bladder = VVF stains the <em>lower</em> swab blue. In <em>ureterovaginal fistula (UVF)</em>, urine leaks from the ureter above the bladder — so the instilled blue dye does NOT reach the vagina via the fistula. Instead, phenazopyridine excreted in urine (orange) stains the <em>uppermost</em> swab. Here, the uppermost swab is orange and lowers are unstained → classic UVF pattern. UVF is a common complication of hysterectomy (ureteral injury at the uterine artery ligature level). CT urogram confirms the diagnosis. — Campbell-Walsh Wein Urology"
  },
  {
    q:"In the management of a colovaginal fistula complicating diverticulitis, which of the following clinical features is PATHOGNOMONIC for this fistula type?",
    opts:["Recurrent urinary tract infections","Pneumaturia","Fecaluria","Passage of stool or flatus per vagina","Pelvic pain and vaginal discharge"],
    ans:3,
    expl:"<strong>Passage of stool or flatus per vagina is pathognomonic</strong> for colovaginal fistula. Many of these patients have had a prior hysterectomy (the uterus no longer protects the vaginal vault from the sigmoid colon). Colovaginal fistula accounts for ~25% of diverticulitis-associated fistulae. Fecaluria (passage of faeces in urine) is pathognomonic of <em>colovesicular</em> fistula. Pneumaturia can be seen in both but is not pathognomonic for colovaginal. — Sleisenger & Fordtran's GI and Liver Disease"
  },
  {
    q:"A patient with a pharyngocutaneous fistula post-laryngectomy develops neck erythema, fever, and purulent discharge. CT scan shows a collection 8 mm from the carotid artery. What is the MOST feared complication that mandates urgent surgical intervention?",
    opts:["Mediastinitis","Aspiration pneumonia","Carotid blowout","Tracheal stenosis","Wound dehiscence"],
    ans:2,
    expl:"<strong>Carotid blowout</strong> is the most devastating sequela of uncontrolled pharyngocutaneous fistula. Collection of saliva and bacteria in the neck near the great vessels leads to arterial wall necrosis and rupture of the carotid — a life-threatening emergency with near-100% mortality if not managed emergently. Any proximity of infection to the carotid artery on CT mandates low-threshold for operative washout. The pectoralis major flap is used intraoperatively to obliterate dead space and protect the carotid after debridement. — Sabiston Textbook of Surgery"
  }
];

let answered=0, correct=0, wrong=0;

function init(){
  answered=0; correct=0; wrong=0;
  document.getElementById('pbar').style.width='0%';
  document.getElementById('s-answered').textContent='0';
  document.getElementById('s-correct').textContent='0';
  document.getElementById('s-wrong').textContent='0';
  document.getElementById('score-screen').style.display='none';
  const qc=document.getElementById('quiz');
  qc.innerHTML='';
  Q.forEach((q,i)=>{
    const opts=q.opts.map((o,j)=>{
      const L=String.fromCharCode(65+j);
      return `<li><button class="opt" id="o${i}_${j}" onclick="pick(${i},${j})"><span class="opt-lbl">${L}.</span><span>${o}</span></button></li>`;
    }).join('');
    const card=document.createElement('div');
    card.className='card'; card.id='card'+i;
    card.innerHTML=`<div class="q-meta"><span class="q-num">Question ${i+1} / ${Q.length}</span><span class="q-tag">Medium–Hard</span></div><div class="q-text">${q.q}</div><ul class="opts">${opts}</ul><div class="feedback" id="fb${i}"><div class="verdict" id="vd${i}"></div><div class="expl">${q.expl}</div></div>`;
    qc.appendChild(card);
  });
  window.scrollTo({top:0,behavior:'smooth'});
}

function pick(qi,oi){
  const q=Q[qi];
  Q[qi].opts.forEach((_,j)=>{
    const b=document.getElementById(`o${qi}_${j}`);
    b.disabled=true;
  });
  const chosen=document.getElementById(`o${qi}_${oi}`);
  const correctBtn=document.getElementById(`o${qi}_${q.ans}`);
  const fb=document.getElementById('fb'+qi);
  const vd=document.getElementById('vd'+qi);
  if(oi===q.ans){
    chosen.classList.add('correct');
    vd.textContent='✅ Correct!'; vd.className='verdict ok';
    correct++;
    document.getElementById('s-correct').textContent=correct;
  } else {
    chosen.classList.add('wrong');
    correctBtn.classList.add('correct');
    vd.textContent='❌ Incorrect — correct answer highlighted above';
    vd.className='verdict no';
    wrong++;
    document.getElementById('s-wrong').textContent=wrong;
  }
  fb.classList.add('show');
  answered++;
  document.getElementById('s-answered').textContent=answered;
  document.getElementById('pbar').style.width=(answered/Q.length*100)+'%';
  if(answered===Q.length) setTimeout(showScore,700);
}

function showScore(){
  const sc=document.getElementById('score-screen');
  sc.style.display='block';
  document.getElementById('scoreNum').textContent=correct+'/'+Q.length;
  document.getElementById('scoreSub').textContent=`You answered ${correct} correctly and ${wrong} incorrectly.`;
  const pct=correct/Q.length*100;
  const msgs=['💪 Keep going — review fistula types & Goodsall\'s rule thoroughly.','📖 Fair result. Revisit Parks\' classification and colovesicular fistula features.','👍 Good effort! Strengthen your knowledge on surgical indications.','🌟 Excellent work! Solid understanding of fistula pathology and management.','🏆 Perfect score! Outstanding surgical knowledge.'];
  document.getElementById('scoreMsg').textContent=pct===100?msgs[4]:pct>=80?msgs[3]:pct>=60?msgs[2]:pct>=40?msgs[1]:msgs[0];
  sc.scrollIntoView({behavior:'smooth'});
}

init();
</script>
</body>
</html>

Writing File

~/biliary-atresia-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>Biliary Atresia MCQ Exam</title>
<style>
  :root{--primary:#00796b;--success:#1e8e3e;--danger:#d93025;--bg:#e8f5e9;--card:#fff;--text:#1b2329;--sub:#5f6368;--border:#c8e6c9;--radius:14px}
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;padding:24px 16px 80px}
  header{text-align:center;margin-bottom:32px}
  header h1{font-size:2rem;font-weight:800;color:var(--primary)}
  header p{color:var(--sub);margin-top:6px;font-size:.95rem}
  .progress-wrap{background:var(--border);border-radius:99px;height:8px;max-width:720px;margin:14px auto 0;overflow:hidden}
  .progress-bar{height:100%;background:linear-gradient(90deg,#00796b,#004d40);border-radius:99px;transition:width .4s ease;width:0%}
  .stat-row{display:flex;justify-content:center;gap:28px;max-width:720px;margin:14px auto 0}
  .stat{text-align:center;font-size:.82rem;color:var(--sub)}
  .stat span{display:block;font-size:1.25rem;font-weight:700;color:var(--primary)}
  .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 32px;max-width:720px;margin:0 auto 22px;box-shadow:0 1px 6px rgba(0,0,0,.07)}
  .q-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
  .q-num{font-size:.78rem;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.05em}
  .q-tag{font-size:.72rem;background:#e0f2f1;color:#00695c;border-radius:99px;padding:3px 11px;font-weight:700}
  .q-text{font-size:1.05rem;font-weight:500;line-height:1.65;margin-bottom:20px}
  .opts{list-style:none;display:flex;flex-direction:column;gap:10px}
  .opt{display:flex;align-items:flex-start;gap:12px;background:#f8fffe;border:2px solid var(--border);border-radius:10px;padding:13px 16px;cursor:pointer;font-size:.97rem;text-align:left;transition:border-color .15s,background .15s;width:100%}
  .opt:hover:not(:disabled){border-color:var(--primary);background:#e0f2f1}
  .opt-lbl{font-weight:700;min-width:22px;color:var(--primary);flex-shrink:0}
  .opt.correct{border-color:var(--success)!important;background:#e6f4ea!important}
  .opt.correct .opt-lbl{color:var(--success)}
  .opt.wrong{border-color:var(--danger)!important;background:#fce8e6!important}
  .opt.wrong .opt-lbl{color:var(--danger)}
  .opt:disabled{cursor:default}
  .feedback{display:none;margin-top:18px;border-top:1px solid var(--border);padding-top:16px}
  .feedback.show{display:block}
  .verdict{font-size:1rem;font-weight:700;margin-bottom:10px}
  .verdict.ok{color:var(--success)}
  .verdict.no{color:var(--danger)}
  .expl{font-size:.93rem;line-height:1.7;background:#f1f8f7;border-left:4px solid var(--primary);padding:12px 16px;border-radius:0 8px 8px 0}
  .expl strong{color:var(--primary)}
  .expl em{font-style:italic}
  #score-screen{display:none;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:44px 32px;max-width:720px;margin:0 auto;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.1)}
  #score-screen h2{font-size:1.6rem;color:var(--primary);margin-bottom:10px}
  .score-big{font-size:4.5rem;font-weight:800;color:var(--primary);margin:14px 0 6px}
  .score-sub{color:var(--sub);margin-bottom:8px}
  .score-msg{font-size:1.05rem;font-weight:500;margin-bottom:28px;color:var(--text)}
  .restart-btn{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:13px 36px;font-size:1rem;font-weight:700;cursor:pointer;transition:opacity .2s}
  .restart-btn:hover{opacity:.87}
  @media(max-width:540px){.card{padding:18px 14px}header h1{font-size:1.45rem}}
</style>
</head>
<body>
<header>
  <h1>🏥 Biliary Atresia — Online MCQ Exam</h1>
  <p>10 Questions &nbsp;|&nbsp; Medium–Hard &nbsp;|&nbsp; Click an option to reveal the answer</p>
  <div class="progress-wrap"><div class="progress-bar" id="pbar"></div></div>
  <div class="stat-row">
    <div class="stat"><span id="s-answered">0</span>Answered</div>
    <div class="stat"><span id="s-correct" style="color:#1e8e3e">0</span>Correct</div>
    <div class="stat"><span id="s-wrong" style="color:#d93025">0</span>Wrong</div>
  </div>
</header>
<div id="quiz"></div>
<div id="score-screen">
  <h2>Exam Complete!</h2>
  <div class="score-big" id="scoreNum">0/10</div>
  <div class="score-sub" id="scoreSub"></div>
  <div class="score-msg" id="scoreMsg"></div>
  <button class="restart-btn" onclick="init()">Restart Exam</button>
</div>
<script>
const Q=[
  {
    q:"Biliary atresia is the MOST common cause of which of the following in early childhood?",
    opts:["Unconjugated hyperbilirubinaemia in neonates","Death from liver disease in early childhood","Neonatal sepsis","Hepatoblastoma","Physiologic jaundice lasting >4 weeks"],
    ans:1,
    expl:"<strong>Biliary atresia</strong> is the most frequent cause of <em>death from liver disease in early childhood</em> and accounts for approximately 50–60% of all paediatric liver transplantations. It is a fibroproliferative obliteration of the biliary tree progressing to cirrhosis and end-stage liver failure. It causes <em>conjugated</em> (direct) hyperbilirubinaemia, not unconjugated. The incidence is ~1 in 8,000–18,000 live births. — Robbins Basic Pathology; Schwartz's Principles of Surgery"
  },
  {
    q:"A 6-week-old boy presents with persistent jaundice since the 2nd week of life, pale (acholic) stools, and dark urine. Fractionated bilirubin shows conjugated hyperbilirubinaemia. Which of the following is the MOST important immediate diagnostic step?",
    opts:["Serum unconjugated bilirubin fractionation only","Blood culture and empirical antibiotics","TORCH serology, liver ultrasound, and hepatobiliary (HIDA) scintigraphy with phenobarbital pretreatment","Liver biopsy as first-line investigation","Repeat serum bilirubin in 2 weeks"],
    ans:2,
    expl:"<strong>Work-up for biliary atresia</strong> is a combination of studies since no single test is sufficiently sensitive or specific. Key steps: (1) Fractionate bilirubin (conjugated is elevated in BA); (2) TORCH titres and viral hepatitis screen; (3) Abdominal <em>ultrasound</em> (absent gallbladder is highly suggestive; intrahepatic ducts are NEVER dilated in BA); (4) <em>HIDA/IDA scan</em> (99mTc-IDA) after 5–7 days of phenobarbital — sensitivity 100%, specificity 94%. Non-excretion of tracer into the bowel confirms biliary obstruction. Liver biopsy is non-diagnostic in up to 25% and is often unnecessary. — Yamada's Gastroenterology; Schwartz's Surgery"
  },
  {
    q:"On hepatobiliary scintigraphy (HIDA scan) in biliary atresia, which finding is EXPECTED?",
    opts:["Rapid excretion of tracer into the small intestine within 30 minutes","Normal hepatic uptake with complete absence of tracer excretion into the bowel","Poor hepatic uptake and normal bowel excretion","Dilated intrahepatic bile ducts on associated ultrasound","Tracer accumulation in the gallbladder only"],
    ans:1,
    expl:"In <strong>biliary atresia</strong>, the liver uptakes the radionuclide tracer normally (hepatocytes are functional initially), but there is <em>complete absence of tracer excretion into the bowel</em> due to biliary obliteration. This is in contrast to neonatal hepatitis, where tracer is excreted into the bowel (albeit slowly). Phenobarbital pretreatment for 5–7 days enhances bilirubin conjugation and excretion, improving test specificity. Intrahepatic bile ducts are <em>never dilated</em> in biliary atresia (helps distinguish from choledochal cyst). — Yamada's Gastroenterology; Schwartz's Surgery"
  },
  {
    q:"Which of the following ultrasound findings is MOST suggestive of biliary atresia in a jaundiced neonate?",
    opts:["Dilated common bile duct >4 mm","Presence of a gallbladder with normal contractility","Absent gallbladder on fasting ultrasound","Choledochal cyst with intrahepatic ductal dilatation","Hyperechoic liver with ascites"],
    ans:2,
    expl:"<strong>Absence of the gallbladder</strong> on fasting ultrasound is <em>highly suggestive</em> of biliary atresia — most cases have complete obliteration including the gallbladder. However, ~10% of biliary atresia cases have a patent distal biliary tract, so the <em>presence</em> of a gallbladder does NOT exclude the diagnosis. Intrahepatic bile ducts are <em>never</em> dilated in biliary atresia (dilated ducts suggest choledochal cyst instead). A triangular cord sign (fibrous tissue at the porta hepatis) is also a specific ultrasound finding for biliary atresia. — Schwartz's Principles of Surgery"
  },
  {
    q:"The Kasai hepatoportoenterostomy (portoenterostomy) is the FIRST-LINE surgical treatment for biliary atresia. The procedure is based on Kasai's original observation that:",
    opts:["The porta hepatis contains a rich arterial supply allowing neo-vascularisation","Fibrous tissue at the porta hepatis invests microscopically patent biliary ductules communicating with the intrahepatic ductal system","A direct choledochoduodenostomy can restore bile flow in neonates","The gallbladder remnant can be used to reconstruct the biliary tree","Total hepatectomy with transplantation is superior to biliary reconstruction in all cases"],
    ans:1,
    expl:"<strong>Kasai's landmark observation (1959):</strong> The fibrous tissue at the porta hepatis contains <em>microscopically patent biliary ductules</em> that communicate with the intrahepatic ductal system. By transecting this fibrous tissue at the portal plate (cephalad to the portal vein bifurcation), bile flows into a surgically constructed Roux-en-Y jejunal loop (the portoenterostomy). This establishes bile drainage into the intestine. The diameter of residual bile ductules at the portal plate predicts long-term surgical success. Before Kasai's procedure, all infants with biliary atresia died of cirrhosis. — Yamada's Gastroenterology; Schwartz's Surgery; Mulholland & Greenfield's Surgery"
  },
  {
    q:"Regarding the timing of the Kasai portoenterostomy, which statement BEST reflects current evidence?",
    opts:["The operation should be delayed until the infant weighs at least 5 kg","Surgery before 60 days of life is associated with better bile drainage and long-term survival","Surgery after 120 days is equally effective as early surgery","The Kasai procedure has no benefit after 12 weeks and should be skipped in favour of transplantation","Age at surgery has no impact on outcome"],
    ans:1,
    expl:"<strong>Timing is critical</strong> in biliary atresia. Surgery performed <em>before 60 days of life</em> is associated with significantly better rates of successful bile drainage and long-term native liver survival. Delay until after 120 days is associated with progression to cirrhosis and poor outcomes. However, even beyond 12 weeks, surgery is still recommended as the alternative is certain liver failure — some patients have had favourable outcomes after late portoenterostomy. Most series show ~40–60% 5-year survival post-Kasai. — Yamada's Gastroenterology; Schwartz's Principles of Surgery"
  },
  {
    q:"Which of the following describes the HISTOPATHOLOGICAL pattern of biliary atresia on liver biopsy?",
    opts:["Macrovesicular steatosis with lobular inflammation","Periductular inflammation with fibrous deposition at portal plates; bile duct proliferation on trichrome staining","Centrilobular necrosis with cholestasis","Granulomatous destruction of bile ducts (florid duct lesion) with AMA positivity","Normal histology in most cases"],
    ans:1,
    expl:"<strong>Biliary atresia histopathology:</strong> Liver biopsy shows (1) inflammatory changes within the hepatic parenchyma; (2) <em>fibrous deposition at portal plates</em> (seen on trichrome staining); (3) bile duct proliferation (nonspecific marker of liver injury). If unrecognised, cirrhosis develops within 3–6 months. Florid duct lesions with AMA positivity are characteristic of <em>primary biliary cholangitis</em>, not biliary atresia. Macrovesicular steatosis is seen in metabolic/alcoholic liver disease. Centrilobular necrosis suggests drug toxicity or ischaemia. — Robbins Basic Pathology; Schwartz's Principles of Surgery"
  },
  {
    q:"Approximately what percentage of biliary atresia cases involve the FETAL form, and what are its distinguishing features compared to the perinatal form?",
    opts:["50% of cases; associated with viral infection at birth","20% of cases; associated with other developmental anomalies including polysplenia, intestinal malrotation, and congenital heart disease","80% of cases; occurs due to ductal plate malformation only","5% of cases; associated exclusively with CMV infection","35% of cases; linked to CFTR mutations"],
    ans:1,
    expl:"<strong>Two forms of biliary atresia:</strong> (1) <em>Fetal form (~20%)</em> — obliteration occurs in utero; commonly associated with other developmental anomalies: polysplenia, interrupted inferior vena cava, intestinal malrotation, preduodenal portal vein, and congenital heart disease. This group has the biliary atresia-splenic malformation (BASM) syndrome. (2) <em>Perinatal form (~80%)</em> — the biliary tree is normally developed at birth but is subsequently injured and obstructed; etiology is unknown but viral infection (CMV, reovirus, rotavirus) and toxic exposures are prime suspects. Up to 80% of perinatal cases may be due to cholangiotropic viral infection. — Robbins Basic Pathology; Yamada's Gastroenterology"
  },
  {
    q:"After a successful Kasai portoenterostomy, what is the MOST COMMON postoperative complication that can impede long-term success?",
    opts:["Hepatic artery thrombosis","Anastomotic leak","Ascending cholangitis","Portal vein stenosis","Bowel obstruction from adhesions"],
    ans:2,
    expl:"<strong>Ascending (postoperative) cholangitis</strong> is the most common complication after Kasai portoenterostomy. Retrograde bacterial ascent via the Roux-en-Y limb leads to recurrent episodes of cholangitis, each of which damages the intrahepatic biliary tree and accelerates hepatic fibrosis. It is an independent risk factor for procedure failure. There is no fully effective strategy to eliminate this complication, and the benefit of long-term prophylactic antibiotics remains debated. Bridging hepatic fibrosis at the time of surgery is the other key independent risk factor for failure. — Schwartz's Principles of Surgery"
  },
  {
    q:"Regarding long-term outcomes after Kasai portoenterostomy for biliary atresia, which statement is MOST ACCURATE based on registry data?",
    opts:["90% of patients are cured with no need for transplantation","Approximately one-third remain symptom-free long term, one-third require early transplantation, and one-third have slow progressive liver dysfunction eventually needing transplantation","All patients require liver transplantation within 2 years","The 10-year survival with transplantation is &lt;30%","Liver transplantation is contraindicated after a failed Kasai procedure"],
    ans:1,
    expl:"<strong>Long-term outcomes post-Kasai (based on Japanese Biliary Atresia Registry of 1381 patients):</strong> (1) ~1/3 have good long-term results — minimal/no liver dysfunction, normal growth and development; (2) ~1/3 do poorly and require early liver transplantation; (3) ~1/3 have slow progressive liver dysfunction over months to years and eventually need transplantation. The 10-year survival was 53% without transplantation and 66.7% with transplantation. 50–60% of all paediatric liver transplants are for biliary atresia. The Kasai procedure remains first-line because ~1/3 avoid transplantation entirely. — Yamada's Gastroenterology; Schwartz's Principles of Surgery"
  }
];

let answered=0, correct=0, wrong=0;

function init(){
  answered=0; correct=0; wrong=0;
  document.getElementById('pbar').style.width='0%';
  document.getElementById('s-answered').textContent='0';
  document.getElementById('s-correct').textContent='0';
  document.getElementById('s-wrong').textContent='0';
  document.getElementById('score-screen').style.display='none';
  const qc=document.getElementById('quiz');
  qc.innerHTML='';
  Q.forEach((q,i)=>{
    const opts=q.opts.map((o,j)=>{
      const L=String.fromCharCode(65+j);
      return `<li><button class="opt" id="o${i}_${j}" onclick="pick(${i},${j})"><span class="opt-lbl">${L}.</span><span>${o}</span></button></li>`;
    }).join('');
    const card=document.createElement('div');
    card.className='card'; card.id='card'+i;
    card.innerHTML=`<div class="q-meta"><span class="q-num">Question ${i+1} / ${Q.length}</span><span class="q-tag">Medium–Hard</span></div><div class="q-text">${q.q}</div><ul class="opts">${opts}</ul><div class="feedback" id="fb${i}"><div class="verdict" id="vd${i}"></div><div class="expl">${q.expl}</div></div>`;
    qc.appendChild(card);
  });
  window.scrollTo({top:0,behavior:'smooth'});
}

function pick(qi,oi){
  const q=Q[qi];
  q.opts.forEach((_,j)=>{
    document.getElementById(`o${qi}_${j}`).disabled=true;
  });
  const chosen=document.getElementById(`o${qi}_${oi}`);
  const correctBtn=document.getElementById(`o${qi}_${q.ans}`);
  const fb=document.getElementById('fb'+qi);
  const vd=document.getElementById('vd'+qi);
  if(oi===q.ans){
    chosen.classList.add('correct');
    vd.textContent='✅ Correct!'; vd.className='verdict ok';
    correct++;
    document.getElementById('s-correct').textContent=correct;
  } else {
    chosen.classList.add('wrong');
    correctBtn.classList.add('correct');
    vd.textContent='❌ Incorrect — correct answer highlighted above';
    vd.className='verdict no';
    wrong++;
    document.getElementById('s-wrong').textContent=wrong;
  }
  fb.classList.add('show');
  answered++;
  document.getElementById('s-answered').textContent=answered;
  document.getElementById('pbar').style.width=(answered/Q.length*100)+'%';
  if(answered===Q.length) setTimeout(showScore,700);
}

function showScore(){
  const sc=document.getElementById('score-screen');
  sc.style.display='block';
  document.getElementById('scoreNum').textContent=correct+'/'+Q.length;
  document.getElementById('scoreSub').textContent=`You answered ${correct} correctly and ${wrong} incorrectly.`;
  const pct=correct/Q.length*100;
  let msg='';
  if(pct===100) msg='🏆 Perfect! Outstanding knowledge of biliary atresia.';
  else if(pct>=80) msg='🌟 Excellent! Strong grasp of BA pathology and management.';
  else if(pct>=60) msg='👍 Good effort. Review the Kasai procedure and diagnostic workup.';
  else if(pct>=40) msg='📖 Fair attempt. Revisit BA pathogenesis, timing of surgery, and outcomes.';
  else msg='💪 Keep studying! Focus on Kasai procedure, HIDA scan findings, and outcomes data.';
  document.getElementById('scoreMsg').textContent=msg;
  sc.scrollIntoView({behavior:'smooth'});
}

init();
</script>
</body>
</html>

Both exams are ready! Here are your download links:

📁 Exam Files

🩺 Fistula MCQ Exam (New Set)

index

HTML File · HTML

🏥 Biliary Atresia MCQ Exam

index

HTML File · HTML

📋 What's Inside

Fistula (10 Questions)

#	Topic
1	Goodsall's Rule — posterior opening, internal site
2	Parks' classification — highest incontinence risk
3	Colovesicular fistula — single-stage surgical management
4	Pharyngocutaneous fistula — first-line conservative management
5	Complex vs simple perianal Crohn's fistula
6	Fistula First principle — correct AVF order
7	TEF Type C — most common type, classic presentation
8	3-swab dye test — VVF vs ureterovaginal fistula
9	Colovaginal fistula — pathognomonic sign
10	Carotid blowout — most feared fistula complication

Biliary Atresia (10 Questions)

#	Topic
1	BA as leading cause of liver death in childhood
2	Diagnostic workup — HIDA + ultrasound + TORCH
3	HIDA scan finding in biliary atresia
4	Ultrasound finding — absent gallbladder
5	Kasai's original observation & basis of portoenterostomy
6	Timing of Kasai — before 60 days vs after 120 days
7	Histopathology — portal plate fibrosis on trichrome
8	Fetal vs perinatal form — polysplenia syndrome
9	Most common post-Kasai complication — ascending cholangitis
10	Long-term outcomes — JBAR registry data (1/3 rule)

How it works: Click an option → ✅ green for correct / ❌ red for wrong, with the right answer highlighted + full explanation. Live score counter at the top. Final score screen at the end with performance feedback and a Restart button.

This is a shared conversation. Sign in to Orris to start your own chat.