Scheduling Decision Suite<\/title>\n <style>\n :root {\n --bg: #f4f7fb;\n --card: #ffffff;\n --text: #111827;\n --muted: #374151;\n --blue: #2563eb;\n --blueDark: #1e3a8a;\n --green: #15803d;\n --red: #b91c1c;\n --amber: #f59e0b;\n --border: rgba(17, 24, 39, 0.12);\n --shadow: 0 10px 25px rgba(0,0,0,0.10);\n }\n\n * { box-sizing: border-box; }\n\n body {\n font-family: Arial, Helvetica, sans-serif;\n background: var(--bg);\n margin: 0;\n padding: 20px;\n color: var(--text);\n }\n\n .container {\n max-width: 980px;\n margin: 0 auto;\n background: var(--card);\n border-radius: 14px;\n box-shadow: 0 10px 25px rgba(0,0,0,0.08);\n padding: 22px;\n }\n\n header {\n text-align: center;\n margin-bottom: 14px;\n }\n\n h1 {\n margin: 0;\n color: var(--blueDark);\n font-size: 26px;\n }\n\n .subtitle {\n margin: 8px 0 0;\n color: var(--muted);\n font-size: 14px;\n line-height: 1.4;\n }\n\n \/* Tabs *\/\n .tabs {\n display: flex;\n gap: 10px;\n justify-content: center;\n flex-wrap: wrap;\n margin: 16px 0 18px;\n }\n\n .tabbtn {\n padding: 10px 14px;\n border-radius: 999px;\n border: 1px solid var(--border);\n background: rgba(17,24,39,0.04);\n color: #0f172a;\n font-weight: 700;\n cursor: pointer;\n }\n\n .tabbtn[aria-selected=\"true\"] {\n background: var(--blue);\n border-color: rgba(37,99,235,0.3);\n color: #fff;\n }\n\n .panel {\n border: 1px solid var(--border);\n border-radius: 12px;\n padding: 16px;\n }\n\n .hidden { display: none; }\n\n h2 {\n margin: 0 0 10px;\n font-size: 16px;\n color: #0f172a;\n }\n\n label {\n display: block;\n font-size: 13px;\n color: var(--muted);\n margin-bottom: 6px;\n }\n\n input[type=\"text\"], select {\n width: 100%;\n padding: 12px;\n border-radius: 10px;\n border: 1px solid var(--border);\n font-size: 14px;\n background: #fff;\n }\n\n button {\n padding: 12px;\n border-radius: 10px;\n border: none;\n cursor: pointer;\n font-size: 14px;\n font-weight: 700;\n }\n\n button:focus {\n outline: 3px solid rgba(37, 99, 235, 0.35);\n outline-offset: 2px;\n }\n\n .btn-primary { background: var(--blue); color: #fff; }\n .btn-secondary { background: rgba(17,24,39,0.06); color: #0f172a; border: 1px solid var(--border); }\n .btn-green { background: var(--green); color: #fff; }\n .btn-red { background: var(--red); color: #fff; }\n .btn-amber { background: var(--amber); color: #111827; }\n\n .grid2 {\n display: grid;\n grid-template-columns: 1fr;\n gap: 16px;\n }\n\n @media (min-width: 900px) {\n .grid2 { grid-template-columns: 1fr 1fr; }\n }\n\n .result {\n border-radius: 12px;\n padding: 16px;\n margin-top: 12px;\n border: 1px solid var(--border);\n }\n\n .muted { color: var(--muted); font-size: 13px; line-height: 1.45; }\n\n .hint {\n margin-top: 10px;\n padding: 12px;\n border-left: 5px solid var(--blue);\n background: #eef2ff;\n border-radius: 10px;\n font-size: 13px;\n color: #0f172a;\n line-height: 1.45;\n }\n\n .badge {\n display: inline-block;\n padding: 6px 10px;\n border-radius: 999px;\n font-weight: 700;\n font-size: 12px;\n margin-left: 8px;\n vertical-align: middle;\n }\n\n .badge-flag {\n background: rgba(185, 28, 28, 0.12);\n color: var(--red);\n border: 1px solid rgba(185, 28, 28, 0.25);\n }\n\n .badge-ok {\n background: rgba(21, 128, 61, 0.12);\n color: var(--green);\n border: 1px solid rgba(21, 128, 61, 0.25);\n }\n\n .actions {\n margin: 0;\n padding-left: 18px;\n line-height: 1.55;\n }\n\n .row {\n display: grid;\n grid-template-columns: 1fr;\n gap: 10px;\n margin-top: 12px;\n }\n\n @media (min-width: 560px) {\n .row { grid-template-columns: 1fr 1fr; }\n }\n\n .appt {\n display: grid;\n grid-template-columns: 1fr;\n gap: 8px;\n padding: 12px;\n border-radius: 12px;\n border: 1px dashed rgba(17,24,39,0.18);\n margin-top: 10px;\n background: rgba(37,99,235,0.03);\n }\n\n .appt .title {\n font-weight: 700;\n color: #0f172a;\n font-size: 14px;\n }\n\n code {\n background: rgba(17,24,39,0.06);\n padding: 2px 6px;\n border-radius: 6px;\n }\n\n .smallnote {\n margin-top: 10px;\n font-size: 12px;\n color: var(--muted);\n }\n\n .callout {\n margin-top: 10px;\n padding: 12px;\n border-radius: 12px;\n border: 1px solid rgba(245, 158, 11, 0.35);\n background: rgba(245, 158, 11, 0.08);\n color: #0f172a;\n font-size: 13px;\n line-height: 1.45;\n }\n\n .mini {\n font-size: 12px;\n color: var(--muted);\n margin-top: 8px;\n }\n\n \/* Tutorial modal *\/\n .modal-backdrop {\n position: fixed;\n inset: 0;\n background: rgba(15, 23, 42, 0.52);\n display: none;\n align-items: center;\n justify-content: center;\n padding: 16px;\n z-index: 9999;\n }\n\n .modal {\n width: 100%;\n max-width: 860px;\n background: #fff;\n border-radius: 14px;\n box-shadow: var(--shadow);\n border: 1px solid rgba(15,23,42,0.12);\n overflow: hidden;\n }\n\n .modal-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 16px;\n background: rgba(37,99,235,0.06);\n border-bottom: 1px solid rgba(15,23,42,0.10);\n }\n\n .modal-title {\n font-weight: 800;\n color: #0f172a;\n margin: 0;\n font-size: 16px;\n }\n\n .modal-body {\n padding: 16px;\n max-height: 70vh;\n overflow: auto;\n }\n\n .modal-close {\n background: rgba(17,24,39,0.06);\n border: 1px solid var(--border);\n color: #0f172a;\n padding: 10px 12px;\n border-radius: 10px;\n cursor: pointer;\n font-weight: 800;\n }\n\n .module {\n border: 1px solid rgba(15,23,42,0.10);\n border-radius: 12px;\n padding: 14px;\n margin-bottom: 12px;\n background: #fff;\n }\n\n .module h3 {\n margin: 0 0 8px;\n font-size: 15px;\n color: #0f172a;\n }\n\n .module p {\n margin: 6px 0;\n color: var(--muted);\n font-size: 13px;\n line-height: 1.5;\n }\n\n .pillrow {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n margin-top: 10px;\n }\n\n .pill {\n border-radius: 999px;\n padding: 10px 12px;\n border: 1px solid var(--border);\n background: rgba(17,24,39,0.04);\n cursor: pointer;\n font-weight: 800;\n font-size: 13px;\n color: #0f172a;\n }\n\n .quiz {\n margin-top: 10px;\n padding: 12px;\n border-radius: 12px;\n background: rgba(37,99,235,0.04);\n border: 1px solid rgba(37,99,235,0.18);\n }\n\n .quiz .q {\n font-weight: 800;\n margin-bottom: 6px;\n color: #0f172a;\n font-size: 13px;\n }\n\n .quiz .choices {\n display: grid;\n gap: 8px;\n margin-top: 8px;\n }\n\n .choice {\n border-radius: 10px;\n padding: 10px 12px;\n border: 1px solid var(--border);\n background: #fff;\n cursor: pointer;\n font-weight: 700;\n font-size: 13px;\n color: #0f172a;\n text-align: left;\n }\n\n .choice.correct {\n border-color: rgba(21,128,61,0.35);\n background: rgba(21,128,61,0.06);\n }\n\n .choice.wrong {\n border-color: rgba(185,28,28,0.35);\n background: rgba(185,28,28,0.06);\n }\n\n .quiz-feedback {\n margin-top: 8px;\n font-size: 13px;\n color: var(--muted);\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <h1>Scheduling Decision Suite<\/h1>\n <p class=\"subtitle\">Two tools in one: <strong>Cancelled vs No Show<\/strong> and <strong>FLAGGED Patient<\/strong> decisions.<\/p>\n <\/header>\n\n <nav class=\"tabs\" role=\"tablist\" aria-label=\"Scheduling apps\">\n <button class=\"tabbtn\" id=\"tab-cn\" role=\"tab\" aria-selected=\"true\" aria-controls=\"panel-cn\" type=\"button\">Cancelled vs No Show<\/button>\n <button class=\"tabbtn\" id=\"tab-flag\" role=\"tab\" aria-selected=\"false\" aria-controls=\"panel-flag\" type=\"button\">FLAGGED Patient<\/button>\n <\/nav>\n\n \n <section id=\"panel-cn\" class=\"panel\" role=\"tabpanel\" aria-labelledby=\"tab-cn\">\n <div class=\"grid2\">\n <div>\n <h2>1) Appointment Status Decision<\/h2>\n <p class=\"muted\">Patient calls to reschedule or cancel appointment <strong>OR<\/strong> during a confirmation call.<\/p>\n\n <label for=\"cnPatient\">Patient name (optional)<\/label>\n <input id=\"cnPatient\" type=\"text\" placeholder=\"John Smith\" autocomplete=\"off\" \/>\n\n <div class=\"row\" style=\"margin-top:14px;\">\n <button class=\"btn-green\" type=\"button\" id=\"btnCancelled\">2 or More OPEN Office Days<\/button>\n <button class=\"btn-red\" type=\"button\" id=\"btnNoShow\">1 or Less OPEN Office Days<\/button>\n <\/div>\n\n <div class=\"hint\">\n <strong>Rule:<\/strong> Never move or modify appointments. Change status and create a new appointment.\n <br \/>\n <strong>ONLY exception:<\/strong> Same-day change to a different time on the <strong>same date<\/strong>.\n <br \/><br \/>\n <strong>OPEN Office Days<\/strong> = Office OPEN whether there is clinic or not (Holidays\/Closed Weekends would NOT count)\n <\/div>\n\n <div class=\"callout\">\n <strong>Tip:<\/strong> If result is <strong>No Show<\/strong>, you may need to check if the patient should be <strong>FLAGGED<\/strong>.\n Use the <strong>FLAGGED Patient<\/strong> tab to decide.\n <\/div>\n\n <div class=\"row\" style=\"margin-top:12px;\">\n <button class=\"btn-amber\" type=\"button\" id=\"cnTutorial\">Teaching Module<\/button>\n <button class=\"btn-secondary\" type=\"button\" id=\"cnGoFlag\">Go to FLAGGED Checker<\/button>\n <button class=\"btn-secondary\" type=\"button\" id=\"cnReset\">Reset<\/button>\n <\/div>\n\n <div class=\"mini\">“Go to FLAGGED Checker” will carry the patient name into the FLAGGED tab.<\/div>\n <\/div>\n\n <div>\n <h2>2) Result<\/h2>\n <div id=\"cnResult\" class=\"result\">\n <p class=\"muted\">Choose one of the buttons to see the correct steps.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"panel-flag\" class=\"panel hidden\" role=\"tabpanel\" aria-labelledby=\"tab-flag\">\n <div class=\"grid2\">\n <div>\n <h2>1) Enter patient + last 3 PAST appointment outcomes<\/h2>\n\n <div class=\"row\">\n <div>\n <label for=\"patientName\">Patient name (First Last)<\/label>\n <input id=\"patientName\" type=\"text\" placeholder=\"John Smith\" autocomplete=\"off\" \/>\n <div class=\"smallnote\">If patient becomes flagged, name will be shown with <code>--<\/code> in front of the first name.<\/div>\n <\/div>\n <div>\n <label for=\"profileAlreadyFlagged\">Is the profile already FLAGGED?<\/label>\n <select id=\"profileAlreadyFlagged\">\n <option value=\"no\" selected>No<\/option>\n <option value=\"yes\">Yes<\/option>\n <\/select>\n <div class=\"smallnote\">If already flagged: the app will show <strong>KEEP FLAGGED<\/strong> or <strong>SAFE TO UNFLAG<\/strong>.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"appt\">\n <div class=\"title\">PAST #1 (Most Recent)<\/div>\n <label for=\"past1\">Outcome<\/label>\n <select id=\"past1\">\n <option value=\"in_room\" selected>In Room \/ Seen<\/option>\n <option value=\"no_show\">No Show<\/option>\n <option value=\"cancelled\">Cancelled<\/option>\n <option value=\"other\">Other \/ Unknown \/ Blank \/ Empty<\/option>\n <\/select>\n <\/div>\n\n <div class=\"appt\">\n <div class=\"title\">PAST #2<\/div>\n <label for=\"past2\">Outcome<\/label>\n <select id=\"past2\">\n <option value=\"in_room\" selected>In Room \/ Seen<\/option>\n <option value=\"no_show\">No Show<\/option>\n <option value=\"cancelled\">Cancelled<\/option>\n <option value=\"other\">Other \/ Unknown \/ Blank \/ Empty<\/option>\n <\/select>\n <\/div>\n\n <div class=\"appt\">\n <div class=\"title\">PAST #3<\/div>\n <label for=\"past3\">Outcome<\/label>\n <select id=\"past3\">\n <option value=\"in_room\" selected>In Room \/ Seen<\/option>\n <option value=\"no_show\">No Show<\/option>\n <option value=\"cancelled\">Cancelled<\/option>\n <option value=\"other\">Other \/ Unknown \/ Blank \/ Empty<\/option>\n <\/select>\n <\/div>\n\n <div class=\"row\" style=\"margin-top:12px;\">\n <button class=\"btn-primary\" type=\"button\" id=\"evaluateBtn\">Evaluate FLAGGED Status<\/button>\n <button class=\"btn-secondary\" type=\"button\" id=\"resetBtn\">Reset<\/button>\n <\/div>\n\n <div class=\"row\" style=\"margin-top:10px;\">\n <button class=\"btn-amber\" type=\"button\" id=\"flagTutorial\">Teaching Module<\/button>\n <button class=\"btn-secondary\" type=\"button\" id=\"flagBack\">Back to Cancelled\/No Show<\/button>\n <\/div>\n\n <div class=\"hint\">\n <strong>FLAG rule:<\/strong> If ANY of the most recent 3 PAST appointments is <strong>No Show<\/strong> \u2192 FLAG (or KEEP FLAGGED).\n <br \/>\n <strong>UNFLAG rule:<\/strong> If already FLAGGED, patient can be safely UNFLAGGED ONLY if the most recent 3 PAST appointments are ALL <strong>In Room \/ Seen<\/strong>.\n <\/div>\n <\/div>\n\n <div>\n <h2>2) Result<\/h2>\n <div id=\"result\" class=\"result\">\n <p class=\"muted\">Select outcomes and click <strong>Evaluate FLAGGED Status<\/strong>.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n \n <div id=\"tutorialBackdrop\" class=\"modal-backdrop\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"tutorialTitle\">\n <div class=\"modal\">\n <div class=\"modal-header\">\n <div>\n <div id=\"tutorialTitle\" class=\"modal-title\">Teaching Module<\/div>\n <div id=\"tutorialSubtitle\" class=\"muted\" style=\"margin-top:4px;\"><\/div>\n <\/div>\n <button class=\"modal-close\" type=\"button\" id=\"tutorialClose\">Close<\/button>\n <\/div>\n <div class=\"modal-body\" id=\"tutorialBody\"><\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ ------------------------\n \/\/ Tabs\n \/\/ ------------------------\n const tabCn = document.getElementById('tab-cn');\n const tabFlag = document.getElementById('tab-flag');\n const panelCn = document.getElementById('panel-cn');\n const panelFlag = document.getElementById('panel-flag');\n\n function setTab(which) {\n const cn = which === 'cn';\n tabCn.setAttribute('aria-selected', cn ? 'true' : 'false');\n tabFlag.setAttribute('aria-selected', cn ? 'false' : 'true');\n panelCn.classList.toggle('hidden', !cn);\n panelFlag.classList.toggle('hidden', cn);\n }\n\n tabCn.addEventListener('click', () => setTab('cn'));\n tabFlag.addEventListener('click', () => setTab('flag'));\n\n \/\/ ------------------------\n \/\/ Cancelled vs No Show app\n \/\/ ------------------------\n const cnPatient = document.getElementById('cnPatient');\n const cnResult = document.getElementById('cnResult');\n\n function cnRender(type) {\n const name = (cnPatient.value || '').trim().replace(\/\\s+\/g, ' ');\n const who = name ? `<div class=\"muted\" style=\"margin-top:10px;\"><strong>Patient:<\/strong> ${name}<\/div>` : '';\n\n if (type === 'cancelled') {\n cnResult.innerHTML = `\n <h3 style=\"margin:0 0 10px;\">Result: CANCELLED <span class=\"badge badge-ok\">CANCELLED<\/span><\/h3>\n <ul class=\"actions\">\n <li>Set appointment status to <strong>CANCELLED<\/strong><\/li>\n <li>Create a <strong>NEW appointment<\/strong><\/li>\n <\/ul>\n ${who}\n `;\n cnResult.style.background = 'rgba(21, 128, 61, 0.06)';\n cnResult.style.borderColor = 'rgba(21, 128, 61, 0.35)';\n } else if (type === 'noshow') {\n cnResult.innerHTML = `\n <h3 style=\"margin:0 0 10px;\">Result: NO SHOW <span class=\"badge badge-flag\">NO SHOW<\/span><\/h3>\n <ul class=\"actions\">\n <li>Set appointment status to <strong>NO SHOW<\/strong><\/li>\n <li>Check whether patient should be <strong>FLAGGED<\/strong> (use the FLAGGED tab)<\/li>\n <li>Create a <strong>NEW appointment<\/strong><\/li>\n <li>If FLAGGED, schedule using <strong>FLAGGED<\/strong> appointment types<\/li>\n <\/ul>\n ${who}\n `;\n cnResult.style.background = 'rgba(185, 28, 28, 0.06)';\n cnResult.style.borderColor = 'rgba(185, 28, 28, 0.35)';\n } else {\n cnResult.innerHTML = '<p class=\"muted\">Choose one of the buttons to see the correct steps.<\/p>';\n cnResult.style.background = '';\n cnResult.style.borderColor = 'var(--border)';\n }\n }\n\n document.getElementById('btnCancelled').addEventListener('click', () => cnRender('cancelled'));\n document.getElementById('btnNoShow').addEventListener('click', () => cnRender('noshow'));\n document.getElementById('cnReset').addEventListener('click', () => {\n cnPatient.value = '';\n cnRender('');\n });\n\n document.getElementById('cnGoFlag').addEventListener('click', () => {\n const name = (cnPatient.value || '').trim().replace(\/\\s+\/g, ' ');\n const target = document.getElementById('patientName');\n if (name && target) target.value = name;\n setTab('flag');\n window.scrollTo({ top: 0, behavior: 'smooth' });\n });\n\n \/\/ ------------------------\n \/\/ FLAGGED Patient app\n \/\/ ------------------------\n const el = (id) => document.getElementById(id);\n\n function normalizeName(raw) {\n return (raw || '').trim().replace(\/\\s+\/g, ' ');\n }\n\n function flaggedDisplayName(name) {\n const n = normalizeName(name);\n if (!n) return '';\n if (n.startsWith('--')) return n;\n const parts = n.split(' ');\n parts[0] = `--${parts[0]}`;\n return parts.join(' ');\n }\n\n function computeShouldFlag(statuses) {\n return statuses.some(s => s === 'no_show');\n }\n\n function computeCanUnflag(statuses) {\n return statuses.every(s => s === 'in_room');\n }\n\n function renderResult({ shouldFlag, canUnflag, patientName, alreadyFlagged, statuses }) {\n const result = el('result');\n const safeName = normalizeName(patientName);\n\n let outcome;\n if (shouldFlag && alreadyFlagged === 'yes') outcome = 'keep_flagged';\n else if (shouldFlag && alreadyFlagged !== 'yes') outcome = 'flag';\n else if (alreadyFlagged === 'yes' && canUnflag) outcome = 'unflag_ok';\n else if (alreadyFlagged === 'yes' && !canUnflag) outcome = 'keep_flagged';\n else outcome = 'do_not_flag';\n\n const badgeHtml = {\n flag: '<span class=\"badge badge-flag\">FLAG REQUIRED<\/span>',\n keep_flagged: '<span class=\"badge badge-flag\">KEEP FLAGGED<\/span>',\n unflag_ok: '<span class=\"badge badge-ok\">SAFE TO UNFLAG<\/span>',\n do_not_flag: '<span class=\"badge badge-ok\">DO NOT FLAG<\/span>'\n };\n\n const titleHtml = {\n flag: `Result: FLAG Patient ${badgeHtml.flag}`,\n keep_flagged: `Result: Keep Patient FLAGGED ${badgeHtml.keep_flagged}`,\n unflag_ok: `Result: Patient can be safely Unflagged ${badgeHtml.unflag_ok}`,\n do_not_flag: `Result: Do Not Flag ${badgeHtml.do_not_flag}`\n };\n\n const actions = [];\n const displayNameIfFlag = safeName ? flaggedDisplayName(safeName) : '';\n\n if (outcome === 'flag') {\n actions.push('FLAG the patient');\n actions.push('Update profile name by adding <strong>--<\/strong> in front of the patient\\'s first name');\n actions.push('Schedule future appointments using <strong>FLAGGED<\/strong> appointment types');\n if (safeName) actions.push(`<em>Update name to:<\/em> <strong>${displayNameIfFlag}<\/strong>`);\n } else if (outcome === 'keep_flagged') {\n actions.push('Patient should <strong>REMAIN \/ BE KEPT FLAGGED<\/strong>');\n actions.push('Do <strong>NOT<\/strong> remove the <strong>--<\/strong> from the profile name');\n actions.push('Continue scheduling using <strong>FLAGGED<\/strong> appointment types');\n if (!canUnflag) actions.push('<em>Unflag is ONLY allowed when last 3 PAST are all \u201cIn Room \/ Seen.\u201d<\/em>');\n } else if (outcome === 'unflag_ok') {\n actions.push('Patient can be safely <strong>UNFLAGGED<\/strong>');\n actions.push('Remove the <strong>--<\/strong> prefix from the patient\\'s first name in the profile');\n actions.push('Schedule using non-FLAGGED appointment types going forward');\n actions.push('<em>Reason:<\/em> The most recent 3 PAST appointments are all \u201cIn Room \/ Seen.\u201d');\n } else {\n actions.push('Do <strong>NOT<\/strong> FLAG the patient');\n actions.push('Do <strong>NOT<\/strong> change profile name based on these last 3 PAST appointments');\n }\n\n const statusLabel = (v) => ({\n in_room: 'In Room \/ Seen',\n no_show: 'No Show',\n cancelled: 'Cancelled',\n other: 'Other \/ Unknown \/ Blank \/ Empty'\n }[v] || v);\n\n const summary = `\n <div class=\"muted\">\n <strong>Past outcomes used:<\/strong> #1 ${statusLabel(statuses[0])}, #2 ${statusLabel(statuses[1])}, #3 ${statusLabel(statuses[2])}\n <\/div>\n `;\n\n let nameLine = '';\n if (safeName) {\n if (outcome === 'flag') {\n nameLine = `<div class=\"muted\" style=\"margin-top:10px;\"><strong>Patient:<\/strong> ${safeName}<br\/><strong>Update name to:<\/strong> ${displayNameIfFlag}<\/div>`;\n } else {\n nameLine = `<div class=\"muted\" style=\"margin-top:10px;\"><strong>Patient:<\/strong> ${safeName}<\/div>`;\n }\n } else {\n nameLine = `<div class=\"muted\" style=\"margin-top:10px;\">(Optional) Enter a patient name to generate the correct profile name format.<\/div>`;\n }\n\n result.innerHTML = `\n <h3 style=\"margin:0 0 10px;\">${titleHtml[outcome]}<\/h3>\n ${summary}\n ${nameLine}\n <div style=\"margin-top:12px;\"><strong>Steps:<\/strong><\/div>\n <ul class=\"actions\">${actions.map(a => `<li>${a}<\/li>`).join('')}<\/ul>\n `;\n\n if (outcome === 'flag' || outcome === 'keep_flagged') {\n result.style.background = 'rgba(185, 28, 28, 0.06)';\n result.style.borderColor = 'rgba(185, 28, 28, 0.35)';\n } else {\n result.style.background = 'rgba(21, 128, 61, 0.06)';\n result.style.borderColor = 'rgba(21, 128, 61, 0.35)';\n }\n }\n\n function evaluate() {\n const patientName = el('patientName').value;\n const alreadyFlagged = el('profileAlreadyFlagged').value;\n const statuses = [el('past1').value, el('past2').value, el('past3').value];\n const shouldFlag = computeShouldFlag(statuses);\n const canUnflag = computeCanUnflag(statuses);\n renderResult({ shouldFlag, canUnflag, patientName, alreadyFlagged, statuses });\n }\n\n function resetAll() {\n el('patientName').value = '';\n el('profileAlreadyFlagged').value = 'no';\n el('past1').value = 'in_room';\n el('past2').value = 'in_room';\n el('past3').value = 'in_room';\n const result = el('result');\n result.innerHTML = '<p class=\"muted\">Select outcomes and click <strong>Evaluate FLAGGED Status<\/strong>.<\/p>';\n result.style.background = '';\n result.style.borderColor = 'var(--border)';\n }\n\n el('evaluateBtn').addEventListener('click', evaluate);\n el('resetBtn').addEventListener('click', resetAll);\n document.getElementById('flagBack').addEventListener('click', () => setTab('cn'));\n\n \/\/ ------------------------\n \/\/ Teaching Modules \/ Tutorial\n \/\/ ------------------------\n const tutorialBackdrop = document.getElementById('tutorialBackdrop');\n const tutorialTitle = document.getElementById('tutorialTitle');\n const tutorialSubtitle = document.getElementById('tutorialSubtitle');\n const tutorialBody = document.getElementById('tutorialBody');\n\n function openTutorial(which) {\n const content = getTutorialContent(which);\n tutorialTitle.textContent = content.title;\n tutorialSubtitle.textContent = content.subtitle;\n tutorialBody.innerHTML = content.bodyHtml;\n tutorialBackdrop.style.display = 'flex';\n document.getElementById('tutorialClose').focus();\n if (which === 'cn') {\n wireQuiz('quiz-cn-1', 1, 'Correct: Friday \u2192 Monday is 1 or less OPEN Office Day before, so mark as No Show.', 'Not quite. Friday \u2192 Monday is treated as 1 or less OPEN Office Day, so it is No Show.');\n } else {\n wireQuiz('quiz-flag-1', 1, 'Correct: Not all 3 are Seen, so patient must remain\/keep flagged.', 'Not quite. Unflag requires all 3 PAST to be Seen.');\n }\n }\n\n function closeTutorial() {\n tutorialBackdrop.style.display = 'none';\n tutorialBody.innerHTML = '';\n }\n\n document.getElementById('tutorialClose').addEventListener('click', closeTutorial);\n tutorialBackdrop.addEventListener('click', (e) => { if (e.target === tutorialBackdrop) closeTutorial(); });\n document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && tutorialBackdrop.style.display === 'flex') closeTutorial(); });\n\n document.getElementById('cnTutorial').addEventListener('click', () => openTutorial('cn'));\n document.getElementById('flagTutorial').addEventListener('click', () => openTutorial('flag'));\n\n function practiceCn(type, name) {\n setTab('cn');\n cnPatient.value = name || 'John Smith';\n cnRender(type);\n closeTutorial();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n\n function practiceFlag(opts) {\n const o = opts || {};\n setTab('flag');\n el('patientName').value = o.name || 'John Smith';\n el('profileAlreadyFlagged').value = o.alreadyFlagged || 'no';\n el('past1').value = o.past1 || 'in_room';\n el('past2').value = o.past2 || 'in_room';\n el('past3').value = o.past3 || 'in_room';\n evaluate();\n closeTutorial();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n\n function wireQuiz(containerId, correctIndex, feedbackCorrect, feedbackWrong) {\n const root = document.getElementById(containerId);\n if (!root) return;\n const choices = Array.from(root.querySelectorAll('[data-choice]'));\n const fb = root.querySelector('.quiz-feedback');\n choices.forEach((btn, idx) => {\n btn.addEventListener('click', () => {\n choices.forEach(c => c.classList.remove('correct','wrong'));\n if (idx === correctIndex) {\n btn.classList.add('correct');\n if (fb) fb.textContent = feedbackCorrect;\n } else {\n btn.classList.add('wrong');\n if (fb) fb.textContent = feedbackWrong;\n }\n });\n });\n }\n\n function getTutorialContent(which) {\n if (which === 'cn') {\n return {\n title: 'Teaching Module: Cancelled vs No Show',\n subtitle: 'Goal: Pick the correct status, then ALWAYS create a new appointment (with the same-date exception).',\n bodyHtml: `\n <div class=\"module\">\n <h3>Module 1 \u2014 The Trigger<\/h3>\n <p>This workflow is used when a patient calls to reschedule\/cancel OR during confirmation calls.<\/p>\n <p><strong>Never move appointments.<\/strong> Change the status and create a new appointment.<\/p>\n <p><strong>Only exception:<\/strong> you may move the time <em>only<\/em> if it stays on the <strong>same date<\/strong>.<\/p>\n <\/div>\n <div class=\"module\">\n <h3>Module 2 \u2014 Decide by OPEN Office Days<\/h3>\n <p><strong>2 or more OPEN Office Days<\/strong> before the appointment \u2192 set status to <strong>Cancelled<\/strong>.<\/p>\n <p><strong>1 or less OPEN Office Days<\/strong> before the appointment \u2192 set status to <strong>No Show<\/strong>.<\/p>\n <p><strong>OPEN Office Days<\/strong> = office open whether there is clinic or not. Holidays\/closed weekends do not count.<\/p>\n <\/div>\n <div class=\"module\">\n <h3>Module 3 \u2014 Practice Scenarios (click one)<\/h3>\n <p>These buttons will auto-fill and show the correct result in the app.<\/p>\n <div class=\"pillrow\">\n <button class=\"pill\" type=\"button\" onclick=\"practiceCn('cancelled','John Smith')\">Scenario A: 2+ OPEN Office Days \u2192 Cancelled<\/button>\n <button class=\"pill\" type=\"button\" onclick=\"practiceCn('noshow','John Smith')\">Scenario B: 1 or less OPEN Office Days \u2192 No Show<\/button>\n <\/div>\n <p class=\"mini\">After a <strong>No Show<\/strong>, switch to the FLAGGED module to evaluate if the patient should be FLAGGED.<\/p>\n <\/div>\n <div class=\"module quiz\" id=\"quiz-cn-1\">\n <div class=\"q\">Quick Check: A patient calls Friday to reschedule a Monday appointment. Is this Cancelled or No Show?<\/div>\n <div class=\"choices\">\n <button class=\"choice\" data-choice type=\"button\">Cancelled<\/button>\n <button class=\"choice\" data-choice type=\"button\">No Show<\/button>\n <\/div>\n <div class=\"quiz-feedback\">Click an answer.<\/div>\n <\/div>\n <div class=\"module\">\n <h3>Common Mistakes<\/h3>\n <ul class=\"actions\">\n <li>Moving an appointment instead of cancelling\/no-showing it (not allowed).<\/li>\n <li>Counting holidays\/weekends as OPEN office days (do not count).<\/li>\n <li>Forgetting to create a NEW appointment after changing status.<\/li>\n <\/ul>\n <\/div>\n `\n };\n }\n\n return {\n title: 'Teaching Module: FLAGGED Patient Decision',\n subtitle: 'Goal: Use ONLY the most recent 3 PAST appointments to decide FLAG \/ KEEP FLAGGED \/ SAFE TO UNFLAG.',\n bodyHtml: `\n <div class=\"module\">\n <h3>Module 1 \u2014 What to Look At (PAST Only)<\/h3>\n <p>Only use the <strong>PAST<\/strong> section. Ignore upcoming appointments.<\/p>\n <p>Review the <strong>most recent 3<\/strong> past appointments ONLY.<\/p>\n <\/div>\n <div class=\"module\">\n <h3>Module 2 \u2014 The Rules<\/h3>\n <p><strong>FLAG rule:<\/strong> If <strong>ANY<\/strong> of the most recent 3 PAST appointments is <strong>No Show<\/strong> \u2192 FLAG (or KEEP FLAGGED if already flagged).<\/p>\n <p><strong>UNFLAG rule:<\/strong> Only safe to unflag if the most recent 3 PAST appointments are ALL <strong>In Room \/ Seen<\/strong>.<\/p>\n <p><strong>Cancelled<\/strong> and <strong>Other \/ Unknown \/ Blank \/ Empty<\/strong> do not count as No Show, but they <strong>block<\/strong> unflagging.<\/p>\n <\/div>\n <div class=\"module\">\n <h3>Module 3 \u2014 Practice Scenarios (click one)<\/h3>\n <p>These buttons will auto-fill the last 3 PAST outcomes and show the correct result.<\/p>\n <div class=\"pillrow\">\n <button class=\"pill\" type=\"button\" onclick=\"practiceFlag({name:'John Smith',alreadyFlagged:'no',past1:'no_show',past2:'in_room',past3:'in_room'})\">Scenario A: Not flagged + No Show in last 3 \u2192 FLAG<\/button>\n <button class=\"pill\" type=\"button\" onclick=\"practiceFlag({name:'John Smith',alreadyFlagged:'yes',past1:'no_show',past2:'in_room',past3:'in_room'})\">Scenario B: Already flagged + No Show \u2192 KEEP FLAGGED<\/button>\n <button class=\"pill\" type=\"button\" onclick=\"practiceFlag({name:'John Smith',alreadyFlagged:'yes',past1:'in_room',past2:'in_room',past3:'in_room'})\">Scenario C: Already flagged + 3 Seen \u2192 SAFE TO UNFLAG<\/button>\n <button class=\"pill\" type=\"button\" onclick=\"practiceFlag({name:'John Smith',alreadyFlagged:'yes',past1:'in_room',past2:'cancelled',past3:'in_room'})\">Scenario D: Already flagged + not all Seen \u2192 KEEP FLAGGED<\/button>\n <\/div>\n <\/div>\n <div class=\"module quiz\" id=\"quiz-flag-1\">\n <div class=\"q\">Quick Check: Patient is already FLAGGED. Last 3 PAST are Seen \/ Cancelled \/ Seen. What is the correct result?<\/div>\n <div class=\"choices\">\n <button class=\"choice\" data-choice type=\"button\">SAFE TO UNFLAG<\/button>\n <button class=\"choice\" data-choice type=\"button\">KEEP FLAGGED<\/button>\n <button class=\"choice\" data-choice type=\"button\">FLAG Patient<\/button>\n <\/div>\n <div class=\"quiz-feedback\">Click an answer.<\/div>\n <\/div>\n <div class=\"module\">\n <h3>Common Mistakes<\/h3>\n <ul class=\"actions\">\n <li>Using upcoming appointments to decide flagged status (not allowed).<\/li>\n <li>Unflagging without 3 consecutive \u201cIn Room \/ Seen\u201d in the most recent 3 PAST appointments.<\/li>\n <li>Treating Cancelled as a No Show (it is not).<\/li>\n <\/ul>\n <\/div>\n `\n };\n }\n\n \/\/ ------------------------\n \/\/ Tests\n \/\/ ------------------------\n (function runTests() {\n try {\n console.assert(typeof setTab === 'function', 'Test: setTab should exist');\n console.assert(typeof cnRender === 'function', 'Test: cnRender should exist');\n console.assert(typeof computeShouldFlag === 'function', 'Test: computeShouldFlag should exist');\n console.assert(typeof computeCanUnflag === 'function', 'Test: computeCanUnflag should exist');\n console.assert(typeof evaluate === 'function', 'Test: evaluate should exist');\n console.assert(typeof openTutorial === 'function', 'Test: openTutorial should exist');\n console.assert(typeof getTutorialContent === 'function', 'Test: getTutorialContent should exist');\n\n console.assert(computeShouldFlag(['in_room','in_room','in_room']) === false, 'Test: no no-shows => do not flag');\n console.assert(computeCanUnflag(['in_room','in_room','in_room']) === true, 'Test: all in_room => can unflag');\n console.assert(computeCanUnflag(['in_room','cancelled','in_room']) === false, 'Test: cancelled breaks unflag eligibility');\n console.assert(computeCanUnflag(['in_room','other','in_room']) === false, 'Test: other breaks unflag eligibility');\n console.assert(computeCanUnflag(['in_room','no_show','in_room']) === false, 'Test: no_show breaks unflag eligibility');\n\n console.assert(computeShouldFlag(['no_show','in_room','in_room']) === true, 'Test: no_show in #1 => flag');\n console.assert(computeShouldFlag(['in_room','no_show','in_room']) === true, 'Test: no_show in #2 => flag');\n console.assert(computeShouldFlag(['in_room','in_room','no_show']) === true, 'Test: no_show in #3 => flag');\n\n console.assert(flaggedDisplayName('John Smith') === '--John Smith', 'Test: prefix first token');\n console.assert(flaggedDisplayName('--John Smith') === '--John Smith', 'Test: keep existing prefix');\n console.assert(flaggedDisplayName(' John A. Smith ') === '--John A. Smith', 'Test: normalize spaces + prefix');\n console.assert(flaggedDisplayName('') === '', 'Test: empty name stays empty');\n\n const cnT = getTutorialContent('cn');\n const flT = getTutorialContent('flag');\n console.assert(!!cnT && !!flT, 'Test: tutorial content objects exist');\n console.assert(typeof cnT.bodyHtml === 'string' && cnT.bodyHtml.length > 50, 'Test: cn tutorial body populated');\n console.assert(typeof flT.bodyHtml === 'string' && flT.bodyHtml.length > 50, 'Test: flag tutorial body populated');\n } catch (e) {\n console.error('Tests encountered an error:', e);\n }\n })();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Scheduling Decision Suite Scheduling Decision Suite Two tools in one: Cancelled vs No Show and FLAGGED Patient decisions. Cancelled vs No Show FLAGGED Patient 1) Appointment Status Decision Patient calls to reschedule or cancel appointment OR during a confirmation call. Patient name (optional) 2 or More OPEN Office Days 1 or Less OPEN Office Days […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mybadtoe.com\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mybadtoe.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mybadtoe.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mybadtoe.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mybadtoe.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":5,"href":"https:\/\/mybadtoe.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/mybadtoe.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/mybadtoe.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":10,"date":"2026-01-07T05:25:58","date_gmt":"2026-01-07T05:25:58","guid":{"rendered":"https:\/\/mybadtoe.com\/?page_id=10"},"modified":"2026-01-07T05:40:45","modified_gmt":"2026-01-07T05:40:45","slug":"10-2","status":"publish","type":"page","link":"https:\/\/mybadtoe.com\/?page_id=10","title":{"rendered":""},"content":{"rendered":"\n

<\/p>\n\n\n\n\n\n\n \n \n Scheduling Decision Suite<\/title>\n <style>\n :root {\n --bg: #f4f7fb;\n --card: #ffffff;\n --text: #111827;\n --muted: #374151;\n --blue: #2563eb;\n --blueDark: #1e3a8a;\n --green: #15803d;\n --red: #b91c1c;\n --amber: #f59e0b;\n --border: rgba(17, 24, 39, 0.12);\n --shadow: 0 10px 25px rgba(0,0,0,0.10);\n }\n\n * { box-sizing: border-box; }\n\n body {\n font-family: Arial, Helvetica, sans-serif;\n background: var(--bg);\n margin: 0;\n padding: 20px;\n color: var(--text);\n }\n\n .container {\n max-width: 980px;\n margin: 0 auto;\n background: var(--card);\n border-radius: 14px;\n box-shadow: 0 10px 25px rgba(0,0,0,0.08);\n padding: 22px;\n }\n\n header {\n text-align: center;\n margin-bottom: 14px;\n }\n\n h1 {\n margin: 0;\n color: var(--blueDark);\n font-size: 26px;\n }\n\n .subtitle {\n margin: 8px 0 0;\n color: var(--muted);\n font-size: 14px;\n line-height: 1.4;\n }\n\n \/* Tabs *\/\n .tabs {\n display: flex;\n gap: 10px;\n justify-content: center;\n flex-wrap: wrap;\n margin: 16px 0 18px;\n }\n\n .tabbtn {\n padding: 10px 14px;\n border-radius: 999px;\n border: 1px solid var(--border);\n background: rgba(17,24,39,0.04);\n color: #0f172a;\n font-weight: 700;\n cursor: pointer;\n }\n\n .tabbtn[aria-selected=\"true\"] {\n background: var(--blue);\n border-color: rgba(37,99,235,0.3);\n color: #fff;\n }\n\n .panel {\n border: 1px solid var(--border);\n border-radius: 12px;\n padding: 16px;\n }\n\n .hidden { display: none; }\n\n h2 {\n margin: 0 0 10px;\n font-size: 16px;\n color: #0f172a;\n }\n\n label {\n display: block;\n font-size: 13px;\n color: var(--muted);\n margin-bottom: 6px;\n }\n\n input[type=\"text\"], select {\n width: 100%;\n padding: 12px;\n border-radius: 10px;\n border: 1px solid var(--border);\n font-size: 14px;\n background: #fff;\n }\n\n button {\n padding: 12px;\n border-radius: 10px;\n border: none;\n cursor: pointer;\n font-size: 14px;\n font-weight: 700;\n }\n\n button:focus {\n outline: 3px solid rgba(37, 99, 235, 0.35);\n outline-offset: 2px;\n }\n\n .btn-primary { background: var(--blue); color: #fff; }\n .btn-secondary { background: rgba(17,24,39,0.06); color: #0f172a; border: 1px solid var(--border); }\n .btn-green { background: var(--green); color: #fff; }\n .btn-red { background: var(--red); color: #fff; }\n .btn-amber { background: var(--amber); color: #111827; }\n\n .grid2 {\n display: grid;\n grid-template-columns: 1fr;\n gap: 16px;\n }\n\n @media (min-width: 900px) {\n .grid2 { grid-template-columns: 1fr 1fr; }\n }\n\n .result {\n border-radius: 12px;\n padding: 16px;\n margin-top: 12px;\n border: 1px solid var(--border);\n }\n\n .muted { color: var(--muted); font-size: 13px; line-height: 1.45; }\n\n .hint {\n margin-top: 10px;\n padding: 12px;\n border-left: 5px solid var(--blue);\n background: #eef2ff;\n border-radius: 10px;\n font-size: 13px;\n color: #0f172a;\n line-height: 1.45;\n }\n\n .badge {\n display: inline-block;\n padding: 6px 10px;\n border-radius: 999px;\n font-weight: 700;\n font-size: 12px;\n margin-left: 8px;\n vertical-align: middle;\n }\n\n .badge-flag {\n background: rgba(185, 28, 28, 0.12);\n color: var(--red);\n border: 1px solid rgba(185, 28, 28, 0.25);\n }\n\n .badge-ok {\n background: rgba(21, 128, 61, 0.12);\n color: var(--green);\n border: 1px solid rgba(21, 128, 61, 0.25);\n }\n\n .actions {\n margin: 0;\n padding-left: 18px;\n line-height: 1.55;\n }\n\n .row {\n display: grid;\n grid-template-columns: 1fr;\n gap: 10px;\n margin-top: 12px;\n }\n\n @media (min-width: 560px) {\n .row { grid-template-columns: 1fr 1fr; }\n }\n\n .appt {\n display: grid;\n grid-template-columns: 1fr;\n gap: 8px;\n padding: 12px;\n border-radius: 12px;\n border: 1px dashed rgba(17,24,39,0.18);\n margin-top: 10px;\n background: rgba(37,99,235,0.03);\n }\n\n .appt .title {\n font-weight: 700;\n color: #0f172a;\n font-size: 14px;\n }\n\n code {\n background: rgba(17,24,39,0.06);\n padding: 2px 6px;\n border-radius: 6px;\n }\n\n .smallnote {\n margin-top: 10px;\n font-size: 12px;\n color: var(--muted);\n }\n\n .callout {\n margin-top: 10px;\n padding: 12px;\n border-radius: 12px;\n border: 1px solid rgba(245, 158, 11, 0.35);\n background: rgba(245, 158, 11, 0.08);\n color: #0f172a;\n font-size: 13px;\n line-height: 1.45;\n }\n\n .mini {\n font-size: 12px;\n color: var(--muted);\n margin-top: 8px;\n }\n\n \/* Tutorial modal *\/\n .modal-backdrop {\n position: fixed;\n inset: 0;\n background: rgba(15, 23, 42, 0.52);\n display: none;\n align-items: center;\n justify-content: center;\n padding: 16px;\n z-index: 9999;\n }\n\n .modal {\n width: 100%;\n max-width: 860px;\n background: #fff;\n border-radius: 14px;\n box-shadow: var(--shadow);\n border: 1px solid rgba(15,23,42,0.12);\n overflow: hidden;\n }\n\n .modal-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 16px;\n background: rgba(37,99,235,0.06);\n border-bottom: 1px solid rgba(15,23,42,0.10);\n }\n\n .modal-title {\n font-weight: 800;\n color: #0f172a;\n margin: 0;\n font-size: 16px;\n }\n\n .modal-body {\n padding: 16px;\n max-height: 70vh;\n overflow: auto;\n }\n\n .modal-close {\n background: rgba(17,24,39,0.06);\n border: 1px solid var(--border);\n color: #0f172a;\n padding: 10px 12px;\n border-radius: 10px;\n cursor: pointer;\n font-weight: 800;\n }\n\n .module {\n border: 1px solid rgba(15,23,42,0.10);\n border-radius: 12px;\n padding: 14px;\n margin-bottom: 12px;\n background: #fff;\n }\n\n .module h3 {\n margin: 0 0 8px;\n font-size: 15px;\n color: #0f172a;\n }\n\n .module p {\n margin: 6px 0;\n color: var(--muted);\n font-size: 13px;\n line-height: 1.5;\n }\n\n .pillrow {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n margin-top: 10px;\n }\n\n .pill {\n border-radius: 999px;\n padding: 10px 12px;\n border: 1px solid var(--border);\n background: rgba(17,24,39,0.04);\n cursor: pointer;\n font-weight: 800;\n font-size: 13px;\n color: #0f172a;\n }\n\n .quiz {\n margin-top: 10px;\n padding: 12px;\n border-radius: 12px;\n background: rgba(37,99,235,0.04);\n border: 1px solid rgba(37,99,235,0.18);\n }\n\n .quiz .q {\n font-weight: 800;\n margin-bottom: 6px;\n color: #0f172a;\n font-size: 13px;\n }\n\n .quiz .choices {\n display: grid;\n gap: 8px;\n margin-top: 8px;\n }\n\n .choice {\n border-radius: 10px;\n padding: 10px 12px;\n border: 1px solid var(--border);\n background: #fff;\n cursor: pointer;\n font-weight: 700;\n font-size: 13px;\n color: #0f172a;\n text-align: left;\n }\n\n .choice.correct {\n border-color: rgba(21,128,61,0.35);\n background: rgba(21,128,61,0.06);\n }\n\n .choice.wrong {\n border-color: rgba(185,28,28,0.35);\n background: rgba(185,28,28,0.06);\n }\n\n .quiz-feedback {\n margin-top: 8px;\n font-size: 13px;\n color: var(--muted);\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <h1>Scheduling Decision Suite<\/h1>\n <p class=\"subtitle\">Two tools in one: <strong>Cancelled vs No Show<\/strong> and <strong>FLAGGED Patient<\/strong> decisions.<\/p>\n <\/header>\n\n <nav class=\"tabs\" role=\"tablist\" aria-label=\"Scheduling apps\">\n <button class=\"tabbtn\" id=\"tab-cn\" role=\"tab\" aria-selected=\"true\" aria-controls=\"panel-cn\" type=\"button\">Cancelled vs No Show<\/button>\n <button class=\"tabbtn\" id=\"tab-flag\" role=\"tab\" aria-selected=\"false\" aria-controls=\"panel-flag\" type=\"button\">FLAGGED Patient<\/button>\n <\/nav>\n\n \n <section id=\"panel-cn\" class=\"panel\" role=\"tabpanel\" aria-labelledby=\"tab-cn\">\n <div class=\"grid2\">\n <div>\n <h2>1) Appointment Status Decision<\/h2>\n <p class=\"muted\">Patient calls to reschedule or cancel appointment <strong>OR<\/strong> during a confirmation call.<\/p>\n\n <label for=\"cnPatient\">Patient name (optional)<\/label>\n <input id=\"cnPatient\" type=\"text\" placeholder=\"John Smith\" autocomplete=\"off\" \/>\n\n <div class=\"row\" style=\"margin-top:14px;\">\n <button class=\"btn-green\" type=\"button\" id=\"btnCancelled\">2 or More OPEN Office Days<\/button>\n <button class=\"btn-red\" type=\"button\" id=\"btnNoShow\">1 or Less OPEN Office Days<\/button>\n <\/div>\n\n <div class=\"hint\">\n <strong>Rule:<\/strong> Never move or modify appointments. Change status and create a new appointment.\n <br \/>\n <strong>ONLY exception:<\/strong> Same-day change to a different time on the <strong>same date<\/strong>.\n <br \/><br \/>\n <strong>OPEN Office Days<\/strong> = Office OPEN whether there is clinic or not (Holidays\/Closed Weekends would NOT count)\n <\/div>\n\n <div class=\"callout\">\n <strong>Tip:<\/strong> If result is <strong>No Show<\/strong>, you may need to check if the patient should be <strong>FLAGGED<\/strong>.\n Use the <strong>FLAGGED Patient<\/strong> tab to decide.\n <\/div>\n\n <div class=\"row\" style=\"margin-top:12px;\">\n <button class=\"btn-amber\" type=\"button\" id=\"cnTutorial\">Teaching Module<\/button>\n <button class=\"btn-secondary\" type=\"button\" id=\"cnGoFlag\">Go to FLAGGED Checker<\/button>\n <button class=\"btn-secondary\" type=\"button\" id=\"cnReset\">Reset<\/button>\n <\/div>\n\n <div class=\"mini\">“Go to FLAGGED Checker” will carry the patient name into the FLAGGED tab.<\/div>\n <\/div>\n\n <div>\n <h2>2) Result<\/h2>\n <div id=\"cnResult\" class=\"result\">\n <p class=\"muted\">Choose one of the buttons to see the correct steps.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"panel-flag\" class=\"panel hidden\" role=\"tabpanel\" aria-labelledby=\"tab-flag\">\n <div class=\"grid2\">\n <div>\n <h2>1) Enter patient + last 3 PAST appointment outcomes<\/h2>\n\n <div class=\"row\">\n <div>\n <label for=\"patientName\">Patient name (First Last)<\/label>\n <input id=\"patientName\" type=\"text\" placeholder=\"John Smith\" autocomplete=\"off\" \/>\n <div class=\"smallnote\">If patient becomes flagged, name will be shown with <code>--<\/code> in front of the first name.<\/div>\n <\/div>\n <div>\n <label for=\"profileAlreadyFlagged\">Is the profile already FLAGGED?<\/label>\n <select id=\"profileAlreadyFlagged\">\n <option value=\"no\" selected>No<\/option>\n <option value=\"yes\">Yes<\/option>\n <\/select>\n <div class=\"smallnote\">If already flagged: the app will show <strong>KEEP FLAGGED<\/strong> or <strong>SAFE TO UNFLAG<\/strong>.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"appt\">\n <div class=\"title\">PAST #1 (Most Recent)<\/div>\n <label for=\"past1\">Outcome<\/label>\n <select id=\"past1\">\n <option value=\"in_room\" selected>In Room \/ Seen<\/option>\n <option value=\"no_show\">No Show<\/option>\n <option value=\"cancelled\">Cancelled<\/option>\n <option value=\"other\">Other \/ Unknown \/ Blank \/ Empty<\/option>\n <\/select>\n <\/div>\n\n <div class=\"appt\">\n <div class=\"title\">PAST #2<\/div>\n <label for=\"past2\">Outcome<\/label>\n <select id=\"past2\">\n <option value=\"in_room\" selected>In Room \/ Seen<\/option>\n <option value=\"no_show\">No Show<\/option>\n <option value=\"cancelled\">Cancelled<\/option>\n <option value=\"other\">Other \/ Unknown \/ Blank \/ Empty<\/option>\n <\/select>\n <\/div>\n\n <div class=\"appt\">\n <div class=\"title\">PAST #3<\/div>\n <label for=\"past3\">Outcome<\/label>\n <select id=\"past3\">\n <option value=\"in_room\" selected>In Room \/ Seen<\/option>\n <option value=\"no_show\">No Show<\/option>\n <option value=\"cancelled\">Cancelled<\/option>\n <option value=\"other\">Other \/ Unknown \/ Blank \/ Empty<\/option>\n <\/select>\n <\/div>\n\n <div class=\"row\" style=\"margin-top:12px;\">\n <button class=\"btn-primary\" type=\"button\" id=\"evaluateBtn\">Evaluate FLAGGED Status<\/button>\n <button class=\"btn-secondary\" type=\"button\" id=\"resetBtn\">Reset<\/button>\n <\/div>\n\n <div class=\"row\" style=\"margin-top:10px;\">\n <button class=\"btn-amber\" type=\"button\" id=\"flagTutorial\">Teaching Module<\/button>\n <button class=\"btn-secondary\" type=\"button\" id=\"flagBack\">Back to Cancelled\/No Show<\/button>\n <\/div>\n\n <div class=\"hint\">\n <strong>FLAG rule:<\/strong> If ANY of the most recent 3 PAST appointments is <strong>No Show<\/strong> \u2192 FLAG (or KEEP FLAGGED).\n <br \/>\n <strong>UNFLAG rule:<\/strong> If already FLAGGED, patient can be safely UNFLAGGED ONLY if the most recent 3 PAST appointments are ALL <strong>In Room \/ Seen<\/strong>.\n <\/div>\n <\/div>\n\n <div>\n <h2>2) Result<\/h2>\n <div id=\"result\" class=\"result\">\n <p class=\"muted\">Select outcomes and click <strong>Evaluate FLAGGED Status<\/strong>.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n \n <div id=\"tutorialBackdrop\" class=\"modal-backdrop\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"tutorialTitle\">\n <div class=\"modal\">\n <div class=\"modal-header\">\n <div>\n <div id=\"tutorialTitle\" class=\"modal-title\">Teaching Module<\/div>\n <div id=\"tutorialSubtitle\" class=\"muted\" style=\"margin-top:4px;\"><\/div>\n <\/div>\n <button class=\"modal-close\" type=\"button\" id=\"tutorialClose\">Close<\/button>\n <\/div>\n <div class=\"modal-body\" id=\"tutorialBody\"><\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ ------------------------\n \/\/ Tabs\n \/\/ ------------------------\n const tabCn = document.getElementById('tab-cn');\n const tabFlag = document.getElementById('tab-flag');\n const panelCn = document.getElementById('panel-cn');\n const panelFlag = document.getElementById('panel-flag');\n\n function setTab(which) {\n const cn = which === 'cn';\n tabCn.setAttribute('aria-selected', cn ? 'true' : 'false');\n tabFlag.setAttribute('aria-selected', cn ? 'false' : 'true');\n panelCn.classList.toggle('hidden', !cn);\n panelFlag.classList.toggle('hidden', cn);\n }\n\n tabCn.addEventListener('click', () => setTab('cn'));\n tabFlag.addEventListener('click', () => setTab('flag'));\n\n \/\/ ------------------------\n \/\/ Cancelled vs No Show app\n \/\/ ------------------------\n const cnPatient = document.getElementById('cnPatient');\n const cnResult = document.getElementById('cnResult');\n\n function cnRender(type) {\n const name = (cnPatient.value || '').trim().replace(\/\\s+\/g, ' ');\n const who = name ? `<div class=\"muted\" style=\"margin-top:10px;\"><strong>Patient:<\/strong> ${name}<\/div>` : '';\n\n if (type === 'cancelled') {\n cnResult.innerHTML = `\n <h3 style=\"margin:0 0 10px;\">Result: CANCELLED <span class=\"badge badge-ok\">CANCELLED<\/span><\/h3>\n <ul class=\"actions\">\n <li>Set appointment status to <strong>CANCELLED<\/strong><\/li>\n <li>Create a <strong>NEW appointment<\/strong><\/li>\n <\/ul>\n ${who}\n `;\n cnResult.style.background = 'rgba(21, 128, 61, 0.06)';\n cnResult.style.borderColor = 'rgba(21, 128, 61, 0.35)';\n } else if (type === 'noshow') {\n cnResult.innerHTML = `\n <h3 style=\"margin:0 0 10px;\">Result: NO SHOW <span class=\"badge badge-flag\">NO SHOW<\/span><\/h3>\n <ul class=\"actions\">\n <li>Set appointment status to <strong>NO SHOW<\/strong><\/li>\n <li>Check whether patient should be <strong>FLAGGED<\/strong> (use the FLAGGED tab)<\/li>\n <li>Create a <strong>NEW appointment<\/strong><\/li>\n <li>If FLAGGED, schedule using <strong>FLAGGED<\/strong> appointment types<\/li>\n <\/ul>\n ${who}\n `;\n cnResult.style.background = 'rgba(185, 28, 28, 0.06)';\n cnResult.style.borderColor = 'rgba(185, 28, 28, 0.35)';\n } else {\n cnResult.innerHTML = '<p class=\"muted\">Choose one of the buttons to see the correct steps.<\/p>';\n cnResult.style.background = '';\n cnResult.style.borderColor = 'var(--border)';\n }\n }\n\n document.getElementById('btnCancelled').addEventListener('click', () => cnRender('cancelled'));\n document.getElementById('btnNoShow').addEventListener('click', () => cnRender('noshow'));\n document.getElementById('cnReset').addEventListener('click', () => {\n cnPatient.value = '';\n cnRender('');\n });\n\n document.getElementById('cnGoFlag').addEventListener('click', () => {\n const name = (cnPatient.value || '').trim().replace(\/\\s+\/g, ' ');\n const target = document.getElementById('patientName');\n if (name && target) target.value = name;\n setTab('flag');\n window.scrollTo({ top: 0, behavior: 'smooth' });\n });\n\n \/\/ ------------------------\n \/\/ FLAGGED Patient app\n \/\/ ------------------------\n const el = (id) => document.getElementById(id);\n\n function normalizeName(raw) {\n return (raw || '').trim().replace(\/\\s+\/g, ' ');\n }\n\n function flaggedDisplayName(name) {\n const n = normalizeName(name);\n if (!n) return '';\n if (n.startsWith('--')) return n;\n const parts = n.split(' ');\n parts[0] = `--${parts[0]}`;\n return parts.join(' ');\n }\n\n function computeShouldFlag(statuses) {\n return statuses.some(s => s === 'no_show');\n }\n\n function computeCanUnflag(statuses) {\n return statuses.every(s => s === 'in_room');\n }\n\n function renderResult({ shouldFlag, canUnflag, patientName, alreadyFlagged, statuses }) {\n const result = el('result');\n const safeName = normalizeName(patientName);\n\n let outcome;\n if (shouldFlag && alreadyFlagged === 'yes') outcome = 'keep_flagged';\n else if (shouldFlag && alreadyFlagged !== 'yes') outcome = 'flag';\n else if (alreadyFlagged === 'yes' && canUnflag) outcome = 'unflag_ok';\n else if (alreadyFlagged === 'yes' && !canUnflag) outcome = 'keep_flagged';\n else outcome = 'do_not_flag';\n\n const badgeHtml = {\n flag: '<span class=\"badge badge-flag\">FLAG REQUIRED<\/span>',\n keep_flagged: '<span class=\"badge badge-flag\">KEEP FLAGGED<\/span>',\n unflag_ok: '<span class=\"badge badge-ok\">SAFE TO UNFLAG<\/span>',\n do_not_flag: '<span class=\"badge badge-ok\">DO NOT FLAG<\/span>'\n };\n\n const titleHtml = {\n flag: `Result: FLAG Patient ${badgeHtml.flag}`,\n keep_flagged: `Result: Keep Patient FLAGGED ${badgeHtml.keep_flagged}`,\n unflag_ok: `Result: Patient can be safely Unflagged ${badgeHtml.unflag_ok}`,\n do_not_flag: `Result: Do Not Flag ${badgeHtml.do_not_flag}`\n };\n\n const actions = [];\n const displayNameIfFlag = safeName ? flaggedDisplayName(safeName) : '';\n\n if (outcome === 'flag') {\n actions.push('FLAG the patient');\n actions.push('Update profile name by adding <strong>--<\/strong> in front of the patient\\'s first name');\n actions.push('Schedule future appointments using <strong>FLAGGED<\/strong> appointment types');\n if (safeName) actions.push(`<em>Update name to:<\/em> <strong>${displayNameIfFlag}<\/strong>`);\n } else if (outcome === 'keep_flagged') {\n actions.push('Patient should <strong>REMAIN \/ BE KEPT FLAGGED<\/strong>');\n actions.push('Do <strong>NOT<\/strong> remove the <strong>--<\/strong> from the profile name');\n actions.push('Continue scheduling using <strong>FLAGGED<\/strong> appointment types');\n if (!canUnflag) actions.push('<em>Unflag is ONLY allowed when last 3 PAST are all \u201cIn Room \/ Seen.\u201d<\/em>');\n } else if (outcome === 'unflag_ok') {\n actions.push('Patient can be safely <strong>UNFLAGGED<\/strong>');\n actions.push('Remove the <strong>--<\/strong> prefix from the patient\\'s first name in the profile');\n actions.push('Schedule using non-FLAGGED appointment types going forward');\n actions.push('<em>Reason:<\/em> The most recent 3 PAST appointments are all \u201cIn Room \/ Seen.\u201d');\n } else {\n actions.push('Do <strong>NOT<\/strong> FLAG the patient');\n actions.push('Do <strong>NOT<\/strong> change profile name based on these last 3 PAST appointments');\n }\n\n const statusLabel = (v) => ({\n in_room: 'In Room \/ Seen',\n no_show: 'No Show',\n cancelled: 'Cancelled',\n other: 'Other \/ Unknown \/ Blank \/ Empty'\n }[v] || v);\n\n const summary = `\n <div class=\"muted\">\n <strong>Past outcomes used:<\/strong> #1 ${statusLabel(statuses[0])}, #2 ${statusLabel(statuses[1])}, #3 ${statusLabel(statuses[2])}\n <\/div>\n `;\n\n let nameLine = '';\n if (safeName) {\n if (outcome === 'flag') {\n nameLine = `<div class=\"muted\" style=\"margin-top:10px;\"><strong>Patient:<\/strong> ${safeName}<br\/><strong>Update name to:<\/strong> ${displayNameIfFlag}<\/div>`;\n } else {\n nameLine = `<div class=\"muted\" style=\"margin-top:10px;\"><strong>Patient:<\/strong> ${safeName}<\/div>`;\n }\n } else {\n nameLine = `<div class=\"muted\" style=\"margin-top:10px;\">(Optional) Enter a patient name to generate the correct profile name format.<\/div>`;\n }\n\n result.innerHTML = `\n <h3 style=\"margin:0 0 10px;\">${titleHtml[outcome]}<\/h3>\n ${summary}\n ${nameLine}\n <div style=\"margin-top:12px;\"><strong>Steps:<\/strong><\/div>\n <ul class=\"actions\">${actions.map(a => `<li>${a}<\/li>`).join('')}<\/ul>\n `;\n\n if (outcome === 'flag' || outcome === 'keep_flagged') {\n result.style.background = 'rgba(185, 28, 28, 0.06)';\n result.style.borderColor = 'rgba(185, 28, 28, 0.35)';\n } else {\n result.style.background = 'rgba(21, 128, 61, 0.06)';\n result.style.borderColor = 'rgba(21, 128, 61, 0.35)';\n }\n }\n\n function evaluate() {\n const patientName = el('patientName').value;\n const alreadyFlagged = el('profileAlreadyFlagged').value;\n const statuses = [el('past1').value, el('past2').value, el('past3').value];\n const shouldFlag = computeShouldFlag(statuses);\n const canUnflag = computeCanUnflag(statuses);\n renderResult({ shouldFlag, canUnflag, patientName, alreadyFlagged, statuses });\n }\n\n function resetAll() {\n el('patientName').value = '';\n el('profileAlreadyFlagged').value = 'no';\n el('past1').value = 'in_room';\n el('past2').value = 'in_room';\n el('past3').value = 'in_room';\n const result = el('result');\n result.innerHTML = '<p class=\"muted\">Select outcomes and click <strong>Evaluate FLAGGED Status<\/strong>.<\/p>';\n result.style.background = '';\n result.style.borderColor = 'var(--border)';\n }\n\n el('evaluateBtn').addEventListener('click', evaluate);\n el('resetBtn').addEventListener('click', resetAll);\n document.getElementById('flagBack').addEventListener('click', () => setTab('cn'));\n\n \/\/ ------------------------\n \/\/ Teaching Modules \/ Tutorial\n \/\/ ------------------------\n const tutorialBackdrop = document.getElementById('tutorialBackdrop');\n const tutorialTitle = document.getElementById('tutorialTitle');\n const tutorialSubtitle = document.getElementById('tutorialSubtitle');\n const tutorialBody = document.getElementById('tutorialBody');\n\n function openTutorial(which) {\n const content = getTutorialContent(which);\n tutorialTitle.textContent = content.title;\n tutorialSubtitle.textContent = content.subtitle;\n tutorialBody.innerHTML = content.bodyHtml;\n tutorialBackdrop.style.display = 'flex';\n document.getElementById('tutorialClose').focus();\n if (which === 'cn') {\n wireQuiz('quiz-cn-1', 1, 'Correct: Friday \u2192 Monday is 1 or less OPEN Office Day before, so mark as No Show.', 'Not quite. Friday \u2192 Monday is treated as 1 or less OPEN Office Day, so it is No Show.');\n } else {\n wireQuiz('quiz-flag-1', 1, 'Correct: Not all 3 are Seen, so patient must remain\/keep flagged.', 'Not quite. Unflag requires all 3 PAST to be Seen.');\n }\n }\n\n function closeTutorial() {\n tutorialBackdrop.style.display = 'none';\n tutorialBody.innerHTML = '';\n }\n\n document.getElementById('tutorialClose').addEventListener('click', closeTutorial);\n tutorialBackdrop.addEventListener('click', (e) => { if (e.target === tutorialBackdrop) closeTutorial(); });\n document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && tutorialBackdrop.style.display === 'flex') closeTutorial(); });\n\n document.getElementById('cnTutorial').addEventListener('click', () => openTutorial('cn'));\n document.getElementById('flagTutorial').addEventListener('click', () => openTutorial('flag'));\n\n function practiceCn(type, name) {\n setTab('cn');\n cnPatient.value = name || 'John Smith';\n cnRender(type);\n closeTutorial();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n\n function practiceFlag(opts) {\n const o = opts || {};\n setTab('flag');\n el('patientName').value = o.name || 'John Smith';\n el('profileAlreadyFlagged').value = o.alreadyFlagged || 'no';\n el('past1').value = o.past1 || 'in_room';\n el('past2').value = o.past2 || 'in_room';\n el('past3').value = o.past3 || 'in_room';\n evaluate();\n closeTutorial();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n\n function wireQuiz(containerId, correctIndex, feedbackCorrect, feedbackWrong) {\n const root = document.getElementById(containerId);\n if (!root) return;\n const choices = Array.from(root.querySelectorAll('[data-choice]'));\n const fb = root.querySelector('.quiz-feedback');\n choices.forEach((btn, idx) => {\n btn.addEventListener('click', () => {\n choices.forEach(c => c.classList.remove('correct','wrong'));\n if (idx === correctIndex) {\n btn.classList.add('correct');\n if (fb) fb.textContent = feedbackCorrect;\n } else {\n btn.classList.add('wrong');\n if (fb) fb.textContent = feedbackWrong;\n }\n });\n });\n }\n\n function getTutorialContent(which) {\n if (which === 'cn') {\n return {\n title: 'Teaching Module: Cancelled vs No Show',\n subtitle: 'Goal: Pick the correct status, then ALWAYS create a new appointment (with the same-date exception).',\n bodyHtml: `\n <div class=\"module\">\n <h3>Module 1 \u2014 The Trigger<\/h3>\n <p>This workflow is used when a patient calls to reschedule\/cancel OR during confirmation calls.<\/p>\n <p><strong>Never move appointments.<\/strong> Change the status and create a new appointment.<\/p>\n <p><strong>Only exception:<\/strong> you may move the time <em>only<\/em> if it stays on the <strong>same date<\/strong>.<\/p>\n <\/div>\n <div class=\"module\">\n <h3>Module 2 \u2014 Decide by OPEN Office Days<\/h3>\n <p><strong>2 or more OPEN Office Days<\/strong> before the appointment \u2192 set status to <strong>Cancelled<\/strong>.<\/p>\n <p><strong>1 or less OPEN Office Days<\/strong> before the appointment \u2192 set status to <strong>No Show<\/strong>.<\/p>\n <p><strong>OPEN Office Days<\/strong> = office open whether there is clinic or not. Holidays\/closed weekends do not count.<\/p>\n <\/div>\n <div class=\"module\">\n <h3>Module 3 \u2014 Practice Scenarios (click one)<\/h3>\n <p>These buttons will auto-fill and show the correct result in the app.<\/p>\n <div class=\"pillrow\">\n <button class=\"pill\" type=\"button\" onclick=\"practiceCn('cancelled','John Smith')\">Scenario A: 2+ OPEN Office Days \u2192 Cancelled<\/button>\n <button class=\"pill\" type=\"button\" onclick=\"practiceCn('noshow','John Smith')\">Scenario B: 1 or less OPEN Office Days \u2192 No Show<\/button>\n <\/div>\n <p class=\"mini\">After a <strong>No Show<\/strong>, switch to the FLAGGED module to evaluate if the patient should be FLAGGED.<\/p>\n <\/div>\n <div class=\"module quiz\" id=\"quiz-cn-1\">\n <div class=\"q\">Quick Check: A patient calls Friday to reschedule a Monday appointment. Is this Cancelled or No Show?<\/div>\n <div class=\"choices\">\n <button class=\"choice\" data-choice type=\"button\">Cancelled<\/button>\n <button class=\"choice\" data-choice type=\"button\">No Show<\/button>\n <\/div>\n <div class=\"quiz-feedback\">Click an answer.<\/div>\n <\/div>\n <div class=\"module\">\n <h3>Common Mistakes<\/h3>\n <ul class=\"actions\">\n <li>Moving an appointment instead of cancelling\/no-showing it (not allowed).<\/li>\n <li>Counting holidays\/weekends as OPEN office days (do not count).<\/li>\n <li>Forgetting to create a NEW appointment after changing status.<\/li>\n <\/ul>\n <\/div>\n `\n };\n }\n\n return {\n title: 'Teaching Module: FLAGGED Patient Decision',\n subtitle: 'Goal: Use ONLY the most recent 3 PAST appointments to decide FLAG \/ KEEP FLAGGED \/ SAFE TO UNFLAG.',\n bodyHtml: `\n <div class=\"module\">\n <h3>Module 1 \u2014 What to Look At (PAST Only)<\/h3>\n <p>Only use the <strong>PAST<\/strong> section. Ignore upcoming appointments.<\/p>\n <p>Review the <strong>most recent 3<\/strong> past appointments ONLY.<\/p>\n <\/div>\n <div class=\"module\">\n <h3>Module 2 \u2014 The Rules<\/h3>\n <p><strong>FLAG rule:<\/strong> If <strong>ANY<\/strong> of the most recent 3 PAST appointments is <strong>No Show<\/strong> \u2192 FLAG (or KEEP FLAGGED if already flagged).<\/p>\n <p><strong>UNFLAG rule:<\/strong> Only safe to unflag if the most recent 3 PAST appointments are ALL <strong>In Room \/ Seen<\/strong>.<\/p>\n <p><strong>Cancelled<\/strong> and <strong>Other \/ Unknown \/ Blank \/ Empty<\/strong> do not count as No Show, but they <strong>block<\/strong> unflagging.<\/p>\n <\/div>\n <div class=\"module\">\n <h3>Module 3 \u2014 Practice Scenarios (click one)<\/h3>\n <p>These buttons will auto-fill the last 3 PAST outcomes and show the correct result.<\/p>\n <div class=\"pillrow\">\n <button class=\"pill\" type=\"button\" onclick=\"practiceFlag({name:'John Smith',alreadyFlagged:'no',past1:'no_show',past2:'in_room',past3:'in_room'})\">Scenario A: Not flagged + No Show in last 3 \u2192 FLAG<\/button>\n <button class=\"pill\" type=\"button\" onclick=\"practiceFlag({name:'John Smith',alreadyFlagged:'yes',past1:'no_show',past2:'in_room',past3:'in_room'})\">Scenario B: Already flagged + No Show \u2192 KEEP FLAGGED<\/button>\n <button class=\"pill\" type=\"button\" onclick=\"practiceFlag({name:'John Smith',alreadyFlagged:'yes',past1:'in_room',past2:'in_room',past3:'in_room'})\">Scenario C: Already flagged + 3 Seen \u2192 SAFE TO UNFLAG<\/button>\n <button class=\"pill\" type=\"button\" onclick=\"practiceFlag({name:'John Smith',alreadyFlagged:'yes',past1:'in_room',past2:'cancelled',past3:'in_room'})\">Scenario D: Already flagged + not all Seen \u2192 KEEP FLAGGED<\/button>\n <\/div>\n <\/div>\n <div class=\"module quiz\" id=\"quiz-flag-1\">\n <div class=\"q\">Quick Check: Patient is already FLAGGED. Last 3 PAST are Seen \/ Cancelled \/ Seen. What is the correct result?<\/div>\n <div class=\"choices\">\n <button class=\"choice\" data-choice type=\"button\">SAFE TO UNFLAG<\/button>\n <button class=\"choice\" data-choice type=\"button\">KEEP FLAGGED<\/button>\n <button class=\"choice\" data-choice type=\"button\">FLAG Patient<\/button>\n <\/div>\n <div class=\"quiz-feedback\">Click an answer.<\/div>\n <\/div>\n <div class=\"module\">\n <h3>Common Mistakes<\/h3>\n <ul class=\"actions\">\n <li>Using upcoming appointments to decide flagged status (not allowed).<\/li>\n <li>Unflagging without 3 consecutive \u201cIn Room \/ Seen\u201d in the most recent 3 PAST appointments.<\/li>\n <li>Treating Cancelled as a No Show (it is not).<\/li>\n <\/ul>\n <\/div>\n `\n };\n }\n\n \/\/ ------------------------\n \/\/ Tests\n \/\/ ------------------------\n (function runTests() {\n try {\n console.assert(typeof setTab === 'function', 'Test: setTab should exist');\n console.assert(typeof cnRender === 'function', 'Test: cnRender should exist');\n console.assert(typeof computeShouldFlag === 'function', 'Test: computeShouldFlag should exist');\n console.assert(typeof computeCanUnflag === 'function', 'Test: computeCanUnflag should exist');\n console.assert(typeof evaluate === 'function', 'Test: evaluate should exist');\n console.assert(typeof openTutorial === 'function', 'Test: openTutorial should exist');\n console.assert(typeof getTutorialContent === 'function', 'Test: getTutorialContent should exist');\n\n console.assert(computeShouldFlag(['in_room','in_room','in_room']) === false, 'Test: no no-shows => do not flag');\n console.assert(computeCanUnflag(['in_room','in_room','in_room']) === true, 'Test: all in_room => can unflag');\n console.assert(computeCanUnflag(['in_room','cancelled','in_room']) === false, 'Test: cancelled breaks unflag eligibility');\n console.assert(computeCanUnflag(['in_room','other','in_room']) === false, 'Test: other breaks unflag eligibility');\n console.assert(computeCanUnflag(['in_room','no_show','in_room']) === false, 'Test: no_show breaks unflag eligibility');\n\n console.assert(computeShouldFlag(['no_show','in_room','in_room']) === true, 'Test: no_show in #1 => flag');\n console.assert(computeShouldFlag(['in_room','no_show','in_room']) === true, 'Test: no_show in #2 => flag');\n console.assert(computeShouldFlag(['in_room','in_room','no_show']) === true, 'Test: no_show in #3 => flag');\n\n console.assert(flaggedDisplayName('John Smith') === '--John Smith', 'Test: prefix first token');\n console.assert(flaggedDisplayName('--John Smith') === '--John Smith', 'Test: keep existing prefix');\n console.assert(flaggedDisplayName(' John A. Smith ') === '--John A. Smith', 'Test: normalize spaces + prefix');\n console.assert(flaggedDisplayName('') === '', 'Test: empty name stays empty');\n\n const cnT = getTutorialContent('cn');\n const flT = getTutorialContent('flag');\n console.assert(!!cnT && !!flT, 'Test: tutorial content objects exist');\n console.assert(typeof cnT.bodyHtml === 'string' && cnT.bodyHtml.length > 50, 'Test: cn tutorial body populated');\n console.assert(typeof flT.bodyHtml === 'string' && flT.bodyHtml.length > 50, 'Test: flag tutorial body populated');\n } catch (e) {\n console.error('Tests encountered an error:', e);\n }\n })();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Scheduling Decision Suite Scheduling Decision Suite Two tools in one: Cancelled vs No Show and FLAGGED Patient decisions. Cancelled vs No Show FLAGGED Patient 1) Appointment Status Decision Patient calls to reschedule or cancel appointment OR during a confirmation call. Patient name (optional) 2 or More OPEN Office Days 1 or Less OPEN Office Days […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mybadtoe.com\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mybadtoe.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mybadtoe.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mybadtoe.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mybadtoe.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":5,"href":"https:\/\/mybadtoe.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/mybadtoe.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/mybadtoe.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}