<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:blogger='http://schemas.google.com/blogger/2008' xmlns:georss='http://www.georss.org/georss' xmlns:gd="http://schemas.google.com/g/2005" xmlns:thr='http://purl.org/syndication/thread/1.0'><id>tag:blogger.com,1999:blog-8803139780408321815</id><updated>2026-10-27T10:07:04.071+05:00</updated><category term="Pharmacology"/><category term="Pharmaceutics"/><category term="Technology"/><category term="Dictionary"/><category term="Microsoft Excel"/><category term="tutorial"/><category term="Blender"/><category term="statistics"/><category term="business"/><category term="Islam"/><category term="Pakistan"/><category term="Real Estate"/><category term="medical"/><category term="Dosage form pharmaceutics"/><category term="Islamic"/><category term="Pharmacy Syllabus in Pakistan"/><category term="animation"/><category term="Urdu"/><category term="Medicine"/><category term="Online Calculator"/><category term="illustration"/><category term="property"/><category term="Dispensing"/><category term="Science"/><category term="Excel"/><category term="Motivation"/><category term="vfx"/><category term="video"/><category term="illustrations"/><category term="cgi"/><category term="Advises and Orders From Holy Quran"/><category term="learning"/><category term="GRE General Preparation"/><category term="Physiology"/><category term="Research"/><category term="education"/><category term="graph"/><category term="language"/><category term="structural equation modeling"/><category term="Inorganic Pharmaceutical Chemistry"/><category term="JLPT"/><category term="Japanese"/><category term="N5"/><category term="lavaan"/><category term="psychology"/><category term="rgl"/><category term="1 minute latest at this time"/><category term="Bahria Town"/><category term="Inspiration"/><category term="SEM"/><category term="Biology"/><category term="Chemistry"/><category term="Pathology"/><category term="community"/><category term="unboxing"/><category term="semPlot"/><category term="Astronomy"/><category term="Jobs and Internships"/><category term="Pharmaceutical Chemistry"/><category term="gganimate"/><category term="plotly"/><category term="Biotechnology"/><category term="Industrial Pharmacy"/><category term="Islamabad"/><category term="Physical pharmacy"/><category term="R"/><category term="nursing"/><category term="DHA"/><category term="Finances"/><category term="Organic Pharmaceutical Chemistry"/><category term="programming"/><category term="Apple"/><category term="Google"/><category term="Important Websites"/><category term="Mathematics"/><category term="Microbiology"/><category term="Other"/><category term="decision making"/><category term="memory"/><category term="Article of the week"/><category term="Biochemistry"/><category term="Biopharmaceutics"/><category term="Japan"/><category term="Physics"/><category term="Quran"/><category term="data"/><category term="game"/><category term="ggplot2"/><category term="quotations"/><category term="quotes"/><category term="Clinical Pharmacy"/><category term="Hospital Pharmacy"/><category term="New ideas for Research"/><category term="Pharmacognosy"/><category term="Samsung"/><category term="animations"/><category term="graphics"/><category term="human"/><category term="travel"/><category term="Capital Smart City"/><category term="China"/><category term="Decision"/><category term="History"/><category term="Pharmaceutical industry"/><category term="Pharmacy"/><category term="Writing"/><category term="analysis"/><category term="app"/><category term="blogging"/><category term="calculator"/><category term="camera"/><category term="eyes"/><category term="flowchart"/><category term="health"/><category term="nature"/><category term="plot"/><category term="plots"/><category term="semPlots"/><category term="strategy"/><category term="traveling"/><category term="visualization"/><category term="3d"/><category term="AI"/><category term="Apple apps"/><category term="Arabic"/><category term="Arts"/><category term="Book"/><category term="CDA"/><category term="Dubai"/><category term="English"/><category term="Forecasting"/><category term="Fractions"/><category term="GoPro Hero 9"/><category term="Grapevines"/><category term="Gulberg"/><category term="Image processing"/><category term="Inpiration"/><category term="Japane"/><category term="Margalla"/><category term="Mean"/><category term="Meta-analysis"/><category term="NASA"/><category term="Neelum Valley"/><category term="Numbers"/><category term="Pentax"/><category term="Pharmaceutical Management"/><category term="Quality Control"/><category term="Quran Majeed"/><category term="Quranic"/><category term="R Project"/><category term="Ratti Gali"/><category term="Saudi Arabia"/><category term="Sony"/><category term="Taj Residencia"/><category term="Water purifier"/><category term="agriculture"/><category term="average"/><category term="beauty"/><category term="bipolar disorder"/><category term="butterfly effect"/><category term="children"/><category term="cupping"/><category term="data visualization"/><category term="death"/><category term="dehumidifier"/><category term="domino effect"/><category term="drugs"/><category term="educational"/><category term="emergency medicine"/><category term="feminism"/><category term="finance"/><category term="fish"/><category term="flowcharts"/><category term="foot massager"/><category term="footage"/><category term="games"/><category term="garment steamer"/><category term="giveaways"/><category term="greetings"/><category term="hijama"/><category term="houses"/><category term="housewives"/><category term="ideas"/><category term="image"/><category term="interaction"/><category term="law"/><category term="leadership"/><category term="legal"/><category term="magick"/><category term="market"/><category term="marketing"/><category term="marriage"/><category term="model"/><category term="money"/><category term="nasheed"/><category term="pediatric"/><category term="plant"/><category term="plants"/><category term="prices"/><category term="property prices"/><category term="queens"/><category term="questions"/><category term="ripple effect"/><category term="schizophrenia"/><category term="search trends"/><category term="shiny"/><category term="smartphone"/><category term="snowball effect"/><category term="solar"/><category term="soldier"/><category term="stress"/><category term="structures"/><category term="success"/><category term="sunrise"/><category term="taxes"/><category term="thoughts"/><category term="time lapse"/><category term="time series"/><category term="tips"/><category term="tools"/><category term="tour"/><category term="touring"/><category term="tourism"/><category term="travelling"/><category term="underwater"/><category term="voice recorder"/><title type='text'>Your Source of Information</title><subtitle type='html'>Authentic and to the Point Source in the Ocean of Web</subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default?redirect=false'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/'/><link rel='hub' href='http://pubsubhubbub.appspot.com/'/><link rel='next' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default?start-index=26&amp;max-results=25&amp;redirect=false'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><openSearch:totalResults>1665</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>25</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-5242888648466974703</id><published>2026-10-19T11:59:43.356+05:00</published><updated>2026-10-19T12:07:18.799+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="calculator"/><category scheme="http://www.blogger.com/atom/ns#" term="Decision"/><category scheme="http://www.blogger.com/atom/ns#" term="decision making"/><category scheme="http://www.blogger.com/atom/ns#" term="Online Calculator"/><category scheme="http://www.blogger.com/atom/ns#" term="strategy"/><title type='text'>Pro Decision-Making Made Easy - 3-Step Decision Framework to Prioritize Appropriate Decisions</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDMCqcm03EoH6xUP1n4_OdSp0_xIO2YrK6WmyGD9D22VT4uHVzI6mMKpROkLOWisREyhfEWsErwDqFZSoKIHcePv6o6OM32VVUK_fiOsEN3QG08tUkfFlmohL8zfkxdjTVbJBYCZnrKIR_KWMRL8sfaUc_xrqqpntRDTw9mtdZWPb6Is_66j_c2SrbLHqw/s1361/Pro%20Decision-making%20made%20easy.png&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;600&quot; data-original-height=&quot;686&quot; data-original-width=&quot;1361&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDMCqcm03EoH6xUP1n4_OdSp0_xIO2YrK6WmyGD9D22VT4uHVzI6mMKpROkLOWisREyhfEWsErwDqFZSoKIHcePv6o6OM32VVUK_fiOsEN3QG08tUkfFlmohL8zfkxdjTVbJBYCZnrKIR_KWMRL8sfaUc_xrqqpntRDTw9mtdZWPb6Is_66j_c2SrbLHqw/s600/Pro%20Decision-making%20made%20easy.png&quot;/&gt;&lt;/a&gt;&lt;/div&gt;
=====================
=====================
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;OmniDecision Intelligence Suite | End-to-End Decision Pipeline&lt;/title&gt;
    &lt;!-- Tailwind CSS --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome Icons --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Chart.js --&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
    &lt;!-- SheetJS for Multi-Sheet Excel Export --&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js&quot;&gt;&lt;/script&gt;

    &lt;style&gt;
        @import url(&#39;https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&amp;display=swap&#39;);
        body { font-family: &#39;Inter&#39;, sans-serif; background-color: #f1f5f9; }
        .slider { -webkit-appearance: none; width: 100%; height: 8px; border-radius: 4px; background: #cbd5e1; outline: none; }
        .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #2563eb; cursor: pointer; border: 3px solid #ffffff; box-shadow: 0 2px 6px rgba(37,99,235,0.4); }
        .custom-scrollbar::-webkit-scrollbar { height: 6px; width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
        .step-tab.active { background-color: #2563eb; color: #ffffff; border-color: #2563eb; box-shadow: 0 4px 12px rgba(37,99,235,0.25); }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;p-2 sm:p-4 md:p-6 lg:p-8 text-slate-800 min-h-screen&quot;&gt;

    &lt;div class=&quot;max-w-7xl mx-auto bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden&quot;&gt;
        
        &lt;!-- Master Header &amp; Step Wizard Bar --&gt;
        &lt;div class=&quot;bg-gradient-to-r from-slate-900 via-indigo-950 to-blue-950 text-white p-5 sm:p-8&quot;&gt;
            &lt;div class=&quot;flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6&quot;&gt;
                &lt;div&gt;
                    &lt;div class=&quot;flex items-center gap-2 text-blue-400 font-semibold text-xs tracking-wider uppercase mb-1&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-compass-drafting&quot;&gt;&lt;/i&gt; Strategic Decision Intelligence Suite
                    &lt;/div&gt;
                    &lt;h1 class=&quot;text-2xl sm:text-3xl font-extrabold tracking-tight&quot;&gt;End-to-End Decision Pipeline&lt;/h1&gt;
                    &lt;p class=&quot;text-slate-300 text-xs sm:text-sm mt-1 max-w-2xl&quot;&gt;
                        Filter ideas (RICE / Impact vs. Effort) &amp;rarr; Weight criteria rigorously (AHP CR Calculator) &amp;rarr; Evaluate final options (Decision Matrix).
                    &lt;/p&gt;
                &lt;/div&gt;
                &lt;div class=&quot;flex items-center gap-2&quot;&gt;
                    &lt;button onclick=&quot;resetAllData()&quot; class=&quot;bg-slate-800/80 hover:bg-slate-700 text-slate-300 hover:text-white px-3.5 py-2 rounded-xl text-xs font-semibold transition-all border border-slate-700 flex items-center gap-1.5&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-rotate-left&quot;&gt;&lt;/i&gt; Reset Suite
                    &lt;/button&gt;
                    &lt;button onclick=&quot;exportSuiteReport()&quot; class=&quot;bg-emerald-600 hover:bg-emerald-500 text-white px-4 py-2 rounded-xl text-xs font-semibold transition-all shadow-lg shadow-emerald-600/20 flex items-center gap-2&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-file-excel&quot;&gt;&lt;/i&gt; Export Complete Report
                    &lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;!-- Step Wizard Navigation Tabs --&gt;
            &lt;div class=&quot;grid grid-cols-1 sm:grid-cols-3 gap-2 bg-slate-900/60 p-1.5 rounded-xl border border-slate-800&quot;&gt;
                &lt;button onclick=&quot;switchStep(1)&quot; id=&quot;wizard-tab-1&quot; class=&quot;step-tab active py-3 px-4 rounded-lg text-xs sm:text-sm font-bold flex items-center justify-center gap-2 transition-all&quot;&gt;
                    &lt;span class=&quot;w-6 h-6 rounded-full bg-white/20 inline-flex items-center justify-center text-xs&quot;&gt;1&lt;/span&gt;
                    Backlog &amp; Idea Screening
                &lt;/button&gt;
                &lt;button onclick=&quot;switchStep(2)&quot; id=&quot;wizard-tab-2&quot; class=&quot;step-tab py-3 px-4 rounded-lg text-xs sm:text-sm font-bold flex items-center justify-center gap-2 transition-all text-slate-300 hover:text-white&quot;&gt;
                    &lt;span class=&quot;w-6 h-6 rounded-full bg-white/10 inline-flex items-center justify-center text-xs&quot;&gt;2&lt;/span&gt;
                    AHP Criteria Weighting
                &lt;/button&gt;
                &lt;button onclick=&quot;switchStep(3)&quot; id=&quot;wizard-tab-3&quot; class=&quot;step-tab py-3 px-4 rounded-lg text-xs sm:text-sm font-bold flex items-center justify-center gap-2 transition-all text-slate-300 hover:text-white&quot;&gt;
                    &lt;span class=&quot;w-6 h-6 rounded-full bg-white/10 inline-flex items-center justify-center text-xs&quot;&gt;3&lt;/span&gt;
                    Decision Matrix Evaluator
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- Main Content Area --&gt;
        &lt;div class=&quot;p-4 sm:p-6 md:p-8&quot;&gt;

            &lt;!-- ========================================== --&gt;
            &lt;!-- STEP 1: BACKLOG &amp; IDEA SCREENING --&gt;
            &lt;!-- ========================================== --&gt;
            &lt;div id=&quot;step-content-1&quot; class=&quot;space-y-6&quot;&gt;
                &lt;div class=&quot;flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 border-b border-slate-100 pb-4&quot;&gt;
                    &lt;div&gt;
                        &lt;h2 class=&quot;text-lg sm:text-xl font-bold text-slate-800 flex items-center gap-2&quot;&gt;
                            &lt;i class=&quot;fa-solid fa-filter text-blue-600&quot;&gt;&lt;/i&gt; Step 1: Idea Screening &amp; Prioritization
                        &lt;/h2&gt;
                        &lt;p class=&quot;text-xs text-slate-500 mt-0.5&quot;&gt;Filter ideas before deep matrix evaluation using RICE or Impact vs. Effort.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;inline-flex rounded-xl bg-slate-100 p-1 border border-slate-200 text-xs&quot;&gt;
                        &lt;button id=&quot;view-toggle-rice&quot; onclick=&quot;setBacklogView(&#39;rice&#39;)&quot; class=&quot;px-3 py-1.5 rounded-lg font-bold bg-white text-blue-600 shadow-sm transition-all&quot;&gt;RICE Calculator&lt;/button&gt;
                        &lt;button id=&quot;view-toggle-ie&quot; onclick=&quot;setBacklogView(&#39;ie&#39;)&quot; class=&quot;px-3 py-1.5 rounded-lg font-bold text-slate-500 hover:text-slate-800 transition-all&quot;&gt;Impact vs. Effort Matrix&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Subview A: RICE Backlog --&gt;
                &lt;div id=&quot;subview-rice&quot; class=&quot;space-y-6&quot;&gt;
                    &lt;div class=&quot;flex justify-between items-center&quot;&gt;
                        &lt;span id=&quot;rice-count&quot; class=&quot;text-xs font-bold text-slate-600 bg-slate-100 px-3 py-1 rounded-full&quot;&gt;0 Ideas in Backlog&lt;/span&gt;
                        &lt;button onclick=&quot;openIdeaModal()&quot; class=&quot;bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-xl text-xs font-semibold shadow-sm flex items-center gap-2&quot;&gt;
                            &lt;i class=&quot;fa-solid fa-plus&quot;&gt;&lt;/i&gt; Add New Idea
                        &lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-4&quot; id=&quot;rice-cards-container&quot;&gt;
                        &lt;!-- Populated by JS --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Subview B: Impact vs Effort Matrix --&gt;
                &lt;div id=&quot;subview-ie&quot; class=&quot;space-y-6 hidden&quot;&gt;
                    &lt;div class=&quot;bg-slate-50 border border-slate-200 rounded-2xl p-4 sm:p-6 grid grid-cols-1 md:grid-cols-2 gap-4&quot;&gt;
                        &lt;div class=&quot;bg-amber-50/70 border-2 border-amber-200 rounded-xl p-4 flex flex-col justify-between&quot;&gt;
                            &lt;h4 class=&quot;text-xs font-bold text-amber-800 uppercase mb-2&quot;&gt;&lt;i class=&quot;fa-solid fa-mountain-sun&quot;&gt;&lt;/i&gt; Major Projects (High Impact, High Effort)&lt;/h4&gt;
                            &lt;div id=&quot;ie-major&quot; class=&quot;space-y-2 max-h-48 overflow-y-auto custom-scrollbar&quot;&gt;&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;bg-emerald-50/70 border-2 border-emerald-300 rounded-xl p-4 flex flex-col justify-between shadow-sm&quot;&gt;
                            &lt;h4 class=&quot;text-xs font-bold text-emerald-800 uppercase mb-2&quot;&gt;&lt;i class=&quot;fa-solid fa-bolt&quot;&gt;&lt;/i&gt; Quick Wins (High Impact, Low Effort) - Priority!&lt;/h4&gt;
                            &lt;div id=&quot;ie-quick&quot; class=&quot;space-y-2 max-h-48 overflow-y-auto custom-scrollbar&quot;&gt;&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;bg-rose-50/70 border-2 border-rose-200 rounded-xl p-4 flex flex-col justify-between&quot;&gt;
                            &lt;h4 class=&quot;text-xs font-bold text-rose-800 uppercase mb-2&quot;&gt;&lt;i class=&quot;fa-solid fa-triangle-exclamation&quot;&gt;&lt;/i&gt; Thankless Tasks (Low Impact, High Effort)&lt;/h4&gt;
                            &lt;div id=&quot;ie-thankless&quot; class=&quot;space-y-2 max-h-48 overflow-y-auto custom-scrollbar&quot;&gt;&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;bg-blue-50/70 border-2 border-blue-200 rounded-xl p-4 flex flex-col justify-between&quot;&gt;
                            &lt;h4 class=&quot;text-xs font-bold text-blue-800 uppercase mb-2&quot;&gt;&lt;i class=&quot;fa-solid fa-list-check&quot;&gt;&lt;/i&gt; Fill-Ins (Low Impact, Low Effort)&lt;/h4&gt;
                            &lt;div id=&quot;ie-fillin&quot; class=&quot;space-y-2 max-h-48 overflow-y-auto custom-scrollbar&quot;&gt;&lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class=&quot;flex justify-end pt-4 border-t border-slate-100&quot;&gt;
                    &lt;button onclick=&quot;switchStep(2)&quot; class=&quot;bg-blue-600 hover:bg-blue-500 text-white px-5 py-2.5 rounded-xl text-xs sm:text-sm font-semibold shadow-md flex items-center gap-2&quot;&gt;
                        Proceed to AHP Criteria Weighting &lt;i class=&quot;fa-solid fa-arrow-right&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;!-- ========================================== --&gt;
            &lt;!-- STEP 2: AHP CRITERIA WEIGHTING --&gt;
            &lt;!-- ========================================== --&gt;
            &lt;div id=&quot;step-content-2&quot; class=&quot;space-y-6 hidden&quot;&gt;
                &lt;div class=&quot;flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 border-b border-slate-100 pb-4&quot;&gt;
                    &lt;div&gt;
                        &lt;h2 class=&quot;text-lg sm:text-xl font-bold text-slate-800 flex items-center gap-2&quot;&gt;
                            &lt;i class=&quot;fa-solid fa-square-root-variable text-blue-600&quot;&gt;&lt;/i&gt; Step 2: AHP Criteria Weighting &amp; Consistency Check
                        &lt;/h2&gt;
                        &lt;p class=&quot;text-xs text-slate-500 mt-0.5&quot;&gt;Evaluate criteria pairwise using Saaty&#39;s 1-9 scale to generate objective weights (&lt;i&gt;w&lt;/i&gt;&lt;sub&gt;i&lt;/sub&gt;).&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;flex items-center gap-2&quot;&gt;
                        &lt;button onclick=&quot;addAhpCriterion()&quot; class=&quot;bg-white text-blue-600 border border-blue-200 hover:bg-blue-50 px-3 py-2 rounded-xl text-xs font-semibold shadow-sm&quot;&gt;
                            &lt;i class=&quot;fa-solid fa-plus&quot;&gt;&lt;/i&gt; Add Criterion
                        &lt;/button&gt;
                        &lt;button onclick=&quot;syncWeightsToDecisionMatrix()&quot; class=&quot;bg-emerald-600 hover:bg-emerald-500 text-white px-3.5 py-2 rounded-xl text-xs font-semibold shadow-sm flex items-center gap-1.5&quot;&gt;
                            &lt;i class=&quot;fa-solid fa-sync&quot;&gt;&lt;/i&gt; Sync Weights to Matrix
                        &lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Criteria Names Grid --&gt;
                &lt;div id=&quot;ahp-criteria-container&quot; class=&quot;grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3&quot;&gt;
                    &lt;!-- Populated by JS --&gt;
                &lt;/div&gt;

                &lt;!-- Pairwise Sliders --&gt;
                &lt;div class=&quot;space-y-4 bg-slate-50 p-4 sm:p-6 rounded-2xl border border-slate-200&quot;&gt;
                    &lt;h3 class=&quot;text-xs font-bold uppercase tracking-wider text-slate-500 mb-2&quot;&gt;Pairwise Comparisons (Saaty Scale)&lt;/h3&gt;
                    &lt;div id=&quot;ahp-comparisons-container&quot; class=&quot;space-y-4&quot;&gt;
                        &lt;!-- Populated by JS --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- AHP Results Bar --&gt;
                &lt;div class=&quot;bg-white rounded-2xl border border-slate-200 p-4 sm:p-6 shadow-sm space-y-4&quot;&gt;
                    &lt;div class=&quot;flex justify-between items-center&quot;&gt;
                        &lt;h3 class=&quot;text-sm font-bold text-slate-800&quot;&gt;Consistency Ratio Analysis&lt;/h3&gt;
                        &lt;div id=&quot;ahp-cr-badge&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;grid grid-cols-2 sm:grid-cols-4 gap-3 text-center&quot;&gt;
                        &lt;div class=&quot;bg-slate-50 p-3 rounded-xl border border-slate-200&quot;&gt;
                            &lt;span class=&quot;block text-[11px] text-slate-500 mb-1&quot;&gt;Principal Eigenvalue (&amp;lambda;&lt;sub&gt;max&lt;/sub&gt;)&lt;/span&gt;
                            &lt;span id=&quot;ahp-stat-lambda&quot; class=&quot;text-base sm:text-lg font-bold text-slate-800&quot;&gt;--&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;bg-slate-50 p-3 rounded-xl border border-slate-200&quot;&gt;
                            &lt;span class=&quot;block text-[11px] text-slate-500 mb-1&quot;&gt;Consistency Index (CI)&lt;/span&gt;
                            &lt;span id=&quot;ahp-stat-ci&quot; class=&quot;text-base sm:text-lg font-bold text-slate-800&quot;&gt;--&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;bg-slate-50 p-3 rounded-xl border border-slate-200&quot;&gt;
                            &lt;span class=&quot;block text-[11px] text-slate-500 mb-1&quot;&gt;Random Index (RI)&lt;/span&gt;
                            &lt;span id=&quot;ahp-stat-ri&quot; class=&quot;text-base sm:text-lg font-bold text-slate-800&quot;&gt;--&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;bg-slate-50 p-3 rounded-xl border border-slate-200&quot;&gt;
                            &lt;span class=&quot;block text-[11px] text-slate-500 mb-1&quot;&gt;Consistency Ratio (CR)&lt;/span&gt;
                            &lt;span id=&quot;ahp-stat-cr&quot; class=&quot;text-base sm:text-lg font-bold text-blue-600&quot;&gt;--&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Visual Chart for AHP Priority Weights --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-2xl border border-slate-200 shadow-sm&quot;&gt;
                    &lt;h3 class=&quot;text-base font-bold text-slate-800 mb-4 flex items-center gap-2&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-chart-pie text-indigo-500&quot;&gt;&lt;/i&gt; Calculated Criteria Priority Weights (&lt;i&gt;w&lt;/i&gt;&lt;sub&gt;i&lt;/sub&gt;)
                    &lt;/h3&gt;
                    &lt;div class=&quot;w-full h-64 flex justify-center&quot;&gt;
                        &lt;canvas id=&quot;ahpWeightsChart&quot;&gt;&lt;/canvas&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class=&quot;flex justify-between pt-4 border-t border-slate-100&quot;&gt;
                    &lt;button onclick=&quot;switchStep(1)&quot; class=&quot;bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2.5 rounded-xl text-xs font-semibold&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-arrow-left&quot;&gt;&lt;/i&gt; Back to Backlog
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchStep(3)&quot; class=&quot;bg-blue-600 hover:bg-blue-500 text-white px-5 py-2.5 rounded-xl text-xs sm:text-sm font-semibold shadow-md flex items-center gap-2&quot;&gt;
                        Proceed to Final Decision Matrix &lt;i class=&quot;fa-solid fa-arrow-right&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;!-- ========================================== --&gt;
            &lt;!-- STEP 3: DECISION MATRIX EVALUATOR --&gt;
            &lt;!-- ========================================== --&gt;
            &lt;div id=&quot;step-content-3&quot; class=&quot;space-y-6 hidden&quot;&gt;
                &lt;div class=&quot;flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 border-b border-slate-100 pb-4&quot;&gt;
                    &lt;div&gt;
                        &lt;h2 class=&quot;text-lg sm:text-xl font-bold text-slate-800 flex items-center gap-2&quot;&gt;
                            &lt;i class=&quot;fa-solid fa-table-list text-blue-600&quot;&gt;&lt;/i&gt; Step 3: Final Decision Matrix &amp; Scoring
                        &lt;/h2&gt;
                        &lt;p class=&quot;text-xs text-slate-500 mt-0.5&quot;&gt;Score options (1-10) against weighted criteria to find the optimal decision.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;flex items-center gap-2&quot;&gt;
                        &lt;button onclick=&quot;addMatrixCriterion()&quot; class=&quot;bg-slate-700 hover:bg-slate-600 text-white px-3 py-2 rounded-xl text-xs font-medium&quot;&gt;
                            &lt;i class=&quot;fa-solid fa-plus&quot;&gt;&lt;/i&gt; Add Criteria
                        &lt;/button&gt;
                        &lt;button onclick=&quot;addMatrixOption()&quot; class=&quot;bg-blue-600 hover:bg-blue-500 text-white px-3 py-2 rounded-xl text-xs font-medium&quot;&gt;
                            &lt;i class=&quot;fa-solid fa-plus&quot;&gt;&lt;/i&gt; Add Option
                        &lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Decision Matrix Table --&gt;
                &lt;div class=&quot;overflow-x-auto custom-scrollbar border border-slate-200 rounded-xl bg-white&quot;&gt;
                    &lt;table class=&quot;w-full text-left border-collapse min-w-max&quot;&gt;
                        &lt;thead&gt;
                            &lt;tr id=&quot;matrix-header&quot; class=&quot;border-b-2 border-slate-200 bg-slate-50/80&quot;&gt;&lt;/tr&gt;
                        &lt;/thead&gt;
                        &lt;tbody id=&quot;matrix-body&quot;&gt;&lt;/tbody&gt;
                    &lt;/table&gt;
                &lt;/div&gt;

                &lt;!-- Results Winner Cards --&gt;
                &lt;div class=&quot;bg-slate-50 p-6 rounded-2xl border border-slate-200 space-y-4&quot;&gt;
                    &lt;h3 class=&quot;text-base font-bold text-slate-800 flex items-center gap-2&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-trophy text-amber-500&quot;&gt;&lt;/i&gt; Final Decision Results Overview
                    &lt;/h3&gt;
                    &lt;div id=&quot;matrix-results-container&quot; class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4&quot;&gt;
                        &lt;!-- Populated by JS --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Visual Chart --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-2xl border border-slate-200 shadow-sm&quot;&gt;
                    &lt;h3 class=&quot;text-base font-bold text-slate-800 mb-4 flex items-center gap-2&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-chart-bar text-blue-500&quot;&gt;&lt;/i&gt; Visual Comparison Chart
                    &lt;/h3&gt;
                    &lt;div class=&quot;w-full h-72 flex justify-center&quot;&gt;
                        &lt;canvas id=&quot;matrixResultsChart&quot;&gt;&lt;/canvas&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class=&quot;flex justify-start pt-4 border-t border-slate-100&quot;&gt;
                    &lt;button onclick=&quot;switchStep(2)&quot; class=&quot;bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2.5 rounded-xl text-xs font-semibold&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-arrow-left&quot;&gt;&lt;/i&gt; Back to AHP Criteria Weighting
                    &lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;

        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Idea Modal (Step 1 - Add / Edit) --&gt;
    &lt;div id=&quot;idea-modal&quot; class=&quot;fixed inset-0 bg-slate-900/50 backdrop-blur-sm hidden flex items-center justify-center p-4 z-50&quot;&gt;
        &lt;div class=&quot;bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 space-y-5&quot;&gt;
            &lt;h3 id=&quot;modal-idea-title&quot; class=&quot;text-lg font-bold text-slate-800&quot;&gt;Add Backlog Idea&lt;/h3&gt;
            &lt;input type=&quot;hidden&quot; id=&quot;modal-idea-edit-id&quot;&gt;
            &lt;input type=&quot;text&quot; id=&quot;modal-idea-name&quot; placeholder=&quot;Idea Title&quot; class=&quot;w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-blue-500&quot;&gt;
            &lt;textarea id=&quot;modal-idea-desc&quot; rows=&quot;2&quot; placeholder=&quot;Brief Description&quot; class=&quot;w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-blue-500&quot;&gt;&lt;/textarea&gt;
            &lt;div class=&quot;grid grid-cols-2 gap-3&quot;&gt;
                &lt;div&gt;
                    &lt;label class=&quot;text-[11px] font-bold text-slate-500 uppercase&quot;&gt;Reach (Users/Mo)&lt;/label&gt;
                    &lt;input type=&quot;number&quot; id=&quot;modal-idea-reach&quot; value=&quot;500&quot; class=&quot;w-full bg-slate-50 border border-slate-300 rounded-xl px-3 py-2 text-sm&quot;&gt;
                &lt;/div&gt;
                &lt;div&gt;
                    &lt;label class=&quot;text-[11px] font-bold text-slate-500 uppercase&quot;&gt;Impact (0.5 - 5)&lt;/label&gt;
                    &lt;input type=&quot;number&quot; step=&quot;0.25&quot; id=&quot;modal-idea-impact&quot; value=&quot;3&quot; class=&quot;w-full bg-slate-50 border border-slate-300 rounded-xl px-3 py-2 text-sm&quot;&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;grid grid-cols-2 gap-3&quot;&gt;
                &lt;div&gt;
                    &lt;label class=&quot;text-[11px] font-bold text-slate-500 uppercase&quot;&gt;Confidence (%)&lt;/label&gt;
                    &lt;input type=&quot;number&quot; id=&quot;modal-idea-conf&quot; value=&quot;80&quot; class=&quot;w-full bg-slate-50 border border-slate-300 rounded-xl px-3 py-2 text-sm&quot;&gt;
                &lt;/div&gt;
                &lt;div&gt;
                    &lt;label class=&quot;text-[11px] font-bold text-slate-500 uppercase&quot;&gt;Effort (Months)&lt;/label&gt;
                    &lt;input type=&quot;number&quot; step=&quot;0.25&quot; id=&quot;modal-idea-effort&quot; value=&quot;2&quot; class=&quot;w-full bg-slate-50 border border-slate-300 rounded-xl px-3 py-2 text-sm&quot;&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;flex justify-end gap-3 pt-2&quot;&gt;
                &lt;button onclick=&quot;closeIdeaModal()&quot; class=&quot;bg-slate-100 hover:bg-slate-200 px-4 py-2 rounded-xl text-sm font-semibold&quot;&gt;Cancel&lt;/button&gt;
                &lt;button onclick=&quot;saveIdea()&quot; class=&quot;bg-blue-600 hover:bg-blue-500 text-white px-5 py-2 rounded-xl text-sm font-semibold shadow-sm&quot;&gt;Save Idea&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Toast Notification --&gt;
    &lt;div id=&quot;toast&quot; class=&quot;fixed bottom-5 right-5 bg-slate-900 text-white px-4 py-3 rounded-xl shadow-2xl opacity-0 pointer-events-none transition-all duration-300 flex items-center gap-3 z-50 text-sm&quot;&gt;
        &lt;i class=&quot;fa-solid fa-circle-check text-emerald-400&quot;&gt;&lt;/i&gt;
        &lt;span id=&quot;toast-message&quot;&gt;Success&lt;/span&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // --- MASTER APPLICATION STATE ---
        let appData = {
            currentStep: 1,
            backlogView: &#39;rice&#39;,
            ideas: [
                { id: &#39;1&#39;, name: &#39;Cloud Infrastructure Migration&#39;, desc: &#39;Enterprise scalability upgrade&#39;, reach: 1200, impact: 3.0, confidence: 80, effort: 3.0 },
                { id: &#39;2&#39;, name: &#39;Checkout Bug Fix&#39;, desc: &#39;Recover lost transactions&#39;, reach: 3500, impact: 4.0, confidence: 90, effort: 1.0 },
                { id: &#39;3&#39;, name: &#39;Advanced Analytics Suite&#39;, desc: &#39;Custom reporting dashboards&#39;, reach: 800, impact: 3.0, confidence: 70, effort: 2.0 }
            ],
            ahpCriteria: [
                { id: &#39;c1&#39;, name: &#39;Cost / Budget&#39; },
                { id: &#39;c2&#39;, name: &#39;Quality / Features&#39; },
                { id: &#39;c3&#39;, name: &#39;Ease of Implementation&#39; },
                { id: &#39;c4&#39;, name: &#39;Risk &amp; Scalability&#39; }
            ],
            ahpPairs: {},
            matrixCriteria: [
                { id: &#39;mc1&#39;, name: &#39;Cost (Lower is better)&#39;, weight: 8 },
                { id: &#39;mc2&#39;, name: &#39;Features / Quality&#39;, weight: 7 },
                { id: &#39;mc3&#39;, name: &#39;Ease of Use&#39;, weight: 9 }
            ],
            matrixOptions: [
                { id: &#39;mo1&#39;, name: &#39;Cloud Migration&#39; },
                { id: &#39;mo2&#39;, name: &#39;Checkout Bug Fix&#39; }
            ],
            matrixScores: {
                &#39;mc1&#39;: { &#39;mo1&#39;: 7, &#39;mo2&#39;: 4 },
                &#39;mc2&#39;: { &#39;mo1&#39;: 6, &#39;mo2&#39;: 9 },
                &#39;mc3&#39;: { &#39;mo1&#39;: 8, &#39;mo2&#39;: 5 }
            }
        };

        const RI_TABLE = [0, 0, 0, 0.58, 0.90, 1.12, 1.24, 1.32, 1.41, 1.45, 1.49];
        let ahpChartInstance = null;
        let matrixChartInstance = null;

        // --- NAVIGATION WIZARD ---
        function switchStep(step) {
            appData.currentStep = step;
            for (let i = 1; i &lt;= 3; i++) {
                document.getElementById(`step-content-${i}`).classList.toggle(&#39;hidden&#39;, i !== step);
                const tab = document.getElementById(`wizard-tab-${i}`);
                if (i === step) {
                    tab.classList.add(&#39;active&#39;, &#39;bg-blue-600&#39;, &#39;text-white&#39;);
                    tab.classList.remove(&#39;text-slate-300&#39;);
                } else {
                    tab.classList.remove(&#39;active&#39;, &#39;bg-blue-600&#39;, &#39;text-white&#39;);
                    tab.classList.add(&#39;text-slate-300&#39;);
                }
            }
            window.scrollTo({ top: 0, behavior: &#39;smooth&#39; });
            if (step === 2) renderAhp();
            if (step === 3) renderMatrix();
        }

        function setBacklogView(view) {
            appData.backlogView = view;
            document.getElementById(&#39;subview-rice&#39;).classList.toggle(&#39;hidden&#39;, view !== &#39;rice&#39;);
            document.getElementById(&#39;subview-ie&#39;).classList.toggle(&#39;hidden&#39;, view !== &#39;ie&#39;);
            document.getElementById(&#39;view-toggle-rice&#39;).className = view === &#39;rice&#39; ? &#39;px-3.5 py-1.5 rounded-lg font-bold bg-white text-blue-600 shadow-sm&#39; : &#39;px-3.5 py-1.5 rounded-lg font-bold text-slate-500&#39;;
            document.getElementById(&#39;view-toggle-ie&#39;).className = view === &#39;ie&#39; ? &#39;px-3.5 py-1.5 rounded-lg font-bold bg-white text-blue-600 shadow-sm&#39; : &#39;px-3.5 py-1.5 rounded-lg font-bold text-slate-500&#39;;
            if (view === &#39;ie&#39;) renderImpactEffortMatrix();
        }

        // --- STEP 1: BACKLOG &amp; EDIT LOGIC ---
        function calculateRICE(item) {
            const conf = item.confidence / 100;
            const eff = item.effort &gt; 0 ? item.effort : 0.5;
            return Math.round((item.reach * item.impact * conf) / eff);
        }

        function renderBacklog() {
            const container = document.getElementById(&#39;rice-cards-container&#39;);
            document.getElementById(&#39;rice-count&#39;).innerText = `${appData.ideas.length} Ideas in Backlog`;
            
            appData.ideas.sort((a,b) =&gt; calculateRICE(b) - calculateRICE(a));

            container.innerHTML = appData.ideas.map((item, idx) =&gt; `
                &lt;div class=&quot;bg-white p-4 rounded-xl border border-slate-200 shadow-sm flex flex-col justify-between space-y-3&quot;&gt;
                    &lt;div class=&quot;flex justify-between items-start&quot;&gt;
                        &lt;div&gt;
                            &lt;span class=&quot;text-xs font-bold bg-indigo-50 text-indigo-700 px-2 py-0.5 rounded-md&quot;&gt;Rank #${idx + 1}&lt;/span&gt;
                            &lt;h4 class=&quot;font-bold text-slate-800 text-sm mt-1&quot;&gt;${item.name}&lt;/h4&gt;
                            &lt;p class=&quot;text-xs text-slate-500&quot;&gt;${item.desc || &#39;&#39;}&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;span class=&quot;text-xs font-black bg-slate-100 text-slate-800 px-2.5 py-1 rounded-lg&quot;&gt;RICE: ${calculateRICE(item).toLocaleString()}&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;flex justify-between items-center pt-2 border-t border-slate-100 text-xs text-slate-500&quot;&gt;
                        &lt;span&gt;Reach: &lt;strong&gt;${item.reach}&lt;/strong&gt; | Impact: &lt;strong&gt;${item.impact}&lt;/strong&gt;&lt;/span&gt;
                        &lt;div class=&quot;flex items-center gap-2&quot;&gt;
                            &lt;button onclick=&quot;openIdeaModal(&#39;${item.id}&#39;)&quot; class=&quot;text-slate-400 hover:text-blue-600 font-semibold&quot; title=&quot;Edit Idea&quot;&gt;&lt;i class=&quot;fa-solid fa-pen text-xs&quot;&gt;&lt;/i&gt; Edit&lt;/button&gt;
                            &lt;span class=&quot;text-slate-300&quot;&gt;|&lt;/span&gt;
                            &lt;button onclick=&quot;sendToDecisionMatrix(&#39;${item.id}&#39;)&quot; class=&quot;text-blue-600 hover:underline font-semibold&quot;&gt;&lt;i class=&quot;fa-solid fa-arrow-up-right-from-square&quot;&gt;&lt;/i&gt; Send to Matrix&lt;/button&gt;
                            &lt;button onclick=&quot;deleteIdea(&#39;${item.id}&#39;)&quot; class=&quot;text-slate-400 hover:text-red-500&quot; title=&quot;Delete&quot;&gt;&lt;i class=&quot;fa-solid fa-trash-can&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);

            if (appData.backlogView === &#39;ie&#39;) renderImpactEffortMatrix();
        }

        function renderImpactEffortMatrix() {
            const quads = { quick: document.getElementById(&#39;ie-quick&#39;), major: document.getElementById(&#39;ie-major&#39;), thankless: document.getElementById(&#39;ie-thankless&#39;), fillin: document.getElementById(&#39;ie-fillin&#39;) };
            Object.values(quads).forEach(q =&gt; q.innerHTML = &#39;&#39;);

            appData.ideas.forEach(item =&gt; {
                const impact = item.impact * 2;
                const effort = item.effort * 1.5;
                const highImpact = impact &gt;= 5;
                const highEffort = effort &gt;= 5;
                let key = &#39;fillin&#39;;
                if (highImpact &amp;&amp; !highEffort) key = &#39;quick&#39;;
                else if (highImpact &amp;&amp; highEffort) key = &#39;major&#39;;
                else if (!highImpact &amp;&amp; highEffort) key = &#39;thankless&#39;;

                quads[key].innerHTML += `
                    &lt;div class=&quot;bg-white p-2.5 rounded border border-slate-200 text-xs font-semibold text-slate-800 flex justify-between items-center&quot;&gt;
                        &lt;span class=&quot;truncate pr-2&quot;&gt;${item.name}&lt;/span&gt;
                        &lt;div class=&quot;flex items-center gap-2 shrink-0&quot;&gt;
                            &lt;button onclick=&quot;openIdeaModal(&#39;${item.id}&#39;)&quot; class=&quot;text-slate-400 hover:text-blue-600&quot; title=&quot;Edit&quot;&gt;&lt;i class=&quot;fa-solid fa-pen&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                            &lt;button onclick=&quot;sendToDecisionMatrix(&#39;${item.id}&#39;)&quot; class=&quot;text-blue-600 hover:underline&quot;&gt;Send&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
            });
        }

        function openIdeaModal(id = null) {
            if (id) {
                const item = appData.ideas.find(i =&gt; i.id === id);
                if (!item) return;
                document.getElementById(&#39;modal-idea-title&#39;).innerText = &#39;Edit Backlog Idea&#39;;
                document.getElementById(&#39;modal-idea-edit-id&#39;).value = item.id;
                document.getElementById(&#39;modal-idea-name&#39;).value = item.name;
                document.getElementById(&#39;modal-idea-desc&#39;).value = item.desc || &#39;&#39;;
                document.getElementById(&#39;modal-idea-reach&#39;).value = item.reach;
                document.getElementById(&#39;modal-idea-impact&#39;).value = item.impact;
                document.getElementById(&#39;modal-idea-conf&#39;).value = item.confidence;
                document.getElementById(&#39;modal-idea-effort&#39;).value = item.effort;
            } else {
                document.getElementById(&#39;modal-idea-title&#39;).innerText = &#39;Add Backlog Idea&#39;;
                document.getElementById(&#39;modal-idea-edit-id&#39;).value = &#39;&#39;;
                document.getElementById(&#39;modal-idea-name&#39;).value = &#39;&#39;;
                document.getElementById(&#39;modal-idea-desc&#39;).value = &#39;&#39;;
                document.getElementById(&#39;modal-idea-reach&#39;).value = 500;
                document.getElementById(&#39;modal-idea-impact&#39;).value = 3;
                document.getElementById(&#39;modal-idea-conf&#39;).value = 80;
                document.getElementById(&#39;modal-idea-effort&#39;).value = 2;
            }
            document.getElementById(&#39;idea-modal&#39;).classList.remove(&#39;hidden&#39;);
        }

        function closeIdeaModal() { 
            document.getElementById(&#39;idea-modal&#39;).classList.add(&#39;hidden&#39;); 
        }

        function saveIdea() {
            const editId = document.getElementById(&#39;modal-idea-edit-id&#39;).value;
            const name = document.getElementById(&#39;modal-idea-name&#39;).value.trim();
            if (!name) return showToast(&#39;Enter an idea name&#39;, true);
            
            const reach = parseFloat(document.getElementById(&#39;modal-idea-reach&#39;).value) || 500;
            const impact = parseFloat(document.getElementById(&#39;modal-idea-impact&#39;).value) || 3;
            const confidence = parseFloat(document.getElementById(&#39;modal-idea-conf&#39;).value) || 80;
            const effort = parseFloat(document.getElementById(&#39;modal-idea-effort&#39;).value) || 2;
            const desc = document.getElementById(&#39;modal-idea-desc&#39;).value.trim();

            if (editId) {
                const item = appData.ideas.find(i =&gt; i.id === editId);
                if (item) {
                    item.name = name;
                    item.desc = desc;
                    item.reach = reach;
                    item.impact = impact;
                    item.confidence = confidence;
                    item.effort = effort;
                }
                showToast(&#39;Idea updated successfully!&#39;);
            } else {
                appData.ideas.push({
                    id: &#39;idea_&#39; + Math.random().toString(36).substr(2,6),
                    name,
                    desc,
                    reach,
                    impact,
                    confidence,
                    effort
                });
                showToast(&#39;Idea added to backlog!&#39;);
            }
            closeIdeaModal();
            renderBacklog();
        }

        function deleteIdea(id) {
            appData.ideas = appData.ideas.filter(i =&gt; i.id !== id);
            renderBacklog();
            showToast(&#39;Idea removed&#39;);
        }
        
        function sendToDecisionMatrix(id) {
            const idea = appData.ideas.find(i =&gt; i.id === id);
            if (!idea) return;

            const exists = appData.matrixOptions.some(mo =&gt; mo.name.trim().toLowerCase() === idea.name.trim().toLowerCase());
            if (exists) {
                showToast(`&quot;${idea.name}&quot; is already in the Decision Matrix!`, true);
                return;
            }

            const newOptId = &#39;mo_&#39; + Math.random().toString(36).substr(2,6);
            appData.matrixOptions.push({ id: newOptId, name: idea.name });
            appData.matrixCriteria.forEach(c =&gt; {
                if (!appData.matrixScores[c.id]) appData.matrixScores[c.id] = {};
                appData.matrixScores[c.id][newOptId] = Math.round(idea.impact * 2);
            });
            showToast(`Sent &quot;${idea.name}&quot; to Decision Matrix!`);
        }

        // --- STEP 2: AHP CRITERIA WEIGHTING LOGIC ---
        function formatAhpLabel(val, c1Name, c2Name) {
            if (val === 0) return &#39;Equal Importance (1:1)&#39;;
            if (val &lt; 0) {
                const ratio = Math.abs(val) + 1;
                return `&lt;strong class=&quot;text-blue-600&quot;&gt;${c1Name}&lt;/strong&gt; is ${ratio}x more important than &lt;strong&gt;${c2Name}&lt;/strong&gt;`;
            } else {
                const ratio = val + 1;
                return `&lt;strong class=&quot;text-indigo-600&quot;&gt;${c2Name}&lt;/strong&gt; is ${ratio}x more important than &lt;strong&gt;${c1Name}&lt;/strong&gt;`;
            }
        }

        function renderAhp() {
            const critContainer = document.getElementById(&#39;ahp-criteria-container&#39;);
            critContainer.innerHTML = appData.ahpCriteria.map((c, idx) =&gt; `
                &lt;div class=&quot;bg-white p-2.5 rounded-xl border border-slate-200 flex items-center gap-2&quot;&gt;
                    &lt;span class=&quot;text-xs font-bold text-slate-400&quot;&gt;#${idx+1}&lt;/span&gt;
                    &lt;input type=&quot;text&quot; value=&quot;${c.name}&quot; onchange=&quot;updateAhpCriterion(${idx}, this.value)&quot; class=&quot;flex-1 bg-slate-50 border border-slate-200 rounded-lg px-2.5 py-1 text-xs font-medium&quot;&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);

            const n = appData.ahpCriteria.length;
            for(let i=0; i&lt;n; i++) {
                for(let j=i+1; j&lt;n; j++) {
                    if (appData.ahpPairs[`${i}-${j}`] === undefined) appData.ahpPairs[`${i}-${j}`] = 0;
                }
            }

            const compContainer = document.getElementById(&#39;ahp-comparisons-container&#39;);
            let html = &#39;&#39;;
            for(let i=0; i&lt;n; i++) {
                for(let j=i+1; j&lt;n; j++) {
                    const key = `${i}-${j}`;
                    const val = appData.ahpPairs[key] || 0;
                    const labelText = formatAhpLabel(val, appData.ahpCriteria[i].name, appData.ahpCriteria[j].name);
                    html += `
                        &lt;div class=&quot;bg-white p-3 rounded-xl border border-slate-200 space-y-2&quot;&gt;
                            &lt;div class=&quot;flex justify-between items-center text-xs font-bold&quot;&gt;
                                &lt;span class=&quot;text-blue-600&quot;&gt;${appData.ahpCriteria[i].name}&lt;/span&gt; vs &lt;span class=&quot;text-indigo-600&quot;&gt;${appData.ahpCriteria[j].name}&lt;/span&gt;
                                &lt;span id=&quot;ahp-lbl-${key}&quot; class=&quot;text-slate-600 font-normal text-right&quot;&gt;${labelText}&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;input type=&quot;range&quot; min=&quot;-8&quot; max=&quot;8&quot; value=&quot;${val}&quot; step=&quot;1&quot; oninput=&quot;updateAhpPair(&#39;${key}&#39;, this.value)&quot; class=&quot;slider&quot;&gt;
                        &lt;/div&gt;
                    `;
                }
            }
            compContainer.innerHTML = html;
            calculateAhpResults();
        }

        function updateAhpCriterion(idx, val) {
            appData.ahpCriteria[idx].name = val;
            renderAhp();
        }

        function addAhpCriterion() {
            if (appData.ahpCriteria.length &gt;= 8) return showToast(&#39;Max 8 criteria supported&#39;, true);
            appData.ahpCriteria.push({ id: &#39;c&#39; + (appData.ahpCriteria.length+1), name: `Criterion ${appData.ahpCriteria.length+1}` });
            appData.ahpPairs = {};
            renderAhp();
        }

        function updateAhpPair(key, val) {
            const numericVal = parseInt(val);
            appData.ahpPairs[key] = numericVal;
            
            const [i, j] = key.split(&#39;-&#39;).map(Number);
            const lblElem = document.getElementById(`ahp-lbl-${key}`);
            if (lblElem) {
                lblElem.innerHTML = formatAhpLabel(numericVal, appData.ahpCriteria[i].name, appData.ahpCriteria[j].name);
            }
            
            calculateAhpResults();
        }

        function getSaatyScale(val) {
            if (val &lt; 0) return { left: Math.abs(val)+1, right: 1/(Math.abs(val)+1) };
            if (val &gt; 0) return { left: 1/(val+1), right: val+1 };
            return { left: 1, right: 1 };
        }

        function calculateAhpResults() {
            const n = appData.ahpCriteria.length;
            let matrix = Array(n).fill(0).map(() =&gt; Array(n).fill(1));
            for(let i=0; i&lt;n; i++) {
                for(let j=i+1; j&lt;n; j++) {
                    const val = appData.ahpPairs[`${i}-${j}`] || 0;
                    const scale = getSaatyScale(val);
                    matrix[i][j] = scale.left;
                    matrix[j][i] = scale.right;
                }
            }

            let colSums = Array(n).fill(0);
            for(let i=0; i&lt;n; i++) for(let j=0; j&lt;n; j++) colSums[j] += matrix[i][j];

            let weights = Array(n).fill(0);
            for(let i=0; i&lt;n; i++) {
                let rowSum = 0;
                for(let j=0; j&lt;n; j++) rowSum += matrix[i][j] / colSums[j];
                weights[i] = rowSum / n;
            }

            let weightedSum = Array(n).fill(0);
            for(let i=0; i&lt;n; i++) {
                for(let j=0; j&lt;n; j++) weightedSum[i] += matrix[i][j] * weights[j];
            }

            let lambdaMax = 0;
            for(let i=0; i&lt;n; i++) lambdaMax += weightedSum[i] / weights[i];
            lambdaMax /= n;

            const CI = n &gt; 1 ? (lambdaMax - n) / (n - 1) : 0;
            const RI = RI_TABLE[n] || 1.49;
            const CR = RI &gt; 0 ? CI / RI : 0;

            document.getElementById(&#39;ahp-stat-lambda&#39;).innerText = lambdaMax.toFixed(4);
            document.getElementById(&#39;ahp-stat-ci&#39;).innerText = CI.toFixed(4);
            document.getElementById(&#39;ahp-stat-ri&#39;).innerText = RI.toFixed(2);
            document.getElementById(&#39;ahp-stat-cr&#39;).innerText = (CR * 100).toFixed(2) + &#39;%&#39;;

            const badge = document.getElementById(&#39;ahp-cr-badge&#39;);
            if (CR &lt;= 0.10) {
                badge.innerHTML = `&lt;span class=&quot;bg-emerald-100 text-emerald-800 text-xs font-bold px-3 py-1 rounded-full&quot;&gt;&lt;i class=&quot;fa-solid fa-check mr-1&quot;&gt;&lt;/i&gt; Consistent (CR &amp;le; 10%)&lt;/span&gt;`;
            } else {
                badge.innerHTML = `&lt;span class=&quot;bg-rose-100 text-rose-800 text-xs font-bold px-3 py-1 rounded-full&quot;&gt;&lt;i class=&quot;fa-solid fa-triangle-exclamation mr-1&quot;&gt;&lt;/i&gt; Inconsistent (CR &gt; 10%)&lt;/span&gt;`;
            }

            appData.ahpCalculatedWeights = weights;
            renderAhpChart(weights);
        }

        function renderAhpChart(weights) {
            const ctx = document.getElementById(&#39;ahpWeightsChart&#39;).getContext(&#39;2d&#39;);
            if (ahpChartInstance) ahpChartInstance.destroy();
            
            const labels = appData.ahpCriteria.map(c =&gt; c.name);
            const dataPercentages = weights.map(w =&gt; (w * 100).toFixed(1));

            ahpChartInstance = new Chart(ctx, {
                type: &#39;bar&#39;,
                data: {
                    labels: labels,
                    datasets: [{
                        label: &#39;Priority Weight (%)&#39;,
                        data: dataPercentages,
                        backgroundColor: &#39;#6366f1&#39;,
                        borderRadius: 8
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) { return value + &#39;%&#39;; }
                            }
                        }
                    },
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: function(context) { return `Weight: ${context.raw}%`; }
                            }
                        }
                    }
                }
            });
        }

        function syncWeightsToDecisionMatrix() {
            if (!appData.ahpCalculatedWeights || appData.ahpCalculatedWeights.length !== appData.ahpCriteria.length) {
                calculateAhpResults();
            }

            const rawWeights = appData.ahpCalculatedWeights;
            const maxW = Math.max(...rawWeights);

            const oldScores = { ...appData.matrixScores };

            appData.matrixCriteria = appData.ahpCriteria.map((c, idx) =&gt; {
                const scaledWeight = Math.max(1, Math.min(10, Math.round((rawWeights[idx] / maxW) * 10)));
                return {
                    id: &#39;mc_&#39; + c.id,
                    name: c.name,
                    weight: scaledWeight
                };
            });

            appData.matrixScores = {};
            appData.matrixCriteria.forEach(mc =&gt; {
                appData.matrixScores[mc.id] = {};
                appData.matrixOptions.forEach(mo =&gt; {
                    appData.matrixScores[mc.id][mo.id] = oldScores[mc.id]?.[mo.id] || 5;
                });
            });

            showToast(&#39;AHP weights synced into Decision Matrix criteria!&#39;);
            switchStep(3);
        }

        // --- STEP 3: DECISION MATRIX LOGIC ---
        function renderMatrix() {
            const header = document.getElementById(&#39;matrix-header&#39;);
            let hHTML = `
                &lt;th class=&quot;p-3 font-semibold text-slate-700 min-w-[180px] whitespace-nowrap&quot;&gt;Criteria&lt;/th&gt;
                &lt;th class=&quot;p-3 font-semibold text-slate-700 min-w-[110px] text-center whitespace-nowrap&quot;&gt;Weight (1-10)&lt;/th&gt;
            `;
            appData.matrixOptions.forEach(opt =&gt; {
                hHTML += `
                    &lt;th class=&quot;p-3 min-w-[160px] whitespace-nowrap&quot;&gt;
                        &lt;div class=&quot;flex items-center gap-2&quot;&gt;
                            &lt;input type=&quot;text&quot; value=&quot;${opt.name}&quot; onchange=&quot;updateMatrixOptName(&#39;${opt.id}&#39;, this.value)&quot; class=&quot;w-full bg-slate-50 border border-slate-200 rounded px-2 py-1 font-semibold text-xs text-slate-800&quot;&gt;
                            &lt;button onclick=&quot;deleteMatrixOpt(&#39;${opt.id}&#39;)&quot; class=&quot;text-slate-400 hover:text-red-500 transition-colors&quot;&gt;&lt;i class=&quot;fa-solid fa-trash&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/th&gt;`;
            });
            header.innerHTML = hHTML;

            const body = document.getElementById(&#39;matrix-body&#39;);
            let bHTML = &#39;&#39;;
            appData.matrixCriteria.forEach(crit =&gt; {
                bHTML += `
                    &lt;tr class=&quot;border-b border-slate-100 hover:bg-slate-50 transition-colors&quot;&gt;
                        &lt;td class=&quot;p-2 min-w-[180px]&quot;&gt;
                            &lt;div class=&quot;flex items-center gap-2&quot;&gt;
                                &lt;button onclick=&quot;deleteMatrixCrit(&#39;${crit.id}&#39;)&quot; class=&quot;text-slate-300 hover:text-red-500 transition-colors&quot;&gt;&lt;i class=&quot;fa-solid fa-trash&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                                &lt;input type=&quot;text&quot; value=&quot;${crit.name}&quot; onchange=&quot;updateMatrixCritName(&#39;${crit.id}&#39;, this.value)&quot; class=&quot;w-full bg-slate-50 border border-slate-200 rounded px-2 py-1 text-xs font-medium text-slate-800&quot;&gt;
                            &lt;/div&gt;
                        &lt;/td&gt;
                        &lt;td class=&quot;p-2 min-w-[110px]&quot;&gt;
                            &lt;input type=&quot;number&quot; min=&quot;1&quot; max=&quot;10&quot; value=&quot;${crit.weight}&quot; oninput=&quot;updateMatrixWeight(&#39;${crit.id}&#39;, this.value)&quot; class=&quot;w-full text-center bg-blue-50/50 border border-blue-200 rounded px-2 py-1 font-bold text-blue-600 text-xs&quot;&gt;
                        &lt;/td&gt;
                `;
                appData.matrixOptions.forEach(opt =&gt; {
                    if (!appData.matrixScores[crit.id]) appData.matrixScores[crit.id] = {};
                    const score = appData.matrixScores[crit.id][opt.id] || 5;
                    bHTML += `
                        &lt;td class=&quot;p-2 min-w-[160px]&quot;&gt;
                            &lt;input type=&quot;number&quot; min=&quot;1&quot; max=&quot;10&quot; value=&quot;${score}&quot; oninput=&quot;updateMatrixScore(&#39;${crit.id}&#39;, &#39;${opt.id}&#39;, this.value)&quot; class=&quot;w-full text-center bg-slate-50 border border-slate-200 rounded px-2 py-1 text-xs text-slate-800&quot;&gt;
                        &lt;/td&gt;`;
                });
                bHTML += `&lt;/tr&gt;`;
            });
            body.innerHTML = bHTML;
            calculateMatrixResults();
        }

        function calculateMatrixResults() {
            let maxTotal = 0;
            appData.matrixCriteria.forEach(c =&gt; maxTotal += c.weight * 10);

            let results = appData.matrixOptions.map(opt =&gt; {
                let total = 0;
                appData.matrixCriteria.forEach(crit =&gt; {
                    const score = appData.matrixScores[crit.id]?.[opt.id] || 0;
                    total += score * crit.weight;
                });
                return {
                    ...opt,
                    totalScore: total,
                    percentage: maxTotal &gt; 0 ? ((total / maxTotal) * 100).toFixed(1) : 0
                };
            });

            results.sort((a,b) =&gt; b.totalScore - a.totalScore);

            const container = document.getElementById(&#39;matrix-results-container&#39;);
            container.innerHTML = results.map((res, idx) =&gt; {
                const isWinner = idx === 0 &amp;&amp; res.totalScore &gt; 0;
                return `
                    &lt;div class=&quot;bg-white rounded-xl p-4 border ${isWinner ? &#39;border-2 border-emerald-500 shadow-emerald-100&#39; : &#39;border-slate-200&#39;} shadow-sm relative&quot;&gt;
                        ${isWinner ? &#39;&lt;div class=&quot;absolute top-0 right-0 bg-emerald-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-bl-lg&quot;&gt;WINNER&lt;/div&gt;&#39; : &#39;&#39;}
                        &lt;h4 class=&quot;font-bold text-slate-800 text-sm mb-2&quot;&gt;${res.name}&lt;/h4&gt;
                        &lt;div class=&quot;flex justify-between items-end&quot;&gt;
                            &lt;div&gt;&lt;span class=&quot;text-2xl font-black text-slate-900&quot;&gt;${res.totalScore}&lt;/span&gt; &lt;span class=&quot;text-xs text-slate-500&quot;&gt;pts&lt;/span&gt;&lt;/div&gt;
                            &lt;div class=&quot;text-sm font-bold text-blue-600&quot;&gt;${res.percentage}%&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;w-full bg-slate-100 rounded-full h-2 mt-2&quot;&gt;
                            &lt;div class=&quot;${isWinner ? &#39;bg-emerald-500&#39; : &#39;bg-blue-500&#39;} h-2 rounded-full&quot; style=&quot;width: ${res.percentage}%&quot;&gt;&lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
            }).join(&#39;&#39;);

            renderMatrixChart(results);
        }

        function renderMatrixChart(results) {
            const ctx = document.getElementById(&#39;matrixResultsChart&#39;).getContext(&#39;2d&#39;);
            if (matrixChartInstance) matrixChartInstance.destroy();
            matrixChartInstance = new Chart(ctx, {
                type: &#39;bar&#39;,
                data: {
                    labels: results.map(r =&gt; r.name),
                    datasets: [{ label: &#39;Total Score&#39;, data: results.map(r =&gt; r.totalScore), backgroundColor: results.map((_, i) =&gt; i === 0 ? &#39;#10b981&#39; : &#39;#3b82f6&#39;) }]
                },
                options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } }, plugins: { legend: { display: false } } }
            });
        }

        function addMatrixCriterion() {
            const id = &#39;mc_&#39; + Math.random().toString(36).substr(2,5);
            appData.matrixCriteria.push({ id, name: &#39;New Criterion&#39;, weight: 5 });
            appData.matrixScores[id] = {};
            appData.matrixOptions.forEach(o =&gt; appData.matrixScores[id][o.id] = 5);
            renderMatrix();
        }
        function addMatrixOption() {
            const id = &#39;mo_&#39; + Math.random().toString(36).substr(2,5);
            appData.matrixOptions.push({ id, name: `Option ${appData.matrixOptions.length+1}` });
            appData.matrixCriteria.forEach(c =&gt; {
                if (!appData.matrixScores[c.id]) appData.matrixScores[c.id] = {};
                appData.matrixScores[c.id][id] = 5;
            });
            renderMatrix();
        }
        function updateMatrixOptName(id, val) { const o = appData.matrixOptions.find(x =&gt; x.id === id); if(o) o.name = val; calculateMatrixResults(); }
        function updateMatrixCritName(id, val) { const c = appData.matrixCriteria.find(x =&gt; x.id === id); if(c) c.name = val; }
        function updateMatrixWeight(id, val) { const c = appData.matrixCriteria.find(x =&gt; x.id === id); if(c) c.weight = parseInt(val)||0; calculateMatrixResults(); }
        function updateMatrixScore(cId, oId, val) { if(!appData.matrixScores[cId]) appData.matrixScores[cId] = {}; appData.matrixScores[cId][oId] = parseInt(val)||0; calculateMatrixResults(); }
        function deleteMatrixCrit(id) { appData.matrixCriteria = appData.matrixCriteria.filter(x =&gt; x.id !== id); delete appData.matrixScores[id]; renderMatrix(); }
        function deleteMatrixOpt(id) { appData.matrixOptions = appData.matrixOptions.filter(x =&gt; x.id !== id); renderMatrix(); }

        // --- UTILS &amp; EXCEL EXPORT ---
        function showToast(msg, err=false) {
            const t = document.getElementById(&#39;toast&#39;);
            document.getElementById(&#39;toast-message&#39;).innerText = msg;
            t.style.opacity = &#39;1&#39;;
            setTimeout(() =&gt; t.style.opacity = &#39;0&#39;, 3000);
        }
        function resetAllData() {
            if(confirm(&#39;Reset all suite data?&#39;)) { location.reload(); }
        }

        function exportSuiteReport() {
            const wb = XLSX.utils.book_new();

            const riceData = appData.ideas.map(item =&gt; ({
                &quot;Idea Title&quot;: item.name,
                &quot;Description&quot;: item.desc || &quot;&quot;,
                &quot;Reach (Users/Mo)&quot;: item.reach,
                &quot;Impact (0.5-5)&quot;: item.impact,
                &quot;Confidence (%)&quot;: item.confidence,
                &quot;Effort (Months)&quot;: item.effort,
                &quot;Calculated RICE Score&quot;: calculateRICE(item)
            }));
            XLSX.utils.book_append_sheet(wb, XLSX.utils.json_to_sheet(riceData), &quot;RICE Backlog&quot;);

            const ieData = appData.ideas.map(item =&gt; {
                const impact = item.impact * 2;
                const effort = item.effort * 1.5;
                const highImpact = impact &gt;= 5;
                const highEffort = effort &gt;= 5;
                let category = &#39;Fill-In&#39;;
                if (highImpact &amp;&amp; !highEffort) category = &#39;Quick Win&#39;;
                else if (highImpact &amp;&amp; highEffort) category = &#39;Major Project&#39;;
                else if (!highImpact &amp;&amp; highEffort) category = &#39;Thankless Task&#39;;

                return {
                    &quot;Idea Title&quot;: item.name,
                    &quot;Impact Score (1-10)&quot;: impact,
                    &quot;Effort Score (1-10)&quot;: effort,
                    &quot;Matrix Quadrant Category&quot;: category
                };
            });
            XLSX.utils.book_append_sheet(wb, XLSX.utils.json_to_sheet(ieData), &quot;Impact vs Effort Matrix&quot;);

            const weights = appData.ahpCalculatedWeights || Array(appData.ahpCriteria.length).fill(1 / appData.ahpCriteria.length);
            const ahpData = appData.ahpCriteria.map((c, idx) =&gt; ({
                &quot;Criterion ID&quot;: c.id,
                &quot;Criterion Name&quot;: c.name,
                &quot;Priority Weight (w_i)&quot;: weights[idx] ? weights[idx].toFixed(4) : &quot;0.0000&quot;
            }));
            XLSX.utils.book_append_sheet(wb, XLSX.utils.json_to_sheet(ahpData), &quot;AHP Criteria Weights&quot;);

            let maxTotal = 0;
            appData.matrixCriteria.forEach(c =&gt; maxTotal += c.weight * 10);
            const matrixResults = appData.matrixOptions.map(opt =&gt; {
                let total = 0;
                appData.matrixCriteria.forEach(crit =&gt; {
                    const score = appData.matrixScores[crit.id]?.[opt.id] || 0;
                    total += score * crit.weight;
                });
                return {
                    &quot;Option Name&quot;: opt.name,
                    &quot;Total Weighted Score&quot;: total,
                    &quot;Percentage (%)&quot;: maxTotal &gt; 0 ? ((total / maxTotal) * 100).toFixed(1) + &#39;%&#39; : &#39;0%&#39;
                };
            });
            XLSX.utils.book_append_sheet(wb, XLSX.utils.json_to_sheet(matrixResults), &quot;Decision Matrix Results&quot;);

            XLSX.writeFile(wb, &quot;OmniDecision_Comprehensive_Suite_Report.xlsx&quot;);
            showToast(&#39;Comprehensive multi-sheet Excel report exported successfully!&#39;);
        }

        window.onload = () =&gt; {
            renderBacklog();
        };
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
====================
====================
&lt;div class=&quot;bg-white rounded-2xl border border-slate-200 p-6 space-y-6 text-slate-700 shadow-sm&quot;&gt;
    &lt;h2 class=&quot;text-base font-bold text-slate-900 border-b border-slate-100 pb-3 flex items-center gap-2&quot;&gt;
        &lt;i class=&quot;fa-solid fa-shield-halved text-blue-600&quot;&gt;&lt;/i&gt; Disclaimer &amp; Terms of Use
    &lt;/h2&gt;
    
    &lt;div class=&quot;space-y-4 text-xs sm:text-sm&quot;&gt;
        &lt;!-- Section 1 --&gt;
        &lt;div class=&quot;space-y-1.5&quot;&gt;
            &lt;h3 class=&quot;font-bold text-slate-800&quot;&gt;1. Educational &amp; Analytical Purpose Only&lt;/h3&gt;
            &lt;ul class=&quot;list-disc pl-5 space-y-1 text-slate-600&quot;&gt;
                &lt;li&gt;&lt;strong&gt;Academic Tooling:&lt;/strong&gt; This application is designed solely for educational, academic, and analytical demonstration purposes.&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;No Professional Advice:&lt;/strong&gt; The outputs generated by this suite (including RICE scores, AHP criteria weights, and Decision Matrix totals) do not constitute professional management, financial, legal, or strategic consulting advice.&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;

        &lt;!-- Section 2 --&gt;
        &lt;div class=&quot;space-y-1.5&quot;&gt;
            &lt;h3 class=&quot;font-bold text-slate-800&quot;&gt;2. User Responsibility &amp; Decision Ownership&lt;/h3&gt;
            &lt;ul class=&quot;list-disc pl-5 space-y-1 text-slate-600&quot;&gt;
                &lt;li&gt;&lt;strong&gt;Decision Authority:&lt;/strong&gt; Final operational, strategic, or business decisions remain entirely the responsibility of the user or organization.&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;Input Integrity:&lt;/strong&gt; Results are strictly dependent on user-provided inputs, ratings, and pairwise comparison judgments (&amp;quot;garbage in, garbage out&amp;quot;).&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;

        &lt;!-- Section 3 --&gt;
        &lt;div class=&quot;space-y-1.5&quot;&gt;
            &lt;h3 class=&quot;font-bold text-slate-800&quot;&gt;3. Data Privacy &amp; Processing&lt;/h3&gt;
            &lt;ul class=&quot;list-disc pl-5 space-y-1 text-slate-600&quot;&gt;
                &lt;li&gt;&lt;strong&gt;Local Processing:&lt;/strong&gt; All calculations are executed client-side in your web browser. No proprietary backlog data, internal feature lists, or sensitive organizational evaluations are saved or transmitted to external server databases.&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;Session Persistence:&lt;/strong&gt; Data resets upon refreshing or clearing session storage unless explicitly exported as an Excel report by the user.&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;

        &lt;!-- Section 4 --&gt;
        &lt;div class=&quot;space-y-1.5&quot;&gt;
            &lt;h3 class=&quot;font-bold text-slate-800&quot;&gt;4. Intellectual Property &amp; Methodologies&lt;/h3&gt;
            &lt;ul class=&quot;list-disc pl-5 space-y-1 text-slate-600&quot;&gt;
                &lt;li&gt;&lt;strong&gt;Open Methodologies:&lt;/strong&gt; The mathematical frameworks used—including Saaty’s Analytic Hierarchy Process (AHP), RICE Scoring, and Multi-Criteria Decision Analysis (MCDA)—are established open-domain methodologies utilized here for educational implementation.&lt;/li&gt;
                &lt;li&gt;&lt;strong&gt;Software License:&lt;/strong&gt; Provided &amp;quot;as-is&amp;quot; under standard open-source educational terms without warranties of any kind regarding accuracy or fitness for a specific commercial purpose.&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/5242888648466974703/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/5242888648466974703' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/5242888648466974703'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/5242888648466974703'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2026/10/pro-decision-making-made-easy-3-step.html' title='Pro Decision-Making Made Easy - 3-Step Decision Framework to Prioritize Appropriate Decisions'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDMCqcm03EoH6xUP1n4_OdSp0_xIO2YrK6WmyGD9D22VT4uHVzI6mMKpROkLOWisREyhfEWsErwDqFZSoKIHcePv6o6OM32VVUK_fiOsEN3QG08tUkfFlmohL8zfkxdjTVbJBYCZnrKIR_KWMRL8sfaUc_xrqqpntRDTw9mtdZWPb6Is_66j_c2SrbLHqw/s72-c/Pro%20Decision-making%20made%20easy.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-7525514416137228358</id><published>2026-10-14T13:58:00.659+05:00</published><updated>2026-10-14T13:58:00.660+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="business"/><category scheme="http://www.blogger.com/atom/ns#" term="Decision"/><category scheme="http://www.blogger.com/atom/ns#" term="decision making"/><category scheme="http://www.blogger.com/atom/ns#" term="marketing"/><category scheme="http://www.blogger.com/atom/ns#" term="psychology"/><category scheme="http://www.blogger.com/atom/ns#" term="strategy"/><title type='text'>What Should We Build Next? Use This Free RICE Calculator to Decide</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD-XFPUolyhyphenhyphenN0Rq1CCO2RpEx0qkMAjEH5PF_vMmxmK3sJomactPNLNPD-e_tRk1sEQQLmHYJRt4alt4awiK9nyC617esGw1-OfbtKA4tbUtg8beViGya2T5d3EJtydcu6YgpoIubdPh8bHHPY40TMC0xYjCvT1UGBCbNfSeg7d4oOCLwUTi-jbhE360gj/s1213/RICE%20Calculator.png&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;600&quot; data-original-height=&quot;591&quot; data-original-width=&quot;1213&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD-XFPUolyhyphenhyphenN0Rq1CCO2RpEx0qkMAjEH5PF_vMmxmK3sJomactPNLNPD-e_tRk1sEQQLmHYJRt4alt4awiK9nyC617esGw1-OfbtKA4tbUtg8beViGya2T5d3EJtydcu6YgpoIubdPh8bHHPY40TMC0xYjCvT1UGBCbNfSeg7d4oOCLwUTi-jbhE360gj/s600/RICE%20Calculator.png&quot;/&gt;&lt;/a&gt;&lt;/div&gt;
=====================
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;RICE Prioritization Calculator&lt;/title&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;style&gt;
        @import url(&#39;https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;display=swap&#39;);
        
        body {
            font-family: &#39;Inter&#39;, sans-serif;
            background-color: transparent;
            overflow-wrap: anywhere;
            word-break: normal;
        }

        .slider {
            -webkit-appearance: none;
            width: 100%;
            height: 8px;
            border-radius: 4px;
            background: #e2e8f0;
            outline: none;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #6366f1;
            cursor: pointer;
            transition: all 0.2s;
            border: 2px solid #ffffff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.15);
        }

        .slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #6366f1;
            cursor: pointer;
            border: 2px solid #ffffff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.15);
        }

        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;p-2 sm:p-4 md:p-6&quot;&gt;

    &lt;div class=&quot;w-full max-w-full mx-auto bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden box-border&quot;&gt;
        
        &lt;!-- Header --&gt;
        &lt;div class=&quot;bg-indigo-900 text-white p-5 sm:p-6 md:p-8 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4&quot;&gt;
            &lt;div class=&quot;min-w-0 flex-1&quot;&gt;
                &lt;div class=&quot;flex items-center gap-3&quot;&gt;
                    &lt;div class=&quot;bg-indigo-800 p-3 rounded-xl border border-indigo-700 shadow-inner shrink-0&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-calculator text-indigo-300 text-xl&quot;&gt;&lt;/i&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;min-w-0&quot;&gt;
                        &lt;h2 class=&quot;text-xl sm:text-2xl md:text-3xl font-bold tracking-tight truncate&quot;&gt;RICE Prioritization Calculator&lt;/h2&gt;
                        &lt;p class=&quot;text-indigo-200 text-xs sm:text-sm mt-1&quot;&gt;Score and rank product backlog ideas &amp; marketing initiatives.&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;flex items-center gap-3 w-full sm:w-auto justify-end shrink-0&quot;&gt;
                &lt;button onclick=&quot;openAddModal()&quot; class=&quot;w-full sm:w-auto bg-indigo-600 hover:bg-indigo-500 text-white px-4 sm:px-5 py-2.5 rounded-xl text-sm font-semibold transition-all shadow-md flex items-center justify-center gap-2&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-plus&quot;&gt;&lt;/i&gt; Add Idea
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;p-4 sm:p-6 md:p-8 space-y-6 sm:space-y-8&quot;&gt;
            
            &lt;!-- Top Spotlight Banner --&gt;
            &lt;div id=&quot;top-spotlight&quot; class=&quot;bg-gradient-to-r from-indigo-50 via-purple-50 to-pink-50 border border-indigo-100 rounded-2xl p-4 sm:p-6 flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4 sm:gap-6 shadow-xs&quot;&gt;
                &lt;!-- Rendered dynamically --&gt;
            &lt;/div&gt;

            &lt;!-- Grid Layout for Leaderboard &amp; Formula --&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-3 gap-6&quot;&gt;
                
                &lt;!-- Left 2 Cols: Leaderboard Cards --&gt;
                &lt;div class=&quot;lg:col-span-2 space-y-4 min-w-0&quot;&gt;
                    &lt;div class=&quot;flex justify-between items-center&quot;&gt;
                        &lt;h3 class=&quot;text-base sm:text-lg font-bold text-slate-800 flex items-center gap-2&quot;&gt;
                            &lt;i class=&quot;fa-solid fa-ranking-star text-indigo-600&quot;&gt;&lt;/i&gt; Top Ranked Backlog
                        &lt;/h3&gt;
                        &lt;span id=&quot;idea-count&quot; class=&quot;text-xs font-semibold bg-slate-100 text-slate-600 px-3 py-1 rounded-full&quot;&gt;0 Ideas&lt;/span&gt;
                    &lt;/div&gt;

                    &lt;div id=&quot;leaderboard-container&quot; class=&quot;grid grid-cols-1 sm:grid-cols-2 gap-4&quot;&gt;
                        &lt;!-- Rendered by JS --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Right Col: Formula Reference &amp; Guide --&gt;
                &lt;div class=&quot;bg-slate-50 border border-slate-200 rounded-2xl p-5 sm:p-6 flex flex-col justify-between space-y-4&quot;&gt;
                    &lt;div&gt;
                        &lt;h4 class=&quot;text-xs sm:text-sm font-bold uppercase tracking-wider text-slate-500 mb-3 flex items-center gap-2&quot;&gt;
                            &lt;i class=&quot;fa-solid fa-circle-info text-indigo-500&quot;&gt;&lt;/i&gt; The RICE Formula
                        &lt;/h4&gt;
                        &lt;div class=&quot;bg-white p-3.5 sm:p-4 rounded-xl border border-slate-200 text-center shadow-xs&quot;&gt;
                            &lt;span class=&quot;text-xs sm:text-sm font-extrabold text-indigo-600 tracking-wide&quot;&gt;(Reach × Impact × Confidence) ÷ Effort&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;ul class=&quot;text-xs text-slate-600 space-y-2.5 mt-4&quot;&gt;
                            &lt;li&gt;&lt;strong class=&quot;text-slate-800&quot;&gt;Reach:&lt;/strong&gt; Users impacted per quarter/month.&lt;/li&gt;
                            &lt;li&gt;&lt;strong class=&quot;text-slate-800&quot;&gt;Impact:&lt;/strong&gt; Value per user (0.5 to 5.0).&lt;/li&gt;
                            &lt;li&gt;&lt;strong class=&quot;text-slate-800&quot;&gt;Confidence:&lt;/strong&gt; Certainty percentage (20% to 100%).&lt;/li&gt;
                            &lt;li&gt;&lt;strong class=&quot;text-slate-800&quot;&gt;Effort:&lt;/strong&gt; Person-months required (min 0.25).&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;pt-3 border-t border-slate-200 text-[11px] text-slate-400 italic text-center&quot;&gt;
                        Automatically sorted by highest RICE score.
                    &lt;/div&gt;
                &lt;/div&gt;

            &lt;/div&gt;

            &lt;!-- Comprehensive Data Table --&gt;
            &lt;div class=&quot;bg-white border border-slate-200 rounded-2xl p-4 sm:p-6 shadow-xs min-w-0&quot;&gt;
                &lt;div class=&quot;flex justify-between items-center mb-4&quot;&gt;
                    &lt;h3 class=&quot;text-base sm:text-lg font-bold text-slate-800 flex items-center gap-2&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-table-list text-indigo-600&quot;&gt;&lt;/i&gt; Detailed Backlog Matrix
                    &lt;/h3&gt;
                &lt;/div&gt;
                &lt;div class=&quot;overflow-x-auto custom-scrollbar -mx-4 sm:mx-0 px-4 sm:px-0&quot;&gt;
                    &lt;table class=&quot;w-full text-left border-collapse min-w-[640px]&quot;&gt;
                        &lt;thead&gt;
                            &lt;tr class=&quot;border-b border-slate-200 text-slate-400 text-xs uppercase tracking-wider&quot;&gt;
                                &lt;th class=&quot;p-3 font-semibold&quot;&gt;Rank &amp; Idea Name&lt;/th&gt;
                                &lt;th class=&quot;p-3 font-semibold text-center&quot;&gt;Reach&lt;/th&gt;
                                &lt;th class=&quot;p-3 font-semibold text-center&quot;&gt;Impact&lt;/th&gt;
                                &lt;th class=&quot;p-3 font-semibold text-center&quot;&gt;Confidence&lt;/th&gt;
                                &lt;th class=&quot;p-3 font-semibold text-center&quot;&gt;Effort&lt;/th&gt;
                                &lt;th class=&quot;p-3 font-semibold text-center&quot;&gt;RICE Score&lt;/th&gt;
                                &lt;th class=&quot;p-3 font-semibold text-right&quot;&gt;Actions&lt;/th&gt;
                            &lt;/tr&gt;
                        &lt;/thead&gt;
                        &lt;tbody id=&quot;table-body&quot; class=&quot;divide-y divide-slate-100 text-sm&quot;&gt;
                            &lt;!-- Rendered by JS --&gt;
                        &lt;/tbody&gt;
                    &lt;/table&gt;
                &lt;/div&gt;
            &lt;/div&gt;

        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Add / Edit Modal --&gt;
    &lt;div id=&quot;idea-modal&quot; class=&quot;fixed inset-0 bg-slate-900/50 backdrop-blur-sm hidden flex items-center justify-center p-3 sm:p-4 z-50&quot;&gt;
        &lt;div class=&quot;bg-white rounded-2xl shadow-2xl max-w-lg w-full p-5 sm:p-6 md:p-8 space-y-6 transform transition-all max-h-[90vh] overflow-y-auto custom-scrollbar&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center&quot;&gt;
                &lt;h3 id=&quot;modal-title&quot; class=&quot;text-lg sm:text-xl font-bold text-slate-800&quot;&gt;Add New Idea&lt;/h3&gt;
                &lt;button onclick=&quot;closeModal()&quot; class=&quot;text-slate-400 hover:text-slate-600 p-1&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-xmark text-lg&quot;&gt;&lt;/i&gt;
                &lt;/button&gt;
            &lt;/div&gt;
            
            &lt;input type=&quot;hidden&quot; id=&quot;edit-id&quot;&gt;
            
            &lt;div class=&quot;space-y-4&quot;&gt;
                &lt;div&gt;
                    &lt;label class=&quot;block text-xs font-bold uppercase text-slate-500 mb-1&quot;&gt;Idea / Feature Title&lt;/label&gt;
                    &lt;input type=&quot;text&quot; id=&quot;idea-name&quot; class=&quot;w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-3 text-slate-800 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 font-medium text-sm&quot; placeholder=&quot;e.g., Advanced Analytics Dashboard&quot;&gt;
                &lt;/div&gt;

                &lt;div&gt;
                    &lt;label class=&quot;block text-xs font-bold uppercase text-slate-500 mb-1&quot;&gt;Description / Notes (Optional)&lt;/label&gt;
                    &lt;textarea id=&quot;idea-desc&quot; rows=&quot;2&quot; class=&quot;w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-2.5 text-slate-800 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 text-sm&quot; placeholder=&quot;Brief description of the value or implementation...&quot;&gt;&lt;/textarea&gt;
                &lt;/div&gt;

                &lt;div class=&quot;grid grid-cols-1 sm:grid-cols-2 gap-4&quot;&gt;
                    &lt;div&gt;
                        &lt;div class=&quot;flex justify-between text-xs font-bold uppercase text-slate-500 mb-1&quot;&gt;
                            &lt;span&gt;Reach (Users / Mo)&lt;/span&gt;
                            &lt;span id=&quot;reach-val&quot; class=&quot;text-indigo-600 font-bold&quot;&gt;500&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;input type=&quot;number&quot; id=&quot;idea-reach&quot; min=&quot;1&quot; max=&quot;100000&quot; value=&quot;500&quot; class=&quot;w-full bg-slate-50 border border-slate-300 rounded-xl px-3 py-2 text-slate-800 text-sm focus:outline-none focus:border-indigo-500&quot; oninput=&quot;document.getElementById(&#39;reach-val&#39;).innerText = this.value; updateLiveScore();&quot;&gt;
                    &lt;/div&gt;

                    &lt;div&gt;
                        &lt;div class=&quot;flex justify-between text-xs font-bold uppercase text-slate-500 mb-1&quot;&gt;
                            &lt;span&gt;Impact (0.5 - 5.0)&lt;/span&gt;
                            &lt;span id=&quot;impact-val&quot; class=&quot;text-indigo-600 font-bold&quot;&gt;3.0&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;input type=&quot;number&quot; id=&quot;idea-impact&quot; min=&quot;0.25&quot; max=&quot;5&quot; step=&quot;0.25&quot; value=&quot;3&quot; class=&quot;w-full bg-slate-50 border border-slate-300 rounded-xl px-3 py-2 text-slate-800 text-sm focus:outline-none focus:border-indigo-500&quot; oninput=&quot;document.getElementById(&#39;impact-val&#39;).innerText = this.value; updateLiveScore();&quot;&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class=&quot;grid grid-cols-1 sm:grid-cols-2 gap-4&quot;&gt;
                    &lt;div&gt;
                        &lt;div class=&quot;flex justify-between text-xs font-bold uppercase text-slate-500 mb-1&quot;&gt;
                            &lt;span&gt;Confidence (%)&lt;/span&gt;
                            &lt;span id=&quot;conf-val&quot; class=&quot;text-indigo-600 font-bold&quot;&gt;80%&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;input type=&quot;range&quot; id=&quot;idea-conf&quot; min=&quot;20&quot; max=&quot;100&quot; step=&quot;10&quot; value=&quot;80&quot; class=&quot;slider mt-2&quot; oninput=&quot;document.getElementById(&#39;conf-val&#39;).innerText = this.value + &#39;%&#39;; updateLiveScore();&quot;&gt;
                    &lt;/div&gt;

                    &lt;div&gt;
                        &lt;div class=&quot;flex justify-between text-xs font-bold uppercase text-slate-500 mb-1&quot;&gt;
                            &lt;span&gt;Effort (Person-Months)&lt;/span&gt;
                            &lt;span id=&quot;effort-val&quot; class=&quot;text-indigo-600 font-bold&quot;&gt;2.0&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;input type=&quot;number&quot; id=&quot;idea-effort&quot; min=&quot;0.25&quot; max=&quot;24&quot; step=&quot;0.25&quot; value=&quot;2&quot; class=&quot;w-full bg-slate-50 border border-slate-300 rounded-xl px-3 py-2 text-slate-800 text-sm focus:outline-none focus:border-indigo-500&quot; oninput=&quot;document.getElementById(&#39;effort-val&#39;).innerText = this.value; updateLiveScore();&quot;&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Live Score Preview Box --&gt;
                &lt;div class=&quot;bg-indigo-50 border border-indigo-200 rounded-xl p-4 flex items-center justify-between&quot;&gt;
                    &lt;span class=&quot;text-xs font-bold uppercase tracking-wider text-indigo-700&quot;&gt;Calculated RICE Score:&lt;/span&gt;
                    &lt;span id=&quot;live-score-preview&quot; class=&quot;text-xl sm:text-2xl font-black text-indigo-700&quot;&gt;600&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class=&quot;flex justify-end gap-3 pt-2&quot;&gt;
                &lt;button onclick=&quot;closeModal()&quot; class=&quot;bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 sm:px-5 py-2.5 rounded-xl text-sm font-semibold transition-colors&quot;&gt;Cancel&lt;/button&gt;
                &lt;button onclick=&quot;saveIdea()&quot; class=&quot;bg-indigo-600 hover:bg-indigo-500 text-white px-5 sm:px-6 py-2.5 rounded-xl text-sm font-semibold transition-colors shadow-md&quot;&gt;Save Idea&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Custom Delete Confirmation Modal --&gt;
    &lt;div id=&quot;delete-modal&quot; class=&quot;fixed inset-0 bg-slate-900/50 backdrop-blur-sm hidden flex items-center justify-center p-4 z-50&quot;&gt;
        &lt;div class=&quot;bg-white rounded-2xl shadow-2xl max-w-sm w-full p-6 text-center space-y-4&quot;&gt;
            &lt;div class=&quot;w-12 h-12 bg-rose-100 text-rose-600 rounded-full flex items-center justify-center mx-auto text-xl&quot;&gt;
                &lt;i class=&quot;fa-solid fa-triangle-exclamation&quot;&gt;&lt;/i&gt;
            &lt;/div&gt;
            &lt;h3 class=&quot;text-lg font-bold text-slate-800&quot;&gt;Delete Idea?&lt;/h3&gt;
            &lt;p class=&quot;text-sm text-slate-500&quot;&gt;Are you sure you want to remove this item from your backlog?&lt;/p&gt;
            &lt;input type=&quot;hidden&quot; id=&quot;delete-id&quot;&gt;
            &lt;div class=&quot;flex gap-3 pt-2&quot;&gt;
                &lt;button onclick=&quot;closeDeleteModal()&quot; class=&quot;flex-1 bg-slate-100 hover:bg-slate-200 text-slate-700 py-2.5 rounded-xl text-sm font-semibold transition-colors&quot;&gt;Cancel&lt;/button&gt;
                &lt;button onclick=&quot;confirmDelete()&quot; class=&quot;flex-1 bg-rose-600 hover:bg-rose-500 text-white py-2.5 rounded-xl text-sm font-semibold transition-colors shadow-sm&quot;&gt;Delete&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Toast Notification --&gt;
    &lt;div id=&quot;toast&quot; class=&quot;fixed bottom-5 right-5 bg-slate-800 text-white px-4 sm:px-5 py-3 rounded-xl shadow-2xl opacity-0 pointer-events-none transition-opacity duration-300 flex items-center gap-3 z-50 text-xs sm:text-sm&quot;&gt;
        &lt;i class=&quot;fa-solid fa-circle-check text-emerald-400 text-base sm:text-lg&quot;&gt;&lt;/i&gt;
        &lt;span id=&quot;toast-message&quot; class=&quot;font-medium&quot;&gt;Action successful!&lt;/span&gt;
    &lt;/div&gt;

    &lt;script&gt;
        let ideas = [
            { id: &#39;1&#39;, name: &#39;Advanced Analytics Dashboard&#39;, desc: &#39;Custom reporting and real-time usage metrics for enterprise plans.&#39;, reach: 1200, impact: 3.0, confidence: 80, effort: 3.0 },
            { id: &#39;2&#39;, name: &#39;Single Sign-On (SSO / SAML)&#39;, desc: &#39;Enterprise security integration required for Fortune 500 prospects.&#39;, reach: 450, impact: 3.0, confidence: 90, effort: 2.0 },
            { id: &#39;3&#39;, name: &#39;Dark Mode UI Theme&#39;, desc: &#39;Requested heavily by developers and night-shift users.&#39;, reach: 3500, impact: 1.0, confidence: 70, effort: 1.5 },
            { id: &#39;4&#39;, name: &#39;Automated Billing Reminders&#39;, desc: &#39;Email alerts for expiring credit cards to reduce churn.&#39;, reach: 800, impact: 2.0, confidence: 80, effort: 1.0 }
        ];

        function calculateRICE(reach, impact, confidence, effort) {
            const confDecimal = confidence / 100;
            const eff = effort &gt; 0 ? effort : 0.5;
            return Math.round((reach * impact * confDecimal) / eff);
        }

        function updateLiveScore() {
            const reach = parseFloat(document.getElementById(&#39;idea-reach&#39;).value) || 0;
            const impact = parseFloat(document.getElementById(&#39;idea-impact&#39;).value) || 0;
            const confidence = parseFloat(document.getElementById(&#39;idea-conf&#39;).value) || 0;
            const effort = parseFloat(document.getElementById(&#39;idea-effort&#39;).value) || 0.5;
            
            const score = calculateRICE(reach, impact, confidence, effort);
            document.getElementById(&#39;live-score-preview&#39;).innerText = score.toLocaleString();
        }

        function renderApp() {
            ideas.sort((a, b) =&gt; {
                const scoreA = calculateRICE(a.reach, a.impact, a.confidence, a.effort);
                const scoreB = calculateRICE(b.reach, b.impact, b.confidence, b.effort);
                return scoreB - scoreA;
            });

            const topSpotlight = document.getElementById(&#39;top-spotlight&#39;);
            const leaderboardContainer = document.getElementById(&#39;leaderboard-container&#39;);
            const tableBody = document.getElementById(&#39;table-body&#39;);

            if (ideas.length === 0) {
                topSpotlight.innerHTML = `
                    &lt;div class=&quot;text-center py-6 w-full&quot;&gt;
                        &lt;p class=&quot;text-slate-400 text-sm&quot;&gt;No ideas in your backlog. Click &#39;Add Idea&#39; to get started!&lt;/p&gt;
                    &lt;/div&gt;
                `;
                leaderboardContainer.innerHTML = `&lt;p class=&quot;text-xs text-slate-400 italic col-span-2&quot;&gt;No backlog items.&lt;/p&gt;`;
                tableBody.innerHTML = `&lt;tr&gt;&lt;td colspan=&quot;7&quot; class=&quot;p-6 text-center text-slate-400&quot;&gt;No ideas added yet.&lt;/td&gt;&lt;/tr&gt;`;
                document.getElementById(&#39;idea-count&#39;).innerText = &#39;0 Ideas&#39;;
                return;
            }

            const top = ideas[0];
            const topScore = calculateRICE(top.reach, top.impact, top.confidence, top.effort);
            topSpotlight.innerHTML = `
                &lt;div class=&quot;space-y-2 min-w-0 flex-1&quot;&gt;
                    &lt;div class=&quot;flex flex-wrap items-center gap-2&quot;&gt;
                        &lt;span class=&quot;bg-indigo-600 text-white text-[11px] sm:text-xs font-bold px-2.5 py-1 rounded-md flex items-center gap-1.5 shadow-xs whitespace-nowrap&quot;&gt;
                            &lt;i class=&quot;fa-solid fa-trophy&quot;&gt;&lt;/i&gt; #1 TOP PRIORITY
                        &lt;/span&gt;
                        &lt;span class=&quot;text-xs font-semibold text-slate-500 whitespace-nowrap&quot;&gt;RICE Score: &lt;strong class=&quot;text-indigo-600 text-sm&quot;&gt;${topScore.toLocaleString()}&lt;/strong&gt;&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;h3 class=&quot;text-lg sm:text-xl font-bold text-slate-900 truncate&quot; title=&quot;${top.name}&quot;&gt;${top.name}&lt;/h3&gt;
                    &lt;p class=&quot;text-xs text-slate-600 line-clamp-1&quot;&gt;${top.desc || &#39;No description provided.&#39;}&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class=&quot;flex items-center gap-2 sm:gap-3 shrink-0 w-full lg:w-auto justify-between lg:justify-end pt-2 lg:pt-0 border-t lg:border-t-0 border-indigo-100&quot;&gt;
                    &lt;div class=&quot;bg-white/90 border border-indigo-100 p-2.5 sm:p-3 rounded-xl text-center shadow-xs flex-1 lg:flex-initial min-w-[70px]&quot;&gt;
                        &lt;span class=&quot;block text-[9px] sm:text-[10px] uppercase font-bold text-slate-400&quot;&gt;Reach&lt;/span&gt;
                        &lt;span class=&quot;text-xs sm:text-sm font-bold text-slate-800&quot;&gt;${top.reach}&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;bg-white/90 border border-indigo-100 p-2.5 sm:p-3 rounded-xl text-center shadow-xs flex-1 lg:flex-initial min-w-[70px]&quot;&gt;
                        &lt;span class=&quot;block text-[9px] sm:text-[10px] uppercase font-bold text-slate-400&quot;&gt;Impact&lt;/span&gt;
                        &lt;span class=&quot;text-xs sm:text-sm font-bold text-indigo-600&quot;&gt;${top.impact}&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;bg-white/90 border border-indigo-100 p-2.5 sm:p-3 rounded-xl text-center shadow-xs flex-1 lg:flex-initial min-w-[70px]&quot;&gt;
                        &lt;span class=&quot;block text-[9px] sm:text-[10px] uppercase font-bold text-slate-400&quot;&gt;Effort&lt;/span&gt;
                        &lt;span class=&quot;text-xs sm:text-sm font-bold text-slate-800&quot;&gt;${top.effort}m&lt;/span&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `;

            let leaderboardHTML = &#39;&#39;;
            let tableHTML = &#39;&#39;;

            ideas.forEach((item, index) =&gt; {
                const score = calculateRICE(item.reach, item.impact, item.confidence, item.effort);
                
                if (index &lt; 4) {
                    leaderboardHTML += `
                        &lt;div class=&quot;bg-white p-4 sm:p-5 rounded-xl border border-slate-200 shadow-xs hover:border-indigo-400 transition-all flex flex-col justify-between group min-w-0&quot;&gt;
                            &lt;div&gt;
                                &lt;div class=&quot;flex justify-between items-start mb-2 gap-2&quot;&gt;
                                    &lt;span class=&quot;text-xs font-bold bg-slate-100 text-slate-700 px-2 py-0.5 rounded-md whitespace-nowrap&quot;&gt;Rank #${index + 1}&lt;/span&gt;
                                    &lt;span class=&quot;text-xs font-black bg-indigo-50 text-indigo-700 px-2 py-0.5 rounded-md border border-indigo-100 whitespace-nowrap&quot;&gt;Score: ${score.toLocaleString()}&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;h4 class=&quot;font-bold text-slate-800 text-sm mb-1 truncate&quot; title=&quot;${item.name}&quot;&gt;${item.name}&lt;/h4&gt;
                                &lt;p class=&quot;text-xs text-slate-500 line-clamp-2 mb-3&quot;&gt;${item.desc || &#39;No description&#39;}&lt;/p&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;flex items-center justify-between pt-3 border-t border-slate-100 text-[11px] text-slate-500 font-medium&quot;&gt;
                                &lt;span class=&quot;truncate&quot;&gt;Reach: &lt;strong&gt;${item.reach}&lt;/strong&gt;&lt;/span&gt;
                                &lt;span class=&quot;whitespace-nowrap&quot;&gt;Effort: &lt;strong&gt;${item.effort}m&lt;/strong&gt;&lt;/span&gt;
                                &lt;div class=&quot;flex gap-2 shrink-0&quot;&gt;
                                    &lt;button onclick=&quot;openEditModal(&#39;${item.id}&#39;)&quot; class=&quot;text-slate-400 hover:text-indigo-600 p-1&quot; title=&quot;Edit&quot;&gt;&lt;i class=&quot;fa-solid fa-pen&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                                    &lt;button onclick=&quot;openDeleteModal(&#39;${item.id}&#39;)&quot; class=&quot;text-slate-400 hover:text-rose-600 p-1&quot; title=&quot;Delete&quot;&gt;&lt;i class=&quot;fa-solid fa-trash-can&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    `;
                }

                tableHTML += `
                    &lt;tr class=&quot;hover:bg-slate-50/80 transition-colors&quot;&gt;
                        &lt;td class=&quot;p-3&quot;&gt;
                            &lt;div class=&quot;flex items-center gap-3 min-w-0&quot;&gt;
                                &lt;span class=&quot;w-6 h-6 rounded-full bg-slate-100 text-slate-600 font-bold text-xs flex items-center justify-center shrink-0&quot;&gt;#${index + 1}&lt;/span&gt;
                                &lt;div class=&quot;min-w-0&quot;&gt;
                                    &lt;p class=&quot;font-bold text-slate-800 truncate&quot; title=&quot;${item.name}&quot;&gt;${item.name}&lt;/p&gt;
                                    &lt;p class=&quot;text-xs text-slate-400 truncate&quot;&gt;${item.desc || &#39;&#39;}&lt;/p&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/td&gt;
                        &lt;td class=&quot;p-3 text-center font-medium text-slate-600 whitespace-nowrap&quot;&gt;${item.reach.toLocaleString()}&lt;/td&gt;
                        &lt;td class=&quot;p-3 text-center font-semibold text-indigo-600 whitespace-nowrap&quot;&gt;${item.impact}&lt;/td&gt;
                        &lt;td class=&quot;p-3 text-center text-slate-600 whitespace-nowrap&quot;&gt;${item.confidence}%&lt;/td&gt;
                        &lt;td class=&quot;p-3 text-center text-slate-600 whitespace-nowrap&quot;&gt;${item.effort} mo&lt;/td&gt;
                        &lt;td class=&quot;p-3 text-center whitespace-nowrap&quot;&gt;
                            &lt;span class=&quot;bg-indigo-50 text-indigo-700 font-black px-3 py-1 rounded-lg text-xs border border-indigo-100&quot;&gt;${score.toLocaleString()}&lt;/span&gt;
                        &lt;/td&gt;
                        &lt;td class=&quot;p-3 text-right space-x-1 whitespace-nowrap&quot;&gt;
                            &lt;button onclick=&quot;openEditModal(&#39;${item.id}&#39;)&quot; class=&quot;text-slate-400 hover:text-indigo-600 p-1.5 transition-colors&quot; title=&quot;Edit&quot;&gt;&lt;i class=&quot;fa-solid fa-pen text-xs&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                            &lt;button onclick=&quot;openDeleteModal(&#39;${item.id}&#39;)&quot; class=&quot;text-slate-400 hover:text-rose-600 p-1.5 transition-colors&quot; title=&quot;Delete&quot;&gt;&lt;i class=&quot;fa-solid fa-trash-can text-xs&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                        &lt;/td&gt;
                    &lt;/tr&gt;
                `;
            });

            leaderboardContainer.innerHTML = leaderboardHTML;
            tableBody.innerHTML = tableHTML;
            document.getElementById(&#39;idea-count&#39;).innerText = `${ideas.length} Idea${ideas.length === 1 ? &#39;&#39; : &#39;s&#39;}`;
        }

        function openAddModal() {
            document.getElementById(&#39;modal-title&#39;).innerText = &#39;Add New Idea&#39;;
            document.getElementById(&#39;edit-id&#39;).value = &#39;&#39;;
            document.getElementById(&#39;idea-name&#39;).value = &#39;&#39;;
            document.getElementById(&#39;idea-desc&#39;).value = &#39;&#39;;
            document.getElementById(&#39;idea-reach&#39;).value = 500;
            document.getElementById(&#39;reach-val&#39;).innerText = &#39;500&#39;;
            document.getElementById(&#39;idea-impact&#39;).value = 3;
            document.getElementById(&#39;impact-val&#39;).innerText = &#39;3&#39;;
            document.getElementById(&#39;idea-conf&#39;).value = 80;
            document.getElementById(&#39;conf-val&#39;).innerText = &#39;80%&#39;;
            document.getElementById(&#39;idea-effort&#39;).value = 2;
            document.getElementById(&#39;effort-val&#39;).innerText = &#39;2.0&#39;;
            updateLiveScore();
            document.getElementById(&#39;idea-modal&#39;).classList.remove(&#39;hidden&#39;);
        }

        function openEditModal(id) {
            const item = ideas.find(i =&gt; i.id === id);
            if (!item) return;

            document.getElementById(&#39;modal-title&#39;).innerText = &#39;Edit Idea&#39;;
            document.getElementById(&#39;edit-id&#39;).value = item.id;
            document.getElementById(&#39;idea-name&#39;).value = item.name;
            document.getElementById(&#39;idea-desc&#39;).value = item.desc || &#39;&#39;;
            document.getElementById(&#39;idea-reach&#39;).value = item.reach;
            document.getElementById(&#39;reach-val&#39;).innerText = item.reach;
            document.getElementById(&#39;idea-impact&#39;).value = item.impact;
            document.getElementById(&#39;impact-val&#39;).innerText = item.impact;
            document.getElementById(&#39;idea-conf&#39;).value = item.confidence;
            document.getElementById(&#39;conf-val&#39;).innerText = item.confidence + &#39;%&#39;;
            document.getElementById(&#39;idea-effort&#39;).value = item.effort;
            document.getElementById(&#39;effort-val&#39;).innerText = item.effort;
            updateLiveScore();
            document.getElementById(&#39;idea-modal&#39;).classList.remove(&#39;hidden&#39;);
        }

        function closeModal() {
            document.getElementById(&#39;idea-modal&#39;).classList.add(&#39;hidden&#39;);
        }

        function saveIdea() {
            const id = document.getElementById(&#39;edit-id&#39;).value;
            const name = document.getElementById(&#39;idea-name&#39;).value.trim();
            const desc = document.getElementById(&#39;idea-desc&#39;).value.trim();
            const reach = parseFloat(document.getElementById(&#39;idea-reach&#39;).value) || 0;
            const impact = parseFloat(document.getElementById(&#39;idea-impact&#39;).value) || 1;
            const confidence = parseFloat(document.getElementById(&#39;idea-conf&#39;).value) || 80;
            const effort = parseFloat(document.getElementById(&#39;idea-effort&#39;).value) || 1;

            if (!name) {
                showToast(&#39;Please enter an idea title.&#39;, true);
                return;
            }

            if (id) {
                const item = ideas.find(i =&gt; i.id === id);
                if (item) {
                    item.name = name;
                    item.desc = desc;
                    item.reach = reach;
                    item.impact = impact;
                    item.confidence = confidence;
                    item.effort = effort;
                }
                showToast(&#39;Idea updated successfully!&#39;);
            } else {
                const newItem = {
                    id: &#39;idea_&#39; + Math.random().toString(36).substr(2, 9),
                    name,
                    desc,
                    reach,
                    impact,
                    confidence,
                    effort
                };
                ideas.push(newItem);
                showToast(&#39;Idea added successfully!&#39;);
            }

            closeModal();
            renderApp();
        }

        function openDeleteModal(id) {
            document.getElementById(&#39;delete-id&#39;).value = id;
            document.getElementById(&#39;delete-modal&#39;).classList.remove(&#39;hidden&#39;);
        }

        function closeDeleteModal() {
            document.getElementById(&#39;delete-modal&#39;).classList.add(&#39;hidden&#39;);
        }

        function confirmDelete() {
            const id = document.getElementById(&#39;delete-id&#39;).value;
            ideas = ideas.filter(i =&gt; i.id !== id);
            closeDeleteModal();
            renderApp();
            showToast(&#39;Idea removed from backlog.&#39;);
        }

        function showToast(message, isError = false) {
            const toast = document.getElementById(&#39;toast&#39;);
            document.getElementById(&#39;toast-message&#39;).innerText = message;
            toast.style.opacity = &#39;1&#39;;
            setTimeout(() =&gt; { toast.style.opacity = &#39;0&#39;; }, 3000);
        }

        window.onload = () =&gt; {
            renderApp();
        };
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/7525514416137228358/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/7525514416137228358' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/7525514416137228358'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/7525514416137228358'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2026/10/what-should-we-build-next-use-this-free.html' title='What Should We Build Next? Use This Free RICE Calculator to Decide'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD-XFPUolyhyphenhyphenN0Rq1CCO2RpEx0qkMAjEH5PF_vMmxmK3sJomactPNLNPD-e_tRk1sEQQLmHYJRt4alt4awiK9nyC617esGw1-OfbtKA4tbUtg8beViGya2T5d3EJtydcu6YgpoIubdPh8bHHPY40TMC0xYjCvT1UGBCbNfSeg7d4oOCLwUTi-jbhE360gj/s72-c/RICE%20Calculator.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-3652563112200785567</id><published>2026-10-12T11:35:56.046+05:00</published><updated>2026-10-12T11:39:51.780+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="business"/><category scheme="http://www.blogger.com/atom/ns#" term="decision making"/><category scheme="http://www.blogger.com/atom/ns#" term="psychology"/><title type='text'>Stop Guessing: Use this Interactive Impact vs. Effort Matrix to Find Your Quick Wins and Make Better Decisions</title><content type='html'>
&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsG1j0egsWPn6CmZHaczaTTnklLv1T-gdyUjj7kj_Jq8vmGE1vCZCi-Wk98H7jEPjVxtqcWFnEPGDOdjdMBouXFaKwg3fn9WLZwf3DJUAKZnl2mNI8_Vmd7pX0wwjXZlQ9EplVbLu0pu2ehX2ylFOExMr-w4fqILi-7MY-w8MWbNZHgiDAfm2XiTta0E5r/s1376/Prioritize%20versus%20effort%20matrix.jpeg&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;600&quot; data-original-height=&quot;768&quot; data-original-width=&quot;1376&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsG1j0egsWPn6CmZHaczaTTnklLv1T-gdyUjj7kj_Jq8vmGE1vCZCi-Wk98H7jEPjVxtqcWFnEPGDOdjdMBouXFaKwg3fn9WLZwf3DJUAKZnl2mNI8_Vmd7pX0wwjXZlQ9EplVbLu0pu2ehX2ylFOExMr-w4fqILi-7MY-w8MWbNZHgiDAfm2XiTta0E5r/s600/Prioritize%20versus%20effort%20matrix.jpeg&quot;/&gt;&lt;/a&gt;&lt;/div&gt;

===========================

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;2x2 Impact vs. Effort Matrix&lt;/title&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;style&gt;
        @import url(&#39;https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;display=swap&#39;);
        
        body {
            font-family: &#39;Inter&#39;, sans-serif;
            background-color: #f8fafc;
            overflow-wrap: break-word;
            word-break: normal;
        }

        * {
            overflow-wrap: break-word;
        }

        .slider {
            -webkit-appearance: none;
            width: 100%;
            height: 8px;
            border-radius: 4px;
            background: #e2e8f0;
            outline: none;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #3b82f6;
            cursor: pointer;
            transition: all 0.2s;
            border: 2px solid #ffffff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.15);
        }

        .slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #3b82f6;
            cursor: pointer;
            border: 2px solid #ffffff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.15);
        }

        /* Custom scrollbar */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;p-3 sm:p-6 md:p-8&quot;&gt;

    &lt;div class=&quot;max-w-6xl mx-auto bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden&quot;&gt;
        
        &lt;!-- Header --&gt;
        &lt;div class=&quot;bg-slate-800 text-white p-5 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4&quot;&gt;
            &lt;div&gt;
                &lt;h2 class=&quot;text-xl sm:text-2xl font-bold flex items-center gap-2&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-chart-pie text-blue-400&quot;&gt;&lt;/i&gt;
                    Impact vs. Effort Matrix
                &lt;/h2&gt;
                &lt;p class=&quot;text-slate-300 text-xs sm:text-sm mt-1&quot;&gt;Filter and prioritize options before deep evaluation.&lt;/p&gt;
            &lt;/div&gt;
            &lt;button onclick=&quot;openAddModal()&quot; class=&quot;bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 shadow-sm whitespace-nowrap&quot;&gt;
                &lt;i class=&quot;fa-solid fa-plus&quot;&gt;&lt;/i&gt; Add Option
            &lt;/button&gt;
        &lt;/div&gt;

        &lt;div class=&quot;p-4 sm:p-6 md:p-8 space-y-8&quot;&gt;
            
            &lt;!-- 2x2 Grid Visualizer --&gt;
            &lt;div class=&quot;relative bg-slate-50 border border-slate-200 rounded-2xl p-4 sm:p-6 lg:p-10 pt-12 pb-12&quot;&gt;
                
                &lt;!-- Axis Labels --&gt;
                &lt;div class=&quot;absolute top-3 left-1/2 -translate-x-1/2 text-[11px] sm:text-xs font-bold uppercase tracking-wider text-slate-500 bg-slate-100 px-3 py-0.5 rounded-full border border-slate-200 shadow-2xs&quot;&gt;High Impact&lt;/div&gt;
                &lt;div class=&quot;absolute bottom-3 left-1/2 -translate-x-1/2 text-[11px] sm:text-xs font-bold uppercase tracking-wider text-slate-500 bg-slate-100 px-3 py-0.5 rounded-full border border-slate-200 shadow-2xs&quot;&gt;Low Impact&lt;/div&gt;
                &lt;div class=&quot;absolute left-2 top-1/2 -translate-y-1/2 -rotate-90 text-[11px] sm:text-xs font-bold uppercase tracking-wider text-slate-500 bg-slate-100 px-2 py-0.5 rounded-full border border-slate-200 hidden md:block shadow-2xs&quot;&gt;Effort&lt;/div&gt;
                &lt;div class=&quot;absolute right-2 top-1/2 -translate-y-1/2 rotate-90 text-[11px] sm:text-xs font-bold uppercase tracking-wider text-slate-500 bg-slate-100 px-2 py-0.5 rounded-full border border-slate-200 hidden md:block shadow-2xs&quot;&gt;Effort&lt;/div&gt;

                &lt;!-- 2x2 Quadrants Container --&gt;
                &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-4 min-h-[500px] my-2&quot;&gt;
                    
                    &lt;!-- Top-Left: Major Projects (High Impact, High Effort) --&gt;
                    &lt;div class=&quot;bg-amber-50/60 border-2 border-amber-200 rounded-xl p-4 sm:p-5 flex flex-col justify-between relative overflow-hidden&quot;&gt;
                        &lt;div&gt;
                            &lt;div class=&quot;flex flex-wrap justify-between items-center gap-2 mb-3&quot;&gt;
                                &lt;span class=&quot;bg-amber-100 text-amber-800 text-xs font-bold px-2.5 py-1 rounded-md flex items-center gap-1.5&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-mountain-sun&quot;&gt;&lt;/i&gt; Major Projects
                                &lt;/span&gt;
                                &lt;span class=&quot;text-[11px] text-amber-700 font-semibold&quot;&gt;High Impact • High Effort&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;p class=&quot;text-xs text-slate-600 mb-4&quot;&gt;Strategic initiatives. High reward, but require heavy planning.&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;div id=&quot;quadrant-major&quot; class=&quot;space-y-2.5 overflow-y-auto max-h-[200px] custom-scrollbar pr-1&quot;&gt;
                            &lt;!-- Rendered by JS --&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

                    &lt;!-- Top-Right: Quick Wins (High Impact, Low Effort) --&gt;
                    &lt;div class=&quot;bg-emerald-50/60 border-2 border-emerald-300 rounded-xl p-4 sm:p-5 flex flex-col justify-between relative overflow-hidden shadow-sm&quot;&gt;
                        &lt;div class=&quot;absolute top-0 right-0 bg-emerald-500 text-white text-[10px] font-bold px-3 py-1 rounded-bl-lg&quot;&gt;
                            &lt;i class=&quot;fa-solid fa-star mr-1&quot;&gt;&lt;/i&gt; PRIORITY
                        &lt;/div&gt;
                        &lt;div&gt;
                            &lt;div class=&quot;flex flex-wrap justify-between items-center gap-2 mb-3 pr-10&quot;&gt;
                                &lt;span class=&quot;bg-emerald-100 text-emerald-800 text-xs font-bold px-2.5 py-1 rounded-md flex items-center gap-1.5&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-bolt&quot;&gt;&lt;/i&gt; Quick Wins
                                &lt;/span&gt;
                                &lt;span class=&quot;text-[11px] text-emerald-700 font-semibold&quot;&gt;High Impact • Low Effort&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;p class=&quot;text-xs text-slate-600 mb-4&quot;&gt;Do these first! High return for minimal investment.&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;div id=&quot;quadrant-quick&quot; class=&quot;space-y-2.5 overflow-y-auto max-h-[200px] custom-scrollbar pr-1&quot;&gt;
                            &lt;!-- Rendered by JS --&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

                    &lt;!-- Bottom-Left: Thankless Tasks / Time Sinks (Low Impact, High Effort) --&gt;
                    &lt;div class=&quot;bg-rose-50/50 border-2 border-rose-200 rounded-xl p-4 sm:p-5 flex flex-col justify-between relative overflow-hidden&quot;&gt;
                        &lt;div&gt;
                            &lt;div class=&quot;flex flex-wrap justify-between items-center gap-2 mb-3&quot;&gt;
                                &lt;span class=&quot;bg-rose-100 text-rose-800 text-xs font-bold px-2.5 py-1 rounded-md flex items-center gap-1.5&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-triangle-exclamation&quot;&gt;&lt;/i&gt; Thankless Tasks
                                &lt;/span&gt;
                                &lt;span class=&quot;text-[11px] text-rose-700 font-semibold&quot;&gt;Low Impact • High Effort&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;p class=&quot;text-xs text-slate-600 mb-4&quot;&gt;Avoid or discard. Low return for heavy resource drain.&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;div id=&quot;quadrant-thankless&quot; class=&quot;space-y-2.5 overflow-y-auto max-h-[200px] custom-scrollbar pr-1&quot;&gt;
                            &lt;!-- Rendered by JS --&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

                    &lt;!-- Bottom-Right: Fill-Ins (Low Impact, Low Effort) --&gt;
                    &lt;div class=&quot;bg-blue-50/50 border-2 border-blue-200 rounded-xl p-4 sm:p-5 flex flex-col justify-between relative overflow-hidden&quot;&gt;
                        &lt;div&gt;
                            &lt;div class=&quot;flex flex-wrap justify-between items-center gap-2 mb-3&quot;&gt;
                                &lt;span class=&quot;bg-blue-100 text-blue-800 text-xs font-bold px-2.5 py-1 rounded-md flex items-center gap-1.5&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-list-check&quot;&gt;&lt;/i&gt; Fill-Ins
                                &lt;/span&gt;
                                &lt;span class=&quot;text-[11px] text-blue-700 font-semibold&quot;&gt;Low Impact • Low Effort&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;p class=&quot;text-xs text-slate-600 mb-4&quot;&gt;Delegatable or do when time permits if bandwidth allows.&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;div id=&quot;quadrant-fillin&quot; class=&quot;space-y-2.5 overflow-y-auto max-h-[200px] custom-scrollbar pr-1&quot;&gt;
                            &lt;!-- Rendered by JS --&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

                &lt;/div&gt;
            &lt;/div&gt;

            &lt;!-- Table Management / List View --&gt;
            &lt;div class=&quot;bg-white border border-slate-200 rounded-xl p-4 sm:p-6 shadow-xs&quot;&gt;
                &lt;div class=&quot;flex flex-wrap justify-between items-center gap-3 mb-4&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-bold text-slate-800&quot;&gt;All Evaluated Options&lt;/h3&gt;
                    &lt;span id=&quot;item-count&quot; class=&quot;text-xs font-semibold bg-slate-100 text-slate-600 px-3 py-1 rounded-full&quot;&gt;0 Options&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class=&quot;overflow-x-auto&quot;&gt;
                    &lt;table class=&quot;w-full text-left border-collapse min-w-[600px]&quot;&gt;
                        &lt;thead&gt;
                            &lt;tr class=&quot;border-b border-slate-200 text-slate-500 text-xs uppercase tracking-wider&quot;&gt;
                                &lt;th class=&quot;p-3 font-semibold&quot;&gt;Option Name&lt;/th&gt;
                                &lt;th class=&quot;p-3 font-semibold text-center&quot;&gt;Impact (1-10)&lt;/th&gt;
                                &lt;th class=&quot;p-3 font-semibold text-center&quot;&gt;Effort (1-10)&lt;/th&gt;
                                &lt;th class=&quot;p-3 font-semibold&quot;&gt;Category&lt;/th&gt;
                                &lt;th class=&quot;p-3 font-semibold text-right&quot;&gt;Actions&lt;/th&gt;
                            &lt;/tr&gt;
                        &lt;/thead&gt;
                        &lt;tbody id=&quot;options-table-body&quot; class=&quot;divide-y divide-slate-100 text-sm&quot;&gt;
                            &lt;!-- Rendered by JS --&gt;
                        &lt;/tbody&gt;
                    &lt;/table&gt;
                &lt;/div&gt;
            &lt;/div&gt;

        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Add / Edit Modal --&gt;
    &lt;div id=&quot;option-modal&quot; class=&quot;fixed inset-0 bg-slate-900/50 backdrop-blur-sm hidden flex items-center justify-center p-4 z-50&quot;&gt;
        &lt;div class=&quot;bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 space-y-6 transform transition-all&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center&quot;&gt;
                &lt;h3 id=&quot;modal-title&quot; class=&quot;text-xl font-bold text-slate-800&quot;&gt;Add New Option&lt;/h3&gt;
                &lt;button onclick=&quot;closeModal()&quot; class=&quot;text-slate-400 hover:text-slate-600 p-1&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-xmark text-lg&quot;&gt;&lt;/i&gt;
                &lt;/button&gt;
            &lt;/div&gt;
            
            &lt;input type=&quot;hidden&quot; id=&quot;edit-id&quot;&gt;
            
            &lt;div class=&quot;space-y-4&quot;&gt;
                &lt;div&gt;
                    &lt;label class=&quot;block text-xs font-bold uppercase text-slate-500 mb-1&quot;&gt;Option Name&lt;/label&gt;
                    &lt;input type=&quot;text&quot; id=&quot;option-name&quot; class=&quot;w-full bg-slate-50 border border-slate-300 rounded-lg px-4 py-2.5 text-slate-800 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 text-sm&quot; placeholder=&quot;e.g., Cloud Migration&quot;&gt;
                &lt;/div&gt;

                &lt;div&gt;
                    &lt;div class=&quot;flex justify-between text-xs font-bold uppercase text-slate-500 mb-1&quot;&gt;
                        &lt;span&gt;Impact (Value / Benefit)&lt;/span&gt;
                        &lt;span id=&quot;impact-val&quot; class=&quot;text-blue-600 font-bold&quot;&gt;5&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;input type=&quot;range&quot; id=&quot;option-impact&quot; min=&quot;1&quot; max=&quot;10&quot; value=&quot;5&quot; class=&quot;slider&quot; oninput=&quot;document.getElementById(&#39;impact-val&#39;).innerText = this.value&quot;&gt;
                &lt;/div&gt;

                &lt;div&gt;
                    &lt;div class=&quot;flex justify-between text-xs font-bold uppercase text-slate-500 mb-1&quot;&gt;
                        &lt;span&gt;Effort (Cost / Complexity)&lt;/span&gt;
                        &lt;span id=&quot;effort-val&quot; class=&quot;text-blue-600 font-bold&quot;&gt;5&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;input type=&quot;range&quot; id=&quot;option-effort&quot; min=&quot;1&quot; max=&quot;10&quot; value=&quot;5&quot; class=&quot;slider&quot; oninput=&quot;document.getElementById(&#39;effort-val&#39;).innerText = this.value&quot;&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class=&quot;flex justify-end gap-3 pt-2&quot;&gt;
                &lt;button onclick=&quot;closeModal()&quot; class=&quot;bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-lg text-sm font-medium transition-colors&quot;&gt;Cancel&lt;/button&gt;
                &lt;button onclick=&quot;saveOption()&quot; class=&quot;bg-blue-600 hover:bg-blue-500 text-white px-5 py-2 rounded-lg text-sm font-medium transition-colors shadow-sm&quot;&gt;Save Option&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Notification Toast --&gt;
    &lt;div id=&quot;toast&quot; class=&quot;fixed bottom-5 right-5 bg-slate-800 text-white px-4 py-3 rounded-lg shadow-xl opacity-0 pointer-events-none transition-opacity duration-300 flex items-center gap-3 z-50&quot;&gt;
        &lt;i class=&quot;fa-solid fa-check-circle text-emerald-400&quot;&gt;&lt;/i&gt;
        &lt;span id=&quot;toast-message&quot;&gt;Action successful!&lt;/span&gt;
    &lt;/div&gt;

    &lt;script&gt;
        let options = [
            { id: &#39;1&#39;, name: &#39;Migrate Core Infrastructure to Cloud&#39;, impact: 9, effort: 8 },
            { id: &#39;2&#39;, name: &#39;Fix Critical Checkout Bug&#39;, impact: 9, effort: 2 },
            { id: &#39;3&#39;, name: &#39;Redesign Landing Page Hero&#39;, impact: 6, effort: 4 },
            { id: &#39;4&#39;, name: &#39;Manual Legacy Database Cleanup&#39;, impact: 2, effort: 9 },
            { id: &#39;5&#39;, name: &#39;Update Copyright Footer Year&#39;, impact: 1, effort: 1 }
        ];

        function getQuadrant(impact, effort) {
            const highImpact = impact &gt;= 5.5;
            const highEffort = effort &gt;= 5.5;

            if (highImpact &amp;&amp; !highEffort) return { key: &#39;quick&#39;, name: &#39;Quick Win&#39;, badgeClass: &#39;bg-emerald-100 text-emerald-800 border-emerald-200&#39; };
            if (highImpact &amp;&amp; highEffort) return { key: &#39;major&#39;, name: &#39;Major Project&#39;, badgeClass: &#39;bg-amber-100 text-amber-800 border-amber-200&#39; };
            if (!highImpact &amp;&amp; highEffort) return { key: &#39;thankless&#39;, name: &#39;Thankless Task&#39;, badgeClass: &#39;bg-rose-100 text-rose-800 border-rose-200&#39; };
            return { key: &#39;fillin&#39;, name: &#39;Fill-In&#39;, badgeClass: &#39;bg-blue-100 text-blue-800 border-blue-200&#39; };
        }

        function renderApp() {
            const quadrants = {
                quick: document.getElementById(&#39;quadrant-quick&#39;),
                major: document.getElementById(&#39;quadrant-major&#39;),
                thankless: document.getElementById(&#39;quadrant-thankless&#39;),
                fillin: document.getElementById(&#39;quadrant-fillin&#39;)
            };
            Object.values(quadrants).forEach(q =&gt; q.innerHTML = &#39;&#39;);

            let tableHTML = &#39;&#39;;

            options.forEach(opt =&gt; {
                const quad = getQuadrant(opt.impact, opt.effort);
                
                const cardHTML = `
                    &lt;div class=&quot;bg-white p-3 rounded-lg border border-slate-200 shadow-2xs flex items-center justify-between gap-3 group hover:border-blue-400 transition-colors&quot;&gt;
                        &lt;div class=&quot;min-w-0 flex-1&quot;&gt;
                            &lt;h4 class=&quot;text-xs font-bold text-slate-800 break-words&quot; title=&quot;${opt.name}&quot;&gt;${opt.name}&lt;/h4&gt;
                            &lt;div class=&quot;flex items-center gap-2 mt-1 text-[11px] text-slate-500 font-medium&quot;&gt;
                                &lt;span&gt;Impact: &lt;strong&gt;${opt.impact}&lt;/strong&gt;&lt;/span&gt;
                                &lt;span&gt;•&lt;/span&gt;
                                &lt;span&gt;Effort: &lt;strong&gt;${opt.effort}&lt;/strong&gt;&lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;flex items-center gap-1 shrink-0 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity&quot;&gt;
                            &lt;button onclick=&quot;openEditModal(&#39;${opt.id}&#39;)&quot; class=&quot;text-slate-400 hover:text-blue-600 p-1.5&quot; title=&quot;Edit&quot;&gt;&lt;i class=&quot;fa-solid fa-pen text-xs&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                            &lt;button onclick=&quot;deleteOption(&#39;${opt.id}&#39;)&quot; class=&quot;text-slate-400 hover:text-red-500 p-1.5&quot; title=&quot;Delete&quot;&gt;&lt;i class=&quot;fa-solid fa-trash-can text-xs&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                quadrants[quad.key].innerHTML += cardHTML;

                tableHTML += `
                    &lt;tr class=&quot;hover:bg-slate-50 transition-colors&quot;&gt;
                        &lt;td class=&quot;p-3 font-medium text-slate-800 break-words max-w-xs&quot;&gt;${opt.name}&lt;/td&gt;
                        &lt;td class=&quot;p-3 text-center font-bold text-blue-600&quot;&gt;${opt.impact}&lt;/td&gt;
                        &lt;td class=&quot;p-3 text-center font-bold text-slate-600&quot;&gt;${opt.effort}&lt;/td&gt;
                        &lt;td class=&quot;p-3 whitespace-nowrap&quot;&gt;
                            &lt;span class=&quot;px-2.5 py-1 rounded-md text-xs font-semibold border ${quad.badgeClass}&quot;&gt;${quad.name}&lt;/span&gt;
                        &lt;/td&gt;
                        &lt;td class=&quot;p-3 text-right space-x-2 whitespace-nowrap&quot;&gt;
                            &lt;button onclick=&quot;openEditModal(&#39;${opt.id}&#39;)&quot; class=&quot;text-slate-400 hover:text-blue-600 transition-colors p-1&quot; title=&quot;Edit&quot;&gt;&lt;i class=&quot;fa-solid fa-pen&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                            &lt;button onclick=&quot;deleteOption(&#39;${opt.id}&#39;)&quot; class=&quot;text-slate-400 hover:text-red-500 transition-colors p-1&quot; title=&quot;Delete&quot;&gt;&lt;i class=&quot;fa-solid fa-trash-can&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                        &lt;/td&gt;
                    &lt;/tr&gt;
                `;
            });

            if (options.length === 0) {
                tableHTML = `&lt;tr&gt;&lt;td colspan=&quot;5&quot; class=&quot;p-6 text-center text-slate-400&quot;&gt;No options added yet. Click &#39;Add Option&#39; to begin.&lt;/td&gt;&lt;/tr&gt;`;
                Object.values(quadrants).forEach(q =&gt; q.innerHTML = `&lt;p class=&quot;text-xs text-slate-400 italic&quot;&gt;No options in this quadrant.&lt;/p&gt;`);
            }

            document.getElementById(&#39;options-table-body&#39;).innerHTML = tableHTML;
            document.getElementById(&#39;item-count&#39;).innerText = `${options.length} Option${options.length === 1 ? &#39;&#39; : &#39;s&#39;}`;
        }

        function openAddModal() {
            document.getElementById(&#39;modal-title&#39;).innerText = &#39;Add New Option&#39;;
            document.getElementById(&#39;edit-id&#39;).value = &#39;&#39;;
            document.getElementById(&#39;option-name&#39;).value = &#39;&#39;;
            document.getElementById(&#39;option-impact&#39;).value = 5;
            document.getElementById(&#39;impact-val&#39;).innerText = &#39;5&#39;;
            document.getElementById(&#39;option-effort&#39;).value = 5;
            document.getElementById(&#39;effort-val&#39;).innerText = &#39;5&#39;;
            document.getElementById(&#39;option-modal&#39;).classList.remove(&#39;hidden&#39;);
        }

        function openEditModal(id) {
            const opt = options.find(o =&gt; o.id === id);
            if (!opt) return;
            document.getElementById(&#39;modal-title&#39;).innerText = &#39;Edit Option&#39;;
            document.getElementById(&#39;edit-id&#39;).value = opt.id;
            document.getElementById(&#39;option-name&#39;).value = opt.name;
            document.getElementById(&#39;option-impact&#39;).value = opt.impact;
            document.getElementById(&#39;impact-val&#39;).innerText = opt.impact;
            document.getElementById(&#39;option-effort&#39;).value = opt.effort;
            document.getElementById(&#39;effort-val&#39;).innerText = opt.effort;
            document.getElementById(&#39;option-modal&#39;).classList.remove(&#39;hidden&#39;);
        }

        function closeModal() {
            document.getElementById(&#39;option-modal&#39;).classList.add(&#39;hidden&#39;);
        }

        function saveOption() {
            const id = document.getElementById(&#39;edit-id&#39;).value;
            const name = document.getElementById(&#39;option-name&#39;).value.trim();
            const impact = parseInt(document.getElementById(&#39;option-impact&#39;).value);
            const effort = parseInt(document.getElementById(&#39;option-effort&#39;).value);

            if (!name) {
                alert(&#39;Please enter an option name.&#39;);
                return;
            }

            if (id) {
                const opt = options.find(o =&gt; o.id === id);
                if (opt) {
                    opt.name = name;
                    opt.impact = impact;
                    opt.effort = effort;
                }
                showToast(&#39;Option updated successfully!&#39;);
            } else {
                const newOpt = {
                    id: &#39;opt_&#39; + Math.random().toString(36).substr(2, 9),
                    name,
                    impact,
                    effort
                };
                options.push(newOpt);
                showToast(&#39;Option added successfully!&#39;);
            }

            closeModal();
            renderApp();
        }

        function deleteOption(id) {
            if (confirm(&#39;Are you sure you want to remove this option?&#39;)) {
                options = options.filter(o =&gt; o.id !== id);
                renderApp();
                showToast(&#39;Option removed.&#39;);
            }
        }

        function showToast(message) {
            const toast = document.getElementById(&#39;toast&#39;);
            document.getElementById(&#39;toast-message&#39;).innerText = message;
            toast.style.opacity = &#39;1&#39;;
            setTimeout(() =&gt; { toast.style.opacity = &#39;0&#39;; }, 3000);
        }

        window.onload = () =&gt; {
            renderApp();
        };
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
===========================</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/3652563112200785567/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/3652563112200785567' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/3652563112200785567'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/3652563112200785567'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2026/10/stop-guessing-use-this-interactive.html' title='Stop Guessing: Use this Interactive Impact vs. Effort Matrix to Find Your Quick Wins and Make Better Decisions'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsG1j0egsWPn6CmZHaczaTTnklLv1T-gdyUjj7kj_Jq8vmGE1vCZCi-Wk98H7jEPjVxtqcWFnEPGDOdjdMBouXFaKwg3fn9WLZwf3DJUAKZnl2mNI8_Vmd7pX0wwjXZlQ9EplVbLu0pu2ehX2ylFOExMr-w4fqILi-7MY-w8MWbNZHgiDAfm2XiTta0E5r/s72-c/Prioritize%20versus%20effort%20matrix.jpeg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-1529067799885671076</id><published>2026-10-07T14:07:27.016+05:00</published><updated>2026-10-08T10:24:57.934+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Excel"/><category scheme="http://www.blogger.com/atom/ns#" term="Microsoft Excel"/><title type='text'>Excel Speedrunner — Build Muscle Memory for Lightning-Fast Spreadsheets</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZeSP4LFdjq6m_ljPg29lw9epBJPmDxMPvshV9K0-YG0s5D3yvhqOv_GsmALDLDbR1E6ASKniUQwaOT7WNmDI9llsbHMLxH0uVIUtNTDFlb3OFX2Nnbj3a3rEJnkhi4kOKhqzemYGLhpsbR1Hgk10ReiXdoZkMOzSFDRqDGBuT1A6baBPovYQnRkB4fe0X/s1376/Gemini_Generated_Image_3vk8g73vk8g73vk8.jpeg&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;600&quot; data-original-height=&quot;768&quot; data-original-width=&quot;1376&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZeSP4LFdjq6m_ljPg29lw9epBJPmDxMPvshV9K0-YG0s5D3yvhqOv_GsmALDLDbR1E6ASKniUQwaOT7WNmDI9llsbHMLxH0uVIUtNTDFlb3OFX2Nnbj3a3rEJnkhi4kOKhqzemYGLhpsbR1Hgk10ReiXdoZkMOzSFDRqDGBuT1A6baBPovYQnRkB4fe0X/s600/Gemini_Generated_Image_3vk8g73vk8g73vk8.jpeg&quot;/&gt;&lt;/a&gt;&lt;/div&gt;

======================

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot; class=&quot;h-full&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Excel &amp; Power BI Shortcut Dojo&lt;/title&gt;
    &lt;!-- Tailwind CSS CDN --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome Icons --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Fira+Code:wght@500;700&amp;family=Inter:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;script&gt;
        tailwind.config = {
            darkMode: &#39;class&#39;,
            theme: {
                extend: {
                    colors: {
                        excel: {
                            base: &#39;#0f172a&#39;,
                            panel: &#39;#1e293b&#39;,
                            card: &#39;#334155&#39;,
                            accent: &#39;#107C41&#39;,
                            accentHover: &#39;#10893E&#39;,
                            lightAccent: &#39;#22c55e&#39;
                        }
                    },
                    fontFamily: {
                        sans: [&#39;Inter&#39;, &#39;sans-serif&#39;],
                        mono: [&#39;Fira Code&#39;, &#39;monospace&#39;]
                    }
                }
            }
        }
    &lt;/script&gt;
    &lt;style&gt;
        body { font-family: &#39;Inter&#39;, sans-serif; }
        .key-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 1.8rem;
            height: 1.8rem;
            padding: 0 0.5rem;
            font-family: &#39;Fira Code&#39;, monospace;
            font-size: 0.75rem;
            font-weight: 700;
            color: #f8fafc;
            background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
            border: 1px solid #475569;
            border-bottom: 2px solid #0f172a;
            border-radius: 0.375rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            white-space: nowrap;
            flex-shrink: 0;
        }
        .key-badge-lg {
            min-width: 2.8rem;
            height: 2.8rem;
            font-size: 1rem;
            padding: 0 0.75rem;
            border-bottom-width: 3px;
        }
        .key-badge-active {
            background: linear-gradient(180deg, #107C41 0%, #0d6334 100%) !important;
            border-color: #22c55e !important;
            box-shadow: 0 0 12px rgba(34, 197, 94, 0.4) !important;
            color: #ffffff !important;
        }
        .key-badge-hint {
            background: linear-gradient(180deg, #d97706 0%, #78350f 100%) !important;
            border-color: #f59e0b !important;
            color: #ffffff !important;
        }
        .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;h-full bg-slate-900 text-slate-100 flex flex-col overflow-hidden select-none&quot;&gt;

    &lt;!-- HEADER NAVIGATION --&gt;
    &lt;header class=&quot;bg-slate-800 border-b border-slate-700 px-6 py-3 flex flex-wrap items-center justify-between gap-4 shrink-0 shadow-lg&quot;&gt;
        &lt;div class=&quot;flex items-center gap-3&quot;&gt;
            &lt;div class=&quot;bg-emerald-600 text-white p-2.5 rounded-xl shadow-md flex items-center justify-center&quot;&gt;
                &lt;i class=&quot;fa-solid fa-file-excel text-xl&quot;&gt;&lt;/i&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;h1 class=&quot;text-lg font-bold text-white tracking-wide&quot;&gt;Shortcut Dojo&lt;/h1&gt;
                &lt;p class=&quot;text-xs text-slate-400&quot;&gt;Master 65+ Excel, VBA &amp; Power BI hotkeys&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- MODE SWITCH TABS --&gt;
        &lt;div class=&quot;flex items-center bg-slate-900/80 p-1 rounded-xl border border-slate-700/60&quot;&gt;
            &lt;button id=&quot;tab-guided&quot; onclick=&quot;switchMode(&#39;guided&#39;); playClickSound();&quot; class=&quot;px-3.5 py-1.5 rounded-lg text-xs font-semibold transition-all duration-200 text-white bg-emerald-600 shadow-sm flex items-center gap-2&quot;&gt;
                &lt;i class=&quot;fa-solid fa-graduation-cap text-amber-300&quot;&gt;&lt;/i&gt; Guided 5-Step Drill
            &lt;/button&gt;
            &lt;button id=&quot;tab-cheatsheet&quot; onclick=&quot;switchMode(&#39;cheatsheet&#39;); playClickSound();&quot; class=&quot;px-3.5 py-1.5 rounded-lg text-xs font-semibold transition-all duration-200 text-slate-400 hover:text-white flex items-center gap-2&quot;&gt;
                &lt;i class=&quot;fa-solid fa-book-open&quot;&gt;&lt;/i&gt; Cheatsheet
            &lt;/button&gt;
            &lt;button id=&quot;tab-trainer&quot; onclick=&quot;switchMode(&#39;trainer&#39;); playClickSound();&quot; class=&quot;px-3.5 py-1.5 rounded-lg text-xs font-semibold transition-all duration-200 text-slate-400 hover:text-white flex items-center gap-2&quot;&gt;
                &lt;i class=&quot;fa-solid fa-gamepad&quot;&gt;&lt;/i&gt; Quiz Mode
            &lt;/button&gt;
        &lt;/div&gt;

        &lt;!-- STATS / COUNTER --&gt;
        &lt;div class=&quot;hidden md:flex items-center gap-3 text-xs bg-slate-900/50 px-3 py-1.5 rounded-lg border border-slate-700/50&quot;&gt;
            &lt;span class=&quot;text-slate-400&quot;&gt;&lt;i class=&quot;fa-solid fa-bolt text-amber-400 mr-1&quot;&gt;&lt;/i&gt; Total:&lt;/span&gt;
            &lt;span id=&quot;shortcut-count&quot; class=&quot;font-bold text-emerald-400&quot;&gt;0&lt;/span&gt;
            &lt;span class=&quot;text-slate-600&quot;&gt;|&lt;/span&gt;
            &lt;span class=&quot;text-slate-400&quot;&gt;&lt;i class=&quot;fa-solid fa-star text-yellow-400 mr-1&quot;&gt;&lt;/i&gt; Bookmarks:&lt;/span&gt;
            &lt;span id=&quot;fav-count&quot; class=&quot;font-bold text-yellow-400&quot;&gt;0&lt;/span&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- 1. GUIDED 5-STEP DRILL MODE (DEFAULT) --&gt;
    &lt;main id=&quot;view-guided&quot; class=&quot;flex-1 p-4 md:p-6 flex flex-col items-center justify-center max-w-4xl mx-auto w-full overflow-y-auto custom-scrollbar&quot;&gt;
        
        &lt;!-- LEVEL PROGRESS BAR --&gt;
        &lt;div class=&quot;w-full bg-slate-800 border border-slate-700/80 rounded-2xl p-4 mb-4 shadow-md flex items-center justify-between gap-4&quot;&gt;
            &lt;div&gt;
                &lt;span class=&quot;text-[10px] font-bold text-slate-400 uppercase tracking-wider block&quot;&gt;Learning Module&lt;/span&gt;
                &lt;h3 id=&quot;guided-level-title&quot; class=&quot;text-sm font-bold text-emerald-400&quot;&gt;Set 1 of 13 (Shortcuts 1 - 5)&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div class=&quot;flex-1 max-w-xs mx-4&quot;&gt;
                &lt;div class=&quot;flex justify-between text-[10px] text-slate-400 mb-1&quot;&gt;
                    &lt;span&gt;Overall Mastery&lt;/span&gt;
                    &lt;span id=&quot;guided-progress-text&quot;&gt;Level 1 / 13&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class=&quot;w-full bg-slate-900 h-2 rounded-full overflow-hidden border border-slate-700&quot;&gt;
                    &lt;div id=&quot;guided-progress-bar&quot; class=&quot;bg-emerald-500 h-full w-0 transition-all duration-300&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;flex gap-2&quot;&gt;
                &lt;button onclick=&quot;prevGuidedSet(); playClickSound();&quot; class=&quot;text-xs bg-slate-700 hover:bg-slate-600 text-slate-200 px-3 py-1.5 rounded-lg border border-slate-600 transition-colors&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-chevron-left&quot;&gt;&lt;/i&gt; Prev
                &lt;/button&gt;
                &lt;button onclick=&quot;nextGuidedSet(); playClickSound();&quot; class=&quot;text-xs bg-slate-700 hover:bg-slate-600 text-slate-200 px-3 py-1.5 rounded-lg border border-slate-600 transition-colors&quot;&gt;
                    Next &lt;i class=&quot;fa-solid fa-chevron-right&quot;&gt;&lt;/i&gt;
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- PHASE A: STUDY 5 SHORTCUTS --&gt;
        &lt;div id=&quot;guided-phase-study&quot; class=&quot;w-full bg-slate-800/90 border border-slate-700/80 rounded-2xl p-6 shadow-2xl flex flex-col items-center&quot;&gt;
            &lt;div class=&quot;text-center mb-6&quot;&gt;
                &lt;span class=&quot;text-xs font-bold text-amber-400 uppercase tracking-widest bg-amber-950/60 border border-amber-800/80 px-3 py-1 rounded-full inline-block mb-2&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-book-reader mr-1&quot;&gt;&lt;/i&gt; Step 1: Study 5 Shortcuts
                &lt;/span&gt;
                &lt;h2 class=&quot;text-xl font-bold text-white&quot;&gt;Memorize these 5 shortcuts before testing your physical keyboard muscle memory:&lt;/h2&gt;
            &lt;/div&gt;

            &lt;!-- 5 Cards List --&gt;
            &lt;div id=&quot;guided-cards-grid&quot; class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 w-full mb-6&quot;&gt;&lt;/div&gt;

            &lt;button onclick=&quot;startKeypressDrill(); playClickSound();&quot; class=&quot;bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-sm px-8 py-3 rounded-xl transition-all shadow-lg flex items-center gap-2 hover:scale-105 active:scale-95&quot;&gt;
                &lt;i class=&quot;fa-solid fa-keyboard text-lg&quot;&gt;&lt;/i&gt; Ready! Test My Physical Keyboard &lt;i class=&quot;fa-solid fa-arrow-right&quot;&gt;&lt;/i&gt;
            &lt;/button&gt;
        &lt;/div&gt;

        &lt;!-- PHASE B: KEYBOARD PRESS TEST --&gt;
        &lt;div id=&quot;guided-phase-test&quot; class=&quot;hidden w-full bg-slate-800/90 border border-slate-700/80 rounded-2xl p-6 md:p-8 shadow-2xl flex flex-col items-center relative text-center&quot;&gt;
            
            &lt;div class=&quot;flex items-center justify-between w-full mb-4&quot;&gt;
                &lt;span class=&quot;text-xs font-bold text-emerald-400 uppercase tracking-widest bg-emerald-950/80 border border-emerald-800 px-3 py-1 rounded-full&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-keyboard mr-1&quot;&gt;&lt;/i&gt; Step 2: Interactive Key Press Test
                &lt;/span&gt;
                &lt;span id=&quot;test-queue-badge&quot; class=&quot;text-xs text-amber-300 bg-amber-950/80 border border-amber-800 px-3 py-1 rounded-full font-medium&quot;&gt;
                    Remaining in Set: 5
                &lt;/span&gt;
            &lt;/div&gt;

            &lt;h2 id=&quot;test-question&quot; class=&quot;text-xl md:text-2xl font-bold text-white mb-2&quot;&gt;Press the keys on your physical keyboard to perform:&lt;/h2&gt;
            &lt;p id=&quot;test-target-action&quot; class=&quot;text-lg font-extrabold text-amber-300 mb-2 bg-slate-900/80 border border-slate-700 px-4 py-2 rounded-xl inline-block&quot;&gt;
                &quot;Create a new workbook&quot;
            &lt;/p&gt;

            &lt;!-- CONTEXTUAL WINDOWS OS WARNING BANNER --&gt;
            &lt;div id=&quot;windows-warning-banner&quot; class=&quot;hidden w-full max-w-xl bg-blue-950/50 border border-blue-500/40 rounded-xl p-3 mb-4 text-left flex items-start gap-3&quot;&gt;
                &lt;i class=&quot;fa-solid fa-circle-info text-blue-400 text-lg mt-0.5 shrink-0&quot;&gt;&lt;/i&gt;
                &lt;p class=&quot;text-[11px] text-blue-200/90 leading-relaxed&quot;&gt;
                    &lt;strong class=&quot;text-blue-300&quot;&gt;Windows OS Hotkey Collision Note:&lt;/strong&gt; Windows often binds &lt;code class=&quot;bg-blue-900/80 px-1 py-0.5 rounded text-white font-mono&quot;&gt;Ctrl+Shift+0&lt;/code&gt; to &lt;em&gt;&quot;Switch Input Language&quot;&lt;/em&gt; at the OS level. If your browser isn&#39;t receiving this hotkey, click &lt;strong&gt;&quot;Show Hint&quot;&lt;/strong&gt; to advance, or disable language hotkeys in &lt;em&gt;Windows Settings $\rightarrow$ Time &amp; Language $\rightarrow$ Typing $\rightarrow$ Advanced Keyboard Settings&lt;/em&gt;.
                &lt;/p&gt;
            &lt;/div&gt;

            &lt;!-- REVEALED HINT BOX --&gt;
            &lt;div id=&quot;test-hint-box&quot; class=&quot;hidden w-full max-w-lg bg-amber-950/40 border border-amber-500/50 rounded-xl p-3 mb-4 flex flex-col items-center&quot;&gt;
                &lt;div class=&quot;flex items-center gap-2 text-xs font-bold text-amber-400 mb-1&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-lightbulb&quot;&gt;&lt;/i&gt; HINT REVEALED (Marked as Not Learned)
                &lt;/div&gt;
                &lt;div id=&quot;hint-keys-container&quot; class=&quot;flex items-center justify-center gap-1.5 mt-1 flex-wrap&quot;&gt;&lt;/div&gt;
                &lt;p class=&quot;text-[11px] text-amber-200/80 mt-2&quot;&gt;
                    This shortcut will be re-tested at the end of the set until you complete it from memory without a hint!
                &lt;/p&gt;
            &lt;/div&gt;

            &lt;!-- LIVE KEYBOARD LISTENER BOX --&gt;
            &lt;div class=&quot;w-full max-w-lg bg-slate-900/90 border-2 border-dashed border-slate-700 rounded-2xl p-6 mb-4 flex flex-col items-center justify-center min-h-[130px]&quot;&gt;
                &lt;span class=&quot;text-xs text-slate-400 mb-3 font-medium&quot;&gt;Keys Currently Detected on Your Keyboard:&lt;/span&gt;
                &lt;div id=&quot;live-keys-container&quot; class=&quot;flex flex-wrap items-center justify-center gap-2&quot;&gt;
                    &lt;span class=&quot;text-xs text-slate-500 italic&quot;&gt;Press physical keys on your keyboard...&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;!-- RESULT FEEDBACK --&gt;
            &lt;div id=&quot;test-feedback&quot; class=&quot;h-8 text-sm font-bold transition-all mb-4&quot;&gt;&lt;/div&gt;

            &lt;!-- ACTION BUTTONS --&gt;
            &lt;div class=&quot;flex flex-wrap items-center justify-center gap-3&quot;&gt;
                &lt;button id=&quot;btn-hint&quot; onclick=&quot;triggerHint();&quot; class=&quot;bg-amber-600 hover:bg-amber-500 text-white font-semibold text-xs px-5 py-2.5 rounded-xl transition-all shadow-md flex items-center gap-2&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-lightbulb&quot;&gt;&lt;/i&gt; Show Hint (Mark Unlearned)
                &lt;/button&gt;
                &lt;button onclick=&quot;backToStudy(); playClickSound();&quot; class=&quot;bg-slate-700 hover:bg-slate-600 text-slate-300 font-semibold text-xs px-5 py-2.5 rounded-xl transition-all&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-rotate-left mr-1&quot;&gt;&lt;/i&gt; Review Set Cards
                &lt;/button&gt;
                &lt;button onclick=&quot;skipTestShortcut(); playClickSound();&quot; class=&quot;bg-slate-800 hover:bg-slate-700 border border-slate-600 text-slate-400 font-semibold text-xs px-5 py-2.5 rounded-xl transition-all&quot;&gt;
                    Skip / Re-queue &lt;i class=&quot;fa-solid fa-forward mr-1&quot;&gt;&lt;/i&gt;
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/main&gt;

    &lt;!-- 2. CHEATSHEET VIEW --&gt;
    &lt;main id=&quot;view-cheatsheet&quot; class=&quot;hidden flex-1 flex flex-col min-h-0 overflow-hidden p-4 gap-4 max-w-7xl mx-auto w-full&quot;&gt;
        
        &lt;!-- TOP CONTROL PANEL: SEARCH &amp; HORIZONTAL CATEGORY PILLS --&gt;
        &lt;section class=&quot;bg-slate-800/80 rounded-2xl border border-slate-700/60 p-4 flex flex-col gap-3 shrink-0 shadow-sm&quot;&gt;
            
            &lt;!-- SEARCH BAR AND CATEGORY STATUS --&gt;
            &lt;div class=&quot;flex flex-col sm:flex-row items-center justify-between gap-3&quot;&gt;
                &lt;div class=&quot;relative w-full sm:w-80&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-magnifying-glass absolute left-3 top-3 text-slate-400 text-sm&quot;&gt;&lt;/i&gt;
                    &lt;input type=&quot;text&quot; id=&quot;search-input&quot; oninput=&quot;filterShortcuts(); playKeySound();&quot; placeholder=&quot;Search shortcuts or keys...&quot; 
                           class=&quot;w-full bg-slate-900/90 text-sm text-slate-200 pl-9 pr-8 py-2 rounded-xl border border-slate-700 focus:outline-none focus:border-emerald-500 transition-colors&quot;&gt;
                    &lt;button id=&quot;clear-search&quot; onclick=&quot;clearSearch(); playClickSound();&quot; class=&quot;hidden absolute right-3 top-2.5 text-slate-500 hover:text-slate-300&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-circle-xmark text-sm&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                &lt;/div&gt;
                &lt;div class=&quot;text-xs text-slate-400 flex items-center gap-2 self-start sm:self-center&quot;&gt;
                    &lt;span&gt;Filtering by:&lt;/span&gt;
                    &lt;span id=&quot;active-cat-label&quot; class=&quot;font-bold text-emerald-400 bg-slate-900/80 border border-slate-700 px-2.5 py-1 rounded-lg&quot;&gt;All Shortcuts&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;!-- HORIZONTAL SCROLLABLE CATEGORY BUTTONS --&gt;
            &lt;div class=&quot;flex items-center gap-2 overflow-x-auto custom-scrollbar pb-1 pt-1&quot;&gt;
                &lt;button data-category=&quot;All&quot; onclick=&quot;setCategory(&#39;All&#39;); playClickSound();&quot; class=&quot;cat-btn active whitespace-nowrap flex items-center gap-2 px-3.5 py-1.5 rounded-xl text-xs font-semibold transition-all bg-emerald-600 text-white border border-emerald-500 shadow-md&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-layer-group&quot;&gt;&lt;/i&gt; All Shortcuts
                    &lt;span id=&quot;cat-count-all&quot; class=&quot;text-[10px] bg-slate-900/60 px-1.5 py-0.5 rounded-full&quot;&gt;0&lt;/span&gt;
                &lt;/button&gt;
                &lt;button data-category=&quot;Favorites&quot; onclick=&quot;setCategory(&#39;Favorites&#39;); playClickSound();&quot; class=&quot;cat-btn whitespace-nowrap flex items-center gap-2 px-3.5 py-1.5 rounded-xl text-xs font-medium transition-all text-slate-300 hover:bg-slate-700/60 bg-slate-900/50 border border-slate-700/60 hover:text-white&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-star text-yellow-400&quot;&gt;&lt;/i&gt; Bookmarked
                    &lt;span id=&quot;cat-count-fav&quot; class=&quot;text-[10px] bg-slate-900/60 px-1.5 py-0.5 rounded-full&quot;&gt;0&lt;/span&gt;
                &lt;/button&gt;
                &lt;button data-category=&quot;General&quot; onclick=&quot;setCategory(&#39;General&#39;); playClickSound();&quot; class=&quot;cat-btn whitespace-nowrap flex items-center gap-2 px-3.5 py-1.5 rounded-xl text-xs font-medium transition-all text-slate-300 hover:bg-slate-700/60 bg-slate-900/50 border border-slate-700/60 hover:text-white&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-house text-blue-400&quot;&gt;&lt;/i&gt; General
                    &lt;span id=&quot;cat-count-general&quot; class=&quot;text-[10px] bg-slate-900/60 px-1.5 py-0.5 rounded-full&quot;&gt;0&lt;/span&gt;
                &lt;/button&gt;
                &lt;button data-category=&quot;Navigation&quot; onclick=&quot;setCategory(&#39;Navigation&#39;); playClickSound();&quot; class=&quot;cat-btn whitespace-nowrap flex items-center gap-2 px-3.5 py-1.5 rounded-xl text-xs font-medium transition-all text-slate-300 hover:bg-slate-700/60 bg-slate-900/50 border border-slate-700/60 hover:text-white&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-compass text-teal-400&quot;&gt;&lt;/i&gt; Navigating
                    &lt;span id=&quot;cat-count-navigation&quot; class=&quot;text-[10px] bg-slate-900/60 px-1.5 py-0.5 rounded-full&quot;&gt;0&lt;/span&gt;
                &lt;/button&gt;
                &lt;button data-category=&quot;Selection&quot; onclick=&quot;setCategory(&#39;Selection&#39;); playClickSound();&quot; class=&quot;cat-btn whitespace-nowrap flex items-center gap-2 px-3.5 py-1.5 rounded-xl text-xs font-medium transition-all text-slate-300 hover:bg-slate-700/60 bg-slate-900/50 border border-slate-700/60 hover:text-white&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-object-group text-indigo-400&quot;&gt;&lt;/i&gt; Selection
                    &lt;span id=&quot;cat-count-selection&quot; class=&quot;text-[10px] bg-slate-900/60 px-1.5 py-0.5 rounded-full&quot;&gt;0&lt;/span&gt;
                &lt;/button&gt;
                &lt;button data-category=&quot;Formatting&quot; onclick=&quot;setCategory(&#39;Formatting&#39;); playClickSound();&quot; class=&quot;cat-btn whitespace-nowrap flex items-center gap-2 px-3.5 py-1.5 rounded-xl text-xs font-medium transition-all text-slate-300 hover:bg-slate-700/60 bg-slate-900/50 border border-slate-700/60 hover:text-white&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-paintbrush text-pink-400&quot;&gt;&lt;/i&gt; Formatting
                    &lt;span id=&quot;cat-count-formatting&quot; class=&quot;text-[10px] bg-slate-900/60 px-1.5 py-0.5 rounded-full&quot;&gt;0&lt;/span&gt;
                &lt;/button&gt;
                &lt;button data-category=&quot;Formulas&quot; onclick=&quot;setCategory(&#39;Formulas&#39;); playClickSound();&quot; class=&quot;cat-btn whitespace-nowrap flex items-center gap-2 px-3.5 py-1.5 rounded-xl text-xs font-medium transition-all text-slate-300 hover:bg-slate-700/60 bg-slate-900/50 border border-slate-700/60 hover:text-white&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-square-root-variable text-amber-400&quot;&gt;&lt;/i&gt; Formulas
                    &lt;span id=&quot;cat-count-formulas&quot; class=&quot;text-[10px] bg-slate-900/60 px-1.5 py-0.5 rounded-full&quot;&gt;0&lt;/span&gt;
                &lt;/button&gt;
                &lt;button data-category=&quot;Pivot &amp; Charts&quot; onclick=&quot;setCategory(&#39;Pivot &amp; Charts&#39;); playClickSound();&quot; class=&quot;cat-btn whitespace-nowrap flex items-center gap-2 px-3.5 py-1.5 rounded-xl text-xs font-medium transition-all text-slate-300 hover:bg-slate-700/60 bg-slate-900/50 border border-slate-700/60 hover:text-white&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-chart-pie text-purple-400&quot;&gt;&lt;/i&gt; Pivot &amp; Charts
                    &lt;span id=&quot;cat-count-pivot&quot; class=&quot;text-[10px] bg-slate-900/60 px-1.5 py-0.5 rounded-full&quot;&gt;0&lt;/span&gt;
                &lt;/button&gt;
                &lt;button data-category=&quot;VBA &amp; Power BI&quot; onclick=&quot;setCategory(&#39;VBA &amp; Power BI&#39;); playClickSound();&quot; class=&quot;cat-btn whitespace-nowrap flex items-center gap-2 px-3.5 py-1.5 rounded-xl text-xs font-medium transition-all text-slate-300 hover:bg-slate-700/60 bg-slate-900/50 border border-slate-700/60 hover:text-white&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-code text-rose-400&quot;&gt;&lt;/i&gt; VBA &amp; Power BI
                    &lt;span id=&quot;cat-count-vba&quot; class=&quot;text-[10px] bg-slate-900/60 px-1.5 py-0.5 rounded-full&quot;&gt;0&lt;/span&gt;
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/section&gt;

        &lt;!-- MAIN CARDS GRID CONTAINER --&gt;
        &lt;section class=&quot;flex-1 bg-slate-800/40 rounded-2xl border border-slate-700/60 p-4 flex flex-col min-h-0 overflow-hidden&quot;&gt;
            &lt;div id=&quot;cards-container&quot; class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 overflow-y-auto custom-scrollbar p-1 flex-1 min-h-0&quot;&gt;&lt;/div&gt;
            &lt;div id=&quot;empty-state&quot; class=&quot;hidden flex-1 flex flex-col items-center justify-center text-center p-8&quot;&gt;
                &lt;i class=&quot;fa-solid fa-magnifying-glass-slash text-4xl text-slate-600 mb-3&quot;&gt;&lt;/i&gt;
                &lt;h3 class=&quot;text-base font-semibold text-slate-300&quot;&gt;No shortcuts found&lt;/h3&gt;
                &lt;p class=&quot;text-xs text-slate-500 mt-1&quot;&gt;Try adjusting your search or category filter.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/section&gt;
    &lt;/main&gt;

    &lt;!-- 3. MULTIPLE CHOICE QUIZ VIEW WITH START/STOP CONTROLS --&gt;
    &lt;main id=&quot;view-trainer&quot; class=&quot;hidden flex-1 p-6 flex flex-col items-center justify-center max-w-3xl mx-auto w-full&quot;&gt;
        
        &lt;!-- A. QUIZ LANDING / START SCREEN --&gt;
        &lt;div id=&quot;quiz-start-screen&quot; class=&quot;bg-slate-800/90 border border-slate-700 rounded-2xl p-8 w-full shadow-2xl flex flex-col items-center text-center&quot;&gt;
            &lt;div class=&quot;bg-emerald-600/20 text-emerald-400 p-4 rounded-2xl mb-4 border border-emerald-500/30&quot;&gt;
                &lt;i class=&quot;fa-solid fa-gamepad text-4xl&quot;&gt;&lt;/i&gt;
            &lt;/div&gt;
            &lt;h2 class=&quot;text-2xl font-bold text-white mb-2&quot;&gt;Speedrunner Quiz Challenge&lt;/h2&gt;
            &lt;p class=&quot;text-xs text-slate-400 max-w-md mb-6 leading-relaxed&quot;&gt;
                Test your hotkey recognition and speed against 65+ Excel, VBA, and Power BI shortcuts. Answer correctly to build up your streak!
            &lt;/p&gt;

            &lt;div class=&quot;grid grid-cols-2 gap-4 w-full max-w-sm mb-6&quot;&gt;
                &lt;div class=&quot;bg-slate-900/70 border border-slate-700/80 p-3 rounded-xl text-center&quot;&gt;
                    &lt;span class=&quot;text-[10px] text-slate-400 uppercase font-bold tracking-wider block&quot;&gt;Personal Best Streak&lt;/span&gt;
                    &lt;span id=&quot;start-screen-high&quot; class=&quot;text-lg font-extrabold text-blue-400&quot;&gt;0&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class=&quot;bg-slate-900/70 border border-slate-700/80 p-3 rounded-xl text-center&quot;&gt;
                    &lt;span class=&quot;text-[10px] text-slate-400 uppercase font-bold tracking-wider block&quot;&gt;Shortcut Pool&lt;/span&gt;
                    &lt;span class=&quot;text-lg font-extrabold text-emerald-400&quot;&gt;65 Hotkeys&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;button onclick=&quot;startQuiz(); playClickSound();&quot; class=&quot;bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-sm px-8 py-3.5 rounded-xl transition-all shadow-lg flex items-center gap-2 hover:scale-105 active:scale-95&quot;&gt;
                &lt;i class=&quot;fa-solid fa-play&quot;&gt;&lt;/i&gt; Start Quiz Challenge
            &lt;/button&gt;
        &lt;/div&gt;

        &lt;!-- B. ACTIVE QUIZ CARD --&gt;
        &lt;div id=&quot;quiz-active-card&quot; class=&quot;hidden bg-slate-800/90 border border-slate-700 rounded-2xl p-6 md:p-8 w-full shadow-2xl flex flex-col items-center text-center relative overflow-hidden&quot;&gt;
            &lt;!-- HUD TOP BAR WITH STOP QUIZ BUTTON --&gt;
            &lt;div class=&quot;flex items-center justify-between w-full mb-6 text-xs text-slate-400 bg-slate-900/60 px-4 py-2.5 rounded-xl border border-slate-700/50&quot;&gt;
                &lt;div class=&quot;flex items-center gap-1.5&quot;&gt;&lt;i class=&quot;fa-solid fa-trophy text-amber-400&quot;&gt;&lt;/i&gt; Score: &lt;span id=&quot;game-score&quot; class=&quot;font-bold text-emerald-400 text-sm&quot;&gt;0&lt;/span&gt;&lt;/div&gt;
                &lt;div class=&quot;flex items-center gap-1.5&quot;&gt;&lt;i class=&quot;fa-solid fa-fire text-orange-400&quot;&gt;&lt;/i&gt; Streak: &lt;span id=&quot;game-streak&quot; class=&quot;font-bold text-orange-400 text-sm&quot;&gt;0&lt;/span&gt;&lt;/div&gt;
                &lt;div class=&quot;flex items-center gap-1.5&quot;&gt;&lt;i class=&quot;fa-solid fa-clock text-blue-400&quot;&gt;&lt;/i&gt; Best: &lt;span id=&quot;game-high&quot; class=&quot;font-bold text-blue-400 text-sm&quot;&gt;0&lt;/span&gt;&lt;/div&gt;
                &lt;button onclick=&quot;stopQuiz(); playClickSound();&quot; class=&quot;bg-rose-950/80 hover:bg-rose-900 text-rose-300 border border-rose-800/80 px-2.5 py-1 rounded-lg font-semibold text-[11px] transition-colors flex items-center gap-1&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-square&quot;&gt;&lt;/i&gt; Stop Quiz
                &lt;/button&gt;
            &lt;/div&gt;

            &lt;span id=&quot;game-cat&quot; class=&quot;text-[10px] font-bold tracking-wider uppercase bg-emerald-950/80 text-emerald-400 border border-emerald-800 px-3 py-1 rounded-full mb-3&quot;&gt;General&lt;/span&gt;
            &lt;h2 id=&quot;game-question&quot; class=&quot;text-xl md:text-2xl font-bold text-white mb-2&quot;&gt;How do you Save the current workbook?&lt;/h2&gt;
            &lt;p class=&quot;text-xs text-slate-400 mb-6&quot;&gt;Select the correct shortcut combination below:&lt;/p&gt;

            &lt;div id=&quot;game-options&quot; class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3 w-full mb-6&quot;&gt;&lt;/div&gt;
            &lt;div id=&quot;game-feedback&quot; class=&quot;h-8 text-sm font-semibold transition-all mb-2&quot;&gt;&lt;/div&gt;

            &lt;div class=&quot;flex gap-3 mt-2&quot;&gt;
                &lt;button onclick=&quot;nextQuestion(); playClickSound();&quot; class=&quot;bg-emerald-600 hover:bg-emerald-500 text-white font-semibold text-xs px-6 py-2.5 rounded-xl transition-all shadow-lg flex items-center gap-2&quot;&gt;
                    Skip Question &lt;i class=&quot;fa-solid fa-arrow-right&quot;&gt;&lt;/i&gt;
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- C. QUIZ RESULTS SUMMARY SCREEN --&gt;
        &lt;div id=&quot;quiz-summary-screen&quot; class=&quot;hidden bg-slate-800/90 border border-slate-700 rounded-2xl p-8 w-full shadow-2xl flex flex-col items-center text-center&quot;&gt;
            &lt;div class=&quot;bg-amber-500/20 text-amber-400 p-4 rounded-2xl mb-4 border border-amber-500/30&quot;&gt;
                &lt;i class=&quot;fa-solid fa-flag-checkered text-4xl&quot;&gt;&lt;/i&gt;
            &lt;/div&gt;
            &lt;h2 class=&quot;text-2xl font-bold text-white mb-1&quot;&gt;Quiz Finished!&lt;/h2&gt;
            &lt;p class=&quot;text-xs text-slate-400 mb-6&quot;&gt;Here is your session performance breakdown:&lt;/p&gt;

            &lt;div class=&quot;grid grid-cols-3 gap-3 w-full max-w-md mb-6&quot;&gt;
                &lt;div class=&quot;bg-slate-900/70 border border-slate-700/80 p-3 rounded-xl text-center&quot;&gt;
                    &lt;span class=&quot;text-[10px] text-slate-400 uppercase font-bold tracking-wider block&quot;&gt;Final Score&lt;/span&gt;
                    &lt;span id=&quot;summary-score&quot; class=&quot;text-xl font-extrabold text-emerald-400&quot;&gt;0&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class=&quot;bg-slate-900/70 border border-slate-700/80 p-3 rounded-xl text-center&quot;&gt;
                    &lt;span class=&quot;text-[10px] text-slate-400 uppercase font-bold tracking-wider block&quot;&gt;Max Streak&lt;/span&gt;
                    &lt;span id=&quot;summary-streak&quot; class=&quot;text-xl font-extrabold text-orange-400&quot;&gt;0&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class=&quot;bg-slate-900/70 border border-slate-700/80 p-3 rounded-xl text-center&quot;&gt;
                    &lt;span class=&quot;text-[10px] text-slate-400 uppercase font-bold tracking-wider block&quot;&gt;Answered&lt;/span&gt;
                    &lt;span id=&quot;summary-answered&quot; class=&quot;text-xl font-extrabold text-blue-400&quot;&gt;0&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class=&quot;flex gap-3&quot;&gt;
                &lt;button onclick=&quot;startQuiz(); playClickSound();&quot; class=&quot;bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs px-6 py-2.5 rounded-xl transition-all shadow-lg flex items-center gap-2&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-rotate-right&quot;&gt;&lt;/i&gt; Play Again
                &lt;/button&gt;
                &lt;button onclick=&quot;resetToQuizMenu(); playClickSound();&quot; class=&quot;bg-slate-700 hover:bg-slate-600 text-slate-200 font-semibold text-xs px-6 py-2.5 rounded-xl transition-all&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-house&quot;&gt;&lt;/i&gt; Quiz Menu
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- NOTIFICATION TOAST --&gt;
    &lt;div id=&quot;toast&quot; class=&quot;fixed bottom-6 right-6 bg-slate-800 border border-emerald-500 text-emerald-300 text-xs px-4 py-2.5 rounded-xl shadow-2xl opacity-0 pointer-events-none transition-all duration-300 flex items-center gap-2 z-50&quot;&gt;
        &lt;i class=&quot;fa-solid fa-circle-check text-emerald-400&quot;&gt;&lt;/i&gt;
        &lt;span id=&quot;toast-msg&quot;&gt;Shortcut updated!&lt;/span&gt;
    &lt;/div&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // WEB AUDIO SYNTHESIZER FOR SOUND EFFECTS
        let audioCtx = null;

        function initAudio() {
            if (!audioCtx) {
                audioCtx = new (window.AudioContext || window.webkitAudioContext)();
            }
            if (audioCtx.state === &#39;suspended&#39;) {
                audioCtx.resume();
            }
        }

        function playKeySound() {
            initAudio();
            if (!audioCtx) return;
            const osc = audioCtx.createOscillator();
            const gain = audioCtx.createGain();
            osc.type = &#39;sine&#39;;
            osc.frequency.setValueAtTime(450, audioCtx.currentTime);
            osc.frequency.exponentialRampToValueAtTime(150, audioCtx.currentTime + 0.035);
            gain.gain.setValueAtTime(0.08, audioCtx.currentTime);
            gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.035);
            osc.connect(gain);
            gain.connect(audioCtx.destination);
            osc.start();
            osc.stop(audioCtx.currentTime + 0.035);
        }

        function playClickSound() {
            initAudio();
            if (!audioCtx) return;
            const osc = audioCtx.createOscillator();
            const gain = audioCtx.createGain();
            osc.type = &#39;triangle&#39;;
            osc.frequency.setValueAtTime(650, audioCtx.currentTime);
            osc.frequency.exponentialRampToValueAtTime(250, audioCtx.currentTime + 0.045);
            gain.gain.setValueAtTime(0.12, audioCtx.currentTime);
            gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.045);
            osc.connect(gain);
            gain.connect(audioCtx.destination);
            osc.start();
            osc.stop(audioCtx.currentTime + 0.045);
        }

        function playSuccessSound() {
            initAudio();
            if (!audioCtx) return;
            const now = audioCtx.currentTime;
            
            const osc1 = audioCtx.createOscillator();
            const gain1 = audioCtx.createGain();
            osc1.type = &#39;sine&#39;;
            osc1.frequency.setValueAtTime(523.25, now); // C5
            gain1.gain.setValueAtTime(0.15, now);
            gain1.gain.exponentialRampToValueAtTime(0.001, now + 0.15);
            osc1.connect(gain1);
            gain1.connect(audioCtx.destination);
            osc1.start(now);
            osc1.stop(now + 0.15);

            const osc2 = audioCtx.createOscillator();
            const gain2 = audioCtx.createGain();
            osc2.type = &#39;sine&#39;;
            osc2.frequency.setValueAtTime(659.25, now + 0.08); // E5
            gain2.gain.setValueAtTime(0.15, now + 0.08);
            gain2.gain.exponentialRampToValueAtTime(0.001, now + 0.28);
            osc2.connect(gain2);
            gain2.connect(audioCtx.destination);
            osc2.start(now + 0.08);
            osc2.stop(now + 0.28);
        }

        function playErrorSound() {
            initAudio();
            if (!audioCtx) return;
            const now = audioCtx.currentTime;
            const osc = audioCtx.createOscillator();
            const gain = audioCtx.createGain();
            osc.type = &#39;sawtooth&#39;;
            osc.frequency.setValueAtTime(190, now);
            osc.frequency.linearRampToValueAtTime(110, now + 0.2);
            gain.gain.setValueAtTime(0.12, now);
            gain.gain.exponentialRampToValueAtTime(0.001, now + 0.2);
            osc.connect(gain);
            gain.connect(audioCtx.destination);
            osc.start(now);
            osc.stop(now + 0.2);
        }

        // COMPLETE 65 SHORTCUT DATABASE
        const shortcuts = [
            // Set 1 (1-5)
            { id: 1, action: &quot;Create a new workbook&quot;, keys: [&quot;Ctrl&quot;, &quot;N&quot;], category: &quot;General&quot; },
            { id: 2, action: &quot;Open existing workbook&quot;, keys: [&quot;Ctrl&quot;, &quot;O&quot;], category: &quot;General&quot; },
            { id: 3, action: &quot;Save current workbook&quot;, keys: [&quot;Ctrl&quot;, &quot;S&quot;], category: &quot;General&quot; },
            { id: 4, action: &quot;Close current workbook&quot;, keys: [&quot;Ctrl&quot;, &quot;W&quot;], category: &quot;General&quot; },
            { id: 5, action: &quot;Print Preview / Print&quot;, keys: [&quot;Ctrl&quot;, &quot;P&quot;], category: &quot;General&quot; },
            
            // Set 2 (6-10)
            { id: 6, action: &quot;Insert new worksheet&quot;, keys: [&quot;Shift&quot;, &quot;F11&quot;], altKeys: [&quot;Alt&quot;, &quot;I&quot;, &quot;W&quot;], category: &quot;General&quot; },
            { id: 7, action: &quot;Display Find dialog box&quot;, keys: [&quot;Ctrl&quot;, &quot;F&quot;], category: &quot;General&quot; },
            { id: 8, action: &quot;Display Find &amp; Replace dialog&quot;, keys: [&quot;Ctrl&quot;, &quot;H&quot;], category: &quot;General&quot; },
            { id: 9, action: &quot;Hide selected columns&quot;, keys: [&quot;Ctrl&quot;, &quot;0&quot;], category: &quot;General&quot; },
            { id: 10, action: &quot;Unhide selected columns&quot;, keys: [&quot;Ctrl&quot;, &quot;Shift&quot;, &quot;0&quot;], category: &quot;General&quot; },
            
            // Set 3 (11-15)
            { id: 11, action: &quot;Hide selected rows&quot;, keys: [&quot;Ctrl&quot;, &quot;9&quot;], category: &quot;General&quot; },
            { id: 12, action: &quot;Unhide selected rows&quot;, keys: [&quot;Ctrl&quot;, &quot;Shift&quot;, &quot;9&quot;], category: &quot;General&quot; },
            { id: 13, action: &quot;Undo last action&quot;, keys: [&quot;Ctrl&quot;, &quot;Z&quot;], category: &quot;General&quot; },
            { id: 14, action: &quot;Redo / Repeat last action&quot;, keys: [&quot;Ctrl&quot;, &quot;Y&quot;], altKeys: [&quot;F4&quot;], category: &quot;General&quot; },
            { id: 15, action: &quot;Freeze Panes&quot;, keys: [&quot;Alt&quot;, &quot;W&quot;, &quot;F&quot;], category: &quot;General&quot; },

            // Set 4 (16-20)
            { id: 16, action: &quot;Toggle Ribbon minimize/expand&quot;, keys: [&quot;Ctrl&quot;, &quot;F1&quot;], category: &quot;General&quot; },
            { id: 17, action: &quot;Insert Table&quot;, keys: [&quot;Ctrl&quot;, &quot;T&quot;], category: &quot;General&quot; },
            { id: 18, action: &quot;Add / Remove AutoFilter&quot;, keys: [&quot;Alt&quot;, &quot;A&quot;, &quot;T&quot;], category: &quot;General&quot; },
            { id: 19, action: &quot;Move to next cell right&quot;, keys: [&quot;Tab&quot;], category: &quot;Navigation&quot; },
            { id: 20, action: &quot;Move to previous cell left&quot;, keys: [&quot;Shift&quot;, &quot;Tab&quot;], category: &quot;Navigation&quot; },

            // Set 5 (21-25)
            { id: 21, action: &quot;Jump to edge of data region downwards&quot;, keys: [&quot;Ctrl&quot;, &quot;↓&quot;], category: &quot;Navigation&quot; },
            { id: 22, action: &quot;Move to beginning of worksheet&quot;, keys: [&quot;Ctrl&quot;, &quot;Home&quot;], category: &quot;Navigation&quot; },
            { id: 23, action: &quot;Move to last cell used on sheet&quot;, keys: [&quot;Ctrl&quot;, &quot;End&quot;], category: &quot;Navigation&quot; },
            { id: 24, action: &quot;Move to next sheet in workbook&quot;, keys: [&quot;Ctrl&quot;, &quot;PageDown&quot;], category: &quot;Navigation&quot; },
            { id: 25, action: &quot;Move to previous sheet in workbook&quot;, keys: [&quot;Ctrl&quot;, &quot;PageUp&quot;], category: &quot;Navigation&quot; },

            // Set 6 (26-30)
            { id: 26, action: &quot;Show Go To dialog box&quot;, keys: [&quot;Ctrl&quot;, &quot;G&quot;], altKeys: [&quot;F5&quot;], category: &quot;Navigation&quot; },
            { id: 27, action: &quot;Select current region / All&quot;, keys: [&quot;Ctrl&quot;, &quot;A&quot;], category: &quot;Selection&quot; },
            { id: 28, action: &quot;Select entire row&quot;, keys: [&quot;Shift&quot;, &quot;Space&quot;], category: &quot;Selection&quot; },
            { id: 29, action: &quot;Select entire column&quot;, keys: [&quot;Ctrl&quot;, &quot;Space&quot;], category: &quot;Selection&quot; },
            { id: 30, action: &quot;Extend selection downwards&quot;, keys: [&quot;Shift&quot;, &quot;↓&quot;], category: &quot;Selection&quot; },

            // Set 7 (31-35)
            { id: 31, action: &quot;Extend selection to edge of data downwards&quot;, keys: [&quot;Ctrl&quot;, &quot;Shift&quot;, &quot;↓&quot;], category: &quot;Selection&quot; },
            { id: 32, action: &quot;Extend selection to start of sheet&quot;, keys: [&quot;Ctrl&quot;, &quot;Shift&quot;, &quot;Home&quot;], category: &quot;Selection&quot; },
            { id: 33, action: &quot;Extend selection to last used cell&quot;, keys: [&quot;Ctrl&quot;, &quot;Shift&quot;, &quot;End&quot;], category: &quot;Selection&quot; },
            { id: 34, action: &quot;Select visible cells only&quot;, keys: [&quot;Alt&quot;, &quot;;&quot;], category: &quot;Selection&quot; },
            { id: 35, action: &quot;Open Format Cells dialog&quot;, keys: [&quot;Ctrl&quot;, &quot;1&quot;], category: &quot;Formatting&quot; },

            // Set 8 (36-40)
            { id: 36, action: &quot;Apply / remove Bold&quot;, keys: [&quot;Ctrl&quot;, &quot;B&quot;], category: &quot;Formatting&quot; },
            { id: 37, action: &quot;Apply / remove Italic&quot;, keys: [&quot;Ctrl&quot;, &quot;I&quot;], category: &quot;Formatting&quot; },
            { id: 38, action: &quot;Apply / remove Underline&quot;, keys: [&quot;Ctrl&quot;, &quot;U&quot;], category: &quot;Formatting&quot; },
            { id: 39, action: &quot;Apply Strikethrough&quot;, keys: [&quot;Ctrl&quot;, &quot;5&quot;], category: &quot;Formatting&quot; },
            { id: 40, action: &quot;Apply Currency format ($)&quot;, keys: [&quot;Ctrl&quot;, &quot;Shift&quot;, &quot;$&quot;], category: &quot;Formatting&quot; },

            // Set 9 (41-45)
            { id: 41, action: &quot;Apply Percentage format (%)&quot;, keys: [&quot;Ctrl&quot;, &quot;Shift&quot;, &quot;%&quot;], category: &quot;Formatting&quot; },
            { id: 42, action: &quot;Apply Date format&quot;, keys: [&quot;Ctrl&quot;, &quot;Shift&quot;, &quot;#&quot;], category: &quot;Formatting&quot; },
            { id: 43, action: &quot;Apply General format&quot;, keys: [&quot;Ctrl&quot;, &quot;Shift&quot;, &quot;~&quot;], category: &quot;Formatting&quot; },
            { id: 44, action: &quot;Apply Word Wrap to cell&quot;, keys: [&quot;Alt&quot;, &quot;H&quot;, &quot;W&quot;], category: &quot;Formatting&quot; },
            { id: 45, action: &quot;Center align cell contents&quot;, keys: [&quot;Alt&quot;, &quot;H&quot;, &quot;A&quot;], category: &quot;Formatting&quot; },

            // Set 10 (46-50)
            { id: 46, action: &quot;Insert Hyperlink&quot;, keys: [&quot;Ctrl&quot;, &quot;K&quot;], category: &quot;Formatting&quot; },
            { id: 47, action: &quot;Edit active cell&quot;, keys: [&quot;F2&quot;], category: &quot;Formulas&quot; },
            { id: 48, action: &quot;Toggle absolute/relative reference&quot;, keys: [&quot;F4&quot;], category: &quot;Formulas&quot; },
            { id: 49, action: &quot;AutoSum selected cells&quot;, keys: [&quot;Alt&quot;, &quot;=&quot;], category: &quot;Formulas&quot; },
            { id: 50, action: &quot;Insert Function dialog&quot;, keys: [&quot;Shift&quot;, &quot;F3&quot;], category: &quot;Formulas&quot; },

            // Set 11 (51-55)
            { id: 51, action: &quot;Input Array Formula&quot;, keys: [&quot;Ctrl&quot;, &quot;Shift&quot;, &quot;Enter&quot;], category: &quot;Formulas&quot; },
            { id: 52, action: &quot;Invoke Flash Fill&quot;, keys: [&quot;Ctrl&quot;, &quot;E&quot;], category: &quot;Formulas&quot; },
            { id: 53, action: &quot;Toggle Show Formulas on/off&quot;, keys: [&quot;Ctrl&quot;, &quot;`&quot;], category: &quot;Formulas&quot; },
            { id: 54, action: &quot;Force Calculate all worksheets&quot;, keys: [&quot;F9&quot;], category: &quot;Formulas&quot; },
            { id: 55, action: &quot;Fill Down from cell above&quot;, keys: [&quot;Ctrl&quot;, &quot;D&quot;], category: &quot;Formulas&quot; },

            // Set 12 (56-60)
            { id: 56, action: &quot;Fill Right from cell left&quot;, keys: [&quot;Ctrl&quot;, &quot;R&quot;], category: &quot;Formulas&quot; },
            { id: 57, action: &quot;Create Pivot Table&quot;, keys: [&quot;Alt&quot;, &quot;N&quot;, &quot;V&quot;], category: &quot;Pivot &amp; Charts&quot; },
            { id: 58, action: &quot;Refresh active Pivot Table&quot;, keys: [&quot;Alt&quot;, &quot;F5&quot;], category: &quot;Pivot &amp; Charts&quot; },
            { id: 59, action: &quot;Refresh ALL Pivot Tables&quot;, keys: [&quot;Ctrl&quot;, &quot;Alt&quot;, &quot;F5&quot;], category: &quot;Pivot &amp; Charts&quot; },
            { id: 60, action: &quot;Create Chart on new sheet&quot;, keys: [&quot;F11&quot;], category: &quot;Pivot &amp; Charts&quot; },

            // Set 13 (61-65)
            { id: 61, action: &quot;Create Embedded Chart on sheet&quot;, keys: [&quot;Alt&quot;, &quot;F1&quot;], category: &quot;Pivot &amp; Charts&quot; },
            { id: 62, action: &quot;Open VBA Editor&quot;, keys: [&quot;Alt&quot;, &quot;F11&quot;], category: &quot;VBA &amp; Power BI&quot; },
            { id: 63, action: &quot;Run Subroutine / Macro&quot;, keys: [&quot;F5&quot;], category: &quot;VBA &amp; Power BI&quot; },
            { id: 64, action: &quot;Comment lines in DAX (Power BI)&quot;, keys: [&quot;Ctrl&quot;, &quot;/&quot;], category: &quot;VBA &amp; Power BI&quot; },
            { id: 65, action: &quot;Copy line down in DAX (Power BI)&quot;, keys: [&quot;Alt&quot;, &quot;Shift&quot;, &quot;↓&quot;], category: &quot;VBA &amp; Power BI&quot; }
        ];

        // APP STATE
        let activeMode = &#39;guided&#39;;
        let currentGuidedSetIndex = 0;
        let activePhysicalKeys = new Set();
        let sequenceBuffer = [];
        let sequenceTimer = null;
        
        let currentTestQueue = [];
        let usedHintForCurrent = false;

        let activeCategory = &#39;All&#39;;
        let searchQuery = &#39;&#39;;
        let favorites = JSON.parse(localStorage.getItem(&#39;ninja_favs&#39;) || &#39;[]&#39;);
        
        // QUIZ STATE
        let isQuizActive = false;
        let currentGameQuestion = null;
        let gameScore = 0;
        let gameStreak = 0;
        let maxSessionStreak = 0;
        let questionsAnsweredInSession = 0;
        let gameHigh = parseInt(localStorage.getItem(&#39;ninja_high&#39;) || &#39;0&#39;);

        // HELPER: HTML Escape
        function escapeHtml(str) {
            return String(str)
                .replace(/&amp;/g, &quot;&amp;amp;&quot;)
                .replace(/&lt;/g, &quot;&amp;lt;&quot;)
                .replace(/&gt;/g, &quot;&amp;gt;&quot;)
                .replace(/&quot;/g, &quot;&amp;quot;&quot;)
                .replace(/&#39;/g, &quot;&amp;#039;&quot;);
        }

        // INITIALIZATION
        document.addEventListener(&#39;DOMContentLoaded&#39;, () =&gt; {
            renderGuidedMode();
            updateStats();
            renderShortcuts();
            setupPhysicalKeyboardListener();
            document.getElementById(&#39;start-screen-high&#39;).innerText = gameHigh;
        });

        // SWITCH MODE TABS
        function switchMode(mode) {
            activeMode = mode;
            const guidedView = document.getElementById(&#39;view-guided&#39;);
            const csView = document.getElementById(&#39;view-cheatsheet&#39;);
            const trView = document.getElementById(&#39;view-trainer&#39;);

            const gTab = document.getElementById(&#39;tab-guided&#39;);
            const csTab = document.getElementById(&#39;tab-cheatsheet&#39;);
            const trTab = document.getElementById(&#39;tab-trainer&#39;);

            guidedView.classList.add(&#39;hidden&#39;);
            csView.classList.add(&#39;hidden&#39;);
            trView.classList.add(&#39;hidden&#39;);

            gTab.className = &quot;px-3.5 py-1.5 rounded-lg text-xs font-semibold transition-all duration-200 text-slate-400 hover:text-white flex items-center gap-2&quot;;
            csTab.className = &quot;px-3.5 py-1.5 rounded-lg text-xs font-semibold transition-all duration-200 text-slate-400 hover:text-white flex items-center gap-2&quot;;
            trTab.className = &quot;px-3.5 py-1.5 rounded-lg text-xs font-semibold transition-all duration-200 text-slate-400 hover:text-white flex items-center gap-2&quot;;

            if (mode === &#39;guided&#39;) {
                guidedView.classList.remove(&#39;hidden&#39;);
                gTab.className = &quot;px-3.5 py-1.5 rounded-lg text-xs font-semibold transition-all duration-200 text-white bg-emerald-600 shadow-sm flex items-center gap-2&quot;;
                renderGuidedMode();
            } else if (mode === &#39;cheatsheet&#39;) {
                csView.classList.remove(&#39;hidden&#39;);
                csTab.className = &quot;px-3.5 py-1.5 rounded-lg text-xs font-semibold transition-all duration-200 text-white bg-emerald-600 shadow-sm flex items-center gap-2&quot;;
                renderShortcuts();
            } else {
                trView.classList.remove(&#39;hidden&#39;);
                trTab.className = &quot;px-3.5 py-1.5 rounded-lg text-xs font-semibold transition-all duration-200 text-white bg-emerald-600 shadow-sm flex items-center gap-2&quot;;
                if (!isQuizActive) {
                    resetToQuizMenu();
                }
            }
        }

        // ==========================================
        // 1. GUIDED 5-STEP DRILL LOGIC
        // ==========================================
        function getSetShortcuts() {
            const start = currentGuidedSetIndex * 5;
            return shortcuts.slice(start, start + 5);
        }

        function renderGuidedMode() {
            const currentSet = getSetShortcuts();
            const totalSets = Math.ceil(shortcuts.length / 5);

            document.getElementById(&#39;guided-level-title&#39;).innerText = `Set ${currentGuidedSetIndex + 1} of ${totalSets} (Shortcuts ${currentGuidedSetIndex * 5 + 1} - ${Math.min((currentGuidedSetIndex + 1) * 5, shortcuts.length)})`;
            document.getElementById(&#39;guided-progress-text&#39;).innerText = `Level ${currentGuidedSetIndex + 1} / ${totalSets}`;
            
            const pct = ((currentGuidedSetIndex + 1) / totalSets) * 100;
            document.getElementById(&#39;guided-progress-bar&#39;).style.width = `${pct}%`;

            const grid = document.getElementById(&#39;guided-cards-grid&#39;);
            grid.innerHTML = &#39;&#39;;

            currentSet.forEach((s, idx) =&gt; {
                const card = document.createElement(&#39;div&#39;);
                card.className = &quot;bg-slate-900/90 border border-slate-700 rounded-xl p-4 flex flex-col justify-between shadow-md&quot;;
                const keysHtml = s.keys.map(k =&gt; `&lt;span class=&quot;key-badge shrink-0&quot;&gt;${escapeHtml(k)}&lt;/span&gt;`).join(&#39;&lt;span class=&quot;text-slate-500 text-xs font-bold px-0.5 select-none self-center&quot;&gt;+&lt;/span&gt;&#39;);
                
                card.innerHTML = `
                    &lt;div class=&quot;flex items-center justify-between mb-2&quot;&gt;
                        &lt;span class=&quot;text-[10px] font-bold text-amber-400 bg-amber-950/80 px-2 py-0.5 rounded border border-amber-800&quot;&gt;#${currentGuidedSetIndex * 5 + idx + 1}&lt;/span&gt;
                        &lt;span class=&quot;text-[10px] text-slate-400&quot;&gt;${escapeHtml(s.category)}&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;h4 class=&quot;text-xs font-bold text-white mb-3&quot;&gt;${escapeHtml(s.action)}&lt;/h4&gt;
                    &lt;div class=&quot;flex flex-wrap items-center gap-1&quot;&gt;${keysHtml}&lt;/div&gt;
                `;
                grid.appendChild(card);
            });

            document.getElementById(&#39;guided-phase-study&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;guided-phase-test&#39;).classList.add(&#39;hidden&#39;);
        }

        function prevGuidedSet() {
            if (currentGuidedSetIndex &gt; 0) {
                currentGuidedSetIndex--;
                renderGuidedMode();
            }
        }

        function nextGuidedSet() {
            const totalSets = Math.ceil(shortcuts.length / 5);
            if (currentGuidedSetIndex &lt; totalSets - 1) {
                currentGuidedSetIndex++;
                renderGuidedMode();
            }
        }

        function startKeypressDrill() {
            currentTestQueue = [...getSetShortcuts()];
            document.getElementById(&#39;guided-phase-study&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;guided-phase-test&#39;).classList.remove(&#39;hidden&#39;);
            loadTestShortcut();
        }

        function backToStudy() {
            document.getElementById(&#39;guided-phase-study&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;guided-phase-test&#39;).classList.add(&#39;hidden&#39;);
        }

        function loadTestShortcut() {
            if (currentTestQueue.length === 0) {
                playSuccessSound();
                showToast(`Set ${currentGuidedSetIndex + 1} Fully Mastered! Excellent!`);
                nextGuidedSet();
                return;
            }

            const currentItem = currentTestQueue[0];
            usedHintForCurrent = false;

            document.getElementById(&#39;test-queue-badge&#39;).innerText = `Remaining in Set: ${currentTestQueue.length}`;
            document.getElementById(&#39;test-target-action&#39;).innerText = `&quot;${currentItem.action}&quot;`;

            const winWarning = document.getElementById(&#39;windows-warning-banner&#39;);
            const isCtrlZero = currentItem.keys.includes(&#39;Ctrl&#39;) &amp;&amp; (currentItem.keys.includes(&#39;0&#39;) || currentItem.keys.includes(&#39;Shift&#39;));
            winWarning.classList.toggle(&#39;hidden&#39;, !isCtrlZero);
            
            document.getElementById(&#39;test-hint-box&#39;).classList.add(&#39;hidden&#39;);
            
            const feedback = document.getElementById(&#39;test-feedback&#39;);
            feedback.innerText = &#39;&#39;;
            feedback.className = &#39;h-8 text-sm font-bold transition-all mb-4&#39;;

            resetLiveKeysUI();
        }

        function triggerHint() {
            if (currentTestQueue.length === 0) return;
            const currentItem = currentTestQueue[0];

            usedHintForCurrent = true;
            playErrorSound();

            const container = document.getElementById(&#39;hint-keys-container&#39;);
            container.innerHTML = currentItem.keys
                .map(k =&gt; `&lt;span class=&quot;key-badge key-badge-hint shrink-0&quot;&gt;${escapeHtml(k)}&lt;/span&gt;`)
                .join(&#39;&lt;span class=&quot;text-amber-400 font-bold px-1 self-center&quot;&gt;+&lt;/span&gt;&#39;);

            document.getElementById(&#39;test-hint-box&#39;).classList.remove(&#39;hidden&#39;);

            const feedback = document.getElementById(&#39;test-feedback&#39;);
            feedback.className = &quot;h-8 text-xs font-bold text-amber-400 flex items-center justify-center gap-2&quot;;
            feedback.innerHTML = `&lt;i class=&quot;fa-solid fa-triangle-exclamation&quot;&gt;&lt;/i&gt; Shortcut marked as &#39;Not Learned&#39;. Re-queued for memory test!`;

            showToast(`Marked &quot;${currentItem.action}&quot; as Not Learned.`);
        }

        function resetLiveKeysUI() {
            activePhysicalKeys.clear();
            sequenceBuffer = [];
            if (sequenceTimer) clearTimeout(sequenceTimer);
            document.getElementById(&#39;live-keys-container&#39;).innerHTML = `&lt;span class=&quot;text-xs text-slate-500 italic&quot;&gt;Press physical keys on your keyboard...&lt;/span&gt;`;
        }

        function skipTestShortcut() {
            if (currentTestQueue.length &lt;= 1) return;
            const skipped = currentTestQueue.shift();
            currentTestQueue.push(skipped);
            loadTestShortcut();
        }

        function normalizeEventKey(e) {
            if (e.code &amp;&amp; e.code.startsWith(&#39;Digit&#39;)) return e.code.replace(&#39;Digit&#39;, &#39;&#39;);
            if (e.code &amp;&amp; e.code.startsWith(&#39;Key&#39;)) return e.code.replace(&#39;Key&#39;, &#39;&#39;);

            const codeMap = {
                &#39;Numpad0&#39;: &#39;0&#39;, &#39;Numpad1&#39;: &#39;1&#39;, &#39;Numpad2&#39;: &#39;2&#39;, &#39;Numpad3&#39;: &#39;3&#39;, &#39;Numpad4&#39;: &#39;4&#39;,
                &#39;Numpad5&#39;: &#39;5&#39;, &#39;Numpad6&#39;: &#39;6&#39;, &#39;Numpad7&#39;: &#39;7&#39;, &#39;Numpad8&#39;: &#39;8&#39;, &#39;Numpad9&#39;: &#39;9&#39;,
                &#39;Minus&#39;: &#39;-&#39;, &#39;Equal&#39;: &#39;=&#39;, &#39;Slash&#39;: &#39;/&#39;, &#39;Backslash&#39;: &#39;\\&#39;, &#39;Backquote&#39;: &#39;`&#39;,
                &#39;Semicolon&#39;: &#39;;&#39;, &#39;Quote&#39;: &quot;&#39;&quot;, &#39;Comma&#39;: &#39;,&#39;, &#39;Period&#39;: &#39;.&#39;,
                &#39;BracketLeft&#39;: &#39;[&#39;, &#39;BracketRight&#39;: &#39;]&#39;,
                &#39;ArrowUp&#39;: &#39;↑&#39;, &#39;ArrowDown&#39;: &#39;↓&#39;, &#39;ArrowLeft&#39;: &#39;←&#39;, &#39;ArrowRight&#39;: &#39;→&#39;,
                &#39;PageUp&#39;: &#39;PageUp&#39;, &#39;PageDown&#39;: &#39;PageDown&#39;, &#39;Home&#39;: &#39;Home&#39;, &#39;End&#39;: &#39;End&#39;,
                &#39;Delete&#39;: &#39;Delete&#39;, &#39;Backspace&#39;: &#39;Backspace&#39;, &#39;Tab&#39;: &#39;Tab&#39;, &#39;Enter&#39;: &#39;Enter&#39;, &#39;Escape&#39;: &#39;Esc&#39;
            };
            if (codeMap[e.code]) return codeMap[e.code];

            let k = e.key;
            if (k === &#39;Control&#39;) return &#39;Ctrl&#39;;
            if (k === &#39; &#39;) return &#39;Space&#39;;
            if (k === &#39;ArrowUp&#39;) return &#39;↑&#39;;
            if (k === &#39;ArrowDown&#39;) return &#39;↓&#39;;
            if (k === &#39;ArrowLeft&#39;) return &#39;←&#39;;
            if (k === &#39;ArrowRight&#39;) return &#39;→&#39;;

            const shiftSymbols = {
                &#39;)&#39;: &#39;0&#39;, &#39;!&#39;: &#39;1&#39;, &#39;@&#39;: &#39;2&#39;, &#39;#&#39;: &#39;3&#39;, &#39;$&#39;: &#39;4&#39;, &#39;%&#39;: &#39;5&#39;, &#39;^&#39;: &#39;6&#39;, &#39;&amp;&#39;: &#39;7&#39;, &#39;*&#39;: &#39;8&#39;, &#39;(&#39;: &#39;9&#39;,
                &#39;_&#39;: &#39;-&#39;, &#39;+&#39;: &#39;=&#39;, &#39;?&#39;: &#39;/&#39;, &#39;|&#39;: &#39;\\&#39;, &#39;~&#39;: &#39;`&#39;, &#39;:&#39;: &#39;;&#39;, &#39;&quot;&#39;: &quot;&#39;&quot;, &#39;&lt;&#39;: &#39;,&#39;, &#39;&gt;&#39;: &#39;.&#39;,
                &#39;{&#39;: &#39;[&#39;, &#39;}&#39;: &#39;]&#39;
            };
            if (shiftSymbols[k]) return shiftSymbols[k];

            return k.length === 1 ? k.toUpperCase() : k;
        }

        function setupPhysicalKeyboardListener() {
            window.addEventListener(&#39;keydown&#39;, (e) =&gt; {
                if (activeMode !== &#39;guided&#39; || document.getElementById(&#39;guided-phase-test&#39;).classList.contains(&#39;hidden&#39;)) {
                    return;
                }

                e.preventDefault();
                playKeySound();

                const normKey = normalizeEventKey(e);

                if (e.ctrlKey) activePhysicalKeys.add(&#39;Ctrl&#39;);
                if (e.shiftKey) activePhysicalKeys.add(&#39;Shift&#39;);
                if (e.altKey) activePhysicalKeys.add(&#39;Alt&#39;);

                if (![&#39;Control&#39;, &#39;Shift&#39;, &#39;Alt&#39;, &#39;Meta&#39;].includes(e.key)) {
                    activePhysicalKeys.add(normKey);
                    if (!sequenceBuffer.includes(normKey)) {
                        sequenceBuffer.push(normKey);
                    }
                }

                if (sequenceTimer) clearTimeout(sequenceTimer);
                sequenceTimer = setTimeout(() =&gt; { sequenceBuffer = []; }, 1800);

                updateLiveKeysUI();
                evaluatePhysicalKeyPresses();
            });

            window.addEventListener(&#39;keyup&#39;, () =&gt; {
                if (activeMode !== &#39;guided&#39;) return;
                setTimeout(() =&gt; activePhysicalKeys.clear(), 350);
            });
        }

        function updateLiveKeysUI() {
            const container = document.getElementById(&#39;live-keys-container&#39;);
            if (activePhysicalKeys.size === 0 &amp;&amp; sequenceBuffer.length === 0) {
                container.innerHTML = `&lt;span class=&quot;text-xs text-slate-500 italic&quot;&gt;Press physical keys on your keyboard...&lt;/span&gt;`;
                return;
            }

            const keysArr = Array.from(activePhysicalKeys);
            container.innerHTML = keysArr
                .map(k =&gt; `&lt;span class=&quot;key-badge key-badge-lg key-badge-active shrink-0&quot;&gt;${escapeHtml(k)}&lt;/span&gt;`)
                .join(&#39;&lt;span class=&quot;text-slate-400 font-bold px-1 self-center&quot;&gt;+&lt;/span&gt;&#39;);
        }

        function keysMatchTarget(targetKeys, pressedKeys, seqKeys) {
            const symMap = {
                &#39;$&#39;: &#39;4&#39;, &#39;4&#39;: &#39;$&#39;, &#39;%&#39;: &#39;5&#39;, &#39;5&#39;: &#39;%&#39;, &#39;#&#39;: &#39;3&#39;, &#39;3&#39;: &#39;#&#39;,
                &#39;~&#39;: &#39;`&#39;, &#39;`&#39;: &#39;~&#39;, &#39;!&#39;: &#39;1&#39;, &#39;1&#39;: &#39;!&#39;, &#39;@&#39;: &#39;2&#39;, &#39;2&#39;: &#39;@&#39;,
                &#39;)&#39;: &#39;0&#39;, &#39;0&#39;: &#39;)&#39;, &#39;(&#39;: &#39;9&#39;, &#39;9&#39;: &#39;(&#39;, &#39;_&#39;: &#39;-&#39;, &#39;-&#39;: &#39;_&#39;
            };

            const tArr = targetKeys.map(k =&gt; k.toUpperCase());
            const pArr = pressedKeys.map(k =&gt; k.toUpperCase());
            const sArr = seqKeys.map(k =&gt; k.toUpperCase());

            const chordMatch = tArr.every(tk =&gt; {
                const altTk = symMap[tk] ? symMap[tk].toUpperCase() : tk;
                return pArr.includes(tk) || pArr.includes(altTk);
            }) &amp;&amp; tArr.length === pArr.length;

            if (chordMatch) return true;

            if (tArr[0] === &#39;ALT&#39; &amp;&amp; tArr.length &gt; 2) {
                const seqMatch = tArr.every(tk =&gt; pArr.includes(tk) || sArr.includes(tk));
                if (seqMatch) return true;
            }

            return false;
        }

        function evaluatePhysicalKeyPresses() {
            if (currentTestQueue.length === 0) return;
            const currentItem = currentTestQueue[0];

            const pressedArr = Array.from(activePhysicalKeys);
            const matches = keysMatchTarget(currentItem.keys, pressedArr, sequenceBuffer);

            const feedback = document.getElementById(&#39;test-feedback&#39;);

            if (matches) {
                if (usedHintForCurrent) {
                    playErrorSound();
                    feedback.className = &quot;h-8 text-sm font-bold text-amber-400 flex items-center justify-center gap-2&quot;;
                    feedback.innerHTML = `&lt;i class=&quot;fa-solid fa-rotate-right&quot;&gt;&lt;/i&gt; Correct! Re-queued so you can test it from memory later.`;
                    
                    const itemToRequeue = currentTestQueue.shift();
                    currentTestQueue.push(itemToRequeue);

                    setTimeout(() =&gt; loadTestShortcut(), 1200);
                } else {
                    playSuccessSound();
                    feedback.className = &quot;h-8 text-sm font-bold text-emerald-400 flex items-center justify-center gap-2&quot;;
                    feedback.innerHTML = `&lt;i class=&quot;fa-solid fa-circle-check text-base&quot;&gt;&lt;/i&gt; Mastered! Perfect Memory!`;

                    currentTestQueue.shift();

                    setTimeout(() =&gt; loadTestShortcut(), 800);
                }
            }
        }

        // ==========================================
        // 2. CHEATSHEET &amp; SEARCH LOGIC
        // ==========================================
        function setCategory(cat) {
            activeCategory = cat;
            
            document.querySelectorAll(&#39;.cat-btn&#39;).forEach(btn =&gt; {
                const isSelected = (btn.getAttribute(&#39;data-category&#39;) === cat);
                if (isSelected) {
                    btn.className = &quot;cat-btn active whitespace-nowrap flex items-center gap-2 px-3.5 py-1.5 rounded-xl text-xs font-semibold transition-all bg-emerald-600 text-white border border-emerald-500 shadow-md&quot;;
                } else {
                    btn.className = &quot;cat-btn whitespace-nowrap flex items-center gap-2 px-3.5 py-1.5 rounded-xl text-xs font-medium transition-all text-slate-300 hover:bg-slate-700/60 bg-slate-900/50 border border-slate-700/60 hover:text-white&quot;;
                }
            });

            const activeLabel = document.getElementById(&#39;active-cat-label&#39;);
            if (activeLabel) {
                activeLabel.innerText = cat === &#39;All&#39; ? &#39;All Shortcuts&#39; : cat;
            }

            renderShortcuts();
        }

        function filterShortcuts() {
            searchQuery = document.getElementById(&#39;search-input&#39;).value.toLowerCase().trim();
            document.getElementById(&#39;clear-search&#39;).classList.toggle(&#39;hidden&#39;, searchQuery === &#39;&#39;);
            renderShortcuts();
        }

        function clearSearch() {
            document.getElementById(&#39;search-input&#39;).value = &#39;&#39;;
            searchQuery = &#39;&#39;;
            document.getElementById(&#39;clear-search&#39;).classList.add(&#39;hidden&#39;);
            renderShortcuts();
        }

        function renderShortcuts() {
            const container = document.getElementById(&#39;cards-container&#39;);
            const emptyState = document.getElementById(&#39;empty-state&#39;);
            if (!container) return;

            container.innerHTML = &#39;&#39;;

            const searchInput = document.getElementById(&#39;search-input&#39;);
            const query = searchInput ? searchInput.value.toLowerCase().trim() : &#39;&#39;;

            const filtered = shortcuts.filter(s =&gt; {
                const matchesCat = (activeCategory === &#39;All&#39;) ||
                                   (activeCategory === &#39;Favorites&#39; &amp;&amp; favorites.includes(s.id)) ||
                                   (s.category === activeCategory);
                const matchesSearch = !query ||
                                      s.action.toLowerCase().includes(query) ||
                                      s.keys.join(&#39; &#39;).toLowerCase().includes(query) ||
                                      s.category.toLowerCase().includes(query);
                return matchesCat &amp;&amp; matchesSearch;
            });

            if (filtered.length === 0) {
                emptyState.classList.remove(&#39;hidden&#39;);
            } else {
                emptyState.classList.add(&#39;hidden&#39;);
                filtered.forEach(s =&gt; {
                    const isFav = favorites.includes(s.id);
                    const card = document.createElement(&#39;div&#39;);
                    card.className = &quot;bg-slate-800 border border-slate-700/80 hover:border-slate-600 rounded-xl p-3.5 flex flex-col justify-between transition-all hover:shadow-lg group&quot;;
                    
                    const keysHtml = s.keys.map(k =&gt; `&lt;span class=&quot;key-badge shrink-0&quot;&gt;${escapeHtml(k)}&lt;/span&gt;`).join(&#39;&lt;span class=&quot;text-slate-500 text-xs font-bold px-0.5 select-none self-center&quot;&gt;+&lt;/span&gt;&#39;);

                    card.innerHTML = `
                        &lt;div class=&quot;flex flex-col h-full justify-between&quot;&gt;
                            &lt;div&gt;
                                &lt;div class=&quot;flex items-center justify-between gap-2 mb-2&quot;&gt;
                                    &lt;span class=&quot;text-[10px] font-bold text-slate-400 uppercase tracking-wider bg-slate-900/60 px-2 py-0.5 rounded-md border border-slate-700/50&quot;&gt;${escapeHtml(s.category)}&lt;/span&gt;
                                    &lt;button onclick=&quot;toggleFav(${s.id}); playClickSound();&quot; class=&quot;text-slate-500 hover:text-yellow-400 transition-colors&quot; title=&quot;Bookmark&quot;&gt;
                                        &lt;i class=&quot;${isFav ? &#39;fa-solid text-yellow-400&#39; : &#39;fa-regular&#39;} fa-star text-sm&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                                &lt;h3 class=&quot;text-xs font-semibold text-slate-200 group-hover:text-emerald-400 transition-colors leading-snug&quot;&gt;${escapeHtml(s.action)}&lt;/h3&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;mt-3 pt-2.5 border-t border-slate-700/40 flex flex-wrap items-center gap-1&quot;&gt;
                                ${keysHtml}
                            &lt;/div&gt;
                        &lt;/div&gt;
                    `;
                    container.appendChild(card);
                });
            }
        }

        function toggleFav(id) {
            favorites = favorites.includes(id) ? favorites.filter(fId =&gt; fId !== id) : [...favorites, id];
            localStorage.setItem(&#39;ninja_favs&#39;, JSON.stringify(favorites));
            updateStats();
            renderShortcuts();
        }

        function updateStats() {
            const total = shortcuts.length;
            const favs = favorites.length;
            
            document.getElementById(&#39;shortcut-count&#39;).innerText = total;
            document.getElementById(&#39;fav-count&#39;).innerText = favs;

            const getCatCount = (cat) =&gt; shortcuts.filter(s =&gt; s.category === cat).length;

            const countAll = document.getElementById(&#39;cat-count-all&#39;);
            if (countAll) countAll.innerText = total;

            const countFav = document.getElementById(&#39;cat-count-fav&#39;);
            if (countFav) countFav.innerText = favs;

            const countGen = document.getElementById(&#39;cat-count-general&#39;);
            if (countGen) countGen.innerText = getCatCount(&#39;General&#39;);

            const countNav = document.getElementById(&#39;cat-count-navigation&#39;);
            if (countNav) countNav.innerText = getCatCount(&#39;Navigation&#39;);

            const countSel = document.getElementById(&#39;cat-count-selection&#39;);
            if (countSel) countSel.innerText = getCatCount(&#39;Selection&#39;);

            const countFmt = document.getElementById(&#39;cat-count-formatting&#39;);
            if (countFmt) countFmt.innerText = getCatCount(&#39;Formatting&#39;);

            const countFrm = document.getElementById(&#39;cat-count-formulas&#39;);
            if (countFrm) countFrm.innerText = getCatCount(&#39;Formulas&#39;);

            const countPvt = document.getElementById(&#39;cat-count-pivot&#39;);
            if (countPvt) countPvt.innerText = getCatCount(&#39;Pivot &amp; Charts&#39;);

            const countVba = document.getElementById(&#39;cat-count-vba&#39;);
            if (countVba) countVba.innerText = getCatCount(&#39;VBA &amp; Power BI&#39;);

            const gameHighEl = document.getElementById(&#39;game-high&#39;);
            if (gameHighEl) gameHighEl.innerText = gameHigh;
        }

        function showToast(msg) {
            const toast = document.getElementById(&#39;toast&#39;);
            document.getElementById(&#39;toast-msg&#39;).innerText = msg;
            toast.classList.remove(&#39;opacity-0&#39;, &#39;pointer-events-none&#39;);
            setTimeout(() =&gt; toast.classList.add(&#39;opacity-0&#39;, &#39;pointer-events-none&#39;), 2200);
        }

        // ==========================================
        // 3. MULTIPLE CHOICE QUIZ LOGIC WITH START/STOP
        // ==========================================
        function initTrainer() {
            document.getElementById(&#39;game-score&#39;).innerText = gameScore;
            document.getElementById(&#39;game-streak&#39;).innerText = gameStreak;
            document.getElementById(&#39;game-high&#39;).innerText = gameHigh;
        }

        function startQuiz() {
            isQuizActive = true;
            gameScore = 0;
            gameStreak = 0;
            maxSessionStreak = 0;
            questionsAnsweredInSession = 0;

            document.getElementById(&#39;quiz-start-screen&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;quiz-summary-screen&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;quiz-active-card&#39;).classList.remove(&#39;hidden&#39;);

            initTrainer();
            nextQuestion();
        }

        function stopQuiz() {
            isQuizActive = false;
            
            document.getElementById(&#39;summary-score&#39;).innerText = gameScore;
            document.getElementById(&#39;summary-streak&#39;).innerText = maxSessionStreak;
            document.getElementById(&#39;summary-answered&#39;).innerText = questionsAnsweredInSession;

            document.getElementById(&#39;quiz-active-card&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;quiz-summary-screen&#39;).classList.remove(&#39;hidden&#39;);
        }

        function resetToQuizMenu() {
            isQuizActive = false;
            document.getElementById(&#39;start-screen-high&#39;).innerText = gameHigh;
            document.getElementById(&#39;quiz-summary-screen&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;quiz-active-card&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;quiz-start-screen&#39;).classList.remove(&#39;hidden&#39;);
        }

        function nextQuestion() {
            if (!isQuizActive) return;

            document.getElementById(&#39;game-feedback&#39;).innerText = &#39;&#39;;
            const randomTarget = shortcuts[Math.floor(Math.random() * shortcuts.length)];
            currentGameQuestion = randomTarget;

            document.getElementById(&#39;game-cat&#39;).innerText = randomTarget.category;
            document.getElementById(&#39;game-question&#39;).innerText = `What shortcut performs: &quot;${randomTarget.action}&quot;?`;

            let options = [randomTarget];
            while (options.length &lt; 4) {
                const rand = shortcuts[Math.floor(Math.random() * shortcuts.length)];
                if (!options.find(o =&gt; o.id === rand.id)) options.push(rand);
            }
            options.sort(() =&gt; Math.random() - 0.5);

            const optionsGrid = document.getElementById(&#39;game-options&#39;);
            optionsGrid.innerHTML = &#39;&#39;;

            options.forEach(opt =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &quot;bg-slate-700/60 hover:bg-slate-700 border border-slate-600 text-slate-200 text-xs font-mono font-bold py-3 px-4 rounded-xl transition-all flex items-center justify-center gap-1.5 shadow-sm&quot;;
                
                const keysHtml = opt.keys.map(k =&gt; `&lt;span class=&quot;key-badge text-xs shrink-0&quot;&gt;${escapeHtml(k)}&lt;/span&gt;`).join(&#39;&lt;span class=&quot;text-slate-400 font-bold px-0.5 select-none&quot;&gt;+&lt;/span&gt;&#39;);
                btn.innerHTML = `&lt;div class=&quot;flex flex-wrap items-center justify-center gap-1&quot;&gt;${keysHtml}&lt;/div&gt;`;
                
                btn.onclick = () =&gt; {
                    playClickSound();
                    checkAnswer(opt.id === randomTarget.id, btn);
                };
                optionsGrid.appendChild(btn);
            });
        }

        function checkAnswer(isCorrect, btn) {
            if (!isQuizActive) return;

            questionsAnsweredInSession++;
            const feedback = document.getElementById(&#39;game-feedback&#39;);

            if (isCorrect) {
                playSuccessSound();
                btn.className = &quot;bg-emerald-600 border border-emerald-400 text-white text-xs font-mono font-bold py-3 px-4 rounded-xl transition-all flex items-center justify-center gap-1.5 shadow-lg scale-102&quot;;
                feedback.className = &quot;h-8 text-sm font-semibold text-emerald-400 flex items-center justify-center gap-2&quot;;
                feedback.innerHTML = `&lt;i class=&quot;fa-solid fa-circle-check&quot;&gt;&lt;/i&gt; Correct! Excellent speed!`;
                
                gameScore += 10;
                gameStreak++;
                maxSessionStreak = Math.max(maxSessionStreak, gameStreak);

                if (gameStreak &gt; gameHigh) {
                    gameHigh = gameStreak;
                    localStorage.setItem(&#39;ninja_high&#39;, gameHigh);
                }
            } else {
                playErrorSound();
                btn.className = &quot;bg-rose-900/80 border border-rose-500 text-white text-xs font-mono font-bold py-3 px-4 rounded-xl transition-all flex items-center justify-center gap-1.5 shadow-lg&quot;;
                feedback.className = &quot;h-8 text-sm font-semibold text-rose-400 flex items-center justify-center gap-2&quot;;
                feedback.innerHTML = `&lt;i class=&quot;fa-solid fa-circle-xmark&quot;&gt;&lt;/i&gt; Incorrect. Correct combo: ${currentGameQuestion.keys.join(&#39; + &#39;)}`;
                gameStreak = 0;
            }

            initTrainer();
            document.querySelectorAll(&#39;#game-options button&#39;).forEach(b =&gt; b.onclick = null);

            setTimeout(() =&gt; {
                if (isQuizActive) {
                    nextQuestion();
                }
            }, 1400);
        }
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
=====================

&lt;svg viewBox=&quot;0 0 800 420&quot; width=&quot;100%&quot; height=&quot;100%&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; style=&quot;background:#0f172a; font-family:&#39;Inter&#39;, system-ui, sans-serif; border-radius:12px;&quot;&gt;
  &lt;defs&gt;
    &lt;linearGradient id=&quot;brand&quot; x1=&quot;0%&quot; y1=&quot;0%&quot; x2=&quot;100%&quot; y2=&quot;100%&quot;&gt;
      &lt;stop offset=&quot;0%&quot; stop-color=&quot;#107C41&quot;/&gt;
      &lt;stop offset=&quot;100%&quot; stop-color=&quot;#0d6334&quot;/&gt;
    &lt;/linearGradient&gt;
    &lt;linearGradient id=&quot;amber&quot; x1=&quot;0%&quot; y1=&quot;0%&quot; x2=&quot;100%&quot; y2=&quot;100%&quot;&gt;
      &lt;stop offset=&quot;0%&quot; stop-color=&quot;#d97706&quot;/&gt;
      &lt;stop offset=&quot;100%&quot; stop-color=&quot;#78350f&quot;/&gt;
    &lt;/linearGradient&gt;
  &lt;/defs&gt;

  &lt;!-- Header Bar --&gt;
  &lt;rect x=&quot;20&quot; y=&quot;20&quot; width=&quot;760&quot; height=&quot;50&quot; rx=&quot;10&quot; fill=&quot;#1e293b&quot; stroke=&quot;#334155&quot; stroke-width=&quot;1&quot;/&gt;
  &lt;rect x=&quot;35&quot; y=&quot;30&quot; width=&quot;30&quot; height=&quot;30&quot; rx=&quot;6&quot; fill=&quot;url(#brand)&quot;/&gt;
  &lt;text x=&quot;42&quot; y=&quot;50&quot; font-size=&quot;16&quot; font-weight=&quot;bold&quot; fill=&quot;#ffffff&quot;&gt;X&lt;/text&gt;
  &lt;text x=&quot;75&quot; y=&quot;45&quot; font-size=&quot;14&quot; font-weight=&quot;bold&quot; fill=&quot;#ffffff&quot;&gt;Shortcut Dojo&lt;/text&gt;
  &lt;text x=&quot;75&quot; y=&quot;58&quot; font-size=&quot;10&quot; fill=&quot;#94a3b8&quot;&gt;App Guide &amp;amp; Workflow&lt;/text&gt;

  &lt;!-- Navigation Tabs --&gt;
  &lt;rect x=&quot;480&quot; y=&quot;30&quot; width=&quot;285&quot; height=&quot;30&quot; rx=&quot;8&quot; fill=&quot;#0f172a&quot; stroke=&quot;#334155&quot;/&gt;
  &lt;rect x=&quot;483&quot; y=&quot;33&quot; width=&quot;95&quot; height=&quot;24&quot; rx=&quot;6&quot; fill=&quot;url(#brand)&quot;/&gt;
  &lt;text x=&quot;495&quot; y=&quot;49&quot; font-size=&quot;10&quot; font-weight=&quot;bold&quot; fill=&quot;#ffffff&quot;&gt;1. Guided Drill&lt;/text&gt;
  &lt;text x=&quot;590&quot; y=&quot;49&quot; font-size=&quot;10&quot; font-weight=&quot;bold&quot; fill=&quot;#94a3b8&quot;&gt;2. Cheatsheet&lt;/text&gt;
  &lt;text x=&quot;685&quot; y=&quot;49&quot; font-size=&quot;10&quot; font-weight=&quot;bold&quot; fill=&quot;#94a3b8&quot;&gt;3. Quiz&lt;/text&gt;

  &lt;!-- Module 1: Guided Drill Box --&gt;
  &lt;rect x=&quot;20&quot; y=&quot;85&quot; width=&quot;240&quot; height=&quot;315&quot; rx=&quot;12&quot; fill=&quot;#1e293b&quot; stroke=&quot;#334155&quot; stroke-width=&quot;1&quot;/&gt;
  &lt;rect x=&quot;35&quot; y=&quot;100&quot; width=&quot;210&quot; height=&quot;22&quot; rx=&quot;11&quot; fill=&quot;#78350f&quot; stroke=&quot;#d97706&quot; stroke-width=&quot;0.8&quot;/&gt;
  &lt;text x=&quot;75&quot; y=&quot;114&quot; font-size=&quot;10&quot; font-weight=&quot;bold&quot; fill=&quot;#fbbf24&quot;&gt;GUIDED DRILL MODE&lt;/text&gt;

  &lt;!-- Step 1 --&gt;
  &lt;rect x=&quot;35&quot; y=&quot;132&quot; width=&quot;210&quot; height=&quot;50&quot; rx=&quot;8&quot; fill=&quot;#0f172a&quot; stroke=&quot;#334155&quot;/&gt;
  &lt;circle cx=&quot;52&quot; cy=&quot;157&quot; r=&quot;10&quot; fill=&quot;#334155&quot;/&gt;
  &lt;text x=&quot;49&quot; y=&quot;161&quot; font-size=&quot;10&quot; font-weight=&quot;bold&quot; fill=&quot;#ffffff&quot;&gt;1&lt;/text&gt;
  &lt;text x=&quot;70&quot; y=&quot;150&quot; font-size=&quot;11&quot; font-weight=&quot;bold&quot; fill=&quot;#f8fafc&quot;&gt;Study 5 Cards&lt;/text&gt;
  &lt;text x=&quot;70&quot; y=&quot;164&quot; font-size=&quot;9&quot; fill=&quot;#94a3b8&quot;&gt;Memorize batch of 5 hotkeys&lt;/text&gt;

  &lt;!-- Step 2 --&gt;
  &lt;rect x=&quot;35&quot; y=&quot;192&quot; width=&quot;210&quot; height=&quot;50&quot; rx=&quot;8&quot; fill=&quot;#0f172a&quot; stroke=&quot;#107C41&quot;/&gt;
  &lt;circle cx=&quot;52&quot; cy=&quot;217&quot; r=&quot;10&quot; fill=&quot;#107C41&quot;/&gt;
  &lt;text x=&quot;49&quot; y=&quot;221&quot; font-size=&quot;10&quot; font-weight=&quot;bold&quot; fill=&quot;#ffffff&quot;&gt;2&lt;/text&gt;
  &lt;text x=&quot;70&quot; y=&quot;210&quot; font-size=&quot;11&quot; font-weight=&quot;bold&quot; fill=&quot;#22c55e&quot;&gt;Physical Key Test&lt;/text&gt;
  &lt;text x=&quot;70&quot; y=&quot;224&quot; font-size=&quot;9&quot; fill=&quot;#94a3b8&quot;&gt;Press real keys (e.g. Ctrl+Shift+0)&lt;/text&gt;

  &lt;!-- Step 3 (Hint / Requeue) --&gt;
  &lt;rect x=&quot;35&quot; y=&quot;252&quot; width=&quot;210&quot; height=&quot;65&quot; rx=&quot;8&quot; fill=&quot;#0f172a&quot; stroke=&quot;#d97706&quot; stroke-dasharray=&quot;3 3&quot;/&gt;
  &lt;text x=&quot;45&quot; y=&quot;270&quot; font-size=&quot;10&quot; font-weight=&quot;bold&quot; fill=&quot;#fbbf24&quot;&gt;💡 &quot;Show Hint&quot; Clicked?&lt;/text&gt;
  &lt;text x=&quot;45&quot; y=&quot;285&quot; font-size=&quot;9&quot; fill=&quot;#cbd5e1&quot;&gt;• Marks key as &quot;Not Learned&quot;&lt;/text&gt;
  &lt;text x=&quot;45&quot; y=&quot;298&quot; font-size=&quot;9&quot; fill=&quot;#cbd5e1&quot;&gt;• Re-queues to back of set until solved&lt;/text&gt;

  &lt;!-- Step 4 Success --&gt;
  &lt;rect x=&quot;35&quot; y=&quot;327&quot; width=&quot;210&quot; height=&quot;55&quot; rx=&quot;8&quot; fill=&quot;#0f172a&quot; stroke=&quot;#334155&quot;/&gt;
  &lt;text x=&quot;45&quot; y=&quot;348&quot; font-size=&quot;10&quot; font-weight=&quot;bold&quot; fill=&quot;#38bdf8&quot;&gt;Level Mastery Progress&lt;/text&gt;
  &lt;text x=&quot;45&quot; y=&quot;363&quot; font-size=&quot;9&quot; fill=&quot;#94a3b8&quot;&gt;Master all 5 → Unlocks next set&lt;/text&gt;

  &lt;!-- Module 2: Cheatsheet Box --&gt;
  &lt;rect x=&quot;280&quot; y=&quot;85&quot; width=&quot;240&quot; height=&quot;315&quot; rx=&quot;12&quot; fill=&quot;#1e293b&quot; stroke=&quot;#334155&quot; stroke-width=&quot;1&quot;/&gt;
  &lt;rect x=&quot;295&quot; y=&quot;100&quot; width=&quot;210&quot; height=&quot;22&quot; rx=&quot;11&quot; fill=&quot;#064e3b&quot; stroke=&quot;#107C41&quot; stroke-width=&quot;0.8&quot;/&gt;
  &lt;text x=&quot;345&quot; y=&quot;114&quot; font-size=&quot;10&quot; font-weight=&quot;bold&quot; fill=&quot;#34d399&quot;&gt;CHEATSHEET LIBRARY&lt;/text&gt;

  &lt;rect x=&quot;295&quot; y=&quot;132&quot; width=&quot;210&quot; height=&quot;30&quot; rx=&quot;6&quot; fill=&quot;#0f172a&quot; stroke=&quot;#334155&quot;/&gt;
  &lt;text x=&quot;305&quot; y=&quot;151&quot; font-size=&quot;10&quot; fill=&quot;#64748b&quot;&gt;🔍 Live Search Hotkeys...&lt;/text&gt;

  &lt;!-- Horizontal Filter Bar Visual --&gt;
  &lt;rect x=&quot;295&quot; y=&quot;170&quot; width=&quot;210&quot; height=&quot;24&quot; rx=&quot;4&quot; fill=&quot;#0f172a&quot;/&gt;
  &lt;rect x=&quot;298&quot; y=&quot;173&quot; width=&quot;55&quot; height=&quot;18&quot; rx=&quot;3&quot; fill=&quot;#107C41&quot;/&gt;
  &lt;text x=&quot;304&quot; y=&quot;185&quot; font-size=&quot;8&quot; fill=&quot;#ffffff&quot;&gt;All (65)&lt;/text&gt;
  &lt;rect x=&quot;357&quot; y=&quot;173&quot; width=&quot;50&quot; height=&quot;18&quot; rx=&quot;3&quot; fill=&quot;#334155&quot;/&gt;
  &lt;text x=&quot;362&quot; y=&quot;185&quot; font-size=&quot;8&quot; fill=&quot;#cbd5e1&quot;&gt;★ Favs&lt;/text&gt;
  &lt;rect x=&quot;411&quot; y=&quot;173&quot; width=&quot;50&quot; height=&quot;18&quot; rx=&quot;3&quot; fill=&quot;#334155&quot;/&gt;
  &lt;text x=&quot;416&quot; y=&quot;185&quot; font-size=&quot;8&quot; fill=&quot;#cbd5e1&quot;&gt;General&lt;/text&gt;

  &lt;!-- Card Sample 1 --&gt;
  &lt;rect x=&quot;295&quot; y=&quot;204&quot; width=&quot;210&quot; height=&quot;55&quot; rx=&quot;6&quot; fill=&quot;#0f172a&quot; stroke=&quot;#334155&quot;/&gt;
  &lt;text x=&quot;305&quot; y=&quot;222&quot; font-size=&quot;10&quot; font-weight=&quot;bold&quot; fill=&quot;#f1f5f9&quot;&gt;Unhide selected columns&lt;/text&gt;
  &lt;rect x=&quot;305&quot; y=&quot;230&quot; width=&quot;28&quot; height=&quot;16&quot; rx=&quot;3&quot; fill=&quot;#334155&quot;/&gt;&lt;text x=&quot;310&quot; y=&quot;242&quot; font-size=&quot;8&quot; font-weight=&quot;bold&quot; fill=&quot;#fff&quot;&gt;Ctrl&lt;/text&gt;
  &lt;text x=&quot;336&quot; y=&quot;242&quot; font-size=&quot;8&quot; fill=&quot;#64748b&quot;&gt;+&lt;/text&gt;
  &lt;rect x=&quot;342&quot; y=&quot;230&quot; width=&quot;32&quot; height=&quot;16&quot; rx=&quot;3&quot; fill=&quot;#334155&quot;/&gt;&lt;text x=&quot;346&quot; y=&quot;242&quot; font-size=&quot;8&quot; font-weight=&quot;bold&quot; fill=&quot;#fff&quot;&gt;Shift&lt;/text&gt;
  &lt;text x=&quot;377&quot; y=&quot;242&quot; font-size=&quot;8&quot; fill=&quot;#64748b&quot;&gt;+&lt;/text&gt;
  &lt;rect x=&quot;383&quot; y=&quot;230&quot; width=&quot;18&quot; height=&quot;16&quot; rx=&quot;3&quot; fill=&quot;#334155&quot;/&gt;&lt;text x=&quot;389&quot; y=&quot;242&quot; font-size=&quot;8&quot; font-weight=&quot;bold&quot; fill=&quot;#fff&quot;&gt;0&lt;/text&gt;

  &lt;!-- Card Sample 2 --&gt;
  &lt;rect x=&quot;295&quot; y=&quot;267&quot; width=&quot;210&quot; height=&quot;55&quot; rx=&quot;6&quot; fill=&quot;#0f172a&quot; stroke=&quot;#334155&quot;/&gt;
  &lt;text x=&quot;305&quot; y=&quot;285&quot; font-size=&quot;10&quot; font-weight=&quot;bold&quot; fill=&quot;#f1f5f9&quot;&gt;Save current workbook&lt;/text&gt;
  &lt;rect x=&quot;305&quot; y=&quot;293&quot; width=&quot;28&quot; height=&quot;16&quot; rx=&quot;3&quot; fill=&quot;#334155&quot;/&gt;&lt;text x=&quot;310&quot; y=&quot;305&quot; font-size=&quot;8&quot; font-weight=&quot;bold&quot; fill=&quot;#fff&quot;&gt;Ctrl&lt;/text&gt;
  &lt;text x=&quot;336&quot; y=&quot;305&quot; font-size=&quot;8&quot; fill=&quot;#64748b&quot;&gt;+&lt;/text&gt;
  &lt;rect x=&quot;342&quot; y=&quot;293&quot; width=&quot;18&quot; height=&quot;16&quot; rx=&quot;3&quot; fill=&quot;#334155&quot;/&gt;&lt;text x=&quot;348&quot; y=&quot;305&quot; font-size=&quot;8&quot; font-weight=&quot;bold&quot; fill=&quot;#fff&quot;&gt;S&lt;/text&gt;

  &lt;text x=&quot;295&quot; y=&quot;348&quot; font-size=&quot;9&quot; fill=&quot;#94a3b8&quot;&gt;• Click ★ star to bookmark&lt;/text&gt;
  &lt;text x=&quot;295&quot; y=&quot;362&quot; font-size=&quot;9&quot; fill=&quot;#94a3b8&quot;&gt;• Copy button copies key string&lt;/text&gt;

  &lt;!-- Module 3: Quiz Mode Box --&gt;
  &lt;rect x=&quot;540&quot; y=&quot;85&quot; width=&quot;240&quot; height=&quot;315&quot; rx=&quot;12&quot; fill=&quot;#1e293b&quot; stroke=&quot;#334155&quot; stroke-width=&quot;1&quot;/&gt;
  &lt;rect x=&quot;555&quot; y=&quot;100&quot; width=&quot;210&quot; height=&quot;22&quot; rx=&quot;11&quot; fill=&quot;#1e1b4b&quot; stroke=&quot;#6366f1&quot; stroke-width=&quot;0.8&quot;/&gt;
  &lt;text x=&quot;610&quot; y=&quot;114&quot; font-size=&quot;10&quot; font-weight=&quot;bold&quot; fill=&quot;#a5b4fc&quot;&gt;SPEEDRUNNER QUIZ&lt;/text&gt;

  &lt;rect x=&quot;555&quot; y=&quot;132&quot; width=&quot;210&quot; height=&quot;80&quot; rx=&quot;8&quot; fill=&quot;#0f172a&quot; stroke=&quot;#334155&quot;/&gt;
  &lt;text x=&quot;565&quot; y=&quot;152&quot; font-size=&quot;9&quot; font-weight=&quot;bold&quot; fill=&quot;#38bdf8&quot;&gt;Multiple Choice Mode&lt;/text&gt;
  &lt;text x=&quot;565&quot; y=&quot;170&quot; font-size=&quot;10&quot; fill=&quot;#f8fafc&quot;&gt;Select correct combo for:&lt;/text&gt;
  &lt;text x=&quot;565&quot; y=&quot;188&quot; font-size=&quot;10&quot; font-weight=&quot;bold&quot; fill=&quot;#fbbf24&quot;&gt;&quot;Freeze Panes&quot;&lt;/text&gt;

  &lt;rect x=&quot;555&quot; y=&quot;222&quot; width=&quot;100&quot; height=&quot;28&quot; rx=&quot;6&quot; fill=&quot;#334155&quot;/&gt;&lt;text x=&quot;580&quot; y=&quot;239&quot; font-size=&quot;9&quot; fill=&quot;#fff&quot;&gt;Alt + W + F&lt;/text&gt;
  &lt;rect x=&quot;665&quot; y=&quot;222&quot; width=&quot;100&quot; height=&quot;28&quot; rx=&quot;6&quot; fill=&quot;#334155&quot;/&gt;&lt;text x=&quot;688&quot; y=&quot;239&quot; font-size=&quot;9&quot; fill=&quot;#fff&quot;&gt;Ctrl + F4&lt;/text&gt;
  &lt;rect x=&quot;555&quot; y=&quot;258&quot; width=&quot;100&quot; height=&quot;28&quot; rx=&quot;6&quot; fill=&quot;#334155&quot;/&gt;&lt;text x=&quot;583&quot; y=&quot;275&quot; font-size=&quot;9&quot; fill=&quot;#fff&quot;&gt;Alt + A + T&lt;/text&gt;
  &lt;rect x=&quot;665&quot; y=&quot;258&quot; width=&quot;100&quot; height=&quot;28&quot; rx=&quot;6&quot; fill=&quot;#334155&quot;/&gt;&lt;text x=&quot;692&quot; y=&quot;275&quot; font-size=&quot;9&quot; fill=&quot;#fff&quot;&gt;Shift + F11&lt;/text&gt;

  &lt;rect x=&quot;555&quot; y=&quot;300&quot; width=&quot;210&quot; height=&quot;82&quot; rx=&quot;8&quot; fill=&quot;#0f172a&quot; stroke=&quot;#334155&quot;/&gt;
  &lt;text x=&quot;565&quot; y=&quot;320&quot; font-size=&quot;9&quot; font-weight=&quot;bold&quot; fill=&quot;#22c55e&quot;&gt;Gamified HUD Engine&lt;/text&gt;
  &lt;text x=&quot;565&quot; y=&quot;338&quot; font-size=&quot;9&quot; fill=&quot;#cbd5e1&quot;&gt;• Score tracking (+10 per hit)&lt;/text&gt;
  &lt;text x=&quot;565&quot; y=&quot;352&quot; font-size=&quot;9&quot; fill=&quot;#cbd5e1&quot;&gt;• Win streak counter&lt;/text&gt;
  &lt;text x=&quot;565&quot; y=&quot;366&quot; font-size=&quot;9&quot; fill=&quot;#cbd5e1&quot;&gt;• Best streak persistent high score&lt;/text&gt;
&lt;/svg&gt;

</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/1529067799885671076/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/1529067799885671076' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/1529067799885671076'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/1529067799885671076'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2026/10/excel-speedrunner-build-muscle-memory.html' title='Excel Speedrunner — Build Muscle Memory for Lightning-Fast Spreadsheets'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZeSP4LFdjq6m_ljPg29lw9epBJPmDxMPvshV9K0-YG0s5D3yvhqOv_GsmALDLDbR1E6ASKniUQwaOT7WNmDI9llsbHMLxH0uVIUtNTDFlb3OFX2Nnbj3a3rEJnkhi4kOKhqzemYGLhpsbR1Hgk10ReiXdoZkMOzSFDRqDGBuT1A6baBPovYQnRkB4fe0X/s72-c/Gemini_Generated_Image_3vk8g73vk8g73vk8.jpeg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-3500842902798041578</id><published>2026-10-05T09:19:59.946+05:00</published><updated>2026-10-05T09:19:59.946+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="educational"/><category scheme="http://www.blogger.com/atom/ns#" term="Image processing"/><category scheme="http://www.blogger.com/atom/ns#" term="tutorial"/><title type='text'>In-Browser Image Processing &amp; Diff Tool – Powered by OpenCV.js</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu_SjsKWuCy9bB9OpEgFDhXzetCJuWVOksXUrTwMOK4dosOh9egKgOSn8i7JlthRb8UNnjZTpnBmUhgAzIXy7DwpY_I4ZqcumwOoWMfKYwf4QjnkN2XMJBruo8aEuEFRN4GPop7UT_JxUNglUAjXtJLiPklk4_mfM_tMGWQRUr1r_O4PHj4dn_0eYcNIBr/s813/Image%20analysis%20cover%20image.jpg&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;600&quot; data-original-height=&quot;438&quot; data-original-width=&quot;813&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu_SjsKWuCy9bB9OpEgFDhXzetCJuWVOksXUrTwMOK4dosOh9egKgOSn8i7JlthRb8UNnjZTpnBmUhgAzIXy7DwpY_I4ZqcumwOoWMfKYwf4QjnkN2XMJBruo8aEuEFRN4GPop7UT_JxUNglUAjXtJLiPklk4_mfM_tMGWQRUr1r_O4PHj4dn_0eYcNIBr/s600/Image%20analysis%20cover%20image.jpg&quot;/&gt;&lt;/a&gt;&lt;/div&gt;
========================
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot; class=&quot;dark&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;OpenCV.js Image Processing &amp; Comparison Suite&lt;/title&gt;
    &lt;!-- Tailwind CSS --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        tailwind.config = {
            darkMode: &#39;class&#39;,
            theme: {
                extend: {
                    colors: {
                        darkBg: &#39;#090d16&#39;,
                        cardBg: &#39;#111827&#39;,
                        cardHeader: &#39;#1f2937&#39;,
                        accent: &#39;#3b82f6&#39;,
                        accentHover: &#39;#2563eb&#39;,
                        glow: &#39;#60a5fa&#39;
                    }
                }
            }
        }
    &lt;/script&gt;
    &lt;!-- FontAwesome Icons --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;style&gt;
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #090d16;
        }
        ::-webkit-scrollbar-thumb {
            background: #1f2937;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #374151;
        }
        .canvas-bg {
            background-image: radial-gradient(#1f2937 1px, transparent 0);
            background-size: 16px 16px;
            background-color: #0b0f19;
        }
        .split-slider-container {
            position: relative;
            overflow: hidden;
            user-select: none;
        }
        .split-slider-handle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 4px;
            background-color: #3b82f6;
            cursor: ew-resize;
            z-index: 30;
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
        }
        .split-slider-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 32px;
            height: 32px;
            background-color: #2563eb;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 8px rgba(0,0,0,0.5);
            font-size: 12px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;bg-darkBg text-gray-100 font-sans min-h-screen flex flex-col antialiased selection:bg-blue-500 selection:text-white&quot;&gt;

    &lt;header class=&quot;border-b border-gray-800 bg-gray-900/80 backdrop-blur-md sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 py-3 flex flex-wrap items-center justify-between gap-4&quot;&gt;
            &lt;div class=&quot;flex items-center space-x-3&quot;&gt;
                &lt;div class=&quot;p-2 bg-blue-600/20 text-blue-400 rounded-lg border border-blue-500/30&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-layer-group text-xl&quot;&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;div&gt;
                    &lt;h1 class=&quot;text-lg font-bold tracking-wide text-white flex items-center gap-2&quot;&gt;
                        VisionLab Dual
                        &lt;span class=&quot;text-xs font-semibold px-2 py-0.5 rounded bg-blue-900/50 text-blue-300 border border-blue-700/50&quot;&gt;Wasm v4.x&lt;/span&gt;
                    &lt;/h1&gt;
                    &lt;p class=&quot;text-xs text-gray-400&quot;&gt;OpenCV.js Image Filters &amp; Advanced Comparison Suite&lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;!-- Global Mode Switcher in Header --&gt;
            &lt;div class=&quot;flex items-center bg-gray-950 p-1 rounded-xl border border-gray-800&quot;&gt;
                &lt;button id=&quot;tabModeSingle&quot; onclick=&quot;setAppMode(&#39;single&#39;)&quot; class=&quot;px-4 py-1.5 text-xs font-semibold rounded-lg transition-all flex items-center gap-2 bg-blue-600 text-white shadow-md&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-image&quot;&gt;&lt;/i&gt; Single Image
                &lt;/button&gt;
                &lt;button id=&quot;tabModeCompare&quot; onclick=&quot;setAppMode(&#39;compare&#39;)&quot; class=&quot;px-4 py-1.5 text-xs font-semibold rounded-lg transition-all text-gray-400 hover:text-white flex items-center gap-2&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-columns&quot;&gt;&lt;/i&gt; Dual Compare
                &lt;/button&gt;
            &lt;/div&gt;

            &lt;!-- OpenCV Loading Banner --&gt;
            &lt;div id=&quot;cvStatusBadge&quot; class=&quot;flex items-center space-x-2 px-3 py-1.5 rounded-full bg-amber-500/10 border border-amber-500/30 text-amber-400 text-xs font-medium&quot;&gt;
                &lt;i class=&quot;fa-solid fa-spinner fa-spin&quot; id=&quot;cvStatusSpinner&quot;&gt;&lt;/i&gt;
                &lt;span id=&quot;cvStatusText&quot;&gt;Loading OpenCV.js Wasm...&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;main class=&quot;flex-1 max-w-7xl w-full mx-auto p-4 md:p-6 grid grid-cols-1 lg:grid-cols-12 gap-6&quot;&gt;
        
        &lt;!-- LEFT CONTROL PANEL --&gt;
        &lt;aside class=&quot;lg:col-span-4 flex flex-col space-y-5&quot;&gt;
            
            &lt;!-- 1. Source Upload Panel --&gt;
            &lt;section class=&quot;bg-cardBg border border-gray-800 rounded-xl p-4 shadow-xl&quot;&gt;
                &lt;h2 class=&quot;text-xs font-bold uppercase tracking-wider text-gray-400 mb-3 flex items-center justify-between&quot;&gt;
                    &lt;span&gt;&lt;i class=&quot;fa-solid fa-upload text-blue-400 me-1.5&quot;&gt;&lt;/i&gt; Image Sources&lt;/span&gt;
                    &lt;button onclick=&quot;loadSamplePreset()&quot; class=&quot;text-[10px] text-blue-400 hover:text-blue-300 font-normal underline&quot;&gt;Load Sample Data&lt;/button&gt;
                &lt;/h2&gt;

                &lt;!-- Single Mode File Upload --&gt;
                &lt;div id=&quot;panelUploadSingle&quot; class=&quot;space-y-3&quot;&gt;
                    &lt;div id=&quot;dropZoneSingle&quot; class=&quot;border-2 border-dashed border-gray-700 hover:border-blue-500/50 rounded-xl p-4 text-center cursor-pointer transition-colors bg-gray-900/40&quot;&gt;
                        &lt;input type=&quot;file&quot; id=&quot;fileInputSingle&quot; accept=&quot;image/*&quot; class=&quot;hidden&quot; onchange=&quot;handleSingleUpload(event)&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-cloud-arrow-up text-2xl text-gray-500 mb-1&quot;&gt;&lt;/i&gt;
                        &lt;p class=&quot;text-xs text-gray-300 font-medium&quot;&gt;Click or Drag &amp; Drop Main Image&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Compare Mode File Uploads --&gt;
                &lt;div id=&quot;panelUploadCompare&quot; class=&quot;hidden space-y-3&quot;&gt;
                    &lt;div class=&quot;grid grid-cols-2 gap-2&quot;&gt;
                        &lt;div id=&quot;dropZoneA&quot; onclick=&quot;document.getElementById(&#39;fileInputA&#39;).click()&quot; class=&quot;border-2 border-dashed border-gray-700 hover:border-blue-500/50 rounded-xl p-3 text-center cursor-pointer bg-gray-900/40 transition-colors&quot;&gt;
                            &lt;input type=&quot;file&quot; id=&quot;fileInputA&quot; accept=&quot;image/*&quot; class=&quot;hidden&quot; onchange=&quot;handleCompareUpload(event, &#39;A&#39;)&quot;&gt;
                            &lt;i class=&quot;fa-solid fa-file-image text-xl text-blue-400 mb-1 block&quot;&gt;&lt;/i&gt;
                            &lt;span class=&quot;text-xs font-semibold text-gray-300&quot;&gt;Image A&lt;/span&gt;
                            &lt;p class=&quot;text-[10px] text-gray-500 truncate mt-0.5&quot; id=&quot;lblFileA&quot;&gt;None selected&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;div id=&quot;dropZoneB&quot; onclick=&quot;document.getElementById(&#39;fileInputB&#39;).click()&quot; class=&quot;border-2 border-dashed border-gray-700 hover:border-blue-500/50 rounded-xl p-3 text-center cursor-pointer bg-gray-900/40 transition-colors&quot;&gt;
                            &lt;input type=&quot;file&quot; id=&quot;fileInputB&quot; accept=&quot;image/*&quot; class=&quot;hidden&quot; onchange=&quot;handleCompareUpload(event, &#39;B&#39;)&quot;&gt;
                            &lt;i class=&quot;fa-solid fa-file-image text-xl text-purple-400 mb-1 block&quot;&gt;&lt;/i&gt;
                            &lt;span class=&quot;text-xs font-semibold text-gray-300&quot;&gt;Image B&lt;/span&gt;
                            &lt;p class=&quot;text-[10px] text-gray-500 truncate mt-0.5&quot; id=&quot;lblFileB&quot;&gt;None selected&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/section&gt;

            &lt;!-- 2. Operations &amp; Algorithms Panel --&gt;
            &lt;section class=&quot;bg-cardBg border border-gray-800 rounded-xl p-4 shadow-xl flex-1 flex flex-col&quot;&gt;
                &lt;h2 class=&quot;text-xs font-bold uppercase tracking-wider text-gray-400 mb-3 flex items-center gap-2&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-sliders text-blue-400&quot;&gt;&lt;/i&gt; Operation Pipeline
                &lt;/h2&gt;

                &lt;!-- Algorithm Dropdown (Swaps based on Single / Compare Mode) --&gt;
                &lt;div class=&quot;mb-4&quot;&gt;
                    &lt;label class=&quot;text-[11px] text-gray-400 font-medium block mb-1&quot;&gt;Select Processing Mode&lt;/label&gt;
                    
                    &lt;!-- Single Mode Options --&gt;
                    &lt;select id=&quot;algoSelectSingle&quot; onchange=&quot;onAlgorithmChange()&quot; class=&quot;w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-xs text-gray-200 focus:outline-none focus:border-blue-500&quot;&gt;
                        &lt;option value=&quot;none&quot;&gt;Pass-Through (Original)&lt;/option&gt;
                        &lt;option value=&quot;grayscale&quot;&gt;Grayscale Conversion&lt;/option&gt;
                        &lt;option value=&quot;blur&quot;&gt;Gaussian Blur&lt;/option&gt;
                        &lt;option value=&quot;canny&quot;&gt;Canny Edge Detection&lt;/option&gt;
                        &lt;option value=&quot;threshold&quot;&gt;Binary &amp; Adaptive Thresholding&lt;/option&gt;
                        &lt;option value=&quot;histogram&quot;&gt;Histogram Equalization&lt;/option&gt;
                        &lt;option value=&quot;morphology&quot;&gt;Morphology (Erosion / Dilation)&lt;/option&gt;
                        &lt;option value=&quot;distance&quot;&gt;Distance Transform&lt;/option&gt;
                        &lt;option value=&quot;watershed&quot;&gt;Watershed Segmentation&lt;/option&gt;
                    &lt;/select&gt;

                    &lt;!-- Compare Mode Options --&gt;
                    &lt;select id=&quot;algoSelectCompare&quot; onchange=&quot;onAlgorithmChange()&quot; class=&quot;hidden w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-xs text-gray-200 focus:outline-none focus:border-blue-500&quot;&gt;
                        &lt;option value=&quot;split&quot;&gt;Interactive Split-Screen (Curtain Slider)&lt;/option&gt;
                        &lt;option value=&quot;sidebyside&quot;&gt;Side-by-Side Dual View&lt;/option&gt;
                        &lt;option value=&quot;absdiff&quot;&gt;Absolute Difference (cv.absdiff)&lt;/option&gt;
                        &lt;option value=&quot;diffmap&quot;&gt;Pixel Change Detection (Threshold Map)&lt;/option&gt;
                        &lt;option value=&quot;ssim_mse&quot;&gt;SSIM &amp; MSE Metrics Analysis&lt;/option&gt;
                        &lt;option value=&quot;featurematching&quot;&gt;Feature Matching (ORB + BruteForce)&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/div&gt;

                &lt;!-- Controls Tuning Box --&gt;
                &lt;div id=&quot;controlsContainer&quot; class=&quot;space-y-4 bg-gray-900/60 p-3.5 rounded-lg border border-gray-800 flex-1 overflow-y-auto max-h-[320px]&quot;&gt;
                    &lt;p class=&quot;text-xs text-gray-500 text-center py-4&quot;&gt;No parameters required for selected operation.&lt;/p&gt;
                &lt;/div&gt;
            &lt;/section&gt;
        &lt;/aside&gt;

        &lt;!-- RIGHT DISPLAY &amp; ANALYTICS AREA --&gt;
        &lt;main class=&quot;lg:col-span-8 flex flex-col space-y-5&quot;&gt;
            
            &lt;!-- Top Stats &amp; Metric Banner --&gt;
            &lt;div class=&quot;bg-cardBg border border-gray-800 rounded-xl p-3 px-4 shadow-xl flex flex-wrap items-center justify-between gap-4&quot;&gt;
                &lt;div class=&quot;flex items-center space-x-6 text-xs&quot;&gt;
                    &lt;div&gt;
                        &lt;span class=&quot;text-gray-500 block text-[10px] uppercase font-bold tracking-wider&quot;&gt;Execution Speed&lt;/span&gt;
                        &lt;span id=&quot;statProcTime&quot; class=&quot;font-mono text-emerald-400 font-semibold text-sm&quot;&gt;0.0 ms&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div&gt;
                        &lt;span class=&quot;text-gray-500 block text-[10px] uppercase font-bold tracking-wider&quot;&gt;Canvas Resolution&lt;/span&gt;
                        &lt;span id=&quot;statResolution&quot; class=&quot;font-mono text-gray-300 font-semibold text-sm&quot;&gt;0 x 0&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;statMetricBox&quot; class=&quot;hidden border-l border-gray-800 pl-4&quot;&gt;
                        &lt;span id=&quot;statMetricLabel&quot; class=&quot;text-gray-500 block text-[10px] uppercase font-bold tracking-wider&quot;&gt;Similarity Score&lt;/span&gt;
                        &lt;span id=&quot;statMetricVal&quot; class=&quot;font-mono text-blue-400 font-semibold text-sm&quot;&gt;--&lt;/span&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class=&quot;flex items-center gap-2&quot;&gt;
                    &lt;button onclick=&quot;downloadSnapshot()&quot; class=&quot;px-3 py-1.5 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-xs font-medium transition-all flex items-center gap-1.5 shadow-lg shadow-blue-900/20&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-download&quot;&gt;&lt;/i&gt; Save Result
                    &lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;!-- Dynamic Viewport Area --&gt;
            &lt;div class=&quot;bg-cardBg border border-gray-800 rounded-xl p-3 shadow-xl flex-1 flex flex-col min-h-[460px]&quot;&gt;
                
                &lt;!-- SINGLE MODE CONTAINER --&gt;
                &lt;div id=&quot;viewportSingle&quot; class=&quot;grid grid-cols-1 md:grid-cols-2 gap-4 flex-1&quot;&gt;
                    &lt;!-- Source View --&gt;
                    &lt;div class=&quot;flex flex-col&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-center mb-2 px-1&quot;&gt;
                            &lt;span class=&quot;text-xs font-semibold text-gray-400 uppercase tracking-wider flex items-center gap-1.5&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-circle text-[8px] text-blue-500&quot;&gt;&lt;/i&gt; Original Input
                            &lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;canvas-bg flex-1 rounded-lg border border-gray-800 overflow-hidden flex items-center justify-center min-h-[280px]&quot;&gt;
                            &lt;canvas id=&quot;canvasSingleInput&quot; class=&quot;max-w-full max-h-full object-contain&quot;&gt;&lt;/canvas&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;!-- Output View --&gt;
                    &lt;div class=&quot;flex flex-col&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-center mb-2 px-1&quot;&gt;
                            &lt;span class=&quot;text-xs font-semibold text-gray-400 uppercase tracking-wider flex items-center gap-1.5&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-wand-magic-sparkles text-[10px] text-emerald-400&quot;&gt;&lt;/i&gt; Processed Filter
                            &lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;canvas-bg flex-1 rounded-lg border border-gray-800 overflow-hidden flex items-center justify-center min-h-[280px]&quot;&gt;
                            &lt;canvas id=&quot;canvasSingleOutput&quot; class=&quot;max-w-full max-h-full object-contain&quot;&gt;&lt;/canvas&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- COMPARE MODE CONTAINER --&gt;
                &lt;div id=&quot;viewportCompare&quot; class=&quot;hidden flex-1 flex flex-col justify-center&quot;&gt;
                    
                    &lt;!-- View A: Split-Screen Slider View --&gt;
                    &lt;div id=&quot;viewSplitSlider&quot; class=&quot;split-slider-container canvas-bg w-full h-[460px] rounded-lg border border-gray-800 relative&quot;&gt;
                        &lt;canvas id=&quot;canvasSplitA&quot; class=&quot;absolute inset-0 w-full h-full object-contain pointer-events-none&quot;&gt;&lt;/canvas&gt;
                        &lt;div id=&quot;splitClipB&quot; class=&quot;absolute inset-0 w-full h-full overflow-hidden pointer-events-none&quot; style=&quot;clip-path: inset(0 0 0 50%);&quot;&gt;
                            &lt;canvas id=&quot;canvasSplitB&quot; class=&quot;w-full h-full object-contain&quot;&gt;&lt;/canvas&gt;
                        &lt;/div&gt;
                        &lt;div id=&quot;splitHandle&quot; class=&quot;split-slider-handle&quot; style=&quot;left: 50%;&quot;&gt;
                            &lt;div class=&quot;split-slider-button&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-arrows-left-right&quot;&gt;&lt;/i&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

                    &lt;!-- View B: Side-by-Side Dual View --&gt;
                    &lt;div id=&quot;viewSideBySide&quot; class=&quot;hidden grid grid-cols-1 md:grid-cols-2 gap-4 h-full&quot;&gt;
                        &lt;div class=&quot;flex flex-col&quot;&gt;
                            &lt;span class=&quot;text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-1&quot;&gt;Image A&lt;/span&gt;
                            &lt;div class=&quot;canvas-bg flex-1 rounded-lg border border-gray-800 overflow-hidden flex items-center justify-center min-h-[280px]&quot;&gt;
                                &lt;canvas id=&quot;canvasSideA&quot; class=&quot;max-w-full max-h-full object-contain&quot;&gt;&lt;/canvas&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;flex flex-col&quot;&gt;
                            &lt;span class=&quot;text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-1&quot;&gt;Image B&lt;/span&gt;
                            &lt;div class=&quot;canvas-bg flex-1 rounded-lg border border-gray-800 overflow-hidden flex items-center justify-center min-h-[280px]&quot;&gt;
                                &lt;canvas id=&quot;canvasSideB&quot; class=&quot;max-w-full max-h-full object-contain&quot;&gt;&lt;/canvas&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

                    &lt;!-- View C: Single Output Canvas (AbsDiff, Change Map, Feature Matching) --&gt;
                    &lt;div id=&quot;viewSingleCompareCanvas&quot; class=&quot;hidden flex-1 flex flex-col&quot;&gt;
                        &lt;div class=&quot;canvas-bg flex-1 rounded-lg border border-gray-800 overflow-hidden flex items-center justify-center min-h-[380px]&quot;&gt;
                            &lt;canvas id=&quot;canvasCompareOutput&quot; class=&quot;max-w-full max-h-full object-contain&quot;&gt;&lt;/canvas&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

                &lt;/div&gt;

            &lt;/div&gt;
        &lt;/main&gt;
    &lt;/main&gt;

    &lt;!-- Hidden Offscreen Holders --&gt;
    &lt;img id=&quot;imgHolderSingle&quot; class=&quot;hidden&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;img id=&quot;imgHolderA&quot; class=&quot;hidden&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;img id=&quot;imgHolderB&quot; class=&quot;hidden&quot; crossorigin=&quot;anonymous&quot;&gt;

    &lt;script&gt;
        // App State Management
        let cvReady = false;
        let appMode = &#39;single&#39;; // &#39;single&#39; or &#39;compare&#39;
        
        // Single Mode State
        let singleImageLoaded = false;

        // Compare Mode State
        let imgALoaded = false;
        let imgBLoaded = false;

        // Interactive Curtain Slider Drag State
        let isDraggingSplit = false;

        // DOM Elements Initialization
        const canvasSingleInput = document.getElementById(&#39;canvasSingleInput&#39;);
        const canvasSingleOutput = document.getElementById(&#39;canvasSingleOutput&#39;);
        
        const canvasSplitA = document.getElementById(&#39;canvasSplitA&#39;);
        const canvasSplitB = document.getElementById(&#39;canvasSplitB&#39;);
        const canvasSideA = document.getElementById(&#39;canvasSideA&#39;);
        const canvasSideB = document.getElementById(&#39;canvasSideB&#39;);
        const canvasCompareOutput = document.getElementById(&#39;canvasCompareOutput&#39;);

        const imgHolderSingle = document.getElementById(&#39;imgHolderSingle&#39;);
        const imgHolderA = document.getElementById(&#39;imgHolderA&#39;);
        const imgHolderB = document.getElementById(&#39;imgHolderB&#39;);

        const controlsContainer = document.getElementById(&#39;controlsContainer&#39;);

        // OpenCV Runtime Ready Handler
        function onOpenCvReady() {
            cvReady = true;
            document.getElementById(&#39;cvStatusBadge&#39;).className = &quot;flex items-center space-x-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 text-xs font-medium&quot;;
            document.getElementById(&#39;cvStatusSpinner&#39;).className = &quot;fa-solid fa-check&quot;;
            document.getElementById(&#39;cvStatusText&#39;).innerText = &quot;OpenCV.js Ready&quot;;
            
            // Load Synthetic Initial Datasets
            loadSamplePreset();
        }

        var Module = {
            onRuntimeInitialized: function() {
                onOpenCvReady();
            }
        };

        // Switch Main Mode (Single vs Dual Compare)
        function setAppMode(mode) {
            appMode = mode;
            const btnSingle = document.getElementById(&#39;tabModeSingle&#39;);
            const btnCompare = document.getElementById(&#39;tabModeCompare&#39;);
            const panelUploadSingle = document.getElementById(&#39;panelUploadSingle&#39;);
            const panelUploadCompare = document.getElementById(&#39;panelUploadCompare&#39;);
            const algoSingle = document.getElementById(&#39;algoSelectSingle&#39;);
            const algoCompare = document.getElementById(&#39;algoSelectCompare&#39;);
            const viewportSingle = document.getElementById(&#39;viewportSingle&#39;);
            const viewportCompare = document.getElementById(&#39;viewportCompare&#39;);

            if (mode === &#39;single&#39;) {
                btnSingle.className = &quot;px-4 py-1.5 text-xs font-semibold rounded-lg transition-all flex items-center gap-2 bg-blue-600 text-white shadow-md&quot;;
                btnCompare.className = &quot;px-4 py-1.5 text-xs font-semibold rounded-lg transition-all text-gray-400 hover:text-white flex items-center gap-2&quot;;
                panelUploadSingle.classList.remove(&#39;hidden&#39;);
                panelUploadCompare.classList.add(&#39;hidden&#39;);
                algoSingle.classList.remove(&#39;hidden&#39;);
                algoCompare.classList.add(&#39;hidden&#39;);
                viewportSingle.classList.remove(&#39;hidden&#39;);
                viewportCompare.classList.add(&#39;hidden&#39;);
            } else {
                btnCompare.className = &quot;px-4 py-1.5 text-xs font-semibold rounded-lg transition-all flex items-center gap-2 bg-blue-600 text-white shadow-md&quot;;
                btnSingle.className = &quot;px-4 py-1.5 text-xs font-semibold rounded-lg transition-all text-gray-400 hover:text-white flex items-center gap-2&quot;;
                panelUploadSingle.classList.add(&#39;hidden&#39;);
                panelUploadCompare.classList.remove(&#39;hidden&#39;);
                algoSingle.classList.add(&#39;hidden&#39;);
                algoCompare.classList.remove(&#39;hidden&#39;);
                viewportSingle.classList.add(&#39;hidden&#39;);
                viewportCompare.classList.remove(&#39;hidden&#39;);
            }

            onAlgorithmChange();
        }

        // Image Drag &amp; Drop Handlers
        const dropZoneSingle = document.getElementById(&#39;dropZoneSingle&#39;);
        dropZoneSingle.addEventListener(&#39;click&#39;, () =&gt; document.getElementById(&#39;fileInputSingle&#39;).click());
        dropZoneSingle.addEventListener(&#39;dragover&#39;, (e) =&gt; { e.preventDefault(); dropZoneSingle.classList.add(&#39;border-blue-500&#39;); });
        dropZoneSingle.addEventListener(&#39;dragleave&#39;, () =&gt; dropZoneSingle.classList.remove(&#39;border-blue-500&#39;));
        dropZoneSingle.addEventListener(&#39;drop&#39;, (e) =&gt; {
            e.preventDefault();
            dropZoneSingle.classList.remove(&#39;border-blue-500&#39;);
            if (e.dataTransfer.files.length) handleSingleUpload({ target: { files: e.dataTransfer.files } });
        });

        function handleSingleUpload(e) {
            const file = e.target.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = function(evt) {
                imgHolderSingle.onload = function() {
                    singleImageLoaded = true;
                    drawImageToCanvas(imgHolderSingle, canvasSingleInput);
                    runPipeline();
                };
                imgHolderSingle.src = evt.target.result;
            };
            reader.readAsDataURL(file);
        }

        function handleCompareUpload(e, target) {
            const file = e.target.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = function(evt) {
                const imgHolder = target === &#39;A&#39; ? imgHolderA : imgHolderB;
                const lbl = target === &#39;A&#39; ? document.getElementById(&#39;lblFileA&#39;) : document.getElementById(&#39;lblFileB&#39;);
                lbl.innerText = file.name;

                imgHolder.onload = function() {
                    if (target === &#39;A&#39;) imgALoaded = true;
                    if (target === &#39;B&#39;) imgBLoaded = true;
                    runPipeline();
                };
                imgHolder.src = evt.target.result;
            };
            reader.readAsDataURL(file);
        }

        // Load Synthetic Test Datasets
        function loadSamplePreset() {
            // Generate synthetic target image 1
            const c1 = document.createElement(&#39;canvas&#39;);
            c1.width = 640; c1.height = 480;
            const ctx1 = c1.getContext(&#39;2d&#39;);
            ctx1.fillStyle = &#39;#0f172a&#39;; ctx1.fillRect(0,0,640,480);
            ctx1.fillStyle = &#39;#38bdf8&#39;; ctx1.beginPath(); ctx1.arc(220, 240, 90, 0, Math.PI * 2); ctx1.fill();
            ctx1.fillStyle = &#39;#f43f5e&#39;; ctx1.fillRect(360, 150, 140, 180);
            ctx1.fillStyle = &#39;#ffffff&#39;; ctx1.font = &#39;bold 20px sans-serif&#39;; ctx1.fillText(&quot;Sample Vision Subject A&quot;, 180, 70);

            // Generate synthetic target image 2 (With slight modifications for change detection &amp; SSIM)
            const c2 = document.createElement(&#39;canvas&#39;);
            c2.width = 640; c2.height = 480;
            const ctx2 = c2.getContext(&#39;2d&#39;);
            ctx2.fillStyle = &#39;#0f172a&#39;; ctx2.fillRect(0,0,640,480);
            ctx2.fillStyle = &#39;#38bdf8&#39;; ctx2.beginPath(); ctx2.arc(230, 240, 90, 0, Math.PI * 2); ctx2.fill(); // Shifted slightly
            ctx2.fillStyle = &#39;#f43f5e&#39;; ctx2.fillRect(360, 150, 140, 180);
            ctx2.fillStyle = &#39;#10b981&#39;; ctx2.fillRect(420, 280, 60, 60); // Added new square element
            ctx2.fillStyle = &#39;#ffffff&#39;; ctx2.font = &#39;bold 20px sans-serif&#39;; ctx2.fillText(&quot;Sample Vision Subject B&quot;, 180, 70);

            imgHolderSingle.onload = function() {
                singleImageLoaded = true;
                drawImageToCanvas(imgHolderSingle, canvasSingleInput);
                
                imgHolderA.onload = function() {
                    imgALoaded = true;
                    imgHolderB.onload = function() {
                        imgBLoaded = true;
                        runPipeline();
                    };
                    imgHolderB.src = c2.toDataURL();
                };
                imgHolderA.src = c1.toDataURL();
            };
            imgHolderSingle.src = c1.toDataURL();
        }

        function drawImageToCanvas(img, canvas) {
            canvas.width = img.naturalWidth || img.width;
            canvas.height = img.naturalHeight || img.height;
            const ctx = canvas.getContext(&#39;2d&#39;);
            ctx.drawImage(img, 0, 0);
            document.getElementById(&#39;statResolution&#39;).innerText = `${canvas.width} x ${canvas.height}`;
        }

        // Algorithm Control Selector Change
        function onAlgorithmChange() {
            renderControlsUI();
            runPipeline();
        }

        // Render Dynamic Controls Options
        function renderControlsUI() {
            controlsContainer.innerHTML = &#39;&#39;;
            const algo = appMode === &#39;single&#39; ? document.getElementById(&#39;algoSelectSingle&#39;).value : document.getElementById(&#39;algoSelectCompare&#39;).value;

            switch (algo) {
                case &#39;blur&#39;:
                    controlsContainer.innerHTML = `
                        &lt;div class=&quot;space-y-3&quot;&gt;
                            &lt;div class=&quot;flex justify-between text-xs text-gray-400 mb-1&quot;&gt;
                                &lt;span&gt;Kernel Size (Odd)&lt;/span&gt;
                                &lt;span id=&quot;valKernel&quot;&gt;9&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;input type=&quot;range&quot; id=&quot;paramKernel&quot; min=&quot;1&quot; max=&quot;31&quot; step=&quot;2&quot; value=&quot;9&quot; oninput=&quot;document.getElementById(&#39;valKernel&#39;).innerText = this.value; runPipeline();&quot; class=&quot;w-full h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500&quot;&gt;
                        &lt;/div&gt;
                    `;
                    break;

                case &#39;canny&#39;:
                    controlsContainer.innerHTML = `
                        &lt;div class=&quot;space-y-3&quot;&gt;
                            &lt;div&gt;
                                &lt;div class=&quot;flex justify-between text-xs text-gray-400 mb-1&quot;&gt;
                                    &lt;span&gt;Threshold 1&lt;/span&gt;
                                    &lt;span id=&quot;valCanny1&quot;&gt;50&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;input type=&quot;range&quot; id=&quot;paramCanny1&quot; min=&quot;0&quot; max=&quot;255&quot; value=&quot;50&quot; oninput=&quot;document.getElementById(&#39;valCanny1&#39;).innerText = this.value; runPipeline();&quot; class=&quot;w-full h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500&quot;&gt;
                            &lt;/div&gt;
                            &lt;div&gt;
                                &lt;div class=&quot;flex justify-between text-xs text-gray-400 mb-1&quot;&gt;
                                    &lt;span&gt;Threshold 2&lt;/span&gt;
                                    &lt;span id=&quot;valCanny2&quot;&gt;150&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;input type=&quot;range&quot; id=&quot;paramCanny2&quot; min=&quot;0&quot; max=&quot;255&quot; value=&quot;150&quot; oninput=&quot;document.getElementById(&#39;valCanny2&#39;).innerText = this.value; runPipeline();&quot; class=&quot;w-full h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500&quot;&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    `;
                    break;

                case &#39;threshold&#39;:
                    controlsContainer.innerHTML = `
                        &lt;div class=&quot;space-y-3&quot;&gt;
                            &lt;label class=&quot;text-xs text-gray-300 font-medium block&quot;&gt;Thresholding Technique&lt;/label&gt;
                            &lt;select id=&quot;threshType&quot; onchange=&quot;runPipeline()&quot; class=&quot;w-full bg-gray-900 border border-gray-700 rounded-md p-1.5 text-xs text-gray-200&quot;&gt;
                                &lt;option value=&quot;binary&quot;&gt;Binary Threshold&lt;/option&gt;
                                &lt;option value=&quot;otsu&quot;&gt;Otsu Binarization&lt;/option&gt;
                                &lt;option value=&quot;adaptive&quot;&gt;Adaptive Gaussian&lt;/option&gt;
                            &lt;/select&gt;
                            &lt;div&gt;
                                &lt;div class=&quot;flex justify-between text-xs text-gray-400 mb-1&quot;&gt;
                                    &lt;span&gt;Threshold Cutoff&lt;/span&gt;
                                    &lt;span id=&quot;valThresh&quot;&gt;127&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;input type=&quot;range&quot; id=&quot;paramThresh&quot; min=&quot;0&quot; max=&quot;255&quot; value=&quot;127&quot; oninput=&quot;document.getElementById(&#39;valThresh&#39;).innerText = this.value; runPipeline();&quot; class=&quot;w-full h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500&quot;&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    `;
                    break;

                case &#39;morphology&#39;:
                    controlsContainer.innerHTML = `
                        &lt;div class=&quot;space-y-3&quot;&gt;
                            &lt;label class=&quot;text-xs text-gray-300 font-medium block&quot;&gt;Morph Operation&lt;/label&gt;
                            &lt;select id=&quot;morphOp&quot; onchange=&quot;runPipeline()&quot; class=&quot;w-full bg-gray-900 border border-gray-700 rounded-md p-1.5 text-xs text-gray-200&quot;&gt;
                                &lt;option value=&quot;erode&quot;&gt;Erosion&lt;/option&gt;
                                &lt;option value=&quot;dilate&quot;&gt;Dilation&lt;/option&gt;
                                &lt;option value=&quot;open&quot;&gt;Opening (Erode -&gt; Dilate)&lt;/option&gt;
                                &lt;option value=&quot;close&quot;&gt;Closing (Dilate -&gt; Erode)&lt;/option&gt;
                            &lt;/select&gt;
                            &lt;div&gt;
                                &lt;div class=&quot;flex justify-between text-xs text-gray-400 mb-1&quot;&gt;
                                    &lt;span&gt;Iteration Pass&lt;/span&gt;
                                    &lt;span id=&quot;valMorphIter&quot;&gt;2&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;input type=&quot;range&quot; id=&quot;paramMorphIter&quot; min=&quot;1&quot; max=&quot;10&quot; value=&quot;2&quot; oninput=&quot;document.getElementById(&#39;valMorphIter&#39;).innerText = this.value; runPipeline();&quot; class=&quot;w-full h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500&quot;&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    `;
                    break;

                case &#39;diffmap&#39;:
                    controlsContainer.innerHTML = `
                        &lt;div class=&quot;space-y-3&quot;&gt;
                            &lt;div&gt;
                                &lt;div class=&quot;flex justify-between text-xs text-gray-400 mb-1&quot;&gt;
                                    &lt;span&gt;Change Difference Sensitivity&lt;/span&gt;
                                    &lt;span id=&quot;valDiffSens&quot;&gt;30&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;input type=&quot;range&quot; id=&quot;paramDiffSens&quot; min=&quot;1&quot; max=&quot;150&quot; value=&quot;30&quot; oninput=&quot;document.getElementById(&#39;valDiffSens&#39;).innerText = this.value; runPipeline();&quot; class=&quot;w-full h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500&quot;&gt;
                            &lt;/div&gt;
                            &lt;p class=&quot;text-[11px] text-gray-400&quot;&gt;Highlights changed pixels between Image A &amp; Image B in bright neon red.&lt;/p&gt;
                        &lt;/div&gt;
                    `;
                    break;

                case &#39;featurematching&#39;:
                    controlsContainer.innerHTML = `
                        &lt;div class=&quot;space-y-3&quot;&gt;
                            &lt;div&gt;
                                &lt;div class=&quot;flex justify-between text-xs text-gray-400 mb-1&quot;&gt;
                                    &lt;span&gt;Max ORB Features&lt;/span&gt;
                                    &lt;span id=&quot;valOrbMax&quot;&gt;500&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;input type=&quot;range&quot; id=&quot;paramOrbMax&quot; min=&quot;50&quot; max=&quot;2000&quot; step=&quot;50&quot; value=&quot;500&quot; oninput=&quot;document.getElementById(&#39;valOrbMax&#39;).innerText = this.value; runPipeline();&quot; class=&quot;w-full h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500&quot;&gt;
                            &lt;/div&gt;
                            &lt;div&gt;
                                &lt;div class=&quot;flex justify-between text-xs text-gray-400 mb-1&quot;&gt;
                                    &lt;span&gt;Match Quality Filter&lt;/span&gt;
                                    &lt;span id=&quot;valMatchQual&quot;&gt;30&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;input type=&quot;range&quot; id=&quot;paramMatchQual&quot; min=&quot;10&quot; max=&quot;100&quot; value=&quot;30&quot; oninput=&quot;document.getElementById(&#39;valMatchQual&#39;).innerText = this.value; runPipeline();&quot; class=&quot;w-full h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500&quot;&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    `;
                    break;

                default:
                    controlsContainer.innerHTML = `&lt;p class=&quot;text-xs text-gray-500 text-center py-4&quot;&gt;No additional parameters required for this pipeline stage.&lt;/p&gt;`;
                    break;
            }
        }

        // Central Execution Dispatcher
        function runPipeline() {
            if (!cvReady) return;

            const metricBox = document.getElementById(&#39;statMetricBox&#39;);
            metricBox.classList.add(&#39;hidden&#39;);

            const t0 = performance.now();

            if (appMode === &#39;single&#39;) {
                if (!singleImageLoaded) return;
                executeSinglePipeline();
            } else {
                if (!imgALoaded || !imgBLoaded) return;
                executeComparePipeline();
            }

            const procTime = (performance.now() - t0).toFixed(1);
            document.getElementById(&#39;statProcTime&#39;).innerText = `${procTime} ms`;
        }

        // --- SINGLE MODE COMPUTATION PIPELINE ---
        function executeSinglePipeline() {
            const algo = document.getElementById(&#39;algoSelectSingle&#39;).value;
            
            let src = cv.imread(canvasSingleInput);
            let dst = new cv.Mat();

            try {
                switch (algo) {
                    case &#39;none&#39;:
                        src.copyTo(dst);
                        break;

                    case &#39;grayscale&#39;:
                        cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);
                        break;

                    case &#39;blur&#39;: {
                        let kSize = parseInt(document.getElementById(&#39;paramKernel&#39;)?.value || 9);
                        if (kSize % 2 === 0) kSize += 1;
                        cv.GaussianBlur(src, dst, new cv.Size(kSize, kSize), 0, 0, cv.BORDER_DEFAULT);
                        break;
                    }

                    case &#39;canny&#39;: {
                        const t1 = parseInt(document.getElementById(&#39;paramCanny1&#39;)?.value || 50);
                        const t2 = parseInt(document.getElementById(&#39;paramCanny2&#39;)?.value || 150);
                        cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);
                        cv.Canny(dst, dst, t1, t2, 3, false);
                        break;
                    }

                    case &#39;threshold&#39;: {
                        const type = document.getElementById(&#39;threshType&#39;)?.value || &#39;binary&#39;;
                        const val = parseInt(document.getElementById(&#39;paramThresh&#39;)?.value || 127);
                        cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);
                        
                        if (type === &#39;binary&#39;) {
                            cv.threshold(dst, dst, val, 255, cv.THRESH_BINARY);
                        } else if (type === &#39;otsu&#39;) {
                            cv.threshold(dst, dst, 0, 255, cv.THRESH_BINARY | cv.THRESH_OTSU);
                        } else {
                            cv.adaptiveThreshold(dst, dst, 255, cv.ADAPTIVE_THRESH_GAUSSIAN_C, cv.THRESH_BINARY, 11, 2);
                        }
                        break;
                    }

                    case &#39;histogram&#39;:
                        cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);
                        cv.equalizeHist(dst, dst);
                        break;

                    case &#39;morphology&#39;: {
                        const op = document.getElementById(&#39;morphOp&#39;)?.value || &#39;erode&#39;;
                        const iter = parseInt(document.getElementById(&#39;paramMorphIter&#39;)?.value || 2);
                        const M = cv.Mat.ones(3, 3, cv.CV_8U);
                        
                        if (op === &#39;erode&#39;) cv.erode(src, dst, M, new cv.Point(-1, -1), iter);
                        else if (op === &#39;dilate&#39;) cv.dilate(src, dst, M, new cv.Point(-1, -1), iter);
                        else if (op === &#39;open&#39;) cv.morphologyEx(src, dst, cv.MORPH_OPEN, M, new cv.Point(-1, -1), iter);
                        else if (op === &#39;close&#39;) cv.morphologyEx(src, dst, cv.MORPH_CLOSE, M, new cv.Point(-1, -1), iter);
                        M.delete();
                        break;
                    }

                    case &#39;distance&#39;:
                        cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);
                        cv.threshold(dst, dst, 100, 255, cv.THRESH_BINARY);
                        cv.distanceTransform(dst, dst, cv.DIST_L2, 5);
                        cv.normalize(dst, dst, 0, 255, cv.NORM_MINMAX, cv.CV_8U);
                        break;

                    case &#39;watershed&#39;: {
                        // Advanced Watershed Segmentation Pipeline
                        let gray = new cv.Mat();
                        let opening = new cv.Mat();
                        let coinsBg = new cv.Mat();
                        let coinsFg = new cv.Mat();
                        let dist = new cv.Mat();
                        let unknown = new cv.Mat();
                        let markers = new cv.Mat();

                        cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY);
                        cv.threshold(gray, gray, 0, 255, cv.THRESH_BINARY_INV + cv.THRESH_OTSU);

                        let M = cv.Mat.ones(3, 3, cv.CV_8U);
                        cv.morphologyEx(gray, opening, cv.MORPH_OPEN, M, new cv.Point(-1, -1), 2);
                        cv.dilate(opening, coinsBg, M, new cv.Point(-1, -1), 3);

                        cv.distanceTransform(opening, dist, cv.DIST_L2, 5);
                        cv.normalize(dist, dist, 0, 1.0, cv.NORM_MINMAX);
                        cv.threshold(dist, coinsFg, 0.5, 255, cv.THRESH_BINARY);

                        coinsFg.convertTo(coinsFg, cv.CV_8U);
                        cv.subtract(coinsBg, coinsFg, unknown);

                        cv.connectedComponents(coinsFg, markers);
                        for (let i = 0; i &lt; markers.rows; i++) {
                            for (let j = 0; j &lt; markers.cols; j++) {
                                markers.setIntAt(i, j, markers.getIntAt(i, j) + 1);
                                if (unknown.ucharAt(i, j) === 255) {
                                    markers.setIntAt(i, j, 0);
                                }
                            }
                        }

                        let srcRGB = new cv.Mat();
                        cv.cvtColor(src, srcRGB, cv.COLOR_RGBA2RGB);
                        cv.watershed(srcRGB, markers);

                        src.copyTo(dst);
                        // Draw watershed boundaries on target
                        for (let i = 0; i &lt; markers.rows; i++) {
                            for (let j = 0; j &lt; markers.cols; j++) {
                                if (markers.getIntAt(i, j) === -1) {
                                    dst.ucharPtr(i, j)[0] = 255; // Red border
                                    dst.ucharPtr(i, j)[1] = 0;
                                    dst.ucharPtr(i, j)[2] = 0;
                                }
                            }
                        }

                        gray.delete(); opening.delete(); coinsBg.delete(); coinsFg.delete();
                        dist.delete(); unknown.delete(); markers.delete(); srcRGB.delete(); M.delete();
                        break;
                    }
                }

                cv.imshow(canvasSingleOutput, dst);
            } catch (err) {
                console.error(&quot;Single Pipeline OpenCV error:&quot;, err);
            } finally {
                src.delete();
                dst.delete();
            }
        }

        // --- COMPARE MODE COMPUTATION PIPELINE ---
        function executeComparePipeline() {
            const algo = document.getElementById(&#39;algoSelectCompare&#39;).value;

            // View Mode Switching
            const viewSplit = document.getElementById(&#39;viewSplitSlider&#39;);
            const viewSide = document.getElementById(&#39;viewSideBySide&#39;);
            const viewCanvas = document.getElementById(&#39;viewSingleCompareCanvas&#39;);

            viewSplit.classList.add(&#39;hidden&#39;);
            viewSide.classList.add(&#39;hidden&#39;);
            viewCanvas.classList.add(&#39;hidden&#39;);

            // Render Source A and Source B to image mats
            drawImageToCanvas(imgHolderA, canvasSplitA);
            drawImageToCanvas(imgHolderB, canvasSplitB);
            drawImageToCanvas(imgHolderA, canvasSideA);
            drawImageToCanvas(imgHolderB, canvasSideB);

            if (algo === &#39;split&#39;) {
                viewSplit.classList.remove(&#39;hidden&#39;);
                setupSplitSliderEvents();
                return;
            } else if (algo === &#39;sidebyside&#39;) {
                viewSide.classList.remove(&#39;hidden&#39;);
                return;
            }

            viewCanvas.classList.remove(&#39;hidden&#39;);

            let matA = cv.imread(canvasSideA);
            let matB = cv.imread(canvasSideB);
            let dst = new cv.Mat();

            // Resize Mat B if dimensions mismatch Mat A for comparative math
            if (matA.rows !== matB.rows || matA.cols !== matB.cols) {
                let resizedB = new cv.Mat();
                cv.resize(matB, resizedB, new cv.Size(matA.cols, matA.rows));
                matB.delete();
                matB = resizedB;
            }

            try {
                switch (algo) {
                    case &#39;absdiff&#39;: {
                        cv.absdiff(matA, matB, dst);
                        cv.imshow(canvasCompareOutput, dst);
                        break;
                    }

                    case &#39;diffmap&#39;: {
                        const sens = parseInt(document.getElementById(&#39;paramDiffSens&#39;)?.value || 30);
                        let diff = new cv.Mat();
                        let grayDiff = new cv.Mat();
                        let mask = new cv.Mat();

                        cv.absdiff(matA, matB, diff);
                        cv.cvtColor(diff, grayDiff, cv.COLOR_RGBA2GRAY);
                        cv.threshold(grayDiff, mask, sens, 255, cv.THRESH_BINARY);

                        matA.copyTo(dst);
                        // Overlay neon red highlights over changed region threshold
                        for (let r = 0; r &lt; mask.rows; r++) {
                            for (let c = 0; c &lt; mask.cols; c++) {
                                if (mask.ucharAt(r, c) &gt; 0) {
                                    let ptr = dst.ucharPtr(r, c);
                                    ptr[0] = 244; // R
                                    ptr[1] = 63;  // G
                                    ptr[2] = 94;  // B
                                }
                            }
                        }

                        cv.imshow(canvasCompareOutput, dst);
                        diff.delete(); grayDiff.delete(); mask.delete();
                        break;
                    }

                    case &#39;ssim_mse&#39;: {
                        // Structural Similarity &amp; Mean Squared Error Calculation
                        let grayA = new cv.Mat();
                        let grayB = new cv.Mat();
                        cv.cvtColor(matA, grayA, cv.COLOR_RGBA2GRAY);
                        cv.cvtColor(matB, grayB, cv.COLOR_RGBA2GRAY);

                        // Compute MSE
                        let diff = new cv.Mat();
                        cv.absdiff(grayA, grayB, diff);
                        diff.convertTo(diff, cv.CV_32F);
                        cv.multiply(diff, diff, diff);
                        let mse = cv.mean(diff)[0].toFixed(2);

                        // Compute Simplified SSIM Proxy (1 / (1 + Normalized MSE))
                        let ssimVal = (1 / (1 + (mse / 1000))).toFixed(4);

                        // Visual AbsDiff output for reference
                        let visDiff = new cv.Mat();
                        cv.absdiff(matA, matB, visDiff);
                        cv.imshow(canvasCompareOutput, visDiff);

                        // Update Metrics Display
                        const metricBox = document.getElementById(&#39;statMetricBox&#39;);
                        const metricLabel = document.getElementById(&#39;statMetricLabel&#39;);
                        const metricVal = document.getElementById(&#39;statMetricVal&#39;);
                        
                        metricBox.classList.remove(&#39;hidden&#39;);
                        metricLabel.innerText = &quot;SSIM Score / MSE&quot;;
                        metricVal.innerText = `SSIM: ${ssimVal} | MSE: ${mse}`;

                        grayA.delete(); grayB.delete(); diff.delete(); visDiff.delete();
                        break;
                    }

                    case &#39;featurematching&#39;: {
                        const maxOrb = parseInt(document.getElementById(&#39;paramOrbMax&#39;)?.value || 500);
                        const qual = parseInt(document.getElementById(&#39;paramMatchQual&#39;)?.value || 30);

                        let grayA = new cv.Mat();
                        let grayB = new cv.Mat();
                        cv.cvtColor(matA, grayA, cv.COLOR_RGBA2GRAY);
                        cv.cvtColor(matB, grayB, cv.COLOR_RGBA2GRAY);

                        let orb = new cv.ORB(maxOrb);
                        let keypointsA = new cv.KeyPointVector();
                        let keypointsB = new cv.KeyPointVector();
                        let descriptorsA = new cv.Mat();
                        let descriptorsB = new cv.Mat();

                        orb.detectAndCompute(grayA, new cv.Mat(), keypointsA, descriptorsA);
                        orb.detectAndCompute(grayB, new cv.Mat(), keypointsB, descriptorsB);

                        if (!descriptorsA.empty() &amp;&amp; !descriptorsB.empty()) {
                            let matcher = new cv.BFMatcher(cv.NORM_HAMMING, true);
                            let matches = new cv.DMatchVector();
                            matcher.match(descriptorsA, descriptorsB, matches);

                            // Filter good matches
                            let goodMatches = new cv.DMatchVector();
                            for (let i = 0; i &lt; matches.size(); i++) {
                                let match = matches.get(i);
                                if (match.distance &lt; qual) {
                                    goodMatches.push_back(match);
                                }
                            }

                            // Draw Keypoint Correspondences
                            let matchImg = new cv.Mat();
                            cv.drawMatches(
                                grayA, keypointsA,
                                grayB, keypointsB,
                                goodMatches, matchImg,
                                new cv.Scalar(16, 185, 129, 255), // Match Line Emerald Color
                                new cv.Scalar(239, 68, 68, 255)   // Keypoint Circle Red Color
                            );

                            cv.imshow(canvasCompareOutput, matchImg);

                            // Metric Banner Updates
                            const metricBox = document.getElementById(&#39;statMetricBox&#39;);
                            document.getElementById(&#39;statMetricLabel&#39;).innerText = &quot;Feature Matches&quot;;
                            document.getElementById(&#39;statMetricVal&#39;).innerText = `${goodMatches.size()} points found`;
                            metricBox.classList.remove(&#39;hidden&#39;);

                            matcher.delete(); matches.delete(); goodMatches.delete(); matchImg.delete();
                        } else {
                            matA.copyTo(dst);
                            cv.imshow(canvasCompareOutput, dst);
                        }

                        grayA.delete(); grayB.delete(); orb.delete();
                        keypointsA.delete(); keypointsB.delete(); descriptorsA.delete(); descriptorsB.delete();
                        break;
                    }
                }
            } catch (err) {
                console.error(&quot;Compare Pipeline OpenCV error:&quot;, err);
            } finally {
                matA.delete();
                matB.delete();
                dst.delete();
            }
        }

        // --- INTERACTIVE CURTAIN SLIDER EVENTS ---
        function setupSplitSliderEvents() {
            const container = document.getElementById(&#39;viewSplitSlider&#39;);
            const handle = document.getElementById(&#39;splitHandle&#39;);
            const clipB = document.getElementById(&#39;splitClipB&#39;);

            function updateSliderPos(clientX) {
                const rect = container.getBoundingClientRect();
                let x = clientX - rect.left;
                if (x &lt; 0) x = 0;
                if (x &gt; rect.width) x = rect.width;
                const pct = (x / rect.width) * 100;
                
                handle.style.left = `${pct}%`;
                clipB.style.clipPath = `inset(0 0 0 ${pct}%)`;
            }

            container.onmousedown = (e) =&gt; { isDraggingSplit = true; updateSliderPos(e.clientX); };
            window.onmousemove = (e) =&gt; { if (isDraggingSplit) updateSliderPos(e.clientX); };
            window.onmouseup = () =&gt; { isDraggingSplit = false; };

            // Touch device gestures support
            container.ontouchstart = (e) =&gt; { isDraggingSplit = true; updateSliderPos(e.touches[0].clientX); };
            window.ontouchmove = (e) =&gt; { if (isDraggingSplit) updateSliderPos(e.touches[0].clientX); };
            window.ontouchend = () =&gt; { isDraggingSplit = false; };
        }

        // --- DOWNLOAD RESULT IMAGE ---
        function downloadSnapshot() {
            let targetCanvas;
            if (appMode === &#39;single&#39;) {
                targetCanvas = canvasSingleOutput;
            } else {
                const algo = document.getElementById(&#39;algoSelectCompare&#39;).value;
                if (algo === &#39;split&#39;) targetCanvas = canvasSplitA;
                else if (algo === &#39;sidebyside&#39;) targetCanvas = canvasSideA;
                else targetCanvas = canvasCompareOutput;
            }

            const link = document.createElement(&#39;a&#39;);
            link.download = `opencv-visionlab-${appMode}-${Date.now()}.png`;
            link.href = targetCanvas.toDataURL(&#39;image/png&#39;);
            link.click();
        }
    &lt;/script&gt;

    &lt;!-- Async Load OpenCV.js Library (v4.x) --&gt;
    &lt;script async src=&quot;https://docs.opencv.org/4.x/opencv.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;


===================

</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/3500842902798041578/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/3500842902798041578' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/3500842902798041578'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/3500842902798041578'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2026/10/in-browser-image-processing-diff-tool.html' title='In-Browser Image Processing &amp; Diff Tool – Powered by OpenCV.js'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu_SjsKWuCy9bB9OpEgFDhXzetCJuWVOksXUrTwMOK4dosOh9egKgOSn8i7JlthRb8UNnjZTpnBmUhgAzIXy7DwpY_I4ZqcumwOoWMfKYwf4QjnkN2XMJBruo8aEuEFRN4GPop7UT_JxUNglUAjXtJLiPklk4_mfM_tMGWQRUr1r_O4PHj4dn_0eYcNIBr/s72-c/Image%20analysis%20cover%20image.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-8548240051844731066</id><published>2026-10-02T16:07:17.846+05:00</published><updated>2026-10-06T13:51:30.479+05:00</updated><title type='text'>The Analytic Hierarchy Process (AHP): Step 1 to the Perfect Decision Matrix for Better Decision Making</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3cimFohxRePzk9cjlesKjhFEhBmUDYZvRz1KvBD17nVCDXnETx09HWq5bib5_5r01uuGKfjc5uLQUkwcrezfWUpmZrQxxuShVC8M98edx2Ff9m6EJoO3mK5Qx39-Re5dezhAIBjvmIYXxVMuxG2LrU9EAFGesPReeeAa5kpHEZ-u_DSu7QAnFphsfBS9W/s1376/Image.jpeg&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;600&quot; data-original-height=&quot;768&quot; data-original-width=&quot;1376&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3cimFohxRePzk9cjlesKjhFEhBmUDYZvRz1KvBD17nVCDXnETx09HWq5bib5_5r01uuGKfjc5uLQUkwcrezfWUpmZrQxxuShVC8M98edx2Ff9m6EJoO3mK5Qx39-Re5dezhAIBjvmIYXxVMuxG2LrU9EAFGesPReeeAa5kpHEZ-u_DSu7QAnFphsfBS9W/s600/Image.jpeg&quot;/&gt;&lt;/a&gt;&lt;/div&gt;

============================
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;AHP Consistency Ratio (CR) Calculator &amp; Decision Analysis Webapp&lt;/title&gt;
    &lt;!-- Tailwind CSS --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome Icons --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- SheetJS for Multi-Sheet Excel Export --&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js&quot;&gt;&lt;/script&gt;
    &lt;!-- Chart.js for Priority Weights Visualization --&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
    &lt;!-- KaTeX for Clean Mathematical Formula Rendering --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css&quot;&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js&quot;&gt;&lt;/script&gt;

    &lt;style&gt;
        @import url(&#39;https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&amp;display=swap&#39;);
        
        body {
            font-family: &#39;Inter&#39;, sans-serif;
            background-color: #f8fafc;
        }

        /* Custom styling for Saaty 9-point range sliders */
        .slider {
            -webkit-appearance: none;
            width: 100%;
            height: 8px;
            border-radius: 4px;
            background: #cbd5e1;
            outline: none;
            touch-action: manipulation;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #2563eb;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            border: 3px solid #ffffff;
            box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
        }

        .slider::-moz-range-thumb {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #2563eb;
            cursor: pointer;
            border: 3px solid #ffffff;
            box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
        }

        .slider:hover::-webkit-slider-thumb {
            transform: scale(1.15);
            background: #1d4ed8;
        }

        .tab-btn.active {
            border-bottom: 3px solid #2563eb;
            color: #2563eb;
            font-weight: 600;
            background-color: #ffffff;
        }

        /* Custom scrollbar styles */
        .custom-scrollbar::-webkit-scrollbar {
            height: 6px;
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }

        /* Sticky table column styling */
        .sticky-col {
            position: sticky;
            left: 0;
            z-index: 10;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;p-2 sm:p-4 md:p-6 lg:p-8 text-slate-800 min-h-screen&quot;&gt;

    &lt;div class=&quot;max-w-7xl mx-auto bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden&quot;&gt;
        
        &lt;!-- Header --&gt;
        &lt;div class=&quot;bg-gradient-to-r from-slate-900 via-slate-800 to-indigo-950 text-white p-4 sm:p-6 md:p-8 relative&quot;&gt;
            &lt;div class=&quot;flex flex-col lg:flex-row lg:items-center justify-between gap-4&quot;&gt;
                &lt;div class=&quot;space-y-1&quot;&gt;
                    &lt;div class=&quot;flex items-center gap-2 text-blue-400 font-semibold text-xs tracking-wider uppercase&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-calculator&quot;&gt;&lt;/i&gt; Analytic Hierarchy Process (AHP) Decision Engine
                    &lt;/div&gt;
                    &lt;h1 class=&quot;text-xl sm:text-2xl md:text-3xl font-extrabold tracking-tight leading-tight&quot;&gt;
                        AHP Consistency Ratio (CR) Calculator
                    &lt;/h1&gt;
                    &lt;p class=&quot;text-slate-300 text-xs sm:text-sm max-w-2xl leading-relaxed&quot;&gt;
                        Validate mathematical rigor, calculate principal eigenvalue (&amp;lambda;&lt;sub&gt;max&lt;/sub&gt;), priority vector weights (w&lt;sub&gt;i&lt;/sub&gt;), consistency index (CI), and consistency ratio (CR).
                    &lt;/p&gt;
                &lt;/div&gt;
                &lt;div class=&quot;flex flex-wrap items-center gap-2 sm:gap-2.5&quot;&gt;
                    &lt;button onclick=&quot;toggleModal(&#39;theory-modal&#39;)&quot; class=&quot;flex-1 sm:flex-none bg-slate-700/80 hover:bg-slate-700 text-white px-3 py-2 sm:px-3.5 sm:py-2.5 rounded-xl text-xs sm:text-sm font-semibold transition-all flex items-center justify-center gap-2 border border-slate-600 shadow-sm&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap text-yellow-400&quot;&gt;&lt;/i&gt; Math Foundations
                    &lt;/button&gt;
                    &lt;button onclick=&quot;exportToExcel()&quot; class=&quot;flex-1 sm:flex-none bg-emerald-600 hover:bg-emerald-500 text-white px-3 py-2 sm:px-4 sm:py-2.5 rounded-xl text-xs sm:text-sm font-semibold transition-all flex items-center justify-center gap-2 shadow-lg shadow-emerald-600/20&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-file-excel&quot;&gt;&lt;/i&gt; Export Excel
                    &lt;/button&gt;
                    &lt;button onclick=&quot;exportToCSV()&quot; class=&quot;flex-1 sm:flex-none bg-blue-600 hover:bg-blue-500 text-white px-3 py-2 sm:px-4 sm:py-2.5 rounded-xl text-xs sm:text-sm font-semibold transition-all flex items-center justify-center gap-2 shadow-lg shadow-blue-500/20&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-file-csv&quot;&gt;&lt;/i&gt; Export CSV
                    &lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;p-3 sm:p-6 md:p-8 space-y-6 sm:space-y-8&quot;&gt;
            
            &lt;!-- Section 1: Criteria --&gt;
            &lt;section class=&quot;bg-slate-50/80 p-4 sm:p-6 rounded-2xl border border-slate-200&quot;&gt;
                &lt;div class=&quot;flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4&quot;&gt;
                    &lt;div&gt;
                        &lt;h2 class=&quot;text-base sm:text-lg font-bold text-slate-800 flex items-center gap-2&quot;&gt;
                            &lt;span class=&quot;bg-blue-600 text-white w-7 h-7 inline-flex justify-center items-center rounded-lg text-xs font-bold shadow-sm shrink-0&quot;&gt;1&lt;/span&gt;
                            Define Decision Criteria
                        &lt;/h2&gt;
                        &lt;p class=&quot;text-xs text-slate-500 mt-0.5&quot;&gt;Add between 2 to 10 criteria for pairwise matrix evaluation.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;flex items-center gap-2 w-full sm:w-auto&quot;&gt;
                        &lt;button onclick=&quot;addCriterion()&quot; class=&quot;flex-1 sm:flex-none bg-white text-blue-600 border border-blue-200 hover:bg-blue-50 px-3 py-2 rounded-xl text-xs font-semibold transition-all flex items-center justify-center gap-1.5 shadow-sm&quot;&gt;
                            &lt;i class=&quot;fa-solid fa-plus text-xs&quot;&gt;&lt;/i&gt; Add Criterion
                        &lt;/button&gt;
                        &lt;button onclick=&quot;resetToDefaults()&quot; class=&quot;flex-1 sm:flex-none bg-slate-200 hover:bg-slate-300 text-slate-700 px-3 py-2 rounded-xl text-xs font-semibold transition-all flex items-center justify-center gap-1.5&quot;&gt;
                            &lt;i class=&quot;fa-solid fa-rotate-left text-xs&quot;&gt;&lt;/i&gt; Reset
                        &lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div id=&quot;criteria-container&quot; class=&quot;grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3&quot;&gt;
                    &lt;!-- Rendered dynamically --&gt;
                &lt;/div&gt;
            &lt;/section&gt;

            &lt;!-- Section 2: Pairwise Comparisons --&gt;
            &lt;section&gt;
                &lt;div class=&quot;mb-4&quot;&gt;
                    &lt;h2 class=&quot;text-base sm:text-lg font-bold text-slate-800 flex items-center gap-2&quot;&gt;
                        &lt;span class=&quot;bg-blue-600 text-white w-7 h-7 inline-flex justify-center items-center rounded-lg text-xs font-bold shadow-sm shrink-0&quot;&gt;2&lt;/span&gt;
                        Pairwise Comparisons (Saaty 1–9 Scale)
                    &lt;/h2&gt;
                    &lt;p class=&quot;text-xs text-slate-500 mt-0.5&quot;&gt;
                        Adjust relative importance sliders. Center (0) denotes equal priority (1:1).
                    &lt;/p&gt;
                &lt;/div&gt;

                &lt;div id=&quot;comparisons-container&quot; class=&quot;space-y-4 bg-slate-50 p-3 sm:p-6 rounded-2xl border border-slate-200&quot;&gt;
                    &lt;!-- Pairwise comparison sliders rendered by JS --&gt;
                &lt;/div&gt;
            &lt;/section&gt;

            &lt;!-- Section 3: Results &amp; Analysis --&gt;
            &lt;section class=&quot;bg-white rounded-2xl border border-slate-200 p-4 sm:p-6 shadow-sm space-y-6&quot;&gt;
                &lt;div class=&quot;flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 border-b border-slate-100 pb-4&quot;&gt;
                    &lt;div&gt;
                        &lt;h2 class=&quot;text-base sm:text-lg font-bold text-slate-800 flex items-center gap-2&quot;&gt;
                            &lt;span class=&quot;bg-blue-600 text-white w-7 h-7 inline-flex justify-center items-center rounded-lg text-xs font-bold shadow-sm shrink-0&quot;&gt;3&lt;/span&gt;
                            AHP Consistency Analysis
                        &lt;/h2&gt;
                        &lt;p class=&quot;text-xs text-slate-500 mt-0.5&quot;&gt;Evaluates transitivity logic: if Criterion A &amp;gt; B and B &amp;gt; C, then A should &amp;gt; C.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;cr-status-badge&quot;&gt;
                        &lt;!-- Status badge JS --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Parameters summary grid --&gt;
                &lt;div class=&quot;grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-4&quot;&gt;
                    &lt;div class=&quot;bg-slate-50 p-3 sm:p-4 rounded-xl border border-slate-200 text-center&quot;&gt;
                        &lt;span class=&quot;block text-[11px] sm:text-xs font-medium text-slate-500 mb-1&quot;&gt;Principal Eigenvalue (&amp;lambda;&lt;sub&gt;max&lt;/sub&gt;)&lt;/span&gt;
                        &lt;span id=&quot;stat-lambda&quot; class=&quot;text-base sm:text-xl font-bold text-slate-800&quot;&gt;--&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;bg-slate-50 p-3 sm:p-4 rounded-xl border border-slate-200 text-center&quot;&gt;
                        &lt;span class=&quot;block text-[11px] sm:text-xs font-medium text-slate-500 mb-1&quot;&gt;Consistency Index (CI)&lt;/span&gt;
                        &lt;span id=&quot;stat-ci&quot; class=&quot;text-base sm:text-xl font-bold text-slate-800&quot;&gt;--&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;bg-slate-50 p-3 sm:p-4 rounded-xl border border-slate-200 text-center&quot;&gt;
                        &lt;span class=&quot;block text-[11px] sm:text-xs font-medium text-slate-500 mb-1&quot;&gt;Random Index (RI)&lt;/span&gt;
                        &lt;span id=&quot;stat-ri&quot; class=&quot;text-base sm:text-xl font-bold text-slate-800&quot;&gt;--&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;bg-slate-50 p-3 sm:p-4 rounded-xl border border-slate-200 text-center&quot;&gt;
                        &lt;span class=&quot;block text-[11px] sm:text-xs font-medium text-slate-500 mb-1&quot;&gt;Consistency Ratio (CR)&lt;/span&gt;
                        &lt;span id=&quot;stat-cr&quot; class=&quot;text-base sm:text-xl font-bold text-blue-600&quot;&gt;--&lt;/span&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Actionable Inconsistency Recommendations --&gt;
                &lt;div id=&quot;recommendation-box&quot; class=&quot;hidden rounded-xl p-4 border text-xs sm:text-sm transition-all&quot;&gt;
                    &lt;!-- Dynamic recommendation text --&gt;
                &lt;/div&gt;

                &lt;!-- Priority Vector Visualization Section --&gt;
                &lt;div class=&quot;pt-2&quot;&gt;
                    &lt;div class=&quot;flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4&quot;&gt;
                        &lt;div&gt;
                            &lt;h3 class=&quot;text-xs sm:text-sm font-bold text-slate-800 uppercase tracking-wider&quot;&gt;Calculated Priority Vector (w&lt;sub&gt;i&lt;/sub&gt;) Weights&lt;/h3&gt;
                            &lt;p class=&quot;text-xs text-slate-500&quot;&gt;Relative weighting allocated to each decision criterion.&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;inline-flex rounded-lg bg-slate-100 p-1 border border-slate-200 text-xs self-start sm:self-auto&quot;&gt;
                            &lt;button id=&quot;chart-type-bar&quot; onclick=&quot;setChartType(&#39;bar&#39;)&quot; class=&quot;px-3 py-1 rounded-md font-semibold text-slate-700 bg-white shadow-sm transition-all&quot;&gt;Bar Chart&lt;/button&gt;
                            &lt;button id=&quot;chart-type-radar&quot; onclick=&quot;setChartType(&#39;radar&#39;)&quot; class=&quot;px-3 py-1 rounded-md font-semibold text-slate-500 hover:text-slate-700 transition-all&quot;&gt;Radar Chart&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

                    &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-12 gap-6 items-center&quot;&gt;
                        &lt;!-- Progress Bars --&gt;
                        &lt;div id=&quot;weights-progress-container&quot; class=&quot;lg:col-span-6 space-y-3&quot;&gt;
                            &lt;!-- JS Generated --&gt;
                        &lt;/div&gt;
                        &lt;!-- Chart Canvas --&gt;
                        &lt;div class=&quot;lg:col-span-6 bg-slate-50 p-4 rounded-xl border border-slate-200 relative w-full h-64 sm:h-72 md:h-80 flex items-center justify-center&quot;&gt;
                            &lt;canvas id=&quot;weightsChart&quot; class=&quot;w-full h-full&quot;&gt;&lt;/canvas&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/section&gt;

            &lt;!-- Section 4: Matrices &amp; Breakdown Tabs --&gt;
            &lt;section class=&quot;bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm&quot;&gt;
                &lt;div class=&quot;border-b border-slate-200 bg-slate-50 px-3 sm:px-5 pt-3 flex overflow-x-auto custom-scrollbar whitespace-nowrap gap-2 sm:gap-4 text-xs sm:text-sm font-medium&quot;&gt;
                    &lt;button class=&quot;tab-btn active pb-3 px-3 rounded-t-lg transition-all shrink-0&quot; onclick=&quot;switchTab(&#39;raw-matrix-tab&#39;, this)&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-table-cells mr-1.5&quot;&gt;&lt;/i&gt; Comparison Matrix (&lt;strong&gt;A&lt;/strong&gt;)
                    &lt;/button&gt;
                    &lt;button class=&quot;tab-btn pb-3 px-3 rounded-t-lg transition-all text-slate-500 hover:text-slate-800 shrink-0&quot; onclick=&quot;switchTab(&#39;normalized-matrix-tab&#39;, this)&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-square-root-variable mr-1.5&quot;&gt;&lt;/i&gt; Normalized Matrix (&lt;strong&gt;A&lt;sub&gt;norm&lt;/sub&gt;&lt;/strong&gt;)
                    &lt;/button&gt;
                    &lt;button class=&quot;tab-btn pb-3 px-3 rounded-t-lg transition-all text-slate-500 hover:text-slate-800 shrink-0&quot; onclick=&quot;switchTab(&#39;step-breakdown-tab&#39;, this)&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-list-check mr-1.5&quot;&gt;&lt;/i&gt; Step Breakdown
                    &lt;/button&gt;
                &lt;/div&gt;

                &lt;div class=&quot;p-3 sm:p-5&quot;&gt;
                    &lt;!-- Tab 1: Pairwise Comparison Raw Matrix --&gt;
                    &lt;div id=&quot;raw-matrix-tab&quot; class=&quot;tab-content custom-scrollbar overflow-x-auto&quot;&gt;
                        &lt;table class=&quot;w-full text-xs sm:text-sm text-left text-slate-600 border-collapse min-w-full&quot;&gt;
                            &lt;thead id=&quot;raw-matrix-head&quot; class=&quot;bg-slate-100 text-slate-700 uppercase text-[10px] sm:text-[11px] font-bold&quot;&gt;
                                &lt;!-- JS rendered --&gt;
                            &lt;/thead&gt;
                            &lt;tbody id=&quot;raw-matrix-body&quot; class=&quot;divide-y divide-slate-100&quot;&gt;
                                &lt;!-- JS rendered --&gt;
                            &lt;/tbody&gt;
                        &lt;/table&gt;
                    &lt;/div&gt;

                    &lt;!-- Tab 2: Normalized Matrix --&gt;
                    &lt;div id=&quot;normalized-matrix-tab&quot; class=&quot;tab-content hidden custom-scrollbar overflow-x-auto&quot;&gt;
                        &lt;table class=&quot;w-full text-xs sm:text-sm text-left text-slate-600 border-collapse min-w-full&quot;&gt;
                            &lt;thead id=&quot;norm-matrix-head&quot; class=&quot;bg-slate-100 text-slate-700 uppercase text-[10px] sm:text-[11px] font-bold&quot;&gt;
                                &lt;!-- JS rendered --&gt;
                            &lt;/thead&gt;
                            &lt;tbody id=&quot;norm-matrix-body&quot; class=&quot;divide-y divide-slate-100&quot;&gt;
                                &lt;!-- JS rendered --&gt;
                            &lt;/tbody&gt;
                        &lt;/table&gt;
                    &lt;/div&gt;

                    &lt;!-- Tab 3: Step-by-Step Breakdown --&gt;
                    &lt;div id=&quot;step-breakdown-tab&quot; class=&quot;tab-content hidden space-y-4 text-xs sm:text-sm text-slate-600&quot;&gt;
                        &lt;div id=&quot;step-breakdown-content&quot; class=&quot;space-y-4&quot;&gt;
                            &lt;!-- JS Populated --&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/section&gt;

        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Math Foundations Modal --&gt;
    &lt;div id=&quot;theory-modal&quot; class=&quot;fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-3 sm:p-4 opacity-0 pointer-events-none transition-opacity duration-200&quot;&gt;
        &lt;div class=&quot;bg-white rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-2xl border border-slate-200 p-5 sm:p-8 space-y-5&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center border-b border-slate-100 pb-3&quot;&gt;
                &lt;h3 class=&quot;text-base sm:text-lg font-bold text-slate-900 flex items-center gap-2&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-square-root-variable text-blue-600&quot;&gt;&lt;/i&gt; AHP Mathematical Foundations
                &lt;/h3&gt;
                &lt;button onclick=&quot;toggleModal(&#39;theory-modal&#39;)&quot; class=&quot;text-slate-400 hover:text-slate-600 text-lg p-1&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-xmark&quot;&gt;&lt;/i&gt;
                &lt;/button&gt;
            &lt;/div&gt;

            &lt;div class=&quot;space-y-4 text-xs sm:text-sm text-slate-600 leading-relaxed&quot;&gt;
                &lt;div&gt;
                    &lt;h4 class=&quot;font-bold text-slate-800 text-sm mb-1&quot;&gt;1. Pairwise Comparison Matrix (&lt;strong&gt;A&lt;/strong&gt;)&lt;/h4&gt;
                    &lt;p&gt;For &lt;em&gt;n&lt;/em&gt; criteria, an &lt;em&gt;n &amp;times; n&lt;/em&gt; pairwise matrix is built where each element &lt;em&gt;a&lt;sub&gt;ij&lt;/sub&gt;&lt;/em&gt; represents the relative weight of criterion &lt;em&gt;i&lt;/em&gt; over &lt;em&gt;j&lt;/em&gt;, satisfying reciprocal symmetry: &lt;em&gt;a&lt;sub&gt;ji&lt;/sub&gt; = 1 / a&lt;sub&gt;ij&lt;/sub&gt;&lt;/em&gt; and &lt;em&gt;a&lt;sub&gt;ii&lt;/sub&gt; = 1&lt;/em&gt;.&lt;/p&gt;
                &lt;/div&gt;

                &lt;div&gt;
                    &lt;h4 class=&quot;font-bold text-slate-800 text-sm mb-1&quot;&gt;2. Priority Vector / Row Averages (&lt;strong&gt;w&lt;sub&gt;i&lt;/sub&gt;&lt;/strong&gt;)&lt;/h4&gt;
                    &lt;p&gt;Column-normalize matrix &lt;strong&gt;A&lt;/strong&gt; and compute the arithmetic row mean to calculate normalized priority weights:&lt;/p&gt;
                    &lt;div id=&quot;katex-formula-1&quot; class=&quot;bg-slate-50 p-3 rounded-xl my-2 text-center text-slate-800 text-xs overflow-x-auto&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;div&gt;
                    &lt;h4 class=&quot;font-bold text-slate-800 text-sm mb-1&quot;&gt;3. Principal Eigenvalue (&lt;strong&gt;&amp;lambda;&lt;sub&gt;max&lt;/sub&gt;&lt;/strong&gt;)&lt;/h4&gt;
                    &lt;p&gt;Multiply original matrix &lt;strong&gt;A&lt;/strong&gt; by priority vector &lt;strong&gt;w&lt;/strong&gt;, divide row-wise by &lt;em&gt;w&lt;sub&gt;i&lt;/sub&gt;&lt;/em&gt;, and take the average:&lt;/p&gt;
                    &lt;div id=&quot;katex-formula-2&quot; class=&quot;bg-slate-50 p-3 rounded-xl my-2 text-center text-slate-800 text-xs overflow-x-auto&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;div&gt;
                    &lt;h4 class=&quot;font-bold text-slate-800 text-sm mb-1&quot;&gt;4. Consistency Index (CI) &amp;amp; Consistency Ratio (CR)&lt;/h4&gt;
                    &lt;p&gt;Quantifies random departure from exact transitivity:&lt;/p&gt;
                    &lt;div id=&quot;katex-formula-3&quot; class=&quot;bg-slate-50 p-3 rounded-xl my-2 text-center text-slate-800 text-xs overflow-x-auto&quot;&gt;&lt;/div&gt;
                    &lt;p class=&quot;text-[11px] text-slate-500 mt-1&quot;&gt;Where &lt;em&gt;RI&lt;/em&gt; is Thomas L. Saaty&#39;s empirical Random Index based on sample size &lt;em&gt;n&lt;/em&gt;. Matrices with &lt;strong&gt;CR &amp;le; 10% (0.10)&lt;/strong&gt; are considered consistently reliable for operational decision-making.&lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class=&quot;pt-3 border-t border-slate-100 flex justify-end&quot;&gt;
                &lt;button onclick=&quot;toggleModal(&#39;theory-modal&#39;)&quot; class=&quot;bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-xl text-xs sm:text-sm font-semibold&quot;&gt;
                    Close Guide
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Toast Notification --&gt;
    &lt;div id=&quot;toast&quot; class=&quot;fixed bottom-5 right-5 left-5 sm:left-auto sm:max-w-md bg-slate-900 text-white px-4 py-3 rounded-xl shadow-2xl opacity-0 pointer-events-none transition-all duration-300 flex items-center gap-3 z-50 text-xs sm:text-sm&quot;&gt;
        &lt;i class=&quot;fa-solid fa-circle-check text-emerald-400 text-base shrink-0&quot;&gt;&lt;/i&gt;
        &lt;span id=&quot;toast-message&quot;&gt;Action completed successfully!&lt;/span&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // Core Application State
        let criteria = [
            { id: &#39;c1&#39;, name: &#39;Cost / Budget&#39; },
            { id: &#39;c2&#39;, name: &#39;Quality / Features&#39; },
            { id: &#39;c3&#39;, name: &#39;Ease of Implementation&#39; },
            { id: &#39;c4&#39;, name: &#39;Risk / Scalability&#39; }
        ];

        let pairs = {};
        let ahpResult = null;
        let chartInstance = null;
        let activeChartType = &#39;bar&#39;;

        // Saaty&#39;s Random Index (RI) table for matrix sizes 1..10
        const RI_TABLE = [0, 0, 0, 0.58, 0.90, 1.12, 1.24, 1.32, 1.41, 1.45, 1.49];

        function generateId() {
            const maxId = criteria.reduce((max, c) =&gt; {
                const num = parseInt(c.id.replace(&#39;c&#39;, &#39;&#39;));
                return (!isNaN(num) &amp;&amp; num &gt; max) ? num : max;
            }, 0);
            return &#39;c&#39; + (maxId + 1);
        }

        function resetToDefaults() {
            criteria = [
                { id: &#39;c1&#39;, name: &#39;Cost / Budget&#39; },
                { id: &#39;c2&#39;, name: &#39;Quality / Features&#39; },
                { id: &#39;c3&#39;, name: &#39;Ease of Implementation&#39; },
                { id: &#39;c4&#39;, name: &#39;Risk / Scalability&#39; }
            ];
            resetPairs();
            renderApp();
            showToast(&quot;Reset to default 4-criteria scenario&quot;);
        }

        function addCriterion() {
            if (criteria.length &gt;= 10) {
                showToast(&quot;Maximum 10 criteria supported for matrix stability.&quot;);
                return;
            }
            const newId = generateId();
            criteria.push({ id: newId, name: `Criterion ${criteria.length + 1}` });
            resetPairs();
            renderApp();
        }

        function removeCriterion(index) {
            if (criteria.length &lt;= 2) {
                showToast(&quot;AHP analysis requires at least 2 criteria.&quot;);
                return;
            }
            criteria.splice(index, 1);
            resetPairs();
            renderApp();
        }

        function updateCriterion(index, value) {
            criteria[index].name = value || `Criterion ${index + 1}`;
            renderComparisons();
            calculateAndRenderResults();
        }

        function resetPairs() {
            pairs = {};
            for (let i = 0; i &lt; criteria.length; i++) {
                for (let j = i + 1; j &lt; criteria.length; j++) {
                    pairs[`${i}-${j}`] = 0; // default 0 -&gt; equal priority (1:1)
                }
            }
        }

        function updatePair(key, value) {
            pairs[key] = parseInt(value);
            const labelEl = document.getElementById(`label-${key}`);
            if (labelEl) labelEl.innerHTML = getPairText(key, pairs[key]);
            calculateAndRenderResults();
        }

        // Mapping Slider (-8 to 8) to Saaty Scale (1/9 to 9)
        function getScaleValue(val) {
            if (val &lt; 0) {
                const weight = Math.abs(val) + 1;
                return { left: weight, right: 1 / weight };
            } else if (val &gt; 0) {
                const weight = val + 1;
                return { left: 1 / weight, right: weight };
            }
            return { left: 1, right: 1 };
        }

        function getPairText(key, val) {
            const [i, j] = key.split(&#39;-&#39;).map(Number);
            const leftName = criteria[i]?.name || &#39;Criterion A&#39;;
            const rightName = criteria[j]?.name || &#39;Criterion B&#39;;

            if (val === 0) {
                return `&lt;span class=&quot;text-slate-600 font-medium&quot;&gt;${leftName}&lt;/span&gt; and &lt;span class=&quot;text-slate-600 font-medium&quot;&gt;${rightName}&lt;/span&gt; have &lt;span class=&quot;font-bold text-blue-600&quot;&gt;Equal Importance&lt;/span&gt; (1:1)`;
            }

            const weight = Math.abs(val) + 1;
            const winner = val &lt; 0 ? leftName : rightName;
            const loser = val &lt; 0 ? rightName : leftName;

            return `&lt;span class=&quot;font-bold text-slate-900&quot;&gt;${winner}&lt;/span&gt; is &lt;span class=&quot;font-extrabold text-blue-600&quot;&gt;${weight}x&lt;/span&gt; more important than &lt;span class=&quot;text-slate-700&quot;&gt;${loser}&lt;/span&gt;`;
        }

        function calculateAHP() {
            const n = criteria.length;
            if (n &lt; 2) return null;

            // 1. Build Raw Matrix (A)
            let matrix = Array(n).fill(0).map(() =&gt; Array(n).fill(1));
            for (let i = 0; i &lt; n; i++) {
                for (let j = i + 1; j &lt; n; j++) {
                    const val = pairs[`${i}-${j}`] !== undefined ? pairs[`${i}-${j}`] : 0;
                    const scale = getScaleValue(val);
                    matrix[i][j] = scale.left;
                    matrix[j][i] = scale.right;
                }
            }

            // 2. Column Sums
            let colSums = Array(n).fill(0);
            for (let i = 0; i &lt; n; i++) {
                for (let j = 0; j &lt; n; j++) {
                    colSums[j] += matrix[i][j];
                }
            }

            // 3. Normalized Matrix &amp; Priority Vector Weights (w_i)
            let normMatrix = Array(n).fill(0).map(() =&gt; Array(n).fill(0));
            let weights = Array(n).fill(0);

            for (let i = 0; i &lt; n; i++) {
                let rowSum = 0;
                for (let j = 0; j &lt; n; j++) {
                    normMatrix[i][j] = matrix[i][j] / colSums[j];
                    rowSum += normMatrix[i][j];
                }
                weights[i] = rowSum / n;
            }

            // 4. Principal Eigenvalue (lambda_max) Calculation: (A * w)_i / w_i
            let weightedSum = Array(n).fill(0);
            for (let i = 0; i &lt; n; i++) {
                for (let j = 0; j &lt; n; j++) {
                    weightedSum[i] += matrix[i][j] * weights[j];
                }
            }

            let lambdaMax = 0;
            for (let i = 0; i &lt; n; i++) {
                lambdaMax += weightedSum[i] / weights[i];
            }
            lambdaMax = lambdaMax / n;

            // 5. CI &amp; CR
            const CI = n &gt; 1 ? (lambdaMax - n) / (n - 1) : 0;
            const RI = RI_TABLE[n] || 1.49;
            const CR = RI &gt; 0 ? CI / RI : 0;

            // 6. Inconsistency Diagnosis
            let maxDev = -1;
            let worstPairKey = null;
            let worstPairDetails = null;

            if (CR &gt; 0.10) {
                for (let i = 0; i &lt; n; i++) {
                    for (let j = i + 1; j &lt; n; j++) {
                        const actualRatio = matrix[i][j];
                        const idealRatio = weights[i] / weights[j];
                        const deviation = Math.abs(Math.log(actualRatio / idealRatio));

                        if (deviation &gt; maxDev) {
                            maxDev = deviation;
                            worstPairKey = `${i}-${j}`;
                            worstPairDetails = { actualRatio, idealRatio, i, j };
                        }
                    }
                }
            }

            return {
                n,
                matrix,
                colSums,
                normMatrix,
                weights,
                weightedSum,
                lambdaMax,
                CI,
                RI,
                CR,
                worstPairKey,
                worstPairDetails
            };
        }

        // Render functions
        function renderCriteria() {
            const container = document.getElementById(&#39;criteria-container&#39;);
            container.innerHTML = criteria.map((c, index) =&gt; `
                &lt;div class=&quot;bg-white p-2.5 sm:p-3 rounded-xl border border-slate-200 shadow-sm flex items-center gap-2&quot;&gt;
                    &lt;span class=&quot;text-xs font-bold text-slate-400 w-5 text-center shrink-0&quot;&gt;${index + 1}&lt;/span&gt;
                    &lt;input type=&quot;text&quot; value=&quot;${escapeHtml(c.name)}&quot; onchange=&quot;updateCriterion(${index}, this.value)&quot; 
                           class=&quot;flex-1 bg-slate-50 border border-slate-200 focus:bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 rounded-lg px-2.5 py-1.5 text-xs sm:text-sm font-medium text-slate-700 outline-none transition-all&quot; placeholder=&quot;Criterion name&quot;&gt;
                    &lt;button onclick=&quot;removeCriterion(${index})&quot; class=&quot;text-slate-300 hover:text-red-500 p-1.5 rounded-lg transition-colors shrink-0&quot; title=&quot;Remove criterion&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-trash-can text-xs&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        function renderComparisons() {
            const container = document.getElementById(&#39;comparisons-container&#39;);
            let html = &#39;&#39;;

            for (let i = 0; i &lt; criteria.length; i++) {
                for (let j = i + 1; j &lt; criteria.length; j++) {
                    const key = `${i}-${j}`;
                    if (pairs[key] === undefined) pairs[key] = 0;
                    const val = pairs[key];
                    const leftName = criteria[i].name;
                    const rightName = criteria[j].name;

                    html += `
                        &lt;div class=&quot;bg-white p-3 sm:p-4 rounded-xl border border-slate-200/80 shadow-sm space-y-3&quot;&gt;
                            &lt;div class=&quot;flex flex-col sm:flex-row justify-between items-start sm:items-center gap-1.5&quot;&gt;
                                &lt;div class=&quot;flex items-center gap-2 text-xs sm:text-sm font-bold text-slate-800&quot;&gt;
                                    &lt;span class=&quot;text-blue-600&quot;&gt;${escapeHtml(leftName)}&lt;/span&gt;
                                    &lt;span class=&quot;text-slate-400 font-normal&quot;&gt;vs&lt;/span&gt;
                                    &lt;span class=&quot;text-indigo-600&quot;&gt;${escapeHtml(rightName)}&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;div id=&quot;label-${key}&quot; class=&quot;text-xs text-slate-600 bg-slate-50 px-2.5 py-1 rounded-lg border border-slate-100&quot;&gt;
                                    ${getPairText(key, val)}
                                &lt;/div&gt;
                            &lt;/div&gt;

                            &lt;div class=&quot;space-y-1.5&quot;&gt;
                                &lt;input type=&quot;range&quot; min=&quot;-8&quot; max=&quot;8&quot; value=&quot;${val}&quot; step=&quot;1&quot; 
                                       oninput=&quot;updatePair(&#39;${key}&#39;, this.value)&quot; class=&quot;slider&quot;&gt;
                                &lt;div class=&quot;flex justify-between text-[10px] sm:text-xs font-semibold text-slate-400 px-0.5&quot;&gt;
                                    &lt;span&gt;&amp;larr; 9x ${escapeHtml(leftName.substring(0, 12))}&lt;/span&gt;
                                    &lt;span&gt;1:1 Equal&lt;/span&gt;
                                    &lt;span&gt;9x ${escapeHtml(rightName.substring(0, 12))} &amp;rarr;&lt;/span&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    `;
                }
            }

            container.innerHTML = html;
        }

        function calculateAndRenderResults() {
            ahpResult = calculateAHP();
            if (!ahpResult) return;

            const { lambdaMax, CI, RI, CR, weights, worstPairDetails } = ahpResult;

            // Stats
            document.getElementById(&#39;stat-lambda&#39;).innerText = lambdaMax.toFixed(4);
            document.getElementById(&#39;stat-ci&#39;).innerText = CI.toFixed(4);
            document.getElementById(&#39;stat-ri&#39;).innerText = RI.toFixed(2);
            document.getElementById(&#39;stat-cr&#39;).innerText = (CR * 100).toFixed(2) + &#39;%&#39;;

            // CR Badge
            const badgeEl = document.getElementById(&#39;cr-status-badge&#39;);
            if (CR &lt;= 0.10) {
                badgeEl.innerHTML = `
                    &lt;span class=&quot;bg-emerald-50 text-emerald-700 border border-emerald-200 px-3 py-1.5 rounded-xl text-xs font-bold inline-flex items-center gap-1.5 shadow-sm&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-circle-check text-emerald-500&quot;&gt;&lt;/i&gt; Consistent (CR &amp;le; 10%)
                    &lt;/span&gt;
                `;
            } else {
                badgeEl.innerHTML = `
                    &lt;span class=&quot;bg-rose-50 text-rose-700 border border-rose-200 px-3 py-1.5 rounded-xl text-xs font-bold inline-flex items-center gap-1.5 shadow-sm&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-triangle-exclamation text-rose-500&quot;&gt;&lt;/i&gt; Inconsistent (CR &amp;gt; 10%)
                    &lt;/span&gt;
                `;
            }

            // Recommendation Box
            const recBox = document.getElementById(&#39;recommendation-box&#39;);
            if (CR &gt; 0.10 &amp;&amp; worstPairDetails) {
                const cLeft = criteria[worstPairDetails.i].name;
                const cRight = criteria[worstPairDetails.j].name;
                const suggestedVal = Math.round(worstPairDetails.idealRatio);

                recBox.className = &quot;block bg-amber-50/80 border-amber-200 text-amber-900 rounded-xl p-3.5 sm:p-4 text-xs sm:text-sm space-y-1.5&quot;;
                recBox.innerHTML = `
                    &lt;div class=&quot;font-bold flex items-center gap-2 text-amber-800&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-lightbulb text-amber-500&quot;&gt;&lt;/i&gt; Consistency Recommendation
                    &lt;/div&gt;
                    &lt;p class=&quot;text-amber-800 leading-relaxed&quot;&gt;
                        The highest inconsistency stems from the comparison between &lt;strong&gt;${escapeHtml(cLeft)}&lt;/strong&gt; and &lt;strong&gt;${escapeHtml(cRight)}&lt;/strong&gt;. 
                        To reduce CR below 0.10, consider adjusting their slider closer to a ratio of approximately &lt;strong&gt;${suggestedVal &gt; 1 ? suggestedVal + &#39;:1&#39; : &#39;1:&#39; + Math.round(1/worstPairDetails.idealRatio)}&lt;/strong&gt;.
                    &lt;/p&gt;
                `;
            } else {
                recBox.className = &quot;hidden&quot;;
            }

            // Render Priority Weights Progress Bars
            renderWeightsProgress(weights);

            // Render Chart
            renderChart(weights);

            // Render Matrix Tables
            renderMatrixTables();

            // Render Step Breakdown
            renderStepBreakdown();
        }

        function renderWeightsProgress(weights) {
            const container = document.getElementById(&#39;weights-progress-container&#39;);
            const maxWeight = Math.max(...weights);

            container.innerHTML = criteria.map((c, i) =&gt; {
                const pct = (weights[i] * 100).toFixed(2);
                const barWidth = maxWeight &gt; 0 ? (weights[i] / maxWeight * 100).toFixed(1) : 0;

                return `
                    &lt;div class=&quot;space-y-1&quot;&gt;
                        &lt;div class=&quot;flex justify-between text-xs font-medium text-slate-700&quot;&gt;
                            &lt;span class=&quot;truncate max-w-[200px]&quot; title=&quot;${escapeHtml(c.name)}&quot;&gt;${escapeHtml(c.name)}&lt;/span&gt;
                            &lt;span class=&quot;font-bold text-blue-600&quot;&gt;${pct}%&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;w-full bg-slate-100 rounded-full h-2.5 overflow-hidden&quot;&gt;
                            &lt;div class=&quot;bg-blue-600 h-2.5 rounded-full transition-all duration-300&quot; style=&quot;width: ${barWidth}%&quot;&gt;&lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
            }).join(&#39;&#39;);
        }

        function setChartType(type) {
            activeChartType = type;
            document.getElementById(&#39;chart-type-bar&#39;).className = type === &#39;bar&#39; 
                ? &#39;px-3 py-1 rounded-md font-semibold text-slate-700 bg-white shadow-sm transition-all&#39;
                : &#39;px-3 py-1 rounded-md font-semibold text-slate-500 hover:text-slate-700 transition-all&#39;;
            document.getElementById(&#39;chart-type-radar&#39;).className = type === &#39;radar&#39; 
                ? &#39;px-3 py-1 rounded-md font-semibold text-slate-700 bg-white shadow-sm transition-all&#39;
                : &#39;px-3 py-1 rounded-md font-semibold text-slate-500 hover:text-slate-700 transition-all&#39;;
            
            if (ahpResult) renderChart(ahpResult.weights);
        }

        function renderChart(weights) {
            const canvas = document.getElementById(&#39;weightsChart&#39;);
            if (!canvas) return;
            const ctx = canvas.getContext(&#39;2d&#39;);

            if (chartInstance) {
                chartInstance.destroy();
            }

            const labels = criteria.map(c =&gt; c.name);
            const dataValues = weights.map(w =&gt; (w * 100).toFixed(2));

            chartInstance = new Chart(ctx, {
                type: activeChartType,
                data: {
                    labels: labels,
                    datasets: [{
                        label: &#39;Priority Weight (%)&#39;,
                        data: dataValues,
                        backgroundColor: activeChartType === &#39;radar&#39; ? &#39;rgba(37, 99, 235, 0.2)&#39; : &#39;rgba(37, 99, 235, 0.85)&#39;,
                        borderColor: &#39;#2563eb&#39;,
                        borderWidth: 2,
                        borderRadius: activeChartType === &#39;bar&#39; ? 6 : 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: activeChartType === &#39;radar&#39; },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return ` Weight: ${context.raw}%`;
                                }
                            }
                        }
                    },
                    scales: activeChartType === &#39;bar&#39; ? {
                        y: { beginAtZero: true, ticks: { callback: v =&gt; v + &#39;%&#39; } },
                        x: { ticks: { font: { size: 10 } } }
                    } : {}
                }
            });
        }

        function renderMatrixTables() {
            if (!ahpResult) return;
            const { n, matrix, colSums, normMatrix, weights } = ahpResult;

            // Raw Matrix Header &amp; Body
            const rawHead = document.getElementById(&#39;raw-matrix-head&#39;);
            const rawBody = document.getElementById(&#39;raw-matrix-body&#39;);

            let rawHeadHtml = `&lt;tr&gt;&lt;th class=&quot;p-2 sm:p-3 sticky-col bg-slate-100 z-20 min-w-[120px]&quot;&gt;Criteria&lt;/th&gt;`;
            criteria.forEach(c =&gt; {
                rawHeadHtml += `&lt;th class=&quot;p-2 sm:p-3 text-center min-w-[90px]&quot;&gt;${escapeHtml(c.name)}&lt;/th&gt;`;
            });
            rawHeadHtml += `&lt;/tr&gt;`;
            rawHead.innerHTML = rawHeadHtml;

            let rawBodyHtml = &#39;&#39;;
            for (let i = 0; i &lt; n; i++) {
                rawBodyHtml += `&lt;tr class=&quot;hover:bg-slate-50 transition-colors&quot;&gt;&lt;td class=&quot;p-2 sm:p-3 font-semibold text-slate-800 sticky-col bg-white border-r border-slate-100 min-w-[120px]&quot;&gt;${escapeHtml(criteria[i].name)}&lt;/td&gt;`;
                for (let j = 0; j &lt; n; j++) {
                    const val = matrix[i][j];
                    const formatted = val &gt;= 1 ? val.toFixed(2) : `1/${(1/val).toFixed(2)}`;
                    rawBodyHtml += `&lt;td class=&quot;p-2 sm:p-3 text-center font-mono text-xs&quot;&gt;${formatted}&lt;/td&gt;`;
                }
                rawBodyHtml += `&lt;/tr&gt;`;
            }
            // Add Column Sums Row
            rawBodyHtml += `&lt;tr class=&quot;bg-slate-100/70 font-bold&quot;&gt;&lt;td class=&quot;p-2 sm:p-3 sticky-col bg-slate-100 text-slate-800 border-r border-slate-200&quot;&gt;Column Sum&lt;/td&gt;`;
            for (let j = 0; j &lt; n; j++) {
                rawBodyHtml += `&lt;td class=&quot;p-2 sm:p-3 text-center font-mono text-xs text-blue-700&quot;&gt;${colSums[j].toFixed(3)}&lt;/td&gt;`;
            }
            rawBodyHtml += `&lt;/tr&gt;`;
            rawBody.innerHTML = rawBodyHtml;

            // Normalized Matrix Header &amp; Body
            const normHead = document.getElementById(&#39;norm-matrix-head&#39;);
            const normBody = document.getElementById(&#39;norm-matrix-body&#39;);

            let normHeadHtml = `&lt;tr&gt;&lt;th class=&quot;p-2 sm:p-3 sticky-col bg-slate-100 z-20 min-w-[120px]&quot;&gt;Criteria&lt;/th&gt;`;
            criteria.forEach(c =&gt; {
                normHeadHtml += `&lt;th class=&quot;p-2 sm:p-3 text-center min-w-[90px]&quot;&gt;${escapeHtml(c.name)}&lt;/th&gt;`;
            });
            normHeadHtml += `&lt;th class=&quot;p-2 sm:p-3 text-center bg-blue-50 text-blue-900 min-w-[100px]&quot;&gt;Priority Weight (w&lt;sub&gt;i&lt;/sub&gt;)&lt;/th&gt;&lt;/tr&gt;`;
            normHead.innerHTML = normHeadHtml;

            let normBodyHtml = &#39;&#39;;
            for (let i = 0; i &lt; n; i++) {
                normBodyHtml += `&lt;tr class=&quot;hover:bg-slate-50 transition-colors&quot;&gt;&lt;td class=&quot;p-2 sm:p-3 font-semibold text-slate-800 sticky-col bg-white border-r border-slate-100 min-w-[120px]&quot;&gt;${escapeHtml(criteria[i].name)}&lt;/td&gt;`;
                for (let j = 0; j &lt; n; j++) {
                    normBodyHtml += `&lt;td class=&quot;p-2 sm:p-3 text-center font-mono text-xs&quot;&gt;${normMatrix[i][j].toFixed(4)}&lt;/td&gt;`;
                }
                normBodyHtml += `&lt;td class=&quot;p-2 sm:p-3 text-center font-mono text-xs font-bold text-blue-600 bg-blue-50/50&quot;&gt;${(weights[i] * 100).toFixed(2)}%&lt;/td&gt;&lt;/tr&gt;`;
            }
            normBody.innerHTML = normBodyHtml;
        }

        function renderStepBreakdown() {
            if (!ahpResult) return;
            const { n, weightedSum, weights, lambdaMax, CI, RI, CR } = ahpResult;

            const container = document.getElementById(&#39;step-breakdown-content&#39;);
            container.innerHTML = `
                &lt;div class=&quot;bg-slate-50 p-4 rounded-xl border border-slate-200 space-y-2&quot;&gt;
                    &lt;h4 class=&quot;font-bold text-slate-800 text-sm&quot;&gt;Step 1: Compute Weighted Sum Vector (A &amp;times; w)&lt;/h4&gt;
                    &lt;p class=&quot;text-xs text-slate-500&quot;&gt;Multiply pairwise matrix A by the calculated priority weights vector w:&lt;/p&gt;
                    &lt;ul class=&quot;list-disc list-inside space-y-1 font-mono text-xs text-slate-700&quot;&gt;
                        ${weightedSum.map((ws, i) =&gt; `&lt;li&gt;&lt;strong&gt;${escapeHtml(criteria[i].name)}:&lt;/strong&gt;${ws.toFixed(4)}&lt;/li&gt;`).join(&#39;&#39;)}
                    &lt;/ul&gt;
                &lt;/div&gt;

                &lt;div class=&quot;bg-slate-50 p-4 rounded-xl border border-slate-200 space-y-2&quot;&gt;
                    &lt;h4 class=&quot;font-bold text-slate-800 text-sm&quot;&gt;Step 2: Compute Consistency Vector ((A &amp;times; w)&lt;sub&gt;i&lt;/sub&gt; / w&lt;sub&gt;i&lt;/sub&gt;)&lt;/h4&gt;
                    &lt;p class=&quot;text-xs text-slate-500&quot;&gt;Divide weighted sums by corresponding criterion priority weights:&lt;/p&gt;
                    &lt;ul class=&quot;list-disc list-inside space-y-1 font-mono text-xs text-slate-700&quot;&gt;
                        ${weightedSum.map((ws, i) =&gt; `&lt;li&gt;&lt;strong&gt;${escapeHtml(criteria[i].name)}:&lt;/strong&gt;${(ws / weights[i]).toFixed(4)}&lt;/li&gt;`).join(&#39;&#39;)}
                    &lt;/ul&gt;
                &lt;/div&gt;

                &lt;div class=&quot;bg-slate-50 p-4 rounded-xl border border-slate-200 space-y-2&quot;&gt;
                    &lt;h4 class=&quot;font-bold text-slate-800 text-sm&quot;&gt;Step 3: Principal Eigenvalue &amp;amp; Ratio Calculations&lt;/h4&gt;
                    &lt;div class=&quot;grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs&quot;&gt;
                        &lt;div class=&quot;bg-white p-2.5 rounded-lg border border-slate-200&quot;&gt;
                            &lt;span class=&quot;text-slate-500 block&quot;&gt;&amp;lambda;&lt;sub&gt;max&lt;/sub&gt; (Average Eigenvalue):&lt;/span&gt;
                            &lt;span class=&quot;font-bold font-mono text-slate-800 text-sm&quot;&gt;${lambdaMax.toFixed(4)}&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;bg-white p-2.5 rounded-lg border border-slate-200&quot;&gt;
                            &lt;span class=&quot;text-slate-500 block&quot;&gt;Consistency Index (CI = (&amp;lambda;&lt;sub&gt;max&lt;/sub&gt; - n) / (n - 1)):&lt;/span&gt;
                            &lt;span class=&quot;font-bold font-mono text-slate-800 text-sm&quot;&gt;${CI.toFixed(4)}&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;bg-white p-2.5 rounded-lg border border-slate-200&quot;&gt;
                            &lt;span class=&quot;text-slate-500 block&quot;&gt;Random Index (RI for n=${n}):&lt;/span&gt;
                            &lt;span class=&quot;font-bold font-mono text-slate-800 text-sm&quot;&gt;${RI.toFixed(2)}&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;bg-white p-2.5 rounded-lg border border-slate-200&quot;&gt;
                            &lt;span class=&quot;text-slate-500 block&quot;&gt;Consistency Ratio (CR = CI / RI):&lt;/span&gt;
                            &lt;span class=&quot;font-bold font-mono ${CR &lt;= 0.10 ? &#39;text-emerald-600&#39; : &#39;text-rose-600&#39;} text-sm&quot;&gt;${(CR * 100).toFixed(2)}%&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `;
        }

        // Export Functions
        function exportToExcel() {
            if (!ahpResult) return;
            const { n, matrix, colSums, normMatrix, weights, lambdaMax, CI, RI, CR } = ahpResult;

            const wb = XLSX.utils.book_new();

            // Sheet 1: Pairwise Matrix
            const rawData = [
                [&#39;AHP Pairwise Comparison Matrix (A)&#39;],
                [&#39;Criteria&#39;, ...criteria.map(c =&gt; c.name)],
                ...matrix.map((row, i) =&gt; [criteria[i].name, ...row]),
                [&#39;Column Sum&#39;, ...colSums]
            ];
            const wsRaw = XLSX.utils.aoa_to_sheet(rawData);
            XLSX.utils.book_append_sheet(wb, wsRaw, &#39;Pairwise Matrix&#39;);

            // Sheet 2: Normalized Matrix &amp; Weights
            const normData = [
                [&#39;Normalized Matrix (A_norm) and Priority Weights&#39;],
                [&#39;Criteria&#39;, ...criteria.map(c =&gt; c.name), &#39;Priority Weight (w_i)&#39;],
                ...normMatrix.map((row, i) =&gt; [criteria[i].name, ...row, weights[i]])
            ];
            const wsNorm = XLSX.utils.aoa_to_sheet(normData);
            XLSX.utils.book_append_sheet(wb, wsNorm, &#39;Normalized &amp; Weights&#39;);

            // Sheet 3: AHP Consistency Metrics
            const metricsData = [
                [&#39;AHP Consistency Evaluation Summary&#39;],
                [&#39;Parameter&#39;, &#39;Value&#39;],
                [&#39;Number of Criteria (n)&#39;, n],
                [&#39;Principal Eigenvalue (Lambda Max)&#39;, lambdaMax],
                [&#39;Consistency Index (CI)&#39;, CI],
                [&#39;Random Index (RI)&#39;, RI],
                [&#39;Consistency Ratio (CR)&#39;, CR],
                [&#39;Consistency Evaluation&#39;, CR &lt;= 0.10 ? &#39;CONSISTENT (&lt;= 10%)&#39; : &#39;INCONSISTENT (&gt; 10%)&#39;]
            ];
            const wsMetrics = XLSX.utils.aoa_to_sheet(metricsData);
            XLSX.utils.book_append_sheet(wb, wsMetrics, &#39;Consistency Metrics&#39;);

            XLSX.writeFile(wb, &#39;AHP_Decision_Analysis_Results.xlsx&#39;);
            showToast(&quot;Exported full Excel workbook successfully!&quot;);
        }

        function exportToCSV() {
            if (!ahpResult) return;
            const { weights, lambdaMax, CI, RI, CR } = ahpResult;

            let csv = &#39;AHP Decision Analysis Export\n\n&#39;;
            csv += &#39;Criterion Name,Priority Weight (%)\n&#39;;
            criteria.forEach((c, i) =&gt; {
                csv += `&quot;${c.name.replace(/&quot;/g, &#39;&quot;&quot;&#39;)}&quot;,${(weights[i] * 100).toFixed(2)}%\n`;
            });

            csv += &#39;\nConsistency Evaluation Summary\n&#39;;
            csv += `Lambda Max,${lambdaMax.toFixed(4)}\n`;
            csv += `Consistency Index (CI),${CI.toFixed(4)}\n`;
            csv += `Random Index (RI),${RI.toFixed(2)}\n`;
            csv += `Consistency Ratio (CR),${(CR * 100).toFixed(2)}%\n`;
            csv += `Status,${CR &lt;= 0.10 ? &#39;CONSISTENT&#39; : &#39;INCONSISTENT&#39;}\n`;

            const blob = new Blob([csv], { type: &#39;text/csv;charset=utf-8;&#39; });
            const link = document.createElement(&quot;a&quot;);
            const url = URL.createObjectURL(blob);
            link.setAttribute(&quot;href&quot;, url);
            link.setAttribute(&quot;download&quot;, &quot;AHP_Priority_Weights.csv&quot;);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            showToast(&quot;Exported CSV summary successfully!&quot;);
        }

        // Utility Functions
        function switchTab(tabId, btn) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.add(&#39;hidden&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));

            document.getElementById(tabId).classList.remove(&#39;hidden&#39;);
            btn.classList.add(&#39;active&#39;);
        }

        function toggleModal(id) {
            const modal = document.getElementById(id);
            if (modal.classList.contains(&#39;opacity-0&#39;)) {
                modal.classList.remove(&#39;opacity-0&#39;, &#39;pointer-events-none&#39;);
            } else {
                modal.classList.add(&#39;opacity-0&#39;, &#39;pointer-events-none&#39;);
            }
        }

        function showToast(msg) {
            const toast = document.getElementById(&#39;toast&#39;);
            document.getElementById(&#39;toast-message&#39;).innerText = msg;
            toast.classList.remove(&#39;opacity-0&#39;, &#39;pointer-events-none&#39;);
            setTimeout(() =&gt; {
                toast.classList.add(&#39;opacity-0&#39;, &#39;pointer-events-none&#39;);
            }, 3000);
        }

        function escapeHtml(str) {
            return str.replace(/&amp;/g, &quot;&amp;amp;&quot;).replace(/&lt;/g, &quot;&amp;lt;&quot;).replace(/&gt;/g, &quot;&amp;gt;&quot;).replace(/&quot;/g, &quot;&amp;quot;&quot;).replace(/&#39;/g, &quot;&amp;#039;&quot;);
        }

        function renderApp() {
            renderCriteria();
            renderComparisons();
            calculateAndRenderResults();
        }

        function initKaTeX() {
            if (typeof katex !== &#39;undefined&#39;) {
                katex.render(&quot;w_i = \\frac{1}{n} \\sum_{j=1}^{n} \\frac{a_{ij}}{\\sum_{k=1}^{n} a_{kj}}&quot;, document.getElementById(&#39;katex-formula-1&#39;));
                katex.render(&quot;\\lambda_{max} = \\frac{1}{n} \\sum_{i=1}^{n} \\frac{(A \\mathbf{w})_i}{w_i}&quot;, document.getElementById(&#39;katex-formula-2&#39;));
                katex.render(&quot;CI = \\frac{\\lambda_{max} - n}{n - 1}, \\quad CR = \\frac{CI}{RI}&quot;, document.getElementById(&#39;katex-formula-3&#39;));
            }
        }

        // Initialize App on DOM Ready
        document.addEventListener(&#39;DOMContentLoaded&#39;, () =&gt; {
            resetPairs();
            renderApp();
            initKaTeX();
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;


============================================

&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 800 1350&quot; width=&quot;100%&quot; height=&quot;100%&quot;&gt;
  &lt;defs&gt;
    &lt;!-- Background Gradient --&gt;
    &lt;linearGradient id=&quot;bgGradient&quot; x1=&quot;0%&quot; y1=&quot;0%&quot; x2=&quot;0%&quot; y2=&quot;100%&quot;&gt;
      &lt;stop offset=&quot;0%&quot; stop-color=&quot;#0f172a&quot;/&gt;
      &lt;stop offset=&quot;100%&quot; stop-color=&quot;#1e293b&quot;/&gt;
    &lt;/linearGradient&gt;

    &lt;!-- Step Card Gradients --&gt;
    &lt;linearGradient id=&quot;blueCard&quot; x1=&quot;0%&quot; y1=&quot;0%&quot; x2=&quot;100%&quot; y2=&quot;100%&quot;&gt;
      &lt;stop offset=&quot;0%&quot; stop-color=&quot;#1e3a8a&quot;/&gt;
      &lt;stop offset=&quot;100%&quot; stop-color=&quot;#3b82f6&quot;/&gt;
    &lt;/linearGradient&gt;
    
    &lt;linearGradient id=&quot;purpleCard&quot; x1=&quot;0%&quot; y1=&quot;0%&quot; x2=&quot;100%&quot; y2=&quot;100%&quot;&gt;
      &lt;stop offset=&quot;0%&quot; stop-color=&quot;#581c87&quot;/&gt;
      &lt;stop offset=&quot;100%&quot; stop-color=&quot;#a855f7&quot;/&gt;
    &lt;/linearGradient&gt;

    &lt;linearGradient id=&quot;emeraldCard&quot; x1=&quot;0%&quot; y1=&quot;0%&quot; x2=&quot;100%&quot; y2=&quot;100%&quot;&gt;
      &lt;stop offset=&quot;0%&quot; stop-color=&quot;#064e3b&quot;/&gt;
      &lt;stop offset=&quot;100%&quot; stop-color=&quot;#10b981&quot;/&gt;
    &lt;/linearGradient&gt;

    &lt;linearGradient id=&quot;amberCard&quot; x1=&quot;0%&quot; y1=&quot;0%&quot; x2=&quot;100%&quot; y2=&quot;100%&quot;&gt;
      &lt;stop offset=&quot;0%&quot; stop-color=&quot;#78350f&quot;/&gt;
      &lt;stop offset=&quot;100%&quot; stop-color=&quot;#f59e0b&quot;/&gt;
    &lt;/linearGradient&gt;

    &lt;!-- Drop Shadow Filter --&gt;
    &lt;filter id=&quot;shadow&quot; x=&quot;-10%&quot; y=&quot;-10%&quot; width=&quot;120%&quot; height=&quot;120%&quot;&gt;
      &lt;feDropShadow dx=&quot;0&quot; dy=&quot;8&quot; stdDeviation=&quot;6&quot; flood-color=&quot;#000000&quot; flood-opacity=&quot;0.4&quot;/&gt;
    &lt;/filter&gt;
  &lt;/defs&gt;

  &lt;!-- Background Layer --&gt;
  &lt;rect width=&quot;800&quot; height=&quot;1350&quot; fill=&quot;url(#bgGradient)&quot; rx=&quot;24&quot;/&gt;

  &lt;!-- Header Banner --&gt;
  &lt;g transform=&quot;translate(50, 40)&quot;&gt;
    &lt;rect width=&quot;700&quot; height=&quot;120&quot; rx=&quot;16&quot; fill=&quot;#1e293b&quot; stroke=&quot;#334155&quot; stroke-width=&quot;2&quot; filter=&quot;url(#shadow)&quot;/&gt;
    &lt;text x=&quot;350&quot; y=&quot;50&quot; text-anchor=&quot;middle&quot; fill=&quot;#60a5fa&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;20&quot; font-weight=&quot;700&quot; letter-spacing=&quot;2&quot;&gt;AHP DECISION ENGINE&lt;/text&gt;
    &lt;text x=&quot;350&quot; y=&quot;85&quot; text-anchor=&quot;middle&quot; fill=&quot;#ffffff&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;26&quot; font-weight=&quot;800&quot;&gt;User Workflow Guide&lt;/text&gt;
  &lt;/g&gt;

  &lt;!-- Connecting Vertical Flow Line --&gt;
  &lt;line x1=&quot;110&quot; y1=&quot;200&quot; x2=&quot;110&quot; y2=&quot;1200&quot; stroke=&quot;#334155&quot; stroke-width=&quot;6&quot; stroke-dasharray=&quot;10 10&quot;/&gt;

  &lt;!-- STEP 1: DEFINE CRITERIA --&gt;
  &lt;g transform=&quot;translate(50, 200)&quot; filter=&quot;url(#shadow)&quot;&gt;
    &lt;circle cx=&quot;60&quot; cy=&quot;60&quot; r=&quot;32&quot; fill=&quot;#2563eb&quot; stroke=&quot;#ffffff&quot; stroke-width=&quot;4&quot;/&gt;
    &lt;text x=&quot;60&quot; y=&quot;68&quot; text-anchor=&quot;middle&quot; fill=&quot;#ffffff&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;22&quot; font-weight=&quot;800&quot;&gt;1&lt;/text&gt;
    
    &lt;rect x=&quot;130&quot; y=&quot;0&quot; width=&quot;570&quot; height=&quot;180&quot; rx=&quot;16&quot; fill=&quot;#1e293b&quot; stroke=&quot;#3b82f6&quot; stroke-width=&quot;2&quot;/&gt;
    &lt;text x=&quot;160&quot; y=&quot;42&quot; fill=&quot;#60a5fa&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;20&quot; font-weight=&quot;700&quot;&gt;Define Decision Criteria&lt;/text&gt;
    &lt;text x=&quot;160&quot; y=&quot;75&quot; fill=&quot;#e2e8f0&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;15&quot; font-weight=&quot;400&quot;&gt;Add 2 to 10 criteria representing key evaluation factors&lt;/text&gt;
    &lt;text x=&quot;160&quot; y=&quot;98&quot; fill=&quot;#94a3b8&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;14&quot;&gt;(e.g., Cost, Quality, Risk, Implementation Ease).&lt;/text&gt;
    &lt;rect x=&quot;160&quot; y=&quot;118&quot; width=&quot;370&quot; height=&quot;38&quot; rx=&quot;8&quot; fill=&quot;#0f172a&quot; stroke=&quot;#334155&quot;/&gt;
    &lt;text x=&quot;175&quot; y=&quot;142&quot; fill=&quot;#38bdf8&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;13&quot; font-weight=&quot;600&quot;&gt;Action: Click &quot;+ Add Criterion&quot; or edit defaults&lt;/text&gt;
  &lt;/g&gt;

  &lt;!-- STEP 2: PAIRWISE COMPARISONS --&gt;
  &lt;g transform=&quot;translate(50, 430)&quot; filter=&quot;url(#shadow)&quot;&gt;
    &lt;circle cx=&quot;60&quot; cy=&quot;60&quot; r=&quot;32&quot; fill=&quot;#a855f7&quot; stroke=&quot;#ffffff&quot; stroke-width=&quot;4&quot;/&gt;
    &lt;text x=&quot;60&quot; y=&quot;68&quot; text-anchor=&quot;middle&quot; fill=&quot;#ffffff&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;22&quot; font-weight=&quot;800&quot;&gt;2&lt;/text&gt;
    
    &lt;rect x=&quot;130&quot; y=&quot;0&quot; width=&quot;570&quot; height=&quot;190&quot; rx=&quot;16&quot; fill=&quot;#1e293b&quot; stroke=&quot;#a855f7&quot; stroke-width=&quot;2&quot;/&gt;
    &lt;text x=&quot;160&quot; y=&quot;42&quot; fill=&quot;#c084fc&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;20&quot; font-weight=&quot;700&quot;&gt;Pairwise Comparisons (Saaty 1–9 Scale)&lt;/text&gt;
    &lt;text x=&quot;160&quot; y=&quot;75&quot; fill=&quot;#e2e8f0&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;15&quot; font-weight=&quot;400&quot;&gt;Adjust range sliders comparing relative importance between pairs.&lt;/text&gt;
    &lt;text x=&quot;160&quot; y=&quot;100&quot; fill=&quot;#94a3b8&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;14&quot;&gt;• Center (0) = Equal Priority (1:1)&lt;/text&gt;
    &lt;text x=&quot;160&quot; y=&quot;122&quot; fill=&quot;#94a3b8&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;14&quot;&gt;• Left/Right (+8 / -8) = Extreme Importance (9:1 / 1:9)&lt;/text&gt;
    &lt;rect x=&quot;160&quot; y=&quot;136&quot; width=&quot;370&quot; height=&quot;36&quot; rx=&quot;8&quot; fill=&quot;#0f172a&quot; stroke=&quot;#334155&quot;/&gt;
    &lt;text x=&quot;175&quot; y=&quot;159&quot; fill=&quot;#e879f9&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;13&quot; font-weight=&quot;600&quot;&gt;Action: Slide inputs for every criterion pair&lt;/text&gt;
  &lt;/g&gt;

  &lt;!-- STEP 3: CONSISTENCY RATIO (CR) ANALYSIS --&gt;
  &lt;g transform=&quot;translate(50, 670)&quot; filter=&quot;url(#shadow)&quot;&gt;
    &lt;circle cx=&quot;60&quot; cy=&quot;60&quot; r=&quot;32&quot; fill=&quot;#10b981&quot; stroke=&quot;#ffffff&quot; stroke-width=&quot;4&quot;/&gt;
    &lt;text x=&quot;60&quot; y=&quot;68&quot; text-anchor=&quot;middle&quot; fill=&quot;#ffffff&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;22&quot; font-weight=&quot;800&quot;&gt;3&lt;/text&gt;
    
    &lt;rect x=&quot;130&quot; y=&quot;0&quot; width=&quot;570&quot; height=&quot;210&quot; rx=&quot;16&quot; fill=&quot;#1e293b&quot; stroke=&quot;#10b981&quot; stroke-width=&quot;2&quot;/&gt;
    &lt;text x=&quot;160&quot; y=&quot;42&quot; fill=&quot;#34d399&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;20&quot; font-weight=&quot;700&quot;&gt;Validate Consistency Ratio (CR)&lt;/text&gt;
    &lt;text x=&quot;160&quot; y=&quot;75&quot; fill=&quot;#e2e8f0&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;15&quot; font-weight=&quot;400&quot;&gt;The engine automatically computes key metrics:&lt;/text&gt;
    &lt;text x=&quot;160&quot; y=&quot;102&quot; fill=&quot;#94a3b8&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;14&quot;&gt;• Principal Eigenvalue (λ_max) &amp;amp; Consistency Index (CI)&lt;/text&gt;
    &lt;text x=&quot;160&quot; y=&quot;126&quot; fill=&quot;#34d399&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;14&quot; font-weight=&quot;600&quot;&gt;✓ CR ≤ 10% (0.10): Judgments are logically consistent&lt;/text&gt;
    &lt;text x=&quot;160&quot; y=&quot;148&quot; fill=&quot;#f87171&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;14&quot; font-weight=&quot;600&quot;&gt;✕ CR &gt; 10%: Inconsistent! Check dynamic recommendations&lt;/text&gt;
    &lt;rect x=&quot;160&quot; y=&quot;160&quot; width=&quot;410&quot; height=&quot;36&quot; rx=&quot;8&quot; fill=&quot;#0f172a&quot; stroke=&quot;#334155&quot;/&gt;
    &lt;text x=&quot;175&quot; y=&quot;183&quot; fill=&quot;#6ee7b7&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;13&quot; font-weight=&quot;600&quot;&gt;Action: Re-align sliders if inconsistency alert appears&lt;/text&gt;
  &lt;/g&gt;

  &lt;!-- STEP 4: PRIORITY VECTOR &amp; VISUALIZATION --&gt;
  &lt;g transform=&quot;translate(50, 920)&quot; filter=&quot;url(#shadow)&quot;&gt;
    &lt;circle cx=&quot;60&quot; cy=&quot;60&quot; r=&quot;32&quot; fill=&quot;#f59e0b&quot; stroke=&quot;#ffffff&quot; stroke-width=&quot;4&quot;/&gt;
    &lt;text x=&quot;60&quot; y=&quot;68&quot; text-anchor=&quot;middle&quot; fill=&quot;#ffffff&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;22&quot; font-weight=&quot;800&quot;&gt;4&lt;/text&gt;
    
    &lt;rect x=&quot;130&quot; y=&quot;0&quot; width=&quot;570&quot; height=&quot;180&quot; rx=&quot;16&quot; fill=&quot;#1e293b&quot; stroke=&quot;#f59e0b&quot; stroke-width=&quot;2&quot;/&gt;
    &lt;text x=&quot;160&quot; y=&quot;42&quot; fill=&quot;#fbbf24&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;20&quot; font-weight=&quot;700&quot;&gt;Analyze Priority Weights &amp;amp; Charts&lt;/text&gt;
    &lt;text x=&quot;160&quot; y=&quot;75&quot; fill=&quot;#e2e8f0&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;15&quot; font-weight=&quot;400&quot;&gt;Examine generated priority weights (w_i) summing to 100%.&lt;/text&gt;
    &lt;text x=&quot;160&quot; y=&quot;100&quot; fill=&quot;#94a3b8&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;14&quot;&gt;• Toggle between Interactive Bar Chart &amp;amp; Radar Chart&lt;/text&gt;
    &lt;text x=&quot;160&quot; y=&quot;122&quot; fill=&quot;#94a3b8&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;14&quot;&gt;• Inspect matrix tables (Raw Matrix A vs. Normalized Matrix A_norm)&lt;/text&gt;
    &lt;rect x=&quot;160&quot; y=&quot;134&quot; width=&quot;370&quot; height=&quot;34&quot; rx=&quot;8&quot; fill=&quot;#0f172a&quot; stroke=&quot;#334155&quot;/&gt;
    &lt;text x=&quot;175&quot; y=&quot;156&quot; fill=&quot;#fcd34d&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;13&quot; font-weight=&quot;600&quot;&gt;Action: Review mathematical breakdown tabs&lt;/text&gt;
  &lt;/g&gt;

  &lt;!-- STEP 5: EXPORT &amp; REPORTING --&gt;
  &lt;g transform=&quot;translate(50, 1130)&quot; filter=&quot;url(#shadow)&quot;&gt;
    &lt;circle cx=&quot;60&quot; cy=&quot;60&quot; r=&quot;32&quot; fill=&quot;#06b6d4&quot; stroke=&quot;#ffffff&quot; stroke-width=&quot;4&quot;/&gt;
    &lt;text x=&quot;60&quot; y=&quot;68&quot; text-anchor=&quot;middle&quot; fill=&quot;#ffffff&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;22&quot; font-weight=&quot;800&quot;&gt;5&lt;/text&gt;
    
    &lt;rect x=&quot;130&quot; y=&quot;0&quot; width=&quot;570&quot; height=&quot;140&quot; rx=&quot;16&quot; fill=&quot;#1e293b&quot; stroke=&quot;#06b6d4&quot; stroke-width=&quot;2&quot;/&gt;
    &lt;text x=&quot;160&quot; y=&quot;42&quot; fill=&quot;#22d3ee&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;20&quot; font-weight=&quot;700&quot;&gt;Export Results&lt;/text&gt;
    &lt;text x=&quot;160&quot; y=&quot;75&quot; fill=&quot;#e2e8f0&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;15&quot; font-weight=&quot;400&quot;&gt;Download reports for decision documentation and audit trails.&lt;/text&gt;
    &lt;rect x=&quot;160&quot; y=&quot;90&quot; width=&quot;410&quot; height=&quot;36&quot; rx=&quot;8&quot; fill=&quot;#0f172a&quot; stroke=&quot;#334155&quot;/&gt;
    &lt;text x=&quot;175&quot; y=&quot;113&quot; fill=&quot;#67e8f9&quot; font-family=&quot;Inter, sans-serif&quot; font-size=&quot;13&quot; font-weight=&quot;600&quot;&gt;Action: Click &quot;Export Full Excel&quot; or &quot;Export CSV&quot;&lt;/text&gt;
  &lt;/g&gt;
&lt;/svg&gt;


===============
&lt;br&gt;Updated: 06/10/20206
Changes made: AHP Consistency Analysis added. Radar chart added. Comparison Matrix and Normalized Matrix are added. 

</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/8548240051844731066/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/8548240051844731066' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/8548240051844731066'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/8548240051844731066'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2026/10/the-analytic-hierarchy-process-ahp-step.html' title='The Analytic Hierarchy Process (AHP): Step 1 to the Perfect Decision Matrix for Better Decision Making'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3cimFohxRePzk9cjlesKjhFEhBmUDYZvRz1KvBD17nVCDXnETx09HWq5bib5_5r01uuGKfjc5uLQUkwcrezfWUpmZrQxxuShVC8M98edx2Ff9m6EJoO3mK5Qx39-Re5dezhAIBjvmIYXxVMuxG2LrU9EAFGesPReeeAa5kpHEZ-u_DSu7QAnFphsfBS9W/s72-c/Image.jpeg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-4874995137553983192</id><published>2026-09-26T16:23:05.369+05:00</published><updated>2026-09-26T16:31:47.721+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="decision making"/><title type='text'>Decision Matrix Webapp to help you make Better Decisions</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8cV3o1IMeSTfedK7njduF6uC6uSDZYfxGF5D6j3h0P5hEsn8J2cB8fPiktJ_PqiSDBJq-JpPdtI3maJAL_Wxg_9pUEHx9PNb5ri1wXb_Dmtr8NEIvGeufyl71Vc4oFPxMBqdiuPUbakzhu90wTjO-p6thFEb2ReFrO9wHUIRzmUol71MyRPhYjMK_fRhn/s1408/Cover%20Image.jpg&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;600&quot; data-original-height=&quot;768&quot; data-original-width=&quot;1408&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8cV3o1IMeSTfedK7njduF6uC6uSDZYfxGF5D6j3h0P5hEsn8J2cB8fPiktJ_PqiSDBJq-JpPdtI3maJAL_Wxg_9pUEHx9PNb5ri1wXb_Dmtr8NEIvGeufyl71Vc4oFPxMBqdiuPUbakzhu90wTjO-p6thFEb2ReFrO9wHUIRzmUol71MyRPhYjMK_fRhn/s600/Cover%20Image.jpg&quot;/&gt;&lt;/a&gt;&lt;/div&gt;

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Decision Matrix Evaluator&lt;/title&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;style&gt;
        @import url(&#39;https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;display=swap&#39;);
        
        body {
            font-family: &#39;Inter&#39;, sans-serif;
            background-color: #f8fafc;
        }

        /* Custom subtle scrollbar for the table container */
        .custom-scrollbar::-webkit-scrollbar {
            height: 8px;
            width: 8px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9; 
            border-radius: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1; 
            border-radius: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8; 
        }

        /* Input styling to look seamless in the table */
        .table-input {
            width: 100%;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 0.375rem;
            padding: 0.5rem;
            transition: all 0.2s;
        }
        .table-input:hover {
            border-color: #e2e8f0;
            background: #f8fafc;
        }
        .table-input:focus {
            outline: none;
            border-color: #3b82f6;
            background: white;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
        }
        
        /* Progress bar animation */
        .progress-bar {
            transition: width 0.5s ease-out;
        }
        
        .winner-card {
            animation: highlight 1s ease-out;
        }
        
        @keyframes highlight {
            0% { transform: scale(1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
            50% { transform: scale(1.02); box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.4); }
            100% { transform: scale(1); box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.2); }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;p-4 md:p-8&quot;&gt;

    &lt;div class=&quot;max-w-6xl mx-auto bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden&quot;&gt;
        
        &lt;!-- Header --&gt;
        &lt;div class=&quot;bg-slate-800 text-white p-6 flex flex-col md:flex-row justify-between items-center gap-4&quot;&gt;
            &lt;div&gt;
                &lt;h2 class=&quot;text-2xl font-bold flex items-center gap-2&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-table-list text-blue-400&quot;&gt;&lt;/i&gt;
                    Decision Matrix
                &lt;/h2&gt;
                &lt;p class=&quot;text-slate-300 text-sm mt-1&quot;&gt;Score options from 1-10 based on weighted criteria.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;flex gap-3&quot;&gt;
                &lt;button onclick=&quot;addCriterion()&quot; class=&quot;bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-plus&quot;&gt;&lt;/i&gt; Add Criteria
                &lt;/button&gt;
                &lt;button onclick=&quot;addOption()&quot; class=&quot;bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-plus&quot;&gt;&lt;/i&gt; Add Option
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;p-6 overflow-x-auto custom-scrollbar&quot;&gt;
            &lt;table class=&quot;w-full text-left border-collapse min-w-[600px]&quot;&gt;
                &lt;thead&gt;
                    &lt;tr id=&quot;table-header&quot; class=&quot;border-b-2 border-slate-200&quot;&gt;
                        &lt;!-- Rendered by JS --&gt;
                    &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody id=&quot;table-body&quot;&gt;
                    &lt;!-- Rendered by JS --&gt;
                &lt;/tbody&gt;
            &lt;/table&gt;
        &lt;/div&gt;

        &lt;div class=&quot;bg-slate-50 p-6 border-t border-slate-200&quot;&gt;
            &lt;h3 class=&quot;text-lg font-bold text-slate-800 mb-4 flex items-center gap-2&quot;&gt;
                &lt;i class=&quot;fa-solid fa-chart-bar text-blue-500&quot;&gt;&lt;/i&gt; Results Overview
            &lt;/h3&gt;
            &lt;div id=&quot;results-container&quot; class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot;&gt;
                &lt;!-- Rendered by JS --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;bg-white p-6 border-t border-slate-200&quot;&gt;
            &lt;h3 class=&quot;text-lg font-bold text-slate-800 mb-4 flex items-center gap-2&quot;&gt;
                &lt;i class=&quot;fa-solid fa-chart-pie text-blue-500&quot;&gt;&lt;/i&gt; Visual Comparison
            &lt;/h3&gt;
            &lt;div class=&quot;w-full h-64 md:h-80 flex justify-center&quot;&gt;
                &lt;canvas id=&quot;resultsChart&quot;&gt;&lt;/canvas&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // Initial State
        let state = {
            criteria: [
                { id: &#39;c1&#39;, name: &#39;Cost (Lower is better)&#39;, weight: 8 },
                { id: &#39;c2&#39;, name: &#39;Features&#39;, weight: 7 },
                { id: &#39;c3&#39;, name: &#39;Ease of Use&#39;, weight: 9 }
            ],
            options: [
                { id: &#39;o1&#39;, name: &#39;Option A&#39; },
                { id: &#39;o2&#39;, name: &#39;Option B&#39; }
            ],
            scores: {
                &#39;c1&#39;: { &#39;o1&#39;: 7, &#39;o2&#39;: 4 },
                &#39;c2&#39;: { &#39;o1&#39;: 6, &#39;o2&#39;: 9 },
                &#39;c3&#39;: { &#39;o1&#39;: 8, &#39;o2&#39;: 5 }
            }
        };

        // Utility: Generate random ID
        function generateId(prefix) {
            return prefix + Math.random().toString(36).substr(2, 9);
        }

        function renderTable() {
            const header = document.getElementById(&#39;table-header&#39;);
            const body = document.getElementById(&#39;table-body&#39;);
            
            // Render Header
            let headerHTML = `
                &lt;th class=&quot;p-3 font-semibold text-slate-700 w-1/4 min-w-[200px]&quot;&gt;Criteria&lt;/th&gt;
                &lt;th class=&quot;p-3 font-semibold text-slate-700 w-24 text-center&quot;&gt;Weight&lt;br&gt;&lt;span class=&quot;text-xs font-normal text-slate-400&quot;&gt;(1-10)&lt;/span&gt;&lt;/th&gt;
            `;
            state.options.forEach((opt, index) =&gt; {
                headerHTML += `
                    &lt;th class=&quot;p-3 min-w-[150px]&quot;&gt;
                        &lt;div class=&quot;flex items-center gap-2&quot;&gt;
                            &lt;input type=&quot;text&quot; class=&quot;table-input font-semibold text-slate-800&quot; value=&quot;${opt.name}&quot; onchange=&quot;updateOptionName(&#39;${opt.id}&#39;, this.value)&quot;&gt;
                            ${state.options.length &gt; 1 ? `&lt;button onclick=&quot;deleteOption(&#39;${opt.id}&#39;)&quot; class=&quot;text-slate-400 hover:text-red-500 transition-colors&quot;&gt;&lt;i class=&quot;fa-solid fa-trash-can&quot;&gt;&lt;/i&gt;&lt;/button&gt;` : &#39;&#39;}
                        &lt;/div&gt;
                    &lt;/th&gt;
                `;
            });
            header.innerHTML = headerHTML;

            // Render Body
            let bodyHTML = &#39;&#39;;
            state.criteria.forEach((crit, index) =&gt; {
                bodyHTML += `
                    &lt;tr class=&quot;border-b border-slate-100 hover:bg-slate-50 transition-colors group&quot;&gt;
                        &lt;td class=&quot;p-2&quot;&gt;
                            &lt;div class=&quot;flex items-center gap-2&quot;&gt;
                                ${state.criteria.length &gt; 1 ? `&lt;button onclick=&quot;deleteCriterion(&#39;${crit.id}&#39;)&quot; class=&quot;text-slate-300 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100&quot;&gt;&lt;i class=&quot;fa-solid fa-trash-can&quot;&gt;&lt;/i&gt;&lt;/button&gt;` : &#39;&lt;span class=&quot;w-4&quot;&gt;&lt;/span&gt;&#39;}
                                &lt;input type=&quot;text&quot; class=&quot;table-input font-medium text-slate-700&quot; value=&quot;${crit.name}&quot; onchange=&quot;updateCriterionName(&#39;${crit.id}&#39;, this.value)&quot;&gt;
                            &lt;/div&gt;
                        &lt;/td&gt;
                        &lt;td class=&quot;p-2&quot;&gt;
                            &lt;input type=&quot;number&quot; min=&quot;1&quot; max=&quot;10&quot; class=&quot;table-input text-center text-blue-600 font-bold bg-blue-50/50&quot; value=&quot;${crit.weight}&quot; oninput=&quot;updateWeight(&#39;${crit.id}&#39;, this.value)&quot;&gt;
                        &lt;/td&gt;
                `;
                
                state.options.forEach(opt =&gt; {
                    const score = state.scores[crit.id] ? (state.scores[crit.id][opt.id] || 0) : 0;
                    bodyHTML += `
                        &lt;td class=&quot;p-2&quot;&gt;
                            &lt;input type=&quot;number&quot; min=&quot;1&quot; max=&quot;10&quot; class=&quot;table-input text-center&quot; value=&quot;${score}&quot; oninput=&quot;updateScore(&#39;${crit.id}&#39;, &#39;${opt.id}&#39;, this.value)&quot; placeholder=&quot;1-10&quot;&gt;
                        &lt;/td&gt;
                    `;
                });
                bodyHTML += `&lt;/tr&gt;`;
            });
            body.innerHTML = bodyHTML;
            
            // Always calculate results when table structure changes
            renderResults();
        }

        function calculateResults() {
            let maxPossibleTotal = 0;
            state.criteria.forEach(c =&gt; {
                maxPossibleTotal += (c.weight * 10); // Assuming 10 is max score
            });

            if (maxPossibleTotal === 0) return []; // Prevent division by zero

            let results = state.options.map(opt =&gt; {
                let totalScore = 0;
                state.criteria.forEach(crit =&gt; {
                    const score = state.scores[crit.id] ? (state.scores[crit.id][opt.id] || 0) : 0;
                    totalScore += (score * crit.weight);
                });
                return {
                    ...opt,
                    totalScore,
                    percentage: ((totalScore / maxPossibleTotal) * 100).toFixed(1)
                };
            });

            // Sort results descending
            results.sort((a, b) =&gt; b.totalScore - a.totalScore);
            return results;
        }

        function renderResults() {
            const container = document.getElementById(&#39;results-container&#39;);
            const results = calculateResults();
            
            if (results.length === 0) {
                container.innerHTML = &#39;&lt;p class=&quot;text-slate-500&quot;&gt;Add criteria and weights to see results.&lt;/p&gt;&#39;;
                if (window.resultsChartInstance) {
                    window.resultsChartInstance.destroy();
                }
                return;
            }

            const topScore = results[0].totalScore;
            let html = &#39;&#39;;

            results.forEach((res, index) =&gt; {
                const isWinner = index === 0 &amp;&amp; topScore &gt; 0;
                // Avoid multiple winners having the exact same style if desired, but for now top 1 is winner
                
                const cardClass = isWinner 
                    ? &#39;bg-white border-2 border-emerald-500 shadow-emerald-100 winner-card&#39; 
                    : &#39;bg-white border border-slate-200&#39;;
                
                const textClass = isWinner ? &#39;text-emerald-700&#39; : &#39;text-slate-700&#39;;
                const barColor = isWinner ? &#39;bg-emerald-500&#39; : &#39;bg-blue-500&#39;;

                html += `
                    &lt;div class=&quot;rounded-xl p-5 shadow-sm ${cardClass} relative overflow-hidden transition-all duration-300&quot;&gt;
                        ${isWinner ? &#39;&lt;div class=&quot;absolute top-0 right-0 bg-emerald-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg&quot;&gt;&lt;i class=&quot;fa-solid fa-trophy mr-1&quot;&gt;&lt;/i&gt; Best Option&lt;/div&gt;&#39; : &#39;&#39;}
                        
                        &lt;h4 class=&quot;text-xl font-bold mb-1 ${textClass} pr-16&quot;&gt;${res.name}&lt;/h4&gt;
                        
                        &lt;div class=&quot;mt-4 mb-2 flex justify-between items-end&quot;&gt;
                            &lt;div&gt;
                                &lt;span class=&quot;text-3xl font-black ${isWinner ? &#39;text-emerald-600&#39; : &#39;text-slate-800&#39;}&quot;&gt;${res.totalScore}&lt;/span&gt;
                                &lt;span class=&quot;text-sm text-slate-500 font-medium&quot;&gt;pts&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;text-lg font-bold ${isWinner ? &#39;text-emerald-600&#39; : &#39;text-blue-600&#39;}&quot;&gt;
                                ${res.percentage}%
                            &lt;/div&gt;
                        &lt;/div&gt;
                        
                        &lt;div class=&quot;w-full bg-slate-100 rounded-full h-2.5 mt-2 overflow-hidden&quot;&gt;
                            &lt;div class=&quot;${barColor} h-2.5 rounded-full progress-bar&quot; style=&quot;width: ${res.percentage}%&quot;&gt;&lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
            });

            container.innerHTML = html;

            renderChart(results);
        }

        let resultsChartInstance = null;

        function renderChart(results) {
            const canvas = document.getElementById(&#39;resultsChart&#39;);
            if (!canvas) return;
            const ctx = canvas.getContext(&#39;2d&#39;);
            
            if (resultsChartInstance) {
                resultsChartInstance.destroy();
            }

            if (results.length === 0) return;

            const labels = results.map(r =&gt; r.name);
            const data = results.map(r =&gt; r.totalScore);
            
            // Highlight index 0 (winner) with emerald, others with blue
            const backgroundColors = results.map((_, index) =&gt; 
                index === 0 &amp;&amp; data[0] &gt; 0 ? &#39;rgba(16, 185, 129, 0.8)&#39; : &#39;rgba(59, 130, 246, 0.8)&#39;
            );
            const borderColors = results.map((_, index) =&gt; 
                index === 0 &amp;&amp; data[0] &gt; 0 ? &#39;rgba(16, 185, 129, 1)&#39; : &#39;rgba(59, 130, 246, 1)&#39;
            );

            resultsChartInstance = new Chart(ctx, {
                type: &#39;bar&#39;,
                data: {
                    labels: labels,
                    datasets: [{
                        label: &#39;Total Score&#39;,
                        data: data,
                        backgroundColor: backgroundColors,
                        borderColor: borderColors,
                        borderWidth: 1,
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: &#39;Score&#39;
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `Score: ${context.raw}`;
                                }
                            }
                        }
                    }
                }
            });
        }

        function addCriterion() {
            const newId = generateId(&#39;c&#39;);
            state.criteria.push({ id: newId, name: &#39;New Criteria&#39;, weight: 5 });
            state.scores[newId] = {};
            state.options.forEach(opt =&gt; {
                state.scores[newId][opt.id] = 5; // Default score
            });
            renderTable();
        }

        function addOption() {
            const newId = generateId(&#39;o&#39;);
            const optionNum = state.options.length + 1;
            state.options.push({ id: newId, name: `Option ${optionNum}` });
            state.criteria.forEach(crit =&gt; {
                if (!state.scores[crit.id]) state.scores[crit.id] = {};
                state.scores[crit.id][newId] = 5; // Default score
            });
            renderTable();
        }

        function deleteCriterion(id) {
            state.criteria = state.criteria.filter(c =&gt; c.id !== id);
            delete state.scores[id];
            renderTable();
        }

        function deleteOption(id) {
            state.options = state.options.filter(o =&gt; o.id !== id);
            state.criteria.forEach(crit =&gt; {
                if (state.scores[crit.id]) {
                    delete state.scores[crit.id][id];
                }
            });
            renderTable();
        }

        function updateCriterionName(id, value) {
            const crit = state.criteria.find(c =&gt; c.id === id);
            if (crit) crit.name = value;
        }

        function updateOptionName(id, value) {
            const opt = state.options.find(o =&gt; o.id === id);
            if (opt) {
                opt.name = value;
                renderResults(); // Update names in results immediately
            }
        }

        function updateWeight(id, value) {
            const numVal = parseInt(value) || 0;
            const crit = state.criteria.find(c =&gt; c.id === id);
            if (crit) {
                crit.weight = Math.max(0, Math.min(10, numVal)); // clamp 0-10
                renderResults(); // Update calculations silently
            }
        }

        function updateScore(critId, optId, value) {
            const numVal = parseInt(value) || 0;
            if (!state.scores[critId]) state.scores[critId] = {};
            state.scores[critId][optId] = Math.max(0, Math.min(10, numVal)); // clamp 0-10
            renderResults(); // Update calculations silently without losing focus
        }

        // Initialize app
        window.onload = () =&gt; {
            renderTable();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 600 1360&quot; width=&quot;100%&quot; height=&quot;auto&quot; style=&quot;background-color: #f8fafc; border-radius: 16px; border: 1px solid #e2e8f0; font-family: &#39;Inter&#39;, system-ui, -apple-system, sans-serif;&quot;&gt;
    &lt;defs&gt;
        &lt;!-- Shadow for cards --&gt;
        &lt;filter id=&quot;card-shadow&quot; x=&quot;-10%&quot; y=&quot;-10%&quot; width=&quot;120%&quot; height=&quot;120%&quot;&gt;
            &lt;feDropShadow dx=&quot;0&quot; dy=&quot;4&quot; stdDeviation=&quot;6&quot; flood-color=&quot;#0f172a&quot; flood-opacity=&quot;0.05&quot; /&gt;
        &lt;/filter&gt;
        
        &lt;!-- Arrow Marker (Auto-orients to the path direction) --&gt;
        &lt;marker id=&quot;arrow&quot; viewBox=&quot;0 0 10 10&quot; refX=&quot;9&quot; refY=&quot;5&quot; markerWidth=&quot;6&quot; markerHeight=&quot;6&quot; orient=&quot;auto&quot;&gt;
            &lt;path d=&quot;M 0 0 L 10 5 L 0 10 z&quot; fill=&quot;#cbd5e1&quot; /&gt;
        &lt;/marker&gt;
    &lt;/defs&gt;

    &lt;!-- Title &amp; Subtitle --&gt;
    &lt;text x=&quot;300&quot; y=&quot;60&quot; font-size=&quot;28&quot; font-weight=&quot;700&quot; text-anchor=&quot;middle&quot; fill=&quot;#1e293b&quot;&gt;How to Use the Decision Matrix&lt;/text&gt;
    &lt;text x=&quot;300&quot; y=&quot;90&quot; font-size=&quot;16&quot; font-weight=&quot;400&quot; text-anchor=&quot;middle&quot; fill=&quot;#64748b&quot;&gt;Follow these 4 simple steps to evaluate your choices objectively&lt;/text&gt;

    &lt;!-- Vertical Connecting Lines --&gt;
    &lt;path d=&quot;M 300 395 L 300 425&quot; stroke=&quot;#cbd5e1&quot; stroke-width=&quot;3&quot; stroke-dasharray=&quot;4 4&quot; marker-end=&quot;url(#arrow)&quot; /&gt;
    &lt;path d=&quot;M 300 695 L 300 725&quot; stroke=&quot;#cbd5e1&quot; stroke-width=&quot;3&quot; stroke-dasharray=&quot;4 4&quot; marker-end=&quot;url(#arrow)&quot; /&gt;
    &lt;path d=&quot;M 300 995 L 300 1025&quot; stroke=&quot;#cbd5e1&quot; stroke-width=&quot;3&quot; stroke-dasharray=&quot;4 4&quot; marker-end=&quot;url(#arrow)&quot; /&gt;

    &lt;!-- Step 1: Define --&gt;
    &lt;g transform=&quot;translate(170, 140)&quot;&gt;
        &lt;rect width=&quot;260&quot; height=&quot;240&quot; rx=&quot;12&quot; fill=&quot;#ffffff&quot; filter=&quot;url(#card-shadow)&quot; border=&quot;1px solid #e2e8f0&quot;/&gt;
        
        &lt;!-- Step Number --&gt;
        &lt;circle cx=&quot;30&quot; cy=&quot;30&quot; r=&quot;14&quot; fill=&quot;#3b82f6&quot; /&gt;
        &lt;text x=&quot;30&quot; y=&quot;35&quot; font-size=&quot;14&quot; font-weight=&quot;bold&quot; fill=&quot;#ffffff&quot; text-anchor=&quot;middle&quot;&gt;1&lt;/text&gt;
        
        &lt;!-- Icon Circle &amp; Path (List/Plus) --&gt;
        &lt;circle cx=&quot;130&quot; cy=&quot;50&quot; r=&quot;28&quot; fill=&quot;#eff6ff&quot; /&gt;
        &lt;path d=&quot;M118 40 h24 M118 50 h24 M118 60 h14 M138 56 v8 M142 60 h-8&quot; stroke=&quot;#3b82f6&quot; stroke-width=&quot;2.5&quot; stroke-linecap=&quot;round&quot; fill=&quot;none&quot;/&gt;
        
        &lt;!-- Text --&gt;
        &lt;text x=&quot;130&quot; y=&quot;110&quot; font-size=&quot;18&quot; font-weight=&quot;600&quot; fill=&quot;#0f172a&quot; text-anchor=&quot;middle&quot;&gt;Define Setup&lt;/text&gt;
        &lt;text x=&quot;130&quot; y=&quot;140&quot; font-size=&quot;14&quot; fill=&quot;#64748b&quot; text-anchor=&quot;middle&quot;&gt;List your criteria and&lt;/text&gt;
        &lt;text x=&quot;130&quot; y=&quot;162&quot; font-size=&quot;14&quot; fill=&quot;#64748b&quot; text-anchor=&quot;middle&quot;&gt;options. Set a priority&lt;/text&gt;
        &lt;text x=&quot;130&quot; y=&quot;184&quot; font-size=&quot;14&quot; fill=&quot;#64748b&quot; text-anchor=&quot;middle&quot;&gt;weight (1-10)&lt;/text&gt;
        &lt;text x=&quot;130&quot; y=&quot;206&quot; font-size=&quot;14&quot; fill=&quot;#64748b&quot; text-anchor=&quot;middle&quot;&gt;for each criterion.&lt;/text&gt;
    &lt;/g&gt;

    &lt;!-- Step 2: Score --&gt;
    &lt;g transform=&quot;translate(170, 440)&quot;&gt;
        &lt;rect width=&quot;260&quot; height=&quot;240&quot; rx=&quot;12&quot; fill=&quot;#ffffff&quot; filter=&quot;url(#card-shadow)&quot;/&gt;
        
        &lt;!-- Step Number --&gt;
        &lt;circle cx=&quot;30&quot; cy=&quot;30&quot; r=&quot;14&quot; fill=&quot;#8b5cf6&quot; /&gt;
        &lt;text x=&quot;30&quot; y=&quot;35&quot; font-size=&quot;14&quot; font-weight=&quot;bold&quot; fill=&quot;#ffffff&quot; text-anchor=&quot;middle&quot;&gt;2&lt;/text&gt;
        
        &lt;!-- Icon Circle &amp; Path (Star/Score) --&gt;
        &lt;circle cx=&quot;130&quot; cy=&quot;50&quot; r=&quot;28&quot; fill=&quot;#f5f3ff&quot; /&gt;
        &lt;path d=&quot;M130 32 l5 15 h15 l-12 9 l5 15 l-13 -9 l-13 9 l5 -15 l-12 -9 h15 z&quot; fill=&quot;none&quot; stroke=&quot;#8b5cf6&quot; stroke-width=&quot;2.5&quot; stroke-linejoin=&quot;round&quot;/&gt;
        
        &lt;!-- Text --&gt;
        &lt;text x=&quot;130&quot; y=&quot;110&quot; font-size=&quot;18&quot; font-weight=&quot;600&quot; fill=&quot;#0f172a&quot; text-anchor=&quot;middle&quot;&gt;Rate Options&lt;/text&gt;
        &lt;text x=&quot;130&quot; y=&quot;140&quot; font-size=&quot;14&quot; fill=&quot;#64748b&quot; text-anchor=&quot;middle&quot;&gt;Score every option&lt;/text&gt;
        &lt;text x=&quot;130&quot; y=&quot;162&quot; font-size=&quot;14&quot; fill=&quot;#64748b&quot; text-anchor=&quot;middle&quot;&gt;against the criteria&lt;/text&gt;
        &lt;text x=&quot;130&quot; y=&quot;184&quot; font-size=&quot;14&quot; fill=&quot;#64748b&quot; text-anchor=&quot;middle&quot;&gt;on a simple scale&lt;/text&gt;
        &lt;text x=&quot;130&quot; y=&quot;206&quot; font-size=&quot;14&quot; fill=&quot;#64748b&quot; text-anchor=&quot;middle&quot;&gt;of 1 to 10.&lt;/text&gt;
    &lt;/g&gt;

    &lt;!-- Step 3: Analyze --&gt;
    &lt;g transform=&quot;translate(170, 740)&quot;&gt;
        &lt;rect width=&quot;260&quot; height=&quot;240&quot; rx=&quot;12&quot; fill=&quot;#ffffff&quot; filter=&quot;url(#card-shadow)&quot;/&gt;
        
        &lt;!-- Step Number --&gt;
        &lt;circle cx=&quot;30&quot; cy=&quot;30&quot; r=&quot;14&quot; fill=&quot;#f59e0b&quot; /&gt;
        &lt;text x=&quot;30&quot; y=&quot;35&quot; font-size=&quot;14&quot; font-weight=&quot;bold&quot; fill=&quot;#ffffff&quot; text-anchor=&quot;middle&quot;&gt;3&lt;/text&gt;
        
        &lt;!-- Icon Circle &amp; Path (Chart) --&gt;
        &lt;circle cx=&quot;130&quot; cy=&quot;50&quot; r=&quot;28&quot; fill=&quot;#fffbeb&quot; /&gt;
        &lt;path d=&quot;M115 65 v-15 M130 65 v-25 M145 65 v-10 M105 65 h45&quot; stroke=&quot;#f59e0b&quot; stroke-width=&quot;2.5&quot; stroke-linecap=&quot;round&quot; fill=&quot;none&quot;/&gt;
        
        &lt;!-- Text --&gt;
        &lt;text x=&quot;130&quot; y=&quot;110&quot; font-size=&quot;18&quot; font-weight=&quot;600&quot; fill=&quot;#0f172a&quot; text-anchor=&quot;middle&quot;&gt;View Results&lt;/text&gt;
        &lt;text x=&quot;130&quot; y=&quot;140&quot; font-size=&quot;14&quot; fill=&quot;#64748b&quot; text-anchor=&quot;middle&quot;&gt;Scroll down to see&lt;/text&gt;
        &lt;text x=&quot;130&quot; y=&quot;162&quot; font-size=&quot;14&quot; fill=&quot;#64748b&quot; text-anchor=&quot;middle&quot;&gt;the app instantly&lt;/text&gt;
        &lt;text x=&quot;130&quot; y=&quot;184&quot; font-size=&quot;14&quot; fill=&quot;#64748b&quot; text-anchor=&quot;middle&quot;&gt;calculate weighted totals&lt;/text&gt;
        &lt;text x=&quot;130&quot; y=&quot;206&quot; font-size=&quot;14&quot; fill=&quot;#64748b&quot; text-anchor=&quot;middle&quot;&gt;and render the graph.&lt;/text&gt;
    &lt;/g&gt;

    &lt;!-- Step 4: Decide --&gt;
    &lt;g transform=&quot;translate(170, 1040)&quot;&gt;
        &lt;rect width=&quot;260&quot; height=&quot;240&quot; rx=&quot;12&quot; fill=&quot;#ffffff&quot; filter=&quot;url(#card-shadow)&quot; stroke=&quot;#10b981&quot; stroke-width=&quot;2&quot;/&gt;
        
        &lt;!-- Highlight badge --&gt;
        &lt;rect x=&quot;180&quot; y=&quot;0&quot; width=&quot;80&quot; height=&quot;24&quot; rx=&quot;8&quot; fill=&quot;#10b981&quot; /&gt;
        &lt;text x=&quot;220&quot; y=&quot;16&quot; font-size=&quot;10&quot; font-weight=&quot;bold&quot; fill=&quot;#ffffff&quot; text-anchor=&quot;middle&quot;&gt;WINNER&lt;/text&gt;
        
        &lt;!-- Step Number --&gt;
        &lt;circle cx=&quot;30&quot; cy=&quot;30&quot; r=&quot;14&quot; fill=&quot;#10b981&quot; /&gt;
        &lt;text x=&quot;30&quot; y=&quot;35&quot; font-size=&quot;14&quot; font-weight=&quot;bold&quot; fill=&quot;#ffffff&quot; text-anchor=&quot;middle&quot;&gt;4&lt;/text&gt;
        
        &lt;!-- Icon Circle &amp; Path (Trophy) --&gt;
        &lt;circle cx=&quot;130&quot; cy=&quot;50&quot; r=&quot;28&quot; fill=&quot;#ecfdf5&quot; /&gt;
        &lt;path d=&quot;M120 60 h20 M130 50 v10 M115 35 a15 15 0 0 0 30 0 v-5 h-30 z M115 30 h-5 a5 5 0 0 0 0 10 h5 M145 30 h5 a5 5 0 0 1 0 10 h-5&quot; stroke=&quot;#10b981&quot; stroke-width=&quot;2.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; fill=&quot;none&quot;/&gt;
        
        &lt;!-- Text --&gt;
        &lt;text x=&quot;130&quot; y=&quot;110&quot; font-size=&quot;18&quot; font-weight=&quot;600&quot; fill=&quot;#0f172a&quot; text-anchor=&quot;middle&quot;&gt;Make Decision&lt;/text&gt;
        &lt;text x=&quot;130&quot; y=&quot;140&quot; font-size=&quot;14&quot; fill=&quot;#64748b&quot; text-anchor=&quot;middle&quot;&gt;The optimal choice&lt;/text&gt;
        &lt;text x=&quot;130&quot; y=&quot;162&quot; font-size=&quot;14&quot; fill=&quot;#64748b&quot; text-anchor=&quot;middle&quot;&gt;is automatically&lt;/text&gt;
        &lt;text x=&quot;130&quot; y=&quot;184&quot; font-size=&quot;14&quot; fill=&quot;#64748b&quot; text-anchor=&quot;middle&quot;&gt;highlighted in&lt;/text&gt;
        &lt;text x=&quot;130&quot; y=&quot;206&quot; font-size=&quot;14&quot; font-weight=&quot;bold&quot; fill=&quot;#10b981&quot; text-anchor=&quot;middle&quot;&gt;Emerald Green!&lt;/text&gt;
    &lt;/g&gt;
&lt;/svg&gt;</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/4874995137553983192/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/4874995137553983192' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/4874995137553983192'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/4874995137553983192'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2026/09/decision-matrix-webapp-to-help-you-make.html' title='Decision Matrix Webapp to help you make Better Decisions'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8cV3o1IMeSTfedK7njduF6uC6uSDZYfxGF5D6j3h0P5hEsn8J2cB8fPiktJ_PqiSDBJq-JpPdtI3maJAL_Wxg_9pUEHx9PNb5ri1wXb_Dmtr8NEIvGeufyl71Vc4oFPxMBqdiuPUbakzhu90wTjO-p6thFEb2ReFrO9wHUIRzmUol71MyRPhYjMK_fRhn/s72-c/Cover%20Image.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-4764616909054677750</id><published>2026-09-22T20:26:16.369+05:00</published><updated>2026-09-22T20:39:42.260+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="analysis"/><category scheme="http://www.blogger.com/atom/ns#" term="app"/><category scheme="http://www.blogger.com/atom/ns#" term="image"/><category scheme="http://www.blogger.com/atom/ns#" term="R"/><category scheme="http://www.blogger.com/atom/ns#" term="shiny"/><category scheme="http://www.blogger.com/atom/ns#" term="statistics"/><title type='text'>Digital Image Analysis using R-Project-based EBImage, randomForest, DT, and bslib - A Web app (R-Project-Shiny-based)</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRIM1v-V9zh6q44bcDqQz0BS2vsLvplrInZmu-vZEbFT8wBLexmEsKvTFPfbD2AMCiyzgtiGIDXtZjtGF4lV5jEU88wbViyyJV_D8SlGtN4KMF69yAulw6JSTxRUz8rj-OkEP80oumkefGEQyjC4qOVCw0l1IJs0ebNwzwaVQLPFxeFKHVgxVZLAK0ZM9V/s1815/Image%20Analysis%20app%20cover.png&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;400&quot; data-original-height=&quot;807&quot; data-original-width=&quot;1815&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRIM1v-V9zh6q44bcDqQz0BS2vsLvplrInZmu-vZEbFT8wBLexmEsKvTFPfbD2AMCiyzgtiGIDXtZjtGF4lV5jEU88wbViyyJV_D8SlGtN4KMF69yAulw6JSTxRUz8rj-OkEP80oumkefGEQyjC4qOVCw0l1IJs0ebNwzwaVQLPFxeFKHVgxVZLAK0ZM9V/s400/Image%20Analysis%20app%20cover.png&quot;/&gt;&lt;/a&gt;&lt;/div&gt;


&lt;b&gt;This digital image analysis has been developed using R-Project (4.6.1), RStudio 2026.08.1 Build 195. It is made using packages, including shiny, EBImage, randomForest, DT, and bslib.&lt;/b&gt;

&lt;b&gt;NOTE: Try to remain SLOW with the change in metrics using sliders as it may take large time to process the image. If it takes long, allow it to settle and start working after sometime. KEEP THE IMAGE BELOW 500 x 500 pixels. &lt;/b&gt;

&lt;iframe src=&quot;https://usmanz.shinyapps.io/Image_Analysis/&quot; width=&quot;100%&quot; height=&quot;1200&quot;&gt;&lt;/iframe&gt;

&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEievZ5AGeliWMbrbyf4SAPpT8p7Clx6WGBAXFSNazuviAJIyjz3xQlEsJ_JCjLvMbZ_ULTscL9ELyLy8pOjmX6S35IXCsk89ikmz6yyQJId_rZKVzECdyPWJhimvKcp1BGb9Kqe-igx2ccA0YrbcsjcSipZ_jG5tM9wjUAEhVomiJS7g3UBNpqdhhuu8HRC/s1814/Image%20difference%20checking.png&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;400&quot; data-original-height=&quot;1387&quot; data-original-width=&quot;1814&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEievZ5AGeliWMbrbyf4SAPpT8p7Clx6WGBAXFSNazuviAJIyjz3xQlEsJ_JCjLvMbZ_ULTscL9ELyLy8pOjmX6S35IXCsk89ikmz6yyQJId_rZKVzECdyPWJhimvKcp1BGb9Kqe-igx2ccA0YrbcsjcSipZ_jG5tM9wjUAEhVomiJS7g3UBNpqdhhuu8HRC/s400/Image%20difference%20checking.png&quot;/&gt;&lt;/a&gt;&lt;/div&gt;

Powered by
Allaire, J., Sievert, C., Dervieux, C., Xie, Y., McPherson, J., Allen, A., Wickham, H., Atkins, A., &amp; Hyndman, R. (2024). bslib: Custom Bootstrap &#39;Sass&#39; Themes for &#39;shiny&#39; and &#39;rmarkdown&#39; (R package version 0.8.0) [Computer software]. https://CRAN.R-project.org/package=bslib
Breiman, L., Cutler, A., Liaw, A., &amp; Wiener, M. (2022). randomForest: Breiman and Cutler&#39;s Random Forests for Classification and Regression (R package version 4.7-1.1) [Computer software]. https://CRAN.R-project.org/package=randomForest
Chang, W., Cheng, J., Allaire, J., Sievert, C., Schloerke, B., Xie, Y., Allen, A., McPherson, J., Dipert, A., &amp; Borges, B. (2024). shiny: Web Application Framework for R (R package version 1.9.1) [Computer software]. https://CRAN.R-project.org/package=shiny
Pau, G., Fuchs, F., Sklyar, O., Boutros, M., &amp; Huber, W. (2010). EBImage—an R package for image processing with applications to cellular phenotypes. Bioinformatics, 26(7), 979–981. https://doi.org/10.1093/bioinformatics/btq046
Xie, Y., Cheng, J., &amp; Tan, X. (2024). DT: A Wrapper of the JavaScript Library &#39;DataTables&#39; (R package version 0.33) [Computer software]. https://CRAN.R-project.org/package=DT

Terms of Use and Disclaimer:
This tool is for educational purposes only. The author assumes no liability for inaccuracies or decisions made based on this output. No data is stored on our servers.
The Image Analysis Toolkit provided on this site is an open-source tool intended for exploratory image analysis. Users are encouraged to verify all results with primary software and experts before publication. The owner of JeePakistan.blogspot.com is not responsible for any research outcomes derived from this tool.

===========================
&lt;li&gt;NOTE: Uploaded on 22/09/2026&lt;/li&gt;</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/4764616909054677750/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/4764616909054677750' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/4764616909054677750'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/4764616909054677750'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2026/09/digital-image-analysis-using-r-project.html' title='Digital Image Analysis using R-Project-based EBImage, randomForest, DT, and bslib - A Web app (R-Project-Shiny-based)'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRIM1v-V9zh6q44bcDqQz0BS2vsLvplrInZmu-vZEbFT8wBLexmEsKvTFPfbD2AMCiyzgtiGIDXtZjtGF4lV5jEU88wbViyyJV_D8SlGtN4KMF69yAulw6JSTxRUz8rj-OkEP80oumkefGEQyjC4qOVCw0l1IJs0ebNwzwaVQLPFxeFKHVgxVZLAK0ZM9V/s72-c/Image%20Analysis%20app%20cover.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-8104065296019563244</id><published>2026-07-28T15:05:05.390+05:00</published><updated>2026-07-28T15:05:05.391+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="education"/><category scheme="http://www.blogger.com/atom/ns#" term="game"/><category scheme="http://www.blogger.com/atom/ns#" term="learning"/><category scheme="http://www.blogger.com/atom/ns#" term="psychology"/><title type='text'>Stroop Memory Test Challenge</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqpGUdj1O8eCl0W5n5k5PzWZBfuCgZH1uB0pr-xfM-SADJdgFs7LiWnYGMaZ8tL7Mv6HGKzYFo7OSfa-FL-Y7l6dMYtvZ-RzR_5RtP4KLGPmXuc9ceFiufgCDd15vpbsEgd3AIX9b6aFjM0kCno4cdFyTGsoI6HOCXFilBfhBBMSDwoaD7hexV8up3whvq/s801/Cover.png&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; height=&quot;400&quot; data-original-height=&quot;801&quot; data-original-width=&quot;743&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqpGUdj1O8eCl0W5n5k5PzWZBfuCgZH1uB0pr-xfM-SADJdgFs7LiWnYGMaZ8tL7Mv6HGKzYFo7OSfa-FL-Y7l6dMYtvZ-RzR_5RtP4KLGPmXuc9ceFiufgCDd15vpbsEgd3AIX9b6aFjM0kCno4cdFyTGsoI6HOCXFilBfhBBMSDwoaD7hexV8up3whvq/s400/Cover.png&quot;/&gt;&lt;/a&gt;&lt;/div&gt;

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Interactive Stroop Test - Measure Your Cognitive Control&lt;/title&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --color-red: #EF4444;
            --color-green: #22C55E;
            --color-yellow: #FBBF24;
            --color-blue: #3B82F6;
            --color-dark: #1F2937;
            --color-light: #F9FAFB;
            --color-border: #E5E7EB;
            --font-display: &#39;Segoe UI&#39;, Tahoma, Geneva, Verdana, sans-serif;
            --font-mono: &#39;Courier New&#39;, monospace;
            --spacing-sm: 8px;
            --spacing-md: 16px;
            --spacing-lg: 24px;
            --spacing-xl: 32px;
        }

        body {
            font-family: var(--font-display);
            background: linear-gradient(135deg, var(--color-light) 0%, #F3F4F6 100%);
            color: var(--color-dark);
            line-height: 1.6;
            min-height: 100vh;
            padding: var(--spacing-lg);
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
        }

        /* Header &amp; Introduction */
        .header {
            text-align: center;
            margin-bottom: var(--spacing-xl);
            animation: slideDown 0.6s ease-out;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: var(--spacing-md);
            background: linear-gradient(135deg, var(--color-blue), var(--color-red));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .intro-text {
            font-size: 1rem;
            color: #4B5563;
            max-width: 700px;
            margin: 0 auto var(--spacing-lg);
            line-height: 1.8;
            padding: var(--spacing-lg);
            background: white;
            border-left: 4px solid var(--color-blue);
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        /* Controls Section */
        .controls-section {
            background: white;
            padding: var(--spacing-lg);
            border-radius: 12px;
            margin-bottom: var(--spacing-lg);
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-lg);
        }

        @media (max-width: 600px) {
            .controls-section {
                grid-template-columns: 1fr;
            }
        }

        .control-group {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
        }

        .control-label {
            font-weight: 600;
            font-size: 0.95rem;
            color: var(--color-dark);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .speed-options {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-sm);
        }

        button {
            padding: var(--spacing-md) var(--spacing-lg);
            border: 2px solid var(--color-border);
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: var(--font-display);
            background: white;
            color: var(--color-dark);
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            border-color: var(--color-blue);
        }

        button.active {
            background: var(--color-blue);
            color: white;
            border-color: var(--color-blue);
        }

        .speed-options button.active {
            background: var(--color-blue);
            color: white;
            border-color: var(--color-blue);
        }

        .btn-start {
            background: linear-gradient(135deg, var(--color-blue), #2563EB);
            color: white;
            border: none;
            font-size: 1.1rem;
            padding: var(--spacing-lg) var(--spacing-xl);
            border-radius: 8px;
            font-weight: 700;
        }

        .btn-start:hover {
            background: linear-gradient(135deg, #2563EB, #1D4ED8);
        }

        .btn-start:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Storage Toggle */
        .storage-toggle {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            padding: var(--spacing-md);
            background: #EFF6FF;
            border-radius: 8px;
            margin-top: var(--spacing-md);
        }

        .toggle-switch {
            position: relative;
            width: 50px;
            height: 28px;
            background: var(--color-border);
            border-radius: 14px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .toggle-switch.active {
            background: var(--color-green);
        }

        .toggle-switch::after {
            content: &#39;&#39;;
            position: absolute;
            width: 24px;
            height: 24px;
            background: white;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: left 0.3s;
        }

        .toggle-switch.active::after {
            left: 24px;
        }

        .storage-text {
            font-size: 0.9rem;
            color: #4B5563;
        }

        /* Game Section */
        .game-section {
            background: white;
            padding: var(--spacing-lg);
            border-radius: 12px;
            margin-bottom: var(--spacing-lg);
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            text-align: center;
            min-height: 400px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .game-content {
            display: none;
        }

        .game-content.active {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xl);
            width: 100%;
        }

        .game-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-lg);
            padding: var(--spacing-md);
            background: #F3F4F6;
            border-radius: 8px;
        }

        .game-stats {
            font-family: var(--font-mono);
            font-weight: 600;
            color: var(--color-dark);
        }

        .game-timer {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-red);
        }

        .game-word {
            font-size: 4rem;
            font-weight: 700;
            letter-spacing: 2px;
            margin: var(--spacing-xl) 0;
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            word-break: break-word;
        }

        .game-instruction {
            font-size: 1.1rem;
            color: #6B7280;
            margin-bottom: var(--spacing-lg);
            font-weight: 500;
        }

        .color-buttons {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--spacing-md);
            margin-top: var(--spacing-lg);
            max-width: 400px;
            margin-left: auto;
            margin-right: auto;
        }

        .color-btn {
            padding: var(--spacing-lg);
            font-size: 1rem;
            font-weight: 700;
            border: 3px solid;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .color-btn-red {
            background: var(--color-red);
            border-color: var(--color-red);
            color: white;
        }

        .color-btn-green {
            background: var(--color-green);
            border-color: var(--color-green);
            color: white;
        }

        .color-btn-yellow {
            background: var(--color-yellow);
            border-color: var(--color-yellow);
            color: var(--color-dark);
        }

        .color-btn-blue {
            background: var(--color-blue);
            border-color: var(--color-blue);
            color: white;
        }

        .color-btn:hover {
            transform: scale(1.05);
        }

        .color-btn:active {
            transform: scale(0.98);
        }

        .initial-message {
            font-size: 1.2rem;
            color: #6B7280;
            padding: var(--spacing-xl);
        }

        /* Results Section */
        .results-section {
            background: white;
            padding: var(--spacing-lg);
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .results-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: var(--spacing-lg);
            color: var(--color-dark);
        }

        .results-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--spacing-lg);
            margin-bottom: var(--spacing-xl);
        }

        .result-card {
            background: linear-gradient(135deg, #F3F4F6, #FFFFFF);
            padding: var(--spacing-lg);
            border-radius: 8px;
            border: 2px solid var(--color-border);
            text-align: center;
        }

        .result-label {
            font-size: 0.85rem;
            color: #6B7280;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: var(--spacing-sm);
            font-weight: 600;
        }

        .result-value {
            font-size: 2rem;
            font-weight: 700;
            font-family: var(--font-mono);
            color: var(--color-blue);
        }

        .result-value.accuracy {
            color: var(--color-green);
        }

        .result-value.speed {
            color: var(--color-red);
        }

        /* History Section */
        .history-section {
            margin-top: var(--spacing-xl);
            padding-top: var(--spacing-xl);
            border-top: 2px solid var(--color-border);
        }

        .history-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: var(--spacing-lg);
            color: var(--color-dark);
        }

        .history-table {
            width: 100%;
            border-collapse: collapse;
            font-family: var(--font-mono);
            font-size: 0.95rem;
        }

        .history-table thead {
            background: #F3F4F6;
        }

        .history-table th {
            padding: var(--spacing-md);
            text-align: left;
            font-weight: 600;
            color: var(--color-dark);
            border-bottom: 2px solid var(--color-border);
        }

        .history-table td {
            padding: var(--spacing-md);
            border-bottom: 1px solid var(--color-border);
        }

        .history-table tbody tr:hover {
            background: #F9FAFB;
        }

        .no-history {
            text-align: center;
            padding: var(--spacing-lg);
            color: #9CA3AF;
            font-style: italic;
        }



        @media (max-width: 600px) {
            h1 {
                font-size: 1.8rem;
            }

            .game-word {
                font-size: 2.5rem;
            }

            .color-buttons {
                grid-template-columns: 1fr;
            }

            .results-grid {
                grid-template-columns: 1fr;
            }

            .share-buttons {
                flex-direction: column;
            }
        }

        .hidden {
            display: none !important;
        }

        /* Accessibility */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        :focus-visible {
            outline: 3px solid var(--color-blue);
            outline-offset: 2px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;!-- Header &amp; Introduction --&gt;
        &lt;div class=&quot;header&quot;&gt;
            &lt;h1&gt;Stroop Test Challenge&lt;/h1&gt;
            &lt;div class=&quot;intro-text&quot;&gt;
                &lt;p&gt;The Stroop effect is a classic cognitive psychology phenomenon where the time it takes to name the color of a word is longer when the color of the text conflicts with the meaning of the word. For example, the word &quot;RED&quot; printed in blue ink requires more mental effort to identify correctly than a word printed in a matching color.&lt;/p&gt;
                &lt;p style=&quot;margin-top: var(--spacing-md);&quot;&gt;Test your cognitive control and reaction time. When you see a color word on the screen, ignore what the word says and click the button that matches the COLOR of the text itself. Good luck!&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- Controls Section --&gt;
        &lt;div class=&quot;controls-section&quot;&gt;
            &lt;div class=&quot;control-group&quot;&gt;
                &lt;label class=&quot;control-label&quot;&gt;⚡ Select Speed&lt;/label&gt;
                &lt;div class=&quot;speed-options&quot;&gt;
                    &lt;button class=&quot;speed-btn&quot; data-speed=&quot;1500&quot; data-label=&quot;Fast&quot;&gt;Fast (1.5s)&lt;/button&gt;
                    &lt;button class=&quot;speed-btn active&quot; data-speed=&quot;2000&quot; data-label=&quot;Normal&quot;&gt;Normal (2s)&lt;/button&gt;
                    &lt;button class=&quot;speed-btn&quot; data-speed=&quot;2500&quot; data-label=&quot;Relaxed&quot;&gt;Relaxed (2.5s)&lt;/button&gt;
                    &lt;button class=&quot;speed-btn&quot; data-speed=&quot;3000&quot; data-label=&quot;Easy&quot;&gt;Easy (3s)&lt;/button&gt;
                &lt;/div&gt;
                &lt;div class=&quot;storage-toggle&quot;&gt;
                    &lt;div class=&quot;toggle-switch active&quot; id=&quot;storageToggle&quot;&gt;&lt;/div&gt;
                    &lt;span class=&quot;storage-text&quot;&gt;Save results to device&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;control-group&quot;&gt;
                &lt;label class=&quot;control-label&quot;&gt;🎮 Start Game&lt;/label&gt;
                &lt;button class=&quot;btn-start&quot; id=&quot;startBtn&quot;&gt;Start Test&lt;/button&gt;
                &lt;p style=&quot;font-size: 0.85rem; color: #6B7280; margin-top: var(--spacing-md);&quot;&gt;Select your preferred speed above, then click Start to begin. Answer 10 questions!&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- Game Section --&gt;
        &lt;div class=&quot;game-section&quot; id=&quot;gameSection&quot;&gt;
            &lt;div class=&quot;initial-message&quot;&gt;👇 Click &quot;Start Test&quot; to begin&lt;/div&gt;
            
            &lt;div class=&quot;game-content&quot; id=&quot;gameContent&quot;&gt;
                &lt;div class=&quot;game-header&quot;&gt;
                    &lt;div class=&quot;game-stats&quot;&gt;
                        Question: &lt;span id=&quot;questionCount&quot;&gt;0&lt;/span&gt;/10
                    &lt;/div&gt;
                    &lt;div class=&quot;game-stats&quot;&gt;
                        Score: &lt;span id=&quot;scoreDisplay&quot;&gt;0&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;game-timer&quot; id=&quot;gameTimer&quot;&gt;2.0s&lt;/div&gt;
                &lt;/div&gt;

                &lt;div class=&quot;game-instruction&quot; id=&quot;gameInstruction&quot;&gt;
                    Click the color button that matches the TEXT COLOR, not the word!
                &lt;/div&gt;

                &lt;div class=&quot;game-word&quot; id=&quot;gameWord&quot;&gt;BLUE&lt;/div&gt;

                &lt;div class=&quot;color-buttons&quot;&gt;
                    &lt;button class=&quot;color-btn color-btn-red&quot; data-color=&quot;red&quot;&gt;Red&lt;/button&gt;
                    &lt;button class=&quot;color-btn color-btn-green&quot; data-color=&quot;green&quot;&gt;Green&lt;/button&gt;
                    &lt;button class=&quot;color-btn color-btn-yellow&quot; data-color=&quot;yellow&quot;&gt;Yellow&lt;/button&gt;
                    &lt;button class=&quot;color-btn color-btn-blue&quot; data-color=&quot;blue&quot;&gt;Blue&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- Results Section --&gt;
        &lt;div class=&quot;results-section&quot; id=&quot;resultsSection&quot; style=&quot;display: none;&quot;&gt;
            &lt;div class=&quot;results-title&quot;&gt;📊 Your Results&lt;/div&gt;
            
            &lt;div class=&quot;results-grid&quot; id=&quot;resultsGrid&quot;&gt;
                &lt;div class=&quot;result-card&quot;&gt;
                    &lt;div class=&quot;result-label&quot;&gt;Score&lt;/div&gt;
                    &lt;div class=&quot;result-value&quot; id=&quot;finalScore&quot;&gt;0&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;result-card&quot;&gt;
                    &lt;div class=&quot;result-label&quot;&gt;Accuracy&lt;/div&gt;
                    &lt;div class=&quot;result-value accuracy&quot; id=&quot;finalAccuracy&quot;&gt;0%&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;result-card&quot;&gt;
                    &lt;div class=&quot;result-label&quot;&gt;Avg. Reaction Time&lt;/div&gt;
                    &lt;div class=&quot;result-value speed&quot; id=&quot;finalAvgTime&quot;&gt;0ms&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;result-card&quot;&gt;
                    &lt;div class=&quot;result-label&quot;&gt;Best Time&lt;/div&gt;
                    &lt;div class=&quot;result-value speed&quot; id=&quot;finalBestTime&quot;&gt;0ms&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;!-- History Section --&gt;
            &lt;div class=&quot;history-section&quot; id=&quot;historySection&quot; style=&quot;display: none;&quot;&gt;
                &lt;div class=&quot;history-title&quot;&gt;📈 Your History&lt;/div&gt;
                &lt;table class=&quot;history-table&quot;&gt;
                    &lt;thead&gt;
                        &lt;tr&gt;
                            &lt;th&gt;Date&lt;/th&gt;
                            &lt;th&gt;Speed&lt;/th&gt;
                            &lt;th&gt;Score&lt;/th&gt;
                            &lt;th&gt;Accuracy&lt;/th&gt;
                            &lt;th&gt;Avg Time&lt;/th&gt;
                        &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody id=&quot;historyBody&quot;&gt;
                        &lt;tr&gt;&lt;td colspan=&quot;5&quot; class=&quot;no-history&quot;&gt;No saved results yet&lt;/td&gt;&lt;/tr&gt;
                    &lt;/tbody&gt;
                &lt;/table&gt;
            &lt;/div&gt;


        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // Game State
        const gameState = {
            isRunning: false,
            currentQuestion: 0,
            score: 0,
            responses: [],
            selectedSpeed: 2000,
            speedLabel: &#39;Normal&#39;,
            shouldSave: true,
            startTime: null,
            timerInterval: null,
            timeRemaining: null
        };

        // Color words and their actual display colors
        const colorWords = [&#39;RED&#39;, &#39;GREEN&#39;, &#39;YELLOW&#39;, &#39;BLUE&#39;];
        const colorValues = {
            red: &#39;#EF4444&#39;,
            green: &#39;#22C55E&#39;,
            yellow: &#39;#FBBF24&#39;,
            blue: &#39;#3B82F6&#39;
        };

        // DOM Elements
        const startBtn = document.getElementById(&#39;startBtn&#39;);
        const gameSection = document.getElementById(&#39;gameSection&#39;);
        const gameContent = document.getElementById(&#39;gameContent&#39;);
        const gameWord = document.getElementById(&#39;gameWord&#39;);
        const gameTimer = document.getElementById(&#39;gameTimer&#39;);
        const questionCount = document.getElementById(&#39;questionCount&#39;);
        const scoreDisplay = document.getElementById(&#39;scoreDisplay&#39;);
        const colorButtons = document.querySelectorAll(&#39;.color-btn&#39;);
        const speedButtons = document.querySelectorAll(&#39;.speed-btn&#39;);
        const storageToggle = document.getElementById(&#39;storageToggle&#39;);
        const resultsSection = document.getElementById(&#39;resultsSection&#39;);
        const historySection = document.getElementById(&#39;historySection&#39;);
        const historyBody = document.getElementById(&#39;historyBody&#39;);

        // Event Listeners
        startBtn.addEventListener(&#39;click&#39;, startGame);
        speedButtons.forEach(btn =&gt; {
            btn.addEventListener(&#39;click&#39;, function() {
                speedButtons.forEach(b =&gt; b.classList.remove(&#39;active&#39;));
                this.classList.add(&#39;active&#39;);
                gameState.selectedSpeed = parseInt(this.dataset.speed);
                gameState.speedLabel = this.dataset.label;
            });
        });

        storageToggle.addEventListener(&#39;click&#39;, function() {
            this.classList.toggle(&#39;active&#39;);
            gameState.shouldSave = this.classList.contains(&#39;active&#39;);
        });

        colorButtons.forEach(btn =&gt; {
            btn.addEventListener(&#39;click&#39;, function() {
                if (gameState.isRunning) {
                    handleAnswer(this.dataset.color);
                }
            });
        });



        function startGame() {
            gameState.isRunning = true;
            gameState.currentQuestion = 0;
            gameState.score = 0;
            gameState.responses = [];
            gameState.startTime = Date.now();
            
            resultsSection.style.display = &#39;none&#39;;
            gameContent.classList.add(&#39;active&#39;);
            document.querySelector(&#39;.initial-message&#39;).style.display = &#39;none&#39;;
            
            speedButtons.forEach(btn =&gt; btn.disabled = true);
            startBtn.disabled = true;
            
            nextQuestion();
        }

        function getRandomQuestion() {
            const correctWord = colorWords[Math.floor(Math.random() * colorWords.length)];
            const displayColor = Object.keys(colorValues)[Math.floor(Math.random() * 4)];
            
            return {
                word: correctWord,
                color: displayColor,
                correctAnswer: displayColor
            };
        }

        function nextQuestion() {
            if (gameState.currentQuestion &gt;= 10) {
                endGame();
                return;
            }

            gameState.currentQuestion++;
            const question = getRandomQuestion();
            
            gameWord.textContent = question.word;
            gameWord.style.color = colorValues[question.color];
            
            questionCount.textContent = gameState.currentQuestion;
            gameState.currentQuestion += -1; // Reset for proper counting
            gameState.currentQuestion += 1;
            
            // Start timer
            gameState.timeRemaining = gameState.selectedSpeed;
            updateTimer();
            gameState.timerInterval = setInterval(() =&gt; {
                gameState.timeRemaining -= 100;
                updateTimer();
                if (gameState.timeRemaining &lt;= 0) {
                    handleAnswer(null, question);
                }
            }, 100);

            gameState.currentQuestion -= 1; // Store for reference
            gameState.currentQuestion = parseInt(questionCount.textContent);
        }

        function updateTimer() {
            const seconds = (gameState.timeRemaining / 1000).toFixed(1);
            gameTimer.textContent = Math.max(0, seconds) + &#39;s&#39;;
        }

        function handleAnswer(selectedColor, question) {
            clearInterval(gameState.timerInterval);
            
            const questionIndex = gameState.currentQuestion - 1;
            const currentQuestion = getRandomQuestion();
            
            // Get current displayed question details
            const displayedWord = gameWord.textContent;
            const displayedColor = window.getComputedStyle(gameWord).color;
            
            // Determine actual color from RGB
            let actualColor = &#39;unknown&#39;;
            if (displayedColor.includes(&#39;239, 68, 68&#39;)) actualColor = &#39;red&#39;;
            else if (displayedColor.includes(&#39;34, 197, 94&#39;)) actualColor = &#39;green&#39;;
            else if (displayedColor.includes(&#39;251, 191, 36&#39;)) actualColor = &#39;yellow&#39;;
            else if (displayedColor.includes(&#39;59, 130, 246&#39;)) actualColor = &#39;blue&#39;;

            const isCorrect = selectedColor === actualColor;
            if (isCorrect) gameState.score++;

            gameState.responses.push({
                word: displayedWord,
                color: actualColor,
                selected: selectedColor,
                correct: isCorrect,
                reactionTime: gameState.selectedSpeed - gameState.timeRemaining
            });

            scoreDisplay.textContent = gameState.score;
            
            setTimeout(nextQuestion, 500);
        }

        function endGame() {
            gameState.isRunning = false;
            clearInterval(gameState.timerInterval);
            gameContent.classList.remove(&#39;active&#39;);
            document.querySelector(&#39;.initial-message&#39;).style.display = &#39;block&#39;;
            document.querySelector(&#39;.initial-message&#39;).textContent = &#39;✅ Test Complete! Check your results below.&#39;;
            
            speedButtons.forEach(btn =&gt; btn.disabled = false);
            startBtn.disabled = false;
            startBtn.textContent = &#39;Restart Test&#39;;

            // Calculate statistics
            const accuracy = (gameState.score / 10) * 100;
            const avgTime = gameState.responses.reduce((sum, r) =&gt; sum + r.reactionTime, 0) / 10;
            const bestTime = Math.min(...gameState.responses.map(r =&gt; r.reactionTime));

            // Display results
            document.getElementById(&#39;finalScore&#39;).textContent = gameState.score;
            document.getElementById(&#39;finalAccuracy&#39;).textContent = accuracy.toFixed(0) + &#39;%&#39;;
            document.getElementById(&#39;finalAvgTime&#39;).textContent = avgTime.toFixed(0) + &#39;ms&#39;;
            document.getElementById(&#39;finalBestTime&#39;).textContent = bestTime.toFixed(0) + &#39;ms&#39;;

            // Save results
            if (gameState.shouldSave) {
                saveResult({
                    date: new Date().toLocaleString(),
                    speed: gameState.speedLabel,
                    score: gameState.score,
                    accuracy: accuracy.toFixed(0),
                    avgTime: avgTime.toFixed(0)
                });
            }

            // Update history
            updateHistory();

            resultsSection.style.display = &#39;block&#39;;
            resultsSection.scrollIntoView({ behavior: &#39;smooth&#39;, block: &#39;start&#39; });
        }

        function saveResult(result) {
            let history = JSON.parse(localStorage.getItem(&#39;stroopResults&#39;) || &#39;[]&#39;);
            history.push(result);
            localStorage.setItem(&#39;stroopResults&#39;, JSON.stringify(history));
        }

        function updateHistory() {
            const history = JSON.parse(localStorage.getItem(&#39;stroopResults&#39;) || &#39;[]&#39;);
            
            if (history.length &gt; 0) {
                historySection.style.display = &#39;block&#39;;
                historyBody.innerHTML = history.map(result =&gt; `
                    &lt;tr&gt;
                        &lt;td&gt;${result.date}&lt;/td&gt;
                        &lt;td&gt;${result.speed}&lt;/td&gt;
                        &lt;td&gt;${result.score}/10&lt;/td&gt;
                        &lt;td&gt;${result.accuracy}%&lt;/td&gt;
                        &lt;td&gt;${result.avgTime}ms&lt;/td&gt;
                    &lt;/tr&gt;
                `).join(&#39;&#39;);
            }
        }



        // Initialize
        updateHistory();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/8104065296019563244/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/8104065296019563244' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/8104065296019563244'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/8104065296019563244'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2026/07/stroop-memory-test-challenge.html' title='Stroop Memory Test Challenge'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqpGUdj1O8eCl0W5n5k5PzWZBfuCgZH1uB0pr-xfM-SADJdgFs7LiWnYGMaZ8tL7Mv6HGKzYFo7OSfa-FL-Y7l6dMYtvZ-RzR_5RtP4KLGPmXuc9ceFiufgCDd15vpbsEgd3AIX9b6aFjM0kCno4cdFyTGsoI6HOCXFilBfhBBMSDwoaD7hexV8up3whvq/s72-c/Cover.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-2672727155854482509</id><published>2026-07-24T09:06:09.041+05:00</published><updated>2026-07-24T09:06:09.042+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="decision making"/><category scheme="http://www.blogger.com/atom/ns#" term="education"/><category scheme="http://www.blogger.com/atom/ns#" term="leadership"/><category scheme="http://www.blogger.com/atom/ns#" term="learning"/><category scheme="http://www.blogger.com/atom/ns#" term="psychology"/><title type='text'>A mini game for Crisis Command, and leadership and decision-making trainer</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEc34dZsetWvmHntM8A3kvXeztZSerTLJzzrjSoOL2VRaJXGyFOWlEjZwzHFdwa9mKL7OrfTtZyK7f6uD6y-o8y3gnrggUwA7c82bFW7A3X9-sSlxO90Scp-X5LBgQKwqW2Ffjut5qlRlFDiyyTgs7W5WGsaNkZqshL94HIn30FRYI4Uxv3XjKHMbbRMDv/s857/Cover.png&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;400&quot; data-original-height=&quot;674&quot; data-original-width=&quot;857&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEc34dZsetWvmHntM8A3kvXeztZSerTLJzzrjSoOL2VRaJXGyFOWlEjZwzHFdwa9mKL7OrfTtZyK7f6uD6y-o8y3gnrggUwA7c82bFW7A3X9-sSlxO90Scp-X5LBgQKwqW2Ffjut5qlRlFDiyyTgs7W5WGsaNkZqshL94HIn30FRYI4Uxv3XjKHMbbRMDv/s400/Cover.png&quot;/&gt;&lt;/a&gt;&lt;/div&gt;

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;title&gt;Crisis Command — Leadership Simulator&lt;/title&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;&gt;
&lt;link href=&quot;https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&amp;family=IBM+Plex+Mono:wght@400;500;600&amp;family=Inter:wght@400;500;600&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
&lt;style&gt;
  :root{
    --bg:#0b0f14;
    --panel:#131a22;
    --panel-2:#0f151c;
    --border:#26323d;
    --text:#e7edf1;
    --text-dim:#7f8f9c;
    --alert:#e0483e;
    --amber:#f2a83c;
    --teal:#49c9a0;
    --grid:rgba(255,255,255,0.04);
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:radial-gradient(ellipse at top, #0e141b 0%, #070a0d 70%);
    color:var(--text);
    font-family:&#39;Inter&#39;,sans-serif;
    padding:28px 16px 60px;
  }
  .app{max-width:920px;margin:0 auto;}
  .eyebrow{
    font-family:&#39;IBM Plex Mono&#39;,monospace;
    letter-spacing:.18em;
    font-size:11px;
    color:var(--amber);
    text-transform:uppercase;
  }
  h1{
    font-family:&#39;Oswald&#39;,sans-serif;
    font-weight:700;
    font-size:clamp(28px,5vw,42px);
    margin:6px 0 4px;
    letter-spacing:.01em;
  }
  .subhead{color:var(--text-dim);font-size:14.5px;max-width:640px;line-height:1.5;margin-bottom:22px;}

  .briefing{
    background:var(--panel);
    border:1px solid var(--border);
    border-left:3px solid var(--amber);
    border-radius:4px;
    padding:18px 20px;
    margin-bottom:20px;
  }
  .briefing h2{
    font-family:&#39;Oswald&#39;,sans-serif;
    font-size:13px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--amber);
    margin:0 0 10px;
  }
  .briefing ol{margin:0;padding-left:20px;color:#c7d0d6;font-size:14px;line-height:1.7;}
  .briefing ol li b{color:var(--text);}

  .setup{
    display:flex;flex-wrap:wrap;gap:14px;
    background:var(--panel-2);
    border:1px solid var(--border);
    border-radius:4px;
    padding:16px 18px;
    margin-bottom:20px;
    align-items:flex-end;
  }
  .field{display:flex;flex-direction:column;gap:6px;min-width:190px;flex:1;}
  .field label{
    font-family:&#39;IBM Plex Mono&#39;,monospace;
    font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);
  }
  select{
    background:#0c1319;
    border:1px solid var(--border);
    color:var(--text);
    padding:9px 10px;
    border-radius:3px;
    font-family:&#39;Inter&#39;,sans-serif;
    font-size:13.5px;
  }
  .startbtn{
    background:var(--alert);
    color:#fff;
    border:none;
    font-family:&#39;Oswald&#39;,sans-serif;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    font-size:14px;
    padding:11px 22px;
    border-radius:3px;
    cursor:pointer;
    transition:filter .15s ease, transform .15s ease;
  }
  .startbtn:hover{filter:brightness(1.12);}
  .startbtn:active{transform:scale(.97);}
  .startbtn:disabled{background:#3a2f2c;cursor:not-allowed;filter:none;}

  .game-wrap{
    position:relative;
    border:1px solid var(--border);
    border-radius:4px;
    overflow:hidden;
    background:var(--panel-2);
  }
  canvas{display:block;width:100%;height:auto;}

  .overlay{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    padding:24px;
    background:rgba(6,9,12,.72);
    backdrop-filter:blur(2px);
  }
  .overlay.hidden{display:none;}
  .card{
    background:var(--panel);
    border:1px solid var(--border);
    border-top:3px solid var(--alert);
    border-radius:5px;
    max-width:520px;
    width:100%;
    padding:20px 22px;
  }
  .card .tag{
    font-family:&#39;IBM Plex Mono&#39;,monospace;
    font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--alert);
    display:flex;justify-content:space-between;
  }
  .card h3{
    font-family:&#39;Oswald&#39;,sans-serif;
    font-size:20px;margin:8px 0 8px;
  }
  .card p.situation{font-size:14px;color:#c7d0d6;line-height:1.55;margin:0 0 16px;}
  .choices{display:flex;flex-direction:column;gap:8px;}
  .choice-btn{
    text-align:left;
    background:#0f161d;
    border:1px solid var(--border);
    color:var(--text);
    padding:11px 13px;
    border-radius:3px;
    font-size:13.5px;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
    font-family:&#39;Inter&#39;,sans-serif;
  }
  .choice-btn:hover{border-color:var(--amber);background:#151d25;}
  .choice-btn .letter{
    font-family:&#39;IBM Plex Mono&#39;,monospace;
    color:var(--amber);margin-right:8px;
  }
  .endcard h3{color:var(--teal);}
  .endcard .score-big{
    font-family:&#39;Oswald&#39;,sans-serif;font-size:44px;color:var(--teal);margin:4px 0;
  }

  .stats-panel{
    margin-top:22px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:4px;
    padding:18px 20px;
  }
  .stats-panel h2{
    font-family:&#39;Oswald&#39;,sans-serif;
    font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);
    margin:0 0 14px;
  }
  .stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
    gap:14px;
    margin-bottom:16px;
  }
  .stat{
    background:var(--panel-2);
    border:1px solid var(--border);
    border-radius:3px;
    padding:10px 12px;
  }
  .stat .k{font-family:&#39;IBM Plex Mono&#39;,monospace;font-size:10px;letter-spacing:.08em;color:var(--text-dim);text-transform:uppercase;}
  .stat .v{font-family:&#39;Oswald&#39;,sans-serif;font-size:22px;margin-top:2px;}
  .log{
    font-family:&#39;IBM Plex Mono&#39;,monospace;
    font-size:12px;
    max-height:170px;
    overflow-y:auto;
    border-top:1px solid var(--border);
    padding-top:10px;
  }
  .log-row{display:flex;gap:10px;padding:4px 0;color:#aebac4;border-bottom:1px dashed rgba(255,255,255,.05);}
  .log-row .lt{color:var(--text-dim);min-width:52px;}
  .log-row.good{color:var(--teal);}
  .log-row.bad{color:var(--alert);}
  .log-row.neutral{color:var(--amber);}
  .log::-webkit-scrollbar{width:6px;}
  .log::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;app&quot;&gt;

  &lt;div class=&quot;eyebrow&quot;&gt;Leadership &amp;amp; Decision-Making Trainer&lt;/div&gt;
  &lt;h1&gt;Crisis Command&lt;/h1&gt;
  &lt;p class=&quot;subhead&quot;&gt;A scenario-based simulator for practicing crisis response, conflict resolution and leadership judgment under time pressure. Every decision trades off between public trust, resources and team morale — exactly like the real thing.&lt;/p&gt;

  &lt;div class=&quot;briefing&quot;&gt;
    &lt;h2&gt;How to play&lt;/h2&gt;
    &lt;ol&gt;
      &lt;li&gt;&lt;b&gt;Pick a role and difficulty&lt;/b&gt; below, then hit &quot;Begin Simulation.&quot;&lt;/li&gt;
      &lt;li&gt;Crises arrive one at a time. Read the &lt;b&gt;situation report&lt;/b&gt; and choose one of the response options before the countdown ring closes.&lt;/li&gt;
      &lt;li&gt;Each choice shifts three meters — &lt;b&gt;Public Trust&lt;/b&gt;, &lt;b&gt;Resources&lt;/b&gt;, &lt;b&gt;Team Morale&lt;/b&gt; — shown live on the dashboard. There&#39;s rarely a free option: strengthening one often costs another.&lt;/li&gt;
      &lt;li&gt;Letting the timer run out counts as indecision and always costs you — in a real crisis, no decision is still a decision.&lt;/li&gt;
      &lt;li&gt;Survive all rounds with your meters above zero to complete the simulation. Your &lt;b&gt;Leadership Score&lt;/b&gt; and decision log are tallied below the game as you play.&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/div&gt;

  &lt;div class=&quot;setup&quot;&gt;
    &lt;div class=&quot;field&quot;&gt;
      &lt;label for=&quot;roleSelect&quot;&gt;Role&lt;/label&gt;
      &lt;select id=&quot;roleSelect&quot;&gt;
        &lt;option value=&quot;emergency&quot;&gt;Emergency Manager&lt;/option&gt;
        &lt;option value=&quot;ceo&quot;&gt;Corporate CEO&lt;/option&gt;
        &lt;option value=&quot;mayor&quot;&gt;City Mayor&lt;/option&gt;
        &lt;option value=&quot;military&quot;&gt;Field Commander&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class=&quot;field&quot;&gt;
      &lt;label for=&quot;diffSelect&quot;&gt;Difficulty&lt;/label&gt;
      &lt;select id=&quot;diffSelect&quot;&gt;
        &lt;option value=&quot;trainee&quot;&gt;Trainee (25s / gentle swings)&lt;/option&gt;
        &lt;option value=&quot;manager&quot; selected&gt;Manager (15s / standard)&lt;/option&gt;
        &lt;option value=&quot;director&quot;&gt;Director (8s / high stakes)&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class=&quot;field&quot;&gt;
      &lt;label for=&quot;roundsSelect&quot;&gt;Session length&lt;/label&gt;
      &lt;select id=&quot;roundsSelect&quot;&gt;
        &lt;option value=&quot;6&quot;&gt;Short — 6 crises&lt;/option&gt;
        &lt;option value=&quot;8&quot; selected&gt;Standard — 8 crises&lt;/option&gt;
        &lt;option value=&quot;10&quot;&gt;Extended — 10 crises&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;button class=&quot;startbtn&quot; id=&quot;startBtn&quot;&gt;Begin Simulation&lt;/button&gt;
  &lt;/div&gt;

  &lt;div class=&quot;game-wrap&quot; id=&quot;gameWrap&quot;&gt;
    &lt;canvas id=&quot;board&quot; width=&quot;900&quot; height=&quot;440&quot;&gt;&lt;/canvas&gt;
    &lt;div class=&quot;overlay&quot; id=&quot;overlay&quot;&gt;
      &lt;div class=&quot;card&quot;&gt;
        &lt;div class=&quot;tag&quot;&gt;&lt;span&gt;Standing by&lt;/span&gt;&lt;span&gt;—&lt;/span&gt;&lt;/div&gt;
        &lt;h3&gt;Awaiting deployment&lt;/h3&gt;
        &lt;p class=&quot;situation&quot;&gt;Configure your role and difficulty above, then begin the simulation to receive your first situation report.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class=&quot;stats-panel&quot;&gt;
    &lt;h2&gt;Performance Statistics&lt;/h2&gt;
    &lt;div class=&quot;stats-grid&quot;&gt;
      &lt;div class=&quot;stat&quot;&gt;&lt;div class=&quot;k&quot;&gt;Leadership Score&lt;/div&gt;&lt;div class=&quot;v&quot; id=&quot;statScore&quot;&gt;0&lt;/div&gt;&lt;/div&gt;
      &lt;div class=&quot;stat&quot;&gt;&lt;div class=&quot;k&quot;&gt;Decisions Made&lt;/div&gt;&lt;div class=&quot;v&quot; id=&quot;statDecisions&quot;&gt;0&lt;/div&gt;&lt;/div&gt;
      &lt;div class=&quot;stat&quot;&gt;&lt;div class=&quot;k&quot;&gt;Avg Response Time&lt;/div&gt;&lt;div class=&quot;v&quot; id=&quot;statAvgTime&quot;&gt;0.0s&lt;/div&gt;&lt;/div&gt;
      &lt;div class=&quot;stat&quot;&gt;&lt;div class=&quot;k&quot;&gt;Crises Resolved&lt;/div&gt;&lt;div class=&quot;v&quot; id=&quot;statResolved&quot;&gt;0 / 0&lt;/div&gt;&lt;/div&gt;
      &lt;div class=&quot;stat&quot;&gt;&lt;div class=&quot;k&quot;&gt;Sound Decisions&lt;/div&gt;&lt;div class=&quot;v&quot; id=&quot;statGoodPct&quot;&gt;0%&lt;/div&gt;&lt;/div&gt;
      &lt;div class=&quot;stat&quot;&gt;&lt;div class=&quot;k&quot;&gt;Timeouts&lt;/div&gt;&lt;div class=&quot;v&quot; id=&quot;statTimeouts&quot;&gt;0&lt;/div&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;log&quot; id=&quot;log&quot;&gt;
      &lt;div class=&quot;log-row&quot;&gt;&lt;span class=&quot;lt&quot;&gt;--:--&lt;/span&gt;&lt;span&gt;Decision log will appear here once the simulation begins.&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

&lt;/div&gt;

&lt;script&gt;
(function(){
  const canvas = document.getElementById(&#39;board&#39;);
  const ctx = canvas.getContext(&#39;2d&#39;);
  const overlay = document.getElementById(&#39;overlay&#39;);
  const startBtn = document.getElementById(&#39;startBtn&#39;);
  const roleSelect = document.getElementById(&#39;roleSelect&#39;);
  const diffSelect = document.getElementById(&#39;diffSelect&#39;);
  const roundsSelect = document.getElementById(&#39;roundsSelect&#39;);
  const logEl = document.getElementById(&#39;log&#39;);

  const statScore = document.getElementById(&#39;statScore&#39;);
  const statDecisions = document.getElementById(&#39;statDecisions&#39;);
  const statAvgTime = document.getElementById(&#39;statAvgTime&#39;);
  const statResolved = document.getElementById(&#39;statResolved&#39;);
  const statGoodPct = document.getElementById(&#39;statGoodPct&#39;);
  const statTimeouts = document.getElementById(&#39;statTimeouts&#39;);

  const DIFF = {
    trainee:  { time:25, mult:0.75, label:&#39;Trainee&#39;  },
    manager:  { time:15, mult:1.0,  label:&#39;Manager&#39;  },
    director: { time:8,  mult:1.35, label:&#39;Director&#39; }
  };
  const ROLE_LABEL = {
    emergency:&#39;Emergency Manager&#39;, ceo:&#39;Corporate CEO&#39;, mayor:&#39;City Mayor&#39;, military:&#39;Field Commander&#39;
  };

  // Scenario bank. deltas are applied to {trust, resources, morale} at base scale,
  // then multiplied by difficulty. tag used for outcome coloring/log + scoring weight.
  const SCENARIOS = [
    { roles:[&#39;emergency&#39;,&#39;mayor&#39;], title:&#39;Flash Flood Warning&#39;, situation:&#39;A flash flood watch has escalated to a warning for the low-lying district. Shelters are only half-staffed.&#39;,
      options:[
        {label:&#39;Order immediate mandatory evacuation&#39;, trust:8, resources:-14, morale:-4, tag:&#39;good&#39;},
        {label:&#39;Issue a voluntary evacuation advisory&#39;, trust:-2, resources:-4, morale:4, tag:&#39;neutral&#39;},
        {label:&#39;Wait for updated forecast before acting&#39;, trust:-12, resources:6, morale:-2, tag:&#39;bad&#39;}
      ]},
    { roles:[&#39;ceo&#39;,&#39;mayor&#39;], title:&#39;Data Breach Disclosure&#39;, situation:&#39;Engineers confirm a breach exposed customer records two weeks ago. Legal wants more time before going public.&#39;,
      options:[
        {label:&#39;Disclose immediately with full details&#39;, trust:10, resources:-10, morale:2, tag:&#39;good&#39;},
        {label:&#39;Disclose but delay technical specifics&#39;, trust:-1, resources:-3, morale:1, tag:&#39;neutral&#39;},
        {label:&#39;Wait for legal review before any statement&#39;, trust:-16, resources:4, morale:-5, tag:&#39;bad&#39;}
      ]},
    { roles:[&#39;emergency&#39;,&#39;military&#39;], title:&#39;Supply Convoy Ambush Risk&#39;, situation:&#39;Intelligence suggests the only supply route is compromised. Field teams are running low on medical stock.&#39;,
      options:[
        {label:&#39;Reroute convoy, accept 6hr delay&#39;, trust:2, resources:-6, morale:6, tag:&#39;good&#39;},
        {label:&#39;Send convoy with reinforced escort&#39;, trust:4, resources:-14, morale:-2, tag:&#39;neutral&#39;},
        {label:&#39;Proceed on schedule, unchanged&#39;, trust:-6, resources:2, morale:-14, tag:&#39;bad&#39;}
      ]},
    { roles:[&#39;ceo&#39;], title:&#39;Factory Line Conflict&#39;, situation:&#39;Two department leads are in open conflict over blame for a missed shipment deadline, and it is affecting the floor.&#39;,
      options:[
        {label:&#39;Mediate a joint session immediately&#39;, trust:4, resources:-4, morale:12, tag:&#39;good&#39;},
        {label:&#39;Have HR handle it independently&#39;, trust:1, resources:-1, morale:2, tag:&#39;neutral&#39;},
        {label:&#39;Let them resolve it themselves&#39;, trust:-3, resources:0, morale:-13, tag:&#39;bad&#39;}
      ]},
    { roles:[&#39;mayor&#39;,&#39;ceo&#39;,&#39;emergency&#39;], title:&#39;Press Ambush&#39;, situation:&#39;A reporter confronts you on-camera with an unverified rumor about the crisis, demanding an answer right now.&#39;,
      options:[
        {label:&#39;State only what is confirmed so far&#39;, trust:9, resources:-1, morale:1, tag:&#39;good&#39;},
        {label:&#39;Decline comment, promise a briefing later&#39;, trust:-4, resources:1, morale:0, tag:&#39;neutral&#39;},
        {label:&#39;Deny the rumor outright without checking&#39;, trust:-15, resources:0, morale:-3, tag:&#39;bad&#39;}
      ]},
    { roles:[&#39;military&#39;,&#39;emergency&#39;], title:&#39;Casualty Triage Bottleneck&#39;, situation:&#39;Incoming injured exceed on-site medical capacity by threefold. A decision on triage protocol is needed now.&#39;,
      options:[
        {label:&#39;Activate mutual-aid field hospital plan&#39;, trust:6, resources:-16, morale:8, tag:&#39;good&#39;},
        {label:&#39;Prioritize by severity with current staff&#39;, trust:0, resources:-4, morale:-4, tag:&#39;neutral&#39;},
        {label:&#39;Delay non-critical cases indefinitely&#39;, trust:-14, resources:6, morale:-10, tag:&#39;bad&#39;}
      ]},
    { roles:[&#39;ceo&#39;,&#39;mayor&#39;], title:&#39;Budget Shortfall Mid-Crisis&#39;, situation:&#39;The emergency response fund is projected to run out in 48 hours, well before the crisis resolves.&#39;,
      options:[
        {label:&#39;Reallocate from a lower-priority program&#39;, trust:3, resources:10, morale:-2, tag:&#39;good&#39;},
        {label:&#39;Request emergency external funding&#39;, trust:5, resources:-2, morale:3, tag:&#39;neutral&#39;},
        {label:&#39;Cut response operations to conserve funds&#39;, trust:-10, resources:14, morale:-12, tag:&#39;bad&#39;}
      ]},
    { roles:[&#39;ceo&#39;,&#39;military&#39;,&#39;emergency&#39;,&#39;mayor&#39;], title:&#39;Team on the Verge of Burnout&#39;, situation:&#39;Your core response team has been working 20-hour shifts for four days straight. Fatigue-driven mistakes are starting to show.&#39;,
      options:[
        {label:&#39;Rotate in a rested backup team now&#39;, trust:0, resources:-8, morale:16, tag:&#39;good&#39;},
        {label:&#39;Mandate shorter shifts going forward&#39;, trust:1, resources:-3, morale:8, tag:&#39;neutral&#39;},
        {label:&#39;Push through, the crisis comes first&#39;, trust:-2, resources:4, morale:-18, tag:&#39;bad&#39;}
      ]},
    { roles:[&#39;military&#39;], title:&#39;Conflicting Orders From Command&#39;, situation:&#39;Two directives from different levels of command contradict each other, and the unit needs direction immediately.&#39;,
      options:[
        {label:&#39;Follow the order that protects your people&#39;, trust:5, resources:-2, morale:10, tag:&#39;good&#39;},
        {label:&#39;Escalate for clarification, hold position&#39;, trust:-6, resources:0, morale:-2, tag:&#39;neutral&#39;},
        {label:&#39;Follow the higher-ranked order blindly&#39;, trust:2, resources:-4, morale:-8, tag:&#39;bad&#39;}
      ]},
    { roles:[&#39;mayor&#39;,&#39;emergency&#39;], title:&#39;Rumor-Driven Panic Buying&#39;, situation:&#39;Unverified social media posts have triggered panic buying of fuel and water across the city.&#39;,
      options:[
        {label:&#39;Issue a calm, fact-based public statement&#39;, trust:9, resources:2, morale:3, tag:&#39;good&#39;},
        {label:&#39;Increase supply visibility at stores&#39;, trust:2, resources:-8, morale:1, tag:&#39;neutral&#39;},
        {label:&#39;Ignore it, it will pass on its own&#39;, trust:-13, resources:-4, morale:-3, tag:&#39;bad&#39;}
      ]},
    { roles:[&#39;ceo&#39;], title:&#39;Whistleblower Comes Forward&#39;, situation:&#39;An employee has reported safety violations to you directly before going to regulators.&#39;,
      options:[
        {label:&#39;Launch an internal investigation today&#39;, trust:8, resources:-6, morale:9, tag:&#39;good&#39;},
        {label:&#39;Quietly review the claim first&#39;, trust:-2, resources:-1, morale:1, tag:&#39;neutral&#39;},
        {label:&#39;Dismiss the claim to avoid disruption&#39;, trust:-18, resources:2, morale:-16, tag:&#39;bad&#39;}
      ]},
    { roles:[&#39;emergency&#39;,&#39;military&#39;,&#39;mayor&#39;], title:&#39;Evacuation Route Failure&#39;, situation:&#39;The primary evacuation route has just been blocked by debris, mid-evacuation.&#39;,
      options:[
        {label:&#39;Redirect via secondary route immediately&#39;, trust:6, resources:-6, morale:4, tag:&#39;good&#39;},
        {label:&#39;Pause evacuation to clear the blockage&#39;, trust:-3, resources:-2, morale:-2, tag:&#39;neutral&#39;},
        {label:&#39;Continue directing people to blocked route&#39;, trust:-17, resources:0, morale:-9, tag:&#39;bad&#39;}
      ]}
  ];

  let state = null;

  function log(msg, cls){
    const row = document.createElement(&#39;div&#39;);
    row.className = &#39;log-row &#39; + (cls||&#39;&#39;);
    const t = new Date();
    const ts = String(t.getMinutes()).padStart(2,&#39;0&#39;)+&#39;:&#39;+String(t.getSeconds()).padStart(2,&#39;0&#39;);
    row.innerHTML = &#39;&lt;span class=&quot;lt&quot;&gt;&#39;+ts+&#39;&lt;/span&gt;&lt;span&gt;&#39;+msg+&#39;&lt;/span&gt;&#39;;
    logEl.prepend(row);
  }

  function clamp(v){ return Math.max(0, Math.min(100, v)); }

  function pickScenarios(role, count){
    const pool = SCENARIOS.filter(s =&gt; s.roles.includes(role));
    const shuffled = pool.slice().sort(()=&gt;Math.random()-0.5);
    const picks = [];
    for(let i=0;i&lt;count;i++){
      picks.push(shuffled[i % shuffled.length]);
    }
    return picks;
  }

  function startGame(){
    const role = roleSelect.value;
    const diffKey = diffSelect.value;
    const diff = DIFF[diffKey];
    const rounds = parseInt(roundsSelect.value,10);

    state = {
      role, diffKey, diff, rounds,
      round:0,
      trust:60, resources:60, morale:60,
      queue: pickScenarios(role, rounds),
      timeLeft: diff.time,
      timerId: null,
      roundStart: null,
      decisions:0, timeouts:0, goodCount:0, totalRT:0,
      history:[],
      over:false
    };

    logEl.innerHTML = &#39;&#39;;
    log(&#39;Simulation started — role: &#39;+ROLE_LABEL[role]+&#39;, difficulty: &#39;+diff.label+&#39;.&#39;, &#39;neutral&#39;);
    startBtn.disabled = true;
    startBtn.textContent = &#39;Simulation in progress…&#39;;
    updateStatsUI();
    nextRound();
    requestAnimationFrame(draw);
  }

  function nextRound(){
    if(state.round &gt;= state.rounds){
      endGame();
      return;
    }
    const scenario = state.queue[state.round];
    state.current = scenario;
    state.timeLeft = state.diff.time;
    state.roundStart = performance.now();
    renderCard(scenario);
    clearInterval(state.timerId);
    state.timerId = setInterval(tick, 100);
  }

  function tick(){
    state.timeLeft -= 0.1;
    if(state.timeLeft &lt;= 0){
      state.timeLeft = 0;
      clearInterval(state.timerId);
      handleTimeout();
    }
  }

  function handleTimeout(){
    state.timeouts++;
    state.decisions++;
    // indecision penalty
    state.trust = clamp(state.trust - 6*state.diff.mult);
    state.resources = clamp(state.resources - 4*state.diff.mult);
    state.morale = clamp(state.morale - 8*state.diff.mult);
    state.history.push({title:state.current.title, choice:&#39;No decision (timed out)&#39;, tag:&#39;bad&#39;, rt:state.diff.time});
    log(&#39;&lt;b&gt;&#39;+state.current.title+&#39;&lt;/b&gt; — no decision made in time.&#39;, &#39;bad&#39;);
    state.round++;
    checkGameOver();
  }

  function applyChoice(opt, rt){
    state.decisions++;
    state.totalRT += rt;
    if(opt.tag === &#39;good&#39;) state.goodCount++;
    state.trust = clamp(state.trust + opt.trust*state.diff.mult);
    state.resources = clamp(state.resources + opt.resources*state.diff.mult);
    state.morale = clamp(state.morale + opt.morale*state.diff.mult);
    state.history.push({title:state.current.title, choice:opt.label, tag:opt.tag, rt});
    log(&#39;&lt;b&gt;&#39;+state.current.title+&#39;&lt;/b&gt; — chose: &quot;&#39;+opt.label+&#39;&quot;&#39;, opt.tag);
    state.round++;
    checkGameOver();
  }

  function checkGameOver(){
    updateStatsUI();
    if(state.trust&lt;=0 || state.resources&lt;=0 || state.morale&lt;=0){
      endGame(true);
      return;
    }
    nextRound();
  }

  function renderCard(scenario){
    overlay.classList.remove(&#39;hidden&#39;);
    const optsHtml = scenario.options.map((o,i)=&gt;
      &#39;&lt;button class=&quot;choice-btn&quot; data-i=&quot;&#39;+i+&#39;&quot;&gt;&lt;span class=&quot;letter&quot;&gt;&#39;+String.fromCharCode(65+i)+&#39;.&lt;/span&gt;&#39;+o.label+&#39;&lt;/button&gt;&#39;
    ).join(&#39;&#39;);
    overlay.innerHTML =
      &#39;&lt;div class=&quot;card&quot;&gt;&#39;+
        &#39;&lt;div class=&quot;tag&quot;&gt;&lt;span&gt;Situation Report &#39;+(state.round+1)+&#39; / &#39;+state.rounds+&#39;&lt;/span&gt;&lt;span&gt;&#39;+ROLE_LABEL[state.role]+&#39;&lt;/span&gt;&lt;/div&gt;&#39;+
        &#39;&lt;h3&gt;&#39;+scenario.title+&#39;&lt;/h3&gt;&#39;+
        &#39;&lt;p class=&quot;situation&quot;&gt;&#39;+scenario.situation+&#39;&lt;/p&gt;&#39;+
        &#39;&lt;div class=&quot;choices&quot;&gt;&#39;+optsHtml+&#39;&lt;/div&gt;&#39;+
      &#39;&lt;/div&gt;&#39;;
    overlay.querySelectorAll(&#39;.choice-btn&#39;).forEach(btn=&gt;{
      btn.addEventListener(&#39;click&#39;, ()=&gt;{
        clearInterval(state.timerId);
        const rt = (performance.now() - state.roundStart)/1000;
        const opt = scenario.options[parseInt(btn.dataset.i,10)];
        applyChoice(opt, rt);
      });
    });
  }

  function endGame(collapsed){
    clearInterval(state.timerId);
    state.over = true;
    const avgMeter = (state.trust+state.resources+state.morale)/3;
    const speedBonus = state.decisions&gt;0 ? Math.max(0, (state.diff.time - (state.totalRT/Math.max(1,state.decisions-state.timeouts))) * 2) : 0;
    const score = Math.round(avgMeter*6 + speedBonus - state.timeouts*20);
    statScore.textContent = Math.max(0,score);

    overlay.classList.remove(&#39;hidden&#39;);
    overlay.innerHTML =
      &#39;&lt;div class=&quot;card endcard&quot;&gt;&#39;+
        &#39;&lt;div class=&quot;tag&quot;&gt;&lt;span&gt;Simulation complete&lt;/span&gt;&lt;span&gt;&#39;+ROLE_LABEL[state.role]+&#39;&lt;/span&gt;&lt;/div&gt;&#39;+
        &#39;&lt;h3&gt;&#39;+(collapsed ? &#39;Crisis Escalated Beyond Control&#39; : &#39;Session Debrief&#39;)+&#39;&lt;/h3&gt;&#39;+
        &#39;&lt;div class=&quot;score-big&quot;&gt;&#39;+Math.max(0,score)+&#39;&lt;/div&gt;&#39;+
        &#39;&lt;p class=&quot;situation&quot;&gt;&#39;+(collapsed
          ? &#39;One of your core metrics hit zero before the crisis was resolved. Review the decision log below for where things turned.&#39;
          : &#39;You held the line for all &#39;+state.rounds+&#39; situation reports. Final standing — Trust &#39;+Math.round(state.trust)+&#39;, Resources &#39;+Math.round(state.resources)+&#39;, Morale &#39;+Math.round(state.morale)+&#39;.&#39;)+
        &#39;&lt;/p&gt;&#39;+
        &#39;&lt;div class=&quot;choices&quot;&gt;&lt;button class=&quot;choice-btn&quot; id=&quot;restartBtn&quot;&gt;&lt;span class=&quot;letter&quot;&gt;↻&lt;/span&gt;Run another simulation&lt;/button&gt;&lt;/div&gt;&#39;+
      &#39;&lt;/div&gt;&#39;;
    document.getElementById(&#39;restartBtn&#39;).addEventListener(&#39;click&#39;, resetToSetup);
    log(&#39;Simulation ended. Final leadership score: &#39;+Math.max(0,score)+&#39;.&#39;, collapsed?&#39;bad&#39;:&#39;good&#39;);
  }

  function resetToSetup(){
    startBtn.disabled = false;
    startBtn.textContent = &#39;Begin Simulation&#39;;
    overlay.innerHTML =
      &#39;&lt;div class=&quot;card&quot;&gt;&lt;div class=&quot;tag&quot;&gt;&lt;span&gt;Standing by&lt;/span&gt;&lt;span&gt;—&lt;/span&gt;&lt;/div&gt;&#39;+
      &#39;&lt;h3&gt;Awaiting deployment&lt;/h3&gt;&#39;+
      &#39;&lt;p class=&quot;situation&quot;&gt;Configure your role and difficulty above, then begin the simulation to receive your first situation report.&lt;/p&gt;&lt;/div&gt;&#39;;
  }

  function updateStatsUI(){
    if(!state) return;
    statDecisions.textContent = state.decisions;
    const nonTimeout = state.decisions - state.timeouts;
    statAvgTime.textContent = nonTimeout&gt;0 ? (state.totalRT/nonTimeout).toFixed(1)+&#39;s&#39; : &#39;0.0s&#39;;
    statResolved.textContent = Math.min(state.round,state.rounds)+&#39; / &#39;+state.rounds;
    statGoodPct.textContent = state.decisions&gt;0 ? Math.round((state.goodCount/state.decisions)*100)+&#39;%&#39; : &#39;0%&#39;;
    statTimeouts.textContent = state.timeouts;
    if(!state.over){
      const avgMeter = (state.trust+state.resources+state.morale)/3;
      statScore.textContent = Math.round(avgMeter*6);
    }
  }

  // ---- Canvas rendering: dashboard with gauges, timer ring, timeline ----
  function resizeCanvas(){
    const ratio = window.devicePixelRatio || 1;
    const w = canvas.clientWidth;
    const h = 440;
    canvas.width = w*ratio;
    canvas.height = h*ratio;
    ctx.setTransform(ratio,0,0,ratio,0,0);
  }
  window.addEventListener(&#39;resize&#39;, ()=&gt;{ resizeCanvas(); });

  function drawGauge(cx, cy, r, pct, color, label, value){
    const start = -Math.PI/2;
    const end = start + Math.PI*2*(pct/100);
    ctx.save();
    ctx.lineWidth = 12;
    ctx.strokeStyle = &#39;rgba(255,255,255,0.06)&#39;;
    ctx.beginPath(); ctx.arc(cx,cy,r,0,Math.PI*2); ctx.stroke();
    ctx.strokeStyle = color;
    ctx.lineCap = &#39;round&#39;;
    ctx.beginPath(); ctx.arc(cx,cy,r,start,end); ctx.stroke();
    ctx.fillStyle = &#39;#e7edf1&#39;;
    ctx.font = &#39;600 22px Oswald, sans-serif&#39;;
    ctx.textAlign = &#39;center&#39;;
    ctx.fillText(Math.round(value), cx, cy+8);
    ctx.font = &#39;500 11px &quot;IBM Plex Mono&quot;, monospace&#39;;
    ctx.fillStyle = &#39;#7f8f9c&#39;;
    ctx.fillText(label.toUpperCase(), cx, cy+r+22);
    ctx.restore();
  }

  function draw(){
    const w = canvas.clientWidth, h = 440;
    ctx.clearRect(0,0,w,h);
    // background scanline grid
    ctx.fillStyle = &#39;#0f151c&#39;;
    ctx.fillRect(0,0,w,h);
    ctx.strokeStyle = &#39;rgba(255,255,255,0.035)&#39;;
    ctx.lineWidth = 1;
    for(let x=0;x&lt;w;x+=28){ ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,h); ctx.stroke(); }
    for(let y=0;y&lt;h;y+=28){ ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(w,y); ctx.stroke(); }

    // header strip
    ctx.fillStyle = &#39;#8a97a3&#39;;
    ctx.font = &#39;500 11px &quot;IBM Plex Mono&quot;, monospace&#39;;
    ctx.textAlign = &#39;left&#39;;
    ctx.fillText(&#39;CRISIS COMMAND DASHBOARD&#39;, 20, 26);
    ctx.textAlign = &#39;right&#39;;
    ctx.fillText(state ? (&#39;ROUND &#39;+Math.min(state.round+1,state.rounds)+&#39; / &#39;+state.rounds) : &#39;STANDBY&#39;, w-20, 26);

    if(state){
      // meters
      const gy = 130;
      drawGauge(w*0.22, gy, 58, state.trust, &#39;#49c9a0&#39;, &#39;Public Trust&#39;, state.trust);
      drawGauge(w*0.5, gy, 58, state.resources, &#39;#f2a83c&#39;, &#39;Resources&#39;, state.resources);
      drawGauge(w*0.78, gy, 58, state.morale, &#39;#e0483e&#39; , &#39;Team Morale&#39;, state.morale);

      // timer ring bottom-left area replaced by linear countdown bar
      if(!state.over){
        const pct = Math.max(0, state.timeLeft/state.diff.time);
        const barW = w-40;
        ctx.fillStyle = &#39;rgba(255,255,255,0.06)&#39;;
        ctx.fillRect(20, 230, barW, 10);
        ctx.fillStyle = pct&gt;0.4 ? &#39;#49c9a0&#39; : (pct&gt;0.15 ? &#39;#f2a83c&#39; : &#39;#e0483e&#39;);
        ctx.fillRect(20, 230, barW*pct, 10);
        ctx.fillStyle = &#39;#7f8f9c&#39;;
        ctx.font = &#39;500 10.5px &quot;IBM Plex Mono&quot;, monospace&#39;;
        ctx.textAlign = &#39;left&#39;;
        ctx.fillText(&#39;RESPONSE WINDOW: &#39;+state.timeLeft.toFixed(1)+&#39;s&#39;, 20, 224);
      }

      // decision timeline
      ctx.textAlign = &#39;left&#39;;
      ctx.fillStyle = &#39;#7f8f9c&#39;;
      ctx.fillText(&#39;DECISION TIMELINE&#39;, 20, 266);
      const startX = 20, ty = 290, spacing = Math.min(70,(w-40)/state.rounds);
      for(let i=0;i&lt;state.rounds;i++){
        const hEntry = state.history[i];
        ctx.beginPath();
        ctx.arc(startX+i*spacing+10, ty, 9, 0, Math.PI*2);
        ctx.fillStyle = !hEntry ? &#39;rgba(255,255,255,0.08)&#39; :
          hEntry.tag===&#39;good&#39; ? &#39;#49c9a0&#39; : hEntry.tag===&#39;bad&#39; ? &#39;#e0483e&#39; : &#39;#f2a83c&#39;;
        ctx.fill();
        ctx.strokeStyle = &#39;#26323d&#39;; ctx.lineWidth=1; ctx.stroke();
        ctx.fillStyle = &#39;#4d5960&#39;;
        ctx.font = &#39;500 10px &quot;IBM Plex Mono&quot;, monospace&#39;;
        ctx.textAlign = &#39;center&#39;;
        ctx.fillText(String(i+1), startX+i*spacing+10, ty+24);
        ctx.textAlign = &#39;left&#39;;
      }

      // scenario title strip
      if(state.current &amp;&amp; !state.over){
        ctx.fillStyle = &#39;#e7edf1&#39;;
        ctx.font = &#39;600 15px Oswald, sans-serif&#39;;
        ctx.textAlign = &#39;center&#39;;
        ctx.fillText(&#39;INCOMING: &#39;+state.current.title.toUpperCase(), w/2, 360);
      }

      // role/difficulty footer
      ctx.textAlign = &#39;left&#39;;
      ctx.fillStyle = &#39;#4d5960&#39;;
      ctx.font = &#39;500 10.5px &quot;IBM Plex Mono&quot;, monospace&#39;;
      ctx.fillText(&#39;ROLE: &#39;+ROLE_LABEL[state.role].toUpperCase()+&#39;   |   DIFFICULTY: &#39;+state.diff.label.toUpperCase(), 20, 410);
    } else {
      ctx.textAlign = &#39;center&#39;;
      ctx.fillStyle = &#39;#4d5960&#39;;
      ctx.font = &#39;500 13px &quot;IBM Plex Mono&quot;, monospace&#39;;
      ctx.fillText(&#39;Configure a role and difficulty, then begin the simulation.&#39;, w/2, h/2);
    }

    requestAnimationFrame(draw);
  }

  resizeCanvas();
  draw();
  startBtn.addEventListener(&#39;click&#39;, startGame);
})();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/2672727155854482509/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/2672727155854482509' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/2672727155854482509'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/2672727155854482509'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2026/07/a-mini-game-for-crisis-command-and.html' title='A mini game for Crisis Command, and leadership and decision-making trainer'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEc34dZsetWvmHntM8A3kvXeztZSerTLJzzrjSoOL2VRaJXGyFOWlEjZwzHFdwa9mKL7OrfTtZyK7f6uD6y-o8y3gnrggUwA7c82bFW7A3X9-sSlxO90Scp-X5LBgQKwqW2Ffjut5qlRlFDiyyTgs7W5WGsaNkZqshL94HIn30FRYI4Uxv3XjKHMbbRMDv/s72-c/Cover.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-2417723319822975504</id><published>2026-07-24T08:21:46.010+05:00</published><updated>2026-07-24T08:21:46.011+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="education"/><category scheme="http://www.blogger.com/atom/ns#" term="learning"/><category scheme="http://www.blogger.com/atom/ns#" term="memory"/><category scheme="http://www.blogger.com/atom/ns#" term="psychology"/><title type='text'>Letter Span Memory Test and Game</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVuA1CvyYoZU9doeLVa3RGw0ubsgjSi8i89st1lL35cW8ded2CRyFzF90sZ_oUj6SiC07I-QB7qbdkNUw-pKR7okdsQIycoJ4j1CMUG0bu-N8htauu7G6Gdp79kKxLXinlTf7NNAKouj1PpH2mXnAOxB_qMStLLlSu2YbWhojfyWcQ7JQKQjCdfw59d5nA/s889/Cover.png&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;400&quot; data-original-height=&quot;676&quot; data-original-width=&quot;889&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVuA1CvyYoZU9doeLVa3RGw0ubsgjSi8i89st1lL35cW8ded2CRyFzF90sZ_oUj6SiC07I-QB7qbdkNUw-pKR7okdsQIycoJ4j1CMUG0bu-N8htauu7G6Gdp79kKxLXinlTf7NNAKouj1PpH2mXnAOxB_qMStLLlSu2YbWhojfyWcQ7JQKQjCdfw59d5nA/s400/Cover.png&quot;/&gt;&lt;/a&gt;&lt;/div&gt;

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;title&gt;Letter Span — a working memory test&lt;/title&gt;
&lt;style&gt;
  :root{
    --paper: #F6F4EE;
    --paper-line: #DAD4C4;
    --ink: #21231F;
    --ink-soft: #5B5B52;
    --teal: #2B6E68;
    --teal-deep: #1B4B47;
    --amber: #B5772E;
    --stage-bg: #14181A;
    --stage-letter: #F2EDE1;
    --good: #2B6E68;
    --bad: #A23E3E;
    --card: #FFFFFF;
    --radius: 10px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      linear-gradient(var(--paper-line) 1px, transparent 1px) 0 0/100% 28px,
      var(--paper);
    color:var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Helvetica, Arial, sans-serif;
    line-height:1.55;
    padding: 32px 20px 80px;
  }
  .wrap{max-width: 760px; margin: 0 auto;}

  /* ---- Header / intro ---- */
  .eyebrow{
    font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--teal-deep); font-weight:700; margin-bottom:6px;
  }
  h1{
    font-family: Georgia, &quot;Times New Roman&quot;, serif;
    font-size: 40px; margin: 0 0 12px; letter-spacing:-0.01em;
    color:var(--ink);
  }
  .intro{
    background:var(--card);
    border:1px solid var(--paper-line);
    border-radius:var(--radius);
    padding:20px 24px;
    margin-bottom: 28px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  }
  .intro p{margin:0 0 10px; color:var(--ink-soft); font-size:15px;}
  .intro p:last-child{margin-bottom:0;}
  .intro b{color:var(--ink); font-weight:600;}

  section.panel{
    background:var(--card);
    border:1px solid var(--paper-line);
    border-radius:var(--radius);
    padding:22px 24px;
    margin-bottom:22px;
  }
  h2{
    font-family: Georgia, serif;
    font-size:20px; margin:0 0 16px; color:var(--ink);
    display:flex; align-items:center; gap:10px;
  }
  h2 .num{
    font-family: &quot;SF Mono&quot;, &quot;Courier New&quot;, monospace;
    font-size:12px; color:var(--ink-soft);
    border:1px solid var(--paper-line); border-radius:20px;
    padding:2px 8px;
  }

  /* ---- Settings grid ---- */
  .settings-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:20px;
  }
  @media (max-width:560px){ .settings-grid{grid-template-columns:1fr;} }
  .field label.field-label{
    display:block; font-size:13px; font-weight:600; color:var(--ink);
    margin-bottom:8px;
  }
  .field .help{font-size:12px; color:var(--ink-soft); margin-top:6px;}

  .segmented{
    display:flex; border:1px solid var(--paper-line); border-radius:8px; overflow:hidden;
  }
  .segmented button{
    flex:1; border:none; background:var(--card); color:var(--ink-soft);
    padding:9px 6px; font-size:13px; cursor:pointer; font-family:inherit;
    border-right:1px solid var(--paper-line);
    transition: background .15s, color .15s;
  }
  .segmented button:last-child{border-right:none;}
  .segmented button.active{ background:var(--teal); color:#fff; font-weight:600; }
  .segmented button:disabled{cursor:not-allowed; opacity:.55;}

  .stepper{ display:flex; align-items:center; gap:10px; }
  .stepper button{
    width:34px; height:34px; border-radius:8px; border:1px solid var(--paper-line);
    background:var(--card); font-size:16px; cursor:pointer; color:var(--ink);
  }
  .stepper button:disabled{opacity:.4; cursor:not-allowed;}
  .stepper .value{
    font-family:&quot;SF Mono&quot;,&quot;Courier New&quot;,monospace; font-size:18px; font-weight:700;
    width:36px; text-align:center;
  }

  .toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .switch{
    position:relative; width:46px; height:26px; border-radius:999px;
    background:#D7D2C4; cursor:pointer; flex-shrink:0; transition: background .15s;
  }
  .switch.on{ background:var(--teal); }
  .switch .knob{
    position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
    background:#fff; transition: left .15s; box-shadow:0 1px 2px rgba(0,0,0,.25);
  }
  .switch.on .knob{ left:23px; }
  .excl-letters{
    font-family:&quot;SF Mono&quot;,&quot;Courier New&quot;,monospace; font-size:12px; color:var(--ink-soft);
    margin-top:6px; letter-spacing:.08em;
  }

  .begin-btn{
    width:100%; margin-top:22px; padding:14px; border:none; border-radius:8px;
    background:var(--ink); color:#fff; font-size:15px; font-weight:600; cursor:pointer;
    font-family:inherit;
  }
  .begin-btn:hover{ background:var(--teal-deep); }
  .begin-btn:disabled{ background:#B9B6AC; cursor:not-allowed; }

  /* ---- Stage ---- */
  .stage{
    background:var(--stage-bg);
    border-radius:var(--radius);
    min-height:220px;
    display:flex; align-items:center; justify-content:center;
    position:relative;
    overflow:hidden;
  }
  .stage-letter{
    font-family:&quot;SF Mono&quot;,&quot;Courier New&quot;,monospace;
    font-size:96px; font-weight:700; color:var(--stage-letter);
    letter-spacing:0.03em;
  }
  .stage-msg{
    color:#9AA39E; font-size:15px; text-align:center; padding:0 20px;
    font-family:-apple-system, sans-serif;
  }
  .stage-msg .big{ font-size:22px; color:var(--stage-letter); display:block; margin-bottom:6px; font-family:Georgia,serif; }
  .rung-progress{
    position:absolute; top:14px; left:18px; right:18px;
    display:flex; gap:4px;
  }
  .rung-progress .seg{ height:4px; flex:1; background:#2A302E; border-radius:2px; }
  .rung-progress .seg.on{ background:var(--stage-letter); }

  .stage-controls{ margin-top:18px; display:flex; gap:12px; flex-wrap:wrap; }
  .stage-controls button{
    padding:11px 20px; border-radius:8px; font-size:14px; cursor:pointer; font-family:inherit; font-weight:600;
  }
  .btn-primary{ background:var(--teal); color:#fff; border:none; }
  .btn-primary:hover{ background:var(--teal-deep); }
  .btn-ghost{ background:transparent; border:1px solid var(--paper-line); color:var(--ink); }
  .btn-ghost:hover{ background:var(--paper); }

  .answer-row{ display:flex; gap:10px; margin-top:16px; }
  .answer-row input{
    flex:1; padding:12px 14px; font-size:20px; letter-spacing:.15em;
    font-family:&quot;SF Mono&quot;,&quot;Courier New&quot;,monospace; text-transform:uppercase;
    border:1px solid var(--paper-line); border-radius:8px; background:#fff; color:var(--ink);
  }
  .answer-row input:focus{ outline:2px solid var(--teal); outline-offset:1px; }

  .feedback{ margin-top:14px; padding:12px 14px; border-radius:8px; font-size:14px; display:none; }
  .feedback.show{ display:block; }
  .feedback.good{ background:rgba(43,110,104,0.1); color:var(--teal-deep); }
  .feedback.bad{ background:rgba(162,62,62,0.09); color:var(--bad); }
  .feedback b{ font-family:&quot;SF Mono&quot;,&quot;Courier New&quot;,monospace; }

  /* ---- Stats ---- */
  .stat-grid{
    display:grid; grid-template-columns: repeat(4,1fr); gap:14px; margin-bottom:20px;
  }
  @media (max-width:560px){ .stat-grid{ grid-template-columns: repeat(2,1fr);} }
  .stat-card{
    border:1px solid var(--paper-line); border-radius:8px; padding:14px;
    text-align:center;
  }
  .stat-card .n{ font-family:Georgia,serif; font-size:30px; color:var(--ink); }
  .stat-card .l{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-top:4px; }

  .ladder-title{ font-size:13px; font-weight:600; color:var(--ink); margin: 6px 0 10px;}
  .ladder{ display:flex; flex-direction:column-reverse; gap:6px; margin-bottom:22px; }
  .rung{ display:flex; align-items:center; gap:10px; }
  .rung .len{
    width:26px; font-family:&quot;SF Mono&quot;,monospace; font-size:12px; color:var(--ink-soft); text-align:right;
  }
  .rung .bar{
    flex:1; height:20px; border-radius:4px; background:var(--paper-line); position:relative; overflow:hidden;
  }
  .rung .bar .fill{ position:absolute; inset:0; }
  .rung .bar.pass .fill{ background:var(--good); }
  .rung .bar.fail .fill{ background:var(--bad); }
  .rung .bar.pending .fill{ background:transparent; }
  .rung .bar.current{ box-shadow: inset 0 0 0 2px var(--amber); }

  table.history{ width:100%; border-collapse:collapse; font-size:13px; }
  table.history th, table.history td{
    text-align:left; padding:8px 10px; border-bottom:1px solid var(--paper-line);
  }
  table.history th{ color:var(--ink-soft); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
  table.history tr:last-child td{ border-bottom:none; }
  .empty-row td{ color:var(--ink-soft); font-style:italic; text-align:center; padding:18px; }

  .reset-link{
    background:none; border:none; color:var(--ink-soft); font-size:12px; text-decoration:underline;
    cursor:pointer; font-family:inherit; padding:0; margin-top:10px;
  }

  .keyline{ color:var(--ink-soft); font-size:12px; margin-top:10px; }
  kbd{
    font-family:&quot;SF Mono&quot;,monospace; background:var(--paper); border:1px solid var(--paper-line);
    border-radius:4px; padding:1px 6px; font-size:11px;
  }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;wrap&quot;&gt;

  &lt;div class=&quot;eyebrow&quot;&gt;Cognitive Span Test&lt;/div&gt;
  &lt;h1&gt;Letter Span&lt;/h1&gt;

  &lt;div class=&quot;intro&quot;&gt;
    &lt;p&gt;&lt;b&gt;What this measures.&lt;/b&gt; Letter span is a classic test of short‑term (working) memory. You&#39;ll see a string of letters flash one at a time, then have to type them back. Get it right and the string grows by one letter; get it wrong and the session ends, recording the longest string you handled — your &lt;b&gt;span&lt;/b&gt;.&lt;/p&gt;
    &lt;p&gt;&lt;b&gt;Forward vs. backward.&lt;/b&gt; Forward span asks for the letters in the order you saw them. Backward span asks for them in reverse order, which leans harder on manipulating information in your head, not just holding it — most people score noticeably lower on it.&lt;/p&gt;
    &lt;p&gt;Set your options below, then press &lt;b&gt;Begin Session&lt;/b&gt;. Your results and history are kept at the bottom of the page.&lt;/p&gt;
  &lt;/div&gt;

  &lt;!-- SETTINGS --&gt;
  &lt;section class=&quot;panel&quot; id=&quot;settingsPanel&quot;&gt;
    &lt;h2&gt;&lt;span class=&quot;num&quot;&gt;1&lt;/span&gt;Settings&lt;/h2&gt;
    &lt;div class=&quot;settings-grid&quot;&gt;

      &lt;div class=&quot;field&quot;&gt;
        &lt;label class=&quot;field-label&quot;&gt;Mode&lt;/label&gt;
        &lt;div class=&quot;segmented&quot; id=&quot;modeSeg&quot;&gt;
          &lt;button data-val=&quot;forward&quot; class=&quot;active&quot;&gt;Forward (standard)&lt;/button&gt;
          &lt;button data-val=&quot;backward&quot;&gt;Backward (hard)&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;help&quot; id=&quot;modeHelp&quot;&gt;Type the letters in the order shown.&lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;field&quot;&gt;
        &lt;label class=&quot;field-label&quot;&gt;Start length&lt;/label&gt;
        &lt;div class=&quot;stepper&quot;&gt;
          &lt;button id=&quot;lenDown&quot;&gt;–&lt;/button&gt;
          &lt;div class=&quot;value&quot; id=&quot;lenValue&quot;&gt;4&lt;/div&gt;
          &lt;button id=&quot;lenUp&quot;&gt;+&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;help&quot;&gt;Letters in the first sequence (2–9).&lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;field&quot;&gt;
        &lt;label class=&quot;field-label&quot;&gt;Show speed&lt;/label&gt;
        &lt;div class=&quot;segmented&quot; id=&quot;speedSeg&quot;&gt;
          &lt;button data-val=&quot;fast&quot;&gt;Fast&lt;/button&gt;
          &lt;button data-val=&quot;normal&quot; class=&quot;active&quot;&gt;Normal&lt;/button&gt;
          &lt;button data-val=&quot;slow&quot;&gt;Slow&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;help&quot;&gt;How long each letter stays on screen.&lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;field&quot;&gt;
        &lt;label class=&quot;field-label&quot;&gt;Exclude confusions&lt;/label&gt;
        &lt;div class=&quot;toggle-row&quot;&gt;
          &lt;div class=&quot;switch&quot; id=&quot;exclSwitch&quot;&gt;&lt;div class=&quot;knob&quot;&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;span id=&quot;exclState&quot; style=&quot;font-size:13px; font-weight:600;&quot;&gt;On&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;excl-letters&quot; id=&quot;exclLetters&quot;&gt;Excluding: I, L, O, Q, S, Z&lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;
    &lt;button class=&quot;begin-btn&quot; id=&quot;beginBtn&quot;&gt;Begin Session&lt;/button&gt;
  &lt;/section&gt;

  &lt;!-- STAGE --&gt;
  &lt;section class=&quot;panel&quot;&gt;
    &lt;h2&gt;&lt;span class=&quot;num&quot;&gt;2&lt;/span&gt;Test&lt;/h2&gt;
    &lt;div class=&quot;stage&quot; id=&quot;stage&quot;&gt;
      &lt;div class=&quot;stage-msg&quot; id=&quot;stageMsg&quot;&gt;
        &lt;span class=&quot;big&quot;&gt;Ready when you are&lt;/span&gt;
        Choose your settings above, then press Begin Session.
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id=&quot;answerArea&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;feedback&quot; id=&quot;feedback&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;keyline&quot;&gt;Press &lt;kbd&gt;Enter&lt;/kbd&gt; to submit your answer. Letters are automatically capitalized.&lt;/div&gt;
  &lt;/section&gt;

  &lt;!-- STATS --&gt;
  &lt;section class=&quot;panel&quot;&gt;
    &lt;h2&gt;&lt;span class=&quot;num&quot;&gt;3&lt;/span&gt;Stats &amp;amp; results&lt;/h2&gt;

    &lt;div class=&quot;stat-grid&quot;&gt;
      &lt;div class=&quot;stat-card&quot;&gt;&lt;div class=&quot;n&quot; id=&quot;statBestF&quot;&gt;–&lt;/div&gt;&lt;div class=&quot;l&quot;&gt;Best forward span&lt;/div&gt;&lt;/div&gt;
      &lt;div class=&quot;stat-card&quot;&gt;&lt;div class=&quot;n&quot; id=&quot;statBestB&quot;&gt;–&lt;/div&gt;&lt;div class=&quot;l&quot;&gt;Best backward span&lt;/div&gt;&lt;/div&gt;
      &lt;div class=&quot;stat-card&quot;&gt;&lt;div class=&quot;n&quot; id=&quot;statSessions&quot;&gt;0&lt;/div&gt;&lt;div class=&quot;l&quot;&gt;Sessions played&lt;/div&gt;&lt;/div&gt;
      &lt;div class=&quot;stat-card&quot;&gt;&lt;div class=&quot;n&quot; id=&quot;statAccuracy&quot;&gt;–&lt;/div&gt;&lt;div class=&quot;l&quot;&gt;Overall accuracy&lt;/div&gt;&lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;ladder-title&quot;&gt;Current session ladder&lt;/div&gt;
    &lt;div class=&quot;ladder&quot; id=&quot;ladder&quot;&gt;
      &lt;div style=&quot;color:var(--ink-soft); font-size:13px;&quot;&gt;No session in progress yet.&lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;ladder-title&quot;&gt;Session history&lt;/div&gt;
    &lt;table class=&quot;history&quot;&gt;
      &lt;thead&gt;
        &lt;tr&gt;&lt;th&gt;When&lt;/th&gt;&lt;th&gt;Mode&lt;/th&gt;&lt;th&gt;Start&lt;/th&gt;&lt;th&gt;Speed&lt;/th&gt;&lt;th&gt;A–Z set&lt;/th&gt;&lt;th&gt;Span reached&lt;/th&gt;&lt;th&gt;Trials&lt;/th&gt;&lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id=&quot;historyBody&quot;&gt;
        &lt;tr class=&quot;empty-row&quot;&gt;&lt;td colspan=&quot;7&quot;&gt;No sessions yet — your results will appear here.&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;button class=&quot;reset-link&quot; id=&quot;resetBtn&quot;&gt;Clear all history&lt;/button&gt;
  &lt;/div&gt;
  &lt;/section&gt;

&lt;/div&gt;

&lt;script&gt;
(function(){
  &quot;use strict&quot;;

  // ---------- constants ----------
  var FULL_ALPHABET = &quot;ABCDEFGHIJKLMNOPQRSTUVWXYZ&quot;.split(&quot;&quot;);
  var CONFUSABLE = [&quot;I&quot;,&quot;L&quot;,&quot;O&quot;,&quot;Q&quot;,&quot;S&quot;,&quot;Z&quot;];
  var SPEED_MS = { fast: 550, normal: 950, slow: 1500 };
  var HISTORY_KEY = &quot;letterspan:history&quot;;

  // ---------- state ----------
  var settings = {
    mode: &quot;forward&quot;,
    startLength: 4,
    speed: &quot;normal&quot;,
    excludeConfusions: true
  };

  var session = null; // { mode, startLength, speed, exclude, currentLength, rungs:[{len,result}], trials, correct }
  var history = [];
  var awaitingAnswer = false;
  var currentSequence = [];

  // ---------- element refs ----------
  var modeSeg = document.getElementById(&quot;modeSeg&quot;);
  var modeHelp = document.getElementById(&quot;modeHelp&quot;);
  var lenValue = document.getElementById(&quot;lenValue&quot;);
  var lenUp = document.getElementById(&quot;lenUp&quot;);
  var lenDown = document.getElementById(&quot;lenDown&quot;);
  var speedSeg = document.getElementById(&quot;speedSeg&quot;);
  var exclSwitch = document.getElementById(&quot;exclSwitch&quot;);
  var exclState = document.getElementById(&quot;exclState&quot;);
  var exclLetters = document.getElementById(&quot;exclLetters&quot;);
  var beginBtn = document.getElementById(&quot;beginBtn&quot;);
  var stage = document.getElementById(&quot;stage&quot;);
  var stageMsg = document.getElementById(&quot;stageMsg&quot;);
  var answerArea = document.getElementById(&quot;answerArea&quot;);
  var feedback = document.getElementById(&quot;feedback&quot;);
  var ladder = document.getElementById(&quot;ladder&quot;);
  var historyBody = document.getElementById(&quot;historyBody&quot;);
  var statBestF = document.getElementById(&quot;statBestF&quot;);
  var statBestB = document.getElementById(&quot;statBestB&quot;);
  var statSessions = document.getElementById(&quot;statSessions&quot;);
  var statAccuracy = document.getElementById(&quot;statAccuracy&quot;);
  var resetBtn = document.getElementById(&quot;resetBtn&quot;);

  // ---------- settings wiring ----------
  modeSeg.addEventListener(&quot;click&quot;, function(e){
    var btn = e.target.closest(&quot;button&quot;);
    if(!btn || session) return;
    setActive(modeSeg, btn);
    settings.mode = btn.dataset.val;
    modeHelp.textContent = settings.mode === &quot;forward&quot;
      ? &quot;Type the letters in the order shown.&quot;
      : &quot;Type the letters in reverse of the order shown.&quot;;
  });

  speedSeg.addEventListener(&quot;click&quot;, function(e){
    var btn = e.target.closest(&quot;button&quot;);
    if(!btn || session) return;
    setActive(speedSeg, btn);
    settings.speed = btn.dataset.val;
  });

  function setActive(group, btn){
    Array.prototype.forEach.call(group.querySelectorAll(&quot;button&quot;), function(b){ b.classList.remove(&quot;active&quot;); });
    btn.classList.add(&quot;active&quot;);
  }

  lenUp.addEventListener(&quot;click&quot;, function(){
    if(session) return;
    settings.startLength = Math.min(9, settings.startLength + 1);
    lenValue.textContent = settings.startLength;
  });
  lenDown.addEventListener(&quot;click&quot;, function(){
    if(session) return;
    settings.startLength = Math.max(2, settings.startLength - 1);
    lenValue.textContent = settings.startLength;
  });

  exclSwitch.addEventListener(&quot;click&quot;, function(){
    if(session) return;
    settings.excludeConfusions = !settings.excludeConfusions;
    exclSwitch.classList.toggle(&quot;on&quot;, settings.excludeConfusions);
    exclState.textContent = settings.excludeConfusions ? &quot;On&quot; : &quot;Off&quot;;
    exclLetters.textContent = settings.excludeConfusions
      ? &quot;Excluding: I, L, O, Q, S, Z&quot;
      : &quot;Using the full A–Z alphabet&quot;;
  });
  exclSwitch.classList.add(&quot;on&quot;); // default On

  // ---------- letter pool ----------
  function getPool(){
    if(!settings.excludeConfusions) return FULL_ALPHABET.slice();
    return FULL_ALPHABET.filter(function(l){ return CONFUSABLE.indexOf(l) === -1; });
  }

  function generateSequence(length){
    var pool = getPool().slice();
    var seq = [];
    for(var i=0;i&lt;length;i++){
      if(pool.length === 0) pool = getPool().slice(); // replenish if we run out (long spans)
      var idx = Math.floor(Math.random() * pool.length);
      seq.push(pool[idx]);
      pool.splice(idx,1);
    }
    return seq;
  }

  // ---------- session flow ----------
  beginBtn.addEventListener(&quot;click&quot;, function(){
    if(session){ return; }
    session = {
      mode: settings.mode,
      startLength: settings.startLength,
      speed: settings.speed,
      exclude: settings.excludeConfusions,
      currentLength: settings.startLength,
      rungs: [],
      trials: 0,
      correct: 0,
      startedAt: new Date()
    };
    lockSettings(true);
    beginBtn.disabled = true;
    beginBtn.textContent = &quot;Session in progress…&quot;;
    renderLadder();
    runTrial();
  });

  function lockSettings(locked){
    [modeSeg, speedSeg, lenUp, lenDown, exclSwitch].forEach(function(el){
      Array.prototype.forEach.call(el.querySelectorAll ? el.querySelectorAll(&quot;button&quot;) : [], function(b){ b.disabled = locked; });
    });
    beginBtn.style.opacity = locked ? &quot;0.7&quot; : &quot;1&quot;;
  }

  function runTrial(){
    feedback.classList.remove(&quot;show&quot;);
    answerArea.innerHTML = &quot;&quot;;
    currentSequence = generateSequence(session.currentLength);
    var speedMs = SPEED_MS[session.speed];

    stageMsg.style.display = &quot;none&quot;;
    stage.innerHTML =
      &#39;&lt;div class=&quot;rung-progress&quot; id=&quot;rungProgress&quot;&gt;&lt;/div&gt;&#39; +
      &#39;&lt;div class=&quot;stage-letter&quot; id=&quot;stageLetter&quot;&gt;&lt;/div&gt;&#39;;
    var progressWrap = document.getElementById(&quot;rungProgress&quot;);
    for(var p=0;p&lt;currentSequence.length;p++){
      var seg = document.createElement(&quot;div&quot;);
      seg.className = &quot;seg&quot;;
      progressWrap.appendChild(seg);
    }
    var segs = progressWrap.querySelectorAll(&quot;.seg&quot;);
    var letterEl = document.getElementById(&quot;stageLetter&quot;);

    var i = 0;
    function showNext(){
      if(i &gt;= currentSequence.length){
        stage.innerHTML = &#39;&lt;div class=&quot;stage-msg&quot;&gt;&lt;span class=&quot;big&quot;&gt;Your turn&lt;/span&gt;Type what you saw, then press Enter.&lt;/div&gt;&#39;;
        showAnswerInput();
        return;
      }
      letterEl.textContent = &quot;&quot;;
      segs[i].classList.add(&quot;on&quot;);
      setTimeout(function(){
        letterEl.textContent = currentSequence[i];
        i++;
        setTimeout(showNext, speedMs);
      }, Math.round(speedMs*0.18));
    }
    setTimeout(showNext, 500);
  }

  function showAnswerInput(){
    awaitingAnswer = true;
    var promptText = session.mode === &quot;forward&quot;
      ? &quot;Type the &quot; + currentSequence.length + &quot; letters in the order shown:&quot;
      : &quot;Type the &quot; + currentSequence.length + &quot; letters in REVERSE order:&quot;;
    answerArea.innerHTML =
      &#39;&lt;div class=&quot;help&quot; style=&quot;margin-top:14px;&quot;&gt;&#39; + promptText + &#39;&lt;/div&gt;&#39; +
      &#39;&lt;div class=&quot;answer-row&quot;&gt;&#39; +
        &#39;&lt;input type=&quot;text&quot; id=&quot;answerInput&quot; maxlength=&quot;&#39; + (currentSequence.length*2) + &#39;&quot; autocomplete=&quot;off&quot; autocapitalize=&quot;characters&quot; spellcheck=&quot;false&quot; placeholder=&quot;e.g. &#39; + (session.mode===&quot;forward&quot; ? currentSequence.slice(0,Math.min(2,currentSequence.length)).join(&quot;&quot;) : &quot;…&quot;) + &#39;&quot;&gt;&#39; +
        &#39;&lt;button class=&quot;btn-primary&quot; id=&quot;submitBtn&quot;&gt;Submit&lt;/button&gt;&#39; +
      &#39;&lt;/div&gt;&#39;;
    var input = document.getElementById(&quot;answerInput&quot;);
    input.focus();
    input.addEventListener(&quot;input&quot;, function(){
      input.value = input.value.toUpperCase().replace(/[^A-Z]/g,&quot;&quot;);
    });
    input.addEventListener(&quot;keydown&quot;, function(e){
      if(e.key === &quot;Enter&quot;) submitAnswer();
    });
    document.getElementById(&quot;submitBtn&quot;).addEventListener(&quot;click&quot;, submitAnswer);
  }

  function submitAnswer(){
    if(!awaitingAnswer) return;
    var input = document.getElementById(&quot;answerInput&quot;);
    if(!input) return;
    var raw = input.value.trim().toUpperCase();
    if(raw.length === 0) { input.focus(); return; }
    awaitingAnswer = false;

    var target = session.mode === &quot;forward&quot; ? currentSequence.slice() : currentSequence.slice().reverse();
    var userSeq = raw.split(&quot;&quot;);
    var correct = userSeq.length === target.length &amp;&amp; userSeq.every(function(ch,idx){ return ch === target[idx]; });

    session.trials++;
    if(correct) session.correct++;
    session.rungs.push({ len: session.currentLength, result: correct ? &quot;pass&quot; : &quot;fail&quot; });

    input.disabled = true;
    document.getElementById(&quot;submitBtn&quot;).disabled = true;

    feedback.classList.add(&quot;show&quot;);
    if(correct){
      feedback.className = &quot;feedback show good&quot;;
      feedback.innerHTML = &quot;Correct — &lt;b&gt;&quot; + target.join(&quot;&quot;) + &quot;&lt;/b&gt;. Moving up to length &quot; + (session.currentLength+1) + &quot;.&quot;;
    } else {
      feedback.className = &quot;feedback show bad&quot;;
      feedback.innerHTML = &quot;Not quite. Correct answer: &lt;b&gt;&quot; + target.join(&quot;&quot;) + &quot;&lt;/b&gt; — you typed &lt;b&gt;&quot; + userSeq.join(&quot;&quot;) + &quot;&lt;/b&gt;.&quot;;
    }
    renderLadder();

    if(correct){
      session.currentLength++;
      setTimeout(function(){ runTrial(); }, 1400);
    } else {
      setTimeout(function(){ endSession(); }, 1600);
    }
  }

  function endSession(){
    var finalSpan = 0;
    session.rungs.forEach(function(r){ if(r.result === &quot;pass&quot;) finalSpan = Math.max(finalSpan, r.len); });
    // If the very first trial failed, span is recorded as 0 (below start length).

    var record = {
      when: session.startedAt,
      mode: session.mode,
      startLength: session.startLength,
      speed: session.speed,
      exclude: session.exclude,
      span: finalSpan,
      trials: session.trials,
      correct: session.correct
    };
    history.unshift(record);
    saveHistory();
    renderHistory();
    renderStats();

    stage.innerHTML = &#39;&lt;div class=&quot;stage-msg&quot;&gt;&lt;span class=&quot;big&quot;&gt;Session complete — span: &#39; + finalSpan + &#39;&lt;/span&gt;Press Begin Session to try again.&lt;/div&gt;&#39;;
    answerArea.innerHTML = &quot;&quot;;
    session = null;
    lockSettings(false);
    beginBtn.disabled = false;
    beginBtn.textContent = &quot;Begin Session&quot;;
  }

  // ---------- ladder ----------
  function renderLadder(){
    if(!session){
      ladder.innerHTML = &#39;&lt;div style=&quot;color:var(--ink-soft); font-size:13px;&quot;&gt;No session in progress yet.&lt;/div&gt;&#39;;
      return;
    }
    var maxLen = Math.max(session.currentLength, session.startLength) + 1;
    var minLen = session.startLength;
    var html = &quot;&quot;;
    for(var len = minLen; len &lt;= maxLen; len++){
      var rung = session.rungs.filter(function(r){ return r.len === len; }).slice(-1)[0];
      var cls = &quot;pending&quot;;
      if(rung) cls = rung.result;
      var isCurrent = (len === session.currentLength &amp;&amp; !rung);
      html += &#39;&lt;div class=&quot;rung&quot;&gt;&#39; +
        &#39;&lt;div class=&quot;len&quot;&gt;&#39; + len + &#39;&lt;/div&gt;&#39; +
        &#39;&lt;div class=&quot;bar &#39; + cls + (isCurrent ? &quot; current&quot; : &quot;&quot;) + &#39;&quot;&gt;&lt;div class=&quot;fill&quot;&gt;&lt;/div&gt;&lt;/div&gt;&#39; +
      &#39;&lt;/div&gt;&#39;;
    }
    ladder.innerHTML = html;
  }

  // ---------- stats &amp; history ----------
  function renderStats(){
    var bestF = null, bestB = null, totalCorrect = 0, totalTrials = 0;
    history.forEach(function(r){
      if(r.mode === &quot;forward&quot;) bestF = bestF === null ? r.span : Math.max(bestF, r.span);
      else bestB = bestB === null ? r.span : Math.max(bestB, r.span);
      totalCorrect += r.correct;
      totalTrials += r.trials;
    });
    statBestF.textContent = bestF === null ? &quot;–&quot; : bestF;
    statBestB.textContent = bestB === null ? &quot;–&quot; : bestB;
    statSessions.textContent = history.length;
    statAccuracy.textContent = totalTrials === 0 ? &quot;–&quot; : Math.round(100*totalCorrect/totalTrials) + &quot;%&quot;;
  }

  function renderHistory(){
    if(history.length === 0){
      historyBody.innerHTML = &#39;&lt;tr class=&quot;empty-row&quot;&gt;&lt;td colspan=&quot;7&quot;&gt;No sessions yet — your results will appear here.&lt;/td&gt;&lt;/tr&gt;&#39;;
      return;
    }
    historyBody.innerHTML = history.map(function(r){
      var when = new Date(r.when);
      var whenStr = when.toLocaleDateString(undefined,{month:&quot;short&quot;,day:&quot;numeric&quot;}) + &quot; &quot; + when.toLocaleTimeString(undefined,{hour:&quot;2-digit&quot;,minute:&quot;2-digit&quot;});
      return &#39;&lt;tr&gt;&#39; +
        &#39;&lt;td&gt;&#39; + whenStr + &#39;&lt;/td&gt;&#39; +
        &#39;&lt;td&gt;&#39; + (r.mode === &quot;forward&quot; ? &quot;Forward&quot; : &quot;Backward&quot;) + &#39;&lt;/td&gt;&#39; +
        &#39;&lt;td&gt;&#39; + r.startLength + &#39;&lt;/td&gt;&#39; +
        &#39;&lt;td&gt;&#39; + capitalize(r.speed) + &#39;&lt;/td&gt;&#39; +
        &#39;&lt;td&gt;&#39; + (r.exclude ? &quot;20 letters&quot; : &quot;26 letters&quot;) + &#39;&lt;/td&gt;&#39; +
        &#39;&lt;td&gt;&lt;b&gt;&#39; + r.span + &#39;&lt;/b&gt;&lt;/td&gt;&#39; +
        &#39;&lt;td&gt;&#39; + r.correct + &#39;/&#39; + r.trials + &#39;&lt;/td&gt;&#39; +
      &#39;&lt;/tr&gt;&#39;;
    }).join(&quot;&quot;);
  }

  function capitalize(s){ return s.charAt(0).toUpperCase() + s.slice(1); }

  resetBtn.addEventListener(&quot;click&quot;, function(){
    if(!confirm(&quot;Clear all saved history? This can&#39;t be undone.&quot;)) return;
    history = [];
    saveHistory();
    renderHistory();
    renderStats();
  });

  // ---------- persistence (best effort; falls back to in-memory only) ----------
  function saveHistory(){
    try{
      if(window.storage &amp;&amp; window.storage.set){
        window.storage.set(HISTORY_KEY, JSON.stringify(history), false).catch(function(){});
      }
    }catch(e){ /* ignore, session-only fallback */ }
  }

  function loadHistory(){
    try{
      if(window.storage &amp;&amp; window.storage.get){
        window.storage.get(HISTORY_KEY, false).then(function(res){
          if(res &amp;&amp; res.value){
            try{ history = JSON.parse(res.value) || []; }catch(e){ history = []; }
            renderHistory();
            renderStats();
          }
        }).catch(function(){ /* no saved history yet */ });
      }
    }catch(e){ /* storage unavailable, start fresh */ }
  }

  // ---------- init ----------
  loadHistory();
  renderStats();
  renderHistory();

})();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/2417723319822975504/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/2417723319822975504' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/2417723319822975504'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/2417723319822975504'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2026/07/letter-span-memory-test-and-game.html' title='Letter Span Memory Test and Game'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVuA1CvyYoZU9doeLVa3RGw0ubsgjSi8i89st1lL35cW8ded2CRyFzF90sZ_oUj6SiC07I-QB7qbdkNUw-pKR7okdsQIycoJ4j1CMUG0bu-N8htauu7G6Gdp79kKxLXinlTf7NNAKouj1PpH2mXnAOxB_qMStLLlSu2YbWhojfyWcQ7JQKQjCdfw59d5nA/s72-c/Cover.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-4171839414006393754</id><published>2026-07-22T10:57:46.764+05:00</published><updated>2026-07-22T10:57:46.765+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="game"/><category scheme="http://www.blogger.com/atom/ns#" term="memory"/><category scheme="http://www.blogger.com/atom/ns#" term="psychology"/><title type='text'>Digit Span Memory Game</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR905-YgrcjpsDWWH-A2DcGGRTgibUAOcEW9fqoee7UlVojv87niZjMp97b6VA1wWictWgZ1905WAUINfps0QzgPHxZZ_JBKV3VJpfQA6aj4qU5gfYXAA2U5c2UTbGtjHlkLoKMbhjL4LZTowKUxfnqH1LxJsf25rhfZ3SvJ_lSH8O-pqD4GVR9kLW1Hpu/s867/Cover.png&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;400&quot; data-original-height=&quot;694&quot; data-original-width=&quot;867&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR905-YgrcjpsDWWH-A2DcGGRTgibUAOcEW9fqoee7UlVojv87niZjMp97b6VA1wWictWgZ1905WAUINfps0QzgPHxZZ_JBKV3VJpfQA6aj4qU5gfYXAA2U5c2UTbGtjHlkLoKMbhjL4LZTowKUxfnqH1LxJsf25rhfZ3SvJ_lSH8O-pqD4GVR9kLW1Hpu/s400/Cover.png&quot;/&gt;&lt;/a&gt;&lt;/div&gt;

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;title&gt;Span // Digit Recall Instrument&lt;/title&gt;
&lt;style&gt;
  @font-face {
    font-family: &#39;local-mono&#39;;
    src: local(&#39;JetBrains Mono&#39;), local(&#39;IBM Plex Mono&#39;), local(&#39;Consolas&#39;);
  }

  :root {
    --bg: #0b0e0c;
    --panel: #121613;
    --panel-2: #171d19;
    --amber: #ffb000;
    --amber-dim: #7a5600;
    --amber-glow: rgba(255, 176, 0, 0.35);
    --ok: #4af7c0;
    --bad: #ff5d5d;
    --text-dim: #8a9187;
    --line: #263029;
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    background-image:
      radial-gradient(ellipse at 50% -10%, rgba(255,176,0,0.05), transparent 60%);
    color: #e8ece7;
    font-family: &#39;Inter&#39;, -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, sans-serif;
    min-height: 100vh;
  }

  .mono { font-family: &#39;local-mono&#39;, &#39;JetBrains Mono&#39;, &#39;Consolas&#39;, monospace; }

  .wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px 20px 60px;
  }

  header.app-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 14px;
  }

  header.app-head .brand {
    font-family: &#39;local-mono&#39;, monospace;
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--amber);
    text-transform: uppercase;
  }

  header.app-head .brand span {
    color: var(--text-dim);
  }

  nav.tabs {
    display: flex;
    gap: 6px;
  }

  nav.tabs button {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-dim);
    font-family: &#39;local-mono&#39;, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 13px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  nav.tabs button.active {
    color: var(--amber);
    border-color: var(--amber-dim);
    background: rgba(255,176,0,0.06);
  }

  nav.tabs button:hover { color: #fff; }

  .panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 22px;
    margin-bottom: 16px;
  }

  .screen-panel {
    background: #08130f;
    border: 1px solid #1b2a20;
    border-radius: 6px;
    padding: 0;
    margin-bottom: 16px;
    overflow: hidden;
    position: relative;
  }

  .screen-panel::before {
    content: &quot;&quot;;
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.15) 0px,
      rgba(0,0,0,0.15) 1px,
      transparent 1px,
      transparent 3px
    );
    pointer-events: none;
    opacity: 0.5;
  }

  canvas#screen {
    display: block;
    width: 100%;
    height: 220px;
  }

  .status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid #1b2a20;
    font-family: &#39;local-mono&#39;, monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    text-transform: uppercase;
  }

  .status-row .dots {
    display: flex;
    gap: 5px;
  }

  .status-row .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #263029;
  }
  .status-row .dot.filled { background: var(--amber); box-shadow: 0 0 6px var(--amber-glow); }
  .status-row .dot.bad { background: var(--bad); }

  .field-label {
    font-family: &#39;local-mono&#39;, monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 9px;
    display: block;
  }

  .segmented {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
  }

  .segmented button {
    flex: 1;
    background: var(--panel-2);
    border: 1px solid var(--line);
    color: var(--text-dim);
    padding: 12px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
  }

  .segmented button.sel {
    border-color: var(--amber-dim);
    color: var(--amber);
    background: rgba(255,176,0,0.08);
  }

  .segmented button:hover:not(.sel) { border-color: #3a463d; color: #cfd6cd; }

  .num-stepper {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
  }

  .num-stepper button {
    width: 38px;
    height: 38px;
    border-radius: 4px;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--amber);
    font-size: 18px;
    cursor: pointer;
  }

  .num-stepper .val {
    font-family: &#39;local-mono&#39;, monospace;
    font-size: 22px;
    color: #fff;
    min-width: 40px;
    text-align: center;
  }

  .start-btn {
    width: 100%;
    padding: 15px;
    border-radius: 5px;
    border: none;
    background: var(--amber);
    color: #1a1200;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.15s ease;
  }
  .start-btn:hover { filter: brightness(1.08); }
  .start-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  .keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }

  .keypad button {
    padding: 16px 0;
    font-size: 18px;
    font-family: &#39;local-mono&#39;, monospace;
    border-radius: 5px;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: #e8ece7;
    cursor: pointer;
  }
  .keypad button:hover { border-color: var(--amber-dim); color: var(--amber); }
  .keypad button:active { background: rgba(255,176,0,0.12); }

  .keypad button.wide { grid-column: span 1; }

  .actions-row {
    display: flex;
    gap: 8px;
  }
  .actions-row button {
    flex: 1;
    padding: 13px;
    border-radius: 5px;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text-dim);
    font-size: 13px;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .actions-row button.primary {
    background: var(--amber);
    color: #1a1200;
    border-color: var(--amber);
  }
  .actions-row button.danger:hover { color: var(--bad); border-color: var(--bad); }

  .result-box {
    text-align: center;
    padding: 8px 0 4px;
  }
  .result-box .big-num {
    font-family: &#39;local-mono&#39;, monospace;
    font-size: 52px;
    color: var(--amber);
    text-shadow: 0 0 20px var(--amber-glow);
    line-height: 1;
    margin: 6px 0;
  }
  .result-box .label { color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }

  /* Stats */
  .stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
  }
  .stat-card {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 14px 12px;
    text-align: center;
  }
  .stat-card .n {
    font-family: &#39;local-mono&#39;, monospace;
    font-size: 26px;
    color: var(--amber);
  }
  .stat-card .l {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
  }

  table.sessions {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
  }
  table.sessions th {
    text-align: left;
    color: var(--text-dim);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
  }
  table.sessions td {
    padding: 8px 8px;
    border-bottom: 1px solid #1a201c;
    font-family: &#39;local-mono&#39;, monospace;
    color: #d5dad2;
  }
  table.sessions tr:hover td { background: rgba(255,255,255,0.02); }
  .pill {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .pill.fwd { background: rgba(74,247,192,0.12); color: var(--ok); }
  .pill.bwd { background: rgba(255,93,93,0.12); color: var(--bad); }

  .empty-note {
    color: var(--text-dim);
    font-size: 13px;
    text-align: center;
    padding: 30px 10px;
  }

  .hidden { display: none !important; }

  footer.note {
    text-align: center;
    color: #4a534c;
    font-size: 11px;
    margin-top: 18px;
  }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;wrap&quot;&gt;

  &lt;header class=&quot;app-head&quot;&gt;
    &lt;div class=&quot;brand mono&quot;&gt;SPAN &lt;span&gt;// digit recall instrument&lt;/span&gt;&lt;/div&gt;
    &lt;nav class=&quot;tabs&quot;&gt;
      &lt;button id=&quot;tabPlayBtn&quot; class=&quot;active&quot;&gt;Play&lt;/button&gt;
      &lt;button id=&quot;tabStatsBtn&quot;&gt;Stats&lt;/button&gt;
    &lt;/nav&gt;
  &lt;/header&gt;

  &lt;!-- PLAY TAB --&gt;
  &lt;div id=&quot;tabPlay&quot;&gt;

    &lt;!-- Screen --&gt;
    &lt;div class=&quot;screen-panel&quot;&gt;
      &lt;canvas id=&quot;screen&quot; width=&quot;1200&quot; height=&quot;440&quot;&gt;&lt;/canvas&gt;
      &lt;div class=&quot;status-row&quot;&gt;
        &lt;span id=&quot;statusText&quot;&gt;READY&lt;/span&gt;
        &lt;div class=&quot;dots&quot; id=&quot;progressDots&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Setup panel --&gt;
    &lt;div class=&quot;panel&quot; id=&quot;setupPanel&quot;&gt;
      &lt;span class=&quot;field-label&quot;&gt;Mode&lt;/span&gt;
      &lt;div class=&quot;segmented&quot; id=&quot;modeSeg&quot;&gt;
        &lt;button data-val=&quot;forward&quot; class=&quot;sel&quot;&gt;Forward&lt;/button&gt;
        &lt;button data-val=&quot;backward&quot;&gt;Backward (hard)&lt;/button&gt;
      &lt;/div&gt;

      &lt;span class=&quot;field-label&quot;&gt;Starting length&lt;/span&gt;
      &lt;div class=&quot;num-stepper&quot;&gt;
        &lt;button id=&quot;lenMinus&quot;&gt;&amp;minus;&lt;/button&gt;
        &lt;div class=&quot;val&quot; id=&quot;lenVal&quot;&gt;3&lt;/div&gt;
        &lt;button id=&quot;lenPlus&quot;&gt;+&lt;/button&gt;
      &lt;/div&gt;

      &lt;span class=&quot;field-label&quot;&gt;Speed&lt;/span&gt;
      &lt;div class=&quot;segmented&quot; id=&quot;speedSeg&quot;&gt;
        &lt;button data-val=&quot;slow&quot;&gt;Slow&lt;/button&gt;
        &lt;button data-val=&quot;normal&quot; class=&quot;sel&quot;&gt;Normal&lt;/button&gt;
        &lt;button data-val=&quot;fast&quot;&gt;Fast&lt;/button&gt;
      &lt;/div&gt;

      &lt;button class=&quot;start-btn&quot; id=&quot;startBtn&quot;&gt;Begin session&lt;/button&gt;
    &lt;/div&gt;

    &lt;!-- Recall panel (hidden until needed) --&gt;
    &lt;div class=&quot;panel hidden&quot; id=&quot;recallPanel&quot;&gt;
      &lt;span class=&quot;field-label&quot; id=&quot;recallLabel&quot;&gt;Enter the sequence&lt;/span&gt;
      &lt;div class=&quot;keypad&quot; id=&quot;keypad&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;actions-row&quot;&gt;
        &lt;button id=&quot;backspaceBtn&quot;&gt;&amp;larr; Delete&lt;/button&gt;
        &lt;button id=&quot;submitBtn&quot; class=&quot;primary&quot;&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Result panel --&gt;
    &lt;div class=&quot;panel hidden&quot; id=&quot;resultPanel&quot;&gt;
      &lt;div class=&quot;result-box&quot;&gt;
        &lt;div class=&quot;label&quot; id=&quot;resultLabel&quot;&gt;Session ended&lt;/div&gt;
        &lt;div class=&quot;big-num&quot; id=&quot;resultSpan&quot;&gt;0&lt;/div&gt;
        &lt;div class=&quot;label&quot;&gt;longest span recalled correctly&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;actions-row&quot; style=&quot;margin-top:16px;&quot;&gt;
        &lt;button id=&quot;againBtn&quot; class=&quot;primary&quot;&gt;New session&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;

  &lt;/div&gt;

  &lt;!-- STATS TAB --&gt;
  &lt;div id=&quot;tabStats&quot; class=&quot;hidden&quot;&gt;
    &lt;div class=&quot;stat-grid&quot; id=&quot;statGrid&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;panel&quot;&gt;
      &lt;span class=&quot;field-label&quot;&gt;Session history&lt;/span&gt;
      &lt;div id=&quot;historyWrap&quot;&gt;&lt;div class=&quot;empty-note&quot;&gt;No sessions recorded yet in this browser.&lt;/div&gt;&lt;/div&gt;
      &lt;div class=&quot;actions-row&quot; style=&quot;margin-top:14px;&quot;&gt;
        &lt;button id=&quot;clearStatsBtn&quot; class=&quot;danger&quot;&gt;Clear all stats&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;footer class=&quot;note&quot;&gt;Digits are generated locally each round. Stats are stored in this browser only.&lt;/footer&gt;
&lt;/div&gt;

&lt;script&gt;
(function () {
  &quot;use strict&quot;;

  // ---------- Persistent storage helpers ----------
  const STORAGE_KEY = &quot;digit-span-sessions&quot;;

  async function loadSessions() {
    try {
      const res = await window.storage.get(STORAGE_KEY, false);
      if (res &amp;&amp; res.value) return JSON.parse(res.value);
      return [];
    } catch (e) {
      return [];
    }
  }

  async function saveSessions(list) {
    try {
      await window.storage.set(STORAGE_KEY, JSON.stringify(list), false);
    } catch (e) {
      console.error(&quot;Could not persist stats:&quot;, e);
    }
  }

  async function addSession(record) {
    const list = await loadSessions();
    list.push(record);
    await saveSessions(list);
  }

  // ---------- Canvas ----------
  const canvas = document.getElementById(&quot;screen&quot;);
  const ctx = canvas.getContext(&quot;2d&quot;);

  function fitCanvas() {
    const cssW = canvas.clientWidth;
    const ratio = 1200 / 440;
    canvas.width = cssW * 2;
    canvas.height = (cssW / ratio) * 2;
  }
  window.addEventListener(&quot;resize&quot;, fitCanvas);

  function drawCentered(text, opts) {
    opts = opts || {};
    const w = canvas.width, h = canvas.height;
    ctx.clearRect(0, 0, w, h);
    ctx.fillStyle = &quot;#08130f&quot;;
    ctx.fillRect(0, 0, w, h);
    ctx.textAlign = &quot;center&quot;;
    ctx.textBaseline = &quot;middle&quot;;
    const size = opts.size || Math.floor(h * 0.45);
    ctx.font = `700 ${size}px &#39;local-mono&#39;, &#39;JetBrains Mono&#39;, monospace`;
    ctx.shadowColor = opts.color || &quot;#ffb000&quot;;
    ctx.shadowBlur = opts.glow !== undefined ? opts.glow : 28;
    ctx.fillStyle = opts.color || &quot;#ffb000&quot;;
    ctx.fillText(text, w / 2, h / 2);
    ctx.shadowBlur = 0;
  }

  function drawIdle(msg) {
    drawCentered(msg || &quot;READY&quot;, { size: canvas.height * 0.16, color: &quot;#3d4a3f&quot;, glow: 0 });
  }

  function drawFixation() {
    drawCentered(&quot;+&quot;, { size: canvas.height * 0.3, color: &quot;#5a6b5c&quot;, glow: 6 });
  }

  function drawDigit(d) {
    drawCentered(String(d), { size: canvas.height * 0.5, color: &quot;#ffb000&quot;, glow: 30 });
  }

  function drawBlank() {
    const w = canvas.width, h = canvas.height;
    ctx.clearRect(0, 0, w, h);
    ctx.fillStyle = &quot;#08130f&quot;;
    ctx.fillRect(0, 0, w, h);
  }

  function drawFeedback(ok) {
    drawCentered(ok ? &quot;CORRECT&quot; : &quot;INCORRECT&quot;, {
      size: canvas.height * 0.18,
      color: ok ? &quot;#4af7c0&quot; : &quot;#ff5d5d&quot;,
      glow: 18
    });
  }

  // ---------- Settings state ----------
  let mode = &quot;forward&quot;;
  let startLength = 3;
  let speedKey = &quot;normal&quot;;

  const SPEED_MS = { slow: 1500, normal: 1000, fast: 600 };
  const GAP_RATIO = 0.35; // blank gap between digits relative to digit duration

  // ---------- DOM refs ----------
  const modeSeg = document.getElementById(&quot;modeSeg&quot;);
  const speedSeg = document.getElementById(&quot;speedSeg&quot;);
  const lenVal = document.getElementById(&quot;lenVal&quot;);
  const lenMinus = document.getElementById(&quot;lenMinus&quot;);
  const lenPlus = document.getElementById(&quot;lenPlus&quot;);
  const startBtn = document.getElementById(&quot;startBtn&quot;);

  const setupPanel = document.getElementById(&quot;setupPanel&quot;);
  const recallPanel = document.getElementById(&quot;recallPanel&quot;);
  const resultPanel = document.getElementById(&quot;resultPanel&quot;);
  const recallLabel = document.getElementById(&quot;recallLabel&quot;);
  const keypadEl = document.getElementById(&quot;keypad&quot;);
  const backspaceBtn = document.getElementById(&quot;backspaceBtn&quot;);
  const submitBtn = document.getElementById(&quot;submitBtn&quot;);
  const againBtn = document.getElementById(&quot;againBtn&quot;);
  const resultSpan = document.getElementById(&quot;resultSpan&quot;);
  const resultLabel = document.getElementById(&quot;resultLabel&quot;);
  const statusText = document.getElementById(&quot;statusText&quot;);
  const progressDots = document.getElementById(&quot;progressDots&quot;);

  function selectSeg(container, val, setter) {
    [...container.children].forEach(btn =&gt; {
      btn.classList.toggle(&quot;sel&quot;, btn.dataset.val === val);
    });
    setter(val);
  }

  modeSeg.addEventListener(&quot;click&quot;, e =&gt; {
    const btn = e.target.closest(&quot;button&quot;);
    if (!btn) return;
    selectSeg(modeSeg, btn.dataset.val, v =&gt; mode = v);
  });
  speedSeg.addEventListener(&quot;click&quot;, e =&gt; {
    const btn = e.target.closest(&quot;button&quot;);
    if (!btn) return;
    selectSeg(speedSeg, btn.dataset.val, v =&gt; speedKey = v);
  });
  lenMinus.addEventListener(&quot;click&quot;, () =&gt; {
    startLength = Math.max(2, startLength - 1);
    lenVal.textContent = startLength;
  });
  lenPlus.addEventListener(&quot;click&quot;, () =&gt; {
    startLength = Math.min(9, startLength + 1);
    lenVal.textContent = startLength;
  });

  // Build keypad 0-9 + clear
  for (let i = 1; i &lt;= 9; i++) {
    const b = document.createElement(&quot;button&quot;);
    b.textContent = i;
    b.dataset.d = i;
    keypadEl.appendChild(b);
  }
  const zeroBtn = document.createElement(&quot;button&quot;);
  zeroBtn.textContent = &quot;0&quot;;
  zeroBtn.dataset.d = &quot;0&quot;;
  const clearBtn = document.createElement(&quot;button&quot;);
  clearBtn.textContent = &quot;Clr&quot;;
  keypadEl.appendChild(zeroBtn);
  keypadEl.appendChild(clearBtn);

  // ---------- Game state ----------
  let currentLength, trialNum, maxSpanAchieved, currentSequence, userInput, acceptingInput;

  function setPanels(which) {
    setupPanel.classList.toggle(&quot;hidden&quot;, which !== &quot;setup&quot;);
    recallPanel.classList.toggle(&quot;hidden&quot;, which !== &quot;recall&quot;);
    resultPanel.classList.toggle(&quot;hidden&quot;, which !== &quot;result&quot;);
  }

  function renderDots(length, filledCount, badIndex) {
    progressDots.innerHTML = &quot;&quot;;
    for (let i = 0; i &lt; length; i++) {
      const d = document.createElement(&quot;div&quot;);
      d.className = &quot;dot&quot;;
      if (badIndex !== undefined &amp;&amp; i === badIndex) d.classList.add(&quot;bad&quot;);
      else if (i &lt; filledCount) d.classList.add(&quot;filled&quot;);
      progressDots.appendChild(d);
    }
  }

  function renderInputEcho() {
    recallLabel.textContent = mode === &quot;backward&quot;
      ? `Enter in REVERSE order  \u2014  ${userInput.map(() =&gt; &quot;\u2022&quot;).join(&quot; &quot;)}${userInput.length ? &quot;&quot; : &quot;(start typing)&quot;}`
      : `Enter in the SAME order  \u2014  ${userInput.map(() =&gt; &quot;\u2022&quot;).join(&quot; &quot;)}${userInput.length ? &quot;&quot; : &quot;(start typing)&quot;}`;
  }

  async function startSession() {
    currentLength = startLength;
    trialNum = 1;
    maxSpanAchieved = 0;
    setPanels(&quot;setup&quot;.replace(&quot;setup&quot;, &quot;recall&quot;)); // placeholder, real switch below
    await runRound();
  }

  function randomSequence(len) {
    const seq = [];
    for (let i = 0; i &lt; len; i++) seq.push(Math.floor(Math.random() * 10));
    return seq;
  }

  function sleep(ms) { return new Promise(res =&gt; setTimeout(res, ms)); }

  async function playSequence(seq) {
    acceptingInput = false;
    const dur = SPEED_MS[speedKey];
    const gap = Math.round(dur * GAP_RATIO);
    statusText.textContent = &quot;WATCH THE SEQUENCE&quot;;
    drawFixation();
    renderDots(seq.length, 0);
    await sleep(600);
    for (let i = 0; i &lt; seq.length; i++) {
      drawDigit(seq[i]);
      renderDots(seq.length, i + 1);
      await sleep(dur);
      drawBlank();
      await sleep(gap);
    }
    drawIdle(&quot;RECALL NOW&quot;);
    statusText.textContent = &quot;YOUR TURN&quot;;
  }

  async function runRound() {
    setPanels(&quot;recall&quot;);
    resultPanel.classList.add(&quot;hidden&quot;);
    currentSequence = randomSequence(currentLength);
    userInput = [];
    submitBtn.disabled = false;
    renderInputEcho();
    recallPanel.classList.add(&quot;hidden&quot;);
    await playSequence(currentSequence);
    recallPanel.classList.remove(&quot;hidden&quot;);
    acceptingInput = true;
    renderInputEcho();
  }

  function checkAnswer() {
    const expected = mode === &quot;backward&quot; ? [...currentSequence].reverse() : currentSequence;
    if (userInput.length !== expected.length) return false;
    for (let i = 0; i &lt; expected.length; i++) {
      if (userInput[i] !== expected[i]) return false;
    }
    return true;
  }

  async function onSubmit() {
    if (!acceptingInput || userInput.length === 0) return;
    acceptingInput = false;
    const ok = checkAnswer();
    drawFeedback(ok);
    statusText.textContent = ok ? &quot;CORRECT&quot; : &quot;INCORRECT&quot;;
    await sleep(900);

    if (ok) {
      maxSpanAchieved = currentLength;
      currentLength += 1;
      trialNum = 1;
      await runRound();
    } else {
      if (trialNum === 1) {
        trialNum = 2;
        statusText.textContent = &quot;SECOND ATTEMPT AT THIS LENGTH&quot;;
        await runRound();
      } else {
        await endSession();
      }
    }
  }

  async function endSession() {
    setPanels(&quot;result&quot;);
    drawIdle(&quot;SESSION COMPLETE&quot;);
    statusText.textContent = &quot;DONE&quot;;
    resultSpan.textContent = maxSpanAchieved;
    resultLabel.textContent = `${mode === &quot;forward&quot; ? &quot;Forward&quot; : &quot;Backward&quot;} \u00b7 ${speedKey} speed \u00b7 started at ${startLength}`;

    const record = {
      ts: Date.now(),
      mode: mode,
      speed: speedKey,
      startLength: startLength,
      maxSpan: maxSpanAchieved
    };
    await addSession(record);
  }

  // Keypad interactions
  keypadEl.addEventListener(&quot;click&quot;, e =&gt; {
    const btn = e.target.closest(&quot;button&quot;);
    if (!btn || !acceptingInput) return;
    if (btn.textContent === &quot;Clr&quot;) {
      userInput = [];
    } else {
      if (userInput.length &lt; 12) userInput.push(parseInt(btn.dataset.d, 10));
    }
    renderInputEcho();
  });
  backspaceBtn.addEventListener(&quot;click&quot;, () =&gt; {
    if (!acceptingInput) return;
    userInput.pop();
    renderInputEcho();
  });
  submitBtn.addEventListener(&quot;click&quot;, onSubmit);

  document.addEventListener(&quot;keydown&quot;, e =&gt; {
    if (!acceptingInput) return;
    if (e.key &gt;= &quot;0&quot; &amp;&amp; e.key &lt;= &quot;9&quot;) {
      if (userInput.length &lt; 12) userInput.push(parseInt(e.key, 10));
      renderInputEcho();
    } else if (e.key === &quot;Backspace&quot;) {
      userInput.pop();
      renderInputEcho();
    } else if (e.key === &quot;Enter&quot;) {
      onSubmit();
    }
  });

  startBtn.addEventListener(&quot;click&quot;, async () =&gt; {
    setPanels(&quot;recall&quot;);
    await startSession();
  });
  againBtn.addEventListener(&quot;click&quot;, () =&gt; {
    setPanels(&quot;setup&quot;);
    drawIdle(&quot;READY&quot;);
    statusText.textContent = &quot;READY&quot;;
    progressDots.innerHTML = &quot;&quot;;
  });

  // ---------- Tabs ----------
  const tabPlayBtn = document.getElementById(&quot;tabPlayBtn&quot;);
  const tabStatsBtn = document.getElementById(&quot;tabStatsBtn&quot;);
  const tabPlay = document.getElementById(&quot;tabPlay&quot;);
  const tabStats = document.getElementById(&quot;tabStats&quot;);

  tabPlayBtn.addEventListener(&quot;click&quot;, () =&gt; {
    tabPlayBtn.classList.add(&quot;active&quot;);
    tabStatsBtn.classList.remove(&quot;active&quot;);
    tabPlay.classList.remove(&quot;hidden&quot;);
    tabStats.classList.add(&quot;hidden&quot;);
  });
  tabStatsBtn.addEventListener(&quot;click&quot;, async () =&gt; {
    tabStatsBtn.classList.add(&quot;active&quot;);
    tabPlayBtn.classList.remove(&quot;active&quot;);
    tabStats.classList.remove(&quot;hidden&quot;);
    tabPlay.classList.add(&quot;hidden&quot;);
    await renderStats();
  });

  // ---------- Stats rendering ----------
  const statGrid = document.getElementById(&quot;statGrid&quot;);
  const historyWrap = document.getElementById(&quot;historyWrap&quot;);
  const clearStatsBtn = document.getElementById(&quot;clearStatsBtn&quot;);

  function fmtDate(ts) {
    const d = new Date(ts);
    return d.toLocaleDateString(undefined, { month: &quot;short&quot;, day: &quot;numeric&quot; }) + &quot; &quot; +
           d.toLocaleTimeString(undefined, { hour: &quot;2-digit&quot;, minute: &quot;2-digit&quot; });
  }

  async function renderStats() {
    const sessions = await loadSessions();

    const total = sessions.length;
    const fwd = sessions.filter(s =&gt; s.mode === &quot;forward&quot;);
    const bwd = sessions.filter(s =&gt; s.mode === &quot;backward&quot;);
    const bestFwd = fwd.length ? Math.max(...fwd.map(s =&gt; s.maxSpan)) : 0;
    const bestBwd = bwd.length ? Math.max(...bwd.map(s =&gt; s.maxSpan)) : 0;
    const avgAll = total ? (sessions.reduce((a, s) =&gt; a + s.maxSpan, 0) / total).toFixed(1) : &quot;0.0&quot;;

    statGrid.innerHTML = `
      &lt;div class=&quot;stat-card&quot;&gt;&lt;div class=&quot;n&quot;&gt;${total}&lt;/div&gt;&lt;div class=&quot;l&quot;&gt;Sessions played&lt;/div&gt;&lt;/div&gt;
      &lt;div class=&quot;stat-card&quot;&gt;&lt;div class=&quot;n&quot;&gt;${bestFwd}&lt;/div&gt;&lt;div class=&quot;l&quot;&gt;Best forward span&lt;/div&gt;&lt;/div&gt;
      &lt;div class=&quot;stat-card&quot;&gt;&lt;div class=&quot;n&quot;&gt;${bestBwd}&lt;/div&gt;&lt;div class=&quot;l&quot;&gt;Best backward span&lt;/div&gt;&lt;/div&gt;
    `;

    if (!total) {
      historyWrap.innerHTML = `&lt;div class=&quot;empty-note&quot;&gt;No sessions recorded yet in this browser.&lt;/div&gt;`;
      return;
    }

    const rows = [...sessions].reverse().map(s =&gt; `
      &lt;tr&gt;
        &lt;td&gt;${fmtDate(s.ts)}&lt;/td&gt;
        &lt;td&gt;&lt;span class=&quot;pill ${s.mode === &quot;forward&quot; ? &quot;fwd&quot; : &quot;bwd&quot;}&quot;&gt;${s.mode}&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;${s.speed}&lt;/td&gt;
        &lt;td&gt;${s.startLength}&lt;/td&gt;
        &lt;td&gt;${s.maxSpan}&lt;/td&gt;
      &lt;/tr&gt;
    `).join(&quot;&quot;);

    historyWrap.innerHTML = `
      &lt;table class=&quot;sessions&quot;&gt;
        &lt;thead&gt;
          &lt;tr&gt;&lt;th&gt;When&lt;/th&gt;&lt;th&gt;Mode&lt;/th&gt;&lt;th&gt;Speed&lt;/th&gt;&lt;th&gt;Start&lt;/th&gt;&lt;th&gt;Max span&lt;/th&gt;&lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;${rows}&lt;/tbody&gt;
      &lt;/table&gt;
      &lt;div style=&quot;margin-top:8px; font-size:11px; color:#6b756d;&quot;&gt;Average span across all sessions: ${avgAll}&lt;/div&gt;
    `;
  }

  clearStatsBtn.addEventListener(&quot;click&quot;, async () =&gt; {
    if (!confirm(&quot;Clear all recorded sessions? This cannot be undone.&quot;)) return;
    await saveSessions([]);
    await renderStats();
  });

  // ---------- Init ----------
  fitCanvas();
  drawIdle(&quot;READY&quot;);
})();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/4171839414006393754/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/4171839414006393754' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/4171839414006393754'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/4171839414006393754'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2026/07/digit-span-memory-game.html' title='Digit Span Memory Game'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR905-YgrcjpsDWWH-A2DcGGRTgibUAOcEW9fqoee7UlVojv87niZjMp97b6VA1wWictWgZ1905WAUINfps0QzgPHxZZ_JBKV3VJpfQA6aj4qU5gfYXAA2U5c2UTbGtjHlkLoKMbhjL4LZTowKUxfnqH1LxJsf25rhfZ3SvJ_lSH8O-pqD4GVR9kLW1Hpu/s72-c/Cover.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-4905448559813855281</id><published>2026-07-21T14:23:38.024+05:00</published><updated>2026-07-21T14:23:38.025+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="education"/><category scheme="http://www.blogger.com/atom/ns#" term="learning"/><category scheme="http://www.blogger.com/atom/ns#" term="Pharmaceutical Chemistry"/><category scheme="http://www.blogger.com/atom/ns#" term="Pharmaceutics"/><title type='text'>Pharmaceutical Chemistry 1A (Organic Chemistry 1) - Learning using Logical Flow and Spaced Repitition strategies</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRCPp1lcgrxeqLDos5T6WfdaP89wz74fVBCkpVI9WUb0N5n5KnLqMgtfRWaR8sYGK2uewqvWCuwuNYFS387SXeUjTW-_RCj5FG5eN1YQMl5qQKiGGrKwATCsytRwddrzTUu535jQsrRXUwkaIUOMzd3D7i9xHNT6SViQbwxTVtSOsNFs6ssaBM6TMfumt0/s891/Pharmaceutical%20Chemistry%20cover.png&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;400&quot; data-original-height=&quot;639&quot; data-original-width=&quot;891&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRCPp1lcgrxeqLDos5T6WfdaP89wz74fVBCkpVI9WUb0N5n5KnLqMgtfRWaR8sYGK2uewqvWCuwuNYFS387SXeUjTW-_RCj5FG5eN1YQMl5qQKiGGrKwATCsytRwddrzTUu535jQsrRXUwkaIUOMzd3D7i9xHNT6SViQbwxTVtSOsNFs6ssaBM6TMfumt0/s400/Pharmaceutical%20Chemistry%20cover.png&quot;/&gt;&lt;/a&gt;&lt;/div&gt;

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Organic Chemistry I — Pharmaceutical Reaction Notebook&lt;/title&gt;
&lt;style&gt;
  :root{
    --paper:#ECE6D6;
    --paper-panel:#F7F3E7;
    --ink:#212B41;
    --ink-soft:#4C5670;
    --line:rgba(33,43,65,0.16);
    --bond:#2E6F63;
    --bond-glow:#57A597;
    --amber:#B9812F;
    --brick:#9C4A42;
    --paper-shadow: 0 1px 0 rgba(33,43,65,0.06);
    --display: Georgia, &#39;Iowan Old Style&#39;, &#39;Palatino Linotype&#39;, serif;
    --mono: &#39;SF Mono&#39;, &#39;Consolas&#39;, &#39;Menlo&#39;, monospace;
    --body: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Helvetica, Arial, sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--body);}
  body{
    min-height:100vh;
    background-image:
      repeating-linear-gradient(rgba(33,43,65,0.035) 0 1px, transparent 1px 32px);
  }
  .app{max-width:1180px;margin:0 auto;padding:22px 20px 60px;}
  header.top{
    display:flex;align-items:baseline;justify-content:space-between;
    border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:18px;flex-wrap:wrap;gap:8px;
  }
  header.top h1{
    font-family:var(--display);font-size:26px;font-weight:600;margin:0;letter-spacing:0.2px;
  }
  header.top .sub{
    font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.08em;margin-top:2px;
  }
  .due-pill{
    font-family:var(--mono);font-size:12px;background:var(--ink);color:var(--paper-panel);
    padding:7px 14px;border-radius:3px;cursor:pointer;border:none;white-space:nowrap;
  }
  .due-pill.zero{background:var(--bond);}
  .due-pill:hover{opacity:0.88;}

  .layout{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start;}
  @media (max-width:880px){.layout{grid-template-columns:1fr;}}

  .panel{
    background:var(--paper-panel);border:1px solid var(--line);border-radius:2px;
    box-shadow:var(--paper-shadow);padding:14px;
  }
  .panel h2{
    font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.09em;
    color:var(--ink-soft);margin:0 0 10px 0;border-bottom:1px solid var(--line);padding-bottom:8px;
  }
  #mapCanvas{width:100%;display:block;cursor:pointer;border-radius:2px;}
  .legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);}
  .legend span.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle;}

  .unit-jump{display:flex;flex-direction:column;gap:3px;margin-top:12px;}
  .unit-jump button{
    text-align:left;background:none;border:none;border-left:3px solid transparent;
    font-family:var(--body);font-size:12.5px;color:var(--ink);padding:5px 8px;cursor:pointer;border-radius:0 2px 2px 0;
  }
  .unit-jump button:hover{background:rgba(33,43,65,0.05);}
  .unit-jump button.active{border-left-color:var(--bond);background:rgba(46,111,99,0.08);font-weight:600;}

  .right-col{display:flex;flex-direction:column;gap:16px;}

  .topic-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
  .topic-header h2{
    font-family:var(--display);font-size:20px;color:var(--ink);margin:0;border:none;padding:0;
    text-transform:none;letter-spacing:0;font-weight:600;
  }
  .eyebrow{font-family:var(--mono);font-size:10.5px;color:var(--amber);text-transform:uppercase;letter-spacing:0.09em;margin-bottom:4px;}
  .mastery-tag{font-family:var(--mono);font-size:11px;padding:4px 9px;border-radius:3px;white-space:nowrap;height:fit-content;}
  .mastery-new{background:rgba(33,43,65,0.08);color:var(--ink-soft);}
  .mastery-learning{background:rgba(185,129,47,0.16);color:var(--amber);}
  .mastery-mastered{background:rgba(46,111,99,0.16);color:var(--bond);}

  .diagram-wrap{display:flex;justify-content:center;background:var(--paper);border:1px solid var(--line);border-radius:2px;margin:12px 0;padding:6px;}
  #diagramCanvas{max-width:100%;display:block;}

  .summary{font-size:14.5px;line-height:1.6;color:var(--ink);}
  .summary b{color:var(--bond);}
  .prereq-row{font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-top:10px;}
  .prereq-row .chip{display:inline-block;background:rgba(33,43,65,0.06);padding:2px 7px;border-radius:2px;margin-right:5px;}

  .actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
  .btn{
    font-family:var(--body);font-size:13px;font-weight:600;padding:9px 16px;border-radius:3px;
    border:1px solid var(--ink);background:var(--ink);color:var(--paper-panel);cursor:pointer;
  }
  .btn.secondary{background:transparent;color:var(--ink);}
  .btn:hover{opacity:0.85;}

  /* Review mode */
  .review-card{text-align:center;}
  .review-progress{font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-bottom:10px;}
  .qtext{font-family:var(--display);font-size:18px;line-height:1.5;margin:14px 0;color:var(--ink);}
  .atext{font-family:var(--body);font-size:14.5px;line-height:1.6;color:var(--bond);background:rgba(46,111,99,0.07);
    border:1px dashed var(--bond);border-radius:3px;padding:12px 16px;margin:14px 0;text-align:left;}
  .grade-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px;}
  .grade-btn{font-family:var(--mono);font-size:11.5px;padding:10px 6px;border-radius:3px;border:1px solid var(--line);
    background:var(--paper);cursor:pointer;min-width:78px;text-align:center;}
  .grade-btn small{display:block;font-family:var(--body);font-size:9.5px;color:var(--ink-soft);margin-top:3px;}
  .grade-again{border-color:var(--brick);color:var(--brick);}
  .grade-hard{border-color:var(--amber);color:var(--amber);}
  .grade-good{border-color:var(--bond);color:var(--bond);}
  .grade-easy{background:var(--bond);border-color:var(--bond);color:var(--paper-panel);}
  .grade-btn:hover{filter:brightness(0.96);}
  .reveal-btn{margin-top:10px;}

  .empty-state{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);text-align:center;padding:30px 10px;}

  footer.notice{font-family:var(--mono);font-size:10px;color:var(--ink-soft);text-align:center;margin-top:26px;opacity:0.8;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;app&quot;&gt;
  &lt;header class=&quot;top&quot;&gt;
    &lt;div&gt;
      &lt;h1&gt;Organic Chemistry I — Reaction Notebook&lt;/h1&gt;
      &lt;div class=&quot;sub&quot;&gt;Pharmaceutical Chemistry IA · adaptive learning map · spaced repetition (SM‑2)&lt;/div&gt;
    &lt;/div&gt;
    &lt;button class=&quot;due-pill&quot; id=&quot;dueBtn&quot;&gt;loading…&lt;/button&gt;
  &lt;/header&gt;

  &lt;div class=&quot;layout&quot;&gt;
    &lt;div class=&quot;right-col&quot;&gt;
      &lt;div class=&quot;panel&quot;&gt;
        &lt;h2&gt;Concept Map — Logical Chain&lt;/h2&gt;
        &lt;canvas id=&quot;mapCanvas&quot; width=&quot;620&quot; height=&quot;720&quot;&gt;&lt;/canvas&gt;
        &lt;div class=&quot;legend&quot;&gt;
          &lt;div&gt;&lt;span class=&quot;dot&quot; style=&quot;background:#B7B2A0;&quot;&gt;&lt;/span&gt;Not started&lt;/div&gt;
          &lt;div&gt;&lt;span class=&quot;dot&quot; style=&quot;background:var(--amber);&quot;&gt;&lt;/span&gt;Learning&lt;/div&gt;
          &lt;div&gt;&lt;span class=&quot;dot&quot; style=&quot;background:var(--bond);&quot;&gt;&lt;/span&gt;Mastered&lt;/div&gt;
          &lt;div&gt;&lt;span class=&quot;dot&quot; style=&quot;background:var(--brick);&quot;&gt;&lt;/span&gt;Due for review&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;unit-jump&quot; id=&quot;unitJump&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;right-col&quot; id=&quot;mainCol&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;footer class=&quot;notice&quot;&gt;Progress is saved to your account automatically (window.storage) so reviews are timed correctly across visits — it is not shared with other users.&lt;/footer&gt;
&lt;/div&gt;

&lt;script&gt;
/* ============================= DATA MODEL ============================= */
// unit: 1 foundations, 2 functional groups, 3 reactions, 4 stereochemistry
const TOPICS = [
// ---------------- UNIT 1: FOUNDATIONS ----------------
{id:&#39;bonding&#39;, unit:1, name:&#39;Chemical Bonding &amp; Hybridization&#39;, prereqs:[],
 summary:&quot;Carbon&#39;s valence electrons mix into &lt;b&gt;sp3, sp2, or sp&lt;/b&gt; hybrid orbitals, fixing bond angles (109.5°, 120°, 180°) and geometry. Pharmaceutical relevance: hybridization state at a reactive centre (e.g. carbonyl sp2 carbon) predicts whether a drug metabolite is planar and where a nucleophile can attack.&quot;,
 diagram:{type:&#39;orbital&#39;, hybrid:&#39;sp3&#39;},
 cards:[
   {q:&quot;What bond angle is associated with sp3 hybridization?&quot;, a:&quot;109.5°, tetrahedral geometry — seen in saturated carbons of steroid nuclei and alkyl side chains.&quot;},
   {q:&quot;Why does the carbonyl carbon of an amide (sp2) resist nucleophilic attack more than a ketone?&quot;, a:&quot;Because resonance donation from the adjacent N lone pair into the sp2 π-system lowers the electrophilicity of the carbonyl carbon (relevant to amide/peptide bond stability in drugs).&quot;}
 ]},
{id:&#39;electroneg&#39;, unit:1, name:&#39;Electronegativity&#39;, prereqs:[&#39;bonding&#39;],
 summary:&quot;Electronegativity differences polarize bonds, creating partial charges (δ+/δ−) that dictate where nucleophiles and electrophiles attack in a drug molecule.&quot;,
 diagram:{type:&#39;hbond-scale&#39;},
 cards:[
   {q:&quot;Which is more electronegative: oxygen or nitrogen, and why does this matter for amine vs alcohol basicity?&quot;, a:&quot;Oxygen (3.44) is more electronegative than nitrogen (3.04); nitrogen holds its lone pair less tightly, making amines better nucleophiles/bases than alcohols — key in amine-drug protonation.&quot;},
   {q:&quot;How does electronegativity explain the acidity trend HF &gt; HCl in aqueous behaviour of halogenated drugs?&quot;, a:&quot;It&#39;s actually bond strength/size dominating for HX acidity, but electronegativity of the halogen governs inductive withdrawal that increases acidity of nearby O–H or N–H groups in a molecule.&quot;}
 ]},
{id:&#39;dipole&#39;, unit:1, name:&#39;Dipole Moment&#39;, prereqs:[&#39;electroneg&#39;],
 summary:&quot;Net vector sum of bond dipoles gives a molecule&#39;s dipole moment, influencing solubility, membrane permeability, and receptor binding orientation of a drug.&quot;,
 diagram:{type:&#39;hbond-scale&#39;, dipole:true},
 cards:[
   {q:&quot;Why is the dipole moment of para-disubstituted benzene rings often near zero even with polar substituents?&quot;, a:&quot;Symmetric opposite substituents point their bond dipoles in opposite directions, cancelling the net vector — important when designing symmetric prodrugs.&quot;},
   {q:&quot;How does a high molecular dipole moment generally affect aqueous solubility of a drug candidate?&quot;, a:&quot;Higher dipole moments favour stronger dipole–dipole/H-bonding interactions with water, generally improving aqueous solubility.&quot;}
 ]},
{id:&#39;inductive&#39;, unit:1, name:&#39;Inductive Effect&#39;, prereqs:[&#39;electroneg&#39;],
 summary:&quot;Electron withdrawal or donation transmitted through σ-bonds (not resonance). Electron-withdrawing groups (–I, –Cl, –NO2) increase acidity of nearby carboxylic acids — a key tool for tuning pKa of pharmaceutical acids.&quot;,
 diagram:{type:&#39;arrow-map&#39;, kind:&#39;inductive&#39;},
 cards:[
   {q:&quot;Why is trichloroacetic acid a much stronger acid than acetic acid?&quot;, a:&quot;The three electronegative chlorines withdraw electron density inductively through σ-bonds, stabilizing the conjugate base carboxylate and increasing acidity.&quot;},
   {q:&quot;Does the inductive effect weaken with distance from the reacting centre?&quot;, a:&quot;Yes — inductive effects fall off rapidly with each additional bond, unlike resonance which can act across a conjugated system.&quot;}
 ]},
{id:&#39;resonance&#39;, unit:1, name:&#39;Resonance &amp; Conjugation&#39;, prereqs:[&#39;bonding&#39;],
 summary:&quot;Delocalization of π-electrons or lone pairs across adjacent p-orbitals gives a molecule extra stability and spreads charge — the basis of aromaticity, carboxylate stability, and many chromophores in drug molecules.&quot;,
 diagram:{type:&#39;arrow-map&#39;, kind:&#39;resonance&#39;},
 cards:[
   {q:&quot;Why are the two C–O bonds in a carboxylate anion identical in length?&quot;, a:&quot;Resonance delocalizes the negative charge equally over both oxygens, giving each C–O bond equal partial double-bond character.&quot;},
   {q:&quot;What structural feature is required for resonance to occur?&quot;, a:&quot;Adjacent, parallel p-orbitals (conjugation) allowing overlap across a π-system or lone pair into a π-system.&quot;}
 ]},
{id:&#39;mesomeric&#39;, unit:1, name:&#39;Mesomeric (Resonance) Effect&#39;, prereqs:[&#39;resonance&#39;],
 summary:&quot;The +M/−M effect describes how substituents donate (+M, e.g. –OH, –NH2) or withdraw (−M, e.g. –NO2, –C=O) electron density through a conjugated π-system, directing electrophilic aromatic substitution in drug synthesis.&quot;,
 diagram:{type:&#39;arrow-map&#39;, kind:&#39;mesomeric&#39;},
 cards:[
   {q:&quot;Is the –NH2 group on aniline a +M or −M donor, and what position does it direct EAS to?&quot;, a:&quot;+M donor; it directs electrophilic aromatic substitution to the ortho/para positions by resonance donation of the nitrogen lone pair.&quot;},
   {q:&quot;Why does a nitro group deactivate and meta-direct an aromatic ring?&quot;, a:&quot;–NO2 is a strong −M (and −I) withdrawer, pulling electron density from ortho/para positions preferentially, leaving meta relatively more electron-rich.&quot;}
 ]},
{id:&#39;hyperconj&#39;, unit:1, name:&#39;Hyperconjugation&#39;, prereqs:[&#39;bonding&#39;],
 summary:&quot;Overlap of a filled σ(C–H) or σ(C–C) orbital with an adjacent empty or π orbital stabilizes carbocations and alkenes — explains why more substituted carbocation intermediates (relevant to SN1 drug-degradation pathways) are more stable.&quot;,
 diagram:{type:&#39;arrow-map&#39;, kind:&#39;hyperconjugation&#39;},
 cards:[
   {q:&quot;Why is a tertiary carbocation more stable than a primary one?&quot;, a:&quot;More adjacent C–H (or C–C) σ-bonds can hyperconjugate into the empty p-orbital, delocalizing positive charge — tertiary has the most such bonds.&quot;},
   {q:&quot;Does hyperconjugation require adjacent π-orbitals like resonance does?&quot;, a:&quot;No — it only requires a σ-bond aligned with an empty or π orbital, unlike resonance which needs a continuous conjugated π-system.&quot;}
 ]},
{id:&#39;electromeric&#39;, unit:1, name:&#39;Electromeric Effect&#39;, prereqs:[&#39;resonance&#39;],
 summary:&quot;A temporary, complete shift of a π-electron pair to one atom in the presence of an attacking reagent, occurring only during a reaction (not a permanent ground-state effect like mesomeric).&quot;,
 diagram:{type:&#39;arrow-map&#39;, kind:&#39;electromeric&#39;},
 cards:[
   {q:&quot;How does the electromeric effect differ from the mesomeric effect in duration?&quot;, a:&quot;Electromeric effect is a temporary polarization occurring only in the presence of an attacking reagent during a reaction; mesomeric effect is a permanent ground-state property of the molecule.&quot;},
   {q:&quot;Give a pharmaceutically relevant reaction where the electromeric effect operates.&quot;, a:&quot;Electrophilic addition to a C=C or C=O bond of a drug precursor, e.g. protonation of a carbonyl during acid-catalysed hydrolysis, where the π electrons shift fully onto oxygen.&quot;}
 ]},
{id:&#39;aromaticity&#39;, unit:1, name:&#39;Aromaticity&#39;, prereqs:[&#39;resonance&#39;,&#39;hyperconj&#39;],
 summary:&quot;Hückel&#39;s rule: a cyclic, planar, fully conjugated system with 4n+2 π-electrons is aromatic, gaining extra stability. Aromatic rings (benzene, purine, pyridine) are core pharmacophores in countless drugs.&quot;,
 diagram:{type:&#39;orbital&#39;, hybrid:&#39;aromatic&#39;},
 cards:[
   {q:&quot;State Hückel&#39;s rule for aromaticity.&quot;, a:&quot;A ring is aromatic if it is cyclic, planar, fully conjugated, and contains 4n+2 π-electrons (n = 0,1,2…).&quot;},
   {q:&quot;Is pyridine&#39;s nitrogen lone pair part of the aromatic π-system?&quot;, a:&quot;No — pyridine&#39;s N lone pair sits in an sp2 orbital in the ring plane, not conjugated into the π-system, which is why pyridine remains basic while still being aromatic.&quot;}
 ]},
{id:&#39;hbond&#39;, unit1:1, unit:1, name:&#39;Hydrogen Bonding&#39;, prereqs:[&#39;electroneg&#39;],
 summary:&quot;A H atom bonded to O, N, or F forms an additional weak dipole–dipole interaction with a lone pair on a nearby electronegative atom. H-bonding governs drug–receptor binding, aqueous solubility, and crystal polymorphism.&quot;,
 diagram:{type:&#39;hbond&#39;},
 cards:[
   {q:&quot;Why does a drug with more H-bond donors/acceptors often have lower membrane permeability (Lipinski&#39;s Rule of 5)?&quot;, a:&quot;Extensive H-bonding to water stabilizes the molecule in the aqueous phase, making it energetically costly to desolvate and cross the lipid bilayer.&quot;},
   {q:&quot;What structural motif in tetracyclines relies heavily on intramolecular hydrogen bonding for their bioactive conformation?&quot;, a:&quot;The linearly fused ring system with adjacent keto/enol and hydroxyl groups forms intramolecular H-bonds that stabilize the biologically active keto-enol tautomer.&quot;}
 ]},
{id:&#39;steric&#39;, unit:1, name:&#39;Steric Effect&#39;, prereqs:[&#39;bonding&#39;],
 summary:&quot;Bulky groups near a reaction centre physically hinder approach of a reagent, slowing reactions or diverting mechanism (e.g. favouring SN1/E1 over SN2/E2). Steric bulk around a drug&#39;s pharmacophore also affects receptor fit.&quot;,
 diagram:{type:&#39;arrow-map&#39;, kind:&#39;steric&#39;},
 cards:[
   {q:&quot;Why do tertiary alkyl halides not undergo SN2 reactions readily?&quot;, a:&quot;Three bulky alkyl groups around the electrophilic carbon sterically block backside nucleophilic attack required for the SN2 transition state.&quot;},
   {q:&quot;How can steric bulk around a carbonyl slow ester hydrolysis (relevant to prodrug design)?&quot;, a:&quot;Bulky substituents near the carbonyl hinder nucleophilic (e.g. water/esterase) attack on the sp2 carbon, slowing hydrolysis and prolonging prodrug half-life.&quot;}
 ]},
{id:&#39;tautomerism&#39;, unit:1, name:&#39;Tautomerism&#39;, prereqs:[&#39;resonance&#39;,&#39;hbond&#39;],
 summary:&quot;Rapid interconversion between structural isomers differing in the position of a proton and a double bond (keto ↔ enol; lactam ↔ lactim). The dominant tautomer often determines a drug&#39;s biological activity and H-bonding pattern.&quot;,
 diagram:{type:&#39;tautomer&#39;},
 cards:[
   {q:&quot;In tetracycline antibiotics, which tautomer (keto or enol) predominates and why is it relevant?&quot;, a:&quot;The enolic/keto-enol tautomer stabilized by intramolecular H-bonding predominates and is essential for chelating Mg2+/Ca2+ and for antibacterial activity.&quot;},
   {q:&quot;What is the difference between lactam and lactim tautomers, and why does it matter for nucleobase pairing?&quot;, a:&quot;Lactam (C=O, N–H) vs lactim (C–OH, C=N); the lactam form is normally favoured and needed for correct Watson–Crick base pairing — the rare lactim form causes mutagenic mispairing.&quot;}
 ]},

// ---------------- UNIT 2: FUNCTIONAL GROUPS ----------------
{id:&#39;alkanes&#39;, unit:2, name:&#39;Alkanes&#39;, prereqs:[&#39;bonding&#39;,&#39;steric&#39;], iupac:&quot;CnH2n+2, suffix -ane&quot;,
 summary:&quot;Saturated sp3 hydrocarbons; the inert &#39;scaffold&#39; of most drug molecules. Named by longest chain + substituent locants (IUPAC). Provide lipophilicity for membrane penetration.&quot;,
 diagram:{type:&#39;bond-line&#39;, chain:6, group:null},
 cards:[
   {q:&quot;What is the general molecular formula for an acyclic alkane?&quot;, a:&quot;CnH2n+2.&quot;},
   {q:&quot;Why does increasing alkyl chain length generally increase a drug&#39;s lipophilicity (log P)?&quot;, a:&quot;Longer non-polar carbon chains have less favourable interaction with water and partition more readily into lipid membranes.&quot;}
 ]},
{id:&#39;alkenes&#39;, unit:2, name:&#39;Alkenes&#39;, prereqs:[&#39;alkanes&#39;,&#39;hyperconj&#39;], iupac:&quot;suffix -ene&quot;,
 summary:&quot;Contain a C=C sp2 double bond; site of electrophilic addition reactions and geometric (cis/trans) isomerism, important in vitamin A/retinoid and steroid pharmacophores.&quot;,
 diagram:{type:&#39;bond-line&#39;, chain:5, group:&#39;ene&#39;, groupPos:2},
 cards:[
   {q:&quot;What type of reaction do alkenes typically undergo with electrophiles like Br2 or HBr?&quot;, a:&quot;Electrophilic addition, proceeding through a bridged halonium ion or carbocation intermediate.&quot;},
   {q:&quot;Why is Markovnikov&#39;s rule relevant when adding HX to an unsymmetrical alkene drug precursor?&quot;, a:&quot;The more stable (more substituted) carbocation forms preferentially, so H adds to the carbon with more H&#39;s already and X to the more substituted carbon.&quot;}
 ]},
{id:&#39;alkynes&#39;, unit:2, name:&#39;Alkynes&#39;, prereqs:[&#39;alkenes&#39;], iupac:&quot;suffix -yne&quot;,
 summary:&quot;Contain a C≡C sp triple bond, linear geometry; found in ethinyl-substituted steroidal drugs (e.g. ethinylestradiol) to block metabolic oxidation.&quot;,
 diagram:{type:&#39;bond-line&#39;, chain:5, group:&#39;yne&#39;, groupPos:2},
 cards:[
   {q:&quot;Why is the 17α-ethinyl group added to oral contraceptive steroids?&quot;, a:&quot;The alkyne substituent sterically and electronically blocks first-pass hepatic oxidative metabolism at C17, improving oral bioavailability.&quot;},
   {q:&quot;What is the hybridization and bond angle of an alkyne carbon?&quot;, a:&quot;sp hybridized, 180° linear geometry.&quot;}
 ]},
{id:&#39;alkylhalides&#39;, unit:2, name:&#39;Alkyl Halides&#39;, prereqs:[&#39;alkanes&#39;,&#39;inductive&#39;], iupac:&quot;halo- prefix&quot;,
 summary:&quot;C–X bond (X = F, Cl, Br, I) is polarized and a good leaving group platform for SN1/SN2 substitution — the classic entry point for building C–N, C–O, and C–C bonds in drug synthesis.&quot;,
 diagram:{type:&#39;bond-line&#39;, chain:5, group:&#39;X&#39;, groupPos:3},
 cards:[
   {q:&quot;Which halide (Cl, Br, I) is generally the best leaving group and why?&quot;, a:&quot;Iodide — the C–I bond is weakest and the large, polarizable iodide ion best stabilizes the developing negative charge on leaving.&quot;},
   {q:&quot;Why are fluorinated drug analogues often metabolically more stable?&quot;, a:&quot;The strong, short C–F bond resists oxidative and hydrolytic cleavage by metabolic enzymes, unlike C–Cl/Br/I.&quot;}
 ]},
{id:&#39;alcohols&#39;, unit:2, name:&#39;Alcohols &amp; Phenols&#39;, prereqs:[&#39;alkylhalides&#39;,&#39;hbond&#39;,&#39;aromaticity&#39;], iupac:&quot;suffix -ol&quot;,
 summary:&quot;–OH on sp3 carbon (alcohol) or aromatic ring (phenol). Phenols are far more acidic due to resonance stabilization of the phenoxide ion — relevant to drugs like paracetamol and morphine.&quot;,
 diagram:{type:&#39;bond-line&#39;, chain:5, group:&#39;OH&#39;, groupPos:2},
 cards:[
   {q:&quot;Why is phenol (pKa ~10) far more acidic than cyclohexanol (pKa ~18)?&quot;, a:&quot;The phenoxide anion is resonance-stabilized by delocalization of the negative charge into the aromatic ring, unlike a simple alkoxide.&quot;},
   {q:&quot;What functional group is responsible for paracetamol&#39;s antipyretic activity being metabolically limited by conjugation?&quot;, a:&quot;Its phenolic –OH undergoes glucuronidation/sulfation, which is the major clearance pathway and the basis of dose-limiting hepatotoxic metabolite (NAPQI) formation at overdose.&quot;}
 ]},
{id:&#39;ethers&#39;, unit:2, name:&#39;Ethers&#39;, prereqs:[&#39;alcohols&#39;], iupac:&quot;alkoxy- prefix / suffix -oxide&quot;,
 summary:&quot;R–O–R&#39; linkage; chemically inert but valuable as metabolically stable bioisosteres of esters/alcohols and as solvents/protecting groups in synthesis.&quot;,
 diagram:{type:&#39;bond-line&#39;, chain:5, group:&#39;OR&#39;, groupPos:2},
 cards:[
   {q:&quot;Why are ethers generally resistant to hydrolysis compared to esters?&quot;, a:&quot;The C–O bond in ethers lacks an adjacent carbonyl to activate it toward nucleophilic or acid/base-catalysed cleavage, making ethers far more chemically inert.&quot;},
   {q:&quot;Name one reason ethers (e.g. diethyl ether class solvents) are used in drug extraction/synthesis.&quot;, a:&quot;Low reactivity and good solvating power for organic compounds without interfering in most reactions.&quot;}
 ]},
{id:&#39;amines&#39;, unit:2, name:&#39;Amines&#39;, prereqs:[&#39;alkylhalides&#39;,&#39;hbond&#39;], iupac:&quot;suffix -amine&quot;,
 summary:&quot;sp3 nitrogen with a lone pair — the most common basic, ionizable pharmacophore, responsible for salt formation (hydrochlorides), receptor binding, and CNS penetration of countless drugs.&quot;,
 diagram:{type:&#39;bond-line&#39;, chain:5, group:&#39;NH2&#39;, groupPos:2},
 cards:[
   {q:&quot;Why are most CNS-active drugs formulated as amine hydrochloride salts?&quot;, a:&quot;Protonation of the basic amine nitrogen improves aqueous solubility and crystallinity while the free base form crosses the blood–brain barrier after dissociation.&quot;},
   {q:&quot;Rank basicity: aliphatic amine vs aromatic amine (aniline) vs amide nitrogen.&quot;, a:&quot;Aliphatic amine &gt; aromatic amine (aniline) &gt; amide nitrogen, because resonance delocalization of the lone pair into the ring (aniline) or carbonyl (amide) reduces its availability to accept a proton.&quot;}
 ]},
{id:&#39;aldketones&#39;, unit:2, name:&#39;Aldehydes &amp; Ketones&#39;, prereqs:[&#39;alcohols&#39;], iupac:&quot;suffix -al / -one&quot;,
 summary:&quot;Carbonyl (C=O) on a terminal (aldehyde) or internal (ketone) carbon; highly electrophilic sp2 carbon central to nucleophilic addition chemistry used to build many drug intermediates (e.g. steroid side-chain ketones).&quot;,
 diagram:{type:&#39;bond-line&#39;, chain:5, group:&#39;C=O&#39;, groupPos:2},
 cards:[
   {q:&quot;Why are aldehydes generally more reactive toward nucleophilic addition than ketones?&quot;, a:&quot;Aldehydes have less steric hindrance (only one alkyl/aryl group) and less electron donation to the carbonyl carbon, leaving it more electrophilic.&quot;},
   {q:&quot;What test distinguishes aldehydes from ketones based on their oxidizability?&quot;, a:&quot;Tollens&#39; or Fehling&#39;s test — aldehydes are readily oxidized to carboxylic acids (positive test); ketones are not oxidized under these mild conditions.&quot;}
 ]},
{id:&#39;carbacids&#39;, unit:2, name:&#39;Carboxylic Acids&#39;, prereqs:[&#39;aldketones&#39;,&#39;inductive&#39;], iupac:&quot;suffix -oic acid&quot;,
 summary:&quot;–COOH group; acidic due to resonance-stabilized carboxylate conjugate base. The pharmacophore of NSAIDs (ibuprofen, aspirin) and many other acidic drugs.&quot;,
 diagram:{type:&#39;bond-line&#39;, chain:5, group:&#39;COOH&#39;, groupPos:2},
 cards:[
   {q:&quot;Why is acetic acid (pKa 4.76) far more acidic than ethanol (pKa 16)?&quot;, a:&quot;The carboxylate anion is resonance-stabilized across two equivalent C–O bonds, whereas an alkoxide has no such delocalization.&quot;},
   {q:&quot;How does an electron-withdrawing substituent (e.g. Cl) near the –COOH affect its acidity?&quot;, a:&quot;It inductively withdraws electron density, further stabilizing the conjugate base and increasing acid strength (e.g. chloroacetic acid &gt; acetic acid).&quot;}
 ]},
{id:&#39;esters&#39;, unit:2, name:&#39;Esters&#39;, prereqs:[&#39;carbacids&#39;,&#39;alcohols&#39;], iupac:&quot;alkyl -oate&quot;,
 summary:&quot;R–CO–O–R&#39;, formed by Fischer esterification; widely used as prodrug linkages (e.g. enalapril) to mask polar acids and improve oral absorption, later hydrolysed in vivo by esterases.&quot;,
 diagram:{type:&#39;bond-line&#39;, chain:5, group:&#39;COOR&#39;, groupPos:2},
 cards:[
   {q:&quot;Why are ester prodrugs commonly used to improve oral bioavailability of carboxylic-acid drugs?&quot;, a:&quot;Esterification masks the ionizable, polar –COOH, increasing lipophilicity and passive membrane permeability; esterases then hydrolyse it back to the active acid in vivo.&quot;},
   {q:&quot;What catalyst and mechanism underlie Fischer esterification?&quot;, a:&quot;Acid (H2SO4)-catalysed nucleophilic acyl substitution: protonation of the carbonyl, nucleophilic attack by the alcohol, proton transfer, then loss of water.&quot;}
 ]},
{id:&#39;amides&#39;, unit:2, name:&#39;Amides&#39;, prereqs:[&#39;carbacids&#39;,&#39;amines&#39;], iupac:&quot;suffix -amide&quot;,
 summary:&quot;R–CO–NH–R&#39;; the peptide bond of proteins and a highly stable, resonance-locked, planar linkage exploited in β-lactam antibiotics and many stable drug scaffolds.&quot;,
 diagram:{type:&#39;bond-line&#39;, chain:5, group:&#39;CONH&#39;, groupPos:2},
 cards:[
   {q:&quot;Why is the amide C–N bond shorter and more rigid (planar) than a typical C–N single bond?&quot;, a:&quot;Resonance delocalization of the nitrogen lone pair into the carbonyl π-system gives partial double-bond character, restricting rotation and shortening the bond.&quot;},
   {q:&quot;Why is the β-lactam ring in penicillins unusually reactive despite being an amide?&quot;, a:&quot;Ring strain in the four-membered β-lactam prevents the nitrogen lone pair from achieving optimal resonance overlap with the carbonyl, making it more electrophilic and reactive toward nucleophilic ring-opening (its mechanism of antibacterial action).&quot;}
 ]},
{id:&#39;aromaticcpds&#39;, unit:2, name:&#39;Aromatic Compounds&#39;, prereqs:[&#39;aromaticity&#39;,&#39;alkylhalides&#39;], iupac:&quot;benzene-derived nomenclature&quot;,
 summary:&quot;Benzene and substituted arenes undergo electrophilic aromatic substitution (EAS) rather than addition, preserving aromatic stability. Aromatic rings are the most common scaffold across pharmaceuticals.&quot;,
 diagram:{type:&#39;orbital&#39;, hybrid:&#39;aromatic-sub&#39;},
 cards:[
   {q:&quot;Why does benzene undergo substitution rather than addition with Br2?&quot;, a:&quot;Addition would destroy the aromatic stabilization; substitution regenerates the aromatic ring after the electrophile replaces a hydrogen.&quot;},
   {q:&quot;How do ortho/para-directing groups differ from meta-directing groups mechanistically?&quot;, a:&quot;Ortho/para directors (e.g. –OH, –NH2, alkyl) stabilize the arenium (Wheland) intermediate at those positions via resonance or hyperconjugation donation; meta directors (e.g. –NO2, –COOH) withdraw electron density, making ortho/para intermediates relatively less stable.&quot;}
 ]},

// ---------------- UNIT 3: REACTIONS ----------------
{id:&#39;redox&#39;, unit:3, name:&#39;Oxidation &amp; Reduction&#39;, prereqs:[&#39;alcohols&#39;,&#39;aldketones&#39;],
 summary:&quot;Interconversion along the oxidation ladder: alcohol → aldehyde/ketone → carboxylic acid (oxidation) and the reverse (reduction). Central to both drug synthesis steps and Phase I metabolic biotransformation.&quot;,
 diagram:{type:&#39;mechanism&#39;, kind:&#39;redox&#39;},
 cards:[
   {q:&quot;What oxidation state ladder does a primary alcohol pass through upon oxidation?&quot;, a:&quot;Primary alcohol → aldehyde → carboxylic acid, each step removing/adding a pair of H&#39;s (or equivalent).&quot;},
   {q:&quot;What reducing agent selectively reduces esters/acids to alcohols without over-reduction issues, commonly used in drug synthesis?&quot;, a:&quot;LiAlH4 (lithium aluminium hydride) strongly reduces esters, acids, and amides to alcohols/amines; NaBH4 is milder and reduces aldehydes/ketones selectively.&quot;}
 ]},
{id:&#39;snreactions&#39;, unit:3, name:&#39;Nucleophilic Substitution (SN1 / SN2)&#39;, prereqs:[&#39;alkylhalides&#39;,&#39;steric&#39;],
 summary:&quot;SN2: single-step, backside attack, inversion of configuration, favoured by primary substrates and strong nucleophiles. SN1: two-step via a carbocation, racemization, favoured by tertiary substrates and polar protic solvents.&quot;,
 diagram:{type:&#39;mechanism-sn&#39;},
 cards:[
   {q:&quot;What happens to stereochemistry at the reacting carbon in an SN2 reaction?&quot;, a:&quot;Inversion of configuration (Walden inversion), because the nucleophile attacks from the side opposite the leaving group.&quot;},
   {q:&quot;Why does SN1 substitution on a chiral alkyl halide typically give a racemic (or near-racemic) product?&quot;, a:&quot;The planar carbocation intermediate can be attacked by the nucleophile from either face with roughly equal probability, producing both enantiomers.&quot;}
 ]},
{id:&#39;elimination&#39;, unit:3, name:&#39;Elimination Reactions (E1/E2)&#39;, prereqs:[&#39;snreactions&#39;],
 summary:&quot;Loss of a leaving group and a β-hydrogen forms an alkene. E2 is concerted and stereospecific (anti-periplanar); E1 proceeds via a carbocation and favours the more substituted (Zaitsev) alkene.&quot;,
 diagram:{type:&#39;mechanism&#39;, kind:&#39;elimination&#39;},
 cards:[
   {q:&quot;What geometry is required between the leaving group and β-H for an E2 reaction?&quot;, a:&quot;Anti-periplanar arrangement (180° dihedral), allowing optimal orbital overlap in the concerted transition state.&quot;},
   {q:&quot;According to Zaitsev&#39;s rule, which alkene product is usually favoured in elimination?&quot;, a:&quot;The more substituted (more stable) alkene.&quot;}
 ]},
{id:&#39;addition&#39;, unit:3, name:&#39;Addition Reactions&#39;, prereqs:[&#39;alkenes&#39;,&#39;alkynes&#39;],
 summary:&quot;Electrophiles or nucleophiles add across a π-bond (C=C or C=O), converting an unsaturated system to a saturated one — used to install halogens, hydroxyls, or hydrogens onto drug intermediates.&quot;,
 diagram:{type:&#39;mechanism&#39;, kind:&#39;addition&#39;},
 cards:[
   {q:&quot;What is the regiochemical outcome of Markovnikov addition of HBr to propene?&quot;, a:&quot;Br adds to the more substituted carbon (C2), H to the less substituted (C1), via the more stable secondary carbocation intermediate.&quot;},
   {q:&quot;What is anti-Markovnikov addition and what reagent condition produces it?&quot;, a:&quot;HBr addition in the presence of peroxides proceeds through a radical mechanism, placing Br on the less substituted carbon — opposite to ionic Markovnikov addition.&quot;}
 ]},
{id:&#39;acylation&#39;, unit:3, name:&#39;Acylation &amp; Esterification&#39;, prereqs:[&#39;carbacids&#39;,&#39;esters&#39;,&#39;amides&#39;],
 summary:&quot;Nucleophilic acyl substitution: an acyl group (RCO–) is transferred from a leaving group to a nucleophile (O, N). Basis of aspirin synthesis (acetylation of salicylic acid) and amide-bond-forming drug synthesis steps.&quot;,
 diagram:{type:&#39;mechanism&#39;, kind:&#39;acylation&#39;},
 cards:[
   {q:&quot;What reagent acetylates salicylic acid to form aspirin, and what type of mechanism is involved?&quot;, a:&quot;Acetic anhydride (or acetyl chloride); nucleophilic acyl substitution at the anhydride&#39;s carbonyl carbon by the phenolic –OH of salicylic acid.&quot;},
   {q:&quot;Why is nucleophilic acyl substitution called &#39;addition-elimination&#39; at the mechanistic level?&quot;, a:&quot;The nucleophile first adds to the carbonyl carbon forming a tetrahedral intermediate, which then eliminates the leaving group to restore the C=O.&quot;}
 ]},
{id:&#39;rearrangement&#39;, unit:3, name:&#39;Rearrangement Reactions&#39;, prereqs:[&#39;snreactions&#39;],
 summary:&quot;A carbocation intermediate can undergo a 1,2-hydride or alkyl shift to form a more stable carbocation, changing the carbon skeleton — a source of unexpected by-products in SN1/E1 drug synthesis routes.&quot;,
 diagram:{type:&#39;mechanism&#39;, kind:&#39;rearrangement&#39;},
 cards:[
   {q:&quot;Why might a secondary carbocation rearrange to a tertiary one during an SN1 reaction?&quot;, a:&quot;A 1,2-hydride or methyl shift can occur if it forms a more stable (more substituted) carbocation, lowering the energy of the intermediate.&quot;},
   {q:&quot;What is the practical consequence of carbocation rearrangement for a medicinal chemist running an SN1/E1 step?&quot;, a:&quot;It can generate unwanted rearranged regiochemical by-products, reducing yield/purity of the intended drug intermediate and requiring purification or route redesign.&quot;}
 ]},
{id:&#39;polymerization&#39;, unit:3, name:&#39;Polymerization Reactions&#39;, prereqs:[&#39;alkenes&#39;],
 summary:&quot;Repeated addition of monomer units (often via radical or ionic chain mechanisms) builds long-chain polymers — relevant to pharmaceutical excipients, controlled-release matrices, and biodegradable drug-delivery polymers (e.g. PLGA).&quot;,
 diagram:{type:&#39;mechanism&#39;, kind:&#39;polymerization&#39;},
 cards:[
   {q:&quot;What are the three basic stages of a radical chain polymerization?&quot;, a:&quot;Initiation (radical formation), propagation (repeated monomer addition), and termination (radical combination or disproportionation).&quot;},
   {q:&quot;Why are biodegradable polymers like PLGA useful in controlled-release drug delivery?&quot;, a:&quot;Their ester linkages hydrolyse gradually in vivo, releasing the encapsulated drug at a controlled rate as the polymer matrix degrades.&quot;}
 ]},

// ---------------- UNIT 4: STEREOCHEMISTRY ----------------
{id:&#39;stereointro&#39;, unit:4, name:&#39;Stereoisomerism (Overview)&#39;, prereqs:[&#39;bonding&#39;],
 summary:&quot;Stereoisomers share the same connectivity but differ in 3D spatial arrangement, split into geometrical (cis/trans, E/Z) and optical (chirality-based) isomerism — critically important since one enantiomer of a drug can be active while its mirror image is inactive or toxic.&quot;,
 diagram:{type:&#39;stereo&#39;, kind:&#39;overview&#39;},
 cards:[
   {q:&quot;What is the key difference between constitutional isomers and stereoisomers?&quot;, a:&quot;Constitutional isomers differ in atom connectivity; stereoisomers share identical connectivity but differ in 3D spatial arrangement.&quot;},
   {q:&quot;Give the classic pharmaceutical example illustrating why stereoisomerism matters clinically.&quot;, a:&quot;Thalidomide: one enantiomer was sedative/effective while the other caused severe teratogenic birth defects, illustrating why enantiomeric purity matters in drug development.&quot;}
 ]},
{id:&#39;chirality&#39;, unit:4, name:&#39;Chirality &amp; Optical Isomerism&#39;, prereqs:[&#39;stereointro&#39;],
 summary:&quot;A chiral carbon has four different substituents, making the molecule non-superimposable on its mirror image (enantiomers). Enantiomers rotate plane-polarized light in opposite directions (dextro +/ levo −).&quot;,
 diagram:{type:&#39;stereo&#39;, kind:&#39;chiral-mirror&#39;},
 cards:[
   {q:&quot;What structural feature defines a chiral (stereogenic) carbon?&quot;, a:&quot;A carbon bonded to four different substituents/groups.&quot;},
   {q:&quot;What is the difference between the terms &#39;dextrorotatory (+)&#39; and &#39;R configuration&#39;?&quot;, a:&quot;Dextrorotatory/(+) describes the experimentally measured direction of optical rotation of plane-polarized light; R/S describes the assigned spatial configuration by CIP priority rules — the two are not directly correlated and must be determined independently.&quot;}
 ]},
{id:&#39;rs&#39;, unit:4, name:&#39;R/S (CIP) System&#39;, prereqs:[&#39;chirality&#39;],
 summary:&quot;Cahn-Ingold-Prelog rules rank substituents on a chiral centre by atomic number; viewing with the lowest priority pointing away, a clockwise 1→2→3 sequence is R, counter-clockwise is S — the standard way drug stereocentres are formally named.&quot;,
 diagram:{type:&#39;stereo&#39;, kind:&#39;rs-priority&#39;},
 cards:[
   {q:&quot;In CIP priority assignment, which substituent generally ranks higher: –OH or –NH2?&quot;, a:&quot;–OH ranks higher, since oxygen (atomic number 8) outranks nitrogen (atomic number 7).&quot;},
   {q:&quot;How is R vs S determined once the four groups are prioritized 1 (highest) to 4 (lowest)?&quot;, a:&quot;Orient the molecule with the lowest priority (4) group pointing away from the viewer; if 1→2→3 traces clockwise, it&#39;s R; if counter-clockwise, it&#39;s S.&quot;}
 ]},
{id:&#39;multichiral&#39;, unit:4, name:&#39;Molecules with Multiple Chiral Centres&#39;, prereqs:[&#39;rs&#39;],
 summary:&quot;With n stereocentres, up to 2^n stereoisomers are possible. Diastereomers (non-mirror-image stereoisomers) have different physical properties, unlike enantiomers, which matters greatly for multi-stereocentre drugs like many antibiotics and steroids.&quot;,
 diagram:{type:&#39;stereo&#39;, kind:&#39;multi-chiral&#39;},
 cards:[
   {q:&quot;How many maximum stereoisomers are possible for a molecule with 3 independent chiral centres?&quot;, a:&quot;2^3 = 8 stereoisomers (assuming no internal symmetry / meso forms).&quot;},
   {q:&quot;What is a meso compound, and why does it not exist as an enantiomeric pair?&quot;, a:&quot;A meso compound has multiple stereocentres but also an internal plane of symmetry, making it superimposable on its own mirror image — it is achiral despite having stereocentres.&quot;}
 ]},
{id:&#39;ez&#39;, unit:4, name:&#39;Geometrical Isomerism (cis/trans, E/Z)&#39;, prereqs:[&#39;stereointro&#39;,&#39;alkenes&#39;],
 summary:&quot;Restricted rotation around a C=C double bond (or ring) creates geometrical isomers. E/Z (CIP-based) is more rigorous than cis/trans and is required when substituents aren&#39;t simply H vs alkyl.&quot;,
 diagram:{type:&#39;stereo&#39;, kind:&#39;ez&#39;},
 cards:[
   {q:&quot;When is the E/Z system preferred over the simpler cis/trans naming?&quot;, a:&quot;When each alkene carbon bears two different, non-hydrogen substituents that cis/trans cannot unambiguously describe — CIP priority is used instead to assign E (opposite, higher priorities) or Z (same side, higher priorities).&quot;},
   {q:&quot;Why does tamoxifen&#39;s E/Z isomerism matter pharmacologically?&quot;, a:&quot;The two geometric isomers of tamoxifen have markedly different affinities for the estrogen receptor — one is the active anti-cancer drug, the other far less active/different in profile.&quot;}
 ]},
{id:&#39;resolution&#39;, unit:4, name:&#39;Resolution of Racemic Mixtures&#39;, prereqs:[&#39;chirality&#39;],
 summary:&quot;A racemic (50:50 enantiomer) mixture can be separated by converting enantiomers into diastereomers with a chiral resolving agent (different physical properties → separable), then regenerating the pure enantiomers — essential for producing single-enantiomer drugs.&quot;,
 diagram:{type:&#39;mechanism&#39;, kind:&#39;resolution&#39;},
 cards:[
   {q:&quot;Why can&#39;t enantiomers be separated by simple physical methods like fractional distillation?&quot;, a:&quot;Enantiomers have identical physical properties (boiling point, solubility, etc.) in an achiral environment, so ordinary separations cannot distinguish them.&quot;},
   {q:&quot;Outline the classic resolution strategy for a racemic carboxylic acid drug.&quot;, a:&quot;React the racemic acid with a single-enantiomer chiral base to form two diastereomeric salts, which now have different solubilities/physical properties and can be separated (e.g. by crystallization), then the pure acid enantiomers are regenerated.&quot;}
 ]},
{id:&#39;conformation&#39;, unit:4, name:&#39;Conformational Analysis (Newman &amp; Fischer)&#39;, prereqs:[&#39;stereointro&#39;],
 summary:&quot;Newman projections show rotation about a single C–C bond (staggered/anti conformations are lower energy than eclipsed/gauche); Fischer projections represent chiral centres as a flat cross for quick comparison of sugars and amino-acid-derived drugs.&quot;,
 diagram:{type:&#39;newman&#39;},
 cards:[
   {q:&quot;In a Newman projection of butane, which conformation is lowest in energy?&quot;, a:&quot;The anti-staggered conformation, where the two methyl groups are 180° apart, minimizing steric (van der Waals) strain.&quot;},
   {q:&quot;In a Fischer projection, what do horizontal and vertical lines represent spatially?&quot;, a:&quot;Horizontal lines point toward the viewer (wedges, out of the plane); vertical lines point away from the viewer (dashes, into the plane).&quot;}
 ]}
];

const UNIT_NAMES = {1:&#39;Foundations&#39;, 2:&#39;Functional Groups&#39;, 3:&#39;Reactions&#39;, 4:&#39;Stereochemistry&#39;};
const TOPIC_BY_ID = Object.fromEntries(TOPICS.map(t=&gt;[t.id,t]));

/* ============================= SM-2 SPACED REPETITION ============================= */
// Card state: {ef, reps, interval(days), due(timestamp ms), seen(bool)}
function freshState(){ return {ef:2.5, reps:0, interval:0, due:0, seen:false}; }

function sm2Update(state, quality){ // quality: 0 again, 3 hard, 4 good, 5 easy
  if(quality &lt; 3){
    state.reps = 0;
    state.interval = 1;
  } else {
    if(state.reps === 0) state.interval = 1;
    else if(state.reps === 1) state.interval = 6;
    else state.interval = Math.round(state.interval * state.ef);
    state.reps += 1;
  }
  state.ef = Math.max(1.3, state.ef + (0.1 - (5-quality)*(0.08+(5-quality)*0.02)));
  state.seen = true;
  state.due = Date.now() + state.interval*24*60*60*1000;
  return state;
}

/* All card states keyed by &quot;topicId::cardIndex&quot; */
let cardStates = {};
let storageReady = false;

async function loadState(){
  try{
    const res = await window.storage.get(&#39;srs-card-states&#39;, false);
    if(res &amp;&amp; res.value) cardStates = JSON.parse(res.value);
  }catch(e){ cardStates = {}; }
  storageReady = true;
}
async function saveState(){
  try{ await window.storage.set(&#39;srs-card-states&#39;, JSON.stringify(cardStates), false); }
  catch(e){ console.error(&#39;storage save failed&#39;, e); }
}
function keyFor(topicId, idx){ return topicId+&#39;::&#39;+idx; }
function getCardState(topicId, idx){
  const k = keyFor(topicId, idx);
  if(!cardStates[k]) cardStates[k] = freshState();
  return cardStates[k];
}

function allCardsFlat(){
  const list = [];
  TOPICS.forEach(t=&gt;{ t.cards.forEach((c,i)=&gt;list.push({topicId:t.id, idx:i, card:c})); });
  return list;
}
function dueCards(){
  const now = Date.now();
  return allCardsFlat().filter(x=&gt;{
    const s = getCardState(x.topicId, x.idx);
    return s.seen &amp;&amp; s.due &lt;= now;
  });
}
function newCardsForTopic(topicId){
  const t = TOPIC_BY_ID[topicId];
  return t.cards.map((c,i)=&gt;({topicId, idx:i, card:c})).filter(x=&gt;!getCardState(x.topicId,x.idx).seen);
}
function topicMastery(topicId){
  const t = TOPIC_BY_ID[topicId];
  let statesArr = t.cards.map((c,i)=&gt;getCardState(topicId,i));
  const anySeen = statesArr.some(s=&gt;s.seen);
  if(!anySeen) return &#39;new&#39;;
  const anyDue = statesArr.some(s=&gt;s.seen &amp;&amp; s.due&lt;=Date.now());
  if(anyDue) return &#39;due&#39;;
  const allMastered = statesArr.every(s=&gt;s.seen &amp;&amp; s.reps&gt;=2 &amp;&amp; s.ef&gt;=2.3);
  return allMastered ? &#39;mastered&#39; : &#39;learning&#39;;
}
function prereqsMet(topic){
  return topic.prereqs.every(p=&gt; topicMastery(p) !== &#39;new&#39;);
}

/* ============================= LAYOUT (topic map positions) ============================= */
const CANVAS_W = 620, CANVAS_H = 720;
function computeLayout(){
  const byUnit = {1:[],2:[],3:[],4:[]};
  TOPICS.forEach(t=&gt;byUnit[t.unit].push(t));
  const colX = {1:90, 2:230, 3:390, 4:530};
  const positions = {};
  Object.keys(byUnit).forEach(u=&gt;{
    const arr = byUnit[u];
    const topPad = 34, rowGap = (CANVAS_H-70)/Math.max(arr.length-1,1);
    arr.forEach((t,i)=&gt;{
      positions[t.id] = { x: colX[u], y: topPad + (arr.length&gt;1? i*rowGap : (CANVAS_H-70)/2) };
    });
  });
  return positions;
}
const LAYOUT = computeLayout();

/* ============================= STATE ============================= */
let currentTopicId = TOPICS[0].id;
let reviewSession = null; // {queue:[], pos, revealed}
let viewMode = &#39;topic&#39;; // &#39;topic&#39; | &#39;review&#39;

/* ============================= MAP CANVAS DRAW ============================= */
const mapCanvas = document.getElementById(&#39;mapCanvas&#39;);
mapCanvas.width = CANVAS_W; mapCanvas.height = CANVAS_H;
const mctx = mapCanvas.getContext(&#39;2d&#39;);

function colorForMastery(m){
  if(m===&#39;new&#39;) return &#39;#B7B2A0&#39;;
  if(m===&#39;learning&#39;) return &#39;#B9812F&#39;;
  if(m===&#39;due&#39;) return &#39;#9C4A42&#39;;
  if(m===&#39;mastered&#39;) return &#39;#2E6F63&#39;;
  return &#39;#B7B2A0&#39;;
}

function drawMap(){
  mctx.clearRect(0,0,CANVAS_W,CANVAS_H);
  // unit column labels
  mctx.font = &#39;10.5px monospace&#39;;
  mctx.fillStyle = &#39;#4C5670&#39;;
  mctx.textAlign = &#39;center&#39;;
  const colX = {1:90,2:230,3:390,4:530};
  Object.keys(colX).forEach(u=&gt;{
    mctx.fillText(&#39;UNIT &#39;+u, colX[u], 18);
  });
  // edges (bonds)
  TOPICS.forEach(t=&gt;{
    const p2 = LAYOUT[t.id];
    t.prereqs.forEach(pid=&gt;{
      const p1 = LAYOUT[pid];
      if(!p1) return;
      mctx.beginPath();
      mctx.moveTo(p1.x+16, p1.y);
      const midx = (p1.x+p2.x)/2;
      mctx.bezierCurveTo(midx,p1.y, midx,p2.y, p2.x-16,p2.y);
      mctx.strokeStyle = &#39;rgba(33,43,65,0.28)&#39;;
      mctx.lineWidth = 1.3;
      mctx.stroke();
    });
  });
  // nodes
  TOPICS.forEach(t=&gt;{
    const p = LAYOUT[t.id];
    const m = topicMastery(t.id);
    const col = colorForMastery(m);
    const locked = !prereqsMet(t) &amp;&amp; m===&#39;new&#39;;
    mctx.beginPath();
    mctx.arc(p.x, p.y, 15, 0, Math.PI*2);
    mctx.fillStyle = locked ? &#39;#DEDACB&#39; : &#39;#F7F3E7&#39;;
    mctx.fill();
    mctx.lineWidth = m===&#39;mastered&#39;? 3 : 2;
    mctx.strokeStyle = col;
    mctx.stroke();
    if(m===&#39;mastered&#39;){
      mctx.beginPath();
      mctx.arc(p.x,p.y,15,0,Math.PI*2);
      mctx.strokeStyle = &#39;rgba(46,111,99,0.35)&#39;;
      mctx.lineWidth=6;
      mctx.stroke();
    }
    if(t.id===currentTopicId){
      mctx.beginPath();
      mctx.arc(p.x,p.y,19,0,Math.PI*2);
      mctx.strokeStyle = &#39;#212B41&#39;;
      mctx.lineWidth=1.4;
      mctx.stroke();
    }
    mctx.font = locked ? &#39;italic 10px Georgia&#39; : &#39;bold 10px Georgia&#39;;
    mctx.fillStyle = locked ? &#39;#8B8672&#39; : &#39;#212B41&#39;;
    mctx.textAlign = &#39;left&#39;;
    // wrap label
    const words = t.name.split(&#39; &#39;);
    let lines = [], line=&#39;&#39;;
    words.forEach(w=&gt;{
      if((line+w).length&gt;16){ lines.push(line); line=w+&#39; &#39;; } else line += w+&#39; &#39;;
    });
    lines.push(line);
    lines.forEach((ln,i)=&gt;{
      mctx.fillText(ln.trim(), p.x+22, p.y-4+ i*11);
    });
  });
}

mapCanvas.addEventListener(&#39;click&#39;, (e)=&gt;{
  const rect = mapCanvas.getBoundingClientRect();
  const scaleX = CANVAS_W/rect.width, scaleY = CANVAS_H/rect.height;
  const x = (e.clientX-rect.left)*scaleX, y=(e.clientY-rect.top)*scaleY;
  for(const t of TOPICS){
    const p = LAYOUT[t.id];
    if(Math.hypot(x-p.x,y-p.y) &lt; 17){
      currentTopicId = t.id;
      viewMode=&#39;topic&#39;;
      renderAll();
      return;
    }
  }
});

/* ============================= UNIT JUMP LIST ============================= */
function renderUnitJump(){
  const el = document.getElementById(&#39;unitJump&#39;);
  el.innerHTML = &#39;&#39;;
  [1,2,3,4].forEach(u=&gt;{
    const btn = document.createElement(&#39;button&#39;);
    btn.textContent = &#39;Unit &#39;+u+&#39; — &#39;+UNIT_NAMES[u];
    if(TOPIC_BY_ID[currentTopicId].unit===u) btn.classList.add(&#39;active&#39;);
    btn.onclick = ()=&gt;{
      const first = TOPICS.find(t=&gt;t.unit===u);
      currentTopicId = first.id; viewMode=&#39;topic&#39;; renderAll();
    };
    el.appendChild(btn);
  });
}

/* ============================= DIAGRAM DRAWING (generic, parametrized) ============================= */
function arrow(ctx,x1,y1,x2,y2,color){
  ctx.strokeStyle=color; ctx.lineWidth=1.6;
  ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke();
  const ang = Math.atan2(y2-y1,x2-x1);
  ctx.beginPath();
  ctx.moveTo(x2,y2);
  ctx.lineTo(x2-9*Math.cos(ang-0.4), y2-9*Math.sin(ang-0.4));
  ctx.lineTo(x2-9*Math.cos(ang+0.4), y2-9*Math.sin(ang+0.4));
  ctx.closePath(); ctx.fillStyle=color; ctx.fill();
}
function curvedArrow(ctx,x1,y1,x2,y2,bend,color){
  ctx.strokeStyle=color; ctx.lineWidth=1.8;
  const mx=(x1+x2)/2, my=(y1+y2)/2 - bend;
  ctx.beginPath(); ctx.moveTo(x1,y1); ctx.quadraticCurveTo(mx,my,x2,y2); ctx.stroke();
  const ang = Math.atan2(y2-my, x2-mx);
  ctx.beginPath();
  ctx.moveTo(x2,y2);
  ctx.lineTo(x2-8*Math.cos(ang-0.4), y2-8*Math.sin(ang-0.4));
  ctx.lineTo(x2-8*Math.cos(ang+0.4), y2-8*Math.sin(ang+0.4));
  ctx.closePath(); ctx.fillStyle=color; ctx.fill();
}
function atomDot(ctx,x,y,label,color){
  ctx.beginPath(); ctx.arc(x,y,4,0,Math.PI*2); ctx.fillStyle=color||&#39;#212B41&#39;; ctx.fill();
  if(label){ ctx.font=&#39;12px Georgia&#39;; ctx.fillStyle=&#39;#212B41&#39;; ctx.textAlign=&#39;center&#39;; ctx.fillText(label,x,y-10); }
}

const dctx_setup = { w:560, h:280 };
function clearDiagram(ctx){ ctx.clearRect(0,0,dctx_setup.w,dctx_setup.h); }

function draw_bondline(ctx, params){
  clearDiagram(ctx);
  const n = params.chain||5, startX=50, endX=510, y=150;
  const dx=(endX-startX)/(n-1);
  ctx.strokeStyle=&#39;#212B41&#39;; ctx.lineWidth=2;
  let pts=[];
  for(let i=0;i&lt;n;i++){
    const x = startX+i*dx;
    const yy = y + (i%2===0? 26: -26);
    pts.push({x,y:yy});
  }
  ctx.beginPath();
  pts.forEach((p,i)=&gt; i===0? ctx.moveTo(p.x,p.y): ctx.lineTo(p.x,p.y));
  ctx.stroke();
  pts.forEach(p=&gt;{ ctx.beginPath(); ctx.arc(p.x,p.y,2.4,0,Math.PI*2); ctx.fillStyle=&#39;#212B41&#39;; ctx.fill(); });
  const gp = params.groupPos!=null? Math.min(params.groupPos, n-1) : Math.floor(n/2);
  const target = pts[gp];
  if(params.group){
    ctx.strokeStyle=&#39;#2E6F63&#39;; ctx.lineWidth=2.4;
    ctx.beginPath(); ctx.moveTo(target.x,target.y); ctx.lineTo(target.x, target.y-46); ctx.stroke();
    ctx.font=&#39;bold 15px Georgia&#39;; ctx.fillStyle=&#39;#2E6F63&#39;; ctx.textAlign=&#39;center&#39;;
    let label = params.group;
    if(label===&#39;ene&#39;){ // double bond marker between gp and gp+1
      const p2 = pts[gp+1]||pts[gp-1];
      const nx = (target.y - p2.y)!==0 ? 3 : 0;
      ctx.strokeStyle=&#39;#B9812F&#39;; ctx.lineWidth=2;
      ctx.beginPath();
      const off=6;
      const angle = Math.atan2(p2.y-target.y,p2.x-target.x)+Math.PI/2;
      ctx.moveTo(target.x+off*Math.cos(angle), target.y+off*Math.sin(angle));
      ctx.lineTo(p2.x+off*Math.cos(angle), p2.y+off*Math.sin(angle));
      ctx.stroke();
      ctx.fillStyle=&#39;#B9812F&#39;; ctx.fillText(&#39;C=C (sp2)&#39;, target.x+ (p2.x-target.x)/2, target.y-30);
    } else if(label===&#39;yne&#39;){
      const p2 = pts[gp+1]||pts[gp-1];
      ctx.strokeStyle=&#39;#9C4A42&#39;; ctx.lineWidth=1.6;
      [-6,0,6].forEach(off=&gt;{
        const angle = Math.atan2(p2.y-target.y,p2.x-target.x)+Math.PI/2;
        ctx.beginPath();
        ctx.moveTo(target.x+off*Math.cos(angle), target.y+off*Math.sin(angle));
        ctx.lineTo(p2.x+off*Math.cos(angle), p2.y+off*Math.sin(angle));
        ctx.stroke();
      });
      ctx.fillStyle=&#39;#9C4A42&#39;; ctx.fillText(&#39;C≡C (sp)&#39;, target.x+(p2.x-target.x)/2, target.y-34);
    } else {
      ctx.fillText(&#39;–&#39;+label, target.x, target.y-54);
    }
  }
  ctx.font=&#39;11px monospace&#39;; ctx.fillStyle=&#39;#4C5670&#39;; ctx.textAlign=&#39;left&#39;;
  ctx.fillText(&#39;carbon skeleton (bond-line notation)&#39;, 20, 260);
}

function draw_orbital(ctx, params){
  clearDiagram(ctx);
  const cx=280, cy=140;
  if(params.hybrid===&#39;sp3&#39;){
    const dirs=[[1,-1],[1,1],[-1,1],[-1,-1]];
    dirs.forEach(([dx,dy])=&gt;{
      const x2=cx+dx*90, y2=cy+dy*55;
      ctx.strokeStyle=&#39;#2E6F63&#39;; ctx.lineWidth=10; ctx.lineCap=&#39;round&#39;;
      ctx.globalAlpha=0.35;
      ctx.beginPath(); ctx.moveTo(cx,cy); ctx.lineTo(x2,y2); ctx.stroke();
      ctx.globalAlpha=1;
      ctx.beginPath(); ctx.moveTo(cx,cy); ctx.lineTo(x2,y2); ctx.lineWidth=2; ctx.stroke();
    });
    atomDot(ctx,cx,cy,&#39;C&#39;,&#39;#212B41&#39;);
    ctx.font=&#39;11px monospace&#39;; ctx.fillStyle=&#39;#4C5670&#39;; ctx.textAlign=&#39;center&#39;;
    ctx.fillText(&#39;sp3 — four σ-bonds, 109.5° tetrahedral&#39;, cx, 250);
  } else if(params.hybrid===&#39;aromatic&#39; || params.hybrid===&#39;aromatic-sub&#39;){
    const r=70;
    ctx.strokeStyle=&#39;#212B41&#39;; ctx.lineWidth=2;
    ctx.beginPath();
    for(let i=0;i&lt;6;i++){
      const a = Math.PI/3*i - Math.PI/2;
      const x=cx+r*Math.cos(a), y=cy+r*Math.sin(a);
      i===0? ctx.moveTo(x,y): ctx.lineTo(x,y);
    }
    ctx.closePath(); ctx.stroke();
    ctx.beginPath(); ctx.arc(cx,cy,r*0.55,0,Math.PI*2);
    ctx.strokeStyle=&#39;#2E6F63&#39;; ctx.lineWidth=2; ctx.stroke();
    if(params.hybrid===&#39;aromatic-sub&#39;){
      ctx.font=&#39;bold 13px Georgia&#39;; ctx.fillStyle=&#39;#9C4A42&#39;; ctx.textAlign=&#39;center&#39;;
      ctx.fillText(&#39;E+&#39;, cx, cy-r-14);
      arrow(ctx, cx, cy-r-8, cx, cy-r+6, &#39;#9C4A42&#39;);
    }
    ctx.font=&#39;11px monospace&#39;; ctx.fillStyle=&#39;#4C5670&#39;; ctx.textAlign=&#39;center&#39;;
    ctx.fillText(&#39;delocalized π-ring: 6 π-electrons (4n+2, n=1)&#39;, cx, 250);
  }
}

function draw_arrowmap(ctx, kind){
  clearDiagram(ctx);
  ctx.textAlign=&#39;center&#39;;
  if(kind===&#39;inductive&#39;){
    const labels=[&#39;C&#39;,&#39;C&#39;,&#39;C&#39;,&#39;C=O&#39;];
    let xs=[100,220,340,460];
    xs.forEach((x,i)=&gt;atomDot(ctx,x,150,labels[i], i===3?&#39;#9C4A42&#39;:&#39;#212B41&#39;));
    for(let i=0;i&lt;3;i++) arrow(ctx,xs[i]+10,150,xs[i+1]-14,150,&#39;#B9812F&#39;);
    ctx.font=&#39;11px monospace&#39;; ctx.fillStyle=&#39;#4C5670&#39;;
    ctx.fillText(&#39;inductive pull (–I) weakens with distance through σ-bonds&#39;, 280, 220);
  } else if(kind===&#39;resonance&#39; || kind===&#39;mesomeric&#39; || kind===&#39;electromeric&#39;){
    // two resonance structures side by side with curved arrow between
    ctx.font=&#39;13px Georgia&#39;; ctx.fillStyle=&#39;#212B41&#39;;
    ctx.fillText(&#39;O=C–O⁻   ⟷   ⁻O–C=O&#39;, 280, 130);
    curvedArrow(ctx, 220,150, 340,150, 40, &#39;#2E6F63&#39;);
    ctx.font=&#39;11px monospace&#39;; ctx.fillStyle=&#39;#4C5670&#39;;
    const note = kind===&#39;mesomeric&#39; ? &#39;permanent ground-state delocalization (+M / −M substituent effect)&#39;
      : kind===&#39;electromeric&#39; ? &#39;complete π-shift only during reagent attack (temporary)&#39;
      : &#39;resonance: equal C–O bond lengths in carboxylate&#39;;
    ctx.fillText(note, 280, 220);
  } else if(kind===&#39;hyperconjugation&#39;){
    atomDot(ctx,280,150,&#39;C+&#39;,&#39;#9C4A42&#39;);
    [[-60,-40],[60,-40],[0,55]].forEach(([dx,dy])=&gt;{
      ctx.strokeStyle=&#39;#2E6F63&#39;; ctx.lineWidth=2;
      ctx.beginPath(); ctx.moveTo(280,150); ctx.lineTo(280+dx,150+dy); ctx.stroke();
      ctx.font=&#39;10px monospace&#39;; ctx.fillStyle=&#39;#2E6F63&#39;; ctx.fillText(&#39;σ(C–H)&#39;,280+dx*1.3,150+dy*1.3);
    });
    ctx.font=&#39;11px monospace&#39;; ctx.fillStyle=&#39;#4C5670&#39;;
    ctx.fillText(&#39;adjacent C–H σ-bonds donate into empty p-orbital, stabilizing C+&#39;, 280,230);
  } else if(kind===&#39;steric&#39;){
    atomDot(ctx,280,150,&#39;C&#39;,&#39;#212B41&#39;);
    [[-70,-30],[70,-30],[0,-70]].forEach(([dx,dy],i)=&gt;{
      ctx.beginPath(); ctx.arc(280+dx,150+dy,20,0,Math.PI*2);
      ctx.fillStyle=&#39;rgba(156,74,66,0.18)&#39;; ctx.fill();
      ctx.strokeStyle=&#39;#9C4A42&#39;; ctx.lineWidth=1.4; ctx.stroke();
    });
    ctx.font=&#39;11px monospace&#39;; ctx.fillStyle=&#39;#4C5670&#39;;
    ctx.fillText(&#39;bulky substituents block backside (SN2) approach&#39;, 280,230);
  }
}

function draw_hbond(ctx, params){
  clearDiagram(ctx);
  atomDot(ctx,180,150,&#39;O&#39;,&#39;#9C4A42&#39;);
  atomDot(ctx,230,150,&#39;H&#39;,&#39;#212B41&#39;);
  ctx.strokeStyle=&#39;#212B41&#39;; ctx.lineWidth=2;
  ctx.beginPath(); ctx.moveTo(184,150); ctx.lineTo(224,150); ctx.stroke();
  ctx.setLineDash([4,4]);
  ctx.strokeStyle=&#39;#2E6F63&#39;; ctx.lineWidth=1.6;
  ctx.beginPath(); ctx.moveTo(236,150); ctx.lineTo(340,150); ctx.stroke();
  ctx.setLineDash([]);
  atomDot(ctx,350,150,&#39;O&#39;,&#39;#9C4A42&#39;);
  ctx.font=&#39;11px monospace&#39;; ctx.fillStyle=&#39;#4C5670&#39;; ctx.textAlign=&#39;center&#39;;
  ctx.fillText(&#39;dashed line = hydrogen bond (dipole–dipole, ~5–30 kJ/mol)&#39;, 260, 230);
  if(params &amp;&amp; params.dipole){
    arrow(ctx, 150,110, 260,110, &#39;#B9812F&#39;);
    ctx.fillStyle=&#39;#B9812F&#39;; ctx.fillText(&#39;δ− → δ+  net dipole vector&#39;, 260, 90);
  }
}
function draw_hbondscale(ctx, params){ draw_hbond(ctx, params); }

function draw_tautomer(ctx){
  clearDiagram(ctx);
  ctx.font=&#39;14px Georgia&#39;; ctx.fillStyle=&#39;#212B41&#39;; ctx.textAlign=&#39;center&#39;;
  ctx.fillText(&#39;keto:  C=O  –CH–&#39;, 160,120);
  ctx.fillText(&#39;enol:  C–OH  =CH–&#39;, 400,120);
  curvedArrow(ctx,220,140,340,140,-40,&#39;#B9812F&#39;);
  curvedArrow(ctx,340,160,220,160,40,&#39;#2E6F63&#39;);
  ctx.font=&#39;11px monospace&#39;; ctx.fillStyle=&#39;#4C5670&#39;;
  ctx.fillText(&#39;proton + π-bond migrate — rapid equilibrium, one form usually dominates&#39;, 280,220);
}

function draw_mechanism(ctx, kind){
  clearDiagram(ctx);
  ctx.font=&#39;13px Georgia&#39;; ctx.fillStyle=&#39;#212B41&#39;; ctx.textAlign=&#39;center&#39;;
  const stepsMap = {
    redox: [&#39;R–CH2OH&#39;,&#39;R–CHO&#39;,&#39;R–COOH&#39;],
    elimination: [&#39;R–CH2–CHX–R\&#39;&#39;,&#39;[TS: anti-periplanar]&#39;,&#39;R–CH=CH–R\&#39;&#39;],
    addition: [&#39;C=C + E–Nu&#39;,&#39;[carbocation/halonium]&#39;,&#39;E–C–C–Nu&#39;],
    acylation: [&#39;R–CO–LG + Nu:&#39;,&#39;[tetrahedral intermediate]&#39;,&#39;R–CO–Nu + LG⁻&#39;],
    rearrangement: [&#39;2° C+&#39;,&#39;[1,2-hydride shift]&#39;,&#39;3° C+ (more stable)&#39;],
    polymerization: [&#39;initiator•&#39;,&#39;+ n monomer&#39;,&#39;—[monomer]n—&#39;],
    resolution: [&#39;(R)+(S) racemic acid&#39;,&#39;+ chiral base → 2 diastereomeric salts&#39;,&#39;separate → pure (R) &amp; (S) acids&#39;]
  };
  const steps = stepsMap[kind] || [&#39;start&#39;,&#39;intermediate&#39;,&#39;product&#39;];
  const xs=[100,280,460];
  steps.forEach((s,i)=&gt;{
    ctx.fillText(s, xs[i], 150);
  });
  arrow(ctx,160,150,230,150,&#39;#2E6F63&#39;);
  arrow(ctx,340,150,410,150,&#39;#2E6F63&#39;);
  ctx.font=&#39;11px monospace&#39;; ctx.fillStyle=&#39;#4C5670&#39;;
  ctx.fillText(kind+&#39; — schematic reaction progress (left → right)&#39;, 280, 220);
}

function draw_mechanism_sn(ctx){
  clearDiagram(ctx);
  ctx.font=&#39;12px Georgia&#39;; ctx.textAlign=&#39;center&#39;; ctx.fillStyle=&#39;#212B41&#39;;
  // SN2
  ctx.fillText(&#39;SN2 (backside attack, inversion)&#39;, 150, 40);
  atomDot(ctx,150,90,&#39;C&#39;,&#39;#212B41&#39;);
  arrow(ctx, 60,90, 132,90, &#39;#2E6F63&#39;);
  ctx.fillText(&#39;Nu:⁻&#39;, 50,90);
  arrow(ctx, 168,90, 240,90, &#39;#9C4A42&#39;);
  ctx.fillText(&#39;LG⁻&#39;, 250,90);
  ctx.font=&#39;10px monospace&#39;; ctx.fillStyle=&#39;#4C5670&#39;;
  ctx.fillText(&#39;one step, concerted, rate = k[Nu][RX]&#39;, 150,120);

  // SN1
  ctx.font=&#39;12px Georgia&#39;; ctx.fillStyle=&#39;#212B41&#39;;
  ctx.fillText(&#39;SN1 (via planar carbocation, racemization)&#39;, 420, 40);
  atomDot(ctx,420,90,&#39;C+&#39;,&#39;#9C4A42&#39;);
  arrow(ctx, 340,90, 405,90, &#39;#B9812F&#39;);
  ctx.fillText(&#39;slow: –LG⁻&#39;, 340,70);
  arrow(ctx, 435,90, 500,60, &#39;#2E6F63&#39;);
  arrow(ctx, 435,90, 500,120, &#39;#2E6F63&#39;);
  ctx.font=&#39;9px monospace&#39;; ctx.fillStyle=&#39;#4C5670&#39;;
  ctx.fillText(&#39;Nu attacks either face&#39;, 480,45);
  ctx.font=&#39;10px monospace&#39;;
  ctx.fillText(&#39;two steps, rate = k[RX] only&#39;, 420,145);
}

function draw_stereo(ctx, kind){
  clearDiagram(ctx);
  ctx.textAlign=&#39;center&#39;;
  if(kind===&#39;overview&#39; || kind===&#39;chiral-mirror&#39;){
    // two tetrahedral wedge-dash centers as mirror images
    [180,400].forEach((cx,mi)=&gt;{
      const cy=140;
      atomDot(ctx,cx,cy,&#39;C&#39;,&#39;#212B41&#39;);
      // wedge
      ctx.beginPath(); ctx.moveTo(cx,cy); ctx.lineTo(cx-30,cy+50); ctx.lineTo(cx-10,cy+52); ctx.closePath();
      ctx.fillStyle=&#39;#2E6F63&#39;; ctx.fill();
      ctx.font=&#39;11px Georgia&#39;; ctx.fillStyle=&#39;#2E6F63&#39;; ctx.fillText(mi===0?&#39;OH&#39;:&#39;HO&#39;, cx-30, cy+66);
      // dash
      ctx.strokeStyle=&#39;#9C4A42&#39;; ctx.lineWidth=1.5; ctx.setLineDash([3,3]);
      ctx.beginPath(); ctx.moveTo(cx,cy); ctx.lineTo(cx+30,cy+50); ctx.stroke(); ctx.setLineDash([]);
      ctx.fillStyle=&#39;#9C4A42&#39;; ctx.fillText(mi===0?&#39;H&#39;:&#39;H&#39;, cx+30, cy+66);
      // plain lines up
      ctx.strokeStyle=&#39;#212B41&#39;; ctx.lineWidth=1.6;
      ctx.beginPath(); ctx.moveTo(cx,cy); ctx.lineTo(cx-25,cy-45); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(cx,cy); ctx.lineTo(cx+25,cy-45); ctx.stroke();
      ctx.fillStyle=&#39;#212B41&#39;; ctx.font=&#39;11px Georgia&#39;;
      ctx.fillText(&#39;COOH&#39;, cx-25, cy-52);
      ctx.fillText(&#39;CH3&#39;, cx+25, cy-52);
    });
    ctx.font=&#39;16px Georgia&#39;; ctx.fillStyle=&#39;#4C5670&#39;;
    ctx.fillText(&#39;mirror&#39;, 290, 140);
    ctx.beginPath(); ctx.moveTo(290,60); ctx.lineTo(290,220); ctx.strokeStyle=&#39;#B7B2A0&#39;; ctx.lineWidth=1; ctx.setLineDash([2,3]); ctx.stroke(); ctx.setLineDash([]);
    ctx.font=&#39;11px monospace&#39;; ctx.fillStyle=&#39;#4C5670&#39;;
    ctx.fillText(&#39;non-superimposable mirror images = enantiomers&#39;, 290, 245);
  } else if(kind===&#39;rs-priority&#39;){
    const cx=280,cy=140;
    atomDot(ctx,cx,cy,&#39;C&#39;,&#39;#212B41&#39;);
    const groups=[[&#39;OH&#39;,&#39;1&#39;,-25,-45],[&#39;NH2&#39;,&#39;2&#39;,25,-45],[&#39;CH3&#39;,&#39;3&#39;,-30,50],[&#39;H&#39;,&#39;4&#39;,30,50]];
    groups.forEach(([label,pr,dx,dy])=&gt;{
      ctx.strokeStyle=&#39;#212B41&#39;; ctx.lineWidth=1.6;
      ctx.beginPath(); ctx.moveTo(cx,cy); ctx.lineTo(cx+dx,cy+dy); ctx.stroke();
      ctx.font=&#39;11px Georgia&#39;; ctx.fillStyle=&#39;#212B41&#39;; ctx.fillText(label, cx+dx*1.25, cy+dy*1.25);
      ctx.font=&#39;10px monospace&#39;; ctx.fillStyle=&#39;#B9812F&#39;; ctx.fillText(&#39;(&#39;+pr+&#39;)&#39;, cx+dx*1.25, cy+dy*1.25+13);
    });
    ctx.beginPath(); ctx.arc(cx,cy,65,0.2,2.6); ctx.strokeStyle=&#39;#2E6F63&#39;; ctx.lineWidth=1.6; ctx.stroke();
    arrow(ctx,cx+62,cy+18,cx+50,cy+40,&#39;#2E6F63&#39;);
    ctx.font=&#39;11px monospace&#39;; ctx.fillStyle=&#39;#4C5670&#39;;
    ctx.fillText(&#39;priority 1→2→3 with #4 pointing away: clockwise = R&#39;, cx, 235);
  } else if(kind===&#39;multi-chiral&#39;){
    for(let i=0;i&lt;3;i++){
      const cx=140+i*160, cy=140;
      atomDot(ctx,cx,cy,&#39;C&#39;+(i+1)+&#39;*&#39;,&#39;#9C4A42&#39;);
      ctx.font=&#39;10px monospace&#39;; ctx.fillStyle=&#39;#4C5670&#39;;
      ctx.fillText(&#39;stereocentre&#39;, cx, cy+20);
      if(i&lt;2) arrow(ctx,cx+10,cy,cx+140,cy,&#39;#212B41&#39;);
    }
    ctx.font=&#39;11px monospace&#39;; ctx.fillStyle=&#39;#4C5670&#39;;
    ctx.fillText(&#39;3 stereocentres → up to 2³ = 8 stereoisomers (diastereomer pairs shown left→right)&#39;, 280,230);
  } else if(kind===&#39;ez&#39;){
    // C=C with substituents
    ctx.strokeStyle=&#39;#212B41&#39;; ctx.lineWidth=2.4;
    ctx.beginPath(); ctx.moveTo(220,150); ctx.lineTo(340,150); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(220,145); ctx.lineTo(340,145); ctx.stroke();
    atomDot(ctx,220,150,&#39;&#39;,null); atomDot(ctx,340,150,&#39;&#39;,null);
    const subs=[[220,150,-1,-1,&#39;Br (hi)&#39;],[220,150,-1,1,&#39;H&#39;],[340,150,1,-1,&#39;Cl (hi)&#39;],[340,150,1,1,&#39;CH3&#39;]];
    subs.forEach(([x,y,dx,dy,label])=&gt;{
      ctx.strokeStyle=&#39;#212B41&#39;; ctx.lineWidth=1.6;
      ctx.beginPath(); ctx.moveTo(x,y); ctx.lineTo(x+dx*55,y+dy*45); ctx.stroke();
      ctx.font=&#39;11px Georgia&#39;; ctx.fillStyle=&#39;#212B41&#39;; ctx.fillText(label,x+dx*70,y+dy*50);
    });
    ctx.font=&#39;11px monospace&#39;; ctx.fillStyle=&#39;#4C5670&#39;;
    ctx.fillText(&#39;higher-priority groups on opposite sides here → E&#39;, 280,235);
  }
}

function draw_newman(ctx){
  clearDiagram(ctx);
  const cx=180,cy=140,r=45;
  ctx.beginPath(); ctx.arc(cx,cy,r,0,Math.PI*2); ctx.strokeStyle=&#39;#212B41&#39;; ctx.lineWidth=2; ctx.stroke();
  // front atom (center point) 3 lines at 0,120,240
  [0,120,240].forEach(a=&gt;{
    const rad=a*Math.PI/180;
    const x2=cx+ (r-4)*Math.cos(rad), y2=cy+(r-4)*Math.sin(rad);
    ctx.beginPath(); ctx.moveTo(cx,cy); ctx.lineTo(x2,y2); ctx.strokeStyle=&#39;#2E6F63&#39;; ctx.lineWidth=2; ctx.stroke();
  });
  // back atom lines from circle edge outward at staggered 60,180,300
  [60,180,300].forEach(a=&gt;{
    const rad=a*Math.PI/180;
    const x1=cx+r*Math.cos(rad), y1=cy+r*Math.sin(rad);
    const x2=cx+(r+35)*Math.cos(rad), y2=cy+(r+35)*Math.sin(rad);
    ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.strokeStyle=&#39;#9C4A42&#39;; ctx.lineWidth=2; ctx.stroke();
  });
  ctx.font=&#39;11px monospace&#39;; ctx.fillStyle=&#39;#4C5670&#39;; ctx.textAlign=&#39;center&#39;;
  ctx.fillText(&#39;Newman (staggered, anti) — front C teal, back C brick&#39;, cx, 235);

  // Fischer projection
  const fx=420, fy=140;
  ctx.strokeStyle=&#39;#212B41&#39;; ctx.lineWidth=2;
  ctx.beginPath(); ctx.moveTo(fx-45,fy); ctx.lineTo(fx+45,fy); ctx.stroke();
  ctx.beginPath(); ctx.moveTo(fx,fy-45); ctx.lineTo(fx,fy+45); ctx.stroke();
  atomDot(ctx,fx,fy,&#39;&#39;,&#39;#212B41&#39;);
  const flabels=[[&#39;CHO&#39;,fx,fy-52],[&#39;CH2OH&#39;,fx,fy+62],[&#39;OH&#39;,fx-58,fy+3],[&#39;H&#39;,fx+58,fy+3]];
  ctx.font=&#39;11px Georgia&#39;; ctx.fillStyle=&#39;#212B41&#39;;
  flabels.forEach(([l,x,y])=&gt; ctx.fillText(l,x,y));
  ctx.font=&#39;11px monospace&#39;; ctx.fillStyle=&#39;#4C5670&#39;;
  ctx.fillText(&#39;Fischer — horizontal = toward viewer, vertical = away&#39;, fx, 235);
}

function renderDiagram(){
  const t = TOPIC_BY_ID[currentTopicId];
  const canvas = document.getElementById(&#39;diagramCanvas&#39;);
  const ctx = canvas.getContext(&#39;2d&#39;);
  const d = t.diagram;
  switch(d.type){
    case &#39;bond-line&#39;: draw_bondline(ctx, d); break;
    case &#39;orbital&#39;: draw_orbital(ctx, d); break;
    case &#39;arrow-map&#39;: draw_arrowmap(ctx, d.kind); break;
    case &#39;hbond&#39;: draw_hbond(ctx, d); break;
    case &#39;hbond-scale&#39;: draw_hbondscale(ctx, d); break;
    case &#39;tautomer&#39;: draw_tautomer(ctx); break;
    case &#39;mechanism&#39;: draw_mechanism(ctx, d.kind); break;
    case &#39;mechanism-sn&#39;: draw_mechanism_sn(ctx); break;
    case &#39;stereo&#39;: draw_stereo(ctx, d.kind); break;
    case &#39;newman&#39;: draw_newman(ctx); break;
    default:
      clearDiagram(ctx);
      ctx.font=&#39;13px Georgia&#39;; ctx.fillStyle=&#39;#212B41&#39;; ctx.textAlign=&#39;center&#39;;
      ctx.fillText(t.name, 280, 140);
  }
}

/* ============================= MAIN COLUMN RENDER ============================= */
function renderMainCol(){
  const col = document.getElementById(&#39;mainCol&#39;);
  if(viewMode===&#39;review&#39;){ renderReviewPanel(col); return; }

  const t = TOPIC_BY_ID[currentTopicId];
  const m = topicMastery(t.id);
  const locked = !prereqsMet(t) &amp;&amp; m===&#39;new&#39;;
  const mClass = m===&#39;new&#39;?&#39;mastery-new&#39;: m===&#39;learning&#39;?&#39;mastery-learning&#39;: m===&#39;due&#39;?&#39;mastery-learning&#39;:&#39;mastery-mastered&#39;;
  const mLabel = m===&#39;new&#39;?&#39;Not started&#39;: m===&#39;learning&#39;?&#39;Learning&#39;: m===&#39;due&#39;?&#39;Review due&#39;:&#39;Mastered&#39;;

  const prereqChips = t.prereqs.length
    ? t.prereqs.map(p=&gt;`&lt;span class=&quot;chip&quot;&gt;${TOPIC_BY_ID[p].name}&lt;/span&gt;`).join(&#39;&#39;)
    : &#39;&lt;span class=&quot;chip&quot;&gt;none — foundational&lt;/span&gt;&#39;;

  const newCount = newCardsForTopic(t.id).length;
  const dueCount = t.cards.filter((c,i)=&gt;{const s=getCardState(t.id,i); return s.seen &amp;&amp; s.due&lt;=Date.now();}).length;

  col.innerHTML = `
    &lt;div class=&quot;panel&quot;&gt;
      &lt;div class=&quot;topic-header&quot;&gt;
        &lt;div&gt;
          &lt;div class=&quot;eyebrow&quot;&gt;Unit ${t.unit} · ${UNIT_NAMES[t.unit]}&lt;/div&gt;
          &lt;h2&gt;${t.name}&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class=&quot;mastery-tag ${mClass}&quot;&gt;${mLabel}&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;diagram-wrap&quot;&gt;&lt;canvas id=&quot;diagramCanvas&quot; width=&quot;560&quot; height=&quot;280&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;
      &lt;div class=&quot;summary&quot;&gt;${t.summary}&lt;/div&gt;
      &lt;div class=&quot;prereq-row&quot;&gt;Builds on: ${prereqChips}&lt;/div&gt;
      &lt;div class=&quot;actions&quot;&gt;
        ${newCount&gt;0 ? `&lt;button class=&quot;btn&quot; id=&quot;learnBtn&quot;&gt;Learn ${newCount} new card${newCount&gt;1?&#39;s&#39;:&#39;&#39;}&lt;/button&gt;` : &#39;&#39;}
        ${dueCount&gt;0 ? `&lt;button class=&quot;btn secondary&quot; id=&quot;reviewTopicBtn&quot;&gt;Review ${dueCount} due here&lt;/button&gt;` : &#39;&#39;}
        ${newCount===0 &amp;&amp; dueCount===0 ? `&lt;span style=&quot;font-family:var(--mono);font-size:12px;color:var(--ink-soft);align-self:center;&quot;&gt;All caught up on this topic — nice work.&lt;/span&gt;` : &#39;&#39;}
      &lt;/div&gt;
      ${locked ? `&lt;div style=&quot;margin-top:12px;font-family:var(--mono);font-size:11px;color:var(--amber);&quot;&gt;Tip: this topic builds directly on earlier ones in the chain — visiting those first (left side of the map) will make this material click faster.&lt;/div&gt;` : &#39;&#39;}
    &lt;/div&gt;
  `;
  renderDiagram();

  const learnBtn = document.getElementById(&#39;learnBtn&#39;);
  if(learnBtn) learnBtn.onclick = ()=&gt; startReview(newCardsForTopic(t.id));
  const reviewTopicBtn = document.getElementById(&#39;reviewTopicBtn&#39;);
  if(reviewTopicBtn) reviewTopicBtn.onclick = ()=&gt;{
    const now=Date.now();
    const q = t.cards.map((c,i)=&gt;({topicId:t.id, idx:i, card:c})).filter(x=&gt;{
      const s=getCardState(x.topicId,x.idx); return s.seen &amp;&amp; s.due&lt;=now;
    });
    startReview(q);
  };
}

/* ============================= REVIEW SESSION ============================= */
function startReview(queue){
  if(!queue || queue.length===0) return;
  reviewSession = { queue, pos:0, revealed:false };
  viewMode=&#39;review&#39;;
  renderAll();
}

function renderReviewPanel(col){
  if(!reviewSession || reviewSession.pos &gt;= reviewSession.queue.length){
    col.innerHTML = `&lt;div class=&quot;panel&quot;&gt;&lt;div class=&quot;empty-state&quot;&gt;Session complete. Progress saved.&lt;br&gt;&lt;br&gt;&lt;button class=&quot;btn&quot; id=&quot;backBtn&quot;&gt;Back to topic map&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;`;
    document.getElementById(&#39;backBtn&#39;).onclick = ()=&gt;{ viewMode=&#39;topic&#39;; reviewSession=null; renderAll(); };
    return;
  }
  const item = reviewSession.queue[reviewSession.pos];
  const t = TOPIC_BY_ID[item.topicId];
  col.innerHTML = `
    &lt;div class=&quot;panel review-card&quot;&gt;
      &lt;div class=&quot;review-progress&quot;&gt;${t.name} · card ${reviewSession.pos+1} of ${reviewSession.queue.length}&lt;/div&gt;
      &lt;div class=&quot;qtext&quot;&gt;${item.card.q}&lt;/div&gt;
      ${reviewSession.revealed ? `&lt;div class=&quot;atext&quot;&gt;${item.card.a}&lt;/div&gt;` : `&lt;button class=&quot;btn reveal-btn&quot; id=&quot;revealBtn&quot;&gt;Show answer&lt;/button&gt;`}
      ${reviewSession.revealed ? `
        &lt;div class=&quot;grade-row&quot;&gt;
          &lt;button class=&quot;grade-btn grade-again&quot; data-q=&quot;0&quot;&gt;Again&lt;small&gt;&amp;lt;1 day&lt;/small&gt;&lt;/button&gt;
          &lt;button class=&quot;grade-btn grade-hard&quot; data-q=&quot;3&quot;&gt;Hard&lt;small&gt;short gap&lt;/small&gt;&lt;/button&gt;
          &lt;button class=&quot;grade-btn grade-good&quot; data-q=&quot;4&quot;&gt;Good&lt;small&gt;standard&lt;/small&gt;&lt;/button&gt;
          &lt;button class=&quot;grade-btn grade-easy&quot; data-q=&quot;5&quot;&gt;Easy&lt;small&gt;longer gap&lt;/small&gt;&lt;/button&gt;
        &lt;/div&gt;` : &#39;&#39;}
    &lt;/div&gt;
  `;
  const revealBtn = document.getElementById(&#39;revealBtn&#39;);
  if(revealBtn) revealBtn.onclick = ()=&gt;{ reviewSession.revealed=true; renderAll(); };
  col.querySelectorAll(&#39;.grade-btn&#39;).forEach(btn=&gt;{
    btn.onclick = async ()=&gt;{
      const q = parseInt(btn.dataset.q,10);
      const state = getCardState(item.topicId, item.idx);
      sm2Update(state, q);
      await saveState();
      reviewSession.pos += 1;
      reviewSession.revealed = false;
      renderAll();
    };
  });
}

/* ============================= DUE PILL / GLOBAL REVIEW ============================= */
function renderDuePill(){
  const btn = document.getElementById(&#39;dueBtn&#39;);
  const n = dueCards().length;
  btn.textContent = n&gt;0 ? `${n} card${n&gt;1?&#39;s&#39;:&#39;&#39;} due for review` : &#39;All reviews caught up&#39;;
  btn.className = &#39;due-pill&#39; + (n===0? &#39; zero&#39;:&#39;&#39;);
  btn.onclick = ()=&gt;{ if(n&gt;0) startReview(dueCards()); };
}

/* ============================= RENDER ALL ============================= */
function renderAll(){
  drawMap();
  renderUnitJump();
  renderMainCol();
  renderDuePill();
}

/* ============================= INIT ============================= */
(async function init(){
  await loadState();
  renderAll();
})();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/4905448559813855281/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/4905448559813855281' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/4905448559813855281'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/4905448559813855281'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2026/07/pharmaceutical-chemistry-1a-organic.html' title='Pharmaceutical Chemistry 1A (Organic Chemistry 1) - Learning using Logical Flow and Spaced Repitition strategies'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRCPp1lcgrxeqLDos5T6WfdaP89wz74fVBCkpVI9WUb0N5n5KnLqMgtfRWaR8sYGK2uewqvWCuwuNYFS387SXeUjTW-_RCj5FG5eN1YQMl5qQKiGGrKwATCsytRwddrzTUu535jQsrRXUwkaIUOMzd3D7i9xHNT6SViQbwxTVtSOsNFs6ssaBM6TMfumt0/s72-c/Pharmaceutical%20Chemistry%20cover.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-7132931222906423542</id><published>2026-07-21T07:13:52.084+05:00</published><updated>2026-07-21T07:13:52.084+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="game"/><category scheme="http://www.blogger.com/atom/ns#" term="memory"/><category scheme="http://www.blogger.com/atom/ns#" term="psychology"/><title type='text'>N-Back Trainer - Working memory / cognitive training</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQTT2pxFjzH4vpiIgy4un9IANVOqu0LfGrllH6Dwwj8kX1DAmL29TGTTn_zLYaHky8_PFnxZz6aURm1y5hJiK36-umX6OG7c6DDDd9hyLJAvCUNWA-8x1SWkR7T_w6D6bQMdEeTgPEQoZZE3n3gOG7SdkfqjBIsn3R39UtdU-bD_1YbOpOoXPzfcXzjOWg/s658/Cover.png&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;400&quot; data-original-height=&quot;640&quot; data-original-width=&quot;658&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQTT2pxFjzH4vpiIgy4un9IANVOqu0LfGrllH6Dwwj8kX1DAmL29TGTTn_zLYaHky8_PFnxZz6aURm1y5hJiK36-umX6OG7c6DDDd9hyLJAvCUNWA-8x1SWkR7T_w6D6bQMdEeTgPEQoZZE3n3gOG7SdkfqjBIsn3R39UtdU-bD_1YbOpOoXPzfcXzjOWg/s400/Cover.png&quot;/&gt;&lt;/a&gt;&lt;/div&gt;

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;title&gt;N-Back Trainer&lt;/title&gt;
&lt;style&gt;
  :root{
    --bg:        #0B0D10;
    --panel:     #12161B;
    --panel-2:   #171C22;
    --line:      #232A32;
    --cell:      #1C232B;
    --cell-glow: #6FD6E8;
    --signal:    #6FD6E8;   /* cyan-teal: primary signal */
    --amber:     #F2B84B;   /* secondary signal / N indicator */
    --good:      #46D18A;   /* correct */
    --bad:       #E8637A;   /* incorrect */
    --text:      #E7EDF2;
    --muted:     #7C8896;
    --mono: &#39;JetBrains Mono&#39;, ui-monospace, &#39;SF Mono&#39;, &#39;Cascadia Mono&#39;, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Inter, Roboto, sans-serif;
  }

  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    padding:32px 16px 64px;
  }

  .wrap{max-width:760px;margin:0 auto;}

  /* ---------- header ---------- */
  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.18em;
    color:var(--signal);
    text-transform:uppercase;
    margin:0 0 10px;
  }
  h1{
    font-family:var(--mono);
    font-size:clamp(28px,5vw,40px);
    letter-spacing:-0.01em;
    margin:0 0 14px;
    line-height:1.05;
  }
  h1 span{color:var(--muted);}
  .intro{
    color:var(--muted);
    font-size:15px;
    line-height:1.6;
    max-width:60ch;
    margin:0 0 32px;
  }
  .intro strong{color:var(--text);font-weight:600;}

  /* ---------- panel shell ---------- */
  .panel{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:10px;
    padding:22px;
    margin-bottom:18px;
  }
  .panel-label{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0 0 14px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .panel-label::after{
    content:&#39;&#39;;
    flex:1;
    height:1px;
    background:var(--line);
  }

  /* ---------- controls ---------- */
  .controls-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:18px;
  }
  .field label.field-name{
    display:block;
    font-family:var(--mono);
    font-size:11px;
    color:var(--muted);
    letter-spacing:.06em;
    margin-bottom:8px;
  }
  .seg{
    display:flex;
    border:1px solid var(--line);
    border-radius:7px;
    overflow:hidden;
  }
  .seg button{
    flex:1;
    background:transparent;
    border:none;
    color:var(--muted);
    font-family:var(--mono);
    font-size:12.5px;
    padding:9px 6px;
    cursor:pointer;
    border-right:1px solid var(--line);
    transition:background .15s, color .15s;
  }
  .seg button:last-child{border-right:none;}
  .seg button:hover{color:var(--text);}
  .seg button.active{
    background:var(--signal);
    color:#08111a;
    font-weight:700;
  }
  .field.disabled{opacity:.4;pointer-events:none;}

  .trials-input{
    display:flex; align-items:center; gap:10px;
    border:1px solid var(--line);
    border-radius:7px;
    padding:8px 12px;
  }
  .trials-input input[type=range]{flex:1; accent-color:var(--signal);}
  .trials-input .val{
    font-family:var(--mono);
    font-size:13px;
    color:var(--signal);
    width:28px;
    text-align:right;
  }

  .toggle-row{display:flex;align-items:center;gap:10px;}
  .toggle{
    width:36px;height:20px;border-radius:20px;
    background:var(--line);
    position:relative;cursor:pointer;
    transition:background .15s;
    flex-shrink:0;
  }
  .toggle.on{background:var(--signal);}
  .toggle::after{
    content:&#39;&#39;;
    position:absolute;top:2px;left:2px;
    width:16px;height:16px;border-radius:50%;
    background:#fff;
    transition:transform .15s;
  }
  .toggle.on::after{transform:translateX(16px);}
  .toggle-label{font-family:var(--mono);font-size:12px;color:var(--muted);}

  /* ---------- game area ---------- */
  .game-panel{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:28px 22px 24px;
  }

  .status-row{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-family:var(--mono);
    font-size:12px;
    color:var(--muted);
    margin-bottom:16px;
  }
  .status-row .n-badge{
    color:var(--amber);
    border:1px solid #3a3220;
    background:#1a1710;
    padding:3px 9px;
    border-radius:5px;
  }

  .progress-track{
    width:100%;
    height:3px;
    background:var(--line);
    border-radius:3px;
    overflow:hidden;
    margin-bottom:22px;
  }
  .progress-fill{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,var(--signal),var(--amber));
    transition:width .1s linear;
  }

  canvas#grid{
    display:block;
    margin-bottom:8px;
  }

  .cycle-bar{
    width:340px;
    max-width:100%;
    height:4px;
    background:var(--line);
    border-radius:4px;
    overflow:hidden;
    margin-bottom:22px;
  }
  .cycle-fill{
    height:100%;
    width:0%;
    background:var(--muted);
  }

  .response-row{
    display:flex;
    gap:12px;
    margin-bottom:20px;
    flex-wrap:wrap;
    justify-content:center;
  }
  .resp-btn{
    font-family:var(--mono);
    font-size:13px;
    color:var(--text);
    background:var(--cell);
    border:1px solid var(--line);
    border-radius:8px;
    padding:12px 20px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:8px;
    transition:border-color .1s, background .1s, transform .05s;
    user-select:none;
  }
  .resp-btn:active{transform:scale(.96);}
  .resp-btn kbd{
    background:#0d1116;
    border:1px solid var(--line);
    border-radius:4px;
    padding:1px 6px;
    font-size:11px;
    color:var(--muted);
  }
  .resp-btn.flash-good{border-color:var(--good); background:#0e2119;}
  .resp-btn.flash-bad{border-color:var(--bad); background:#241014;}

  .main-actions{
    display:flex;
    gap:10px;
  }
  .btn{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:.04em;
    padding:11px 22px;
    border-radius:7px;
    border:1px solid var(--line);
    background:transparent;
    color:var(--text);
    cursor:pointer;
    transition:background .15s,border-color .15s;
  }
  .btn.primary{
    background:var(--signal);
    color:#08111a;
    border-color:var(--signal);
    font-weight:700;
  }
  .btn.primary:hover{filter:brightness(1.08);}
  .btn.ghost:hover{border-color:var(--muted);}
  .btn:disabled{opacity:.35;cursor:default;}

  /* ---------- trace strip ---------- */
  .trace-strip{
    display:flex;
    gap:3px;
    flex-wrap:wrap;
    margin-top:6px;
  }
  .trace-dot{
    width:9px;height:9px;border-radius:2px;
    background:var(--line);
  }
  .trace-dot.hit{background:var(--good);}
  .trace-dot.miss{background:var(--bad);opacity:.55;}
  .trace-dot.false-alarm{background:var(--bad);}
  .trace-dot.correct-rejection{background:#2a3138;}
  .trace-legend{
    display:flex;gap:16px;margin-top:12px;
    font-family:var(--mono);font-size:10.5px;color:var(--muted);
    flex-wrap:wrap;
  }
  .trace-legend span{display:flex;align-items:center;gap:5px;}
  .trace-legend i{width:8px;height:8px;border-radius:2px;display:inline-block;}

  /* ---------- results ---------- */
  .results-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
    margin-bottom:18px;
  }
  .stat-cell{
    background:var(--panel-2);
    padding:16px 14px;
  }
  .stat-cell .num{
    font-family:var(--mono);
    font-size:26px;
    font-weight:700;
    color:var(--text);
    line-height:1;
  }
  .stat-cell .num.good{color:var(--good);}
  .stat-cell .num.bad{color:var(--bad);}
  .stat-cell .num.signal{color:var(--signal);}
  .stat-cell .lbl{
    font-family:var(--mono);
    font-size:10.5px;
    color:var(--muted);
    letter-spacing:.06em;
    text-transform:uppercase;
    margin-top:6px;
  }

  .channel-table{
    width:100%;
    border-collapse:collapse;
    font-family:var(--mono);
    font-size:12.5px;
  }
  .channel-table th, .channel-table td{
    text-align:left;
    padding:9px 10px;
    border-bottom:1px solid var(--line);
    color:var(--text);
  }
  .channel-table th{
    color:var(--muted);
    font-weight:400;
    text-transform:uppercase;
    font-size:10.5px;
    letter-spacing:.06em;
  }
  .channel-table tr:last-child td{border-bottom:none;}
  .channel-table td.good{color:var(--good);}
  .channel-table td.bad{color:var(--bad);}

  .summary-line{
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--muted);
    margin-top:14px;
    line-height:1.7;
  }
  .summary-line b{color:var(--text);}

  .empty-state{
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--muted);
    text-align:center;
    padding:20px 0;
  }

  footer.note{
    font-family:var(--mono);
    font-size:11px;
    color:var(--muted);
    text-align:center;
    margin-top:28px;
    line-height:1.7;
  }

  @media (max-width:480px){
    canvas#grid{width:280px !important; height:280px !important;}
    .cycle-bar{width:280px;}
  }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;wrap&quot;&gt;

  &lt;p class=&quot;eyebrow&quot;&gt;Working memory / cognitive training&lt;/p&gt;
  &lt;h1&gt;N-Back &lt;span&gt;Trainer&lt;/span&gt;&lt;/h1&gt;
  &lt;p class=&quot;intro&quot;&gt;
    On every trial a square lights up on the grid (and, in audio modes, a letter is spoken).
    Your job: decide whether the &lt;strong&gt;current&lt;/strong&gt; stimulus matches the one shown
    &lt;strong&gt;N steps back&lt;/strong&gt; in the sequence. Press match as soon as you notice a repeat —
    scoring below tracks hits, misses, and false alarms in real time.
  &lt;/p&gt;

  &lt;!-- ============ CONTROLS ============ --&gt;
  &lt;div class=&quot;panel&quot;&gt;
    &lt;p class=&quot;panel-label&quot;&gt;Setup&lt;/p&gt;
    &lt;div class=&quot;controls-grid&quot;&gt;

      &lt;div class=&quot;field&quot;&gt;
        &lt;label class=&quot;field-name&quot;&gt;N-Level&lt;/label&gt;
        &lt;div class=&quot;seg&quot; id=&quot;seg-n&quot;&gt;
          &lt;button data-val=&quot;1&quot; class=&quot;active&quot;&gt;1-back&lt;/button&gt;
          &lt;button data-val=&quot;2&quot;&gt;2-back&lt;/button&gt;
          &lt;button data-val=&quot;3&quot;&gt;3-back&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;field&quot;&gt;
        &lt;label class=&quot;field-name&quot;&gt;Speed&lt;/label&gt;
        &lt;div class=&quot;seg&quot; id=&quot;seg-speed&quot;&gt;
          &lt;button data-val=&quot;3200&quot;&gt;Slow&lt;/button&gt;
          &lt;button data-val=&quot;2400&quot; class=&quot;active&quot;&gt;Normal&lt;/button&gt;
          &lt;button data-val=&quot;1700&quot;&gt;Fast&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;field&quot;&gt;
        &lt;label class=&quot;field-name&quot;&gt;Mode&lt;/label&gt;
        &lt;div class=&quot;seg&quot; id=&quot;seg-mode&quot;&gt;
          &lt;button data-val=&quot;visual&quot; class=&quot;active&quot;&gt;Visual&lt;/button&gt;
          &lt;button data-val=&quot;audio&quot;&gt;Audio&lt;/button&gt;
          &lt;button data-val=&quot;dual&quot;&gt;Dual&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;field&quot;&gt;
        &lt;label class=&quot;field-name&quot;&gt;Trials&lt;/label&gt;
        &lt;div class=&quot;trials-input&quot;&gt;
          &lt;input type=&quot;range&quot; id=&quot;trialsRange&quot; min=&quot;12&quot; max=&quot;40&quot; step=&quot;1&quot; value=&quot;20&quot;&gt;
          &lt;span class=&quot;val&quot; id=&quot;trialsVal&quot;&gt;20&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;field&quot;&gt;
        &lt;label class=&quot;field-name&quot;&gt;Sound cues&lt;/label&gt;
        &lt;div class=&quot;toggle-row&quot;&gt;
          &lt;div class=&quot;toggle on&quot; id=&quot;soundToggle&quot;&gt;&lt;/div&gt;
          &lt;span class=&quot;toggle-label&quot; id=&quot;soundLabel&quot;&gt;Spoken letters on&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- ============ GAME ============ --&gt;
  &lt;div class=&quot;panel game-panel&quot;&gt;
    &lt;div class=&quot;status-row&quot;&gt;
      &lt;span&gt;TRIAL &lt;b id=&quot;trialCount&quot; style=&quot;color:var(--text)&quot;&gt;0&lt;/b&gt;/&lt;span id=&quot;trialTotal&quot;&gt;20&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;n-badge&quot;&gt;N = &lt;span id=&quot;nBadge&quot;&gt;1&lt;/span&gt;&lt;/span&gt;
      &lt;span id=&quot;modeBadge&quot;&gt;VISUAL&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class=&quot;progress-track&quot;&gt;&lt;div class=&quot;progress-fill&quot; id=&quot;progressFill&quot;&gt;&lt;/div&gt;&lt;/div&gt;

    &lt;canvas id=&quot;grid&quot; width=&quot;320&quot; height=&quot;320&quot;&gt;&lt;/canvas&gt;

    &lt;div class=&quot;cycle-bar&quot;&gt;&lt;div class=&quot;cycle-fill&quot; id=&quot;cycleFill&quot;&gt;&lt;/div&gt;&lt;/div&gt;

    &lt;div class=&quot;response-row&quot; id=&quot;responseRow&quot;&gt;
      &lt;button class=&quot;resp-btn&quot; id=&quot;btnPos&quot;&gt;Position match &lt;kbd&gt;A&lt;/kbd&gt;&lt;/button&gt;
      &lt;button class=&quot;resp-btn&quot; id=&quot;btnAud&quot; style=&quot;display:none&quot;&gt;Audio match &lt;kbd&gt;L&lt;/kbd&gt;&lt;/button&gt;
    &lt;/div&gt;

    &lt;div class=&quot;main-actions&quot;&gt;
      &lt;button class=&quot;btn primary&quot; id=&quot;startBtn&quot;&gt;Start session&lt;/button&gt;
      &lt;button class=&quot;btn ghost&quot; id=&quot;stopBtn&quot; disabled&gt;Stop&lt;/button&gt;
      &lt;button class=&quot;btn ghost&quot; id=&quot;resetBtn&quot;&gt;Reset&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- ============ RESULTS ============ --&gt;
  &lt;div class=&quot;panel&quot;&gt;
    &lt;p class=&quot;panel-label&quot;&gt;Session results&lt;/p&gt;
    &lt;div id=&quot;resultsBody&quot;&gt;
      &lt;p class=&quot;empty-state&quot;&gt;Run a session to see your hit rate, false alarms, and reaction time here.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class=&quot;panel&quot;&gt;
    &lt;p class=&quot;panel-label&quot;&gt;Trial-by-trial trace&lt;/p&gt;
    &lt;div class=&quot;trace-strip&quot; id=&quot;traceStrip&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;trace-legend&quot;&gt;
      &lt;span&gt;&lt;i style=&quot;background:var(--good)&quot;&gt;&lt;/i&gt;Hit&lt;/span&gt;
      &lt;span&gt;&lt;i style=&quot;background:var(--bad);opacity:.55&quot;&gt;&lt;/i&gt;Miss&lt;/span&gt;
      &lt;span&gt;&lt;i style=&quot;background:var(--bad)&quot;&gt;&lt;/i&gt;False alarm&lt;/span&gt;
      &lt;span&gt;&lt;i style=&quot;background:#2a3138&quot;&gt;&lt;/i&gt;Correct rejection&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;footer class=&quot;note&quot;&gt;
    N-back difficulty comes from load, not speed — if 2-back feels easy, raise N before you raise speed.&lt;br&gt;
    Runs entirely in your browser · no data leaves this page.
  &lt;/footer&gt;

&lt;/div&gt;

&lt;script&gt;
(function(){
  &quot;use strict&quot;;

  // ---------------- state ----------------
  var cfg = { n:1, interval:2400, mode:&#39;visual&#39;, trials:20, sound:true };
  var seq = [];              // {pos, letter}
  var respPos = [];          // bool: did user press position-match during trial i
  var respAud = [];
  var rtPos = [];            // reaction time ms (or null)
  var rtAud = [];
  var trialOutcomes = [];    // per trial: {pos:&#39;hit&#39;|&#39;miss&#39;|&#39;false-alarm&#39;|&#39;correct-rejection&#39;|null, aud:...}
  var currentTrial = -1;
  var running = false;
  var trialStartTime = 0;
  var timers = [];
  var LETTERS = [&#39;C&#39;,&#39;H&#39;,&#39;K&#39;,&#39;L&#39;,&#39;Q&#39;,&#39;R&#39;,&#39;S&#39;,&#39;T&#39;];
  var MATCH_CHANCE = 0.32;

  // ---------------- element refs ----------------
  var canvas = document.getElementById(&#39;grid&#39;);
  var ctx = canvas.getContext(&#39;2d&#39;);
  var trialCountEl = document.getElementById(&#39;trialCount&#39;);
  var trialTotalEl = document.getElementById(&#39;trialTotal&#39;);
  var nBadge = document.getElementById(&#39;nBadge&#39;);
  var modeBadge = document.getElementById(&#39;modeBadge&#39;);
  var progressFill = document.getElementById(&#39;progressFill&#39;);
  var cycleFill = document.getElementById(&#39;cycleFill&#39;);
  var btnPos = document.getElementById(&#39;btnPos&#39;);
  var btnAud = document.getElementById(&#39;btnAud&#39;);
  var startBtn = document.getElementById(&#39;startBtn&#39;);
  var stopBtn = document.getElementById(&#39;stopBtn&#39;);
  var resetBtn = document.getElementById(&#39;resetBtn&#39;);
  var resultsBody = document.getElementById(&#39;resultsBody&#39;);
  var traceStrip = document.getElementById(&#39;traceStrip&#39;);

  function resizeCanvas(){
    var w = Math.min(320, window.innerWidth - 90);
    canvas.style.width = w+&#39;px&#39;;
    canvas.style.height = w+&#39;px&#39;;
  }
  resizeCanvas();
  window.addEventListener(&#39;resize&#39;, resizeCanvas);

  // ---------------- controls wiring ----------------
  function wireSeg(id, onPick){
    var el = document.getElementById(id);
    el.querySelectorAll(&#39;button&#39;).forEach(function(b){
      b.addEventListener(&#39;click&#39;, function(){
        if(running) return;
        el.querySelectorAll(&#39;button&#39;).forEach(function(x){x.classList.remove(&#39;active&#39;);});
        b.classList.add(&#39;active&#39;);
        onPick(b.getAttribute(&#39;data-val&#39;));
      });
    });
  }
  wireSeg(&#39;seg-n&#39;, function(v){ cfg.n = parseInt(v,10); nBadge.textContent = cfg.n; });
  wireSeg(&#39;seg-speed&#39;, function(v){ cfg.interval = parseInt(v,10); });
  wireSeg(&#39;seg-mode&#39;, function(v){
    cfg.mode = v;
    modeBadge.textContent = v.toUpperCase();
    btnPos.style.display = (v === &#39;audio&#39;) ? &#39;none&#39; : &#39;flex&#39;;
    btnAud.style.display = (v === &#39;visual&#39;) ? &#39;none&#39; : &#39;flex&#39;;
  });

  var trialsRange = document.getElementById(&#39;trialsRange&#39;);
  var trialsVal = document.getElementById(&#39;trialsVal&#39;);
  trialsRange.addEventListener(&#39;input&#39;, function(){
    cfg.trials = parseInt(trialsRange.value,10);
    trialsVal.textContent = cfg.trials;
    trialTotalEl.textContent = cfg.trials;
  });

  var soundToggle = document.getElementById(&#39;soundToggle&#39;);
  var soundLabel = document.getElementById(&#39;soundLabel&#39;);
  soundToggle.addEventListener(&#39;click&#39;, function(){
    if(running) return;
    cfg.sound = !cfg.sound;
    soundToggle.classList.toggle(&#39;on&#39;, cfg.sound);
    soundLabel.textContent = cfg.sound ? &#39;Spoken letters on&#39; : &#39;Spoken letters off&#39;;
  });

  // ---------------- sequence generation ----------------
  function buildSequence(){
    var arr = [];
    for(var i=0;i&lt;cfg.trials;i++){
      var pos, letter;
      if(i &gt;= cfg.n &amp;&amp; Math.random() &lt; MATCH_CHANCE){
        pos = arr[i-cfg.n].pos;
      } else if(i &gt;= cfg.n){
        do { pos = Math.floor(Math.random()*9); } while(pos === arr[i-cfg.n].pos);
      } else {
        pos = Math.floor(Math.random()*9);
      }
      if(cfg.mode !== &#39;visual&#39;){
        if(i &gt;= cfg.n &amp;&amp; Math.random() &lt; MATCH_CHANCE){
          letter = arr[i-cfg.n].letter;
        } else if(i &gt;= cfg.n){
          do { letter = LETTERS[Math.floor(Math.random()*LETTERS.length)]; } while(letter === arr[i-cfg.n].letter);
        } else {
          letter = LETTERS[Math.floor(Math.random()*LETTERS.length)];
        }
      } else {
        letter = null;
      }
      arr.push({pos:pos, letter:letter});
    }
    return arr;
  }

  // ---------------- drawing ----------------
  function drawGrid(activeIdx, flashState){
    var w = canvas.width, gap = w*0.05, cell = (w - gap*4)/3;
    ctx.clearRect(0,0,w,w);
    ctx.fillStyle = &#39;#0d1116&#39;;
    ctx.fillRect(0,0,w,w);
    for(var r=0;r&lt;3;r++){
      for(var c=0;c&lt;3;c++){
        var idx = r*3+c;
        var x = gap + c*(cell+gap);
        var y = gap + r*(cell+gap);
        var isActive = (idx === activeIdx);
        ctx.beginPath();
        if(ctx.roundRect){ ctx.roundRect(x,y,cell,cell,10); } else { ctx.rect(x,y,cell,cell); }
        if(isActive){
          var glowColor = flashState === &#39;good&#39; ? &#39;#46D18A&#39; : (flashState === &#39;bad&#39; ? &#39;#E8637A&#39; : &#39;#6FD6E8&#39;);
          ctx.shadowColor = glowColor;
          ctx.shadowBlur = 22;
          ctx.fillStyle = glowColor;
        } else {
          ctx.shadowBlur = 0;
          ctx.fillStyle = &#39;#1C232B&#39;;
        }
        ctx.fill();
        ctx.shadowBlur = 0;
        ctx.strokeStyle = &#39;#232A32&#39;;
        ctx.lineWidth = 1;
        ctx.stroke();
      }
    }
  }
  drawGrid(-1);

  // ---------------- speech ----------------
  function speak(letter){
    if(!cfg.sound || !window.speechSynthesis) return;
    try{
      window.speechSynthesis.cancel();
      var u = new SpeechSynthesisUtterance(letter);
      u.rate = 1.0; u.pitch = 1.0; u.volume = 1.0;
      window.speechSynthesis.speak(u);
    }catch(e){}
  }

  // ---------------- game flow ----------------
  function resetState(){
    seq = []; respPos = []; respAud = []; rtPos = []; rtAud = []; trialOutcomes = [];
    currentTrial = -1;
    timers.forEach(clearTimeout); timers = [];
    trialCountEl.textContent = &#39;0&#39;;
    progressFill.style.width = &#39;0%&#39;;
    cycleFill.style.width = &#39;0%&#39;;
    drawGrid(-1);
    traceStrip.innerHTML = &#39;&#39;;
    resultsBody.innerHTML = &#39;&lt;p class=&quot;empty-state&quot;&gt;Run a session to see your hit rate, false alarms, and reaction time here.&lt;/p&gt;&#39;;
    startBtn.disabled = false; stopBtn.disabled = true;
  }

  function startSession(){
    seq = buildSequence();
    respPos = new Array(cfg.trials).fill(false);
    respAud = new Array(cfg.trials).fill(false);
    rtPos = new Array(cfg.trials).fill(null);
    rtAud = new Array(cfg.trials).fill(null);
    trialOutcomes = new Array(cfg.trials).fill(null).map(function(){return {pos:null, aud:null};});
    currentTrial = -1;
    running = true;
    startBtn.disabled = true; stopBtn.disabled = false;
    trialTotalEl.textContent = cfg.trials;
    nBadge.textContent = cfg.n;
    modeBadge.textContent = cfg.mode.toUpperCase();
    traceStrip.innerHTML = &#39;&#39;;
    resultsBody.innerHTML = &#39;&lt;p class=&quot;empty-state&quot;&gt;Session running…&lt;/p&gt;&#39;;
    nextTrial();
  }

  function stopSession(finished){
    running = false;
    timers.forEach(clearTimeout); timers = [];
    startBtn.disabled = false; stopBtn.disabled = true;
    if(window.speechSynthesis) window.speechSynthesis.cancel();
    if(finished !== false){
      renderResults();
    }
  }

  function nextTrial(){
    if(!running) return;
    currentTrial++;
    if(currentTrial &gt;= cfg.trials){
      stopSession(true);
      return;
    }
    trialCountEl.textContent = (currentTrial+1);
    progressFill.style.width = ((currentTrial+1)/cfg.trials*100) + &#39;%&#39;;
    trialStartTime = performance.now();

    var trial = seq[currentTrial];
    var showPos = (cfg.mode === &#39;visual&#39; || cfg.mode === &#39;dual&#39;) ? trial.pos : -1;
    drawGrid(showPos, null);
    if((cfg.mode === &#39;audio&#39; || cfg.mode === &#39;dual&#39;) &amp;&amp; trial.letter){
      speak(trial.letter);
    }
    btnPos.classList.remove(&#39;flash-good&#39;,&#39;flash-bad&#39;);
    btnAud.classList.remove(&#39;flash-good&#39;,&#39;flash-bad&#39;);

    // stimulus visible for ~45% of interval, then blank
    var stimDur = cfg.interval * 0.45;
    timers.push(setTimeout(function(){
      if(!running) return;
      drawGrid(-1);
    }, stimDur));

    // animate the cycle bar across the full interval
    var start = performance.now();
    function animateCycle(){
      if(!running) return;
      var elapsed = performance.now() - start;
      var pct = Math.min(100, (elapsed/cfg.interval)*100);
      cycleFill.style.width = pct + &#39;%&#39;;
      if(elapsed &lt; cfg.interval){
        requestAnimationFrame(animateCycle);
      }
    }
    requestAnimationFrame(animateCycle);

    // finalize scoring + advance at end of interval
    timers.push(setTimeout(function(){
      finalizeTrial(currentTrial);
      nextTrial();
    }, cfg.interval));
  }

  function finalizeTrial(i){
    if(i &lt; cfg.n) return; // no history to compare yet
    var isMatchPos = seq[i].pos === seq[i-cfg.n].pos;
    var outcome = trialOutcomes[i];

    if(cfg.mode === &#39;visual&#39; || cfg.mode === &#39;dual&#39;){
      if(respPos[i]) outcome.pos = isMatchPos ? &#39;hit&#39; : &#39;false-alarm&#39;;
      else outcome.pos = isMatchPos ? &#39;miss&#39; : &#39;correct-rejection&#39;;
    }
    if(cfg.mode === &#39;audio&#39; || cfg.mode === &#39;dual&#39;){
      var isMatchAud = seq[i].letter === seq[i-cfg.n].letter;
      if(respAud[i]) outcome.aud = isMatchAud ? &#39;hit&#39; : &#39;false-alarm&#39;;
      else outcome.aud = isMatchAud ? &#39;miss&#39; : &#39;correct-rejection&#39;;
    }
    appendTraceDots(i, outcome);
  }

  function appendTraceDots(i, outcome){
    if(outcome.pos){
      var d = document.createElement(&#39;div&#39;);
      d.className = &#39;trace-dot &#39; + outcome.pos;
      d.title = &#39;Trial &#39; + (i+1) + &#39; — position: &#39; + outcome.pos;
      traceStrip.appendChild(d);
    }
    if(outcome.aud){
      var d2 = document.createElement(&#39;div&#39;);
      d2.className = &#39;trace-dot &#39; + outcome.aud;
      d2.title = &#39;Trial &#39; + (i+1) + &#39; — audio: &#39; + outcome.aud;
      traceStrip.appendChild(d2);
    }
  }

  // ---------------- responses ----------------
  function respond(channel){
    if(!running || currentTrial &lt; 0 || currentTrial &gt;= cfg.trials) return;
    var i = currentTrial;
    var already = (channel === &#39;pos&#39;) ? respPos[i] : respAud[i];
    if(already) return;
    var rt = performance.now() - trialStartTime;

    if(channel === &#39;pos&#39;){
      respPos[i] = true; rtPos[i] = rt;
    } else {
      respAud[i] = true; rtAud[i] = rt;
    }

    // immediate visual feedback if we already have history to judge against
    var btn = channel === &#39;pos&#39; ? btnPos : btnAud;
    if(i &gt;= cfg.n){
      var isMatch = channel === &#39;pos&#39;
        ? seq[i].pos === seq[i-cfg.n].pos
        : seq[i].letter === seq[i-cfg.n].letter;
      btn.classList.add(isMatch ? &#39;flash-good&#39; : &#39;flash-bad&#39;);
      if(channel === &#39;pos&#39;){
        drawGrid(seq[i].pos, isMatch ? &#39;good&#39; : &#39;bad&#39;);
      }
    } else {
      // pressed before enough history exists — always a false alarm once scored,
      // but nothing to compare yet, so just acknowledge the press neutrally
      btn.classList.add(&#39;flash-bad&#39;);
    }
  }

  btnPos.addEventListener(&#39;click&#39;, function(){ respond(&#39;pos&#39;); });
  btnAud.addEventListener(&#39;click&#39;, function(){ respond(&#39;aud&#39;); });
  document.addEventListener(&#39;keydown&#39;, function(e){
    if(e.repeat) return;
    var k = e.key.toLowerCase();
    if(k === &#39;a&#39;) respond(&#39;pos&#39;);
    if(k === &#39;l&#39;) respond(&#39;aud&#39;);
  });

  startBtn.addEventListener(&#39;click&#39;, startSession);
  stopBtn.addEventListener(&#39;click&#39;, function(){ stopSession(false); resetState(); });
  resetBtn.addEventListener(&#39;click&#39;, function(){ stopSession(false); resetState(); });

  // ---------------- results rendering ----------------
  function tally(channel){
    var hit=0, miss=0, fa=0, cr=0, rtSum=0, rtN=0;
    for(var i=0;i&lt;trialOutcomes.length;i++){
      var o = trialOutcomes[i][channel];
      if(!o) continue;
      if(o === &#39;hit&#39;){ hit++; var rt = channel===&#39;pos&#39;?rtPos[i]:rtAud[i]; if(rt!=null){rtSum+=rt; rtN++;} }
      else if(o === &#39;miss&#39;) miss++;
      else if(o === &#39;false-alarm&#39;) fa++;
      else if(o === &#39;correct-rejection&#39;) cr++;
    }
    var scored = hit+miss+fa+cr;
    var acc = scored ? Math.round(((hit+cr)/scored)*100) : null;
    var avgRt = rtN ? Math.round(rtSum/rtN) : null;
    return {hit:hit, miss:miss, fa:fa, cr:cr, scored:scored, acc:acc, avgRt:avgRt};
  }

  function renderResults(){
    var usePos = (cfg.mode === &#39;visual&#39; || cfg.mode === &#39;dual&#39;);
    var useAud = (cfg.mode === &#39;audio&#39; || cfg.mode === &#39;dual&#39;);
    var posT = usePos ? tally(&#39;pos&#39;) : null;
    var audT = useAud ? tally(&#39;aud&#39;) : null;

    // combined overall accuracy across active channels
    var totalHit=0, totalCR=0, totalScored=0;
    if(posT){ totalHit+=posT.hit; totalCR+=posT.cr; totalScored+=posT.scored; }
    if(audT){ totalHit+=audT.hit; totalCR+=audT.cr; totalScored+=audT.scored; }
    var overallAcc = totalScored ? Math.round(((totalHit+totalCR)/totalScored)*100) : 0;

    var rtVals = [];
    if(posT &amp;&amp; posT.avgRt!=null) rtVals.push(posT.avgRt);
    if(audT &amp;&amp; audT.avgRt!=null) rtVals.push(audT.avgRt);
    var avgRtOverall = rtVals.length ? Math.round(rtVals.reduce(function(a,b){return a+b;},0)/rtVals.length) : null;

    var totalFA = (posT?posT.fa:0) + (audT?audT.fa:0);
    var totalMiss = (posT?posT.miss:0) + (audT?audT.miss:0);

    var html = &#39;&#39;;
    html += &#39;&lt;div class=&quot;results-grid&quot;&gt;&#39;;
    html += statCell(overallAcc + &#39;%&#39;, &#39;Overall accuracy&#39;, overallAcc&gt;=80?&#39;good&#39;:(overallAcc&gt;=50?&#39;signal&#39;:&#39;bad&#39;));
    html += statCell(totalHit, &#39;Hits&#39;, &#39;good&#39;);
    html += statCell(totalMiss, &#39;Misses&#39;, &#39;bad&#39;);
    html += statCell(totalFA, &#39;False alarms&#39;, &#39;bad&#39;);
    html += statCell((avgRtOverall!=null ? avgRtOverall+&#39; ms&#39; : &#39;—&#39;), &#39;Avg. reaction time&#39;, &#39;signal&#39;);
    html += &#39;&lt;/div&gt;&#39;;

    html += &#39;&lt;table class=&quot;channel-table&quot;&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Channel&lt;/th&gt;&lt;th&gt;Hits&lt;/th&gt;&lt;th&gt;Misses&lt;/th&gt;&lt;th&gt;False alarms&lt;/th&gt;&lt;th&gt;Correct rej.&lt;/th&gt;&lt;th&gt;Accuracy&lt;/th&gt;&lt;th&gt;Avg RT&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&#39;;
    if(posT) html += channelRow(&#39;Position&#39;, posT);
    if(audT) html += channelRow(&#39;Audio&#39;, audT);
    html += &#39;&lt;/tbody&gt;&lt;/table&gt;&#39;;

    html += &#39;&lt;p class=&quot;summary-line&quot;&gt;&#39; +
      &#39;Ran &lt;b&gt;&#39; + cfg.trials + &#39;&lt;/b&gt; trials at &lt;b&gt;&#39; + cfg.n + &#39;-back&lt;/b&gt;, &#39; +
      &#39;&lt;b&gt;&#39; + speedLabel() + &#39;&lt;/b&gt; speed, &lt;b&gt;&#39; + cfg.mode + &#39;&lt;/b&gt; mode. &#39; +
      (overallAcc&gt;=85 ? &#39;Strong run — consider raising N next session.&#39; :
       overallAcc&gt;=60 ? &#39;Solid session — repeat this level to consolidate.&#39; :
       &#39;Tough round — that\&#39;s normal when raising load; try the same settings again.&#39;) +
      &#39;&lt;/p&gt;&#39;;

    resultsBody.innerHTML = html;
  }

  function statCell(num, lbl, cls){
    return &#39;&lt;div class=&quot;stat-cell&quot;&gt;&lt;div class=&quot;num &#39; + cls + &#39;&quot;&gt;&#39; + num + &#39;&lt;/div&gt;&lt;div class=&quot;lbl&quot;&gt;&#39; + lbl + &#39;&lt;/div&gt;&lt;/div&gt;&#39;;
  }
  function channelRow(name, t){
    return &#39;&lt;tr&gt;&lt;td&gt;&#39; + name + &#39;&lt;/td&gt;&lt;td class=&quot;good&quot;&gt;&#39; + t.hit + &#39;&lt;/td&gt;&lt;td class=&quot;bad&quot;&gt;&#39; + t.miss +
      &#39;&lt;/td&gt;&lt;td class=&quot;bad&quot;&gt;&#39; + t.fa + &#39;&lt;/td&gt;&lt;td&gt;&#39; + t.cr + &#39;&lt;/td&gt;&lt;td&gt;&#39; + (t.acc!=null? t.acc+&#39;%&#39;:&#39;—&#39;) +
      &#39;&lt;/td&gt;&lt;td&gt;&#39; + (t.avgRt!=null? t.avgRt+&#39; ms&#39;:&#39;—&#39;) + &#39;&lt;/td&gt;&lt;/tr&gt;&#39;;
  }
  function speedLabel(){
    if(cfg.interval &gt;= 3000) return &#39;slow&#39;;
    if(cfg.interval &lt;= 2000) return &#39;fast&#39;;
    return &#39;normal&#39;;
  }

  resetState();
})();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/7132931222906423542/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/7132931222906423542' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/7132931222906423542'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/7132931222906423542'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2026/07/n-back-trainer-working-memory-cognitive.html' title='N-Back Trainer - Working memory / cognitive training'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQTT2pxFjzH4vpiIgy4un9IANVOqu0LfGrllH6Dwwj8kX1DAmL29TGTTn_zLYaHky8_PFnxZz6aURm1y5hJiK36-umX6OG7c6DDDd9hyLJAvCUNWA-8x1SWkR7T_w6D6bQMdEeTgPEQoZZE3n3gOG7SdkfqjBIsn3R39UtdU-bD_1YbOpOoXPzfcXzjOWg/s72-c/Cover.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-683496498622620289</id><published>2026-06-23T15:06:23.615+05:00</published><updated>2026-06-23T15:09:07.615+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="education"/><category scheme="http://www.blogger.com/atom/ns#" term="Islam"/><category scheme="http://www.blogger.com/atom/ns#" term="Islamic"/><category scheme="http://www.blogger.com/atom/ns#" term="learning"/><title type='text'>Mastering some aspects of Islamic history timeline - Interactive learning</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3IB3xyALlKwTMLyu3b8Fw7eVIEb1mbrTUqesVwmR9vQ7oagdmvAo6o45Afu5fXvTj7SyDh5oNUrUcZPiFlKn_65DG6zaQAPeRVT-hvFe7TuzudBfk7xnKyV3tPj2n_av_Q81dXjqfjG4Or4ue_tLIJUgoyRwxv2pAHgJgWFUKx6a0dAXxyu_BlHgOE6v9/s849/Untitled.png&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;400&quot; data-original-height=&quot;618&quot; data-original-width=&quot;849&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3IB3xyALlKwTMLyu3b8Fw7eVIEb1mbrTUqesVwmR9vQ7oagdmvAo6o45Afu5fXvTj7SyDh5oNUrUcZPiFlKn_65DG6zaQAPeRVT-hvFe7TuzudBfk7xnKyV3tPj2n_av_Q81dXjqfjG4Or4ue_tLIJUgoyRwxv2pAHgJgWFUKx6a0dAXxyu_BlHgOE6v9/s400/Untitled.png&quot;/&gt;&lt;/a&gt;&lt;/div&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
    &lt;title&gt;Islamic History SRS Study Portal&lt;/title&gt;
    &lt;style&gt;
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f6f9;
            color: #333333;
            margin: 0;
            padding: 20px;
        }
        .container {
            width: 90%;
            margin: 0 auto;
            background: #ffffff;
            padding: 25px;
            border: 1px solid #cccccc;
            zoom: 1; /* Trigger hasLayout for IE */
        }
        h1 {
            color: #8a1538;
            font-size: 24px;
            text-align: center;
            margin-bottom: 5px;
        }
        h2 {
            font-size: 14px;
            color: #666666;
            text-align: center;
            margin-top: 0;
            margin-bottom: 25px;
            font-weight: normal;
        }
        .card-box {
            border: 2px solid #8a1538;
            background-color: #fffdf9;
            padding: 30px;
            min-height: 120px;
            margin-bottom: 20px;
            text-align: center;
        }
        .era-tag {
            font-size: 11px;
            text-transform: uppercase;
            color: #999999;
            font-weight: bold;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }
        .prompt-text {
            font-size: 18px;
            font-weight: bold;
            color: #222222;
            margin-bottom: 15px;
        }
        .reveal-btn {
            background-color: #8a1538;
            color: #ffffff;
            border: none;
            padding: 10px 20px;
            font-size: 14px;
            cursor: pointer;
            font-weight: bold;
        }
        .reveal-btn:hover {
            background-color: #a01c43;
        }
        .answer-area {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px dashed #cccccc;
        }
        .answer-text {
            font-size: 20px;
            color: #27ae60;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .grading-title {
            font-size: 13px;
            font-weight: bold;
            color: #555555;
            margin-bottom: 10px;
        }
        .btn-group {
            text-align: center;
        }
        .grade-btn {
            color: #ffffff;
            border: none;
            padding: 8px 14px;
            font-size: 12px;
            cursor: pointer;
            margin: 0 4px;
            font-weight: bold;
        }
        .g0 { background-color: #c0392b; } /* Forgot */
        .g3 { background-color: #f39c12; } /* Hesitant */
        .g5 { background-color: #27ae60; } /* Perfect */
        
        .stats-panel {
            margin-top: 25px;
            background: #eeeeee;
            padding: 10px;
            font-size: 12px;
            color: #555555;
        }
        .stats-table {
            width: 100%;
        }
        .stats-table td {
            padding: 3px 0;
        }
        .right-align {
            text-align: right;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;container&quot;&gt;
    &lt;h1&gt;Islamic World Historical Timeline&lt;/h1&gt;
    &lt;h2&gt;Spaced Repetition System (SM-2 Algorithm)&lt;/h2&gt;

    &lt;div class=&quot;card-box&quot;&gt;
        &lt;div id=&quot;eraTag&quot; class=&quot;era-tag&quot;&gt;Era Loading...&lt;/div&gt;
        &lt;div id=&quot;promptText&quot; class=&quot;prompt-text&quot;&gt;Loading question card...&lt;/div&gt;
        
        &lt;div id=&quot;hideArea&quot;&gt;
            &lt;button type=&quot;button&quot; id=&quot;revealBtn&quot; class=&quot;reveal-btn&quot; onclick=&quot;revealAnswer()&quot;&gt;Click to Reveal Answer&lt;/button&gt;
        &lt;/div&gt;

        &lt;div id=&quot;revealArea&quot; style=&quot;display: none;&quot;&gt;
            &lt;div id=&quot;answerText&quot; class=&quot;answer-text&quot;&gt;Answer Date&lt;/div&gt;
            &lt;div class=&quot;grading-title&quot;&gt;How well did you remember this?&lt;/div&gt;
            &lt;div class=&quot;btn-group&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;grade-btn g0&quot; onclick=&quot;submitGrade(0)&quot;&gt;Forgot (Reset)&lt;/button&gt;
                &lt;button type=&quot;button&quot; class=&quot;grade-btn g3&quot; onclick=&quot;submitGrade(3)&quot;&gt;Hard (Hesitant)&lt;/button&gt;
                &lt;button type=&quot;button&quot; class=&quot;grade-btn g5&quot; onclick=&quot;submitGrade(5)&quot;&gt;Easy (Perfect)&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;stats-panel&quot;&gt;
        &lt;table class=&quot;stats-table&quot;&gt;
            &lt;tr&gt;
                &lt;td&gt;&lt;strong&gt;Cards Remaining in Session:&lt;/strong&gt; &lt;span id=&quot;sessionLeft&quot;&gt;0&lt;/span&gt;&lt;/td&gt;
                &lt;td class=&quot;right-align&quot;&gt;&lt;strong&gt;Current Card Interval:&lt;/strong&gt; &lt;span id=&quot;cardInterval&quot;&gt;0&lt;/span&gt; days&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;&lt;strong&gt;Card Ease Factor (EF):&lt;/strong&gt; &lt;span id=&quot;cardEF&quot;&gt;2.50&lt;/span&gt;&lt;/td&gt;
                &lt;td class=&quot;right-align&quot;&gt;&lt;strong&gt;Total Repetitions:&lt;/strong&gt; &lt;span id=&quot;cardReps&quot;&gt;0&lt;/span&gt;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
    // --- DATASET ---
    // Compiled historical cards array matching your provided text exactly.
    var items = [
        { era: &quot;1. Formation and Orientation&quot;, prompt: &quot;Birth of the Prophet Muhammad صَلَّى اللّٰهُ عَلَيْهِ وَسَلَّمَ.&quot;, answer: &quot;c. 570 CE&quot; },
        { era: &quot;1. Formation and Orientation&quot;, prompt: &quot;The Hijrah (emigration) from Mecca to Medina; emergence of the ummah and the Islamic state.&quot;, answer: &quot;622 CE&quot; },
        { era: &quot;1. Formation and Orientation&quot;, prompt: &quot;Death of the Prophet Muhammad صَلَّى اللّٰهُ عَلَيْهِ وَسَلَّمَ and succession of Abū Bakr رضي الله عنه.&quot;, answer: &quot;632 CE&quot; },
        { era: &quot;2. Conversion and Crystallization&quot;, prompt: &quot;The era of the Rashidun Caliphs (Abū Bakr, ʿUmar, ʿUthmān, and ʿAlī رضي الله عنهم) and rapid expansion.&quot;, answer: &quot;634–661 CE&quot; },
        { era: &quot;2. Conversion and Crystallization&quot;, prompt: &quot;The Umayyad Dynasty rules from Damascus; major Sunni-Shīʿite split emerges.&quot;, answer: &quot;661–750 CE&quot; },
        { era: &quot;2. Conversion and Crystallization&quot;, prompt: &quot;The ʿAbbāsid Dynasty takes power, moving the capital to Baghdad.&quot;, answer: &quot;750 CE&quot; },
        { era: &quot;3. Fragmentation and Florescence&quot;, prompt: &quot;Centralized control of the caliphate declines; rise of competitive regional dynasties.&quot;, answer: &quot;870 CE Onward&quot; },
        { era: &quot;4. Migration and Renewal&quot;, prompt: &quot;Seljuq Turks gain control over Baghdad, dominating the Middle East.&quot;, answer: &quot;1055 CE&quot; },
        { era: &quot;4. Migration and Renewal&quot;, prompt: &quot;The Crusades begin, as Christian powers attempt to take back the Holy Land.&quot;, answer: &quot;1095 CE&quot; },
        { era: &quot;4. Migration and Renewal&quot;, prompt: &quot;Mongols sack Baghdad, ending the ʿAbbāsid Caliphate.&quot;, answer: &quot;1258 CE&quot; },
        { era: &quot;4. Migration and Renewal&quot;, prompt: &quot;Ascent of the Ottoman Turks and subsequent Timurid efforts to restore Mongol power.&quot;, answer: &quot;Later 1300s&quot; },
        { era: &quot;5. Consolidation and Expansion&quot;, prompt: &quot;Mehmed II (the Conqueror) takes Constantinople, ending the Byzantine Empire.&quot;, answer: &quot;1453 CE&quot; },
        { era: &quot;6. Reform, Dependency, and Recovery&quot;, prompt: &quot;Internal Muslim reform movements seek to address social and religious weaknesses.&quot;, answer: &quot;1700s–1800s&quot; }
    ];

    // --- SRS ENGINE STATE ---
    // IE-safe array initialization with tracking variables 
    var srsData = [];
    var currentIndex = -1;
    var sessionQueue = [];

    function initSRS() {
        for (var i = 0; i &lt; items.length; i++) {
            srsData.push({
                id: i,
                era: items[i].era,
                prompt: items[i].prompt,
                answer: items[i].answer,
                // SM-2 Default Parameters
                repetitions: 0,
                interval: 0,
                easeFactor: 2.5,
                dueDate: 0 // Using arbitrary relative steps/counters instead of system clocks to preserve pure browser persistence variables safely
            });
            sessionQueue.push(i);
        }
        shuffleQueue();
        nextCard();
    }

    // Classic Fisher-Yates shuffle algorithm written without modern JS shortcuts
    function shuffleQueue() {
        var m = sessionQueue.length, t, i;
        while (m) {
            i = Math.floor(Math.random() * m--);
            t = sessionQueue[m];
            sessionQueue[m] = sessionQueue[i];
            sessionQueue[i] = t;
        }
    }

    function nextCard() {
        if (sessionQueue.length === 0) {
            document.getElementById(&quot;eraTag&quot;).innerHTML = &quot;Session Complete!&quot;;
            document.getElementById(&quot;promptText&quot;).innerHTML = &quot;Excellent work! You have processed all elements scheduled for review.&quot;;
            document.getElementById(&quot;hideArea&quot;).style.display = &quot;none&quot;;
            document.getElementById(&quot;revealArea&quot;).style.display = &quot;none&quot;;
            return;
        }

        // Fetch first card item from active processing queue
        currentIndex = sessionQueue[0];
        var card = srsData[currentIndex];

        // Render data elements safely down to native string parsers
        document.getElementById(&quot;eraTag&quot;).innerHTML = card.era;
        document.getElementById(&quot;promptText&quot;).innerHTML = card.prompt;
        document.getElementById(&quot;answerText&quot;).innerHTML = card.answer;

        // Render technical metrics
        document.getElementById(&quot;sessionLeft&quot;).innerHTML = sessionQueue.length;
        document.getElementById(&quot;cardInterval&quot;).innerHTML = card.interval;
        document.getElementById(&quot;cardEF&quot;).innerHTML = card.easeFactor.toFixed(2);
        document.getElementById(&quot;cardReps&quot;).innerHTML = card.repetitions;

        // Reset UI presentation layers
        document.getElementById(&quot;hideArea&quot;).style.display = &quot;block&quot;;
        document.getElementById(&quot;revealArea&quot;).style.display = &quot;none&quot;;
    }

    function revealAnswer() {
        document.getElementById(&quot;hideArea&quot;).style.display = &quot;none&quot;;
        document.getElementById(&quot;revealArea&quot;).style.display = &quot;block&quot;;
    }

    // --- SM-2 ALGORITHM EXECUTION ENGINE ---
    function submitGrade(q) {
        var card = srsData[currentIndex];

        // Process SM-2 Step Calculations Based on performance grade (0, 3, or 5)
        if (q &lt; 3) {
            // Forgotten card: reset repetition cycle count and enforce low interval schedule
            card.repetitions = 0;
            card.interval = 1;
        } else {
            if (card.repetitions === 0) {
                card.interval = 1;
            } else if (card.repetitions === 1) {
                card.interval = 6;
            } else {
                card.interval = Math.round(card.interval * card.easeFactor);
            }
            card.repetitions++;
        }

        // Adjust Ease Factor (EF) parameter bounds using standardized SM-2 calculation matrix
        card.easeFactor = card.easeFactor + (0.1 - (5 - q) * (0.08 + (5 - q) * 0.02));
        if (card.easeFactor &lt; 1.3) {
            card.easeFactor = 1.3;
        }

        // Manage active structural card queues 
        if (q &lt; 3) {
            // Move forgotten elements to back of the line to repeat this session
            var failedCard = sessionQueue.shift();
            sessionQueue.push(failedCard);
        } else {
            // Properly learned item: pop out from active presentation pool
            sessionQueue.shift();
        }

        nextCard();
    }

    // Fire initial state engine processing
    initSRS();
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/683496498622620289/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/683496498622620289' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/683496498622620289'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/683496498622620289'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2026/06/mastering-some-aspects-of-islamic.html' title='Mastering some aspects of Islamic history timeline - Interactive learning'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3IB3xyALlKwTMLyu3b8Fw7eVIEb1mbrTUqesVwmR9vQ7oagdmvAo6o45Afu5fXvTj7SyDh5oNUrUcZPiFlKn_65DG6zaQAPeRVT-hvFe7TuzudBfk7xnKyV3tPj2n_av_Q81dXjqfjG4Or4ue_tLIJUgoyRwxv2pAHgJgWFUKx6a0dAXxyu_BlHgOE6v9/s72-c/Untitled.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-2518693665533784558</id><published>2026-06-18T15:24:18.609+05:00</published><updated>2026-06-18T15:30:28.258+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Biochemistry"/><category scheme="http://www.blogger.com/atom/ns#" term="education"/><category scheme="http://www.blogger.com/atom/ns#" term="medical"/><category scheme="http://www.blogger.com/atom/ns#" term="memory"/><title type='text'>Help yourself learn/memorize 50 terms from Krebs Cycle </title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqW8Qepp1P1RnmKLu-4lTfj2DJ_7Q_T3IRNRjDFUJ7nnGP6LvATZGjkUGzFEUgLoYerPfcwtYEmXqjPuJU7AApxKwWdRdQMsCFwy2nuL9cxr-WPnQf2ufrKyPUXSTq-2EX3LDyG499aXXgGow7qIqeAkHLEXby5Yj6ee9zbtQcQsp8HvPC3xsAsGIQuSHm/s732/Cover.png&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;400&quot; data-original-height=&quot;650&quot; data-original-width=&quot;732&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqW8Qepp1P1RnmKLu-4lTfj2DJ_7Q_T3IRNRjDFUJ7nnGP6LvATZGjkUGzFEUgLoYerPfcwtYEmXqjPuJU7AApxKwWdRdQMsCFwy2nuL9cxr-WPnQf2ufrKyPUXSTq-2EX3LDyG499aXXgGow7qIqeAkHLEXby5Yj6ee9zbtQcQsp8HvPC3xsAsGIQuSHm/s400/Cover.png&quot;/&gt;&lt;/a&gt;&lt;/div&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;Citric Acid Cycle Spaced Repetition Flashcards&lt;/title&gt;
    &lt;style&gt;
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f6f9;
            color: #333;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 650px;
            margin: 0 auto;
            background: #fff;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        h2 { text-align: center; color: #2c3e50; margin-top: 0; }
        .progress-bar {
            background-color: #e0e0e0;
            border-radius: 4px;
            height: 12px;
            margin-bottom: 20px;
            overflow: hidden;
        }
        .progress-fill {
            background-color: #3498db;
            height: 100%;
            width: 0%;
        }
        .stats {
            text-align: center;
            font-size: 14px;
            margin-bottom: 15px;
            color: #7f8c8d;
        }
        .card-box {
            border: 2px solid #3498db;
            border-radius: 6px;
            padding: 20px;
            min-height: 120px;
            background: #fafafa;
            margin-bottom: 20px;
            font-size: 18px;
            line-height: 1.6;
            position: relative;
        }
        .cloze-blank {
            background-color: #ffeaa7;
            border-bottom: 2px dashed #d63031;
            padding: 0 5px;
            cursor: pointer;
            color: #ffeaa7;
            user-select: none;
            -ms-user-select: none;
        }
        .cloze-blank.revealed {
            background-color: transparent;
            color: #d63031;
            font-weight: bold;
            border-bottom: none;
        }
        .btn-panel { text-align: center; }
        .btn {
            background: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn:hover { background: #2980b9; }
        .grading-panel {
            display: none;
            text-align: center;
        }
        .grade-btn {
            color: white;
            border: none;
            padding: 10px 12px;
            margin: 4px;
            font-size: 14px;
            border-radius: 4px;
            cursor: pointer;
            width: 75px;
        }
        .g0 { background-color: #c0392b; }
        .g1 { background-color: #e74c3c; }
        .g2 { background-color: #e67e22; }
        .g3 { background-color: #f1c40f; color: #333; }
        .g4 { background-color: #2ecc71; }
        .g5 { background-color: #27ae60; }
        .complete-msg {
            text-align: center;
            display: none;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;container&quot;&gt;
    &lt;h2&gt;Krebs Cycle Mastery (SM2 Algorithm)&lt;/h2&gt;
    
    &lt;div class=&quot;progress-bar&quot;&gt;
        &lt;div id=&quot;progressFill&quot; class=&quot;progress-fill&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div id=&quot;statsCounter&quot; class=&quot;stats&quot;&gt;Loading items...&lt;/div&gt;

    &lt;div id=&quot;deckArea&quot;&gt;
        &lt;div id=&quot;cardBox&quot; class=&quot;card-box&quot;&gt;&lt;/div&gt;

        &lt;div id=&quot;actionPanel&quot; class=&quot;btn-panel&quot;&gt;
            &lt;button id=&quot;revealBtn&quot; class=&quot;btn&quot; onclick=&quot;revealCard()&quot;&gt;Reveal Hidden Term&lt;/button&gt;
        &lt;/div&gt;

        &lt;div id=&quot;gradingPanel&quot; class=&quot;grading-panel&quot;&gt;
            &lt;p style=&quot;margin-bottom: 10px; font-weight: bold;&quot;&gt;Rate your memory performance:&lt;/p&gt;
            &lt;button class=&quot;grade-btn g0&quot; onclick=&quot;submitGrade(0)&quot;&gt;0 (Blank)&lt;/button&gt;
            &lt;button class=&quot;grade-btn g1&quot; onclick=&quot;submitGrade(1)&quot;&gt;1 (Wrong)&lt;/button&gt;
            &lt;button class=&quot;grade-btn g2&quot; onclick=&quot;submitGrade(2)&quot;&gt;2 (Close)&lt;/button&gt;
            &lt;button class=&quot;grade-btn g3&quot; onclick=&quot;submitGrade(3)&quot;&gt;3 (Hard)&lt;/button&gt;
            &lt;button class=&quot;grade-btn g4&quot; onclick=&quot;submitGrade(4)&quot;&gt;4 (Good)&lt;/button&gt;
            &lt;button class=&quot;grade-btn g5&quot; onclick=&quot;submitGrade(5)&quot;&gt;5 (Perfect)&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div id=&quot;completionArea&quot; class=&quot;complete-msg&quot;&gt;
        &lt;h3&gt;🎉 Session Complete!&lt;/h3&gt;
        &lt;p&gt;Excellent work. All pending components have been optimized via the SM-2 engine. Check back tomorrow for your next scheduled interval review.&lt;/p&gt;
        &lt;button class=&quot;btn&quot; onclick=&quot;resetAllData()&quot;&gt;Reset Entire Progress Loop&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
    // Explicit ES5 Global Deck Arrays &amp; Variables
    var rawTerms = [
        { id: 1, text: &quot;The citric acid cycle occurs entirely within the [mitochondrial matrix] of eukaryotic cells.&quot; },
        { id: 2, text: &quot;The initial step condenses Acetyl-CoA with [oxaloacetate] to form a 6-carbon molecule.&quot; },
        { id: 3, text: &quot;The conversion of oxaloacetate and acetyl-CoA to citrate is catalyzed by [citrate synthase].&quot; },
        { id: 4, text: &quot;Citrate is isomerization-converted into [isocitrate] by the working enzyme aconitase.&quot; },
        { id: 5, text: &quot;The enzyme-bound intermediate formed during the aconitase reaction is [cis-aconitate], which is not released as a free intermediate into solution.&quot; },
        { id: 6, text: &quot;Aconitase requires structural [iron-sulfur] clusters within its active center to bind substrates properly.&quot; },
        { id: 7, text: &quot;The first oxidative decarboxylation event is mediated by the enzyme [isocitrate dehydrogenase].&quot; },
        { id: 8, text: &quot;Isocitrate dehydrogenase decarboxylates its intermediate to generate [alpha-ketoglutarate].&quot; },
        { id: 9, text: &quot;The first molecule of structural [carbon dioxide] is shed during the breakdown of isocitrate.&quot; },
        { id: 10, text: &quot;During the oxidation of isocitrate, the coenzyme [NAD+] is reduced to form NADH.&quot; },
        { id: 11, text: &quot;The complex multi-enzyme engine structurally downstream of isocitrate is the [alpha-ketoglutarate dehydrogenase] complex.&quot; },
        { id: 12, text: &quot;Alpha-ketoglutarate dehydrogenase modifies its target into the high-energy thioester [succinyl-CoA].&quot; },
        { id: 13, text: &quot;The structural cofactor [thiamine pyrophosphate] (TPP) is indispensable for alpha-ketoglutarate cleavage.&quot; },
        { id: 14, text: &quot;Alpha-ketoglutarate dehydrogenase utilizes [lipoic acid] as a structural swinging arm to transfer acyl units.&quot; },
        { id: 15, text: &quot;The conversion of succinyl-CoA into succinate is performed by [succinyl-CoA synthetase].&quot; },
        { id: 16, text: &quot;Succinyl-CoA synthetase couples thioester cleavage directly to substrate-level phosphorylation, forming [ATP] in mammals (or GTP depending on the isoform present).&quot; },
        { id: 17, text: &quot;The only membrane-bound enzymatic component inside the pathway sequence is [succinate dehydrogenase].&quot; },
        { id: 18, text: &quot;Succinate dehydrogenase functions concurrently as [Complex II] of the electron transport chain.&quot; },
        { id: 19, text: &quot;Succinate dehydrogenase converts its target substrate directly into [fumarate].&quot; },
        { id: 20, text: &quot;The reduction coenzyme factor generated alongside fumarate transformation is [FADH2].&quot; },
        { id: 21, text: &quot;The stereospecific hydration of fumarate into L-malate is accomplished by [fumarase].&quot; },
        { id: 22, text: &quot;The final step regenerates oxaloacetate by oxidizing L-malate via [malate dehydrogenase].&quot; },
        { id: 23, text: &quot;Malate dehydrogenase uses the structural cofactor [NAD+] to accept newly liberated electrons.&quot; },
        { id: 24, text: &quot;One complete turn of the TCA cycle alone generates a net yield of [three] NADH molecules, not counting the additional NADH produced by the upstream pyruvate dehydrogenase reaction.&quot; },
        { id: 25, text: &quot;One distinct turn yields a net total of [one] FADH2 molecule.&quot; },
        { id: 26, text: &quot;Fluoroacetate serves as a potent metabolic poison by transforming into [fluorocitrate], an aconitase inhibitor.&quot; },
        { id: 27, text: &quot;The primary allosteric inhibitors of citrate synthase are [succinyl-CoA] and ATP; NADH serves as an additional secondary inhibitor.&quot; },
        { id: 28, text: &quot;The molecule [NADH] exerts direct negative feedback control to inhibit isocitrate dehydrogenase activity.&quot; },
        { id: 29, text: &quot;Elevated calcium ion concentrations allosterically activate three key mitochondrial enzymes: [pyruvate dehydrogenase], isocitrate dehydrogenase, and alpha-ketoglutarate dehydrogenase.&quot; },
        { id: 30, text: &quot;Reactions that continually replenish pathway intermediates instead of depleting them are termed [anaplerotic] reactions.&quot; },
        { id: 31, text: &quot;The primary anaplerotic conversion transforming pyruvate directly into oxaloacetate is driven by [pyruvate carboxylase].&quot; },
        { id: 32, text: &quot;Pyruvate carboxylase strictly demands the presence of the water-soluble vitamin cofactor [biotin].&quot; },
        { id: 33, text: &quot;Amino acid transamination reactions can convert [aspartate] directly into oxaloacetate by transferring its amino group to alpha-ketoglutarate.&quot; },
        { id: 34, text: &quot;The product intermediate [succinyl-CoA] acts as a vital precursor building block for porphyrin and heme synthesis.&quot; },
        { id: 35, text: &quot;The structural compound [citrate] can leave the matrix to provide carbon fragments for fatty acid synthesis.&quot; },
        { id: 36, text: &quot;Arsenite blocks TCA cycle activity by binding the dithiol form of [lipoic acid], inactivating multi-enzyme dehydrogenase complexes that depend on it as a swinging-arm cofactor.&quot; },
        { id: 37, text: &quot;The active competitive inhibitor blocking succinate dehydrogenase activity structurally is [malonate].&quot; },
        { id: 38, text: &quot;The net output yield per single molecule of acetyl-CoA equates to [two] structural CO2 molecules.&quot; },
        { id: 39, text: &quot;The malate dehydrogenase reaction is highly endergonic under standard conditions, but proceeds because [oxaloacetate] is continuously consumed by citrate synthase, pulling the equilibrium forward.&quot; },
        { id: 40, text: &quot;The three essentially irreversible, highly exergonic regulatory checkpoints of the cycle are catalyzed by [citrate synthase], isocitrate dehydrogenase, and alpha-ketoglutarate dehydrogenase.&quot; },
        { id: 41, text: &quot;The pathway intermediate [alpha-ketoglutarate] serves as an entry/exit gate for glutamate metabolism.&quot; },
        { id: 42, text: &quot;The process provides shared reducing power vectors to feed the driving [oxidative phosphorylation] system.&quot; },
        { id: 43, text: &quot;The structural term given to metabolic pathways performing both catabolic and anabolic duties is [amphibolic].&quot; },
        { id: 44, text: &quot;Citrate synthase undergoes a dramatic [induced fit] structural conformational change upon binding oxaloacetate.&quot; },
        { id: 45, text: &quot;The key regulator molecule [ADP] acts as an allosteric activator for human isocitrate dehydrogenase.&quot; },
        { id: 46, text: &quot;Under strict aerobic conditions, the cycle depends on functional continuity of the terminal [electron transport chain] to cycle NAD+.&quot; },
        { id: 47, text: &quot;The functional core structure of Coenzyme A consists of a reactive terminal [thiol] group.&quot; },
        { id: 48, text: &quot;Malate dehydrogenase shows strict stereospecificity by acting only on [L-malate] as its substrate, oxidizing it to oxaloacetate while reducing NAD⁺ to NADH.&quot; },
        { id: 49, text: &quot;The catalytic strategy utilized by succinyl-CoA synthetase involves a transiently phosphorylated [histidine] residue.&quot; },
        { id: 50, text: &quot;The condensation step driven by citrate synthase breaks down a high-energy [thioester] bond to power synthesis.&quot; }
    ];

    var state = {
        cards: [],
        currentCardIndex: -1
    };

    // IE11 Safe Initialization Routine
    function initDeck() {
        var saved = null;
        try {
            saved = localStorage.getItem(&quot;krebs_srs_data_v1&quot;);
        } catch(e) { } // Capture cases where localStorage is disabled via restrictive IE group policy

        if (saved) {
            try {
                state.cards = JSON.parse(saved);
            } catch(err) {
                buildNewDeck();
            }
        } else {
            buildNewDeck();
        }
        filterAndQueueNextCard();
    }

    function buildNewDeck() {
        state.cards = [];
        for (var i = 0; i &lt; rawTerms.length; i++) {
            var entry = rawTerms[i];
            state.cards.push({
                id: entry.id,
                text: entry.text,
                // SuperMemo-2 Core Parameters
                repetition: 0,
                interval: 0,
                efactor: 2.5,
                dueDate: new Date().getTime() // Ready for review immediately
            });
        }
        saveToLocalStorage();
    }

    function saveToLocalStorage() {
        try {
            localStorage.setItem(&quot;krebs_srs_data_v1&quot;, JSON.stringify(state.cards));
        } catch(e) {}
    }

    // Identifies overdue elements based on current time bounds
    function filterAndQueueNextCard() {
        var now = new Date().getTime();
        var dueCards = [];
        
        for (var i = 0; i &lt; state.cards.length; i++) {
            if (state.cards[i].dueDate &lt;= now) {
                dueCards.push(i);
            }
        }

        // Dashboard Stats UI Maintenance Update
        var remainingCount = dueCards.length;
        var totalCount = state.cards.length;
        var completedPercentage = ((totalCount - remainingCount) / totalCount) * 100;
        
        document.getElementById(&quot;progressFill&quot;).style.width = completedPercentage + &quot;%&quot;;
        document.getElementById(&quot;statsCounter&quot;).innerHTML = remainingCount + &quot; terms due for recall review (Total monitored catalog: &quot; + totalCount + &quot;)&quot;;

        if (dueCards.length &gt; 0) {
            // Pick the first overdue card index element
            state.currentCardIndex = dueCards[0];
            renderCard();
            document.getElementById(&quot;deckArea&quot;).style.display = &quot;block&quot;;
            document.getElementById(&quot;completionArea&quot;).style.display = &quot;none&quot;;
        } else {
            state.currentCardIndex = -1;
            document.getElementById(&quot;deckArea&quot;).style.display = &quot;none&quot;;
            document.getElementById(&quot;completionArea&quot;).style.display = &quot;block&quot;;
        }
    }

    // FIXED: Removed the stray Chinese character breaking the script parser
    function renderCard() {
        var card = state.cards[state.currentCardIndex];
        var rawText = card.text;
        
        // IE11 Safe processing split of Cloze bracket fields []
        var openBracket = rawText.indexOf(&quot;[&quot;);
        var closeBracket = rawText.indexOf(&quot;]&quot;);
        
        if (openBracket !== -1 &amp;&amp; closeBracket !== -1) {
            var prefix = rawText.substring(0, openBracket);
            var hiddenWord = rawText.substring(openBracket + 1, closeBracket);
            var suffix = rawText.substring(closeBracket + 1);
            
            var transformedHTML = prefix + &#39;&lt;span id=&quot;clozeTarget&quot; class=&quot;cloze-blank&quot; onclick=&quot;revealCard()&quot;&gt;&#39; + hiddenWord + &#39;&lt;/span&gt;&#39; + suffix;
            document.getElementById(&quot;cardBox&quot;).innerHTML = transformedHTML;
        } else {
            document.getElementById(&quot;cardBox&quot;).innerHTML = rawText;
        }

        // Reset display view states
        document.getElementById(&quot;actionPanel&quot;).style.display = &quot;block&quot;;
        document.getElementById(&quot;gradingPanel&quot;).style.display = &quot;none&quot;;
    }

    function revealCard() {
        var el = document.getElementById(&quot;clozeTarget&quot;);
        if (el &amp;&amp; el.className.indexOf(&quot;revealed&quot;) === -1) {
            el.className += &quot; revealed&quot;;
        }
        document.getElementById(&quot;actionPanel&quot;).style.display = &quot;none&quot;;
        document.getElementById(&quot;gradingPanel&quot;).style.display = &quot;block&quot;;
    }

    // Algorithmic Computation Section (Classic SuperMemo-2 Specs)
    function submitGrade(quality) {
        if (state.currentCardIndex === -1) return;
        
        var card = state.cards[state.currentCardIndex];
        
        // Step 1: Adjust Easiness Factor (efactor)
        var newEf = card.efactor + (0.1 - (5 - quality) * (0.08 + (5 - quality) * 0.02));
        if (newEf &lt; 1.3) newEf = 1.3; // Floor condition minimum
        card.efactor = newEf;

        // Step 2: Set Repetitions and Intervals based on structural memory assessment score
        if (quality &lt; 3) {
            // Quality score under 3 counts as an incorrect recall; reset progression back to phase start
            card.repetition = 0;
            card.interval = 1;
        } else {
            if (card.repetition === 0) {
                card.interval = 1;
            } else if (card.repetition === 1) {
                card.interval = 6;
            } else {
                card.interval = Math.round(card.interval * card.efactor);
            }
            card.repetition = card.repetition + 1;
        }

        // Step 3: Compute Next Review Time stamp calculation (Days converted to Milliseconds)
        var msInDay = 24 * 60 * 60 * 1000;
        card.dueDate = new Date().getTime() + (card.interval * msInDay);

        saveToLocalStorage();
        filterAndQueueNextCard();
    }

    function resetAllData() {
        if (confirm(&quot;Are you sure you want to purge all existing algorithmic memory weights and restart the entire path structure?&quot;)) {
            buildNewDeck();
            filterAndQueueNextCard();
        }
    }

    // Trigger Initial Module Sequence Execution
    initDeck();
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

Some important features of this post are:

&lt;ul&gt;
  &lt;li&gt;&lt;strong&gt;The SM-2 Spaced Repetition Engine:&lt;/strong&gt; No more useless cramming. The built-in SuperMemo-2 algorithm tracks your memory strength and schedules your reviews at the exact mathematical moment you’re about to forget.&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;50 High-Yield Cloze Flashcards:&lt;/strong&gt; Interactive, fill-in-the-blank prompts covering everything from irreversible checkpoints and cofactors (like TPP and biotin) to metabolic poisons (fluoroacetate and arsenite).&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;6-Tier Precision Grading:&lt;/strong&gt; Rate your recall from 0 (Blank) to 5 (Perfect) to dynamically customize your learning curve.&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Seamless Progress Tracking:&lt;/strong&gt; Features a built-in progress bar and automated local storage, meaning it saves your exact algorithmic memory weights so you can pick right up tomorrow.&lt;/li&gt;
&lt;/ul&gt;

&lt;strong&gt;N.B.:&lt;/strong&gt; Kindly inform in case of any errors or mistakes in this post.</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/2518693665533784558/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/2518693665533784558' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/2518693665533784558'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/2518693665533784558'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2026/06/help-yourself-learnmemorize-50-terms.html' title='Help yourself learn/memorize 50 terms from Krebs Cycle '/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqW8Qepp1P1RnmKLu-4lTfj2DJ_7Q_T3IRNRjDFUJ7nnGP6LvATZGjkUGzFEUgLoYerPfcwtYEmXqjPuJU7AApxKwWdRdQMsCFwy2nuL9cxr-WPnQf2ufrKyPUXSTq-2EX3LDyG499aXXgGow7qIqeAkHLEXby5Yj6ee9zbtQcQsp8HvPC3xsAsGIQuSHm/s72-c/Cover.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-340069930089709849</id><published>2026-06-18T13:35:45.330+05:00</published><updated>2026-06-18T14:41:22.529+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Clinical Pharmacy"/><category scheme="http://www.blogger.com/atom/ns#" term="medical"/><category scheme="http://www.blogger.com/atom/ns#" term="Online Calculator"/><category scheme="http://www.blogger.com/atom/ns#" term="Pharmacy"/><title type='text'>Pediatric Renal Function and GFR Calculator - 12 Formulae</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWXV-kHfVT28v95cSrnYQAwMpZE1rqeKbEWD3VufvjnOrcBDaH1mj95WAnrVMt9vqkaJDzfFKb3r4nPFH6QWzOvbowFb3_TaTxHVpLKYvgBKexN63EY4-b4k3GYZPPyI0LraKS5687JcYYB0A_Zanh5w_ory2QaincY2mTY2U33i1KIT7c5jWbm8Ot4ry1/s779/Cover%20image.png&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; height=&quot;400&quot; data-original-height=&quot;779&quot; data-original-width=&quot;679&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWXV-kHfVT28v95cSrnYQAwMpZE1rqeKbEWD3VufvjnOrcBDaH1mj95WAnrVMt9vqkaJDzfFKb3r4nPFH6QWzOvbowFb3_TaTxHVpLKYvgBKexN63EY4-b4k3GYZPPyI0LraKS5687JcYYB0A_Zanh5w_ory2QaincY2mTY2U33i1KIT7c5jWbm8Ot4ry1/s400/Cover%20image.png&quot;/&gt;&lt;/a&gt;&lt;/div&gt;

eGFR (estimated glomerular filtration rate) is a standard measure of kidney function. The calculation determines how effectively your kidneys filter waste based on your age, gender, and blood creatinine levels.
To diagnose Chronic Kidney Disease (CKD), doctors look for an eGFR that remains under 60 for a three-month period. For most people, a normal reading is 90 or above, but &quot;normal&quot; is relative and shifts with age and demographic traits.

&lt;div class=&quot;egfr-container&quot;&gt;
  &lt;h3&gt;Pediatric eGFR Comprehensive Database Calculator&lt;/h3&gt;
  &lt;p class=&quot;egfr-intro&quot;&gt;Adjust the patient metrics below to see all 12 historical and modern pediatric equations compute simultaneously in real-time.&lt;/p&gt;
  
  &lt;!-- Inputs Section --&gt;
  &lt;div class=&quot;egfr-grid&quot;&gt;
    &lt;div class=&quot;egfr-input-group&quot;&gt;
      &lt;label for=&quot;p-age&quot;&gt;Age (Years)&lt;/label&gt;
      &lt;input type=&quot;number&quot; id=&quot;p-age&quot; value=&quot;8&quot; min=&quot;0.1&quot; max=&quot;18&quot; step=&quot;0.1&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;egfr-input-group&quot;&gt;
      &lt;label for=&quot;p-sex&quot;&gt;Biological Sex&lt;/label&gt;
      &lt;select id=&quot;p-sex&quot;&gt;
        &lt;option value=&quot;Male&quot;&gt;Male&lt;/option&gt;
        &lt;option value=&quot;Female&quot;&gt;Female&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class=&quot;egfr-input-group&quot;&gt;
      &lt;label for=&quot;p-height&quot;&gt;Height (cm)&lt;/label&gt;
      &lt;input type=&quot;number&quot; id=&quot;p-height&quot; value=&quot;125&quot; min=&quot;40&quot; max=&quot;190&quot; step=&quot;0.5&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;egfr-input-group&quot;&gt;
      &lt;label for=&quot;p-weight&quot;&gt;Weight (kg)&lt;/label&gt;
      &lt;input type=&quot;number&quot; id=&quot;p-weight&quot; value=&quot;26&quot; min=&quot;2&quot; max=&quot;90&quot; step=&quot;0.5&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;egfr-input-group&quot;&gt;
      &lt;label for=&quot;p-scr&quot;&gt;Serum Creatinine (mg/dL)&lt;/label&gt;
      &lt;input type=&quot;number&quot; id=&quot;p-scr&quot; value=&quot;0.45&quot; min=&quot;0.1&quot; max=&quot;5.0&quot; step=&quot;0.01&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- Visualizer Canvas Component --&gt;
  &lt;div class=&quot;canvas-wrap&quot; style=&quot;margin: 20px 0; text-align: center;&quot;&gt;
    &lt;canvas id=&quot;egfrCanvas&quot; width=&quot;700&quot; height=&quot;420&quot; style=&quot;max-width: 100%; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc;&quot;&gt;&lt;/canvas&gt;
  &lt;/div&gt;

  &lt;!-- Detailed Results Accordion / Reference Display --&gt;
  &lt;div class=&quot;egfr-results-list&quot; id=&quot;resultsPanel&quot;&gt;
    &lt;!-- Generated dynamically by JS to allow easy manual auditing of formulas --&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;style&gt;
  .egfr-container { font-family: system-ui, -apple-system, sans-serif; max-width: 750px; margin: 2rem auto; padding: 1.5rem; border: 1px solid #cbd5e1; border-radius: 8px; background: #ffffff; color: #1e293b; }
  .egfr-container h3 { margin-top: 0; color: #0f172a; border-bottom: 2px solid #e2e8f0; padding-bottom: 0.5rem; }
  .egfr-intro { font-size: 0.95rem; color: #64748b; margin-bottom: 1.5rem; }
  .egfr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
  .egfr-input-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; color: #334155; }
  .egfr-input-group input, .egfr-input-group select { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid #94a3b8; border-radius: 4px; font-size: 0.95rem; box-sizing: border-box; }
  .egfr-card { padding: 0.85rem; border: 1px solid #e2e8f0; border-radius: 6px; margin-bottom: 0.75rem; background: #fafafa; transition: transform 0.15s ease; }
  .egfr-card.primary-standard { border-left: 5px solid #2563eb; background: #f0f7ff; }
  .egfr-card h4 { margin: 0 0 0.25rem 0; font-size: 1rem; color: #0f172a; display: flex; justify-content: space-between; }
  .egfr-card .formula-math { font-family: monospace, serif; font-size: 0.85rem; color: #475569; background: #e2e8f0; padding: 0.2rem 0.4rem; border-radius: 4px; display: inline-block; margin: 0.3rem 0; }
  .egfr-card .calc-audit { font-size: 0.85rem; color: #0284c7; font-weight: 500; }
  .badge { font-size: 0.75rem; background: #2563eb; color: #fff; padding: 0.1rem 0.4rem; border-radius: 3px; text-transform: uppercase; }
&lt;/style&gt;

&lt;script&gt;
(function() {
  const inputs = [&#39;p-age&#39;, &#39;p-sex&#39;, &#39;p-height&#39;, &#39;p-weight&#39;, &#39;p-scr&#39;];
  inputs.forEach(id =&gt; document.getElementById(id).addEventListener(&#39;input&#39;, calculateAll));

  function calculateAll() {
    // Parse Input values
    const age = parseFloat(document.getElementById(&#39;p-age&#39;).value) || 1;
    const sex = document.getElementById(&#39;p-sex&#39;).value;
    const ht = parseFloat(document.getElementById(&#39;p-height&#39;).value) || 100;
    const wt = parseFloat(document.getElementById(&#39;p-weight&#39;).value) || 15;
    const scr = parseFloat(document.getElementById(&#39;p-scr&#39;).value) || 0.5;

    const data = [];

    // Group I: Linear Equations (eGFR = k * Ht / Scr)
    // 1. Original Schwartz (1976)
    data.push({ id: 1, name: &quot;1. Original Schwartz (1976)&quot;, k: 0.55, formula: `(0.55 × ${ht}) / ${scr}`, val: (0.55 * ht) / scr, unit: &quot;mL/min/1.73m²&quot; });
    
    // 2. Infant Schwartz (1984)
    data.push({ id: 2, name: &quot;2. Infant Schwartz (1984)&quot;, k: 0.45, formula: `(0.45 × ${ht}) / ${scr}`, val: (0.45 * ht) / scr, unit: &quot;mL/min/1.73m²&quot; });
    
    // 3. Adolescent Male Schwartz (1976)
    let k3 = (sex === &#39;Male&#39; &amp;&amp; age &gt;= 13) ? 0.70 : 0.55;
    data.push({ id: 3, name: &quot;3. Adolescent Male Schwartz (1976)&quot;, k: k3, formula: `(${k3} × ${ht}) / ${scr}`, val: (k3 * ht) / scr, unit: &quot;mL/min/1.73m²&quot;, note: (sex !== &#39;Male&#39; || age &lt; 13) ? &quot;Using baseline (not post-puberty male)&quot; : &quot;&quot; });
    
    // 4. Preterm Infant Brion Formula
    data.push({ id: 4, name: &quot;4. Preterm Infant Brion&quot;, k: 0.33, formula: `(0.33 × ${ht}) / ${scr}`, val: (0.33 * ht) / scr, unit: &quot;mL/min/1.73m²&quot; });
    
    // 5. Modern Bedside Schwartz (2009) - Clinical Standard
    data.push({ id: 5, name: &quot;5. Modern Bedside Schwartz (2009)&quot;, k: 0.413, formula: `(0.413 × ${ht}) / ${scr}`, val: (0.413 * ht) / scr, unit: &quot;mL/min/1.73m²&quot;, primary: true });
    
    // 6. Counahan-Barratt (1976)
    data.push({ id: 6, name: &quot;6. Counahan-Barratt Equation&quot;, k: 0.43, formula: `(0.43 × ${ht}) / ${scr}`, val: (0.43 * ht) / scr, unit: &quot;mL/min/1.73m²&quot; });
    
    // 7. Schwartz-Lyon Equation
    let k7 = (sex === &#39;Male&#39; &amp;&amp; age &gt;= 13) ? 0.419 : 0.373;
    data.push({ id: 7, name: &quot;7. Schwartz-Lyon Variation&quot;, k: k7, formula: `(${k7} × ${ht}) / ${scr}`, val: (k7 * ht) / scr, unit: &quot;mL/min/1.73m²&quot; });

    // Group II: Age-Dependent &amp; Polynomial Group
    // 8. Flanders Metadata Equation
    let k8 = 0.0414 * Math.log(age) + 0.3018;
    data.push({ id: 8, name: &quot;8. Flanders Metadata Equation&quot;, formula: `k = 0.0414 × ln(${age}) + 0.3018 [k=${k8.toFixed(4)}]; (k × ${ht}) / ${scr}`, val: (k8 * ht) / scr, unit: &quot;mL/min/1.73m²&quot; });

    // 9. Simple Height-Independent Equation
    let q9 = 0.0270 * age + 0.2329;
    data.push({ id: 9, name: &quot;9. Simple Height-Independent&quot;, formula: `Q = 0.0270 × ${age} + 0.2329 [Q=${q9.toFixed(4)}]; 107.3 / (${scr} / Q)`, val: 107.3 / (scr / q9), unit: &quot;mL/min/1.73m²&quot; });

    // Calculate dynamic Q-baselines for standard Full Age Spectrum (FAS) pediatric curves
    let fAge = age;
    let qFAS_age = (sex === &#39;Male&#39;) 
      ? 0.0002 * Math.pow(fAge,4) - 0.0069 * Math.pow(fAge,3) + 0.0763 * Math.pow(fAge,2) - 0.2115 * fAge + 0.443 
      : 0.0001 * Math.pow(fAge,4) - 0.0051 * Math.pow(fAge,3) + 0.0621 * Math.pow(fAge,2) - 0.1732 * fAge + 0.412;
    // Keep baseline structurally secure for neonates
    if(qFAS_age &lt; 0.15) qFAS_age = 0.23 + (0.02 * age); 

    // 10. FAS Age Equation
    data.push({ id: 10, name: &quot;10. FAS Age Equation&quot;, formula: `107.3 / (${scr} / Q_age) [Q=${qFAS_age.toFixed(3)}]`, val: 107.3 / (scr / qFAS_age), unit: &quot;mL/min/1.73m²&quot; });

    // 11. FAS Height Equation
    let qFAS_ht = 0.00003 * Math.pow(ht,2) - 0.0022 * ht + 0.123;
    if(qFAS_ht &lt; 0.1) qFAS_ht = 0.25;
    data.push({ id: 11, name: &quot;11. FAS Height Equation&quot;, formula: `107.3 / (${scr} / Q_ht) [Q_ht=${qFAS_ht.toFixed(3)}]`, val: 107.3 / (scr / qFAS_ht), unit: &quot;mL/min/1.73m²&quot; });

    // Group III: Weight-Augmented Hybrid
    // 12. Léger Equation
    let val12 = (56.7 * wt + 0.142 * Math.pow(ht, 2)) / scr;
    data.push({ id: 12, name: &quot;12. Léger Equation (Absolute)&quot;, formula: `(56.7 × ${wt} + 0.142 × ${ht}²) / ${scr}`, val: val12, unit: &quot;mL/min (Absolute Clearance)&quot; });

    renderCanvas(data);
    renderTextResults(data);
  }

  function renderCanvas(data) {
    const canvas = document.getElementById(&#39;egfrCanvas&#39;);
    const ctx = canvas.getContext(&#39;2d&#39;);
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Layout configuration
    const startX = 220;
    const startY = 35;
    const rowHeight = 28;
    const maxBarWidth = 420;
    const maxVal = 180; // Scale maximum for visualization safety

    // Draw reference line background zones (Normal GFR baseline shadow)
    ctx.fillStyle = &quot;#f1f5f9&quot;;
    ctx.fillRect(startX, 0, maxBarWidth, canvas.height);
    ctx.fillStyle = &quot;#e2e8f0&quot;;
    // Highlight typical normal pediatric range zone (90 to 130)
    let normX1 = startX + (90 / maxVal) * maxBarWidth;
    let normX2 = startX + (130 / maxVal) * maxBarWidth;
    ctx.fillRect(normX1, 0, normX2 - normX1, canvas.height);

    data.forEach((item, index) =&gt; {
      let currY = startY + (index * rowHeight);
      
      // Label tracking
      ctx.fillStyle = &quot;#334155&quot;;
      ctx.font = &quot;bold 11px system-ui&quot;;
      ctx.textAlign = &quot;right&quot;;
      ctx.fillText(item.name.substring(0, 30), startX - 12, currY + 5);

      // Bar size transformations
      let calculatedVal = Math.min(item.val, maxVal);
      if (calculatedVal &lt; 0 || isNaN(calculatedVal)) calculatedVal = 0;
      let barWidth = (calculatedVal / maxVal) * maxBarWidth;

      // Color coding strategy
      if (item.primary) {
        ctx.fillStyle = &quot;#2563eb&quot;; // Highlight Clinical Standard
      } else if (item.id === 12) {
        ctx.fillStyle = &quot;#0d9488&quot;; // Absolute unit variant
      } else if (item.id &gt;= 8) {
        ctx.fillStyle = &quot;#7c3aed&quot;; // Polynomials
      } else {
        ctx.fillStyle = &quot;#64748b&quot;; // Historical linear choices
      }

      ctx.fillRect(startX, currY - 6, barWidth, 14);

      // Numerical values text alignment inline
      ctx.fillStyle = &quot;#0f172a&quot;;
      ctx.font = &quot;11px monospace&quot;;
      ctx.textAlign = &quot;left&quot;;
      ctx.fillText(item.val.toFixed(1), startX + barWidth + 6, currY + 4);
    });

    // Draw reference axes rule markers
    ctx.strokeStyle = &quot;#cbd5e1&quot;;
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(startX, 15);
    ctx.lineTo(startX, canvas.height - 20);
    ctx.stroke();

    // Scale Ticks text labels at base
    ctx.fillStyle = &quot;#64748b&quot;;
    ctx.font = &quot;10px sans-serif&quot;;
    ctx.textAlign = &quot;center&quot;;
    [0, 30, 60, 90, 120, 150, 180].forEach(tick =&gt; {
      let tx = startX + (tick / maxVal) * maxBarWidth;
      ctx.fillText(tick.toString(), tx, canvas.height - 8);
    });
  }

  function renderTextResults(data) {
    const panel = document.getElementById(&#39;resultsPanel&#39;);
    panel.innerHTML = &#39;&#39;;

    data.forEach(item =&gt; {
      const card = document.createElement(&#39;div&#39;);
      card.className = &#39;egfr-card&#39; + (item.primary ? &#39; primary-standard&#39; : &#39;&#39;);
      
      let badgeHTML = item.primary ? &#39;&lt;span class=&quot;badge&quot;&gt;Modern Clinical Standard&lt;/span&gt;&#39; : &#39;&#39;;
      let noteHTML = item.note ? `&lt;div style=&quot;font-size:0.75rem; color:#b45309;&quot;&gt;⚠️ ${item.note}&lt;/div&gt;` : &#39;&#39;;

      card.innerHTML = `
        &lt;h4&gt;&lt;span&gt;${item.name}&lt;/span&gt; ${badgeHTML}&lt;/h4&gt;
        &lt;div&gt;&lt;span class=&quot;formula-math&quot;&gt;Formula: eGFR = ${item.formula}&lt;/span&gt;&lt;/div&gt;
        ${noteHTML}
        &lt;div class=&quot;calc-audit&quot;&gt;Manual verification output: &lt;strong&gt;${item.val.toFixed(3)}&lt;/strong&gt; ${item.unit}&lt;/div&gt;
      `;
      panel.appendChild(card);
    });
  }

  // Initial generation sequence trigger
  calculateAll();
})();
&lt;/script&gt;

&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; xmlns:ev=&quot;http://www.w3.org/2001/xml-events&quot;
		xmlns:v=&quot;http://schemas.microsoft.com/visio/2003/SVGExtensions/&quot; viewBox=&quot;0 0 612 8352&quot;
		xml:space=&quot;preserve&quot; color-interpolation-filters=&quot;sRGB&quot; class=&quot;st24&quot;&gt;
	&lt;v:documentProperties v:langID=&quot;1033&quot; v:viewMarkup=&quot;false&quot;&gt;
		&lt;v:userDefs&gt;
			&lt;v:ud v:nameU=&quot;msvNoAutoConnect&quot; v:val=&quot;VT0(1):26&quot;/&gt;
			&lt;v:ud v:nameU=&quot;CPMState&quot; v:prompt=&quot;&quot; v:val=&quot;VT4(128,674,50,365,250,0)&quot;/&gt;
		&lt;/v:userDefs&gt;
	&lt;/v:documentProperties&gt;

	&lt;style type=&quot;text/css&quot;&gt;
	&lt;![CDATA[
		.st1 {fill:#dbeef3;stroke:#b7dde8;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
		.st2 {fill:#dbeef3;stroke:#0077b5;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
		.st3 {fill:#000000;font-family:Calibri;font-size:2.08333em}
		.st4 {fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
		.st5 {fill:#dbeef3;stroke:#a5a5a5;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
		.st6 {fill:#f2dcda;fill-opacity:0.35;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.75}
		.st7 {fill:#ffffff;font-family:Dubai;font-size:2.50001em}
		.st8 {fill:#e5daff;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.75}
		.st9 {font-size:1em}
		.st10 {fill:#c9e9f6;stroke:#b7dde8;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
		.st11 {fill:#000000;font-family:Fira Code;font-size:2.08333em}
		.st12 {marker-end:url(#mrkr4-36);stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.75}
		.st13 {fill:#000000;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:0.35070140280561}
		.st14 {fill:#ffffff;stroke:none;stroke-linecap:butt;stroke-width:7.2}
		.st15 {fill:#000000;font-family:Calibri;font-size:1.24999em}
		.st16 {fill:#aedbd3;stroke:#000000;stroke-dasharray:1.68,1.2;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
		.st17 {fill:#c05046;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.75}
		.st18 {fill:#ffffff;stroke:none;stroke-linecap:butt}
		.st19 {marker-end:url(#mrkr4-215);stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.75}
		.st20 {font-family:Cambria;font-size:1em}
		.st21 {fill:#f2dcda;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.75}
		.st22 {fill:#000000;font-family:Calibri;font-size:2.08333em;font-weight:bold}
		.st23 {font-size:1em;font-weight:normal}
		.st24 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}
	]]&gt;
	&lt;/style&gt;

	&lt;defs id=&quot;Markers&quot;&gt;
		&lt;g id=&quot;lend4&quot;&gt;
			&lt;path d=&quot;M 2 1 L 0 0 L 2 -1 L 2 1 &quot; style=&quot;stroke:none&quot;/&gt;
		&lt;/g&gt;
		&lt;marker id=&quot;mrkr4-36&quot; class=&quot;st13&quot; v:arrowType=&quot;4&quot; v:arrowSize=&quot;3&quot; v:setback=&quot;5.49714&quot; refX=&quot;-5.4971428571429&quot;
				orient=&quot;auto&quot; markerUnits=&quot;strokeWidth&quot; overflow=&quot;visible&quot;&gt;
			&lt;use xlink:href=&quot;#lend4&quot; transform=&quot;scale(-2.8514285714286,-2.8514285714286) &quot;/&gt;
		&lt;/marker&gt;
		&lt;marker id=&quot;mrkr4-215&quot; class=&quot;st13&quot; v:arrowType=&quot;4&quot; v:arrowSize=&quot;3&quot; v:setback=&quot;0&quot; refX=&quot;-0&quot; orient=&quot;auto&quot;
				markerUnits=&quot;strokeWidth&quot; overflow=&quot;visible&quot;&gt;
			&lt;use xlink:href=&quot;#lend4&quot; transform=&quot;scale(-2.8514285714286,-2.8514285714286) &quot;/&gt;
		&lt;/marker&gt;
	&lt;/defs&gt;
	&lt;g v:mID=&quot;0&quot; v:index=&quot;1&quot; v:groupContext=&quot;foregroundPage&quot;&gt;
		&lt;v:userDefs&gt;
			&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Pediatric eGFR Formulae)&quot;/&gt;
			&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Pediatric eGFR Formulae)&quot;/&gt;
			&lt;v:ud v:nameU=&quot;visNavType&quot; v:val=&quot;VT0(1):26&quot;/&gt;
		&lt;/v:userDefs&gt;
		&lt;title&gt;Pediatric eGFR Formulae&lt;/title&gt;
		&lt;v:pageProperties v:drawingScale=&quot;1&quot; v:pageScale=&quot;1&quot; v:drawingUnits=&quot;19&quot; v:shadowOffsetX=&quot;9&quot; v:shadowOffsetY=&quot;-9&quot;/&gt;
		&lt;v:layer v:name=&quot;Flowchart&quot; v:index=&quot;0&quot;/&gt;
		&lt;v:layer v:name=&quot;Connector&quot; v:index=&quot;1&quot;/&gt;
		&lt;v:layer v:name=&quot;Cursors and Gestures&quot; v:index=&quot;2&quot;/&gt;
		&lt;g id=&quot;shape927-1&quot; v:mID=&quot;927&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-7858.2)&quot;&gt;
			&lt;title&gt;Patreon and LinkedIn links&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(1000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8293.5&quot; width=&quot;576&quot; height=&quot;58.5&quot; class=&quot;st1&quot;/&gt;
		&lt;/g&gt;
		&lt;a xlink:href=&quot;https://www.linkedin.com/in/usmanzafarparacha/&quot; xlink:title=&quot;LinkedIn Profile&quot;&gt;
			&lt;g id=&quot;group931-3&quot; transform=&quot;translate(328.5,-7871.32)&quot; v:mID=&quot;931&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(2000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;LinkedIn Profile&lt;/title&gt;
				&lt;g id=&quot;shape929-4&quot; v:mID=&quot;929&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(29.25,-0.532647)&quot;&gt;
					&lt;title&gt;/usmanzafarparacha&lt;/title&gt;
					&lt;desc&gt;/usmanzafarparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;111.375&quot; cy=&quot;8337.91&quot; width=&quot;222.76&quot; height=&quot;28.1847&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.82&quot; width=&quot;222.75&quot; height=&quot;28.1847&quot; class=&quot;st2&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.41&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/usmanzafarparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape40-7&quot; v:mID=&quot;40&quot; v:groupContext=&quot;shape&quot;&gt;
					&lt;title&gt;LinkedIn&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;a xlink:href=&quot;https://www.patreon.com/uzparacha&quot; xlink:title=&quot;Patreon profile&quot;&gt;
			&lt;g id=&quot;group932-11&quot; transform=&quot;translate(36,-7871.92)&quot; v:mID=&quot;932&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(3000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;Patreon profile&lt;/title&gt;
				&lt;g id=&quot;shape928-12&quot; v:mID=&quot;928&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(117,0)&quot;&gt;
					&lt;title&gt;/uzparacha&lt;/title&gt;
					&lt;desc&gt;/uzparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;65.25&quot; cy=&quot;8337.97&quot; width=&quot;130.51&quot; height=&quot;28.0568&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.94&quot; width=&quot;130.5&quot; height=&quot;28.0568&quot; class=&quot;st5&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.47&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/uzparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape41-15&quot; v:mID=&quot;41&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(0,-4.27832)&quot;&gt;
					&lt;title&gt;Patreon&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								iVBORw0KGgoAAAANSUhEUgAAASwAAAAyCAYAAADm1uYqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAA
								EnQAABJ0Ad5mH3gAABHLSURBVHhe7Z111C1VGcZfu1tRbFFUJGyxxe7EwMLGzqVLTESxFbsQDFRkKS5R7MBCbDGwxRbFBLt1
								/e6a0e3DPnu/O2bO3O/eZ63nn+87O86ZmWf2fmubbSyczcweb2ZfMbM/mdkPzexQM7uCfnArtmJNOJOZ3cjM9jOztw336i/N
								7I9m9m8z+42Z/cTMjjKzg8zsIWa2o5mdQjuaAbcysw8Mc/qrmX3HzJ5nZufVD3bGTmb2bjP7vZn9wczea2a7hB+4lpm9z8x+
								NvxoJfz18EU+Y2ZHmNk+wwU5azjADLiYmX07Mj/4DzPbSxsU4pJmdrCZfWO4gOvkl8zsZWa2jU5yBe5kZh8bHgz9bTz859CW
								35fr/A4ze5KZXd/MzqKDdcItzexDZnZCZD5TkHuE+/hAMzu/TqYRpzGz3c3s8OHB17E9/LGZPWcQrzmwf2QOI7kmV9YGncBz
								/NvImCeZ2cX5wO3N7F+RD7SSG+AjZnZPMzudzqozzjjcbDoH5fW0oRPbr/gR183jzOzsOlnBfSPtepLrjIDdxMxOqYNXYqp7
								0svjC14GKZzezB5qZj+IjFFLfhcWBlfVwTriLpFxlYjWdtqwA14RGWskLxP7auQfvckSlwen1w2teHhkzBhZmdQsrV8S6Wsp
								fKxOVvD1SJupyEsDsWnF0ZG+5+YjdVKFuKnzJVpLhIsV//l04A44NjJejMcMq8ee+GZknJG8oO3vkX9MxU+Y2UV0hh3wtchY
								q3gdbewA2yntZyk8RCcb4LTDCkjbTM3DBntiLX4X6XNuvkon5cQZzOzVkf6m4q+G7XMvXCgyRop7aweN4PvoGCO5L072x6mJ
								LeQqOssGsDTWMVJ8vXbgwFsi/SyFL9XJBsDAq5+fixiTa9/+f4v0Nzcfp5Ny4MLD99a+piarrWdW7h4U14z0nyLOrZ5bQ2y0
								OsZIDPAn++McxIB2eZ1pJQ6I9J8i3phSh8DdI/0sgdyo19DJBlinYEG24DVG+XULFt6pTQbeAlxmMIxrX3OSl/GpdWKFwBap
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;g id=&quot;shape826-19&quot; v:mID=&quot;826&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(4217.92,-7064.85) rotate(30)&quot;&gt;
			&lt;title&gt;Usman Zafar Paracha 1&lt;/title&gt;
			&lt;desc&gt;Usman Zafar Paracha&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(4000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;153.992&quot; cy=&quot;8327.64&quot; width=&quot;307.99&quot; height=&quot;48.7186&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8303.28&quot; width=&quot;307.985&quot; height=&quot;48.7186&quot; class=&quot;st6&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8336.64&quot; class=&quot;st7&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph/&gt;&lt;v:tabList/&gt;Usman Zafar Paracha&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1175-22&quot; v:mID=&quot;1175&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-8208)&quot;&gt;
			&lt;title&gt;Original Schwartz (1976)&lt;/title&gt;
			&lt;desc&gt;Original Schwartz (1976)&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Original Schwartz (1976))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Original Schwartz (1976))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(5000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;81&quot; cy=&quot;8302.5&quot; width=&quot;162&quot; height=&quot;99.0002&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8253&quot; width=&quot;162&quot; height=&quot;99.0002&quot; class=&quot;st8&quot;/&gt;
			&lt;text x=&quot;41.32&quot; y=&quot;8280&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;Original &lt;tspan x=&quot;35&quot;
						dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;Schwartz &lt;/tspan&gt;&lt;tspan x=&quot;48.08&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;(1976)&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1176-27&quot; v:mID=&quot;1176&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-7938)&quot;&gt;
			&lt;title&gt;eGFR = (0.55 × Body height or length (cm)) / serum creatinine (mg/dL)&lt;/title&gt;
			&lt;desc&gt;eGFR = (0.55 × Body height or length (cm)) / serum creatinine...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(eGFR = (0.55 × Body height or length (cm)) / serum creatinine (mg/dL))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(eGFR = (0.55 × Body height or length (cm)) / serum creatinine (mg/dL))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(6000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;284.625&quot; cy=&quot;8316&quot; width=&quot;569.25&quot; height=&quot;72.0001&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8280&quot; width=&quot;569.25&quot; height=&quot;72.0001&quot; class=&quot;st10&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8308.15&quot; class=&quot;st11&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;eGFR = (0.55 × Body height or length &lt;tspan
						x=&quot;4&quot; dy=&quot;1.221em&quot; class=&quot;st9&quot;&gt;(cm)) / serum creatinine (mg/dL)&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1177-31&quot; v:mID=&quot;1177&quot; v:groupContext=&quot;shape&quot; v:layerMember=&quot;1&quot; transform=&quot;translate(99,-8208)&quot;&gt;
			&lt;title&gt;syntax&lt;/title&gt;
			&lt;desc&gt;syntax&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(7000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;52.2895&quot; cy=&quot;8488.07&quot; width=&quot;75.01&quot; height=&quot;26.0035&quot;/&gt;
			&lt;path d=&quot;M0 8352 C-0 8365.5 -14.94 8455.18 31.36 8481.64 C81.97 8510.56 205.77 8463.93 204.43 8540.05 L204.4 8540.41&quot;
					class=&quot;st12&quot;/&gt;
			&lt;rect v:rectContext=&quot;textBkgnd&quot; x=&quot;32.6681&quot; y=&quot;8479.07&quot; width=&quot;39.2429&quot; height=&quot;18&quot; class=&quot;st14&quot;/&gt;
			&lt;text x=&quot;32.67&quot; y=&quot;8492.57&quot; class=&quot;st15&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;syntax&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1178-39&quot; v:mID=&quot;1178&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(216,-8136)&quot;&gt;
			&lt;title&gt;The foundational pediatric eGFR formula using a constant of 0.55 × height/Scr, derived from inulin clearance studies in children.&lt;/title&gt;
			&lt;desc&gt;The foundational pediatric eGFR formula using a constant of 0...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;Scale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;AntiScale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(The foundational pediatric eGFR formula using a constant of 0.55 × height/Scr, derived from inulin clearance studies in children.)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot;
						v:val=&quot;VT4(The foundational pediatric eGFR formula using a constant of 0.55 × height/Scr, derived from inulin clearance studies in children.)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(8000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;189&quot; cy=&quot;8262&quot; width=&quot;378&quot; height=&quot;180&quot;/&gt;
			&lt;path d=&quot;M0 8244 L0 8172 L171 8172 L189 8172 L207 8172 L378 8172 L378 8244 L378 8262 L378 8280 L378 8352 L207 8352 L189
						 8352 L171 8352 L0 8352 L0 8280 L-36 8230.5 L0 8244 Z&quot; class=&quot;st16&quot;/&gt;
			&lt;text x=&quot;24.93&quot; y=&quot;8224.5&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;The foundational pediatric eGFR &lt;tspan
						x=&quot;16.05&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;formula using a constant of 0.55 × &lt;/tspan&gt;&lt;tspan x=&quot;33.39&quot; dy=&quot;1.2em&quot;
						class=&quot;st9&quot;&gt;height/Scr, derived from inulin &lt;/tspan&gt;&lt;tspan x=&quot;41.66&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;clearance studies in children.&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1185-45&quot; v:mID=&quot;1185&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(16.8,-7776)&quot;&gt;
			&lt;title&gt;Page Break 1&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Page Break 1)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Page Break 1)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(9000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8280&quot; width=&quot;576&quot; height=&quot;72.0001&quot; class=&quot;st17&quot;/&gt;
		&lt;/g&gt;
		&lt;g id=&quot;shape1186-47&quot; v:mID=&quot;1186&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(19.2,-7307.4)&quot;&gt;
			&lt;title&gt;Patreon and LinkedIn links.1186&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(10000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8293.5&quot; width=&quot;576&quot; height=&quot;58.5&quot; class=&quot;st1&quot;/&gt;
		&lt;/g&gt;
		&lt;a xlink:href=&quot;https://www.linkedin.com/in/usmanzafarparacha/&quot; xlink:title=&quot;LinkedIn Profile&quot;&gt;
			&lt;g id=&quot;group1187-49&quot; transform=&quot;translate(329.7,-7320.52)&quot; v:mID=&quot;1187&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(11000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;LinkedIn Profile.1187&lt;/title&gt;
				&lt;g id=&quot;shape1188-50&quot; v:mID=&quot;1188&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(29.25,-0.532647)&quot;&gt;
					&lt;title&gt;/usmanzafarparacha&lt;/title&gt;
					&lt;desc&gt;/usmanzafarparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;111.375&quot; cy=&quot;8337.91&quot; width=&quot;222.76&quot; height=&quot;28.1847&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.82&quot; width=&quot;222.75&quot; height=&quot;28.1847&quot; class=&quot;st2&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.41&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/usmanzafarparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape42-53&quot; v:mID=&quot;42&quot; v:groupContext=&quot;shape&quot;&gt;
					&lt;title&gt;LinkedIn&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;a xlink:href=&quot;https://www.patreon.com/uzparacha&quot; xlink:title=&quot;Patreon profile&quot;&gt;
			&lt;g id=&quot;group1189-57&quot; transform=&quot;translate(37.2,-7321.12)&quot; v:mID=&quot;1189&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(12000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;Patreon profile.1189&lt;/title&gt;
				&lt;g id=&quot;shape1190-58&quot; v:mID=&quot;1190&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(117,0)&quot;&gt;
					&lt;title&gt;/uzparacha&lt;/title&gt;
					&lt;desc&gt;/uzparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;65.25&quot; cy=&quot;8337.97&quot; width=&quot;130.51&quot; height=&quot;28.0568&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.94&quot; width=&quot;130.5&quot; height=&quot;28.0568&quot; class=&quot;st5&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.47&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/uzparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape43-61&quot; v:mID=&quot;43&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(0,-4.27832)&quot;&gt;
					&lt;title&gt;Patreon&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								iVBORw0KGgoAAAANSUhEUgAAASwAAAAyCAYAAADm1uYqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAA
								EnQAABJ0Ad5mH3gAABHLSURBVHhe7Z111C1VGcZfu1tRbFFUJGyxxe7EwMLGzqVLTESxFbsQDFRkKS5R7MBCbDGwxRbFBLt1
								/e6a0e3DPnu/O2bO3O/eZ63nn+87O86ZmWf2fmubbSyczcweb2ZfMbM/mdkPzexQM7uCfnArtmJNOJOZ3cjM9jOztw336i/N
								7I9m9m8z+42Z/cTMjjKzg8zsIWa2o5mdQjuaAbcysw8Mc/qrmX3HzJ5nZufVD3bGTmb2bjP7vZn9wczea2a7hB+4lpm9z8x+
								NvxoJfz18EU+Y2ZHmNk+wwU5azjADLiYmX07Mj/4DzPbSxsU4pJmdrCZfWO4gOvkl8zsZWa2jU5yBe5kZh8bHgz9bTz859CW
								35fr/A4ze5KZXd/MzqKDdcItzexDZnZCZD5TkHuE+/hAMzu/TqYRpzGz3c3s8OHB17E9/LGZPWcQrzmwf2QOI7kmV9YGncBz
								/NvImCeZ2cX5wO3N7F+RD7SSG+AjZnZPMzudzqozzjjcbDoH5fW0oRPbr/gR183jzOzsOlnBfSPtepLrjIDdxMxOqYNXYqp7
								0svjC14GKZzezB5qZj+IjFFLfhcWBlfVwTriLpFxlYjWdtqwA14RGWskLxP7auQfvckSlwen1w2teHhkzBhZmdQsrV8S6Wsp
								fKxOVvD1SJupyEsDsWnF0ZG+5+YjdVKFuKnzJVpLhIsV//l04A44NjJejMcMq8ee+GZknJG8oO3vkX9MxU+Y2UV0hh3wtchY
								q3gdbewA2yntZyk8RCcb4LTDCkjbTM3DBntiLX4X6XNuvkon5cQZzOzVkf6m4q+G7XMvXCgyRop7aweN4PvoGCO5L072x6mJ
								LeQqOssGsDTWMVJ8vXbgwFsi/SyFL9XJBsDAq5+fixiTa9/+f4v0Nzcfp5Ny4MLD99a+piarrWdW7h4U14z0nyLOrZ5bQ2y0
								OsZIDPAn++McxIB2eZ1pJQ6I9J8i3phSh8DdI/0sgdyo19DJBlinYEG24DVG+XULFt6pTQbeAlxmMIxrX3OSl/GpdWKFwBap
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;g id=&quot;shape1191-65&quot; v:mID=&quot;1191&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(4219.12,-6514.05) rotate(30)&quot;&gt;
			&lt;title&gt;Usman Zafar Paracha 2&lt;/title&gt;
			&lt;desc&gt;Usman Zafar Paracha&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(13000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;153.992&quot; cy=&quot;8327.64&quot; width=&quot;307.99&quot; height=&quot;48.7186&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8303.28&quot; width=&quot;307.985&quot; height=&quot;48.7186&quot; class=&quot;st6&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8336.64&quot; class=&quot;st7&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph/&gt;&lt;v:tabList/&gt;Usman Zafar Paracha&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1192-68&quot; v:mID=&quot;1192&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(19.2,-7657.2)&quot;&gt;
			&lt;title&gt;Infant Schwartz (1984)&lt;/title&gt;
			&lt;desc&gt;Infant Schwartz (1984)&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Infant Schwartz (1984))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Infant Schwartz (1984)&amp;#10;)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(14000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;81&quot; cy=&quot;8302.5&quot; width=&quot;162&quot; height=&quot;99.0002&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8253&quot; width=&quot;162&quot; height=&quot;99.0002&quot; class=&quot;st8&quot;/&gt;
			&lt;text x=&quot;50.73&quot; y=&quot;8280&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;Infant &lt;tspan x=&quot;35&quot;
						dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;Schwartz &lt;/tspan&gt;&lt;tspan x=&quot;48.08&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;(1984)&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1193-73&quot; v:mID=&quot;1193&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(19.2,-7387.2)&quot;&gt;
			&lt;title&gt;eGFR = (0.45 × Body height or length (cm)) / serum creatinine (mg/dL)&lt;/title&gt;
			&lt;desc&gt;eGFR = (0.45 × Body height or length (cm)) / serum creatinine...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(eGFR = (0.45 × Body height or length (cm)) / serum creatinine (mg/dL))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(eGFR = (0.45 × Body height or length (cm)) / serum creatinine (mg/dL))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(15000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;287.4&quot; cy=&quot;8316&quot; width=&quot;574.81&quot; height=&quot;72.0001&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8280&quot; width=&quot;574.8&quot; height=&quot;72.0001&quot; class=&quot;st10&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8308.15&quot; class=&quot;st11&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;eGFR = (0.45 × Body height or length &lt;tspan
						x=&quot;4&quot; dy=&quot;1.221em&quot; class=&quot;st9&quot;&gt;(cm)) / serum creatinine (mg/dL)&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1194-77&quot; v:mID=&quot;1194&quot; v:groupContext=&quot;shape&quot; v:layerMember=&quot;1&quot; transform=&quot;translate(100.2,-7657.2)&quot;&gt;
			&lt;title&gt;syntax2&lt;/title&gt;
			&lt;desc&gt;syntax&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(16000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;82.501&quot; cy=&quot;8468.29&quot; width=&quot;75.01&quot; height=&quot;26.0035&quot;/&gt;
			&lt;path d=&quot;M0 8352 C-0 8365.5 16.92 8442.52 58.88 8463.03 C110.69 8488.36 200.68 8427.51 206.14 8540.02 L206.15 8540.38&quot;
					class=&quot;st12&quot;/&gt;
			&lt;rect v:rectContext=&quot;textBkgnd&quot; x=&quot;62.8796&quot; y=&quot;8459.29&quot; width=&quot;39.2429&quot; height=&quot;18&quot; class=&quot;st18&quot;/&gt;
			&lt;text x=&quot;62.88&quot; y=&quot;8472.79&quot; class=&quot;st15&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;syntax&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1195-84&quot; v:mID=&quot;1195&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(217.2,-7585.2)&quot;&gt;
			&lt;title&gt;A refinement for infants under 1 year using a lower k-constant (0.45) to reflect immature renal tubular function.&lt;/title&gt;
			&lt;desc&gt;A refinement for infants under 1 year using a lower k-constan...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;Scale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;AntiScale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(A refinement for infants under 1 year using a lower k-constant (0.45) to reflect immature renal tubular function.)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot;
						v:val=&quot;VT4(A refinement for infants under 1 year using a lower k-constant (0.45) to reflect immature renal tubular function.)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(17000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;189&quot; cy=&quot;8262&quot; width=&quot;378&quot; height=&quot;180&quot;/&gt;
			&lt;path d=&quot;M0 8244 L0 8172 L171 8172 L189 8172 L207 8172 L378 8172 L378 8244 L378 8262 L378 8280 L378 8352 L207 8352 L189
						 8352 L171 8352 L0 8352 L0 8280 L-36 8230.5 L0 8244 Z&quot; class=&quot;st16&quot;/&gt;
			&lt;text x=&quot;24.37&quot; y=&quot;8224.5&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;A refinement for infants under 1 &lt;tspan
						x=&quot;7.4&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;year using a lower k&lt;/tspan&gt;-constant (0.45) &lt;tspan x=&quot;20.7&quot; dy=&quot;1.2em&quot;
						class=&quot;st9&quot;&gt;to reflect immature renal tubular &lt;/tspan&gt;&lt;tspan x=&quot;143.39&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;function.&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1196-90&quot; v:mID=&quot;1196&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-7225.2)&quot;&gt;
			&lt;title&gt;Page Break 2&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Page Break 2)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Page Break 2)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(18000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8280&quot; width=&quot;576&quot; height=&quot;72.0001&quot; class=&quot;st17&quot;/&gt;
		&lt;/g&gt;
		&lt;g id=&quot;shape1197-92&quot; v:mID=&quot;1197&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(19.2,-6742.2)&quot;&gt;
			&lt;title&gt;Patreon and LinkedIn links.1197&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(19000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8293.5&quot; width=&quot;576&quot; height=&quot;58.5&quot; class=&quot;st1&quot;/&gt;
		&lt;/g&gt;
		&lt;a xlink:href=&quot;https://www.linkedin.com/in/usmanzafarparacha/&quot; xlink:title=&quot;LinkedIn Profile&quot;&gt;
			&lt;g id=&quot;group1198-94&quot; transform=&quot;translate(329.7,-6755.32)&quot; v:mID=&quot;1198&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(20000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;LinkedIn Profile.1198&lt;/title&gt;
				&lt;g id=&quot;shape1199-95&quot; v:mID=&quot;1199&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(29.25,-0.532647)&quot;&gt;
					&lt;title&gt;/usmanzafarparacha&lt;/title&gt;
					&lt;desc&gt;/usmanzafarparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;111.375&quot; cy=&quot;8337.91&quot; width=&quot;222.76&quot; height=&quot;28.1847&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.82&quot; width=&quot;222.75&quot; height=&quot;28.1847&quot; class=&quot;st2&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.41&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/usmanzafarparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape44-98&quot; v:mID=&quot;44&quot; v:groupContext=&quot;shape&quot;&gt;
					&lt;title&gt;LinkedIn&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;a xlink:href=&quot;https://www.patreon.com/uzparacha&quot; xlink:title=&quot;Patreon profile&quot;&gt;
			&lt;g id=&quot;group1200-102&quot; transform=&quot;translate(37.2,-6755.92)&quot; v:mID=&quot;1200&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(21000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;Patreon profile.1200&lt;/title&gt;
				&lt;g id=&quot;shape1201-103&quot; v:mID=&quot;1201&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(117,0)&quot;&gt;
					&lt;title&gt;/uzparacha&lt;/title&gt;
					&lt;desc&gt;/uzparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;65.25&quot; cy=&quot;8337.97&quot; width=&quot;130.51&quot; height=&quot;28.0568&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.94&quot; width=&quot;130.5&quot; height=&quot;28.0568&quot; class=&quot;st5&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.47&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/uzparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape45-106&quot; v:mID=&quot;45&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(0,-4.27832)&quot;&gt;
					&lt;title&gt;Patreon&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								iVBORw0KGgoAAAANSUhEUgAAASwAAAAyCAYAAADm1uYqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAA
								EnQAABJ0Ad5mH3gAABHLSURBVHhe7Z111C1VGcZfu1tRbFFUJGyxxe7EwMLGzqVLTESxFbsQDFRkKS5R7MBCbDGwxRbFBLt1
								/e6a0e3DPnu/O2bO3O/eZ63nn+87O86ZmWf2fmubbSyczcweb2ZfMbM/mdkPzexQM7uCfnArtmJNOJOZ3cjM9jOztw336i/N
								7I9m9m8z+42Z/cTMjjKzg8zsIWa2o5mdQjuaAbcysw8Mc/qrmX3HzJ5nZufVD3bGTmb2bjP7vZn9wczea2a7hB+4lpm9z8x+
								NvxoJfz18EU+Y2ZHmNk+wwU5azjADLiYmX07Mj/4DzPbSxsU4pJmdrCZfWO4gOvkl8zsZWa2jU5yBe5kZh8bHgz9bTz859CW
								35fr/A4ze5KZXd/MzqKDdcItzexDZnZCZD5TkHuE+/hAMzu/TqYRpzGz3c3s8OHB17E9/LGZPWcQrzmwf2QOI7kmV9YGncBz
								/NvImCeZ2cX5wO3N7F+RD7SSG+AjZnZPMzudzqozzjjcbDoH5fW0oRPbr/gR183jzOzsOlnBfSPtepLrjIDdxMxOqYNXYqp7
								0svjC14GKZzezB5qZj+IjFFLfhcWBlfVwTriLpFxlYjWdtqwA14RGWskLxP7auQfvckSlwen1w2teHhkzBhZmdQsrV8S6Wsp
								fKxOVvD1SJupyEsDsWnF0ZG+5+YjdVKFuKnzJVpLhIsV//l04A44NjJejMcMq8ee+GZknJG8oO3vkX9MxU+Y2UV0hh3wtchY
								q3gdbewA2yntZyk8RCcb4LTDCkjbTM3DBntiLX4X6XNuvkon5cQZzOzVkf6m4q+G7XMvXCgyRop7aweN4PvoGCO5L072x6mJ
								LeQqOssGsDTWMVJ8vXbgwFsi/SyFL9XJBsDAq5+fixiTa9/+f4v0Nzcfp5Ny4MLD99a+piarrWdW7h4U14z0nyLOrZ5bQ2y0
								OsZIDPAn++McxIB2eZ1pJQ6I9J8i3phSh8DdI/0sgdyo19DJBlinYEG24DVG+XULFt6pTQbeAlxmMIxrX3OSl/GpdWKFwBap
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;g id=&quot;shape1202-110&quot; v:mID=&quot;1202&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(4217.92,-5948.85) rotate(30)&quot;&gt;
			&lt;title&gt;Usman Zafar Paracha 1.1202&lt;/title&gt;
			&lt;desc&gt;Usman Zafar Paracha&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(22000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;153.992&quot; cy=&quot;8327.64&quot; width=&quot;307.99&quot; height=&quot;48.7186&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8303.28&quot; width=&quot;307.985&quot; height=&quot;48.7186&quot; class=&quot;st6&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8336.64&quot; class=&quot;st7&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph/&gt;&lt;v:tabList/&gt;Usman Zafar Paracha&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1203-113&quot; v:mID=&quot;1203&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-7092)&quot;&gt;
			&lt;title&gt;Adolescent Male Schwartz (1976)&lt;/title&gt;
			&lt;desc&gt;Adolescent Male Schwartz (1976)&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Adolescent Male Schwartz (1976))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Adolescent Male Schwartz (1976))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(23000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;81&quot; cy=&quot;8302.5&quot; width=&quot;162&quot; height=&quot;99.0002&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8253&quot; width=&quot;162&quot; height=&quot;99.0002&quot; class=&quot;st8&quot;/&gt;
			&lt;text x=&quot;24.37&quot; y=&quot;8280&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;Adolescent &lt;tspan
						x=&quot;6.41&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;Male Schwartz &lt;/tspan&gt;&lt;tspan x=&quot;48.08&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;(1976)&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1204-118&quot; v:mID=&quot;1204&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-6822)&quot;&gt;
			&lt;title&gt;eGFR = (0.70 × Body height or length (cm)) / serum creatinine (mg/dL)&lt;/title&gt;
			&lt;desc&gt;eGFR = (0.70 × Body height or length (cm)) / serum creatinine...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(eGFR = (0.70 × Body height or length (cm)) / serum creatinine (mg/dL))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(eGFR = (0.70 × Body height or length (cm)) / serum creatinine (mg/dL))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(24000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;288&quot; cy=&quot;8316&quot; width=&quot;576&quot; height=&quot;72.0001&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8280&quot; width=&quot;576&quot; height=&quot;72.0001&quot; class=&quot;st10&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8308.15&quot; class=&quot;st11&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;eGFR = (0.70 × Body height or length &lt;tspan
						x=&quot;4&quot; dy=&quot;1.221em&quot; class=&quot;st9&quot;&gt;(cm)) / serum creatinine (mg/dL)&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1205-122&quot; v:mID=&quot;1205&quot; v:groupContext=&quot;shape&quot; v:layerMember=&quot;1&quot; transform=&quot;translate(99,-7092)&quot;&gt;
			&lt;title&gt;syntax 3&lt;/title&gt;
			&lt;desc&gt;syntax&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(25000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;93.4421&quot; cy=&quot;8454&quot; width=&quot;75.01&quot; height=&quot;26.0035&quot;/&gt;
			&lt;path d=&quot;M0 8352 C0 8365.5 19.2 8428.88 61.79 8447.7 C114.2 8470.86 202.02 8426.55 206.8 8540.02 L206.8 8540.38&quot;
					class=&quot;st12&quot;/&gt;
			&lt;rect v:rectContext=&quot;textBkgnd&quot; x=&quot;73.8207&quot; y=&quot;8445.01&quot; width=&quot;39.2429&quot; height=&quot;18&quot; class=&quot;st18&quot;/&gt;
			&lt;text x=&quot;73.82&quot; y=&quot;8458.51&quot; class=&quot;st15&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;syntax&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1206-129&quot; v:mID=&quot;1206&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(216,-7020)&quot;&gt;
			&lt;title&gt;An extension of the original Schwartz formula using k = 0.70 for post-pubertal males to account for increased muscle mass.&lt;/title&gt;
			&lt;desc&gt;An extension of the original Schwartz formula using k = 0.70 ...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;Scale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;AntiScale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(An extension of the original Schwartz formula using k = 0.70 for post-pubertal males to account for increased muscle mass.)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot;
						v:val=&quot;VT4(An extension of the original Schwartz formula using k = 0.70 for post-pubertal males to account for increased muscle mass.)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(26000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;189&quot; cy=&quot;8262&quot; width=&quot;378&quot; height=&quot;180&quot;/&gt;
			&lt;path d=&quot;M0 8244 L0 8172 L171 8172 L189 8172 L207 8172 L378 8172 L378 8244 L378 8262 L378 8280 L378 8352 L207 8352 L189
						 8352 L171 8352 L0 8352 L0 8280 L-36 8230.5 L0 8244 Z&quot; class=&quot;st16&quot;/&gt;
			&lt;text x=&quot;49&quot; y=&quot;8224.5&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;An extension of the original &lt;tspan
						x=&quot;10.26&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;Schwartz formula using k = 0.70 for &lt;/tspan&gt;&lt;tspan x=&quot;12.35&quot; dy=&quot;1.2em&quot;
						class=&quot;st9&quot;&gt;post&lt;/tspan&gt;-pubertal males to account for &lt;tspan x=&quot;69.66&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;increased muscle mass.&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1207-135&quot; v:mID=&quot;1207&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-6660)&quot;&gt;
			&lt;title&gt;Page Break 3&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Page Break 3)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Page Break 3)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(27000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8280&quot; width=&quot;576&quot; height=&quot;72.0001&quot; class=&quot;st17&quot;/&gt;
		&lt;/g&gt;
		&lt;g id=&quot;shape1208-137&quot; v:mID=&quot;1208&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(19.2,-6184.2)&quot;&gt;
			&lt;title&gt;Patreon and LinkedIn links.1208&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(28000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8293.5&quot; width=&quot;576&quot; height=&quot;58.5&quot; class=&quot;st1&quot;/&gt;
		&lt;/g&gt;
		&lt;a xlink:href=&quot;https://www.linkedin.com/in/usmanzafarparacha/&quot; xlink:title=&quot;LinkedIn Profile&quot;&gt;
			&lt;g id=&quot;group1209-139&quot; transform=&quot;translate(329.7,-6197.32)&quot; v:mID=&quot;1209&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(29000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;LinkedIn Profile.1209&lt;/title&gt;
				&lt;g id=&quot;shape1210-140&quot; v:mID=&quot;1210&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(29.25,-0.532647)&quot;&gt;
					&lt;title&gt;/usmanzafarparacha&lt;/title&gt;
					&lt;desc&gt;/usmanzafarparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;111.375&quot; cy=&quot;8337.91&quot; width=&quot;222.76&quot; height=&quot;28.1847&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.82&quot; width=&quot;222.75&quot; height=&quot;28.1847&quot; class=&quot;st2&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.41&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/usmanzafarparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape46-143&quot; v:mID=&quot;46&quot; v:groupContext=&quot;shape&quot;&gt;
					&lt;title&gt;LinkedIn&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;a xlink:href=&quot;https://www.patreon.com/uzparacha&quot; xlink:title=&quot;Patreon profile&quot;&gt;
			&lt;g id=&quot;group1211-147&quot; transform=&quot;translate(37.2,-6197.92)&quot; v:mID=&quot;1211&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(30000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;Patreon profile.1211&lt;/title&gt;
				&lt;g id=&quot;shape1212-148&quot; v:mID=&quot;1212&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(117,0)&quot;&gt;
					&lt;title&gt;/uzparacha&lt;/title&gt;
					&lt;desc&gt;/uzparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;65.25&quot; cy=&quot;8337.97&quot; width=&quot;130.51&quot; height=&quot;28.0568&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.94&quot; width=&quot;130.5&quot; height=&quot;28.0568&quot; class=&quot;st5&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.47&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/uzparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape47-151&quot; v:mID=&quot;47&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(0,-4.27832)&quot;&gt;
					&lt;title&gt;Patreon&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								iVBORw0KGgoAAAANSUhEUgAAASwAAAAyCAYAAADm1uYqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAA
								EnQAABJ0Ad5mH3gAABHLSURBVHhe7Z111C1VGcZfu1tRbFFUJGyxxe7EwMLGzqVLTESxFbsQDFRkKS5R7MBCbDGwxRbFBLt1
								/e6a0e3DPnu/O2bO3O/eZ63nn+87O86ZmWf2fmubbSyczcweb2ZfMbM/mdkPzexQM7uCfnArtmJNOJOZ3cjM9jOztw336i/N
								7I9m9m8z+42Z/cTMjjKzg8zsIWa2o5mdQjuaAbcysw8Mc/qrmX3HzJ5nZufVD3bGTmb2bjP7vZn9wczea2a7hB+4lpm9z8x+
								NvxoJfz18EU+Y2ZHmNk+wwU5azjADLiYmX07Mj/4DzPbSxsU4pJmdrCZfWO4gOvkl8zsZWa2jU5yBe5kZh8bHgz9bTz859CW
								35fr/A4ze5KZXd/MzqKDdcItzexDZnZCZD5TkHuE+/hAMzu/TqYRpzGz3c3s8OHB17E9/LGZPWcQrzmwf2QOI7kmV9YGncBz
								/NvImCeZ2cX5wO3N7F+RD7SSG+AjZnZPMzudzqozzjjcbDoH5fW0oRPbr/gR183jzOzsOlnBfSPtepLrjIDdxMxOqYNXYqp7
								0svjC14GKZzezB5qZj+IjFFLfhcWBlfVwTriLpFxlYjWdtqwA14RGWskLxP7auQfvckSlwen1w2teHhkzBhZmdQsrV8S6Wsp
								fKxOVvD1SJupyEsDsWnF0ZG+5+YjdVKFuKnzJVpLhIsV//l04A44NjJejMcMq8ee+GZknJG8oO3vkX9MxU+Y2UV0hh3wtchY
								q3gdbewA2yntZyk8RCcb4LTDCkjbTM3DBntiLX4X6XNuvkon5cQZzOzVkf6m4q+G7XMvXCgyRop7aweN4PvoGCO5L072x6mJ
								LeQqOssGsDTWMVJ8vXbgwFsi/SyFL9XJBsDAq5+fixiTa9/+f4v0Nzcfp5Ny4MLD99a+piarrWdW7h4U14z0nyLOrZ5bQ2y0
								OsZIDPAn++McxIB2eZ1pJQ6I9J8i3phSh8DdI/0sgdyo19DJBlinYEG24DVG+XULFt6pTQbeAlxmMIxrX3OSl/GpdWKFwBap
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;g id=&quot;shape1213-155&quot; v:mID=&quot;1213&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(4219.12,-5390.85) rotate(30)&quot;&gt;
			&lt;title&gt;Usman Zafar Paracha 1.1213&lt;/title&gt;
			&lt;desc&gt;Usman Zafar Paracha&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(31000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;153.992&quot; cy=&quot;8327.64&quot; width=&quot;307.99&quot; height=&quot;48.7186&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8303.28&quot; width=&quot;307.985&quot; height=&quot;48.7186&quot; class=&quot;st6&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8336.64&quot; class=&quot;st7&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph/&gt;&lt;v:tabList/&gt;Usman Zafar Paracha&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1214-158&quot; v:mID=&quot;1214&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(19.2,-6534)&quot;&gt;
			&lt;title&gt;Preterm Infant Brion&lt;/title&gt;
			&lt;desc&gt;Preterm Infant Brion&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Preterm Infant Brion)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Preterm Infant Brion)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(32000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;81&quot; cy=&quot;8302.5&quot; width=&quot;162&quot; height=&quot;99.0002&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8253&quot; width=&quot;162&quot; height=&quot;99.0002&quot; class=&quot;st8&quot;/&gt;
			&lt;text x=&quot;6.12&quot; y=&quot;8295&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;Preterm Infant &lt;tspan
						x=&quot;53.82&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;Brion&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1215-162&quot; v:mID=&quot;1215&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(19.2,-6264)&quot;&gt;
			&lt;title&gt;eGFR = (0.33 × Body height or length (cm)) / serum creatinine (mg/dL)&lt;/title&gt;
			&lt;desc&gt;eGFR = (0.33 × Body height or length (cm)) / serum creatinine...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(eGFR = (0.33 × Body height or length (cm)) / serum creatinine (mg/dL))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(eGFR = (0.33 × Body height or length (cm)) / serum creatinine (mg/dL))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(33000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;287.4&quot; cy=&quot;8316&quot; width=&quot;574.81&quot; height=&quot;72.0001&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8280&quot; width=&quot;574.8&quot; height=&quot;72.0001&quot; class=&quot;st10&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8308.15&quot; class=&quot;st11&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;eGFR = (0.33 × Body height or length &lt;tspan
						x=&quot;4&quot; dy=&quot;1.221em&quot; class=&quot;st9&quot;&gt;(cm)) / serum creatinine (mg/dL)&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1216-166&quot; v:mID=&quot;1216&quot; v:groupContext=&quot;shape&quot; v:layerMember=&quot;1&quot; transform=&quot;translate(100.2,-6534)&quot;&gt;
			&lt;title&gt;syntax 4&lt;/title&gt;
			&lt;desc&gt;syntax&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(34000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;91.9078&quot; cy=&quot;8444.23&quot; width=&quot;75.01&quot; height=&quot;26.0035&quot;/&gt;
			&lt;path d=&quot;M0 8352 C0 8365.5 -11.67 8394.04 38.47 8421.54 C90.28 8449.97 208.09 8477.3 207.45 8540.08 L207.42 8540.43&quot;
					class=&quot;st12&quot;/&gt;
			&lt;rect v:rectContext=&quot;textBkgnd&quot; x=&quot;72.2864&quot; y=&quot;8435.23&quot; width=&quot;39.2429&quot; height=&quot;18&quot; class=&quot;st14&quot;/&gt;
			&lt;text x=&quot;72.29&quot; y=&quot;8448.73&quot; class=&quot;st15&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;syntax&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1217-173&quot; v:mID=&quot;1217&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(217.2,-6462)&quot;&gt;
			&lt;title&gt;Designed specifically for preterm neonates using k = 0.33, reflecting their significantly reduced GFR relative to gestational age.&lt;/title&gt;
			&lt;desc&gt;Designed specifically for preterm neonates using k = 0.33, re...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;Scale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;AntiScale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(Designed specifically for preterm neonates using k = 0.33, reflecting their significantly reduced GFR relative to gestational age.)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot;
						v:val=&quot;VT4(Designed specifically for preterm neonates using k = 0.33, reflecting their significantly reduced GFR relative to gestational age.)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(35000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;189&quot; cy=&quot;8262&quot; width=&quot;378&quot; height=&quot;180&quot;/&gt;
			&lt;path d=&quot;M0 8244 L0 8172 L171 8172 L189 8172 L207 8172 L378 8172 L378 8244 L378 8262 L378 8280 L378 8352 L207 8352 L189
						 8352 L171 8352 L0 8352 L0 8280 L-36 8230.5 L0 8244 Z&quot; class=&quot;st16&quot;/&gt;
			&lt;text x=&quot;21.78&quot; y=&quot;8224.5&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;Designed specifically for preterm &lt;tspan
						x=&quot;15.4&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;neonates using k = 0.33, reflecting &lt;/tspan&gt;&lt;tspan x=&quot;33.81&quot; dy=&quot;1.2em&quot;
						class=&quot;st9&quot;&gt;their significantly reduced GFR &lt;/tspan&gt;&lt;tspan x=&quot;53.9&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;relative to gestational age.&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1218-179&quot; v:mID=&quot;1218&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-6102)&quot;&gt;
			&lt;title&gt;Page Break 4&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Page Break 4)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Page Break 4)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(35500):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8280&quot; width=&quot;576&quot; height=&quot;72.0001&quot; class=&quot;st17&quot;/&gt;
		&lt;/g&gt;
		&lt;g id=&quot;shape1219-181&quot; v:mID=&quot;1219&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(19.2,-5635.8)&quot;&gt;
			&lt;title&gt;Patreon and LinkedIn links.1219&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(37000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8293.5&quot; width=&quot;576&quot; height=&quot;58.5&quot; class=&quot;st1&quot;/&gt;
		&lt;/g&gt;
		&lt;a xlink:href=&quot;https://www.linkedin.com/in/usmanzafarparacha/&quot; xlink:title=&quot;LinkedIn Profile&quot;&gt;
			&lt;g id=&quot;group1220-183&quot; transform=&quot;translate(329.7,-5648.92)&quot; v:mID=&quot;1220&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(38000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;LinkedIn Profile.1220&lt;/title&gt;
				&lt;g id=&quot;shape1221-184&quot; v:mID=&quot;1221&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(29.25,-0.532647)&quot;&gt;
					&lt;title&gt;/usmanzafarparacha&lt;/title&gt;
					&lt;desc&gt;/usmanzafarparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;111.375&quot; cy=&quot;8337.91&quot; width=&quot;222.76&quot; height=&quot;28.1847&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.82&quot; width=&quot;222.75&quot; height=&quot;28.1847&quot; class=&quot;st2&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.41&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/usmanzafarparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape48-187&quot; v:mID=&quot;48&quot; v:groupContext=&quot;shape&quot;&gt;
					&lt;title&gt;LinkedIn&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;a xlink:href=&quot;https://www.patreon.com/uzparacha&quot; xlink:title=&quot;Patreon profile&quot;&gt;
			&lt;g id=&quot;group1222-191&quot; transform=&quot;translate(37.2,-5649.52)&quot; v:mID=&quot;1222&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(39000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;Patreon profile.1222&lt;/title&gt;
				&lt;g id=&quot;shape1223-192&quot; v:mID=&quot;1223&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(117,0)&quot;&gt;
					&lt;title&gt;/uzparacha&lt;/title&gt;
					&lt;desc&gt;/uzparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;65.25&quot; cy=&quot;8337.97&quot; width=&quot;130.51&quot; height=&quot;28.0568&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.94&quot; width=&quot;130.5&quot; height=&quot;28.0568&quot; class=&quot;st5&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.47&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/uzparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape49-195&quot; v:mID=&quot;49&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(0,-4.27832)&quot;&gt;
					&lt;title&gt;Patreon&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								iVBORw0KGgoAAAANSUhEUgAAASwAAAAyCAYAAADm1uYqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAA
								EnQAABJ0Ad5mH3gAABHLSURBVHhe7Z111C1VGcZfu1tRbFFUJGyxxe7EwMLGzqVLTESxFbsQDFRkKS5R7MBCbDGwxRbFBLt1
								/e6a0e3DPnu/O2bO3O/eZ63nn+87O86ZmWf2fmubbSyczcweb2ZfMbM/mdkPzexQM7uCfnArtmJNOJOZ3cjM9jOztw336i/N
								7I9m9m8z+42Z/cTMjjKzg8zsIWa2o5mdQjuaAbcysw8Mc/qrmX3HzJ5nZufVD3bGTmb2bjP7vZn9wczea2a7hB+4lpm9z8x+
								NvxoJfz18EU+Y2ZHmNk+wwU5azjADLiYmX07Mj/4DzPbSxsU4pJmdrCZfWO4gOvkl8zsZWa2jU5yBe5kZh8bHgz9bTz859CW
								35fr/A4ze5KZXd/MzqKDdcItzexDZnZCZD5TkHuE+/hAMzu/TqYRpzGz3c3s8OHB17E9/LGZPWcQrzmwf2QOI7kmV9YGncBz
								/NvImCeZ2cX5wO3N7F+RD7SSG+AjZnZPMzudzqozzjjcbDoH5fW0oRPbr/gR183jzOzsOlnBfSPtepLrjIDdxMxOqYNXYqp7
								0svjC14GKZzezB5qZj+IjFFLfhcWBlfVwTriLpFxlYjWdtqwA14RGWskLxP7auQfvckSlwen1w2teHhkzBhZmdQsrV8S6Wsp
								fKxOVvD1SJupyEsDsWnF0ZG+5+YjdVKFuKnzJVpLhIsV//l04A44NjJejMcMq8ee+GZknJG8oO3vkX9MxU+Y2UV0hh3wtchY
								q3gdbewA2yntZyk8RCcb4LTDCkjbTM3DBntiLX4X6XNuvkon5cQZzOzVkf6m4q+G7XMvXCgyRop7aweN4PvoGCO5L072x6mJ
								LeQqOssGsDTWMVJ8vXbgwFsi/SyFL9XJBsDAq5+fixiTa9/+f4v0Nzcfp5Ny4MLD99a+piarrWdW7h4U14z0nyLOrZ5bQ2y0
								OsZIDPAn++McxIB2eZ1pJQ6I9J8i3phSh8DdI/0sgdyo19DJBlinYEG24DVG+XULFt6pTQbeAlxmMIxrX3OSl/GpdWKFwBap
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;g id=&quot;shape1224-199&quot; v:mID=&quot;1224&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(4219.12,-4842.45) rotate(30)&quot;&gt;
			&lt;title&gt;Usman Zafar Paracha 1.1224&lt;/title&gt;
			&lt;desc&gt;Usman Zafar Paracha&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(40000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;153.992&quot; cy=&quot;8327.64&quot; width=&quot;307.99&quot; height=&quot;48.7186&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8303.28&quot; width=&quot;307.985&quot; height=&quot;48.7186&quot; class=&quot;st6&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8336.64&quot; class=&quot;st7&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph/&gt;&lt;v:tabList/&gt;Usman Zafar Paracha&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1225-202&quot; v:mID=&quot;1225&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(19.2,-5985.6)&quot;&gt;
			&lt;title&gt;Modern Bedside Schwartz (2009)&lt;/title&gt;
			&lt;desc&gt;Modern Bedside Schwartz (2009)&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Modern Bedside Schwartz (2009))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Modern Bedside Schwartz (2009))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(41000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;107.4&quot; cy=&quot;8302.5&quot; width=&quot;214.81&quot; height=&quot;99.0002&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8253&quot; width=&quot;214.8&quot; height=&quot;99.0002&quot; class=&quot;st8&quot;/&gt;
			&lt;text x=&quot;23.45&quot; y=&quot;8295&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;Modern Bedside &lt;tspan
						x=&quot;25.65&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;Schwartz (2009)&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1226-206&quot; v:mID=&quot;1226&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(19.2,-5706)&quot;&gt;
			&lt;title&gt;eGFR = (0.413 × Body height or length (cm)) / serum creatinine (mg/dL)&lt;/title&gt;
			&lt;desc&gt;eGFR = (0.413 × Body height or length (cm)) / serum creatinin...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(eGFR = (0.413 × Body height or length (cm)) / serum creatinine (mg/dL))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(eGFR = (0.413 × Body height or length (cm)) / serum creatinine (mg/dL))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(42000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;287.4&quot; cy=&quot;8307&quot; width=&quot;574.81&quot; height=&quot;90&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8262&quot; width=&quot;574.8&quot; height=&quot;90&quot; class=&quot;st10&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8299.5&quot; class=&quot;st11&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;eGFR = (0.413 × Body height or length &lt;tspan
						x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;(cm)) / serum creatinine (mg/dL)&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1227-210&quot; v:mID=&quot;1227&quot; v:groupContext=&quot;shape&quot; v:layerMember=&quot;1&quot; transform=&quot;translate(126.6,-5985.6)&quot;&gt;
			&lt;title&gt;syntax 5&lt;/title&gt;
			&lt;desc&gt;syntax&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(43000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;139.987&quot; cy=&quot;8379.29&quot; width=&quot;75.01&quot; height=&quot;26.0035&quot;/&gt;
			&lt;path d=&quot;M0 8352 C-0 8365.5 37.58 8365.5 75.15 8365.5 C127.58 8365.5 180 8365.5 180 8541.6&quot; class=&quot;st19&quot;/&gt;
			&lt;rect v:rectContext=&quot;textBkgnd&quot; x=&quot;120.366&quot; y=&quot;8370.29&quot; width=&quot;39.2429&quot; height=&quot;18&quot; class=&quot;st14&quot;/&gt;
			&lt;text x=&quot;120.37&quot; y=&quot;8383.79&quot; class=&quot;st15&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;syntax&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1228-218&quot; v:mID=&quot;1228&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(335.25,-5913.6)&quot;&gt;
			&lt;title&gt;A recalibrated version using k = 0.413, derived with IDMS-traceable creatinine assays, now the widely adopted clinical standard.&lt;/title&gt;
			&lt;desc&gt;A recalibrated version using k = 0.413, derived with IDMS-tra...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;Scale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;AntiScale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(A recalibrated version using k = 0.413, derived with IDMS-traceable creatinine assays, now the widely adopted clinical standard.)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot;
						v:val=&quot;VT4(A recalibrated version using k = 0.413, derived with IDMS-traceable creatinine assays, now the widely adopted clinical standard.)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(44000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;129.975&quot; cy=&quot;8262&quot; width=&quot;259.95&quot; height=&quot;180&quot;/&gt;
			&lt;path d=&quot;M0 8244 L0 8172 L111.97 8172 L129.97 8172 L147.97 8172 L259.95 8172 L259.95 8244 L259.95 8262 L259.95 8280 L259.95
						 8352 L147.97 8352 L129.97 8352 L111.97 8352 L0 8352 L0 8280 L-101.25 8230.5 L0 8244 Z&quot; class=&quot;st16&quot;/&gt;
			&lt;text x=&quot;18.48&quot; y=&quot;8194.5&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;A recalibrated version &lt;tspan
						x=&quot;9.93&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;using k = 0.413, derived &lt;/tspan&gt;&lt;tspan x=&quot;25.81&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;with IDMS&lt;/tspan&gt;-traceable &lt;tspan
						x=&quot;15.68&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;creatinine assays, now &lt;/tspan&gt;&lt;tspan x=&quot;31.54&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;the widely adopted &lt;/tspan&gt;&lt;tspan
						x=&quot;44.28&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;clinical standard.&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1229-226&quot; v:mID=&quot;1229&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-5553.6)&quot;&gt;
			&lt;title&gt;Page Break 5&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Page Break 5)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Page Break 5)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(45000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8280&quot; width=&quot;576&quot; height=&quot;72.0001&quot; class=&quot;st17&quot;/&gt;
		&lt;/g&gt;
		&lt;g id=&quot;shape1230-228&quot; v:mID=&quot;1230&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-5077.2)&quot;&gt;
			&lt;title&gt;Patreon and LinkedIn links.1230&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(46000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8293.5&quot; width=&quot;576&quot; height=&quot;58.5&quot; class=&quot;st1&quot;/&gt;
		&lt;/g&gt;
		&lt;a xlink:href=&quot;https://www.linkedin.com/in/usmanzafarparacha/&quot; xlink:title=&quot;LinkedIn Profile&quot;&gt;
			&lt;g id=&quot;group1231-230&quot; transform=&quot;translate(328.5,-5090.33)&quot; v:mID=&quot;1231&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(47000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;LinkedIn Profile.1231&lt;/title&gt;
				&lt;g id=&quot;shape1232-231&quot; v:mID=&quot;1232&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(29.25,-0.532647)&quot;&gt;
					&lt;title&gt;/usmanzafarparacha&lt;/title&gt;
					&lt;desc&gt;/usmanzafarparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;111.375&quot; cy=&quot;8337.91&quot; width=&quot;222.76&quot; height=&quot;28.1847&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.82&quot; width=&quot;222.75&quot; height=&quot;28.1847&quot; class=&quot;st2&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.41&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/usmanzafarparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape50-234&quot; v:mID=&quot;50&quot; v:groupContext=&quot;shape&quot;&gt;
					&lt;title&gt;LinkedIn&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;a xlink:href=&quot;https://www.patreon.com/uzparacha&quot; xlink:title=&quot;Patreon profile&quot;&gt;
			&lt;g id=&quot;group1233-238&quot; transform=&quot;translate(36,-5090.92)&quot; v:mID=&quot;1233&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(48000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;Patreon profile.1233&lt;/title&gt;
				&lt;g id=&quot;shape1234-239&quot; v:mID=&quot;1234&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(117,0)&quot;&gt;
					&lt;title&gt;/uzparacha&lt;/title&gt;
					&lt;desc&gt;/uzparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;65.25&quot; cy=&quot;8337.97&quot; width=&quot;130.51&quot; height=&quot;28.0568&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.94&quot; width=&quot;130.5&quot; height=&quot;28.0568&quot; class=&quot;st5&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.47&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/uzparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape51-242&quot; v:mID=&quot;51&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(0,-4.27832)&quot;&gt;
					&lt;title&gt;Patreon&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								iVBORw0KGgoAAAANSUhEUgAAASwAAAAyCAYAAADm1uYqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAA
								EnQAABJ0Ad5mH3gAABHLSURBVHhe7Z111C1VGcZfu1tRbFFUJGyxxe7EwMLGzqVLTESxFbsQDFRkKS5R7MBCbDGwxRbFBLt1
								/e6a0e3DPnu/O2bO3O/eZ63nn+87O86ZmWf2fmubbSyczcweb2ZfMbM/mdkPzexQM7uCfnArtmJNOJOZ3cjM9jOztw336i/N
								7I9m9m8z+42Z/cTMjjKzg8zsIWa2o5mdQjuaAbcysw8Mc/qrmX3HzJ5nZufVD3bGTmb2bjP7vZn9wczea2a7hB+4lpm9z8x+
								NvxoJfz18EU+Y2ZHmNk+wwU5azjADLiYmX07Mj/4DzPbSxsU4pJmdrCZfWO4gOvkl8zsZWa2jU5yBe5kZh8bHgz9bTz859CW
								35fr/A4ze5KZXd/MzqKDdcItzexDZnZCZD5TkHuE+/hAMzu/TqYRpzGz3c3s8OHB17E9/LGZPWcQrzmwf2QOI7kmV9YGncBz
								/NvImCeZ2cX5wO3N7F+RD7SSG+AjZnZPMzudzqozzjjcbDoH5fW0oRPbr/gR183jzOzsOlnBfSPtepLrjIDdxMxOqYNXYqp7
								0svjC14GKZzezB5qZj+IjFFLfhcWBlfVwTriLpFxlYjWdtqwA14RGWskLxP7auQfvckSlwen1w2teHhkzBhZmdQsrV8S6Wsp
								fKxOVvD1SJupyEsDsWnF0ZG+5+YjdVKFuKnzJVpLhIsV//l04A44NjJejMcMq8ee+GZknJG8oO3vkX9MxU+Y2UV0hh3wtchY
								q3gdbewA2yntZyk8RCcb4LTDCkjbTM3DBntiLX4X6XNuvkon5cQZzOzVkf6m4q+G7XMvXCgyRop7aweN4PvoGCO5L072x6mJ
								LeQqOssGsDTWMVJ8vXbgwFsi/SyFL9XJBsDAq5+fixiTa9/+f4v0Nzcfp5Ny4MLD99a+piarrWdW7h4U14z0nyLOrZ5bQ2y0
								OsZIDPAn++McxIB2eZ1pJQ6I9J8i3phSh8DdI/0sgdyo19DJBlinYEG24DVG+XULFt6pTQbeAlxmMIxrX3OSl/GpdWKFwBap
								/eaIDbMXugsWDwmdsp/ENnVi5DMecnHPqbMtBA8k4qd953g/7ciBpy/gQQqJ8D5AJymoESz6xUjM9Q3JNa/5/jUr2ppxehDz
								yMfN7Io6oQwQt59H+ishY/fYCvN7t6y0agQL3kw7qkQ3wcLFfPMVb0y8IcQ6PXD4HG5wbR9jzc0cYs9Inx5+SjtyYtvBqEyI
								hBLxYBvx2kHIdUwvEQdWjRjTdYyRt3aKfYlgMW9WvSnHCAZW3OrM4YMFnrzdtKMMvILF9os4pV0H0WBrUkvc6dj8SnEeM/tu
								ZG4pso16s5nde4gvwssdgrAKPNqECGHY1vY5sj2sRa1gEfLSIxqgi2AR5Fai2pdzGqoRtstq4wJ8NNKnlyzhpwIPNl4m74MH
								WdncIyMYpfAK1v21oRNXd3ohCW8pged3e5GZnUobzgyeifdE5raKxCxipC41SbAYeHukv1XkRULQZw1qBQsStN2KZsHiZisR
								qxHspYnU1f6Um2IrKnCJgjd8jM/VDicAb1AdN0a+B27w3vAIVqv9gZVebhXA9+N6eZETrCMr78neeERkbqtI0GhrhDjbLu/W
								E28bO4JStAgWgoLjoQXNgnVb7bEAiBaR0dpnSAIyawyFrPq0rxJy4XvHkMSQ+/6Qt+cU8AgWN2grdnaIzMO0UQK5vqYQ91Jc
								YDDO69xixP7ZS2AJO/DGSb1RGzvQIljwrdphIZoFy2MrSYG4J+1TiQ2iBGwFenhksAVNDWwsOq7ydtqoEzyCFbNJ1oDcL+07
								ZCpeTJETLLX5rAOIgc4rxhZ70ioQhf+tyFhKVrZs20vQKljwBtppAZoEa9MHGoFNJmeEvo82yqDHjwpbt0MekHOl4yp5W0+B
								nGCxQugFUlC0/5Cf0wYJpASr55xrwfbWE5D7zs42yRA7OFd4JA6XoMezhV2zdvfSJFhsm3oAj5L2HZJE2hJ4AjlxEee8lbiS
								a4MbvbhgZNyQvAVrtsQe5ASr1/UFrFa1/5B40rxICRY39Lrxysi8lBjYW21WOXhS0ri/ShxbPQQLPlo7dmIRgvWmSN8hS5bN
								5zKzv0T6GMmXGu0yuIcp06GfCfkY6b83SFHRMUPi4p4KcwoWBmHtP+SmPDAnUoKFN3WdIPXGEy/1KG04ATCNpHLvRr5YGybQ
								S7D4jWqqXjQJFuVmeuD9kb5DlqywMN5q+5Bq3MVT8ufI50ayfJ0SuLB1zJBTPoA5wWIV0AsE42r/IT+rDRJICRZstau24I6R
								+Sjx0CFsc4BQGB1fyYvJGwLSS7BgjdG/SbB6LL/xjlBIT/sOifvfC9I9tP1IVJ2HVPG6yGdDXk0bdMSSBQs7jPdGzgGjuvYf
								ssR7lBOsO2uDGZH7nvAF2mhCIIyph3wkOYIe9BQstqPX1gEySH2XrGBhAzqz9lgIct20X6U3GZoAOm0bEmGKgUJz+tmQZNdP
								hSULFuyR08nSn5tJ+w5ZUq4lJ1i49edawShyDiTI/TYn3hCZg/IJ2mgFegoW/HKhjbZJsGBLnA5vb0rKaJ8hmaD3C1GZQNuH
								vKE2GJDzVK5amfXA0gXrGdqoEFy7XLQ3b1qKIHqREyzImHNvDUnf0XkoqSg6d9jF3SLzUFJR2IPeggXxIHvRLFjv0h6dQCQo
								46v9Kb2rG/IVU1/mp5ntDeVltU1IbAFTYOmChVhfShs6gQOE+0P7VFIXvAQewYIk3lOhEpPCHSpIjNI5dPAEyKXVOSg/qY1m
								AOW7dR7KH2mjFfAKFuYE8gdTz+RIgsO9FVxT/bkEC5Z6PHgAiP/QfpS8eck79GCPSPuQFMdPgSRTbROS3McpsHTBgqw+qcPv
								BQ/IU5xlozErXEk7yMArWD3IWNicPKt8TypOqj7ZVGBxkPvNuA6ebbRHsD4dpOAQb0UIQy4u7TUyzip0ESxIFUnsUbELyw9G
								MB11owjG9FYxZe/tBW9pbR/SI3zsp7XdyNJ8Ny82B8EaiYscO+CzzexZAcm7pAIn27CcA0VZk7OZe/imoMfG8/xIOyVCvg54
								cgw993dOsPC4szVW8L31syF5vjx16LsJ1kgm/D0z+8JQmpgUGWKJ9HM5EjJxbp3tCqDmqSBQ6tJ7QMyVtg1JzldvbE6C1ZuE
								s8RecDmsQ7A84S2ItrZTlthresJTJtxz3F1OsFZteSnNw4lS+vmQn3dE/ncXrB5E4EpCCZ4c6SNk7iCGEaTApISPrVHKDlaD
								LVWwPtxgfF6HYFG6O4dcADTkxJl1wFPOyRNikBOsVA07nF76eWWulNHiBItBS+wlKDIrOu1nJEvNkoMtKJejfYTsXQlgSxQs
								ViI1xfBGrEOwPI4BT8IzHrt1IOeNh5w/mkNOsHJOMg6H1TYhCarFWRMDMZvjgbIxzi5YHHvkWZaGoPKi9hMSu1QJMBBqHyFL
								Ahw92JIEC6GhOkUr5hYsroFnxe/JISS/bx3Ibcegx87bKlgsHlKiA/HsxpA7sWc2wSI2BS9eTRBq7q1GqdkS5HLemKvXtubB
								liJYGH1LS5msQqlgUbUAhwE2khKybaVyqbfoHA4EHVv5VG00E34RmYvSc7BGq2CBJ0bahcSjGNue4vjQz4acXLDYj5bcEApO
								Nc4Z9EvLZ9w10oey51tySxAsHpbaWK4YvIJFiWyiymsM+zXw1DZbtXqYEnz/XFgB//ds03sIFjGTuTr35LHuPph8CI2gxFTu
								We8uWFRRoO4RJyVzuCMTbwEHO+gYSkSxpEY2RkPtQ1m6zUxhSxCs3nYbj2BRgSDnceqN3MMMsSXNDVLbdB5K7MAe5L6jR7DA
								LSJtY+T+T1VfCVkkWIQz4CXhZBzKJlNVEF53sEuRT9b7BiLDX+cRI4b0i2pjAeJJkXxvHfjSo55WYXMQLN6GBAdzPYm1e5Dz
								cAmI17VX1dIROcGi7HTve82DXG0zyEPlWcn0RC5cBx6hjVagl2ABxtT2LXQLFkd3TV3oTrFTZB4psuRlZURwIwX+RlIvnbPm
								PDWMQpJW1ANLFyyOyoodK8+RTR43PuSoq57ICRZHra0LKY/1yJYSwTXwCIO37ltPwcJmlirtVEqXYFHOxRPS3xv7R+YyJ9lq
								tm5pwdIFK3UAJisFznDUNsqS8kAe5ASrJP+vNzi/UeejLHmoW+Gx80JvRZSeggWeFumjli7BmuOgBgUPisfrMTV71F1asmCR
								QpU7/JK8wZybmmyH2iDRGFKCNWWFVg+wzeqclHgt5xJVT34jic/eLXRvweK+4CRx7aeGWcHihu55I3rBKTI6l3WQWvStWLJg
								eaK7Qa7KK3y5NmpASrB6FJVsAS9Tgh91XkpWFlODnQ9VSnRsJbmhXvQWLNDrec4K1gk68kzwlCyZgxiUS6LoY1iyYHlruvN2
								zmUI4MzAM9QDKcGiQsS6QUyhzkvJStCTbNwCapnpuEruYVbJXkwhWCBXJt3DrGCx1J8beBu91R7m4D46wUJsBMECZOjnHBe8
								4HqcFJMSrJ5lnWuBt5AAY52b8ugJPYak2Xiek9LMjakE69LO3yzFRQrW3pF5rJPfL9j/x7BRBAvsFelDyYGqraccpwQLcvOv
								G2yBdV4xHtx4/8TAislTTgZxLzniC0wlWICtqfZXwsUJFje650RbSHY6x4OR/c2DVEJEEZe91+XaUqN7IwkW14dSu9qPsjWf
								MCdYraveHiCB12PLgtR9yzk3vKAGv8duBWuKCU4pWKTmpUqV57g4weJkD52DkpvkxtqwEqQMHRkZQ4m41WIjCRZgO5SrNIr9
								ZkdtWICcYJ00g33IA88RWyMJgm75TVilPdjhsR3Js1vjqZxSsACed+3Ty8UJFmVUdQ464V21USNQfSKndayQPIDEu9RgowkW
								2DPSl5L4vdpVRU6wIAGcvbIRWpBLzg+JDYetpCcJeQT2utsMBTO1v1VclVzswdSCxSo958BZxUUJFsJB/IrOIWTJgasl2MGR
								PEpKUg02omCBwyP9KXN19lfBI1gQDxjzwCzAqntMF6vhboNHuNT+RlrSFyNzSxGPKpU7KUyJQGCTYjXESxGnBUJMkv4BQ2Ve
								bZ9jyZFqiqkFC5DF4nEYKBclWERL6/gh2QqWJDmXAuOojhmSpO4abFTB4sEijkv7DImg1KSpeAVrCuJkSUX/x0Da2nGRvtbB
								2pfEiDkEC3Dwh/ad46IE66jI+CFbL0QOvNV0TOXO2siBjSpYgKOytE8lRtbS5Oh1ChbEGVNqb6L4nKeu+pTEC1e6QlTMJVjk
								r3o8nSEXI1hUWshVUWAZOTU4zELHDbmvNnBgIwsWoICi9qukSkYJ1i1YcD+dlAMc7Fprn2khv1evwy/mEizgsYWGPJ5GKdsN
								OUBzgOPBdOyQVIecA7nyyVSCKEVONAjGnAoURks9/LjHW4F7P2dnIYCyBDkv5Bz0nqOnwEhO1dHUc9WTPKOe47O8yB0kQb3+
								XmA1SNVXHWMVqbqSjOngwMQ5kBMs3LlzAFtE6gEnBKIGuOG1r5GU9p0SqcRTPE89kEsIxihdgnWsUpQkFbeAGnGeShe15D5l
								C1hTdjwFAk11rJA1u4wUth+2ejpOjJtOx0qVy5irPjX2Ah17JII6ZwJ26uw5DhWtAekR2tdISkhPCTxNOuZIAm974aBI/yOp
								DloCDh5JvTimJgUNa8NYQhA7RRngkpCEHAmNYFtWEhpRAlaIqUVMr7r9IagIk1uRsh3cdE3IEYtF7BLnUhN4VotYPAs3LXvq
								OUExuli0Pfa82jw5UklOjPTJRZi6MCLBsbFSPZzg3POwDV4qbP10HG7+mnE43p5y1pgD8MDNQWrEU2Wh1EngAZVcqfceuxY5
								Yt/FS024wtT3C9hjhU35UP1gR9wrUSoZb/T/1fMiahjBwKXLUVz8sHP8MCFQdgyHZHWzTaKKoufopSmwzZDWcOywLX6hmW2r
								HyoEonVI8BvzlsSzNAe2G8I2eAkxNqsuksx7YyxDzcOF6B84/JZb8T9gt9llSF8iiJQSRlTKRTB5gXF9iIo/bKjGQHXV3hVd
								PeB8TuxL1NI6ZtiOYROdEsSjUemXKriMy33Eaez//f7/AS4yCq8m6z2NAAAAAElFTkSuQmCC&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;g id=&quot;shape1235-246&quot; v:mID=&quot;1235&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(4217.92,-4283.85) rotate(30)&quot;&gt;
			&lt;title&gt;Usman Zafar Paracha 1.1235&lt;/title&gt;
			&lt;desc&gt;Usman Zafar Paracha&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(49000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;153.992&quot; cy=&quot;8327.64&quot; width=&quot;307.99&quot; height=&quot;48.7186&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8303.28&quot; width=&quot;307.985&quot; height=&quot;48.7186&quot; class=&quot;st6&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8336.64&quot; class=&quot;st7&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph/&gt;&lt;v:tabList/&gt;Usman Zafar Paracha&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1236-249&quot; v:mID=&quot;1236&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-5427)&quot;&gt;
			&lt;title&gt;Counahan-Barratt Equation&lt;/title&gt;
			&lt;desc&gt;Counahan-Barratt Equation&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Counahan-Barratt Equation)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Counahan-Barratt Equation)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(50000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;81&quot; cy=&quot;8302.5&quot; width=&quot;162&quot; height=&quot;99.0002&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8253&quot; width=&quot;162&quot; height=&quot;99.0002&quot; class=&quot;st8&quot;/&gt;
			&lt;text x=&quot;25.67&quot; y=&quot;8280&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;Counahan-&lt;tspan
						x=&quot;45.14&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;Barratt &lt;/tspan&gt;&lt;tspan x=&quot;35.56&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;Equation&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1237-254&quot; v:mID=&quot;1237&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-5157)&quot;&gt;
			&lt;title&gt;eGFR = (0.43 × Body height or length (cm)) / serum creatinine (mg/dL)&lt;/title&gt;
			&lt;desc&gt;eGFR = (0.43 × Body height or length (cm)) / serum creatinine...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(eGFR = (0.43 × Body height or length (cm)) / serum creatinine (mg/dL))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(eGFR = (0.43 × Body height or length (cm)) / serum creatinine (mg/dL))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(51000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;288&quot; cy=&quot;8295.75&quot; width=&quot;576&quot; height=&quot;112.5&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8239.5&quot; width=&quot;576&quot; height=&quot;112.5&quot; class=&quot;st10&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8287.9&quot; class=&quot;st11&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;eGFR = (0.43 × Body height or length &lt;tspan
						x=&quot;4&quot; dy=&quot;1.221em&quot; class=&quot;st9&quot;&gt;(cm)) / serum creatinine (mg/dL)&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1238-258&quot; v:mID=&quot;1238&quot; v:groupContext=&quot;shape&quot; v:layerMember=&quot;1&quot; transform=&quot;translate(99,-5427)&quot;&gt;
			&lt;title&gt;syntax 6&lt;/title&gt;
			&lt;desc&gt;syntax&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(52000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;88.2588&quot; cy=&quot;8428.77&quot; width=&quot;75.01&quot; height=&quot;26.0035&quot;/&gt;
			&lt;path d=&quot;M0 8352 C0 8365.5 -7.56 8392.31 39.07 8412.98 C87.29 8434.36 193.46 8449.17 205.82 8499.59 L205.86 8499.95&quot;
					class=&quot;st12&quot;/&gt;
			&lt;rect v:rectContext=&quot;textBkgnd&quot; x=&quot;68.6374&quot; y=&quot;8419.77&quot; width=&quot;39.2429&quot; height=&quot;18&quot; class=&quot;st14&quot;/&gt;
			&lt;text x=&quot;68.64&quot; y=&quot;8433.27&quot; class=&quot;st15&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;syntax&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1239-265&quot; v:mID=&quot;1239&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(216,-5355)&quot;&gt;
			&lt;title&gt;A British-derived formula using k = 0.43 based on plasma creatinine measured against chromogen methods in children aged 1–14.&lt;/title&gt;
			&lt;desc&gt;A British-derived formula using k = 0.43 based on plasma crea...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;Scale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;AntiScale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(A British-derived formula using k = 0.43 based on plasma creatinine measured against chromogen methods in children aged 1–14.)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot;
						v:val=&quot;VT4(A British-derived formula using k = 0.43 based on plasma creatinine measured against chromogen methods in children aged 1–14.)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(53000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;189&quot; cy=&quot;8262&quot; width=&quot;378&quot; height=&quot;180&quot;/&gt;
			&lt;path d=&quot;M0 8244 L0 8172 L171 8172 L189 8172 L207 8172 L378 8172 L378 8244 L378 8262 L378 8280 L378 8352 L207 8352 L189
						 8352 L171 8352 L0 8352 L0 8280 L-36 8230.5 L0 8244 Z&quot; class=&quot;st16&quot;/&gt;
			&lt;text x=&quot;13.97&quot; y=&quot;8224.5&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;A British-derived formula using k = &lt;tspan
						x=&quot;24.73&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;0.43 based on plasma creatinine &lt;/tspan&gt;&lt;tspan x=&quot;38.13&quot; dy=&quot;1.2em&quot;
						class=&quot;st9&quot;&gt;measured against chromogen &lt;/tspan&gt;&lt;tspan x=&quot;28.91&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;methods in children aged &lt;/tspan&gt;1–14.&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1240-271&quot; v:mID=&quot;1240&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(16.8,-4995)&quot;&gt;
			&lt;title&gt;Page Break 6&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Page Break 6)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Page Break 6)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(54000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8280&quot; width=&quot;576&quot; height=&quot;72.0001&quot; class=&quot;st17&quot;/&gt;
		&lt;/g&gt;
		&lt;g id=&quot;shape1241-273&quot; v:mID=&quot;1241&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(19.2,-4528.2)&quot;&gt;
			&lt;title&gt;Patreon and LinkedIn links.1241&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(55000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8293.5&quot; width=&quot;576&quot; height=&quot;58.5&quot; class=&quot;st1&quot;/&gt;
		&lt;/g&gt;
		&lt;a xlink:href=&quot;https://www.linkedin.com/in/usmanzafarparacha/&quot; xlink:title=&quot;LinkedIn Profile&quot;&gt;
			&lt;g id=&quot;group1242-275&quot; transform=&quot;translate(329.7,-4541.32)&quot; v:mID=&quot;1242&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(56000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;LinkedIn Profile.1242&lt;/title&gt;
				&lt;g id=&quot;shape1243-276&quot; v:mID=&quot;1243&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(29.25,-0.532647)&quot;&gt;
					&lt;title&gt;/usmanzafarparacha&lt;/title&gt;
					&lt;desc&gt;/usmanzafarparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;111.375&quot; cy=&quot;8337.91&quot; width=&quot;222.76&quot; height=&quot;28.1847&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.82&quot; width=&quot;222.75&quot; height=&quot;28.1847&quot; class=&quot;st2&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.41&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/usmanzafarparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape52-279&quot; v:mID=&quot;52&quot; v:groupContext=&quot;shape&quot;&gt;
					&lt;title&gt;LinkedIn&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;a xlink:href=&quot;https://www.patreon.com/uzparacha&quot; xlink:title=&quot;Patreon profile&quot;&gt;
			&lt;g id=&quot;group1244-283&quot; transform=&quot;translate(37.2,-4541.92)&quot; v:mID=&quot;1244&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(57000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;Patreon profile.1244&lt;/title&gt;
				&lt;g id=&quot;shape1245-284&quot; v:mID=&quot;1245&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(117,0)&quot;&gt;
					&lt;title&gt;/uzparacha&lt;/title&gt;
					&lt;desc&gt;/uzparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;65.25&quot; cy=&quot;8337.97&quot; width=&quot;130.51&quot; height=&quot;28.0568&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.94&quot; width=&quot;130.5&quot; height=&quot;28.0568&quot; class=&quot;st5&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.47&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/uzparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape53-287&quot; v:mID=&quot;53&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(0,-4.27832)&quot;&gt;
					&lt;title&gt;Patreon&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								iVBORw0KGgoAAAANSUhEUgAAASwAAAAyCAYAAADm1uYqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAA
								EnQAABJ0Ad5mH3gAABHLSURBVHhe7Z111C1VGcZfu1tRbFFUJGyxxe7EwMLGzqVLTESxFbsQDFRkKS5R7MBCbDGwxRbFBLt1
								/e6a0e3DPnu/O2bO3O/eZ63nn+87O86ZmWf2fmubbSyczcweb2ZfMbM/mdkPzexQM7uCfnArtmJNOJOZ3cjM9jOztw336i/N
								7I9m9m8z+42Z/cTMjjKzg8zsIWa2o5mdQjuaAbcysw8Mc/qrmX3HzJ5nZufVD3bGTmb2bjP7vZn9wczea2a7hB+4lpm9z8x+
								NvxoJfz18EU+Y2ZHmNk+wwU5azjADLiYmX07Mj/4DzPbSxsU4pJmdrCZfWO4gOvkl8zsZWa2jU5yBe5kZh8bHgz9bTz859CW
								35fr/A4ze5KZXd/MzqKDdcItzexDZnZCZD5TkHuE+/hAMzu/TqYRpzGz3c3s8OHB17E9/LGZPWcQrzmwf2QOI7kmV9YGncBz
								/NvImCeZ2cX5wO3N7F+RD7SSG+AjZnZPMzudzqozzjjcbDoH5fW0oRPbr/gR183jzOzsOlnBfSPtepLrjIDdxMxOqYNXYqp7
								0svjC14GKZzezB5qZj+IjFFLfhcWBlfVwTriLpFxlYjWdtqwA14RGWskLxP7auQfvckSlwen1w2teHhkzBhZmdQsrV8S6Wsp
								fKxOVvD1SJupyEsDsWnF0ZG+5+YjdVKFuKnzJVpLhIsV//l04A44NjJejMcMq8ee+GZknJG8oO3vkX9MxU+Y2UV0hh3wtchY
								q3gdbewA2yntZyk8RCcb4LTDCkjbTM3DBntiLX4X6XNuvkon5cQZzOzVkf6m4q+G7XMvXCgyRop7aweN4PvoGCO5L072x6mJ
								LeQqOssGsDTWMVJ8vXbgwFsi/SyFL9XJBsDAq5+fixiTa9/+f4v0Nzcfp5Ny4MLD99a+piarrWdW7h4U14z0nyLOrZ5bQ2y0
								OsZIDPAn++McxIB2eZ1pJQ6I9J8i3phSh8DdI/0sgdyo19DJBlinYEG24DVG+XULFt6pTQbeAlxmMIxrX3OSl/GpdWKFwBap
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;g id=&quot;shape1246-291&quot; v:mID=&quot;1246&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(4217.92,-3725.85) rotate(30)&quot;&gt;
			&lt;title&gt;Usman Zafar Paracha 1.1246&lt;/title&gt;
			&lt;desc&gt;Usman Zafar Paracha&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(58000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;153.992&quot; cy=&quot;8327.64&quot; width=&quot;307.99&quot; height=&quot;48.7186&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8303.28&quot; width=&quot;307.985&quot; height=&quot;48.7186&quot; class=&quot;st6&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8336.64&quot; class=&quot;st7&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph/&gt;&lt;v:tabList/&gt;Usman Zafar Paracha&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1247-294&quot; v:mID=&quot;1247&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-4869)&quot;&gt;
			&lt;title&gt;Schwartz-Lyon Variation&lt;/title&gt;
			&lt;desc&gt;Schwartz-Lyon Variation&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Schwartz-Lyon Variation)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Schwartz-Lyon Variation)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(59000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;81&quot; cy=&quot;8302.5&quot; width=&quot;162&quot; height=&quot;99.0002&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8253&quot; width=&quot;162&quot; height=&quot;99.0002&quot; class=&quot;st8&quot;/&gt;
			&lt;text x=&quot;7.1&quot; y=&quot;8295&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;Schwartz-Lyon &lt;tspan
						x=&quot;34.49&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;Variation&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1248-298&quot; v:mID=&quot;1248&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-4599)&quot;&gt;
			&lt;title&gt;eGFR = (0.373 × Body height or length (cm)) / serum creatinine (mg/dL)&lt;/title&gt;
			&lt;desc&gt;eGFR = (0.373 × Body height or length (cm)) / serum creatinin...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(eGFR = (0.373 × Body height or length (cm)) / serum creatinine (mg/dL))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(eGFR = (0.373 × Body height or length (cm)) / serum creatinine (mg/dL))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(60000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;287.4&quot; cy=&quot;8310.37&quot; width=&quot;574.81&quot; height=&quot;83.2501&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8268.75&quot; width=&quot;574.8&quot; height=&quot;83.2501&quot; class=&quot;st10&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8302.88&quot; class=&quot;st11&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;eGFR = (0.373 × Body height or length &lt;tspan
						x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;(cm)) / serum creatinine (mg/dL)&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1249-302&quot; v:mID=&quot;1249&quot; v:groupContext=&quot;shape&quot; v:layerMember=&quot;1&quot; transform=&quot;translate(99,-4869)&quot;&gt;
			&lt;title&gt;syntax 7&lt;/title&gt;
			&lt;desc&gt;syntax&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(61000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;151.622&quot; cy=&quot;8373.23&quot; width=&quot;75.01&quot; height=&quot;26.0035&quot;/&gt;
			&lt;path d=&quot;M0 8352 C0 8365.5 44.81 8365.5 89.63 8365.5 C148.01 8365.5 206.4 8365.5 206.4 8538.75&quot; class=&quot;st19&quot;/&gt;
			&lt;rect v:rectContext=&quot;textBkgnd&quot; x=&quot;132&quot; y=&quot;8364.23&quot; width=&quot;39.2429&quot; height=&quot;18&quot; class=&quot;st14&quot;/&gt;
			&lt;text x=&quot;132&quot; y=&quot;8377.73&quot; class=&quot;st15&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;syntax&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1250-309&quot; v:mID=&quot;1250&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(306,-4770)&quot;&gt;
			&lt;title&gt;A sex-differentiated adaptation of the Schwartz formula using age- and sex-specific k values (0.419 male / 0.373 female) for greater precision.&lt;/title&gt;
			&lt;desc&gt;A sex-differentiated adaptation of the Schwartz formula using...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;Scale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;AntiScale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(A sex-differentiated adaptation of the Schwartz formula using age- and sex-specific k values (0.419 male / 0.373 female) for greater precision.)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot;
						v:val=&quot;VT4(A sex-differentiated adaptation of the Schwartz formula using age- and sex-specific k values (0.419 male / 0.373 female) for greater precision.)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(62000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;144&quot; cy=&quot;8248.5&quot; width=&quot;288&quot; height=&quot;207&quot;/&gt;
			&lt;path d=&quot;M0 8230.5 L0 8145 L126 8145 L144 8145 L162 8145 L288 8145 L288 8230.5 L288 8248.5 L288 8266.5 L288 8352 L162
						 8352 L144 8352 L126 8352 L0 8352 L0 8266.5 L-126 8203.5 L0 8230.5 Z&quot; class=&quot;st16&quot;/&gt;
			&lt;text x=&quot;43.15&quot; y=&quot;8181&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;A sex-differentiated &lt;tspan
						x=&quot;6.64&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;adaptation of the Schwartz &lt;/tspan&gt;&lt;tspan x=&quot;4.36&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;formula using age&lt;/tspan&gt;- and sex-&lt;tspan
						x=&quot;27.58&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;specific k values (0.419 &lt;/tspan&gt;&lt;tspan x=&quot;20.66&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;male / 0.373 female) for &lt;/tspan&gt;&lt;tspan
						x=&quot;54.59&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;greater precision.&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1251-317&quot; v:mID=&quot;1251&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-4446)&quot;&gt;
			&lt;title&gt;Page Break 7&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Page Break 7)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Page Break 7)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(63000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8280&quot; width=&quot;576&quot; height=&quot;72.0001&quot; class=&quot;st17&quot;/&gt;
		&lt;/g&gt;
		&lt;g id=&quot;shape1252-319&quot; v:mID=&quot;1252&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-3970.2)&quot;&gt;
			&lt;title&gt;Patreon and LinkedIn links.1252&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(64000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8293.5&quot; width=&quot;576&quot; height=&quot;58.5&quot; class=&quot;st1&quot;/&gt;
		&lt;/g&gt;
		&lt;a xlink:href=&quot;https://www.linkedin.com/in/usmanzafarparacha/&quot; xlink:title=&quot;LinkedIn Profile&quot;&gt;
			&lt;g id=&quot;group1253-321&quot; transform=&quot;translate(328.5,-3983.32)&quot; v:mID=&quot;1253&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(65000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;LinkedIn Profile.1253&lt;/title&gt;
				&lt;g id=&quot;shape1254-322&quot; v:mID=&quot;1254&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(29.25,-0.532647)&quot;&gt;
					&lt;title&gt;/usmanzafarparacha&lt;/title&gt;
					&lt;desc&gt;/usmanzafarparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;111.375&quot; cy=&quot;8337.91&quot; width=&quot;222.76&quot; height=&quot;28.1847&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.82&quot; width=&quot;222.75&quot; height=&quot;28.1847&quot; class=&quot;st2&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.41&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/usmanzafarparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape54-325&quot; v:mID=&quot;54&quot; v:groupContext=&quot;shape&quot;&gt;
					&lt;title&gt;LinkedIn&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;a xlink:href=&quot;https://www.patreon.com/uzparacha&quot; xlink:title=&quot;Patreon profile&quot;&gt;
			&lt;g id=&quot;group1255-329&quot; transform=&quot;translate(36,-3983.92)&quot; v:mID=&quot;1255&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(66000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;Patreon profile.1255&lt;/title&gt;
				&lt;g id=&quot;shape1256-330&quot; v:mID=&quot;1256&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(117,0)&quot;&gt;
					&lt;title&gt;/uzparacha&lt;/title&gt;
					&lt;desc&gt;/uzparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;65.25&quot; cy=&quot;8337.97&quot; width=&quot;130.51&quot; height=&quot;28.0568&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.94&quot; width=&quot;130.5&quot; height=&quot;28.0568&quot; class=&quot;st5&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.47&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/uzparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape55-333&quot; v:mID=&quot;55&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(0,-4.27832)&quot;&gt;
					&lt;title&gt;Patreon&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								iVBORw0KGgoAAAANSUhEUgAAASwAAAAyCAYAAADm1uYqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAA
								EnQAABJ0Ad5mH3gAABHLSURBVHhe7Z111C1VGcZfu1tRbFFUJGyxxe7EwMLGzqVLTESxFbsQDFRkKS5R7MBCbDGwxRbFBLt1
								/e6a0e3DPnu/O2bO3O/eZ63nn+87O86ZmWf2fmubbSyczcweb2ZfMbM/mdkPzexQM7uCfnArtmJNOJOZ3cjM9jOztw336i/N
								7I9m9m8z+42Z/cTMjjKzg8zsIWa2o5mdQjuaAbcysw8Mc/qrmX3HzJ5nZufVD3bGTmb2bjP7vZn9wczea2a7hB+4lpm9z8x+
								NvxoJfz18EU+Y2ZHmNk+wwU5azjADLiYmX07Mj/4DzPbSxsU4pJmdrCZfWO4gOvkl8zsZWa2jU5yBe5kZh8bHgz9bTz859CW
								35fr/A4ze5KZXd/MzqKDdcItzexDZnZCZD5TkHuE+/hAMzu/TqYRpzGz3c3s8OHB17E9/LGZPWcQrzmwf2QOI7kmV9YGncBz
								/NvImCeZ2cX5wO3N7F+RD7SSG+AjZnZPMzudzqozzjjcbDoH5fW0oRPbr/gR183jzOzsOlnBfSPtepLrjIDdxMxOqYNXYqp7
								0svjC14GKZzezB5qZj+IjFFLfhcWBlfVwTriLpFxlYjWdtqwA14RGWskLxP7auQfvckSlwen1w2teHhkzBhZmdQsrV8S6Wsp
								fKxOVvD1SJupyEsDsWnF0ZG+5+YjdVKFuKnzJVpLhIsV//l04A44NjJejMcMq8ee+GZknJG8oO3vkX9MxU+Y2UV0hh3wtchY
								q3gdbewA2yntZyk8RCcb4LTDCkjbTM3DBntiLX4X6XNuvkon5cQZzOzVkf6m4q+G7XMvXCgyRop7aweN4PvoGCO5L072x6mJ
								LeQqOssGsDTWMVJ8vXbgwFsi/SyFL9XJBsDAq5+fixiTa9/+f4v0Nzcfp5Ny4MLD99a+piarrWdW7h4U14z0nyLOrZ5bQ2y0
								OsZIDPAn++McxIB2eZ1pJQ6I9J8i3phSh8DdI/0sgdyo19DJBlinYEG24DVG+XULFt6pTQbeAlxmMIxrX3OSl/GpdWKFwBap
								/eaIDbMXugsWDwmdsp/ENnVi5DMecnHPqbMtBA8k4qd953g/7ciBpy/gQQqJ8D5AJymoESz6xUjM9Q3JNa/5/jUr2ppxehDz
								yMfN7Io6oQwQt59H+ishY/fYCvN7t6y0agQL3kw7qkQ3wcLFfPMVb0y8IcQ6PXD4HG5wbR9jzc0cYs9Inx5+SjtyYtvBqEyI
								hBLxYBvx2kHIdUwvEQdWjRjTdYyRt3aKfYlgMW9WvSnHCAZW3OrM4YMFnrzdtKMMvILF9os4pV0H0WBrUkvc6dj8SnEeM/tu
								ZG4pso16s5nde4gvwssdgrAKPNqECGHY1vY5sj2sRa1gEfLSIxqgi2AR5Fai2pdzGqoRtstq4wJ8NNKnlyzhpwIPNl4m74MH
								WdncIyMYpfAK1v21oRNXd3ohCW8pged3e5GZnUobzgyeifdE5raKxCxipC41SbAYeHukv1XkRULQZw1qBQsStN2KZsHiZisR
								qxHspYnU1f6Um2IrKnCJgjd8jM/VDicAb1AdN0a+B27w3vAIVqv9gZVebhXA9+N6eZETrCMr78neeERkbqtI0GhrhDjbLu/W
								E28bO4JStAgWgoLjoQXNgnVb7bEAiBaR0dpnSAIyawyFrPq0rxJy4XvHkMSQ+/6Qt+cU8AgWN2grdnaIzMO0UQK5vqYQ91Jc
								YDDO69xixP7ZS2AJO/DGSb1RGzvQIljwrdphIZoFy2MrSYG4J+1TiQ2iBGwFenhksAVNDWwsOq7ydtqoEzyCFbNJ1oDcL+07
								ZCpeTJETLLX5rAOIgc4rxhZ70ioQhf+tyFhKVrZs20vQKljwBtppAZoEa9MHGoFNJmeEvo82yqDHjwpbt0MekHOl4yp5W0+B
								nGCxQugFUlC0/5Cf0wYJpASr55xrwfbWE5D7zs42yRA7OFd4JA6XoMezhV2zdvfSJFhsm3oAj5L2HZJE2hJ4AjlxEee8lbiS
								a4MbvbhgZNyQvAVrtsQe5ASr1/UFrFa1/5B40rxICRY39Lrxysi8lBjYW21WOXhS0ri/ShxbPQQLPlo7dmIRgvWmSN8hS5bN
								5zKzv0T6GMmXGu0yuIcp06GfCfkY6b83SFHRMUPi4p4KcwoWBmHtP+SmPDAnUoKFN3WdIPXGEy/1KG04ATCNpHLvRr5YGybQ
								S7D4jWqqXjQJFuVmeuD9kb5DlqywMN5q+5Bq3MVT8ufI50ayfJ0SuLB1zJBTPoA5wWIV0AsE42r/IT+rDRJICRZstau24I6R
								+Sjx0CFsc4BQGB1fyYvJGwLSS7BgjdG/SbB6LL/xjlBIT/sOifvfC9I9tP1IVJ2HVPG6yGdDXk0bdMSSBQs7jPdGzgGjuvYf
								ssR7lBOsO2uDGZH7nvAF2mhCIIyph3wkOYIe9BQstqPX1gEySH2XrGBhAzqz9lgIct20X6U3GZoAOm0bEmGKgUJz+tmQZNdP
								hSULFuyR08nSn5tJ+w5ZUq4lJ1i49edawShyDiTI/TYn3hCZg/IJ2mgFegoW/HKhjbZJsGBLnA5vb0rKaJ8hmaD3C1GZQNuH
								vKE2GJDzVK5amfXA0gXrGdqoEFy7XLQ3b1qKIHqREyzImHNvDUnf0XkoqSg6d9jF3SLzUFJR2IPeggXxIHvRLFjv0h6dQCQo
								46v9Kb2rG/IVU1/mp5ntDeVltU1IbAFTYOmChVhfShs6gQOE+0P7VFIXvAQewYIk3lOhEpPCHSpIjNI5dPAEyKXVOSg/qY1m
								AOW7dR7KH2mjFfAKFuYE8gdTz+RIgsO9FVxT/bkEC5Z6PHgAiP/QfpS8eck79GCPSPuQFMdPgSRTbROS3McpsHTBgqw+qcPv
								BQ/IU5xlozErXEk7yMArWD3IWNicPKt8TypOqj7ZVGBxkPvNuA6ebbRHsD4dpOAQb0UIQy4u7TUyzip0ESxIFUnsUbELyw9G
								MB11owjG9FYxZe/tBW9pbR/SI3zsp7XdyNJ8Ny82B8EaiYscO+CzzexZAcm7pAIn27CcA0VZk7OZe/imoMfG8/xIOyVCvg54
								cgw993dOsPC4szVW8L31syF5vjx16LsJ1kgm/D0z+8JQmpgUGWKJ9HM5EjJxbp3tCqDmqSBQ6tJ7QMyVtg1JzldvbE6C1ZuE
								s8RecDmsQ7A84S2ItrZTlthresJTJtxz3F1OsFZteSnNw4lS+vmQn3dE/ncXrB5E4EpCCZ4c6SNk7iCGEaTApISPrVHKDlaD
								LVWwPtxgfF6HYFG6O4dcADTkxJl1wFPOyRNikBOsVA07nF76eWWulNHiBItBS+wlKDIrOu1nJEvNkoMtKJejfYTsXQlgSxQs
								ViI1xfBGrEOwPI4BT8IzHrt1IOeNh5w/mkNOsHJOMg6H1TYhCarFWRMDMZvjgbIxzi5YHHvkWZaGoPKi9hMSu1QJMBBqHyFL
								Ahw92JIEC6GhOkUr5hYsroFnxe/JISS/bx3Ibcegx87bKlgsHlKiA/HsxpA7sWc2wSI2BS9eTRBq7q1GqdkS5HLemKvXtubB
								liJYGH1LS5msQqlgUbUAhwE2khKybaVyqbfoHA4EHVv5VG00E34RmYvSc7BGq2CBJ0bahcSjGNue4vjQz4acXLDYj5bcEApO
								Nc4Z9EvLZ9w10oey51tySxAsHpbaWK4YvIJFiWyiymsM+zXw1DZbtXqYEnz/XFgB//ds03sIFjGTuTr35LHuPph8CI2gxFTu
								We8uWFRRoO4RJyVzuCMTbwEHO+gYSkSxpEY2RkPtQ1m6zUxhSxCs3nYbj2BRgSDnceqN3MMMsSXNDVLbdB5K7MAe5L6jR7DA
								LSJtY+T+T1VfCVkkWIQz4CXhZBzKJlNVEF53sEuRT9b7BiLDX+cRI4b0i2pjAeJJkXxvHfjSo55WYXMQLN6GBAdzPYm1e5Dz
								cAmI17VX1dIROcGi7HTve82DXG0zyEPlWcn0RC5cBx6hjVagl2ABxtT2LXQLFkd3TV3oTrFTZB4psuRlZURwIwX+RlIvnbPm
								PDWMQpJW1ANLFyyOyoodK8+RTR43PuSoq57ICRZHra0LKY/1yJYSwTXwCIO37ltPwcJmlirtVEqXYFHOxRPS3xv7R+YyJ9lq
								tm5pwdIFK3UAJisFznDUNsqS8kAe5ASrJP+vNzi/UeejLHmoW+Gx80JvRZSeggWeFumjli7BmuOgBgUPisfrMTV71F1asmCR
								QpU7/JK8wZybmmyH2iDRGFKCNWWFVg+wzeqclHgt5xJVT34jic/eLXRvweK+4CRx7aeGWcHihu55I3rBKTI6l3WQWvStWLJg
								eaK7Qa7KK3y5NmpASrB6FJVsAS9Tgh91XkpWFlODnQ9VSnRsJbmhXvQWLNDrec4K1gk68kzwlCyZgxiUS6LoY1iyYHlruvN2
								zmUI4MzAM9QDKcGiQsS6QUyhzkvJStCTbNwCapnpuEruYVbJXkwhWCBXJt3DrGCx1J8beBu91R7m4D46wUJsBMECZOjnHBe8
								4HqcFJMSrJ5lnWuBt5AAY52b8ugJPYak2Xiek9LMjakE69LO3yzFRQrW3pF5rJPfL9j/x7BRBAvsFelDyYGqraccpwQLcvOv
								G2yBdV4xHtx4/8TAislTTgZxLzniC0wlWICtqfZXwsUJFje650RbSHY6x4OR/c2DVEJEEZe91+XaUqN7IwkW14dSu9qPsjWf
								MCdYraveHiCB12PLgtR9yzk3vKAGv8duBWuKCU4pWKTmpUqV57g4weJkD52DkpvkxtqwEqQMHRkZQ4m41WIjCRZgO5SrNIr9
								ZkdtWICcYJ00g33IA88RWyMJgm75TVilPdjhsR3Js1vjqZxSsACed+3Ty8UJFmVUdQ464V21USNQfSKndayQPIDEu9RgowkW
								2DPSl5L4vdpVRU6wIAGcvbIRWpBLzg+JDYetpCcJeQT2utsMBTO1v1VclVzswdSCxSo958BZxUUJFsJB/IrOIWTJgasl2MGR
								PEpKUg02omCBwyP9KXN19lfBI1gQDxjzwCzAqntMF6vhboNHuNT+RlrSFyNzSxGPKpU7KUyJQGCTYjXESxGnBUJMkv4BQ2Ve
								bZ9jyZFqiqkFC5DF4nEYKBclWERL6/gh2QqWJDmXAuOojhmSpO4abFTB4sEijkv7DImg1KSpeAVrCuJkSUX/x0Da2nGRvtbB
								2pfEiDkEC3Dwh/ad46IE66jI+CFbL0QOvNV0TOXO2siBjSpYgKOytE8lRtbS5Oh1ChbEGVNqb6L4nKeu+pTEC1e6QlTMJVjk
								r3o8nSEXI1hUWshVUWAZOTU4zELHDbmvNnBgIwsWoICi9qukSkYJ1i1YcD+dlAMc7Fprn2khv1evwy/mEizgsYWGPJ5GKdsN
								OUBzgOPBdOyQVIecA7nyyVSCKEVONAjGnAoURks9/LjHW4F7P2dnIYCyBDkv5Bz0nqOnwEhO1dHUc9WTPKOe47O8yB0kQb3+
								XmA1SNVXHWMVqbqSjOngwMQ5kBMs3LlzAFtE6gEnBKIGuOG1r5GU9p0SqcRTPE89kEsIxihdgnWsUpQkFbeAGnGeShe15D5l
								C1hTdjwFAk11rJA1u4wUth+2ejpOjJtOx0qVy5irPjX2Ah17JII6ZwJ26uw5DhWtAekR2tdISkhPCTxNOuZIAm974aBI/yOp
								DloCDh5JvTimJgUNa8NYQhA7RRngkpCEHAmNYFtWEhpRAlaIqUVMr7r9IagIk1uRsh3cdE3IEYtF7BLnUhN4VotYPAs3LXvq
								OUExuli0Pfa82jw5UklOjPTJRZi6MCLBsbFSPZzg3POwDV4qbP10HG7+mnE43p5y1pgD8MDNQWrEU2Wh1EngAZVcqfceuxY5
								Yt/FS024wtT3C9hjhU35UP1gR9wrUSoZb/T/1fMiahjBwKXLUVz8sHP8MCFQdgyHZHWzTaKKoufopSmwzZDWcOywLX6hmW2r
								HyoEonVI8BvzlsSzNAe2G8I2eAkxNqsuksx7YyxDzcOF6B84/JZb8T9gt9llSF8iiJQSRlTKRTB5gXF9iIo/bKjGQHXV3hVd
								PeB8TuxL1NI6ZtiOYROdEsSjUemXKriMy33Eaez//f7/AS4yCq8m6z2NAAAAAElFTkSuQmCC&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;g id=&quot;shape1257-337&quot; v:mID=&quot;1257&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(4217.92,-3176.85) rotate(30)&quot;&gt;
			&lt;title&gt;Usman Zafar Paracha 1.1257&lt;/title&gt;
			&lt;desc&gt;Usman Zafar Paracha&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(67000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;153.992&quot; cy=&quot;8327.64&quot; width=&quot;307.99&quot; height=&quot;48.7186&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8303.28&quot; width=&quot;307.985&quot; height=&quot;48.7186&quot; class=&quot;st6&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8336.64&quot; class=&quot;st7&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph/&gt;&lt;v:tabList/&gt;Usman Zafar Paracha&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1258-340&quot; v:mID=&quot;1258&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-4320)&quot;&gt;
			&lt;title&gt;Flanders Metadata Equation&lt;/title&gt;
			&lt;desc&gt;Flanders Metadata Equation&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Flanders Metadata Equation)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Flanders Metadata Equation)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(68000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;81&quot; cy=&quot;8302.5&quot; width=&quot;162&quot; height=&quot;99.0002&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8253&quot; width=&quot;162&quot; height=&quot;99.0002&quot; class=&quot;st8&quot;/&gt;
			&lt;text x=&quot;37.8&quot; y=&quot;8280&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;Flanders &lt;tspan
						x=&quot;31.19&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;Metadata &lt;/tspan&gt;&lt;tspan x=&quot;35.56&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;Equation&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1259-345&quot; v:mID=&quot;1259&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-4050)&quot;&gt;
			&lt;title&gt;eGFR = (k × Body height or length (cm)) / serum creatinine (mg/dL)&lt;/title&gt;
			&lt;desc&gt;eGFR = (k × Body height or length (cm)) / serum creatinine (m...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(eGFR = (k × Body height or length (cm)) / serum creatinine (mg/dL))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(eGFR = (k × Body height or length (cm)) / serum creatinine (mg/dL)&amp;#10;(k = 0.0414 × ln(age) + 0.3018))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(69000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;288&quot; cy=&quot;8280&quot; width=&quot;576&quot; height=&quot;144&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8208&quot; width=&quot;576&quot; height=&quot;144&quot; class=&quot;st10&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8257.15&quot; class=&quot;st11&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;eGFR = (k × Body height or length &lt;tspan
						x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;(cm)) / serum creatinine (mg/dL)&lt;v:newlineChar/&gt;&lt;/tspan&gt;&lt;tspan x=&quot;4&quot;
						dy=&quot;1.221em&quot; class=&quot;st9&quot;&gt;(k = 0.0414 × ln(age) + 0.3018)&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1260-350&quot; v:mID=&quot;1260&quot; v:groupContext=&quot;shape&quot; v:layerMember=&quot;1&quot; transform=&quot;translate(99,-4320)&quot;&gt;
			&lt;title&gt;syntax 8&lt;/title&gt;
			&lt;desc&gt;syntax&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(70000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;69.4446&quot; cy=&quot;8439.56&quot; width=&quot;75.01&quot; height=&quot;26.0035&quot;/&gt;
			&lt;path d=&quot;M0 8352 C-0 8365.5 -8.89 8413.61 40.48 8432.96 C86.87 8451.14 184.71 8443.91 203.75 8468.56 L203.87 8468.9&quot;
					class=&quot;st12&quot;/&gt;
			&lt;rect v:rectContext=&quot;textBkgnd&quot; x=&quot;49.8232&quot; y=&quot;8430.56&quot; width=&quot;39.2429&quot; height=&quot;18&quot; class=&quot;st14&quot;/&gt;
			&lt;text x=&quot;49.82&quot; y=&quot;8444.06&quot; class=&quot;st15&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;syntax&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1261-357&quot; v:mID=&quot;1261&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(216,-4248)&quot;&gt;
			&lt;title&gt;An age-dependent k-constant model (k = 0.0414 × ln(age) + 0.3018) derived from a large Belgian pediatric meta-analysis.&lt;/title&gt;
			&lt;desc&gt;An age-dependent k-constant model (k = 0.0414 × ln(age) + 0.3...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;Scale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;AntiScale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(An age-dependent k-constant model (k = 0.0414 × ln(age) + 0.3018) derived from a large Belgian pediatric meta-analysis.)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot;
						v:val=&quot;VT4(An age-dependent k-constant model (k = 0.0414 × ln(age) + 0.3018) derived from a large Belgian pediatric meta-analysis.)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(71000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;189&quot; cy=&quot;8262&quot; width=&quot;378&quot; height=&quot;180&quot;/&gt;
			&lt;path d=&quot;M0 8244 L0 8172 L171 8172 L189 8172 L207 8172 L378 8172 L378 8244 L378 8262 L378 8280 L378 8352 L207 8352 L189
						 8352 L171 8352 L0 8352 L0 8280 L-36 8230.5 L0 8244 Z&quot; class=&quot;st16&quot;/&gt;
			&lt;text x=&quot;38.18&quot; y=&quot;8224.5&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;An age-dependent k-constant &lt;tspan
						x=&quot;41.72&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;model (k = 0.0414 × ln(age) + &lt;/tspan&gt;&lt;tspan x=&quot;4.55&quot; dy=&quot;1.2em&quot;
						class=&quot;st9&quot;&gt;0.3018) derived from a large Belgian &lt;/tspan&gt;&lt;tspan x=&quot;68.19&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;pediatric meta&lt;/tspan&gt;-analysis.&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1262-363&quot; v:mID=&quot;1262&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(16.8,-3888)&quot;&gt;
			&lt;title&gt;Page Break 8&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Page Break 8)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Page Break 8)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(72000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8280&quot; width=&quot;576&quot; height=&quot;72.0001&quot; class=&quot;st17&quot;/&gt;
		&lt;/g&gt;
		&lt;g id=&quot;shape1263-365&quot; v:mID=&quot;1263&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-3420)&quot;&gt;
			&lt;title&gt;Patreon and LinkedIn links.1263&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(73000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8293.5&quot; width=&quot;576&quot; height=&quot;58.5&quot; class=&quot;st1&quot;/&gt;
		&lt;/g&gt;
		&lt;a xlink:href=&quot;https://www.linkedin.com/in/usmanzafarparacha/&quot; xlink:title=&quot;LinkedIn Profile&quot;&gt;
			&lt;g id=&quot;group1264-367&quot; transform=&quot;translate(328.5,-3433.12)&quot; v:mID=&quot;1264&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(74000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;LinkedIn Profile.1264&lt;/title&gt;
				&lt;g id=&quot;shape1265-368&quot; v:mID=&quot;1265&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(29.25,-0.532647)&quot;&gt;
					&lt;title&gt;/usmanzafarparacha&lt;/title&gt;
					&lt;desc&gt;/usmanzafarparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;111.375&quot; cy=&quot;8337.91&quot; width=&quot;222.76&quot; height=&quot;28.1847&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.82&quot; width=&quot;222.75&quot; height=&quot;28.1847&quot; class=&quot;st2&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.41&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/usmanzafarparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape56-371&quot; v:mID=&quot;56&quot; v:groupContext=&quot;shape&quot;&gt;
					&lt;title&gt;LinkedIn&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;a xlink:href=&quot;https://www.patreon.com/uzparacha&quot; xlink:title=&quot;Patreon profile&quot;&gt;
			&lt;g id=&quot;group1266-375&quot; transform=&quot;translate(36,-3433.72)&quot; v:mID=&quot;1266&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(75000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;Patreon profile.1266&lt;/title&gt;
				&lt;g id=&quot;shape1267-376&quot; v:mID=&quot;1267&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(117,0)&quot;&gt;
					&lt;title&gt;/uzparacha&lt;/title&gt;
					&lt;desc&gt;/uzparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;65.25&quot; cy=&quot;8337.97&quot; width=&quot;130.51&quot; height=&quot;28.0568&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.94&quot; width=&quot;130.5&quot; height=&quot;28.0568&quot; class=&quot;st5&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.47&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/uzparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape57-379&quot; v:mID=&quot;57&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(0,-4.27832)&quot;&gt;
					&lt;title&gt;Patreon&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								iVBORw0KGgoAAAANSUhEUgAAASwAAAAyCAYAAADm1uYqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAA
								EnQAABJ0Ad5mH3gAABHLSURBVHhe7Z111C1VGcZfu1tRbFFUJGyxxe7EwMLGzqVLTESxFbsQDFRkKS5R7MBCbDGwxRbFBLt1
								/e6a0e3DPnu/O2bO3O/eZ63nn+87O86ZmWf2fmubbSyczcweb2ZfMbM/mdkPzexQM7uCfnArtmJNOJOZ3cjM9jOztw336i/N
								7I9m9m8z+42Z/cTMjjKzg8zsIWa2o5mdQjuaAbcysw8Mc/qrmX3HzJ5nZufVD3bGTmb2bjP7vZn9wczea2a7hB+4lpm9z8x+
								NvxoJfz18EU+Y2ZHmNk+wwU5azjADLiYmX07Mj/4DzPbSxsU4pJmdrCZfWO4gOvkl8zsZWa2jU5yBe5kZh8bHgz9bTz859CW
								35fr/A4ze5KZXd/MzqKDdcItzexDZnZCZD5TkHuE+/hAMzu/TqYRpzGz3c3s8OHB17E9/LGZPWcQrzmwf2QOI7kmV9YGncBz
								/NvImCeZ2cX5wO3N7F+RD7SSG+AjZnZPMzudzqozzjjcbDoH5fW0oRPbr/gR183jzOzsOlnBfSPtepLrjIDdxMxOqYNXYqp7
								0svjC14GKZzezB5qZj+IjFFLfhcWBlfVwTriLpFxlYjWdtqwA14RGWskLxP7auQfvckSlwen1w2teHhkzBhZmdQsrV8S6Wsp
								fKxOVvD1SJupyEsDsWnF0ZG+5+YjdVKFuKnzJVpLhIsV//l04A44NjJejMcMq8ee+GZknJG8oO3vkX9MxU+Y2UV0hh3wtchY
								q3gdbewA2yntZyk8RCcb4LTDCkjbTM3DBntiLX4X6XNuvkon5cQZzOzVkf6m4q+G7XMvXCgyRop7aweN4PvoGCO5L072x6mJ
								LeQqOssGsDTWMVJ8vXbgwFsi/SyFL9XJBsDAq5+fixiTa9/+f4v0Nzcfp5Ny4MLD99a+piarrWdW7h4U14z0nyLOrZ5bQ2y0
								OsZIDPAn++McxIB2eZ1pJQ6I9J8i3phSh8DdI/0sgdyo19DJBlinYEG24DVG+XULFt6pTQbeAlxmMIxrX3OSl/GpdWKFwBap
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;g id=&quot;shape1268-383&quot; v:mID=&quot;1268&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(4217.92,-2626.65) rotate(30)&quot;&gt;
			&lt;title&gt;Usman Zafar Paracha 1.1268&lt;/title&gt;
			&lt;desc&gt;Usman Zafar Paracha&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(76000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;153.992&quot; cy=&quot;8327.64&quot; width=&quot;307.99&quot; height=&quot;48.7186&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8303.28&quot; width=&quot;307.985&quot; height=&quot;48.7186&quot; class=&quot;st6&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8336.64&quot; class=&quot;st7&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph/&gt;&lt;v:tabList/&gt;Usman Zafar Paracha&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1269-386&quot; v:mID=&quot;1269&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-3769.8)&quot;&gt;
			&lt;title&gt;Simple Height-Independent&lt;/title&gt;
			&lt;desc&gt;Simple Height-Independent&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4( Simple Height-Independent)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4( Simple Height-Independent)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(77000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;81&quot; cy=&quot;8302.5&quot; width=&quot;162&quot; height=&quot;99.0002&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8253&quot; width=&quot;162&quot; height=&quot;99.0002&quot; class=&quot;st8&quot;/&gt;
			&lt;text x=&quot;49.57&quot; y=&quot;8280&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;Simple &lt;tspan x=&quot;43.66&quot;
						dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;Height&lt;/tspan&gt;-&lt;tspan x=&quot;15.6&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;Independent&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1270-391&quot; v:mID=&quot;1270&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-3499.8)&quot;&gt;
			&lt;title&gt;eGFR = 107.3 / (serum creatinine (mg/dL) / Q)&lt;/title&gt;
			&lt;desc&gt;eGFR = 107.3 / (serum creatinine (mg/dL) / Q) (Q = 0.0270 × a...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(eGFR = 107.3 / (serum creatinine (mg/dL) / Q))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(eGFR = 107.3 / (serum creatinine (mg/dL) / Q)&amp;#10;(Q = 0.0270 × age + 0.2329))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(78000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;288&quot; cy=&quot;8295.75&quot; width=&quot;576&quot; height=&quot;112.5&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8239.5&quot; width=&quot;576&quot; height=&quot;112.5&quot; class=&quot;st10&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8272.9&quot; class=&quot;st11&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;eGFR = 107.3 / (serum creatinine (mg/&lt;tspan
						x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;dL) / Q)&lt;v:newlineChar/&gt;&lt;/tspan&gt;&lt;tspan x=&quot;4&quot; dy=&quot;1.221em&quot; class=&quot;st20&quot;&gt;(&lt;/tspan&gt;Q = 0.0270 × age + 0.2329)&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1271-396&quot; v:mID=&quot;1271&quot; v:groupContext=&quot;shape&quot; v:layerMember=&quot;1&quot; transform=&quot;translate(99,-3769.8)&quot;&gt;
			&lt;title&gt;syntax 9&lt;/title&gt;
			&lt;desc&gt;syntax&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(79000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;77.3566&quot; cy=&quot;8449.24&quot; width=&quot;75.01&quot; height=&quot;26.0035&quot;/&gt;
			&lt;path d=&quot;M0 8352 C0 8365.5 11.06 8421.84 58.47 8443.65 C107.55 8466.23 195.61 8451.79 205.99 8499.57 L206.03 8499.93&quot;
					class=&quot;st12&quot;/&gt;
			&lt;rect v:rectContext=&quot;textBkgnd&quot; x=&quot;57.7352&quot; y=&quot;8440.24&quot; width=&quot;39.2429&quot; height=&quot;18&quot; class=&quot;st18&quot;/&gt;
			&lt;text x=&quot;57.74&quot; y=&quot;8453.74&quot; class=&quot;st15&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;syntax&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1272-403&quot; v:mID=&quot;1272&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(216,-3697.8)&quot;&gt;
			&lt;title&gt;Estimates GFR using age alone without height input, useful when height measurements are unavailable.&lt;/title&gt;
			&lt;desc&gt;Estimates GFR using age alone without height input, useful wh...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;Scale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;AntiScale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(Estimates GFR using age alone without height input, useful when height measurements are unavailable. )&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot;
						v:val=&quot;VT4(Estimates GFR using age alone without height input, useful when height measurements are unavailable. )&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(80000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;189&quot; cy=&quot;8262&quot; width=&quot;378&quot; height=&quot;180&quot;/&gt;
			&lt;path d=&quot;M0 8244 L0 8172 L171 8172 L189 8172 L207 8172 L378 8172 L378 8244 L378 8262 L378 8280 L378 8352 L207 8352 L189
						 8352 L171 8352 L0 8352 L0 8280 L-36 8230.5 L0 8244 Z&quot; class=&quot;st16&quot;/&gt;
			&lt;text x=&quot;34.86&quot; y=&quot;8224.5&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;Estimates GFR using age alone &lt;tspan
						x=&quot;16.4&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;without height input, useful when &lt;/tspan&gt;&lt;tspan x=&quot;58.42&quot; dy=&quot;1.2em&quot;
						class=&quot;st9&quot;&gt;height measurements are &lt;/tspan&gt;&lt;tspan x=&quot;127.71&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;unavailable. &lt;/tspan&gt; &lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1273-409&quot; v:mID=&quot;1273&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-3330)&quot;&gt;
			&lt;title&gt;Page Break 9&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Page Break 9)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Page Break 9)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(81000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8280&quot; width=&quot;576&quot; height=&quot;72.0001&quot; class=&quot;st17&quot;/&gt;
		&lt;/g&gt;
		&lt;g id=&quot;shape1275-411&quot; v:mID=&quot;1275&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-2862)&quot;&gt;
			&lt;title&gt;Patreon and LinkedIn links.1275&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(82000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8293.5&quot; width=&quot;576&quot; height=&quot;58.5&quot; class=&quot;st1&quot;/&gt;
		&lt;/g&gt;
		&lt;a xlink:href=&quot;https://www.linkedin.com/in/usmanzafarparacha/&quot; xlink:title=&quot;LinkedIn Profile&quot;&gt;
			&lt;g id=&quot;group1276-413&quot; transform=&quot;translate(328.5,-2875.13)&quot; v:mID=&quot;1276&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(83000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;LinkedIn Profile.1276&lt;/title&gt;
				&lt;g id=&quot;shape1277-414&quot; v:mID=&quot;1277&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(29.25,-0.532647)&quot;&gt;
					&lt;title&gt;/usmanzafarparacha&lt;/title&gt;
					&lt;desc&gt;/usmanzafarparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;111.375&quot; cy=&quot;8337.91&quot; width=&quot;222.76&quot; height=&quot;28.1847&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.82&quot; width=&quot;222.75&quot; height=&quot;28.1847&quot; class=&quot;st2&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.41&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/usmanzafarparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape58-417&quot; v:mID=&quot;58&quot; v:groupContext=&quot;shape&quot;&gt;
					&lt;title&gt;LinkedIn&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;a xlink:href=&quot;https://www.patreon.com/uzparacha&quot; xlink:title=&quot;Patreon profile&quot;&gt;
			&lt;g id=&quot;group1278-421&quot; transform=&quot;translate(36,-2875.72)&quot; v:mID=&quot;1278&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(84000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;Patreon profile.1278&lt;/title&gt;
				&lt;g id=&quot;shape1279-422&quot; v:mID=&quot;1279&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(117,0)&quot;&gt;
					&lt;title&gt;/uzparacha&lt;/title&gt;
					&lt;desc&gt;/uzparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;65.25&quot; cy=&quot;8337.97&quot; width=&quot;130.51&quot; height=&quot;28.0568&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.94&quot; width=&quot;130.5&quot; height=&quot;28.0568&quot; class=&quot;st5&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.47&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/uzparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape59-425&quot; v:mID=&quot;59&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(0,-4.27832)&quot;&gt;
					&lt;title&gt;Patreon&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								iVBORw0KGgoAAAANSUhEUgAAASwAAAAyCAYAAADm1uYqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAA
								EnQAABJ0Ad5mH3gAABHLSURBVHhe7Z111C1VGcZfu1tRbFFUJGyxxe7EwMLGzqVLTESxFbsQDFRkKS5R7MBCbDGwxRbFBLt1
								/e6a0e3DPnu/O2bO3O/eZ63nn+87O86ZmWf2fmubbSyczcweb2ZfMbM/mdkPzexQM7uCfnArtmJNOJOZ3cjM9jOztw336i/N
								7I9m9m8z+42Z/cTMjjKzg8zsIWa2o5mdQjuaAbcysw8Mc/qrmX3HzJ5nZufVD3bGTmb2bjP7vZn9wczea2a7hB+4lpm9z8x+
								NvxoJfz18EU+Y2ZHmNk+wwU5azjADLiYmX07Mj/4DzPbSxsU4pJmdrCZfWO4gOvkl8zsZWa2jU5yBe5kZh8bHgz9bTz859CW
								35fr/A4ze5KZXd/MzqKDdcItzexDZnZCZD5TkHuE+/hAMzu/TqYRpzGz3c3s8OHB17E9/LGZPWcQrzmwf2QOI7kmV9YGncBz
								/NvImCeZ2cX5wO3N7F+RD7SSG+AjZnZPMzudzqozzjjcbDoH5fW0oRPbr/gR183jzOzsOlnBfSPtepLrjIDdxMxOqYNXYqp7
								0svjC14GKZzezB5qZj+IjFFLfhcWBlfVwTriLpFxlYjWdtqwA14RGWskLxP7auQfvckSlwen1w2teHhkzBhZmdQsrV8S6Wsp
								fKxOVvD1SJupyEsDsWnF0ZG+5+YjdVKFuKnzJVpLhIsV//l04A44NjJejMcMq8ee+GZknJG8oO3vkX9MxU+Y2UV0hh3wtchY
								q3gdbewA2yntZyk8RCcb4LTDCkjbTM3DBntiLX4X6XNuvkon5cQZzOzVkf6m4q+G7XMvXCgyRop7aweN4PvoGCO5L072x6mJ
								LeQqOssGsDTWMVJ8vXbgwFsi/SyFL9XJBsDAq5+fixiTa9/+f4v0Nzcfp5Ny4MLD99a+piarrWdW7h4U14z0nyLOrZ5bQ2y0
								OsZIDPAn++McxIB2eZ1pJQ6I9J8i3phSh8DdI/0sgdyo19DJBlinYEG24DVG+XULFt6pTQbeAlxmMIxrX3OSl/GpdWKFwBap
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;g id=&quot;shape1280-429&quot; v:mID=&quot;1280&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(4217.92,-2068.65) rotate(30)&quot;&gt;
			&lt;title&gt;Usman Zafar Paracha 1.1280&lt;/title&gt;
			&lt;desc&gt;Usman Zafar Paracha&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(85000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;153.992&quot; cy=&quot;8327.64&quot; width=&quot;307.99&quot; height=&quot;48.7186&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8303.28&quot; width=&quot;307.985&quot; height=&quot;48.7186&quot; class=&quot;st6&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8336.64&quot; class=&quot;st7&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph/&gt;&lt;v:tabList/&gt;Usman Zafar Paracha&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1281-432&quot; v:mID=&quot;1281&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-3211.8)&quot;&gt;
			&lt;title&gt;FAS Age Equation&lt;/title&gt;
			&lt;desc&gt;FAS Age Equation&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(FAS Age Equation)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(FAS Age Equation)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(86000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;81&quot; cy=&quot;8302.5&quot; width=&quot;162&quot; height=&quot;99.0002&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8253&quot; width=&quot;162&quot; height=&quot;99.0002&quot; class=&quot;st8&quot;/&gt;
			&lt;text x=&quot;40.12&quot; y=&quot;8295&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;FAS Age &lt;tspan
						x=&quot;35.56&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;Equation&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1282-436&quot; v:mID=&quot;1282&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-2941.8)&quot;&gt;
			&lt;title&gt;eGFR = 107.3 / (Serum Creatinine (mg/dL) / Q_age) [Q=0.921]&lt;/title&gt;
			&lt;desc&gt;eGFR = 107.3 / (Serum Creatinine (mg/dL) / Q_age) [Q=0.921]&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(eGFR = 107.3 / (Serum Creatinine (mg/dL) / Q_age) [Q=0.921])&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(eGFR = 107.3 / (Serum Creatinine (mg/dL) / Q_age) [Q=0.921])&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(87000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;287.4&quot; cy=&quot;8301.94&quot; width=&quot;574.81&quot; height=&quot;100.125&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8251.87&quot; width=&quot;574.8&quot; height=&quot;100.125&quot; class=&quot;st10&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8294.44&quot; class=&quot;st11&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;eGFR = 107.3 / (Serum Creatinine (mg/&lt;tspan
						x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;dL) / Q_age) [Q=0.921]&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1283-440&quot; v:mID=&quot;1283&quot; v:groupContext=&quot;shape&quot; v:layerMember=&quot;1&quot; transform=&quot;translate(99,-3211.8)&quot;&gt;
			&lt;title&gt;syntax 10&lt;/title&gt;
			&lt;desc&gt;syntax&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(88000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;145.454&quot; cy=&quot;8369.75&quot; width=&quot;75.01&quot; height=&quot;26.0035&quot;/&gt;
			&lt;path d=&quot;M0 8352 C-0 8365.5 45.83 8365.5 91.66 8365.5 C149.03 8365.5 206.4 8365.5 206.4 8521.88&quot; class=&quot;st19&quot;/&gt;
			&lt;rect v:rectContext=&quot;textBkgnd&quot; x=&quot;125.832&quot; y=&quot;8360.75&quot; width=&quot;39.2429&quot; height=&quot;18&quot; class=&quot;st14&quot;/&gt;
			&lt;text x=&quot;125.83&quot; y=&quot;8374.25&quot; class=&quot;st15&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;syntax&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1284-447&quot; v:mID=&quot;1284&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(306,-3096)&quot;&gt;
			&lt;title&gt;Part of the Full Age Spectrum framework, this uses a polynomial age-based Q-value normalized to 107.3 for a unified creatinine-based GFR estimate across all ages.&lt;/title&gt;
			&lt;desc&gt;Part of the Full Age Spectrum framework, this uses a polynomi...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;Scale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;AntiScale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(Part of the Full Age Spectrum framework, this uses a polynomial age-based Q-value normalized to 107.3 for a unified creatinine-based GFR estimate across all ages.)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot;
						v:val=&quot;VT4(Part of the Full Age Spectrum framework, this uses a polynomial age-based Q-value normalized to 107.3 for a unified creatinine-based GFR estimate across all ages.)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(89000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;144&quot; cy=&quot;8240.1&quot; width=&quot;288.01&quot; height=&quot;223.8&quot;/&gt;
			&lt;path d=&quot;M0 8222.1 L0 8128.2 L126 8128.2 L144 8128.2 L162 8128.2 L288 8128.2 L288 8222.1 L288 8240.1 L288 8258.1 L288
						 8352 L162 8352 L144 8352 L126 8352 L0 8352 L0 8258.1 L-126 8186.7 L0 8222.1 Z&quot; class=&quot;st16&quot;/&gt;
			&lt;text x=&quot;46.94&quot; y=&quot;8157.6&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;Part of the Full Age &lt;tspan
						x=&quot;11.87&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;Spectrum framework, this &lt;/tspan&gt;&lt;tspan x=&quot;28.5&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;uses a polynomial age&lt;/tspan&gt;-&lt;tspan
						x=&quot;11.64&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;based Q&lt;/tspan&gt;-value normalized &lt;tspan x=&quot;37.19&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;to 107.3 for a unified &lt;/tspan&gt;&lt;tspan
						x=&quot;35.57&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;creatinine&lt;/tspan&gt;-based GFR &lt;tspan x=&quot;21.12&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;estimate across all ages.&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1285-456&quot; v:mID=&quot;1285&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-2772)&quot;&gt;
			&lt;title&gt;Page Break 10&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Page Break 10)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Page Break 10)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(90000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8280&quot; width=&quot;576&quot; height=&quot;72.0001&quot; class=&quot;st17&quot;/&gt;
		&lt;/g&gt;
		&lt;g id=&quot;shape1286-458&quot; v:mID=&quot;1286&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-2304.6)&quot;&gt;
			&lt;title&gt;Patreon and LinkedIn links.1286&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(91000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8293.5&quot; width=&quot;576&quot; height=&quot;58.5&quot; class=&quot;st1&quot;/&gt;
		&lt;/g&gt;
		&lt;a xlink:href=&quot;https://www.linkedin.com/in/usmanzafarparacha/&quot; xlink:title=&quot;LinkedIn Profile&quot;&gt;
			&lt;g id=&quot;group1287-460&quot; transform=&quot;translate(328.5,-2317.73)&quot; v:mID=&quot;1287&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(92000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;LinkedIn Profile.1287&lt;/title&gt;
				&lt;g id=&quot;shape1288-461&quot; v:mID=&quot;1288&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(29.25,-0.532647)&quot;&gt;
					&lt;title&gt;/usmanzafarparacha&lt;/title&gt;
					&lt;desc&gt;/usmanzafarparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;111.375&quot; cy=&quot;8337.91&quot; width=&quot;222.76&quot; height=&quot;28.1847&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.82&quot; width=&quot;222.75&quot; height=&quot;28.1847&quot; class=&quot;st2&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.41&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/usmanzafarparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape60-464&quot; v:mID=&quot;60&quot; v:groupContext=&quot;shape&quot;&gt;
					&lt;title&gt;LinkedIn&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;a xlink:href=&quot;https://www.patreon.com/uzparacha&quot; xlink:title=&quot;Patreon profile&quot;&gt;
			&lt;g id=&quot;group1289-468&quot; transform=&quot;translate(36,-2318.32)&quot; v:mID=&quot;1289&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(93000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;Patreon profile.1289&lt;/title&gt;
				&lt;g id=&quot;shape1290-469&quot; v:mID=&quot;1290&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(117,0)&quot;&gt;
					&lt;title&gt;/uzparacha&lt;/title&gt;
					&lt;desc&gt;/uzparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;65.25&quot; cy=&quot;8337.97&quot; width=&quot;130.51&quot; height=&quot;28.0568&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.94&quot; width=&quot;130.5&quot; height=&quot;28.0568&quot; class=&quot;st5&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.47&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/uzparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape61-472&quot; v:mID=&quot;61&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(0,-4.27832)&quot;&gt;
					&lt;title&gt;Patreon&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								iVBORw0KGgoAAAANSUhEUgAAASwAAAAyCAYAAADm1uYqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAA
								EnQAABJ0Ad5mH3gAABHLSURBVHhe7Z111C1VGcZfu1tRbFFUJGyxxe7EwMLGzqVLTESxFbsQDFRkKS5R7MBCbDGwxRbFBLt1
								/e6a0e3DPnu/O2bO3O/eZ63nn+87O86ZmWf2fmubbSyczcweb2ZfMbM/mdkPzexQM7uCfnArtmJNOJOZ3cjM9jOztw336i/N
								7I9m9m8z+42Z/cTMjjKzg8zsIWa2o5mdQjuaAbcysw8Mc/qrmX3HzJ5nZufVD3bGTmb2bjP7vZn9wczea2a7hB+4lpm9z8x+
								NvxoJfz18EU+Y2ZHmNk+wwU5azjADLiYmX07Mj/4DzPbSxsU4pJmdrCZfWO4gOvkl8zsZWa2jU5yBe5kZh8bHgz9bTz859CW
								35fr/A4ze5KZXd/MzqKDdcItzexDZnZCZD5TkHuE+/hAMzu/TqYRpzGz3c3s8OHB17E9/LGZPWcQrzmwf2QOI7kmV9YGncBz
								/NvImCeZ2cX5wO3N7F+RD7SSG+AjZnZPMzudzqozzjjcbDoH5fW0oRPbr/gR183jzOzsOlnBfSPtepLrjIDdxMxOqYNXYqp7
								0svjC14GKZzezB5qZj+IjFFLfhcWBlfVwTriLpFxlYjWdtqwA14RGWskLxP7auQfvckSlwen1w2teHhkzBhZmdQsrV8S6Wsp
								fKxOVvD1SJupyEsDsWnF0ZG+5+YjdVKFuKnzJVpLhIsV//l04A44NjJejMcMq8ee+GZknJG8oO3vkX9MxU+Y2UV0hh3wtchY
								q3gdbewA2yntZyk8RCcb4LTDCkjbTM3DBntiLX4X6XNuvkon5cQZzOzVkf6m4q+G7XMvXCgyRop7aweN4PvoGCO5L072x6mJ
								LeQqOssGsDTWMVJ8vXbgwFsi/SyFL9XJBsDAq5+fixiTa9/+f4v0Nzcfp5Ny4MLD99a+piarrWdW7h4U14z0nyLOrZ5bQ2y0
								OsZIDPAn++McxIB2eZ1pJQ6I9J8i3phSh8DdI/0sgdyo19DJBlinYEG24DVG+XULFt6pTQbeAlxmMIxrX3OSl/GpdWKFwBap
								/eaIDbMXugsWDwmdsp/ENnVi5DMecnHPqbMtBA8k4qd953g/7ciBpy/gQQqJ8D5AJymoESz6xUjM9Q3JNa/5/jUr2ppxehDz
								yMfN7Io6oQwQt59H+ishY/fYCvN7t6y0agQL3kw7qkQ3wcLFfPMVb0y8IcQ6PXD4HG5wbR9jzc0cYs9Inx5+SjtyYtvBqEyI
								hBLxYBvx2kHIdUwvEQdWjRjTdYyRt3aKfYlgMW9WvSnHCAZW3OrM4YMFnrzdtKMMvILF9os4pV0H0WBrUkvc6dj8SnEeM/tu
								ZG4pso16s5nde4gvwssdgrAKPNqECGHY1vY5sj2sRa1gEfLSIxqgi2AR5Fai2pdzGqoRtstq4wJ8NNKnlyzhpwIPNl4m74MH
								WdncIyMYpfAK1v21oRNXd3ohCW8pged3e5GZnUobzgyeifdE5raKxCxipC41SbAYeHukv1XkRULQZw1qBQsStN2KZsHiZisR
								qxHspYnU1f6Um2IrKnCJgjd8jM/VDicAb1AdN0a+B27w3vAIVqv9gZVebhXA9+N6eZETrCMr78neeERkbqtI0GhrhDjbLu/W
								E28bO4JStAgWgoLjoQXNgnVb7bEAiBaR0dpnSAIyawyFrPq0rxJy4XvHkMSQ+/6Qt+cU8AgWN2grdnaIzMO0UQK5vqYQ91Jc
								YDDO69xixP7ZS2AJO/DGSb1RGzvQIljwrdphIZoFy2MrSYG4J+1TiQ2iBGwFenhksAVNDWwsOq7ydtqoEzyCFbNJ1oDcL+07
								ZCpeTJETLLX5rAOIgc4rxhZ70ioQhf+tyFhKVrZs20vQKljwBtppAZoEa9MHGoFNJmeEvo82yqDHjwpbt0MekHOl4yp5W0+B
								nGCxQugFUlC0/5Cf0wYJpASr55xrwfbWE5D7zs42yRA7OFd4JA6XoMezhV2zdvfSJFhsm3oAj5L2HZJE2hJ4AjlxEee8lbiS
								a4MbvbhgZNyQvAVrtsQe5ASr1/UFrFa1/5B40rxICRY39Lrxysi8lBjYW21WOXhS0ri/ShxbPQQLPlo7dmIRgvWmSN8hS5bN
								5zKzv0T6GMmXGu0yuIcp06GfCfkY6b83SFHRMUPi4p4KcwoWBmHtP+SmPDAnUoKFN3WdIPXGEy/1KG04ATCNpHLvRr5YGybQ
								S7D4jWqqXjQJFuVmeuD9kb5DlqywMN5q+5Bq3MVT8ufI50ayfJ0SuLB1zJBTPoA5wWIV0AsE42r/IT+rDRJICRZstau24I6R
								+Sjx0CFsc4BQGB1fyYvJGwLSS7BgjdG/SbB6LL/xjlBIT/sOifvfC9I9tP1IVJ2HVPG6yGdDXk0bdMSSBQs7jPdGzgGjuvYf
								ssR7lBOsO2uDGZH7nvAF2mhCIIyph3wkOYIe9BQstqPX1gEySH2XrGBhAzqz9lgIct20X6U3GZoAOm0bEmGKgUJz+tmQZNdP
								hSULFuyR08nSn5tJ+w5ZUq4lJ1i49edawShyDiTI/TYn3hCZg/IJ2mgFegoW/HKhjbZJsGBLnA5vb0rKaJ8hmaD3C1GZQNuH
								vKE2GJDzVK5amfXA0gXrGdqoEFy7XLQ3b1qKIHqREyzImHNvDUnf0XkoqSg6d9jF3SLzUFJR2IPeggXxIHvRLFjv0h6dQCQo
								46v9Kb2rG/IVU1/mp5ntDeVltU1IbAFTYOmChVhfShs6gQOE+0P7VFIXvAQewYIk3lOhEpPCHSpIjNI5dPAEyKXVOSg/qY1m
								AOW7dR7KH2mjFfAKFuYE8gdTz+RIgsO9FVxT/bkEC5Z6PHgAiP/QfpS8eck79GCPSPuQFMdPgSRTbROS3McpsHTBgqw+qcPv
								BQ/IU5xlozErXEk7yMArWD3IWNicPKt8TypOqj7ZVGBxkPvNuA6ebbRHsD4dpOAQb0UIQy4u7TUyzip0ESxIFUnsUbELyw9G
								MB11owjG9FYxZe/tBW9pbR/SI3zsp7XdyNJ8Ny82B8EaiYscO+CzzexZAcm7pAIn27CcA0VZk7OZe/imoMfG8/xIOyVCvg54
								cgw993dOsPC4szVW8L31syF5vjx16LsJ1kgm/D0z+8JQmpgUGWKJ9HM5EjJxbp3tCqDmqSBQ6tJ7QMyVtg1JzldvbE6C1ZuE
								s8RecDmsQ7A84S2ItrZTlthresJTJtxz3F1OsFZteSnNw4lS+vmQn3dE/ncXrB5E4EpCCZ4c6SNk7iCGEaTApISPrVHKDlaD
								LVWwPtxgfF6HYFG6O4dcADTkxJl1wFPOyRNikBOsVA07nF76eWWulNHiBItBS+wlKDIrOu1nJEvNkoMtKJejfYTsXQlgSxQs
								ViI1xfBGrEOwPI4BT8IzHrt1IOeNh5w/mkNOsHJOMg6H1TYhCarFWRMDMZvjgbIxzi5YHHvkWZaGoPKi9hMSu1QJMBBqHyFL
								Ahw92JIEC6GhOkUr5hYsroFnxe/JISS/bx3Ibcegx87bKlgsHlKiA/HsxpA7sWc2wSI2BS9eTRBq7q1GqdkS5HLemKvXtubB
								liJYGH1LS5msQqlgUbUAhwE2khKybaVyqbfoHA4EHVv5VG00E34RmYvSc7BGq2CBJ0bahcSjGNue4vjQz4acXLDYj5bcEApO
								Nc4Z9EvLZ9w10oey51tySxAsHpbaWK4YvIJFiWyiymsM+zXw1DZbtXqYEnz/XFgB//ds03sIFjGTuTr35LHuPph8CI2gxFTu
								We8uWFRRoO4RJyVzuCMTbwEHO+gYSkSxpEY2RkPtQ1m6zUxhSxCs3nYbj2BRgSDnceqN3MMMsSXNDVLbdB5K7MAe5L6jR7DA
								LSJtY+T+T1VfCVkkWIQz4CXhZBzKJlNVEF53sEuRT9b7BiLDX+cRI4b0i2pjAeJJkXxvHfjSo55WYXMQLN6GBAdzPYm1e5Dz
								cAmI17VX1dIROcGi7HTve82DXG0zyEPlWcn0RC5cBx6hjVagl2ABxtT2LXQLFkd3TV3oTrFTZB4psuRlZURwIwX+RlIvnbPm
								PDWMQpJW1ANLFyyOyoodK8+RTR43PuSoq57ICRZHra0LKY/1yJYSwTXwCIO37ltPwcJmlirtVEqXYFHOxRPS3xv7R+YyJ9lq
								tm5pwdIFK3UAJisFznDUNsqS8kAe5ASrJP+vNzi/UeejLHmoW+Gx80JvRZSeggWeFumjli7BmuOgBgUPisfrMTV71F1asmCR
								QpU7/JK8wZybmmyH2iDRGFKCNWWFVg+wzeqclHgt5xJVT34jic/eLXRvweK+4CRx7aeGWcHihu55I3rBKTI6l3WQWvStWLJg
								eaK7Qa7KK3y5NmpASrB6FJVsAS9Tgh91XkpWFlODnQ9VSnRsJbmhXvQWLNDrec4K1gk68kzwlCyZgxiUS6LoY1iyYHlruvN2
								zmUI4MzAM9QDKcGiQsS6QUyhzkvJStCTbNwCapnpuEruYVbJXkwhWCBXJt3DrGCx1J8beBu91R7m4D46wUJsBMECZOjnHBe8
								4HqcFJMSrJ5lnWuBt5AAY52b8ugJPYak2Xiek9LMjakE69LO3yzFRQrW3pF5rJPfL9j/x7BRBAvsFelDyYGqraccpwQLcvOv
								G2yBdV4xHtx4/8TAislTTgZxLzniC0wlWICtqfZXwsUJFje650RbSHY6x4OR/c2DVEJEEZe91+XaUqN7IwkW14dSu9qPsjWf
								MCdYraveHiCB12PLgtR9yzk3vKAGv8duBWuKCU4pWKTmpUqV57g4weJkD52DkpvkxtqwEqQMHRkZQ4m41WIjCRZgO5SrNIr9
								ZkdtWICcYJ00g33IA88RWyMJgm75TVilPdjhsR3Js1vjqZxSsACed+3Ty8UJFmVUdQ464V21USNQfSKndayQPIDEu9RgowkW
								2DPSl5L4vdpVRU6wIAGcvbIRWpBLzg+JDYetpCcJeQT2utsMBTO1v1VclVzswdSCxSo958BZxUUJFsJB/IrOIWTJgasl2MGR
								PEpKUg02omCBwyP9KXN19lfBI1gQDxjzwCzAqntMF6vhboNHuNT+RlrSFyNzSxGPKpU7KUyJQGCTYjXESxGnBUJMkv4BQ2Ve
								bZ9jyZFqiqkFC5DF4nEYKBclWERL6/gh2QqWJDmXAuOojhmSpO4abFTB4sEijkv7DImg1KSpeAVrCuJkSUX/x0Da2nGRvtbB
								2pfEiDkEC3Dwh/ad46IE66jI+CFbL0QOvNV0TOXO2siBjSpYgKOytE8lRtbS5Oh1ChbEGVNqb6L4nKeu+pTEC1e6QlTMJVjk
								r3o8nSEXI1hUWshVUWAZOTU4zELHDbmvNnBgIwsWoICi9qukSkYJ1i1YcD+dlAMc7Fprn2khv1evwy/mEizgsYWGPJ5GKdsN
								OUBzgOPBdOyQVIecA7nyyVSCKEVONAjGnAoURks9/LjHW4F7P2dnIYCyBDkv5Bz0nqOnwEhO1dHUc9WTPKOe47O8yB0kQb3+
								XmA1SNVXHWMVqbqSjOngwMQ5kBMs3LlzAFtE6gEnBKIGuOG1r5GU9p0SqcRTPE89kEsIxihdgnWsUpQkFbeAGnGeShe15D5l
								C1hTdjwFAk11rJA1u4wUth+2ejpOjJtOx0qVy5irPjX2Ah17JII6ZwJ26uw5DhWtAekR2tdISkhPCTxNOuZIAm974aBI/yOp
								DloCDh5JvTimJgUNa8NYQhA7RRngkpCEHAmNYFtWEhpRAlaIqUVMr7r9IagIk1uRsh3cdE3IEYtF7BLnUhN4VotYPAs3LXvq
								OUExuli0Pfa82jw5UklOjPTJRZi6MCLBsbFSPZzg3POwDV4qbP10HG7+mnE43p5y1pgD8MDNQWrEU2Wh1EngAZVcqfceuxY5
								Yt/FS024wtT3C9hjhU35UP1gR9wrUSoZb/T/1fMiahjBwKXLUVz8sHP8MCFQdgyHZHWzTaKKoufopSmwzZDWcOywLX6hmW2r
								HyoEonVI8BvzlsSzNAe2G8I2eAkxNqsuksx7YyxDzcOF6B84/JZb8T9gt9llSF8iiJQSRlTKRTB5gXF9iIo/bKjGQHXV3hVd
								PeB8TuxL1NI6ZtiOYROdEsSjUemXKriMy33Eaez//f7/AS4yCq8m6z2NAAAAAElFTkSuQmCC&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;g id=&quot;shape1291-476&quot; v:mID=&quot;1291&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(4217.92,-1511.25) rotate(30)&quot;&gt;
			&lt;title&gt;Usman Zafar Paracha 1.1291&lt;/title&gt;
			&lt;desc&gt;Usman Zafar Paracha&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(94000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;153.992&quot; cy=&quot;8327.64&quot; width=&quot;307.99&quot; height=&quot;48.7186&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8303.28&quot; width=&quot;307.985&quot; height=&quot;48.7186&quot; class=&quot;st6&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8336.64&quot; class=&quot;st7&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph/&gt;&lt;v:tabList/&gt;Usman Zafar Paracha&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1292-479&quot; v:mID=&quot;1292&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-2654.4)&quot;&gt;
			&lt;title&gt;FAS Height Equation&lt;/title&gt;
			&lt;desc&gt;FAS Height Equation&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(FAS Height Equation)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(FAS Height Equation)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(95000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;81&quot; cy=&quot;8302.5&quot; width=&quot;162&quot; height=&quot;99.0002&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8253&quot; width=&quot;162&quot; height=&quot;99.0002&quot; class=&quot;st8&quot;/&gt;
			&lt;text x=&quot;25.94&quot; y=&quot;8280&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;FAS Height &lt;tspan
						x=&quot;35.56&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;Equation&lt;/tspan&gt;&lt;v:newlineChar/&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1293-483&quot; v:mID=&quot;1293&quot; v:groupContext=&quot;shape&quot; v:layerMember=&quot;1&quot; transform=&quot;translate(99,-2654.4)&quot;&gt;
			&lt;title&gt;syntax 11&lt;/title&gt;
			&lt;desc&gt;syntax&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(96000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;145.454&quot; cy=&quot;8369.75&quot; width=&quot;75.01&quot; height=&quot;26.0035&quot;/&gt;
			&lt;path d=&quot;M0 8352 C-0 8365.5 45.83 8365.5 91.66 8365.5 C149.03 8365.5 206.4 8365.5 206.4 8521.88&quot; class=&quot;st19&quot;/&gt;
			&lt;rect v:rectContext=&quot;textBkgnd&quot; x=&quot;125.832&quot; y=&quot;8360.75&quot; width=&quot;39.2429&quot; height=&quot;18&quot; class=&quot;st14&quot;/&gt;
			&lt;text x=&quot;125.83&quot; y=&quot;8374.25&quot; class=&quot;st15&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;syntax&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1294-490&quot; v:mID=&quot;1294&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(322.8,-2538)&quot;&gt;
			&lt;title&gt;The height-based variant of the Full Age Spectrum model, deriving Q from a quadratic height function for improved accuracy when exact age is uncertain.&lt;/title&gt;
			&lt;desc&gt;The height-based variant of the Full Age Spectrum model, deri...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;Scale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;AntiScale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(The height-based variant of the Full Age Spectrum model, deriving Q from a quadratic height function for improved accuracy when exact age is uncertain. )&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot;
						v:val=&quot;VT4(The height-based variant of the Full Age Spectrum model, deriving Q from a quadratic height function for improved accuracy when exact age is uncertain. )&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(97000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;135.6&quot; cy=&quot;8239.8&quot; width=&quot;271.2&quot; height=&quot;224.4&quot;/&gt;
			&lt;path d=&quot;M0 8221.8 L0 8127.6 L117.6 8127.6 L135.6 8127.6 L153.6 8127.6 L271.2 8127.6 L271.2 8221.8 L271.2 8239.8 L271.2
						 8257.8 L271.2 8352 L153.6 8352 L135.6 8352 L117.6 8352 L0 8352 L0 8257.8 L-142.8 8186.1 L0 8221.8 Z&quot;
					class=&quot;st16&quot;/&gt;
			&lt;text x=&quot;9.12&quot; y=&quot;8157.3&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;The height-based variant &lt;tspan
						x=&quot;10.62&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;of the Full Age Spectrum &lt;/tspan&gt;&lt;tspan x=&quot;8.82&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;model, deriving Q from a &lt;/tspan&gt;&lt;tspan
						x=&quot;6.83&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;quadratic height function &lt;/tspan&gt;&lt;tspan x=&quot;21.96&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;for improved accuracy &lt;/tspan&gt;&lt;tspan
						x=&quot;45.89&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;when exact age is &lt;/tspan&gt;&lt;tspan x=&quot;83.84&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;uncertain. &lt;/tspan&gt; &lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1295-499&quot; v:mID=&quot;1295&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-2214)&quot;&gt;
			&lt;title&gt;Page Break 10.1295&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Page Break 10)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Page Break 10)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(98000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8280&quot; width=&quot;576&quot; height=&quot;72.0001&quot; class=&quot;st17&quot;/&gt;
		&lt;/g&gt;
		&lt;g id=&quot;shape1296-501&quot; v:mID=&quot;1296&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-2384.4)&quot;&gt;
			&lt;title&gt;eGFR = 107.3 / (0.45 / Q_ht) [Q_ht=0.317]&lt;/title&gt;
			&lt;desc&gt;eGFR = 107.3 / (0.45 / Q_ht) [Q_ht=0.317]&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(eGFR = 107.3 / (0.45 / Q_ht) [Q_ht=0.317])&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(eGFR = 107.3 / (0.45 / Q_ht) [Q_ht=0.317])&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(99000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;287.4&quot; cy=&quot;8301.94&quot; width=&quot;574.81&quot; height=&quot;100.125&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8251.87&quot; width=&quot;574.8&quot; height=&quot;100.125&quot; class=&quot;st10&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8294.44&quot; class=&quot;st11&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;eGFR = 107.3 / (0.45 / Q_ht) &lt;tspan
						x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;[Q_ht=0.317]&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1297-505&quot; v:mID=&quot;1297&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(19.2,-1738.2)&quot;&gt;
			&lt;title&gt;Patreon and LinkedIn links.1297&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Linkedin and Patreon links)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(100000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8293.5&quot; width=&quot;576&quot; height=&quot;58.5&quot; class=&quot;st1&quot;/&gt;
		&lt;/g&gt;
		&lt;a xlink:href=&quot;https://www.linkedin.com/in/usmanzafarparacha/&quot; xlink:title=&quot;LinkedIn Profile&quot;&gt;
			&lt;g id=&quot;group1298-507&quot; transform=&quot;translate(329.7,-1751.32)&quot; v:mID=&quot;1298&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(101000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;LinkedIn Profile.1298&lt;/title&gt;
				&lt;g id=&quot;shape1299-508&quot; v:mID=&quot;1299&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(29.25,-0.532647)&quot;&gt;
					&lt;title&gt;/usmanzafarparacha&lt;/title&gt;
					&lt;desc&gt;/usmanzafarparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(/usmanzafarparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;111.375&quot; cy=&quot;8337.91&quot; width=&quot;222.76&quot; height=&quot;28.1847&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.82&quot; width=&quot;222.75&quot; height=&quot;28.1847&quot; class=&quot;st2&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.41&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/usmanzafarparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape62-511&quot; v:mID=&quot;62&quot; v:groupContext=&quot;shape&quot;&gt;
					&lt;title&gt;LinkedIn&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(LinkedIn)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8322.75&quot; width=&quot;29.25&quot; height=&quot;29.25&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;a xlink:href=&quot;https://www.patreon.com/uzparacha&quot; xlink:title=&quot;Patreon profile&quot;&gt;
			&lt;g id=&quot;group1300-515&quot; transform=&quot;translate(37.2,-1751.92)&quot; v:mID=&quot;1300&quot; v:groupContext=&quot;group&quot;&gt;
				&lt;v:userDefs&gt;
					&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon profile)&quot;/&gt;
					&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(102000):26&quot;/&gt;
				&lt;/v:userDefs&gt;
				&lt;title&gt;Patreon profile.1300&lt;/title&gt;
				&lt;g id=&quot;shape1301-516&quot; v:mID=&quot;1301&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(117,0)&quot;&gt;
					&lt;title&gt;/uzparacha&lt;/title&gt;
					&lt;desc&gt;/uzparacha&lt;/desc&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(uzparacha)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
					&lt;v:textRect cx=&quot;65.25&quot; cy=&quot;8337.97&quot; width=&quot;130.51&quot; height=&quot;28.0568&quot;/&gt;
					&lt;rect x=&quot;0&quot; y=&quot;8323.94&quot; width=&quot;130.5&quot; height=&quot;28.0568&quot; class=&quot;st5&quot;/&gt;
					&lt;text x=&quot;4&quot; y=&quot;8345.47&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;/uzparacha&lt;/text&gt;				&lt;/g&gt;
				&lt;g id=&quot;shape63-519&quot; v:mID=&quot;63&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(0,-4.27832)&quot;&gt;
					&lt;title&gt;Patreon&lt;/title&gt;
					&lt;v:userDefs&gt;
						&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
						&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Patreon)&quot;/&gt;
					&lt;/v:userDefs&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
					&lt;image x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; preserveAspectRatio=&quot;none&quot; xlink:href=&quot;data:image/png;base64,
								iVBORw0KGgoAAAANSUhEUgAAASwAAAAyCAYAAADm1uYqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAA
								EnQAABJ0Ad5mH3gAABHLSURBVHhe7Z111C1VGcZfu1tRbFFUJGyxxe7EwMLGzqVLTESxFbsQDFRkKS5R7MBCbDGwxRbFBLt1
								/e6a0e3DPnu/O2bO3O/eZ63nn+87O86ZmWf2fmubbSyczcweb2ZfMbM/mdkPzexQM7uCfnArtmJNOJOZ3cjM9jOztw336i/N
								7I9m9m8z+42Z/cTMjjKzg8zsIWa2o5mdQjuaAbcysw8Mc/qrmX3HzJ5nZufVD3bGTmb2bjP7vZn9wczea2a7hB+4lpm9z8x+
								NvxoJfz18EU+Y2ZHmNk+wwU5azjADLiYmX07Mj/4DzPbSxsU4pJmdrCZfWO4gOvkl8zsZWa2jU5yBe5kZh8bHgz9bTz859CW
								35fr/A4ze5KZXd/MzqKDdcItzexDZnZCZD5TkHuE+/hAMzu/TqYRpzGz3c3s8OHB17E9/LGZPWcQrzmwf2QOI7kmV9YGncBz
								/NvImCeZ2cX5wO3N7F+RD7SSG+AjZnZPMzudzqozzjjcbDoH5fW0oRPbr/gR183jzOzsOlnBfSPtepLrjIDdxMxOqYNXYqp7
								0svjC14GKZzezB5qZj+IjFFLfhcWBlfVwTriLpFxlYjWdtqwA14RGWskLxP7auQfvckSlwen1w2teHhkzBhZmdQsrV8S6Wsp
								fKxOVvD1SJupyEsDsWnF0ZG+5+YjdVKFuKnzJVpLhIsV//l04A44NjJejMcMq8ee+GZknJG8oO3vkX9MxU+Y2UV0hh3wtchY
								q3gdbewA2yntZyk8RCcb4LTDCkjbTM3DBntiLX4X6XNuvkon5cQZzOzVkf6m4q+G7XMvXCgyRop7aweN4PvoGCO5L072x6mJ
								LeQqOssGsDTWMVJ8vXbgwFsi/SyFL9XJBsDAq5+fixiTa9/+f4v0Nzcfp5Ny4MLD99a+piarrWdW7h4U14z0nyLOrZ5bQ2y0
								OsZIDPAn++McxIB2eZ1pJQ6I9J8i3phSh8DdI/0sgdyo19DJBlinYEG24DVG+XULFt6pTQbeAlxmMIxrX3OSl/GpdWKFwBap
								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&quot;/&gt;
					&lt;rect v:rectContext=&quot;foreign&quot; x=&quot;0&quot; y=&quot;8332.5&quot; width=&quot;117.001&quot; height=&quot;19.5002&quot; class=&quot;st4&quot;/&gt;
				&lt;/g&gt;
			&lt;/g&gt;
		&lt;/a&gt;
		&lt;g id=&quot;shape1302-523&quot; v:mID=&quot;1302&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(4219.12,-944.853) rotate(30)&quot;&gt;
			&lt;title&gt;Usman Zafar Paracha 1.1302&lt;/title&gt;
			&lt;desc&gt;Usman Zafar Paracha&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Usman Zafar Paracha)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(103000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;153.992&quot; cy=&quot;8327.64&quot; width=&quot;307.99&quot; height=&quot;48.7186&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8303.28&quot; width=&quot;307.985&quot; height=&quot;48.7186&quot; class=&quot;st6&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8336.64&quot; class=&quot;st7&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph/&gt;&lt;v:tabList/&gt;Usman Zafar Paracha&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1303-526&quot; v:mID=&quot;1303&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(19.2,-2088)&quot;&gt;
			&lt;title&gt;Léger Equation (Absolute)&lt;/title&gt;
			&lt;desc&gt;Léger Equation (Absolute)&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Léger Equation (Absolute))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Léger Equation (Absolute))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(104000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;81&quot; cy=&quot;8302.5&quot; width=&quot;162&quot; height=&quot;99.0002&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8253&quot; width=&quot;162&quot; height=&quot;99.0002&quot; class=&quot;st8&quot;/&gt;
			&lt;text x=&quot;4.8&quot; y=&quot;8295&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;Léger Equation &lt;tspan
						x=&quot;28.3&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;(Absolute)&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1304-530&quot; v:mID=&quot;1304&quot; v:groupContext=&quot;shape&quot; v:layerMember=&quot;1&quot; transform=&quot;translate(100.2,-2088)&quot;&gt;
			&lt;title&gt;syntax 12&lt;/title&gt;
			&lt;desc&gt;syntax&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(syntax)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(105000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;145.454&quot; cy=&quot;8369.75&quot; width=&quot;75.01&quot; height=&quot;26.0035&quot;/&gt;
			&lt;path d=&quot;M0 8352 C0 8365.5 45.83 8365.5 91.66 8365.5 C149.03 8365.5 206.4 8365.5 206.4 8521.88&quot; class=&quot;st19&quot;/&gt;
			&lt;rect v:rectContext=&quot;textBkgnd&quot; x=&quot;125.832&quot; y=&quot;8360.75&quot; width=&quot;39.2429&quot; height=&quot;18&quot; class=&quot;st14&quot;/&gt;
			&lt;text x=&quot;125.83&quot; y=&quot;8374.25&quot; class=&quot;st15&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;syntax&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1305-537&quot; v:mID=&quot;1305&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(322.8,-1971)&quot;&gt;
			&lt;title&gt;A weight-augmented formula yielding absolute (non-indexed) clearance in mL/min, useful when body surface area normalization is not desired.&lt;/title&gt;
			&lt;desc&gt;A weight-augmented formula yielding absolute (non-indexed) cl...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;Scale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;AntiScale&quot; v:val=&quot;VT0(1):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(A weight-augmented formula yielding absolute (non-indexed) clearance in mL/min, useful when body surface area normalization is not desired.)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot;
						v:val=&quot;VT4(A weight-augmented formula yielding absolute (non-indexed) clearance in mL/min, useful when body surface area normalization is not desired.)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(106000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;135.6&quot; cy=&quot;8239.5&quot; width=&quot;271.2&quot; height=&quot;225&quot;/&gt;
			&lt;path d=&quot;M0 8221.5 L0 8127 L117.6 8127 L135.6 8127 L153.6 8127 L271.2 8127 L271.2 8221.5 L271.2 8239.5 L271.2 8257.5
						 L271.2 8352 L153.6 8352 L135.6 8352 L117.6 8352 L0 8352 L0 8257.5 L-141.6 8185.5 L0 8221.5 Z&quot; class=&quot;st16&quot;/&gt;
			&lt;text x=&quot;28.87&quot; y=&quot;8157&quot; class=&quot;st3&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:horizAlign=&quot;1&quot;/&gt;&lt;v:tabList/&gt;A weight-augmented &lt;tspan
						x=&quot;6.39&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;formula yielding absolute &lt;/tspan&gt;&lt;tspan x=&quot;12.44&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;(non&lt;/tspan&gt;-indexed) clearance &lt;tspan
						x=&quot;15.86&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;in mL/min, useful when &lt;/tspan&gt;&lt;tspan x=&quot;44.89&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;body surface area &lt;/tspan&gt;&lt;tspan
						x=&quot;34.48&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;normalization is not &lt;/tspan&gt;&lt;tspan x=&quot;94.76&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;desired.&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1306-546&quot; v:mID=&quot;1306&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,-1656)&quot;&gt;
			&lt;title&gt;Page Break 10.1306&lt;/title&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(Page Break 10)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot; v:val=&quot;VT4(Page Break 10)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(107000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8280&quot; width=&quot;576&quot; height=&quot;72.0001&quot; class=&quot;st17&quot;/&gt;
		&lt;/g&gt;
		&lt;g id=&quot;shape1307-548&quot; v:mID=&quot;1307&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(19.2,-1818)&quot;&gt;
			&lt;title&gt;eGFR = (56.7 × body weight (kg) + 0.142 × (body height or length (cm))²) / serum creatinine (mg/dL)&lt;/title&gt;
			&lt;desc&gt;eGFR = (56.7 × body weight (kg) + 0.142 × (body height or len...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot;
						v:val=&quot;VT4(eGFR = (56.7 × body weight (kg) + 0.142 × (body height or length (cm))²) / serum creatinine (mg/dL))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(eGFR = (56.7 × body weight (kg) + 0.142 × (body height or length (cm))²) / serum creatinine (mg/dL))&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(108000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;287.4&quot; cy=&quot;8301.94&quot; width=&quot;574.81&quot; height=&quot;100.125&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;8251.87&quot; width=&quot;574.8&quot; height=&quot;100.125&quot; class=&quot;st10&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;8279.44&quot; class=&quot;st11&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph v:bulletSize=&quot;0.166667&quot;/&gt;&lt;v:tabList/&gt;eGFR = (56.7 × body weight (kg) + &lt;tspan
						x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;0.142 × (body height or length &lt;/tspan&gt;&lt;tspan x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st9&quot;&gt;(cm))&lt;/tspan&gt;²) / serum creatinine (mg/dL)&lt;/text&gt;		&lt;/g&gt;
		&lt;g id=&quot;shape1308-553&quot; v:mID=&quot;1308&quot; v:groupContext=&quot;shape&quot; transform=&quot;translate(18,0)&quot;&gt;
			&lt;title&gt;References&lt;/title&gt;
			&lt;desc&gt;References Schwartz, G. J., Haycock, G. B., Edelmann Jr, C. M...&lt;/desc&gt;
			&lt;v:userDefs&gt;
				&lt;v:ud v:nameU=&quot;visVersion&quot; v:val=&quot;VT0(15):26&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltText&quot; v:val=&quot;VT4(References)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visAltDescription&quot;
						v:val=&quot;VT4(References&amp;#10;Schwartz, G. J., Haycock, G. B., Edelmann Jr, C. M., &amp;#38; Spitzer, A. (1976). A simple estimate of glomerular filtration rate in children derived from body length and plasma creatinine. Pediatrics, 58(2), 259-263.&amp;#10;&amp;#10;Schwartz, G. J., Feld, L. G.,)&quot;/&gt;
				&lt;v:ud v:nameU=&quot;visNavOrder&quot; v:val=&quot;VT0(109000):26&quot;/&gt;
			&lt;/v:userDefs&gt;
			&lt;v:textBlock v:margins=&quot;rect(4,4,4,4)&quot;/&gt;
			&lt;v:textRect cx=&quot;288&quot; cy=&quot;7533&quot; width=&quot;576&quot; height=&quot;1638&quot;/&gt;
			&lt;rect x=&quot;0&quot; y=&quot;6714&quot; width=&quot;576&quot; height=&quot;1638&quot; class=&quot;st21&quot;/&gt;
			&lt;text x=&quot;4&quot; y=&quot;6745.49&quot; class=&quot;st22&quot; v:langID=&quot;1033&quot;&gt;&lt;v:paragraph/&gt;&lt;v:tabList/&gt;References&lt;v:newlineChar/&gt;&lt;tspan x=&quot;4&quot;
						dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;Schwartz, G. J., Haycock, G. B., Edelmann Jr, C. M., &amp;#38; &lt;/tspan&gt;&lt;tspan x=&quot;4&quot;
						dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;Spitzer, A. (1976). A simple estimate of glomerular &lt;/tspan&gt;&lt;tspan x=&quot;4&quot; dy=&quot;1.2em&quot;
						class=&quot;st23&quot;&gt;filtration rate in children derived from body length and &lt;/tspan&gt;&lt;tspan x=&quot;4&quot; dy=&quot;1.2em&quot;
						class=&quot;st23&quot;&gt;plasma creatinine. Pediatrics, 58(2), 259&lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;-&lt;/tspan&gt;&lt;tspan
						class=&quot;st23&quot;&gt;263.&lt;v:newlineChar/&gt;&lt;v:newlineChar/&gt;&lt;/tspan&gt;&lt;tspan x=&quot;4&quot; dy=&quot;2.4em&quot; class=&quot;st23&quot;&gt;Schwartz, G. J., Feld, L. G., &amp;#38; Langford, D. J. (1984). A &lt;/tspan&gt;&lt;tspan
						x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;simple estimate of glomerular filtration ratein full&lt;/tspan&gt;&lt;tspan
						class=&quot;st23&quot;&gt;-&lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;term &lt;/tspan&gt;&lt;tspan x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;infants during the first year of life. The Journal of &lt;/tspan&gt;&lt;tspan
						x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;pediatrics, 104(6), 849&lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;-&lt;/tspan&gt;&lt;tspan
						class=&quot;st23&quot;&gt;854.&lt;v:newlineChar/&gt;&lt;v:newlineChar/&gt;&lt;/tspan&gt;&lt;tspan x=&quot;4&quot; dy=&quot;2.4em&quot; class=&quot;st23&quot;&gt;Brion, L. P., Fleischman, A. R., McCarton, C., &amp;#38; &lt;/tspan&gt;&lt;tspan
						x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;Schwartz, G. J. (1986). A simple estimate of glomerular &lt;/tspan&gt;&lt;tspan x=&quot;4&quot;
						dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;filtration rate in low birth weight infants during the first &lt;/tspan&gt;&lt;tspan x=&quot;4&quot;
						dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;year of &lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;life: noninvasive assessment of body &lt;/tspan&gt;&lt;tspan
						x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;composition and growth. The Journal of pediatrics, &lt;/tspan&gt;&lt;tspan x=&quot;4&quot;
						dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;109(4), 698&lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;-&lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;707.&lt;v:newlineChar/&gt;&lt;v:newlineChar/&gt;&lt;/tspan&gt;&lt;tspan
						x=&quot;4&quot; dy=&quot;2.4em&quot; class=&quot;st23&quot;&gt;Schwartz, G. J., Mun, A., Schneider, M. F., Mak, R. H., &lt;/tspan&gt;&lt;tspan x=&quot;4&quot;
						dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;Kaskel, F., Warady, B. A., &amp;#38; Furth, S. L. (2009). New &lt;/tspan&gt;&lt;tspan x=&quot;4&quot;
						dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;equations to estimate GFR in children with CKD. Journal &lt;/tspan&gt;&lt;tspan x=&quot;4&quot;
						dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;of the American Society of Nephrology, 20(3), 629&lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;-&lt;/tspan&gt;&lt;tspan
						class=&quot;st23&quot;&gt;637.&lt;v:newlineChar/&gt;&lt;v:newlineChar/&gt;&lt;/tspan&gt;&lt;tspan x=&quot;4&quot; dy=&quot;2.4em&quot; class=&quot;st23&quot;&gt;Counahan, R., Chantler, C., Ghazali, S., Kirkwood, B. E. &lt;/tspan&gt;&lt;tspan
						x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;T. T. Y., Rose, F. R. A. N. C. E. S., &amp;#38; Barratt, T. M. (1976). &lt;/tspan&gt;&lt;tspan
						x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;Estimation of glomerular filtration rate from plasma &lt;/tspan&gt;&lt;tspan x=&quot;4&quot;
						dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;creatinine concentration in children. Archives of &lt;/tspan&gt;&lt;tspan x=&quot;4&quot; dy=&quot;1.2em&quot;
						class=&quot;st23&quot;&gt;disease in childhood, &lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;51(11), 875&lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;-&lt;/tspan&gt;&lt;tspan
						class=&quot;st23&quot;&gt;878.&lt;v:newlineChar/&gt;&lt;v:newlineChar/&gt;&lt;/tspan&gt;&lt;tspan x=&quot;4&quot; dy=&quot;2.4em&quot; class=&quot;st23&quot;&gt;Hoste, L., Dubourg, L., Selistre, L., De Souza, V. C., &lt;/tspan&gt;&lt;tspan
						x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;Ranchin, B., Hadj&lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;-&lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;Aïssa, A., ... &amp;#38; Pottel, H. (2014). A new &lt;/tspan&gt;&lt;tspan
						x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;equation to estimate the glomerular filtration rate in &lt;/tspan&gt;&lt;tspan x=&quot;4&quot;
						dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;children, adolescents and young adults. Nephrology &lt;/tspan&gt;&lt;tspan x=&quot;4&quot; dy=&quot;1.2em&quot;
						class=&quot;st23&quot;&gt;Dialysis Transplantation, 29(5), 1082&lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;-&lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;1091.&lt;v:newlineChar/&gt;&lt;v:newlineChar/&gt;&lt;/tspan&gt;&lt;tspan
						x=&quot;4&quot; dy=&quot;2.4em&quot; class=&quot;st23&quot;&gt;Léger, F., Bouissou, F., Coulais, Y., Tafani, M., &amp;#38; &lt;/tspan&gt;&lt;tspan x=&quot;4&quot;
						dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;Chatelut, E. (2002). Estimation of glomerular filtration &lt;/tspan&gt;&lt;tspan x=&quot;4&quot;
						dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;rate in children. Pediatric nephrology, 17(11), 903&lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;-&lt;/tspan&gt;&lt;tspan
						class=&quot;st23&quot;&gt;907.&lt;v:newlineChar/&gt;&lt;v:newlineChar/&gt;&lt;/tspan&gt;&lt;tspan x=&quot;4&quot; dy=&quot;2.4em&quot; class=&quot;st23&quot;&gt;Pottel, H., Hoste, L., &amp;#38; Martens, F. (2012). A simple &lt;/tspan&gt;&lt;tspan
						x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;height&lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;-&lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;independent equation for estimating glomerular &lt;/tspan&gt;&lt;tspan
						x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;filtration rate in children. Pediatric Nephrology, 27(6), &lt;/tspan&gt;&lt;tspan
						x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;973&lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;-&lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;979.&lt;v:newlineChar/&gt;&lt;v:newlineChar/&gt;&lt;/tspan&gt;&lt;tspan
						x=&quot;4&quot; dy=&quot;2.4em&quot; class=&quot;st23&quot;&gt;Pottel, H., Delanaye, P., Schaeffner, E., Dubourg, L., &lt;/tspan&gt;&lt;tspan x=&quot;4&quot;
						dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;Eriksen, B. O., Melsom, T., ... &amp;#38; Ebert, N. (2017). &lt;/tspan&gt;&lt;tspan x=&quot;4&quot;
						dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;Estimating glomerular filtration rate for the full age &lt;/tspan&gt;&lt;tspan x=&quot;4&quot;
						dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;spectrum from serum creatinine and cystatin C. &lt;/tspan&gt;&lt;tspan x=&quot;4&quot; dy=&quot;1.2em&quot;
						class=&quot;st23&quot;&gt;Nephrology Dialysis Transplantation, 32(3), 497&lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;-&lt;/tspan&gt;&lt;tspan
						class=&quot;st23&quot;&gt;507.&lt;v:newlineChar/&gt;&lt;v:newlineChar/&gt;&lt;/tspan&gt;&lt;tspan x=&quot;4&quot; dy=&quot;2.4em&quot; class=&quot;st23&quot;&gt;Pottel, H., Mottaghy, F. M., Zaman, Z., &amp;#38; Martens, F. &lt;/tspan&gt;&lt;tspan
						x=&quot;4&quot; dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;(2010). On the relationship between glomerular &lt;/tspan&gt;&lt;tspan x=&quot;4&quot;
						dy=&quot;1.2em&quot; class=&quot;st23&quot;&gt;filtration rate and serum creatinine in children. &lt;/tspan&gt;&lt;tspan x=&quot;4&quot; dy=&quot;1.2em&quot;
						class=&quot;st23&quot;&gt;Pediatric nephrology, 25(5), 927&lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;-&lt;/tspan&gt;&lt;tspan class=&quot;st23&quot;&gt;934.&lt;/tspan&gt;&lt;/text&gt;		&lt;/g&gt;
	&lt;/g&gt;
&lt;/svg&gt;
Note: This calculator is for educational purpose. You may need to take expert advise regarding woking of your kidneys.</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/340069930089709849/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/340069930089709849' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/340069930089709849'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/340069930089709849'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2026/06/pediatric-renal-function-and-gfr.html' title='Pediatric Renal Function and GFR Calculator - 12 Formulae'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWXV-kHfVT28v95cSrnYQAwMpZE1rqeKbEWD3VufvjnOrcBDaH1mj95WAnrVMt9vqkaJDzfFKb3r4nPFH6QWzOvbowFb3_TaTxHVpLKYvgBKexN63EY4-b4k3GYZPPyI0LraKS5687JcYYB0A_Zanh5w_ory2QaincY2mTY2U33i1KIT7c5jWbm8Ot4ry1/s72-c/Cover%20image.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-4116605510117701898</id><published>2026-05-19T12:25:36.226+05:00</published><updated>2026-05-19T12:26:10.982+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="calculator"/><category scheme="http://www.blogger.com/atom/ns#" term="medical"/><category scheme="http://www.blogger.com/atom/ns#" term="Medicine"/><category scheme="http://www.blogger.com/atom/ns#" term="pediatric"/><category scheme="http://www.blogger.com/atom/ns#" term="Pharmaceutics"/><title type='text'>Pediatric Dosage Calculator - 10 Formulae</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1OX0Pfa5VzS4GFM3HpHnbsTyGRjXb9sbiPrxaPNkNGtzcgvoxFK4mXD3lUVHnFotsVlndgGsyieSRTUHcZoY-JOoNEaIRKFi3IglhNyh9xVMhBunq5p2R-pAPCp78iIDGIO3d9DhIcx40B1yGyhjL2eENBrng9KmGT1l287NwnXFJey9JBW72DiTNEODB/s647/Pediatric%20dose%20image%20cover.png&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;400&quot; data-original-height=&quot;364&quot; data-original-width=&quot;647&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1OX0Pfa5VzS4GFM3HpHnbsTyGRjXb9sbiPrxaPNkNGtzcgvoxFK4mXD3lUVHnFotsVlndgGsyieSRTUHcZoY-JOoNEaIRKFi3IglhNyh9xVMhBunq5p2R-pAPCp78iIDGIO3d9DhIcx40B1yGyhjL2eENBrng9KmGT1l287NwnXFJey9JBW72DiTNEODB/s400/Pediatric%20dose%20image%20cover.png&quot;/&gt;&lt;/a&gt;&lt;/div&gt;

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Pediatric Dosage Calculator&lt;/title&gt;
    &lt;style&gt;
        :root {
            --primary-color: #0284c7;
            --primary-hover: #0369a1;
            --bg-color: #f8fafc;
            --card-bg: #ffffff;
            --text-main: #334155;
            --border-color: #e2e8f0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-main);
            line-height: 1.5;
            padding: 20px;
            margin: 0;
        }

        .calc-container {
            max-width: 900px;
            margin: 0 auto;
            background: var(--card-bg);
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
            border: 1px solid var(--border-color);
            padding: 24px;
        }

        h2 {
            color: var(--primary-color);
            margin-top: 0;
            border-bottom: 2px solid var(--border-color);
            padding-bottom: 10px;
        }

        .grid-inputs {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }

        .input-group {
            display: flex;
            flex-direction: column;
        }

        .input-group label {
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 6px;
            color: #475569;
        }

        .input-group input, .input-group select {
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 1rem;
            outline: none;
        }

        .input-group input:focus, .input-group select:focus {
            border-color: var(--primary-color);
        }

        .btn-calc {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 24px;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 6px;
            cursor: pointer;
            width: 100%;
            transition: background-color 0.2s;
            margin-bottom: 24px;
        }

        .btn-calc:hover {
            background-color: var(--primary-hover);
        }

        .results-layout {
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
        }

        @media (min-width: 768px) {
            .results-layout {
                grid-template-columns: 1.2fr 0.8fr;
            }
        }

        .table-wrapper {
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            font-size: 0.95rem;
        }

        th, td {
            padding: 12px;
            border-bottom: 1px solid var(--border-color);
        }

        th {
            background-color: #f1f5f9;
            color: #1e293b;
            font-weight: 600;
        }

        .active-row {
            background-color: #f0f9ff !important;
            font-weight: bold;
            color: var(--primary-color);
        }

        .visualization {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 16px;
            background: #fafafa;
        }

        .visualization h3 {
            margin-top: 0;
            font-size: 1.1rem;
            color: #1e293b;
            text-align: center;
            margin-bottom: 15px;
        }

        canvas {
            max-width: 100%;
            height: auto;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;calc-container&quot;&gt;
    &lt;h2&gt;Pediatric Dosage Calculator&lt;/h2&gt;
    
    &lt;div class=&quot;grid-inputs&quot;&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;label for=&quot;adultDose&quot;&gt;Adult Dose (mg)&lt;/label&gt;
            &lt;input type=&quot;number&quot; id=&quot;adultDose&quot; value=&quot;500&quot; min=&quot;0&quot; step=&quot;any&quot; oninput=&quot;calculateDosages()&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;label for=&quot;ageYears&quot;&gt;Age (Years)&lt;/label&gt;
            &lt;input type=&quot;number&quot; id=&quot;ageYears&quot; value=&quot;6&quot; min=&quot;0&quot; oninput=&quot;calculateDosages()&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;label for=&quot;ageMonths&quot;&gt;Age (Months - Fried&#39;s)&lt;/label&gt;
            &lt;input type=&quot;number&quot; id=&quot;ageMonths&quot; value=&quot;72&quot; min=&quot;0&quot; oninput=&quot;calculateDosages()&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;label for=&quot;weightKg&quot;&gt;Weight (kg)&lt;/label&gt;
            &lt;input type=&quot;number&quot; id=&quot;weightKg&quot; value=&quot;20&quot; min=&quot;0&quot; step=&quot;any&quot; oninput=&quot;calculateDosages()&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;label for=&quot;weightLbs&quot;&gt;Weight (lbs)&lt;/label&gt;
            &lt;input type=&quot;number&quot; id=&quot;weightLbs&quot; value=&quot;44&quot; min=&quot;0&quot; step=&quot;any&quot; oninput=&quot;calculateDosages()&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;label for=&quot;heightCm&quot;&gt;Height (cm - BSA)&lt;/label&gt;
            &lt;input type=&quot;number&quot; id=&quot;heightCm&quot; value=&quot;115&quot; min=&quot;0&quot; step=&quot;any&quot; oninput=&quot;calculateDosages()&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;label for=&quot;ruleSelect&quot;&gt;Select Formula to Visualize&lt;/label&gt;
            &lt;select id=&quot;ruleSelect&quot; onchange=&quot;calculateDosages()&quot;&gt;
                &lt;option value=&quot;Young&#39;s Rule&quot;&gt;Young&#39;s Rule&lt;/option&gt;
                &lt;option value=&quot;Dilling&#39;s Rule&quot;&gt;Dilling&#39;s Rule&lt;/option&gt;
                &lt;option value=&quot;Bastedo&#39;s Rule&quot;&gt;Bastedo&#39;s Rule&lt;/option&gt;
                &lt;option value=&quot;Fried&#39;s Rule&quot;&gt;Fried&#39;s Rule&lt;/option&gt;
                &lt;option value=&quot;Cowling&#39;s Rule&quot;&gt;Cowling&#39;s Rule&lt;/option&gt;
                &lt;option value=&quot;Webster&#39;s Rule&quot;&gt;Webster&#39;s Rule&lt;/option&gt;
                &lt;option value=&quot;Clark&#39;s Rule (kg)&quot;&gt;Clark&#39;s Rule (kg)&lt;/option&gt;
                &lt;option value=&quot;Clark&#39;s Rule (lbs)&quot;&gt;Clark&#39;s Rule (lbs)&lt;/option&gt;
                &lt;option value=&quot;Modified Weight Rule&quot;&gt;Modified Weight Rule&lt;/option&gt;
                &lt;option value=&quot;Majid&#39;s Rule&quot;&gt;Majid&#39;s Rule&lt;/option&gt;
                &lt;option value=&quot;Body Surface Area (BSA)-Based Formula&quot;&gt;BSA-Based Formula&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;button class=&quot;btn-calc&quot; onclick=&quot;calculateDosages()&quot;&gt;Refresh Calculations&lt;/button&gt;

    &lt;div class=&quot;results-layout&quot;&gt;
        &lt;div class=&quot;table-wrapper&quot;&gt;
            &lt;table&gt;
                &lt;thead&gt;
                    &lt;tr&gt;
                        &lt;th&gt;Rule / Formula Name&lt;/th&gt;
                        &lt;th&gt;Calculated Dose&lt;/th&gt;
                    &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody id=&quot;resultsTableBody&quot;&gt;
                    &lt;!-- Dynamic updates --&gt;
                &lt;/tbody&gt;
            &lt;/table&gt;
        &lt;/div&gt;

        &lt;div class=&quot;visualization&quot;&gt;
            &lt;h3 id=&quot;gaugeTitle&quot;&gt;Visualizing: Young&#39;s Rule&lt;/h3&gt;
            &lt;canvas id=&quot;gaugeCanvas&quot; width=&quot;300&quot; height=&quot;200&quot;&gt;&lt;/canvas&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
    // Bidirectional sync between inputs
    document.getElementById(&#39;weightKg&#39;).addEventListener(&#39;input&#39;, function() {
        if(this.value) document.getElementById(&#39;weightLbs&#39;).value = (this.value * 2.20462).toFixed(1);
    });
    document.getElementById(&#39;weightLbs&#39;).addEventListener(&#39;input&#39;, function() {
        if(this.value) document.getElementById(&#39;weightKg&#39;).value = (this.value / 2.20462).toFixed(1);
    });
    document.getElementById(&#39;ageYears&#39;).addEventListener(&#39;input&#39;, function() {
        if(this.value) document.getElementById(&#39;ageMonths&#39;).value = Math.round(this.value * 12);
    });

    function calculateDosages() {
        const adultDose = parseFloat(document.getElementById(&#39;adultDose&#39;).value) || 0;
        const ageY = parseFloat(document.getElementById(&#39;ageYears&#39;).value) || 0;
        const ageM = parseFloat(document.getElementById(&#39;ageMonths&#39;).value) || 0;
        const wtKg = parseFloat(document.getElementById(&#39;weightKg&#39;).value) || 0;
        const wtLbs = parseFloat(document.getElementById(&#39;weightLbs&#39;).value) || 0;
        const htCm = parseFloat(document.getElementById(&#39;heightCm&#39;).value) || 0;
        const selectedRule = document.getElementById(&#39;ruleSelect&#39;).value;

        // Exactly mapped formulas matching the dropdown values
        const formulas = {
            &quot;Young&#39;s Rule&quot;: (ageY / (ageY + 12)) * adultDose,
            &quot;Dilling&#39;s Rule&quot;: (ageY / 20) * adultDose,
            &quot;Bastedo&#39;s Rule&quot;: ((ageY + 3) / 30) * adultDose,
            &quot;Fried&#39;s Rule&quot;: (ageM / 150) * adultDose,
            &quot;Cowling&#39;s Rule&quot;: ((ageY + 1) / 24) * adultDose,
            &quot;Webster&#39;s Rule&quot;: ((ageY + 1) / (ageY + 7)) * adultDose,
            &quot;Clark&#39;s Rule (kg)&quot;: (wtKg / 70) * adultDose,
            &quot;Clark&#39;s Rule (lbs)&quot;: (wtLbs / 150) * adultDose,
            &quot;Modified Weight Rule&quot;: (wtKg / 50) * adultDose,
            &quot;Majid&#39;s Rule&quot;: (adultDose / 70) * wtKg,
            &quot;Body Surface Area (BSA)-Based Formula&quot;: (function() {
                if (wtKg &lt;= 0 || htCm &lt;= 0) return 0;
                const bsa = Math.sqrt((wtKg * htCm) / 3600);
                return (bsa / 1.73) * adultDose;
            })()
        };

        // Render Table and apply a highlight class to the active rule
        const tbody = document.getElementById(&#39;resultsTableBody&#39;);
        tbody.innerHTML = &#39;&#39;;
        
        for (const [key, val] of Object.entries(formulas)) {
            const row = document.createElement(&#39;tr&#39;);
            if (key === selectedRule) {
                row.className = &#39;active-row&#39;;
            }
            row.innerHTML = `
                &lt;td&gt;${key}&lt;/td&gt;
                &lt;td&gt;${val &gt; 0 ? val.toFixed(2) : &#39;0.00&#39;} mg&lt;/td&gt;
            `;
            tbody.appendChild(row);
        }

        // Update Gauge Title and Canvas Draw
        document.getElementById(&#39;gaugeTitle&#39;).innerText = `Visualizing: ${selectedRule}`;
        const childDose = formulas[selectedRule] || 0;
        drawGauge(childDose, adultDose);
    }

    function drawGauge(childDose, adultDose) {
        const canvas = document.getElementById(&#39;gaugeCanvas&#39;);
        const ctx = canvas.getContext(&#39;2d&#39;);
        
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        const centerX = canvas.width / 2;
        const centerY = canvas.height - 40;
        const radius = 100;
        
        let fraction = adultDose &gt; 0 ? childDose / adultDose : 0;
        if (fraction &gt; 1) fraction = 1; 
        
        // Base track arc
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, Math.PI, 2 * Math.PI, false);
        ctx.lineWidth = 24;
        ctx.strokeStyle = &#39;#e2e8f0&#39;;
        ctx.lineCap = &#39;round&#39;;
        ctx.stroke();
        
        // Active filled dosage arc
        if (fraction &gt; 0) {
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, Math.PI, Math.PI + (Math.PI * fraction), false);
            ctx.lineWidth = 24;
            ctx.strokeStyle = &#39;#0284c7&#39;;
            ctx.lineCap = &#39;round&#39;;
            ctx.stroke();
        }
        
        // Center text metrics
        ctx.fillStyle = &#39;#1e293b&#39;;
        ctx.font = &#39;bold 22px sans-serif&#39;;
        ctx.textAlign = &#39;center&#39;;
        ctx.fillText(childDose.toFixed(2) + &quot; mg&quot;, centerX, centerY - 30);
        
        ctx.fillStyle = &#39;#64748b&#39;;
        ctx.font = &#39;13px sans-serif&#39;;
        ctx.fillText(`Target: ${(fraction * 100).toFixed(1)}% of Adult Dose`, centerX, centerY - 8);

        ctx.fillStyle = &#39;#94a3b8&#39;;
        ctx.font = &#39;11px sans-serif&#39;;
        ctx.fillText(`Adult Maximum: ${adultDose.toFixed(0)} mg`, centerX, centerY + 25);
    }

    // Trigger on initial page display
    window.onload = calculateDosages;
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/4116605510117701898/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/4116605510117701898' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/4116605510117701898'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/4116605510117701898'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2026/05/pediatric-dosage-calculation.html' title='Pediatric Dosage Calculator - 10 Formulae'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1OX0Pfa5VzS4GFM3HpHnbsTyGRjXb9sbiPrxaPNkNGtzcgvoxFK4mXD3lUVHnFotsVlndgGsyieSRTUHcZoY-JOoNEaIRKFi3IglhNyh9xVMhBunq5p2R-pAPCp78iIDGIO3d9DhIcx40B1yGyhjL2eENBrng9KmGT1l287NwnXFJey9JBW72DiTNEODB/s72-c/Pediatric%20dose%20image%20cover.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-5984416843101537087</id><published>2026-05-08T10:30:00.001+05:00</published><updated>2026-05-08T10:30:25.841+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="model"/><category scheme="http://www.blogger.com/atom/ns#" term="psychology"/><title type='text'>Learning The Recognition-Primed Decision (RPD) model of Decision-Making</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVC59y4-O4QpONGHJ6KQsTg6JZsMj3wuKAcfWjwUXU38fjLrIX0y-3mDLj_MkggvbFS_oWUW6zHhUFDnusGrE_a6-sbvpK61eMIWUq3OZ9fY1KLIlP6N4hyphenhyphenTqlgaRnKKuuVdunL5AhVAuYi8i1GTIje3Iq-XK5_arIiagA4SIsZTZzpb2O7taw5FvmkGpk/s1376/RPD%20Model.png&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;400&quot; data-original-height=&quot;768&quot; data-original-width=&quot;1376&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVC59y4-O4QpONGHJ6KQsTg6JZsMj3wuKAcfWjwUXU38fjLrIX0y-3mDLj_MkggvbFS_oWUW6zHhUFDnusGrE_a6-sbvpK61eMIWUq3OZ9fY1KLIlP6N4hyphenhyphenTqlgaRnKKuuVdunL5AhVAuYi8i1GTIje3Iq-XK5_arIiagA4SIsZTZzpb2O7taw5FvmkGpk/s400/RPD%20Model.png&quot;/&gt;&lt;/a&gt;&lt;/div&gt;

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Learning the RPD Model&lt;/title&gt;
    &lt;style&gt;
        :root {
            --primary: #2c3e50;
            --secondary: #e67e22;
            --light: #ecf0f1;
            --accent: #3498db;
        }
        body { font-family: &#39;Segoe UI&#39;, Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--primary); max-width: 900px; margin: 0 auto; padding: 20px; background-color: #f4f7f6; }
        h1, h2 { color: var(--primary); border-bottom: 2px solid var(--secondary); padding-bottom: 10px; }
        
        /* Canvas Styling */
        #canvasContainer { text-align: center; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-bottom: 30px; }
        canvas { max-width: 100%; height: auto; }

        /* Drag and Drop Styling */
        .interactive-section { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-bottom: 30px; }
        .drop-zone-container { display: flex; justify-content: space-around; flex-wrap: wrap; margin-top: 20px; }
        .drop-zone { width: 200px; min-height: 100px; border: 2px dashed #bdc3c7; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; align-items: center; background: #fafafa; }
        .drop-zone h4 { margin-top: 0; color: var(--accent); }
        .draggable { padding: 10px; margin: 5px; background: var(--secondary); color: white; border-radius: 4px; cursor: move; font-size: 14px; text-align: center; }
        #draggables { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; min-height: 50px; }

        /* Q&amp;A Styling */
        .q-container { background: white; padding: 15px; margin-bottom: 15px; border-left: 5px solid var(--accent); border-radius: 4px; }
        .answer { display: none; margin-top: 10px; padding: 10px; background: #e8f4fd; border-radius: 4px; font-style: italic; }
        button.show-btn { background: var(--accent); color: white; border: none; padding: 5px 15px; border-radius: 4px; cursor: pointer; }
        button.show-btn:hover { opacity: 0.9; }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;h1&gt;Mastering the RPD Model&lt;/h1&gt;
    &lt;p&gt;The Recognition-Primed Decision (RPD) model explains how experts make split-second choices under pressure by recognizing familiar patterns rather than comparing lists of options.&lt;/p&gt;

    &lt;!-- 1. Beautiful Illustration --&gt;
    &lt;div id=&quot;canvasContainer&quot;&gt;
        &lt;h2&gt;1. The Decision Cycle&lt;/h2&gt;
        &lt;canvas id=&quot;rpdCanvas&quot; width=&quot;600&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;
        &lt;p&gt;&lt;em&gt;The loop of Experiencing, Analyzing, and Implementing.&lt;/em&gt;&lt;/p&gt;
    &lt;/div&gt;

    &lt;!-- 2. Interactive Pick and Drop --&gt;
    &lt;div class=&quot;interactive-section&quot;&gt;
        &lt;h2&gt;2. Match the Concept&lt;/h2&gt;
        &lt;p&gt;Drag the descriptors into the correct stage of the RPD Cycle:&lt;/p&gt;
        
        &lt;div id=&quot;draggables&quot;&gt;
            &lt;div class=&quot;draggable&quot; draggable=&quot;true&quot; id=&quot;item1&quot; data-target=&quot;exp&quot;&gt;Gathering Cues&lt;/div&gt;
            &lt;div class=&quot;draggable&quot; draggable=&quot;true&quot; id=&quot;item2&quot; data-target=&quot;ana&quot;&gt;Mental Simulation&lt;/div&gt;
            &lt;div class=&quot;draggable&quot; draggable=&quot;true&quot; id=&quot;item3&quot; data-target=&quot;imp&quot;&gt;Taking Action&lt;/div&gt;
            &lt;div class=&quot;draggable&quot; draggable=&quot;true&quot; id=&quot;item4&quot; data-target=&quot;ana&quot;&gt;Pattern Matching&lt;/div&gt;
            &lt;div class=&quot;draggable&quot; draggable=&quot;true&quot; id=&quot;item5&quot; data-target=&quot;exp&quot;&gt;Sensory Input&lt;/div&gt;
            &lt;div class=&quot;draggable&quot; draggable=&quot;true&quot; id=&quot;item6&quot; data-target=&quot;imp&quot;&gt;Satisficing&lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;drop-zone-container&quot;&gt;
            &lt;div class=&quot;drop-zone&quot; id=&quot;exp&quot; ondrop=&quot;drop(event)&quot; ondragover=&quot;allowDrop(event)&quot;&gt;
                &lt;h4&gt;Experiencing&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class=&quot;drop-zone&quot; id=&quot;ana&quot; ondrop=&quot;drop(event)&quot; ondragover=&quot;allowDrop(event)&quot;&gt;
                &lt;h4&gt;Analyzing&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class=&quot;drop-zone&quot; id=&quot;imp&quot; ondrop=&quot;drop(event)&quot; ondragover=&quot;allowDrop(event)&quot;&gt;
                &lt;h4&gt;Implementing&lt;/h4&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- 3. Thought Provoking Questions --&gt;
    &lt;h2&gt;3. Reflection &amp; Discussion&lt;/h2&gt;
    &lt;div id=&quot;questionsBoard&quot;&gt;&lt;/div&gt;

    &lt;script&gt;
        // --- Canvas Illustration ---
        const canvas = document.getElementById(&#39;rpdCanvas&#39;);
        const ctx = canvas.getContext(&#39;2d&#39;);

        function drawCircle(x, y, label, color) {
            ctx.beginPath();
            ctx.arc(x, y, 50, 0, Math.PI * 2);
            ctx.fillStyle = color;
            ctx.fill();
            ctx.fillStyle = &quot;white&quot;;
            ctx.textAlign = &quot;center&quot;;
            ctx.font = &quot;bold 14px Arial&quot;;
            ctx.fillText(label, x, y + 5);
        }

        function drawArrow(fromx, fromy, tox, toy) {
            const headlen = 10;
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.strokeStyle = &quot;#2c3e50&quot;;
            ctx.lineWidth = 2;
            ctx.stroke();
        }

        // Draw the cycle
        drawCircle(100, 150, &quot;Experience&quot;, &quot;#e67e22&quot;);
        drawArrow(150, 150, 250, 150);
        drawCircle(300, 150, &quot;Analyze&quot;, &quot;#3498db&quot;);
        drawArrow(350, 150, 450, 150);
        drawCircle(500, 150, &quot;Implement&quot;, &quot;#27ae60&quot;);
        // Back loop
        ctx.beginPath();
        ctx.arc(300, 150, 220, Math.PI * 1.1, Math.PI * 1.9, true);
        ctx.stroke();

        // --- Drag and Drop Logic ---
        function allowDrop(ev) { ev.preventDefault(); }
        function drag(ev) { ev.dataTransfer.setData(&quot;text&quot;, ev.target.id); }
        document.querySelectorAll(&#39;.draggable&#39;).forEach(item =&gt; {
            item.addEventListener(&#39;dragstart&#39;, drag);
        });

        function drop(ev) {
            ev.preventDefault();
            const data = ev.dataTransfer.getData(&quot;text&quot;);
            const el = document.getElementById(data);
            const dropzone = ev.target.closest(&#39;.drop-zone&#39;);
            
            if (dropzone &amp;&amp; el.getAttribute(&#39;data-target&#39;) === dropzone.id) {
                dropzone.appendChild(el);
                el.style.background = &quot;#27ae60&quot;;
            } else {
                alert(&quot;That concept belongs in a different stage!&quot;);
            }
        }

        // --- Questions &amp; Answers ---
        const qaData = [
            { q: &quot;The Ethics of Speed: Should doctors be judged by outcomes or pattern validity?&quot;, a: &quot;Judgment should focus on process. If the pattern recognized was evidence-based and logical for the situation, the decision was sound even if the outcome was unfortunate.&quot; },
            { q: &quot;The Trap of Bias: How to distinguish RPD from unconscious bias?&quot;, a: &quot;Metacognitive training. Experts reflect on &#39;why&#39; a pattern was recognized to ensure it&#39;s based on operational cues rather than personal prejudices.&quot; },
            { q: &quot;The Experience Gap: Can long-term experience become a liability?&quot;, a: &quot;Yes, &#39;entrenchment&#39; occurs when experts apply old patterns to new paradigms. Continuous &#39;unlearning&#39; is required in tech-heavy fields.&quot; },
            { q: &quot;AI vs. Human Intuition: Can AI replicate RPD?&quot;, a: &quot;AI excels at pattern matching but often lacks the &#39;holistic&#39; sensory experiencing (embodied cognition) that humans use to detect subtle anomalies.&quot; },
            { q: &quot;The Cost of Hesitation: Quick &#39;good&#39; or slow &#39;perfect&#39;?&quot;, a: &quot;In RPD environments (firefighting/ER), a &#39;good&#39; decision now is almost always superior to a &#39;perfect&#39; one that arrives after the opportunity to act has vanished.&quot; },
            { q: &quot;Transferable Instincts: Can patterns cross fields?&quot;, a: &quot;Partially. Structural patterns (managing stress/people) transfer, but technical patterns (reading a defensive line vs. a balance sheet) usually don&#39;t.&quot; },
            { q: &quot;Training for the Unknown: How to train for &#39;Black Swan&#39; events?&quot;, a: &quot;Train for resilience and adaptability rather than specific scripts. Focus on the &#39;Analyze&#39; stage to help people spot when a pattern *doesn&#39;t* fit.&quot; },
            { q: &quot;The Role of Stress: Does it sharpen or distort?&quot;, a: &quot;Moderate stress sharpens focus; extreme stress causes &#39;cognitive tunneling&#39; where we force data to fit a familiar (but wrong) pattern.&quot; },
            { q: &quot;Mental Simulation: Prediction or reinforcement?&quot;, a: &quot;If done honestly, it&#39;s a &#39;pre-mortem.&#39; If done to justify a choice, it&#39;s reinforcement. Self-honesty is key to the RPD process.&quot; },
            { q: &quot;Mentorship: How to pass on subconscious skills?&quot;, a: &quot;Through &#39;Cognitive Task Analysis&#39;—asking experts to explain their &#39;cues&#39; and &#39;expectations&#39; while novices watch simulations.&quot; }
        ];

        const qBoard = document.getElementById(&#39;questionsBoard&#39;);
        qaData.forEach((item, index) =&gt; {
            const div = document.createElement(&#39;div&#39;);
            div.className = &#39;q-container&#39;;
            div.innerHTML = `
                &lt;strong&gt;Q${index+1}: ${item.q}&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
                &lt;button class=&quot;show-btn&quot; onclick=&quot;this.nextElementSibling.style.display=&#39;block&#39;&quot;&gt;Show Answer&lt;/button&gt;
                &lt;div class=&quot;answer&quot;&gt;${item.a}&lt;/div&gt;
            `;
            qBoard.appendChild(div);
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/5984416843101537087/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/5984416843101537087' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/5984416843101537087'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/5984416843101537087'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2026/05/learning-recognition-primed-decision.html' title='Learning The Recognition-Primed Decision (RPD) model of Decision-Making'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVC59y4-O4QpONGHJ6KQsTg6JZsMj3wuKAcfWjwUXU38fjLrIX0y-3mDLj_MkggvbFS_oWUW6zHhUFDnusGrE_a6-sbvpK61eMIWUq3OZ9fY1KLIlP6N4hyphenhyphenTqlgaRnKKuuVdunL5AhVAuYi8i1GTIje3Iq-XK5_arIiagA4SIsZTZzpb2O7taw5FvmkGpk/s72-c/RPD%20Model.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-2814121658713424400</id><published>2026-05-06T15:29:00.002+05:00</published><updated>2026-05-06T15:37:17.748+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="business"/><category scheme="http://www.blogger.com/atom/ns#" term="psychology"/><title type='text'>The Psychology of Choice</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRA-43ZCyxnOU4MjrXM-bsUlIgFcS5UIvSrs0ANqocnGdabyBLmDaZm0J0g2rWA66y1m9YjOGoaHyp0ZsykyJjwazLYmNWDYhvdo7OY3FKCnDk4K0TuiXtWon8Pw7EIRF1V1q9-baso3cWTcgYgAXb7IqRKKVVD-FuTDWJy8ZMchhl01H1-MJLTsTbDEtg/s1408/Risk%20aversive%20and%20risk%20seeking.png&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;400&quot; data-original-height=&quot;768&quot; data-original-width=&quot;1408&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRA-43ZCyxnOU4MjrXM-bsUlIgFcS5UIvSrs0ANqocnGdabyBLmDaZm0J0g2rWA66y1m9YjOGoaHyp0ZsykyJjwazLYmNWDYhvdo7OY3FKCnDk4K0TuiXtWon8Pw7EIRF1V1q9-baso3cWTcgYgAXb7IqRKKVVD-FuTDWJy8ZMchhl01H1-MJLTsTbDEtg/s400/Risk%20aversive%20and%20risk%20seeking.png&quot;/&gt;&lt;/a&gt;&lt;/div&gt;

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;The Psychology of Choice&lt;/title&gt;
    &lt;style&gt;
        :root { 
            --primary: #2563eb; 
            --loss: #e11d48; 
            --gain: #059669; 
            --risk-seek: #d97706;
            --status-quo: #7c3aed;
            --bg: #f8fafc; 
        }
        body { font-family: &#39;Inter&#39;, system-ui, sans-serif; line-height: 1.6; color: #1e293b; max-width: 900px; margin: 0 auto; padding: 40px 20px; background: var(--bg); }
        
        h1 { font-size: 2.5rem; text-align: center; color: #0f172a; margin-bottom: 10px; }
        .subtitle { text-align: center; color: #64748b; font-size: 1.1rem; margin-bottom: 40px; }
        
        .glossary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 40px; }
        .term-card { padding: 20px; border-radius: 16px; color: white; transition: transform 0.2s; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
        .term-card:hover { transform: translateY(-5px); }
        .term-card h3 { margin-top: 0; font-size: 1.4rem; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 8px; }
        
        .bg-prospect { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
        .bg-gain { background: linear-gradient(135deg, #059669, #047857); }
        .bg-loss { background: linear-gradient(135deg, #e11d48, #be123c); }
        .bg-risk { background: linear-gradient(135deg, #d97706, #b45309); }
        .bg-bias { background: linear-gradient(135deg, #7c3aed, #6d28d9); }

        .module-container { background: white; border-radius: 16px; padding: 30px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 30px; border: 1px solid #e2e8f0; }
        
        .game-area { display: flex; gap: 20px; margin-top: 20px; }
        .box { flex: 1; min-height: 180px; border: 3px dashed #cbd5e1; border-radius: 12px; padding: 15px; background: #f8fafc; transition: 0.3s; }
        .box.correct { border-color: var(--gain); background: #f0fdf4; }
        .box.incorrect { border-color: var(--loss); background: #fef2f2; }
        .box-title { text-align: center; font-weight: 800; margin-bottom: 15px; color: #475569; }
        
        .choice-item { background: white; border: 1px solid #e2e8f0; padding: 12px; margin: 8px; cursor: grab; border-radius: 8px; font-weight: 500; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
        
        .q-card { background: #f1f5f9; border-left: 5px solid var(--primary); padding: 20px; margin: 20px 0; border-radius: 0 12px 12px 0; }
        .answer { display: none; margin-top: 15px; padding: 15px; background: #dcfce7; border-radius: 8px; color: #166534; font-weight: 500; }
        button.show-btn, button.check-btn { background: #1e293b; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; margin-top: 10px; }
        button.check-btn { background: var(--primary); display: block; margin: 20px auto; padding: 12px 24px; font-size: 1rem; }
        #feedback { text-align: center; font-weight: bold; margin-top: 10px; min-height: 24px; }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;The Psychology of Choice&lt;/h1&gt;
&lt;p class=&quot;subtitle&quot;&gt;A deep-dive into Prospect Theory and why we fear loss more than we love gain.&lt;/p&gt;

&lt;div class=&quot;glossary-grid&quot;&gt;
    &lt;div class=&quot;term-card bg-prospect&quot;&gt;
        &lt;h3&gt;Prospect Theory&lt;/h3&gt;
        &lt;p&gt;Developed by Kahneman &amp; Tversky, this Nobel-winning theory explains that humans value gains and losses differently. We don&#39;t think in absolute wealth, but in &lt;em&gt;changes&lt;/em&gt; from our current state.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;term-card bg-gain&quot;&gt;
        &lt;h3&gt;Risk Aversion&lt;/h3&gt;
        &lt;p&gt;When looking at potential gains, we get &quot;scared.&quot; We prefer a bird in the hand. Faced with a &lt;strong&gt;sure gain&lt;/strong&gt;, most people choose the safe bet over a gamble for more.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;term-card bg-loss&quot;&gt;
        &lt;h3&gt;Loss Aversion&lt;/h3&gt;
        &lt;p&gt;Pain from a $100 loss is &lt;strong&gt;twice as intense&lt;/strong&gt; as the joy of a $100 gain. This &quot;asymmetry&quot; drives almost all human economic behavior.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;term-card bg-risk&quot;&gt;
        &lt;h3&gt;Risk Seeking&lt;/h3&gt;
        &lt;p&gt;When faced with a &lt;strong&gt;sure loss&lt;/strong&gt;, our brains flip. We become &quot;gamblers,&quot; willing to take huge risks just for a small chance to break even and avoid the sting of losing.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;term-card bg-bias&quot;&gt;
        &lt;h3&gt;Status Quo Bias&lt;/h3&gt;
        &lt;p&gt;We are wired to stay put. We treat the current situation as a reference point, and any change from it is perceived as a potential loss.&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;module-container&quot;&gt;
    &lt;h2&gt;1. Interactive Scenario Lab&lt;/h2&gt;
    &lt;p&gt;Where do these human tendencies belong? Drag each scenario into the correct psychological bucket.&lt;/p&gt;
    &lt;div class=&quot;game-area&quot;&gt;
        &lt;div class=&quot;box&quot; id=&quot;risk-averse&quot; ondrop=&quot;drop(event)&quot; ondragover=&quot;allowDrop(event)&quot;&gt;
            &lt;div class=&quot;box-title&quot; style=&quot;color:var(--gain)&quot;&gt;SAFE &amp; STEADY (Averse)&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;box&quot; id=&quot;risk-seeking&quot; ondrop=&quot;drop(event)&quot; ondragover=&quot;allowDrop(event)&quot;&gt;
            &lt;div class=&quot;box-title&quot; style=&quot;color:var(--risk-seek)&quot;&gt;GAMBLE IT ALL (Seeking)&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id=&quot;choices&quot; style=&quot;display: flex; flex-wrap: wrap; justify-content: center; margin-top: 20px;&quot;&gt;
        &lt;div class=&quot;choice-item&quot; draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;c1&quot; data-answer=&quot;risk-averse&quot;&gt;Sure gain of $500&lt;/div&gt;
        &lt;div class=&quot;choice-item&quot; draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;c2&quot; data-answer=&quot;risk-seeking&quot;&gt;Sure loss of $500&lt;/div&gt;
        &lt;div class=&quot;choice-item&quot; draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;c3&quot; data-answer=&quot;risk-averse&quot;&gt;&quot;90% Survival Rate&quot;&lt;/div&gt;
        &lt;div class=&quot;choice-item&quot; draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;c4&quot; data-answer=&quot;risk-seeking&quot;&gt;&quot;10% Mortality Rate&quot;&lt;/div&gt;
        &lt;div class=&quot;choice-item&quot; draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; id=&quot;c5&quot; data-answer=&quot;risk-averse&quot;&gt;Keeping the default 401k&lt;/div&gt;
    &lt;/div&gt;
    &lt;button class=&quot;check-btn&quot; onclick=&quot;checkAnswers()&quot;&gt;Check My Decisions&lt;/button&gt;
    &lt;div id=&quot;feedback&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;module-container&quot;&gt;
    &lt;h2&gt;2. Challenge Your Thinking&lt;/h2&gt;
    
    &lt;!-- Previous Questions Q1-Q11 omitted for brevity but should remain in your file --&gt;
    &lt;!-- [Insert Q1-Q11 here] --&gt;

    &lt;h3&gt;Advanced Exploration&lt;/h3&gt;

    &lt;div class=&quot;q-card&quot;&gt;
        &lt;strong&gt;Q1: Why do people continue to watch a boring movie just because they paid for the ticket?&lt;/strong&gt;
        &lt;div class=&quot;answer&quot; id=&quot;a12&quot;&gt;&lt;strong&gt;Sunk Cost Fallacy:&lt;/strong&gt; We treat the spent money as a &quot;loss&quot; that we are trying to &quot;recover&quot; by staying. Rationally, the money is gone regardless; staying only loses you time.&lt;/div&gt;
        &lt;br&gt;&lt;button class=&quot;show-btn&quot; onclick=&quot;toggle(&#39;a12&#39;)&quot;&gt;Show Answer&lt;/button&gt;
    &lt;/div&gt;

    &lt;div class=&quot;q-card&quot;&gt;
        &lt;strong&gt;Q2: Why are we more likely to buy a $50 shirt marked down from $100 than a $50 shirt with no discount?&lt;/strong&gt;
        &lt;div class=&quot;answer&quot; id=&quot;a13&quot;&gt;&lt;strong&gt;Anchoring:&lt;/strong&gt; The $100 price becomes the reference point. Buying it at $50 feels like a $50 &quot;gain&quot; rather than a $50 expense.&lt;/div&gt;
        &lt;br&gt;&lt;button class=&quot;show-btn&quot; onclick=&quot;toggle(&#39;a13&#39;)&quot;&gt;Show Answer&lt;/button&gt;
    &lt;/div&gt;

    &lt;div class=&quot;q-card&quot;&gt;
        &lt;strong&gt;Q3: Why do people buy extended warranties for small electronics when the math rarely favors the consumer?&lt;/strong&gt;
        &lt;div class=&quot;answer&quot; id=&quot;a14&quot;&gt;&lt;strong&gt;Probability Weighting:&lt;/strong&gt; We over-weight small probabilities of &quot;disaster&quot; (the device breaking). We pay a premium to eliminate the possibility of the &quot;pain of loss.&quot;&lt;/div&gt;
        &lt;br&gt;&lt;button class=&quot;show-btn&quot; onclick=&quot;toggle(&#39;a14&#39;)&quot;&gt;Show Answer&lt;/button&gt;
    &lt;/div&gt;

    &lt;div class=&quot;q-card&quot;&gt;
        &lt;strong&gt;Q4: Why is it harder to quit a job you hate than to turn down a job offer you don&#39;t like?&lt;/strong&gt;
        &lt;div class=&quot;answer&quot; id=&quot;a15&quot;&gt;&lt;strong&gt;Status Quo Bias:&lt;/strong&gt; Quitting is an active choice that feels like a &quot;loss&quot; of security, whereas turning down a new offer is maintaining the current state.&lt;/div&gt;
        &lt;br&gt;&lt;button class=&quot;show-btn&quot; onclick=&quot;toggle(&#39;a15&#39;)&quot;&gt;Show Answer&lt;/button&gt;
    &lt;/div&gt;

    &lt;div class=&quot;q-card&quot;&gt;
        &lt;strong&gt;Q5: How does &quot;Narrow Framing&quot; lead to bad financial decisions?&lt;/strong&gt;
        &lt;div class=&quot;answer&quot; id=&quot;a16&quot;&gt;&lt;strong&gt;Narrow Framing:&lt;/strong&gt; This happens when we look at every investment individually. If one stock drops, we feel the &quot;loss&quot; intensely and sell, even if our overall portfolio is up significantly.&lt;/div&gt;
        &lt;br&gt;&lt;button class=&quot;show-btn&quot; onclick=&quot;toggle(&#39;a16&#39;)&quot;&gt;Show Answer&lt;/button&gt;
    &lt;/div&gt;

    &lt;div class=&quot;q-card&quot;&gt;
        &lt;strong&gt;Q6: Why do &quot;Trial Periods&quot; (e.g., Netflix for 30 days) work so well for companies?&lt;/strong&gt;
        &lt;div class=&quot;answer&quot; id=&quot;a17&quot;&gt;&lt;strong&gt;Pseudo-Endowment:&lt;/strong&gt; Even before you pay, you begin to incorporate the service into your life. Ending the trial feels like losing a possession rather than just not buying a service.&lt;/div&gt;
        &lt;br&gt;&lt;button class=&quot;show-btn&quot; onclick=&quot;toggle(&#39;a17&#39;)&quot;&gt;Show Answer&lt;/button&gt;
    &lt;/div&gt;

    &lt;div class=&quot;q-card&quot;&gt;
        &lt;strong&gt;Q7: Why do people prefer a 100% chance of winning $450 over a 50% chance of winning $1,000?&lt;/strong&gt;
        &lt;div class=&quot;answer&quot; id=&quot;a18&quot;&gt;&lt;strong&gt;The Certainty Effect:&lt;/strong&gt; We over-value outcomes that are certain. Even though the &quot;expected value&quot; of the gamble is higher ($500), the psychological safety of &quot;sure money&quot; wins.&lt;/div&gt;
        &lt;br&gt;&lt;button class=&quot;show-btn&quot; onclick=&quot;toggle(&#39;a18&#39;)&quot;&gt;Show Answer&lt;/button&gt;
    &lt;/div&gt;

    &lt;div class=&quot;q-card&quot;&gt;
        &lt;strong&gt;Q8: In a crisis, why do leaders often take huge risks that make things worse?&lt;/strong&gt;
        &lt;div class=&quot;answer&quot; id=&quot;a19&quot;&gt;&lt;strong&gt;Risk Seeking in Losses:&lt;/strong&gt; When leaders feel they are in a &quot;losing&quot; position, they often gamble on high-risk strategies to get back to the status quo rather than accepting a smaller, certain loss.&lt;/div&gt;
        &lt;br&gt;&lt;button class=&quot;show-btn&quot; onclick=&quot;toggle(&#39;a19&#39;)&quot;&gt;Show Answer&lt;/button&gt;
    &lt;/div&gt;

    &lt;div class=&quot;q-card&quot;&gt;
        &lt;strong&gt;Q9: Why do we feel better when we lose a $20 bill we found on the street vs. a $20 bill we earned at work?&lt;/strong&gt;
        &lt;div class=&quot;answer&quot; id=&quot;a20&quot;&gt;&lt;strong&gt;Mental Accounting:&lt;/strong&gt; We categorize money based on its source. &quot;Found&quot; money is often put in a &quot;play&quot; bucket, so its loss doesn&#39;t hit our &quot;hard-earned&quot; reference point as hard.&lt;/div&gt;
        &lt;br&gt;&lt;button class=&quot;show-btn&quot; onclick=&quot;toggle(&#39;a20&#39;)&quot;&gt;Show Answer&lt;/button&gt;
    &lt;/div&gt;

    &lt;div class=&quot;q-card&quot;&gt;
        &lt;strong&gt;Q10: How does &quot;Diminishing Sensitivity&quot; affect our joy of winning?&lt;/strong&gt;
        &lt;div class=&quot;answer&quot; id=&quot;a21&quot;&gt;The difference between winning $0 and $100 feels huge. The difference between winning $1,000 and $1,100 feels much smaller. Our emotional response flattens as the amounts grow.&lt;/div&gt;
        &lt;br&gt;&lt;button class=&quot;show-btn&quot; onclick=&quot;toggle(&#39;a21&#39;)&quot;&gt;Show Answer&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
    function allowDrop(ev) { ev.preventDefault(); }
    function drag(ev) { ev.dataTransfer.setData(&quot;text&quot;, ev.target.id); }
    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData(&quot;text&quot;);
        var dropTarget = ev.target.closest(&#39;.box&#39;);
        if(dropTarget) { 
            dropTarget.appendChild(document.getElementById(data)); 
        }
    }

    function checkAnswers() {
        const boxes = document.querySelectorAll(&#39;.box&#39;);
        let correctCount = 0;
        let totalItems = document.querySelectorAll(&#39;.choice-item&#39;).length;

        boxes.forEach(box =&gt; {
            const items = box.querySelectorAll(&#39;.choice-item&#39;);
            items.forEach(item =&gt; {
                if (item.getAttribute(&#39;data-answer&#39;) === box.id) {
                    item.style.border = &quot;2px solid #059669&quot;;
                    correctCount++;
                } else {
                    item.style.border = &quot;2px solid #e11d48&quot;;
                }
            });
        });

        const feedback = document.getElementById(&#39;feedback&#39;);
        if (correctCount === totalItems) {
            feedback.innerHTML = &quot;🎉 Perfect! You understand the bias patterns!&quot;;
            feedback.style.color = &quot;var(--gain)&quot;;
        } else {
            feedback.innerHTML = `You got ${correctCount} out of ${totalItems} correct. Try again!`;
            feedback.style.color = &quot;var(--loss)&quot;;
        }
    }

    function toggle(id) {
        const el = document.getElementById(id);
        el.style.display = el.style.display === &#39;block&#39; ? &#39;none&#39; : &#39;block&#39;;
    }
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/2814121658713424400/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/2814121658713424400' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/2814121658713424400'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/2814121658713424400'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2026/05/the-psychology-of-choice.html' title='The Psychology of Choice'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRA-43ZCyxnOU4MjrXM-bsUlIgFcS5UIvSrs0ANqocnGdabyBLmDaZm0J0g2rWA66y1m9YjOGoaHyp0ZsykyJjwazLYmNWDYhvdo7OY3FKCnDk4K0TuiXtWon8Pw7EIRF1V1q9-baso3cWTcgYgAXb7IqRKKVVD-FuTDWJy8ZMchhl01H1-MJLTsTbDEtg/s72-c/Risk%20aversive%20and%20risk%20seeking.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-5369361265920843228</id><published>2025-12-17T10:10:00.016+05:00</published><updated>2025-12-18T11:34:20.871+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="education"/><category scheme="http://www.blogger.com/atom/ns#" term="learning"/><category scheme="http://www.blogger.com/atom/ns#" term="statistics"/><title type='text'>Bayes&#39; Theorem - Educational Content</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-i-GgwPXImNi_o7xjtqEFAJT3nD5KXuOmUd93VtXqczL73GxwuOcb54AeLqtBzGK-9lQweaDWkB30KZDw3hXTxR77t0pRLqq-MolpBXm_aH8p6r1CF4eEwSBefWkISHOflRkl-sABL-yDBNo0oHxPm0C6e-IM0VibaxNv5KzxtaQIWet1Lt-Hj4e1hg_Z/s321/Cover%20image.png&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;400&quot; data-original-height=&quot;105&quot; data-original-width=&quot;321&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-i-GgwPXImNi_o7xjtqEFAJT3nD5KXuOmUd93VtXqczL73GxwuOcb54AeLqtBzGK-9lQweaDWkB30KZDw3hXTxR77t0pRLqq-MolpBXm_aH8p6r1CF4eEwSBefWkISHOflRkl-sABL-yDBNo0oHxPm0C6e-IM0VibaxNv5KzxtaQIWet1Lt-Hj4e1hg_Z/s400/Cover%20image.png&quot;/&gt;&lt;/a&gt;&lt;/div&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Interactive Bayes&#39; Theorem&lt;/title&gt;
    &lt;style&gt;
        :root {
            --primary: #3498db; /* Hypothesis True (Prior) */
            --primary-dark: #2980b9; /* True Positive (Likelihood) */
            --secondary: #e74c3c; /* Hypothesis False */
            --secondary-dark: #c0392b; /* False Positive */
            --bg: #f4f7f6;
            --text: #2c3e50;
            --accent: #8e44ad; /* Posterior */
            --evidence: #f39c12; /* Evidence/Total Probability */
        }

        body {
            font-family: &#39;Segoe UI&#39;, Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg);
            color: var(--text);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            margin: 0;
        }

        h1 { margin: 10px 0; }
        p.subtitle { color: #666; margin-bottom: 20px; max-width: 600px; text-align: center; }

        /* --- THEORY SECTION --- */
        .theory-section {
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            max-width: 800px;
            width: 100%;
            margin-bottom: 30px;
            border-left: 5px solid var(--accent);
        }
        .theory-title { font-weight: bold; color: var(--accent); margin-bottom: 10px; font-size: 1.1rem; }
        .formula-display {
            font-family: &#39;Times New Roman&#39;, serif;
            font-size: 1.3rem;
            text-align: center;
            margin: 20px 0;
            background: #fdfdfd;
            padding: 15px;
            border: 1px solid #eee;
            border-radius: 8px;
        }
        .fraction-lg { display: inline-block; vertical-align: middle; text-align: center; }
        .fraction-lg .top { border-bottom: 1px solid #000; display: block; padding: 2px; }
        .fraction-lg .bottom { display: block; padding: 2px; }

        /* --- TOOLTIPS --- */
        .tooltip-container {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted #777;
            cursor: help;
            font-weight: bold;
        }
        .tooltip-text {
            visibility: hidden;
            width: 220px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 8px;
            position: absolute;
            z-index: 100;
            bottom: 125%;
            left: 50%;
            margin-left: -110px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 0.85rem;
            font-weight: normal;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }
        .tooltip-text::after {
            content: &quot;&quot;;
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #333 transparent transparent transparent;
        }
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }

        /* --- PRACTICE CANVAS SECTION --- */
        .practice-section {
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            max-width: 800px;
            width: 100%;
            margin-bottom: 30px;
            text-align: center;
            border-left: 5px solid #27ae60;
        }
        .canvas-toolbar {
            margin-bottom: 10px;
            display: flex;
            justify-content: center;
            gap: 10px;
            align-items: center;
        }
        #writingCanvas {
            border: 2px dashed #bdc3c7;
            border-radius: 8px;
            background-color: #fafafa;
            cursor: crosshair;
            touch-action: none;
        }
        .btn-small {
            background: #95a5a6;
            color: white;
            border: none;
            padding: 5px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9rem;
        }
        .btn-small:hover { background: #7f8c8d; }
        .hint-text {
            color: #27ae60;
            font-family: &#39;Times New Roman&#39;, serif;
            font-size: 1.2rem;
            margin-left: 10px;
            display: none;
        }

        /* --- ANIMATION SECTION --- */
        .animation-container {
            max-width: 800px;
            width: 100%;
            margin-bottom: 30px;
            padding: 20px;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            text-align: center;
        }
        .animation-title {
            font-size: 1.2rem;
            color: var(--text);
            margin-bottom: 15px;
            font-weight: bold;
        }
        .timeline {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            height: 100px;
        }
        .timeline::before {
            content: &#39;&#39;;
            position: absolute;
            top: 50%;
            left: 5%;
            right: 5%;
            height: 4px;
            background: #ccc;
            transform: translateY(-50%);
            z-index: 1;
        }
        .step {
            width: 150px;
            text-align: center;
            z-index: 2;
            position: relative;
        }
        .step-circle {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #ccc;
            margin: 0 auto 10px;
            border: 3px solid white;
            transition: all 0.5s ease-in-out;
        }
        .step-label {
            font-size: 0.85rem;
            font-weight: bold;
            color: #777;
            transition: color 0.5s;
        }
        
        /* Keyframe Animation for the Steps */
        @keyframes bayesFlow {
            0%, 20% { --step-color: #ccc; --text-color: #777; }
            
            25%, 45% { 
                /* Step 1: Prior */
                --step1-color: var(--primary); --text1-color: var(--primary);
                --step2-color: #ccc; --text2-color: #777;
            }
            
            50%, 70% { 
                /* Step 2: Likelihood */
                --step1-color: var(--primary); --text1-color: var(--primary);
                --step2-color: var(--primary-dark); --text2-color: var(--primary-dark);
                --step3-color: #ccc; --text3-color: #777;
            }
            
            75%, 90% { 
                /* Step 3: Evidence */
                --step1-color: var(--primary); --text1-color: var(--primary);
                --step2-color: var(--primary-dark); --text2-color: var(--primary-dark);
                --step3-color: var(--evidence); --text3-color: var(--evidence);
                --step4-color: #ccc; --text4-color: #777;
            }
            
            95%, 100% { 
                /* Step 4: Posterior */
                --step1-color: var(--primary); --text1-color: var(--primary);
                --step2-color: var(--primary-dark); --text2-color: var(--primary-dark);
                --step3-color: var(--evidence); --text3-color: var(--evidence);
                --step4-color: var(--accent); --text4-color: var(--accent);
            }
        }

        .timeline { animation: bayesFlow 10s infinite alternate; }

        /* Applying animated variables */
        .step:nth-child(1) .step-circle { background: var(--step1-color, #ccc); }
        .step:nth-child(1) .step-label { color: var(--text1-color, #777); }
        .step:nth-child(2) .step-circle { background: var(--step2-color, #ccc); }
        .step:nth-child(2) .step-label { color: var(--text2-color, #777); }
        .step:nth-child(3) .step-circle { background: var(--step3-color, #ccc); }
        .step:nth-child(3) .step-label { color: var(--text3-color, #777); }
        .step:nth-child(4) .step-circle { background: var(--step4-color, #ccc); }
        .step:nth-child(4) .step-label { color: var(--text4-color, #777); }


        /* --- MAIN LAYOUT &amp; CONTROLS --- */
        .scenario-container {
            max-width: 900px;
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        .scenario-btn {
            background: white;
            border: 2px solid var(--primary);
            color: var(--primary);
            padding: 10px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.2s;
        }
        .scenario-btn:hover, .scenario-btn.active {
            background: var(--primary);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
        }
        .scenario-desc {
            width: 100%;
            text-align: center;
            font-style: italic;
            color: #555;
            height: 20px; 
            margin-bottom: 10px;
        }

        .main-layout {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
            align-items: flex-start;
            max-width: 1300px;
            width: 100%;
        }

        .controls {
            background: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            width: 300px;
            flex-shrink: 0;
        }
        .control-group { margin-bottom: 25px; }
        label { display: block; font-weight: bold; margin-bottom: 8px; font-size: 0.95rem; }
        input[type=range] { width: 100%; cursor: pointer; }
        .value-display { float: right; color: var(--primary-dark); font-weight: bold; }
        small { display: block; margin-top: 5px; color: #7f8c8d; line-height: 1.4; font-size: 0.85rem;}

        .visual-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .canvas-wrapper {
            position: relative;
            background: white;
            padding: 10px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }
        canvas { border: 1px solid #ddd; border-radius: 4px; display: block; }
        .legend { display: flex; gap: 15px; margin-top: 10px; font-size: 0.8rem; justify-content: center; flex-wrap: wrap; }
        .dot { width: 12px; height: 12px; display: inline-block; border-radius: 3px; margin-right: 5px; vertical-align: middle; }

        .math-panel {
            background: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            width: 380px;
            flex-shrink: 0;
        }
        .math-section { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
        .math-section:last-child { border-bottom: none; }
        
        h3 { margin-top: 0; color: var(--text); font-size: 1.1rem; border-left: 4px solid var(--primary); padding-left: 10px; }
        
        .formula-box {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            font-family: &#39;Courier New&#39;, Courier, monospace;
            font-weight: bold;
            text-align: center;
            font-size: 1.1rem;
            margin: 10px 0;
        }

        .txt-prior { color: var(--primary); }
        .txt-true-pos { color: var(--primary-dark); }
        .txt-false-pos { color: var(--secondary-dark); }
        .txt-result { color: #27ae60; font-weight: 800; }

        .fraction { display: inline-block; vertical-align: middle; text-align: center; font-size: 0.9rem; }
        .top { border-bottom: 2px solid #333; display: block; padding: 2px; }
        .bottom { display: block; padding: 2px; }

        .substitution-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            font-size: 0.95rem;
        }
        
        .big-result {
            text-align: center;
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--text);
            margin: 20px 0;
        }
    &lt;/style&gt;


    &lt;h1&gt;Bayes&#39; Theorem Visualizer&lt;/h1&gt;
    &lt;p class=&quot;subtitle&quot;&gt;Understand how to revise predictions based on new data.&lt;/p&gt;

    &lt;div class=&quot;theory-section&quot;&gt;
        &lt;div class=&quot;theory-title&quot;&gt;The Definition&lt;/div&gt;
        &lt;p&gt;
            Bayes&#39; Theorem is a fundamental formula in probability that calculates the updated probability of an event (A) given new evidence (B). It relates the likelihood of the evidence to the prior belief.
        &lt;/p&gt;
        &lt;div class=&quot;formula-display&quot;&gt;
            P(A|B) = 
            &lt;div class=&quot;fraction-lg&quot;&gt;
                &lt;span class=&quot;top&quot;&gt;P(B|A) ⋅ P(A)&lt;/span&gt;
                &lt;span class=&quot;bottom&quot;&gt;P(B)&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;p style=&quot;font-size: 0.9rem; color: #555; line-height: 1.8;&quot;&gt;
            Where: &lt;br&gt;
            &lt;span class=&quot;tooltip-container&quot;&gt;
                &lt;strong&gt;P(A|B)&lt;/strong&gt;
                &lt;span class=&quot;tooltip-text&quot;&gt;The updated probability after seeing the evidence. Also called the result.&lt;/span&gt;
            &lt;/span&gt; is the &lt;em&gt;Posterior&lt;/em&gt;,&lt;br&gt;
            
            &lt;span class=&quot;tooltip-container&quot;&gt;
                &lt;strong&gt;P(B|A)&lt;/strong&gt;
                &lt;span class=&quot;tooltip-text&quot;&gt;The probability of seeing this evidence IF the hypothesis is true.&lt;/span&gt;
            &lt;/span&gt; is the &lt;em&gt;Likelihood&lt;/em&gt;,&lt;br&gt;
            
            &lt;span class=&quot;tooltip-container&quot;&gt;
                &lt;strong&gt;P(A)&lt;/strong&gt;
                &lt;span class=&quot;tooltip-text&quot;&gt;Your initial belief before seeing any new evidence.&lt;/span&gt;
            &lt;/span&gt; is the &lt;em&gt;Prior&lt;/em&gt;, and&lt;br&gt;
            
            &lt;span class=&quot;tooltip-container&quot;&gt;
                &lt;strong&gt;P(B)&lt;/strong&gt;
                &lt;span class=&quot;tooltip-text&quot;&gt;The total probability of the evidence occurring, regardless of whether the hypothesis is true or false.&lt;/span&gt;
            &lt;/span&gt; is the &lt;em&gt;Evidence&lt;/em&gt;.
        &lt;/p&gt;
    &lt;/div&gt;
&lt;h1 style=&quot;height: 0px; text-align: left;&quot;&gt;&amp;nbsp;Interactive Practice&lt;br /&gt;&lt;/h1&gt;
  
  
  &lt;style&gt;
    .practice-section { width: 100%; }
    #writingCanvas {
        border: 1px solid #ddd;
        border-radius: 8px;
        background-color: #f9f9f9;
        cursor: crosshair;
        width: 100%; /* Makes it visually responsive */
        display: block;
    }
    .hint-text {
        display: none; /* Hidden by default */
        margin-left: 10px;
        font-weight: bold;
        color: #27ae60;
    }
    .canvas-toolbar { margin-bottom: 10px; }
    .btn-small { padding: 5px 10px; cursor: pointer; }
&lt;/style&gt;

&lt;div class=&quot;practice-section&quot;&gt;
    &lt;div class=&quot;theory-title&quot; style=&quot;color:#27ae60; font-weight:bold;&quot;&gt;Memorize the Formula&lt;/div&gt;
    &lt;p style=&quot;font-size: 0.9rem; color: #555;&quot;&gt;Try writing the theorem below to commit it to memory.&lt;/p&gt;
    
    &lt;div class=&quot;canvas-toolbar&quot;&gt;
        &lt;button class=&quot;btn-small&quot; onclick=&quot;toggleHint()&quot;&gt;Toggle Hint&lt;/button&gt;
        &lt;button class=&quot;btn-small&quot; onclick=&quot;clearWritingCanvas()&quot;&gt;Clear Board&lt;/button&gt;
        &lt;span id=&quot;formulaHint&quot; class=&quot;hint-text&quot;&gt;P(A|B) = [P(B|A) * P(A)] / P(B)&lt;/span&gt;
    &lt;/div&gt;

    &lt;canvas id=&quot;writingCanvas&quot; height=&quot;150&quot;&gt;&lt;/canvas&gt;
&lt;/div&gt;
  
  &lt;script&gt;
    const canvas = document.getElementById(&#39;writingCanvas&#39;);
    const ctx = canvas.getContext(&#39;2d&#39;);
    const hint = document.getElementById(&#39;formulaHint&#39;);
    let drawing = false;

    // 1. Make Width 100% and handle resizing
    function resizeCanvas() {
        // Set internal resolution to match displayed CSS width
        canvas.width = canvas.offsetWidth;
    }
    window.addEventListener(&#39;resize&#39;, resizeCanvas);
    resizeCanvas();

    // 2. Toggle Hint Logic
    function toggleHint() {
        if (hint.style.display === &quot;none&quot; || hint.style.display === &quot;&quot;) {
            hint.style.display = &quot;inline&quot;;
        } else {
            hint.style.display = &quot;none&quot;;
        }
    }

    // 3. Drawing Logic
    function startDrawing(e) {
        drawing = true;
        draw(e); 
    }

    function stopDrawing() {
        drawing = false;
        ctx.beginPath(); // Resets path so lines don&#39;t connect across jumps
    }

    function draw(e) {
        if (!drawing) return;

        // Get correct mouse/touch position relative to canvas
        const rect = canvas.getBoundingClientRect();
        const x = (e.clientX || e.touches[0].clientX) - rect.left;
        const y = (e.clientY || e.touches[0].clientY) - rect.top;

        ctx.lineWidth = 2;
        ctx.lineCap = &#39;round&#39;;
        ctx.strokeStyle = &#39;#333&#39;;

        ctx.lineTo(x, y);
        ctx.stroke();
        ctx.moveTo(x, y);
    }

    function clearWritingCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    // Event Listeners for Mouse
    canvas.addEventListener(&#39;mousedown&#39;, startDrawing);
    canvas.addEventListener(&#39;mousemove&#39;, draw);
    canvas.addEventListener(&#39;mouseup&#39;, stopDrawing);
    canvas.addEventListener(&#39;mouseout&#39;, stopDrawing);

    // Event Listeners for Touch (Mobile)
    canvas.addEventListener(&#39;touchstart&#39;, (e) =&gt; { e.preventDefault(); startDrawing(e.touches[0]); }, {passive: false});
    canvas.addEventListener(&#39;touchmove&#39;, (e) =&gt; { e.preventDefault(); draw(e.touches[0]); }, {passive: false});
    canvas.addEventListener(&#39;touchend&#39;, stopDrawing);
&lt;/script&gt;
  
&lt;style&gt;
    :root {
        --primary: #27ae60;
        --prior-color: #3498db;
        --tp-color: #2c3e50;
        --fp-color: #e74c3c;
        --bg-light: #f8f9fa;
    }

    .bayes-wrapper {
        font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, sans-serif;
        max-width: 900px;
        margin: 20px auto;
        padding: 25px;
        border: 1px solid #eee;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }

    /* Scenario Buttons */
    .scenario-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 25px;
    }

    .scenario-btn {
        padding: 10px 18px;
        border: 2px solid #eee;
        background: white;
        border-radius: 25px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 600;
        font-size: 0.9rem;
    }

    .scenario-btn:hover { border-color: var(--primary); }

    .scenario-btn.active {
        border-color: var(--primary);
        background: var(--primary);
        color: white;
        box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
    }

    /* Main Layout */
    .main-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    @media (max-width: 800px) {
        .main-layout { grid-template-columns: 1fr; }
    }

    /* Graph Animation Styling */
    .graph-container {
        width: 100%;
        height: 250px;
        background: #eee;
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 20px;
        border: 1px solid #ddd;
    }

    .area-box {
        position: absolute;
        bottom: 0;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 0.7rem;
        font-weight: bold;
        text-align: center;
        overflow: hidden;
    }

    #true-pos-area {
        left: 0;
        background: var(--tp-color);
        z-index: 2;
        border-right: 1px solid rgba(255,255,255,0.2);
    }

    #false-pos-area {
        right: 0;
        background: var(--fp-color);
        z-index: 1;
    }

    .prior-label-bar {
        position: absolute;
        bottom: -25px;
        height: 20px;
        background: var(--prior-color);
        transition: width 0.5s ease;
        border-radius: 4px;
    }

    /* Controls */
    .control-group {
        margin-bottom: 15px;
        background: var(--bg-light);
        padding: 15px;
        border-radius: 12px;
    }

    .control-group label {
        display: flex;
        justify-content: space-between;
        font-weight: 700;
        color: #333;
        margin-bottom: 8px;
    }

    input[type=range] {
        width: 100%;
        cursor: pointer;
        accent-color: var(--primary);
    }

    .result-display {
        text-align: center;
        padding: 25px;
        background: #f0fdf4;
        border-radius: 16px;
        border: 2px solid var(--primary);
        transition: transform 0.3s ease;
    }

    .result-value {
        font-size: 3.5rem;
        font-weight: 900;
        color: var(--primary);
        margin: 5px 0;
    }
&lt;/style&gt;

&lt;div class=&quot;bayes-wrapper&quot;&gt;
    &lt;div style=&quot;margin-bottom:20px;&quot;&gt;
        &lt;h3 style=&quot;margin:0 0 5px 0; color:#2c3e50;&quot;&gt;Bayesian Probability Interactive&lt;/h3&gt;
        &lt;p style=&quot;margin:0; color:#666; font-size:0.9rem;&quot;&gt;Adjust sliders to see how evidence updates belief.&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class=&quot;scenario-container&quot;&gt;
        &lt;button class=&quot;scenario-btn active&quot; onclick=&quot;setScenario(&#39;disease&#39;, this)&quot;&gt;Rare Disease&lt;/button&gt;
        &lt;button class=&quot;scenario-btn&quot; onclick=&quot;setScenario(&#39;spam&#39;, this)&quot;&gt;Spam Filter&lt;/button&gt;
        &lt;button class=&quot;scenario-btn&quot; onclick=&quot;setScenario(&#39;breath&#39;, this)&quot;&gt;Breathalyzer&lt;/button&gt;
        &lt;button class=&quot;scenario-btn&quot; onclick=&quot;setScenario(&#39;neutral&#39;, this)&quot;&gt;Neutral (50/50)&lt;/button&gt;
    &lt;/div&gt;

    &lt;div class=&quot;main-layout&quot;&gt;
        &lt;div class=&quot;visual-side&quot;&gt;
            &lt;div class=&quot;graph-container&quot;&gt;
                &lt;div id=&quot;true-pos-area&quot; class=&quot;area-box&quot;&gt;TP&lt;/div&gt;
                &lt;div id=&quot;false-pos-area&quot; class=&quot;area-box&quot;&gt;FP&lt;/div&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;result-display&quot;&gt;
                &lt;div style=&quot;font-weight:bold; color:#555; text-transform:uppercase; letter-spacing:1px; font-size:0.8rem;&quot;&gt;Final Probability P(H|E)&lt;/div&gt;
                &lt;div id=&quot;posterior-val&quot; class=&quot;result-value&quot;&gt;16.7%&lt;/div&gt;
                &lt;p style=&quot;font-size:0.85rem; color:#666; margin:0;&quot;&gt;
                    Given a positive result, this is the chance it&#39;s &lt;strong&gt;actually&lt;/strong&gt; true.
                &lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;controls&quot;&gt;
            &lt;div class=&quot;control-group&quot;&gt;
                &lt;label&gt;
                    &lt;span class=&quot;txt-prior&quot;&gt;P(H) Prior&lt;/span&gt;
                    &lt;span id=&quot;val-prior&quot;&gt;1%&lt;/span&gt;
                &lt;/label&gt;
                &lt;input type=&quot;range&quot; id=&quot;prior&quot; min=&quot;0.1&quot; max=&quot;99.9&quot; step=&quot;0.1&quot; value=&quot;1&quot; oninput=&quot;calculate()&quot;&gt;
                &lt;small&gt;The &quot;Prior&quot; width: How common is the condition?&lt;/small&gt;
            &lt;/div&gt;

            &lt;div class=&quot;control-group&quot;&gt;
                &lt;label&gt;
                    &lt;span class=&quot;txt-true-pos&quot;&gt;P(E|H) Sensitivity&lt;/span&gt;
                    &lt;span id=&quot;val-true-pos&quot;&gt;99%&lt;/span&gt;
                &lt;/label&gt;
                &lt;input type=&quot;range&quot; id=&quot;true-pos&quot; min=&quot;1&quot; max=&quot;100&quot; step=&quot;0.1&quot; value=&quot;99&quot; oninput=&quot;calculate()&quot;&gt;
                &lt;small&gt;The height of the Dark Blue box.&lt;/small&gt;
            &lt;/div&gt;

            &lt;div class=&quot;control-group&quot;&gt;
                &lt;label&gt;
                    &lt;span class=&quot;txt-false-pos&quot;&gt;P(E|¬H) False Pos&lt;/span&gt;
                    &lt;span id=&quot;val-false-pos&quot;&gt;5%&lt;/span&gt;
                &lt;/label&gt;
                &lt;input type=&quot;range&quot; id=&quot;false-pos&quot; min=&quot;0.1&quot; max=&quot;100&quot; step=&quot;0.1&quot; value=&quot;5&quot; oninput=&quot;calculate()&quot;&gt;
                &lt;small&gt;The height of the Red box.&lt;/small&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
    function calculate() {
        const prior = parseFloat(document.getElementById(&#39;prior&#39;).value) / 100;
        const tp = parseFloat(document.getElementById(&#39;true-pos&#39;).value) / 100;
        const fp = parseFloat(document.getElementById(&#39;false-pos&#39;).value) / 100;

        // Update Labels
        document.getElementById(&#39;val-prior&#39;).innerText = (prior * 100).toFixed(1) + &#39;%&#39;;
        document.getElementById(&#39;val-true-pos&#39;).innerText = (tp * 100).toFixed(1) + &#39;%&#39;;
        document.getElementById(&#39;val-false-pos&#39;).innerText = (fp * 100).toFixed(1) + &#39;%&#39;;

        // Bayes Math
        const probTruePos = tp * prior;
        const probFalsePos = fp * (1 - prior);
        const posterior = (probTruePos / (probTruePos + probFalsePos)) * 100;

        // Update Text Result
        document.getElementById(&#39;posterior-val&#39;).innerText = posterior.toFixed(1) + &#39;%&#39;;

        // Animate Graph
        // The width of the TP box is the Prior
        const tpArea = document.getElementById(&#39;true-pos-area&#39;);
        tpArea.style.width = (prior * 100) + &#39;%&#39;;
        tpArea.style.height = (tp * 100) + &#39;%&#39;;
        tpArea.innerText = (prior &gt; 0.1) ? &#39;True +&#39; : &#39;&#39;;

        // The width of the FP box is (1 - Prior)
        const fpArea = document.getElementById(&#39;false-pos-area&#39;);
        fpArea.style.width = ((1 - prior) * 100) + &#39;%&#39;;
        fpArea.style.height = (fp * 100) + &#39;%&#39;;
        fpArea.innerText = (prior &lt; 0.9) ? &#39;False +&#39; : &#39;&#39;;
        
        // Visual feedback: result box &quot;pulses&quot; slightly on change
        const resDisp = document.querySelector(&#39;.result-display&#39;);
        resDisp.style.transform = &#39;scale(1.02)&#39;;
        setTimeout(() =&gt; resDisp.style.transform = &#39;scale(1)&#39;, 100);
    }

    function setScenario(type, btn) {
        document.querySelectorAll(&#39;.scenario-btn&#39;).forEach(b =&gt; b.classList.remove(&#39;active&#39;));
        btn.classList.add(&#39;active&#39;);

        const scenarios = {
            &#39;disease&#39;: { prior: 1, tp: 99, fp: 5 },
            &#39;spam&#39;: { prior: 20, tp: 90, fp: 10 },
            &#39;breath&#39;: { prior: 0.1, tp: 100, fp: 5 },
            &#39;neutral&#39;: { prior: 50, tp: 50, fp: 50 }
        };

        const s = scenarios[type];
        document.getElementById(&#39;prior&#39;).value = s.prior;
        document.getElementById(&#39;true-pos&#39;).value = s.tp;
        document.getElementById(&#39;false-pos&#39;).value = s.fp;

        calculate();
    }

    calculate();
&lt;/script&gt;
  
 </content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/5369361265920843228/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/5369361265920843228' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/5369361265920843228'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/5369361265920843228'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2025/12/bayes-theorem-educational.html' title='Bayes&#39; Theorem - Educational Content'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-i-GgwPXImNi_o7xjtqEFAJT3nD5KXuOmUd93VtXqczL73GxwuOcb54AeLqtBzGK-9lQweaDWkB30KZDw3hXTxR77t0pRLqq-MolpBXm_aH8p6r1CF4eEwSBefWkISHOflRkl-sABL-yDBNo0oHxPm0C6e-IM0VibaxNv5KzxtaQIWet1Lt-Hj4e1hg_Z/s72-c/Cover%20image.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-8864028002803215756</id><published>2025-11-17T14:11:00.002+05:00</published><updated>2025-11-17T14:12:33.580+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="animation"/><category scheme="http://www.blogger.com/atom/ns#" term="data"/><category scheme="http://www.blogger.com/atom/ns#" term="graph"/><category scheme="http://www.blogger.com/atom/ns#" term="R"/><category scheme="http://www.blogger.com/atom/ns#" term="statistics"/><title type='text'>Animated Graph maker using R-Project-Shiny-based Packages</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT4hxklvJrI7ZTCjRJi2g9-MZGxyxqNhUAixwxZYu9gnVRlX8E8UaUSEXfNbEy5KjxLEIceipUxn84WoeZ9erreB_Iy5S8YVQBAaq3bbuazDE4U4yB25mkLnn6irgXSJAB8EbCJ7hyphenhyphenp9Uua0f-awmxiHRm2a9Nbwe58M1Z8_0fvs-AaE6K6zC-Eatqn9h2/s800/Jeepakistan.blogspot.com%205.gif&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;400&quot; data-original-height=&quot;600&quot; data-original-width=&quot;800&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT4hxklvJrI7ZTCjRJi2g9-MZGxyxqNhUAixwxZYu9gnVRlX8E8UaUSEXfNbEy5KjxLEIceipUxn84WoeZ9erreB_Iy5S8YVQBAaq3bbuazDE4U4yB25mkLnn6irgXSJAB8EbCJ7hyphenhyphenp9Uua0f-awmxiHRm2a9Nbwe58M1Z8_0fvs-AaE6K6zC-Eatqn9h2/s400/Jeepakistan.blogspot.com%205.gif&quot;/&gt;&lt;/a&gt;&lt;/div&gt;

&lt;b&gt;This animated graph maker has been developed using R-Project (4.4.1), RStudio 2025.09.1 Build 401. It is made using packages, including shiny, ggplot2, gganimate, gifski, av, dplyr, readr, shinycssloaders, gapminder, rlang, and shinyjs..&lt;/b&gt;

&lt;iframe src=&quot;https://usmanz.shinyapps.io/Animated_graphs/&quot; width=&quot;100%&quot; height=&quot;1200&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;&lt;b&gt;Check my other online advanced statistical tools here:&lt;/b&gt;&lt;/p&gt;&lt;p&gt;1. Structural Equation Modeling using Lavaan package in R -&amp;nbsp;&lt;a href=&quot;https://jeepakistan.blogspot.com/2025/07/structural-equation-modeling-sem-using.html&quot;&gt;https://jeepakistan.blogspot.com/2025/07/structural-equation-modeling-sem-using.html&lt;/a&gt;&lt;/p&gt;&lt;p&gt;2.&amp;nbsp;Meta-analysis using Odds Ratio (OR) in Microsoft Excel -&lt;a href=&quot;https://jeepakistan.blogspot.com/2025/06/meta-analysis-using-odds-ratio-or-in.html&quot; target=&quot;_blank&quot;&gt;&amp;nbsp;https://jeepakistan.blogspot.com/2025/06/meta-analysis-using-odds-ratio-or-in.html&lt;/a&gt;&lt;/p&gt;&lt;p&gt;3.&amp;nbsp;Meta-analysis using Cohen&#39;s d in Microsoft Excel -&amp;nbsp;&lt;a href=&quot;https://jeepakistan.blogspot.com/2025/05/meta-analysis-using-cohens-d-in.html&quot;&gt;https://jeepakistan.blogspot.com/2025/05/meta-analysis-using-cohens-d-in.html&lt;/a&gt;&lt;/p&gt;&lt;p&gt;4.&amp;nbsp;Meta-analysis using Correlation (r) in Microsoft Excel -&amp;nbsp;&lt;a href=&quot;https://jeepakistan.blogspot.com/2025/05/meta-analysis-using-correlation-r-in.html&quot;&gt;https://jeepakistan.blogspot.com/2025/05/meta-analysis-using-correlation-r-in.html&lt;/a&gt;&lt;/p&gt;5.&amp;nbsp;Meta-Analysis using R-Project-based Metafor, and Online calculator (R-Project-Shiny-based) -&amp;nbsp;&lt;a href=&quot;https://jeepakistan.blogspot.com/2025/09/meta-analysis-using-r-project-based.html&quot;&gt;https://jeepakistan.blogspot.com/2025/09/meta-analysis-using-r-project-based.html&lt;/a&gt;&lt;/p&gt;6.&amp;nbsp;Time Series Analyses using R-Project-based Packages, and Online calculator (R-Project-Shiny-based) -&amp;nbsp;&lt;a href=&quot;https://jeepakistan.blogspot.com/2025/10/time-series-analyses-using-r-project.html&quot;&gt;https://jeepakistan.blogspot.com/2025/10/time-series-analyses-using-r-project.html&lt;/a&gt;&lt;/p&gt;</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/8864028002803215756/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/8864028002803215756' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/8864028002803215756'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/8864028002803215756'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2025/11/animated-graph-maker-using-r-project.html' title='Animated Graph maker using R-Project-Shiny-based Packages'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT4hxklvJrI7ZTCjRJi2g9-MZGxyxqNhUAixwxZYu9gnVRlX8E8UaUSEXfNbEy5KjxLEIceipUxn84WoeZ9erreB_Iy5S8YVQBAaq3bbuazDE4U4yB25mkLnn6irgXSJAB8EbCJ7hyphenhyphenp9Uua0f-awmxiHRm2a9Nbwe58M1Z8_0fvs-AaE6K6zC-Eatqn9h2/s72-c/Jeepakistan.blogspot.com%205.gif" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-4830572380379889781</id><published>2025-11-07T14:12:05.745+05:00</published><updated>2025-11-08T11:45:07.267+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="game"/><category scheme="http://www.blogger.com/atom/ns#" term="medical"/><category scheme="http://www.blogger.com/atom/ns#" term="memory"/><title type='text'>Physiology &amp; Pharmacology Receptor Memory Game</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmxMz1Qf9I66ThMwoyXioKdy58nEuZSHY02cH7ZVKsjCI1OEJI3FoZVtobc0bk62MMsbXG_fMM5c4iESq8frGQ-lJmIdAvCdfaz3saQO2WO7czEqUWxju1BBUbDT4DtGAPSmD-lr2Adk56UVfEMaFzyK_brdL8yJnH18-70Uoo8VZOowIpkniDSrd2aV2V/s760/Cover.png&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;400&quot; data-original-height=&quot;699&quot; data-original-width=&quot;760&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmxMz1Qf9I66ThMwoyXioKdy58nEuZSHY02cH7ZVKsjCI1OEJI3FoZVtobc0bk62MMsbXG_fMM5c4iESq8frGQ-lJmIdAvCdfaz3saQO2WO7czEqUWxju1BBUbDT4DtGAPSmD-lr2Adk56UVfEMaFzyK_brdL8yJnH18-70Uoo8VZOowIpkniDSrd2aV2V/s400/Cover.png&quot;/&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;&amp;nbsp;Welcome to this Physiology &amp;amp; Pharmacology Receptor Memory Game...&lt;/p&gt;&lt;p&gt;This game has been developed to help students memorize over 100 physiological and pharmacological receptors along with their related drugs (agonists or antagonists etc.).&lt;/p&gt;&lt;p&gt;In this game, you have to flip cards on the screen to &lt;strong data-end=&quot;591&quot; data-start=&quot;536&quot;&gt;match each receptor with its correct ligand or drug helping you in memorizing them&lt;/strong&gt;&amp;nbsp;through &lt;strong data-end=&quot;686&quot; data-start=&quot;643&quot;&gt;spaced repetition and adaptive learning&lt;/strong&gt;.&lt;/p&gt;&lt;p&gt;You may either &quot;Play All&quot; which is the standard path to help you learn receptors and related drugs without getting overwhelmed, or you can select a specific category of receptors and memorize its receptors and related drugs.&amp;nbsp;&lt;/p&gt;&lt;p&gt;It has two phases to help you learn. Phase 1 relates to your exposure to only two pairs, and after completing Phase 1, you will go to Phase 2, where all pairs will appear.&amp;nbsp;&lt;/p&gt;&lt;p&gt;You may also select Smart Review mode in which only 8 pairs will appear that you may found difficult during your play. Your progress is saved in your computer&#39;s local storage, and this Smart Review will work on the Spaced Repetition Algorithm and brings forward only difficult pairs that you may found difficult to learn.&lt;/p&gt;&lt;p&gt;Note: Your feedback is important to eliminate/reduce any errors or mistakes in this game.&amp;nbsp;&amp;nbsp;&lt;/p&gt;&lt;p&gt;==============================================&lt;/p&gt;&lt;p&gt;&lt;br /&gt;&lt;/p&gt;


&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Receptor Memory Game&lt;/title&gt;
&lt;style&gt;
  body {
    text-align: center;
    font-family: Arial, sans-serif;
  }
  canvas {
    border: 2px solid #333;
    display: block;
    margin: 20px auto;
  }
  #levelTitle {
    color: #005a9c;
    font-weight: bold;
  }
  #progressDashboard {
    margin: 10px auto;
    padding: 15px;
    background-color: #f0f8ff;
    border: 1px solid #b0e0e6;
    border-radius: 8px;
    max-width: 600px;
    font-size: 1.1em;
  }
  #controls {
    margin: 15px auto;
    padding: 10px;
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    border-radius: 8px;
    max-width: 600px;
  }
  #controls label {
    margin-right: 10px;
    font-weight: bold;
  }
  #restartButton {
    padding: 8px 15px;
    font-size: 1em;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 15px;
  }
  #restartButton:hover {
    background-color: #0056b3;
  }
  #categorySelect {
      margin-right: 15px;
      padding: 5px;
  }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Physiology &amp; Pharmacology Receptor Memory Game&lt;/h1&gt;

&lt;div id=&quot;controls&quot;&gt;
  &lt;label for=&quot;categorySelect&quot;&gt;Category:&lt;/label&gt;
  &lt;select id=&quot;categorySelect&quot;&gt;
    &lt;/select&gt;

  &lt;label for=&quot;smartReviewCheckbox&quot;&gt;
    &lt;input type=&quot;checkbox&quot; id=&quot;smartReviewCheckbox&quot;&gt;
    Play Smart Review
  &lt;/label&gt;
  
  &lt;button id=&quot;restartButton&quot;&gt;Restart Game&lt;/button&gt;
&lt;/div&gt;
&lt;div id=&quot;progressDashboard&quot;&gt;Loading progress...&lt;/div&gt;
&lt;h2 id=&quot;levelTitle&quot;&gt;&lt;/h2&gt;
&lt;p&gt;Click on the cards to match receptor with its ligand/drug.&lt;/p&gt;
&lt;canvas id=&quot;gameCanvas&quot; width=&quot;400&quot; height=&quot;900&quot;&gt;&lt;/canvas&gt;

&lt;script&gt;
const canvas = document.getElementById(&#39;gameCanvas&#39;);
const ctx = canvas.getContext(&#39;2d&#39;);
// Updated control elements
const smartReviewCheckbox = document.getElementById(&#39;smartReviewCheckbox&#39;);
const restartButton = document.getElementById(&#39;restartButton&#39;);
// NEW: Category select dropdown
const categorySelect = document.getElementById(&#39;categorySelect&#39;);

// --- Game Configuration ---
const cardWidth = 176;
const cardHeight = 70;
const gap = 15;
const PHASE_1_PAIR_COUNT = 2;
const REVIEW_PAIR_COUNT = 8; // How many &quot;difficult&quot; cards to review

// --- Storage Keys ---
const PROGRESS_STORAGE_KEY = &#39;receptorGameProgress_v2&#39;;
const MASTERY_STORAGE_KEY = &#39;receptorMasteryData_v1&#39;; // For Spaced Repetition

// --- Master Pair List ---
const learningPath = [
  {
    name: &#39;Adrenergic Receptors&#39;,
    pairs: [
      { name: &#39;Beta-1 adrenoceptor&#39;, pair: &#39;Metoprolol&#39; },
      { name: &#39;Beta-2 adrenoceptor&#39;, pair: &#39;Salbutamol (Albuterol)&#39; },
      { name: &#39;Beta-3 adrenoceptor&#39;, pair: &#39;Mirabegron&#39; },
      { name: &#39;Alpha-1 adrenoceptor&#39;, pair: &#39;Prazosin&#39; },
      { name: &#39;Alpha-2 adrenoceptor&#39;, pair: &#39;Clonidine&#39; }
    ]
  },
  {
    name: &#39;Dopamine Receptors&#39;,
    pairs: [
      { name: &#39;Dopamine D1&#39;, pair: &#39;Fenoldopam&#39; },
      { name: &#39;Dopamine D2&#39;, pair: &#39;Haloperidol&#39; },
      { name: &#39;Dopamine D3&#39;, pair: &#39;Pramipexole&#39; },
      { name: &#39;Dopamine D4&#39;, pair: &#39;Clozapine&#39; }
    ]
  },
  {
    name: &#39;Serotonin (5-HT) Receptors&#39;,
    pairs: [
      { name: &#39;Serotonin 5-HT1A&#39;, pair: &#39;Buspirone&#39; },
      { name: &#39;Serotonin 5-HT1B&#39;, pair: &#39;Sumatriptan&#39; },
      { name: &#39;Serotonin 5-HT2A&#39;, pair: &#39;LSD / Risperidone&#39; },
      { name: &#39;Serotonin 5-HT2B&#39;, pair: &#39;Fenfluramine&#39; },
      { name: &#39;Serotonin 5-HT2C&#39;, pair: &#39;Lorcaserin&#39; },
      { name: &#39;Serotonin 5-HT3&#39;, pair: &#39;Ondansetron&#39; },
      { name: &#39;Serotonin 5-HT4&#39;, pair: &#39;Cisapride / Prucalopride&#39; },
      { name: &#39;Serotonin 5-HT7&#39;, pair: &#39;Lurasidone&#39; }
    ]
  },
  {
    name: &#39;Histamine Receptors&#39;,
    pairs: [
      { name: &#39;Histamine H1&#39;, pair: &#39;Diphenhydramine&#39; },
      { name: &#39;Histamine H2&#39;, pair: &#39;Ranitidine&#39; },
      { name: &#39;Histamine H3&#39;, pair: &#39;Pitolisant&#39; }
    ]
  },
  {
    name: &#39;Other Trace Amine Receptors&#39;,
    pairs: [
      { name: &#39;Trace amine-associated receptor 1 (TAAR1)&#39;, pair: &#39;Amphetamine (agonist)&#39; }
    ]
  },
{
  name: &#39;Cholinergic Receptors&#39;,
  pairs: [
    { name: &#39;Muscarinic M1&#39;, pair: &#39;Pirenzepine&#39; },
    { name: &#39;Muscarinic M2&#39;, pair: &#39;Methacholine&#39; },
    { name: &#39;Muscarinic M3&#39;, pair: &#39;Tiotropium&#39; },
    { name: &#39;Muscarinic M4&#39;, pair: &#39;Tropicamide&#39; },
    { name: &#39;Muscarinic M5&#39;, pair: &#39;Varenicline (partial agonist)&#39; },
    { name: &#39;Nicotinic acetylcholine (neuronal subtype)&#39;, pair: &#39;Nicotine / Varenicline&#39; }
  ]
},
{
  name: &#39;GABA Receptors&#39;,
  pairs: [
    { name: &#39;GABA-A&#39;, pair: &#39;Diazepam&#39; },
    { name: &#39;GABA-B&#39;, pair: &#39;Baclofen&#39; },
    { name: &#39;Metabotropic GABA B1&#39;, pair: &#39;Baclofen&#39; }
  ]
},
{
  name: &#39;Glutamate Receptors&#39;,
  pairs: [
    { name: &#39;NMDA (N-methyl-D-aspartate)&#39;, pair: &#39;Ketamine / Memantine&#39; },
    { name: &#39;AMPA (a glutamate receptor subtype)&#39;, pair: &#39;Perampanel&#39; },
    { name: &#39;Metabotropic glutamate mGlu5&#39;, pair: &#39;Mavoglurant&#39; }
  ]
},
{
  name: &#39;Opioid Receptors&#39;,
  pairs: [
    { name: &#39;Opioid mu (μ)&#39;, pair: &#39;Morphine&#39; },
    { name: &#39;Opioid kappa (κ)&#39;, pair: &#39;Butorphanol&#39; },
    { name: &#39;Opioid delta (δ)&#39;, pair: &#39;Enkephalins / Deltorphin&#39; }
  ]
},
{
  name: &#39;Cannabinoid &amp; Related Receptors&#39;,
  pairs: [
    { name: &#39;Cannabinoid CB1&#39;, pair: &#39;Δ9-Tetrahydrocannabinol (THC)&#39; },
    { name: &#39;Sigma-1 receptor (σ1)&#39;, pair: &#39;Fluvoxamine / Dextromethorphan&#39; },
    { name: &#39;GPR55 (G-protein coupled receptor 55)&#39;, pair: &#39;LPI (lysophosphatidylinositol)&#39; }
  ]
},
{
  name: &#39;Lysophospholipid &amp;\nSphingolipid Receptors&#39;,
  pairs: [
    { name: &#39;LPA1 receptor&#39;, pair: &#39;Ki16425&#39; },
    { name: &#39;LPA2 receptor&#39;, pair: &#39;Debio-0719&#39; },
    { name: &#39;LPA3 receptor&#39;, pair: &#39;OMPT&#39; },
    { name: &#39;LPA4 receptor&#39;, pair: &#39;TCLPA4-7&#39; },
    { name: &#39;LPA5 receptor&#39;, pair: &#39;AS2717638&#39; },
    { name: &#39;LPA6 receptor&#39;, pair: &#39;AM095&#39; },
    { name: &#39;S1P1 receptor&#39;, pair: &#39;Fingolimod (FTY720)&#39; },
    { name: &#39;S1P2 receptor&#39;, pair: &#39;JTE-013&#39; },
    { name: &#39;S1P3 receptor&#39;, pair: &#39;CYM5541&#39; },
    { name: &#39;S1P4 receptor&#39;, pair: &#39;CYM50308&#39; },
    { name: &#39;S1P5 receptor&#39;, pair: &#39;Siponimod&#39; }
  ]
},
{
  name: &#39;Free Fatty Acid &amp;\nMetabolite Receptors&#39;,
  pairs: [
    { name: &#39;FFA1 (GPR40)&#39;, pair: &#39;TAK-875 (Fasiglifam)&#39; },
    { name: &#39;FFA2&#39;, pair: &#39;Phenylacetamide agonists&#39; },
    { name: &#39;FFA3&#39;, pair: &#39;AR420626&#39; },
    { name: &#39;HCA1 (GPR81)&#39;, pair: &#39;Lactate (natural ligand)&#39; },
    { name: &#39;HCA2 (GPR109A)&#39;, pair: &#39;Nicotinic acid (Niacin)&#39; },
    { name: &#39;HCA3 (GPR109B)&#39;, pair: &#39;3-Hydroxybutyrate&#39; },
    { name: &#39;SUCNR1 (Succinate receptor)&#39;, pair: &#39;Succinate&#39; },
    { name: &#39;OXGR1 (Oxoglutarate receptor)&#39;, pair: &#39;Alpha-ketoglutarate&#39; }
  ]
},
{
    name: &#39;Purine Receptors&#39;,
    pairs: [
      { name: &#39;Adenosine A1 receptor&#39;, pair: &#39;Adenosine / Theophylline (antagonist)&#39; },
      { name: &#39;Adenosine A2A receptor&#39;, pair: &#39;Caffeine&#39; },
      { name: &#39;P2Y purinergic receptor (P2Y1 subtype)&#39;, pair: &#39;ADP (natural ligand)&#39; }
    ]
  },
  {
    name: &#39;Vasoactive Peptide Receptors&#39;,
    pairs: [
      { name: &#39;Angiotensin AT1 receptor&#39;, pair: &#39;Losartan&#39; },
      { name: &#39;Angiotensin AT2 receptor&#39;, pair: &#39;CGP42112A&#39; },
      { name: &#39;Vasopressin V1A receptor&#39;, pair: &#39;Terlipressin&#39; },
      { name: &#39;Oxytocin receptor&#39;, pair: &#39;Oxytocin&#39; },
      { name: &#39;Urotensin II receptor (UTS2R)&#39;, pair: &#39;Urotensin II&#39; }
    ]
  },
  {
    name: &#39;Gut and Metabolism Peptide Receptors&#39;,
    pairs: [
      { name: &#39;GLP-1 receptor&#39;, pair: &#39;Exenatide / Liraglutide&#39; },
      { name: &#39;GIPR&#39;, pair: &#39;Tirzepatide&#39; },
      { name: &#39;GLP2 receptor&#39;, pair: &#39;Teduglutide&#39; },
      { name: &#39;GHSR1a (Ghrelin receptor)&#39;, pair: &#39;Ghrelin / Anamorelin&#39; },
      { name: &#39;Motilin receptor (MLNR)&#39;, pair: &#39;Erythromycin&#39; }
    ]
  },
  {
    name: &#39;Hypothalamic/Pituitary Peptide Receptors&#39;,
    pairs: [
      { name: &#39;Kisspeptin receptor (KISS1R)&#39;, pair: &#39;Kisspeptin&#39; },
      { name: &#39;Apelin receptor (APLNR)&#39;, pair: &#39;Apelin-13&#39; },
      { name: &#39;Orexin-2 receptor (OX2R)&#39;, pair: &#39;Suvorexant&#39; },
      { name: &#39;VPAC1&#39;, pair: &#39;VIP (vasoactive intestinal peptide)&#39; },
      { name: &#39;VPAC2&#39;, pair: &#39;VIP analogs&#39; },
      { name: &#39;PAC1&#39;, pair: &#39;PACAP (pituitary adenylate cyclase-activating peptide)&#39; },
      { name: &#39;Parathyroid hormone receptor PTH1 receptor&#39;, pair: &#39;Teriparatide&#39; }
    ]
  },
  {
    name: &#39;Neuropeptide Y/FF and Related Receptors&#39;,
    pairs: [
      { name: &#39;NPY Y1 receptor&#39;, pair: &#39;BIBO 3304&#39; },
      { name: &#39;NPY Y2 receptor&#39;, pair: &#39;GR231118&#39; },
      { name: &#39;NPY Y4 receptor&#39;, pair: &#39;Pancreatic polypeptide&#39; },
      { name: &#39;NPY Y5 receptor&#39;, pair: &#39;CGP71683A&#39; },
      { name: &#39;NPFFR1&#39;, pair: &#39;Neuropeptide FF&#39; },
      { name: &#39;NPFFR2&#39;, pair: &#39;RF9 (antagonist)&#39; },
      { name: &#39;NPSR1&#39;, pair: &#39;Neuropeptide S&#39; }
    ]
  },
  {
    name: &#39;Tachykinin/Galanin Receptors&#39;,
    pairs: [
      { name: &#39;Tachykinin NK2 receptor&#39;, pair: &#39;Neurokinin A / Saredutant&#39; },
      { name: &#39;Galanin receptor 1 (GALR1)&#39;, pair: &#39;Galanin&#39; },
      { name: &#39;GALR2&#39;, pair: &#39;Galanin (agonist)&#39; },
      { name: &#39;GALR3&#39;, pair: &#39;SNAP 37889 (antagonist)&#39; }
    ]
  },
{
    name: &#39;Glycoprotein/Melanocortin Receptors&#39;,
    pairs: [
      { name: &#39;Glycoprotein hormone receptor (TSH receptor)&#39;, pair: &#39;Thyrotropin (TSH)&#39; },
      { name: &#39;Melanocortin MC2 receptor&#39;, pair: &#39;ACTH (adrenocorticotropic hormone)&#39; },
      { name: &#39;Melanocortin MC4 receptor&#39;, pair: &#39;Setmelanotide&#39; }
    ]
  },
  {
    name: &#39;Ion/Metabolite Sensing Receptors&#39;,
    pairs: [
      { name: &#39;Calcium-sensing receptor (CaSR)&#39;, pair: &#39;Cinacalcet&#39; }
    ]
  },
  {
    name: &#39;Orphan and Novel GPCRs&#39;,
    pairs: [
      { name: &#39;GPR35&#39;, pair: &#39;LPA / Zaprinast&#39; },
      { name: &#39;GPR119&#39;, pair: &#39;AR231453 / OEA&#39; },
      { name: &#39;GPR132 (G2A)&#39;, pair: &#39;Oxidized free fatty acids&#39; },
      { name: &#39;GPR142&#39;, pair: &#39;Tryptophan derivatives&#39; }
    ]
  },
  {
    name: &#39;Relaxin Family Receptors&#39;,
    pairs: [
      { name: &#39;RXFP3&#39;, pair: &#39;Relaxin-3&#39; },
      { name: &#39;RXFP4&#39;, pair: &#39;Insulin-like peptide 5 (INSL5)&#39; }
    ]
  },
  {
    name: &#39;Immune and Chemokine Receptors&#39;,
    pairs: [
      { name: &#39;Chemokine receptor CX3CR1&#39;, pair: &#39;Fractalkine&#39; },
      { name: &#39;Chemokine receptor CCR5&#39;, pair: &#39;Maraviroc&#39; },
      { name: &#39;Chemokine receptor CCR2&#39;, pair: &#39;RS504393&#39; },
      { name: &#39;Chemokine receptor CXCR4&#39;, pair: &#39;Plerixafor&#39; },
      { name: &#39;ChemR23 (CMKLR1)&#39;, pair: &#39;Chemerin&#39; },
      { name: &#39;Formyl peptide receptor FPR1&#39;, pair: &#39;N-formylmethionyl-leucyl-phenylalanine (fMLP)&#39; },
      { name: &#39;Complement receptor C3aR&#39;, pair: &#39;C3a (endogenous ligand)&#39; },
      { name: &#39;Toll-like receptor TLR4&#39;, pair: &#39;LPS (lipopolysaccharide)&#39; }
    ]
  },
{
    name: &#39;Enzyme-Linked Receptors&#39;,
    pairs: [
      { name: &#39;Insulin receptor (tyrosine kinase type)&#39;, pair: &#39;Insulin&#39; }
    ]
  },
  {
    name: &#39;Nuclear/Intracellular Receptors&#39;,
    pairs: [
      { name: &#39;Thyroid hormone receptor&#39;, pair: &#39;Levothyroxine (T4)&#39; },
      { name: &#39;Mineralocorticoid receptor&#39;, pair: &#39;Aldosterone / Spironolactone (antagonist)&#39; },
      { name: &#39;RORγ (Retinoic-acid-related orphan receptor gamma)&#39;, pair: &#39;SR2211 (inverse agonist)&#39; },
      { name: &#39;PPARδ (Peroxisome proliferator-activated receptor delta)&#39;, pair: &#39;GW501516&#39; },
      { name: &#39;LXR receptor (Liver X receptor)&#39;, pair: &#39;T0901317&#39; },
      { name: &#39;FXR (Farnesoid X receptor)&#39;, pair: &#39;Obeticholic acid&#39; }
    ]
  }
];
const totalCategories = learningPath.length;
const totalLearningTasks = totalCategories * 2; // 2 phases per category

// --- Game State Variables ---
let cards = [];
let flippedCards = [];
let matches = 0;
let currentLevelPairs = []; 
let gamePhase = 1; 
let currentCategoryIndex = 0;
let useSmartReviewMode = false;
let masteryData = {}; // Holds the spaced repetition data

// --- NEW FUNCTION: Populate Category Dropdown ---
/**
 * Populates the #categorySelect dropdown with all categories
 */
function populateCategorySelect() {
  // Add the default &quot;Play All&quot; option
  const defaultOption = document.createElement(&#39;option&#39;);
  defaultOption.value = &quot;-1&quot;;
  defaultOption.textContent = &quot;Play All (Standard Path)&quot;;
  categorySelect.appendChild(defaultOption);

  // Add an option for each category
  learningPath.forEach((category, index) =&gt; {
    const option = document.createElement(&#39;option&#39;);
    option.value = index;
    option.textContent = category.name;
    categorySelect.appendChild(option);
  });
}


// --- Spaced Repetition (SR) Functions ---

/**
 * Creates a base mastery object from the learning path.
 * @param {boolean} save - Whether to save the new data to localStorage.
 */
function initializeMasteryData(save = true) {
  const data = {};
  learningPath.flatMap(cat =&gt; cat.pairs).forEach(pair =&gt; {
    // pair.name is the unique key (e.g., &#39;Beta-1&#39;)
    data[pair.name] = { masteryLevel: 0 }; // Level 0 is &quot;unlearned&quot;
  });
  if (save) {
    saveMasteryData(data);
  }
  return data;
}

/**
 * Saves the mastery data object to localStorage.
 */
function saveMasteryData(data) {
  localStorage.setItem(MASTERY_STORAGE_KEY, JSON.stringify(data));
}

/**
 * Loads mastery data. If new pairs exist in code, they are added.
 * If old pairs were removed, they are pruned.
 */
function loadMasteryData() {
  const baseData = initializeMasteryData(false); // Get the fresh template
  const savedData = localStorage.getItem(MASTERY_STORAGE_KEY);
  
  if (savedData) {
    const parsedData = JSON.parse(savedData);
    // Merge: Overwrite base data with saved data,
    // this keeps progress for existing pairs and adds new pairs at level 0.
    Object.keys(baseData).forEach(key =&gt; {
      if (parsedData[key]) {
        baseData[key] = parsedData[key];
      }
    });
    saveMasteryData(baseData); // Save the cleaned/merged data
    return baseData;
  } else {
    // No saved data, save the initial template
    saveMasteryData(baseData);
    return baseData;
  }
}

/**
 * The core SR logic. Called after a match attempt.
 * @param {string} pairKey - The unique name of the pair (e.g., &#39;Beta-1&#39;)
 * @param {boolean} wasCorrect - True if the match was successful, false if not.
 */
function updateMastery(pairKey, wasCorrect) {
  if (!masteryData[pairKey]) return; // Safety check

  if (wasCorrect) {
    // Successful match: Increase mastery
    masteryData[pairKey].masteryLevel += 1;
  } else {
    // Failed match: Reset mastery to 0. This pair is now &quot;difficult&quot;.
    masteryData[pairKey].masteryLevel = 0;
  }
  
  // Save changes after every update
  saveMasteryData(masteryData);
}

// --- Progress &amp; Storage (Game Path) ---

function updateDashboard() {
  const dashboard = document.getElementById(&#39;progressDashboard&#39;);

  if (useSmartReviewMode) {
    dashboard.innerHTML = `You are in &lt;strong&gt;Smart Review Mode&lt;/strong&gt;. Focusing on your ${REVIEW_PAIR_COUNT} most difficult pairs.`;
    return;
  }
  
  // NEW: Check for practice mode
  if (gamePhase === 0) {
      dashboard.innerHTML = `You are in &lt;strong&gt;Practice Mode&lt;/strong&gt;. Progress won&#39;t be saved.`;
      return;
  }

  let masteredCount = 0;
  if (gamePhase === 1) {
    masteredCount = currentCategoryIndex;
  } else if (gamePhase === 2) {
    masteredCount = totalCategories + currentCategoryIndex;
  } else if (gamePhase === 3) {
    masteredCount = totalLearningTasks;
  }

  const percentage = Math.round((masteredCount / totalLearningTasks) * 100);

  if (gamePhase === 3) {
    dashboard.innerHTML = `Congratulations! You&#39;ve mastered all &lt;strong&gt;${totalLearningTasks}&lt;/strong&gt; stages! (${percentage}%) 🎉`;
  } else {
    dashboard.innerHTML = `Phase: &lt;strong&gt;${gamePhase}&lt;/strong&gt; / 2 | Progress: &lt;strong&gt;${masteredCount}&lt;/strong&gt; / &lt;strong&gt;${totalLearningTasks}&lt;/strong&gt; stages (${percentage}%)`;
  }
}

function saveProgress() {
  if (useSmartReviewMode || gamePhase === 0) return; // Don&#39;t save in review or practice mode
  localStorage.setItem(PROGRESS_STORAGE_KEY, JSON.stringify({ gamePhase: gamePhase, categoryIndex: currentCategoryIndex }));
}

function loadProgress() {
  const savedData = localStorage.getItem(PROGRESS_STORAGE_KEY);
  if (savedData) {
    const data = JSON.parse(savedData);
    if (data.gamePhase === 3) {
      return { gamePhase: 1, categoryIndex: 0 };
    }
    return { gamePhase: data.gamePhase || 1, categoryIndex: data.categoryIndex || 0 };
  }
  return { gamePhase: 1, categoryIndex: 0 }; 
}

// --- Game Logic ---

// --- MODIFIED FUNCTION ---
function setupBoard() {
  cards = [];
  flippedCards = [];
  matches = 0;

  // Create card objects, NOW WITH pairKey for SR tracking
  currentLevelPairs.forEach(r =&gt; {
    // r.name is the unique key
    // Add a &#39;type&#39; property to distinguish
    cards.push({text: r.name, matched: false, flipped: false, pairKey: r.name, type: &#39;receptor&#39;});
    cards.push({text: r.pair, matched: false, flipped: false, pairKey: r.name, type: &#39;drug&#39;});
  });

  cards.sort(() =&gt; Math.random() - 0.5);
  drawCards();
}

/**
 * Sets up the game for a &quot;Smart Review&quot; round
 */
function startSmartReviewLevel() {
  document.getElementById(&#39;levelTitle&#39;).textContent = &#39;Smart Review Challenge&#39;;
  updateDashboard();

  // 1. Get all pairs from the master list
  let allPairs = learningPath.flatMap(category =&gt; category.pairs);
  
  // 2. Map them to include their mastery level
  let weightedPairs = allPairs.map(pair =&gt; ({
    pairObject: pair,
    mastery: masteryData[pair.name] ? masteryData[pair.name].masteryLevel : 0
  }));

  // 3. Sort by mastery level, ascending (lowest mastery first)
  weightedPairs.sort((a, b) =&gt; a.mastery - b.mastery);

  // 4. Take the {REVIEW_PAIR_COUNT} most difficult pairs
  currentLevelPairs = weightedPairs.slice(0, REVIEW_PAIR_COUNT).map(wp =&gt; wp.pairObject);

  setupBoard();
}

// --- NEW FUNCTION: Start Single Category ---
/**
 * Sets up the game for a single &quot;practice&quot; category
 * @param {number} categoryIndex - The index from the learningPath array
 */
function startSingleCategoryLevel(categoryIndex) {
    const category = learningPath[categoryIndex];
    document.getElementById(&#39;levelTitle&#39;).textContent = `Practice Mode: ${category.name}`;
    
    // Set gamePhase to a flag (e.g., 0) to indicate &quot;practice mode&quot;
    gamePhase = 0; 
    currentCategoryIndex = categoryIndex; // Store for the &quot;complete&quot; message
    updateDashboard();

    // Use *all* pairs from this category
    currentLevelPairs = category.pairs;
    
    setupBoard();
}


/**
 * Sets up the game board for the current *phased* level
 */
function startPhasedLevel() {
  if (gamePhase === 3) {
    updateDashboard(); // Show 100%
    alert(&#39;Congratulations! You have mastered all receptor categories!&#39;);
    return;
  }
  
  updateDashboard();
  const category = learningPath[currentCategoryIndex];

  if (gamePhase === 1) {
    currentLevelPairs = category.pairs.slice(0, PHASE_1_PAIR_COUNT);
    document.getElementById(&#39;levelTitle&#39;).textContent = `Phase 1 (Intro): ${category.name}`;
  } else if (gamePhase === 2) {
    currentLevelPairs = category.pairs;
    document.getElementById(&#39;levelTitle&#39;).textContent = `Phase 2 (Mastery): ${category.name}`;
  }

  setupBoard();
}

// --- MODIFIED FUNCTION ---
function drawCards() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // --- NEW: Define colors ---
  const receptorColor = { bg: &#39;#e6f0ff&#39;, text: &#39;#005a9c&#39; }; // Light blue bg, dark blue text
  const drugColor = { bg: &#39;#e6f9f0&#39;, text: &#39;#006a4e&#39; }; // Light green bg, dark green text
  const defaultColor = { bg: &#39;#333&#39;, text: &#39;#fff&#39; }; // Unflipped
  const matchedColor = { bg: &#39;#fff&#39;, text: &#39;#000&#39; }; // Matched

  let x = gap, y = gap;
  cards.forEach((card, index) =&gt; {
    let currentBgColor = defaultColor.bg;
    let currentTextColor = defaultColor.text;

    if (card.matched) {
        currentBgColor = matchedColor.bg; // Keep matched default
        currentTextColor = matchedColor.text;
    } else if (card.flipped) {
        if (card.type === &#39;receptor&#39;) {
            currentBgColor = receptorColor.bg;
            currentTextColor = receptorColor.text;
        } else if (card.type === &#39;drug&#39;) {
            currentBgColor = drugColor.bg;
            currentTextColor = drugColor.text;
        } else {
            // Fallback (shouldn&#39;t happen)
            currentBgColor = matchedColor.bg;
            currentTextColor = matchedColor.text;
        }
    }
    
    ctx.fillStyle = currentBgColor; // Set background
    ctx.fillRect(x, y, cardWidth, cardHeight);
    
    ctx.strokeStyle = card.matched ? &#39;#0f0&#39; : &#39;#000&#39;;
    ctx.lineWidth = card.matched ? 3 : 1;
    ctx.strokeRect(x, y, cardWidth, cardHeight);
    
    ctx.fillStyle = currentTextColor; // Set text color
    ctx.font = &#39;14px Arial&#39;;
    ctx.textAlign = &#39;center&#39;;
    ctx.fillText(
      card.flipped || card.matched ? card.text : &#39;Click&#39;, 
      x + (cardWidth / 2), 
      y + (cardHeight / 2) + 5
    );
    ctx.textAlign = &#39;left&#39;;
    ctx.lineWidth = 1;

    card.x = x;
    card.y = y;

    x += cardWidth + gap;
    if (x + cardWidth + gap &gt; canvas.width) {
      x = gap;
      y += cardHeight + gap;
    }
  });
}

/**
 * Checks if the two flipped cards are a match AND updates mastery data
 */
function checkMatch() {
  const [first, second] = flippedCards;
  
  // The pairKey is the same if they are a match
  const key1 = first.pairKey;
  const key2 = second.pairKey;
  const pairFound = (key1 === key2);

  if (pairFound) {
    // --- CORRECT MATCH ---
    first.matched = true;
    second.matched = true;
    matches++;
    
    // Update mastery: This was a correct guess
    updateMastery(key1, true);
    
    // --- MODIFIED: Check for level complete ---
    if (matches === currentLevelPairs.length) {
      if (useSmartReviewMode) {
        // Smart Review complete
        setTimeout(() =&gt; {
          alert(&#39;Smart Review complete! Your difficult pairs have been updated. Press Restart to play again.&#39;);
        }, 500);
      } else if (gamePhase === 0) {
        // NEW: This was a single category practice round
        setTimeout(() =&gt; {
          alert(`Practice complete for: ${learningPath[currentCategoryIndex].name}! Press Restart to play again or choose another category.`);
        }, 500);
        // DO NOT save progress or advance level
      } else {
        // This is the original phased mode logic
        setTimeout(() =&gt; {
          currentCategoryIndex++;
          
          if (currentCategoryIndex &gt;= learningPath.length) {
            currentCategoryIndex = 0; 
            if (gamePhase === 1) {
              gamePhase = 2;
              alert(`Phase 1 complete! Now for mastery. Unlocking Phase 2...`);
            } else if (gamePhase === 2) {
              gamePhase = 3; // Game is complete!
            }
          }
          
          saveProgress(); 
          startPhasedLevel(); // Start next level or show completion
        }, 800);
      }
    }
    // --- END MODIFICATION ---

  } else {
    // --- INCORRECT MATCH ---
    first.flipped = false;
    second.flipped = false;
    
    // Update mastery: This was a mistake.
    // Penalize *both* pairs involved in the failed match.
    updateMastery(key1, false);
    updateMastery(key2, false);
  }

  flippedCards = []; // Clear flipped cards
  
  if (!pairFound) {
    setTimeout(drawCards, 800);
  } else {
    drawCards(); // Redraw immediately on a match
  }
}

// --- Event Listeners ---

canvas.addEventListener(&#39;click&#39;, (e) =&gt; {
  if (flippedCards.length === 2) return;

  const rect = canvas.getBoundingClientRect();
  const mx = e.clientX - rect.left;
  const my = e.clientY - rect.top;

  cards.forEach(card =&gt; {
    if (
      mx &gt; card.x &amp;&amp; mx &lt; card.x + cardWidth &amp;&amp;
      my &gt; card.y &amp;&amp; my &lt; card.y + cardHeight &amp;&amp;
      !card.flipped &amp;&amp; !card.matched
    ) {
      card.flipped = true;
      flippedCards.push(card);
      drawCards(); 

      if (flippedCards.length === 2) {
        setTimeout(checkMatch, 800);
      }
    }
  });
});

/**
* Main function to start or restart the game
* --- MODIFIED FOR CATEGORY SELECTION ---
*/
function initializeGame() {
  // Load mastery data ONCE at the start
  masteryData = loadMasteryData(); 
  
  useSmartReviewMode = smartReviewCheckbox.checked;
  const selectedIndex = parseInt(categorySelect.value, 10);

  if (useSmartReviewMode) {
    // Smart Review overrides all
    startSmartReviewLevel();
  } else if (selectedIndex &gt; -1) {
    // User selected a specific category
    startSingleCategoryLevel(selectedIndex);
  } else {
    // User selected &quot;Play All&quot; (phased mode)
    let loaded = loadProgress();
    gamePhase = loaded.gamePhase;
    currentCategoryIndex = loaded.categoryIndex;
    startPhasedLevel();
  }
}

// --- NEW: Add listeners for the controls ---
smartReviewCheckbox.addEventListener(&#39;change&#39;, () =&gt; {
    // If smart review is checked, disable category selection
    categorySelect.disabled = smartReviewCheckbox.checked;
});

categorySelect.addEventListener(&#39;change&#39;, () =&gt; {
    // If a specific category is chosen, disable smart review
    const selectedIndex = parseInt(categorySelect.value, 10);
    smartReviewCheckbox.disabled = (selectedIndex &gt; -1);
});


// --- Start the game ---
restartButton.addEventListener(&#39;click&#39;, initializeGame);

// NEW: Populate the dropdown BEFORE the first game initialization
populateCategorySelect(); 

// Initial game load
initializeGame();

&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/4830572380379889781/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/4830572380379889781' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/4830572380379889781'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/4830572380379889781'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2025/11/receptor-memory-game-body-text-align.html' title='Physiology &amp; Pharmacology Receptor Memory Game'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmxMz1Qf9I66ThMwoyXioKdy58nEuZSHY02cH7ZVKsjCI1OEJI3FoZVtobc0bk62MMsbXG_fMM5c4iESq8frGQ-lJmIdAvCdfaz3saQO2WO7czEqUWxju1BBUbDT4DtGAPSmD-lr2Adk56UVfEMaFzyK_brdL8yJnH18-70Uoo8VZOowIpkniDSrd2aV2V/s72-c/Cover.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-8216637909156578027</id><published>2025-10-21T10:08:00.002+05:00</published><updated>2025-10-21T10:08:58.970+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Research"/><category scheme="http://www.blogger.com/atom/ns#" term="statistics"/><category scheme="http://www.blogger.com/atom/ns#" term="time series"/><title type='text'>Time Series Analyses using R-Project-based Packages, and Online calculator (R-Project-Shiny-based)</title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOWPg1tasgkp7gc1BgOlCvg-gxWgDHNqscib1bsKVL_pjGd_TTa88mAWdkOuaKP-uqZx394emRrelSMMhiwPMI7aq06hsiiqz9qIRmjfY9jeDrFfmVq4tsNpNrURfbBjSI9kNMPUzIA79ctvFYLvy3i3fTylSUyYfN-A11w1QxhCtDRd5Wrhi0MEKXtOOD/s1585/Blogger%20cover.png&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;400&quot; data-original-height=&quot;1379&quot; data-original-width=&quot;1585&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOWPg1tasgkp7gc1BgOlCvg-gxWgDHNqscib1bsKVL_pjGd_TTa88mAWdkOuaKP-uqZx394emRrelSMMhiwPMI7aq06hsiiqz9qIRmjfY9jeDrFfmVq4tsNpNrURfbBjSI9kNMPUzIA79ctvFYLvy3i3fTylSUyYfN-A11w1QxhCtDRd5Wrhi0MEKXtOOD/s400/Blogger%20cover.png&quot;/&gt;&lt;/a&gt;&lt;/div&gt;

&lt;b&gt;This online calculator has been developed using R-Project (4.4.1), RStudio 2025.09.1 Build 401. It is made using packages, including shiny, shinydashboard, forecast, xts, rugarch, vars, tseries, ggplot2, plotly, zoo, tidyr, DT, shinycssloaders, and dplyr..&lt;/b&gt;

&lt;iframe src=&quot;https://usmanz.shinyapps.io/Time_Series_Analysis/&quot; width=&quot;100%&quot; height=&quot;1200&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;&lt;b&gt;Check my other online advanced statistical tools here:&lt;/b&gt;&lt;/p&gt;&lt;p&gt;1. Structural Equation Modeling using Lavaan package in R -&amp;nbsp;&lt;a href=&quot;https://jeepakistan.blogspot.com/2025/07/structural-equation-modeling-sem-using.html&quot;&gt;https://jeepakistan.blogspot.com/2025/07/structural-equation-modeling-sem-using.html&lt;/a&gt;&lt;/p&gt;&lt;p&gt;2.&amp;nbsp;Meta-analysis using Odds Ratio (OR) in Microsoft Excel -&lt;a href=&quot;https://jeepakistan.blogspot.com/2025/06/meta-analysis-using-odds-ratio-or-in.html&quot; target=&quot;_blank&quot;&gt;&amp;nbsp;https://jeepakistan.blogspot.com/2025/06/meta-analysis-using-odds-ratio-or-in.html&lt;/a&gt;&lt;/p&gt;&lt;p&gt;3.&amp;nbsp;Meta-analysis using Cohen&#39;s d in Microsoft Excel -&amp;nbsp;&lt;a href=&quot;https://jeepakistan.blogspot.com/2025/05/meta-analysis-using-cohens-d-in.html&quot;&gt;https://jeepakistan.blogspot.com/2025/05/meta-analysis-using-cohens-d-in.html&lt;/a&gt;&lt;/p&gt;&lt;p&gt;4.&amp;nbsp;Meta-analysis using Correlation (r) in Microsoft Excel -&amp;nbsp;&lt;a href=&quot;https://jeepakistan.blogspot.com/2025/05/meta-analysis-using-correlation-r-in.html&quot;&gt;https://jeepakistan.blogspot.com/2025/05/meta-analysis-using-correlation-r-in.html&lt;/a&gt;&lt;/p&gt;5.&amp;nbsp;Meta-Analysis using R-Project-based Metafor, and Online calculator (R-Project-Shiny-based) -&amp;nbsp;&lt;a href=&quot;https://jeepakistan.blogspot.com/2025/09/meta-analysis-using-r-project-based.html&quot;&gt;https://jeepakistan.blogspot.com/2025/09/meta-analysis-using-r-project-based.html&lt;/a&gt;&lt;/p&gt;</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/8216637909156578027/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/8216637909156578027' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/8216637909156578027'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/8216637909156578027'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2025/10/time-series-analyses-using-r-project.html' title='Time Series Analyses using R-Project-based Packages, and Online calculator (R-Project-Shiny-based)'/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOWPg1tasgkp7gc1BgOlCvg-gxWgDHNqscib1bsKVL_pjGd_TTa88mAWdkOuaKP-uqZx394emRrelSMMhiwPMI7aq06hsiiqz9qIRmjfY9jeDrFfmVq4tsNpNrURfbBjSI9kNMPUzIA79ctvFYLvy3i3fTylSUyYfN-A11w1QxhCtDRd5Wrhi0MEKXtOOD/s72-c/Blogger%20cover.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-8803139780408321815.post-9023055722187631935</id><published>2025-09-15T12:03:00.002+05:00</published><updated>2025-09-15T12:05:28.197+05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Chemistry"/><category scheme="http://www.blogger.com/atom/ns#" term="education"/><category scheme="http://www.blogger.com/atom/ns#" term="structures"/><title type='text'>Memorize over 170 chemical structures by practically drawing and using Spaced Repetition algorithm  </title><content type='html'>&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_y7INPu_0pX-htdzolQyu8LXs1HYWLDx1sPyTcTUIYRfQJQWE7tWhHGOXMzXNm7OJVBZvC2rEDpni9ajU4nWnz5ouVT-wlnWNNF5Xl7r7Mh03rd4XKyF0_9PQVqTqEMqxQkTL_G52gz_ySf47kcPD9Xb-z91cl-msVcBpc8hF5ccXhNX4zDRU29dtby5p/s792/Cover.jpg&quot; style=&quot;display: block; padding: 1em 0; text-align: center; &quot;&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;400&quot; data-original-height=&quot;688&quot; data-original-width=&quot;792&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_y7INPu_0pX-htdzolQyu8LXs1HYWLDx1sPyTcTUIYRfQJQWE7tWhHGOXMzXNm7OJVBZvC2rEDpni9ajU4nWnz5ouVT-wlnWNNF5Xl7r7Mh03rd4XKyF0_9PQVqTqEMqxQkTL_G52gz_ySf47kcPD9Xb-z91cl-msVcBpc8hF5ccXhNX4zDRU29dtby5p/s400/Cover.jpg&quot;/&gt;&lt;/a&gt;&lt;/div&gt;

&lt;p&gt;&lt;b&gt;&amp;nbsp;Please wait while the page uploads completely...&lt;/b&gt;&lt;/p&gt;

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Advanced Chemical Structures Quiz&lt;/title&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://unpkg.com/smiles-drawer@2.0.1/dist/smiles-drawer.min.js&quot;&gt;&lt;/script&gt;
    &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;&gt;
    &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;style&gt;
        body {
            font-family: &#39;Inter&#39;, sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        canvas {
            border: 2px solid #e5e7eb;
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            touch-action: none;
        }
        .container {
            max-width: 90%;
            width: 500px;
            text-align: center;
        }
        .hidden { display: none; }
        /* Style for peek button when disabled */
        button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;p-4&quot;&gt;

    &lt;div class=&quot;container bg-white p-6 rounded-2xl shadow-xl flex flex-col items-center&quot;&gt;
        &lt;h1 class=&quot;text-3xl sm:text-4xl font-bold text-gray-800 mb-2&quot;&gt;Chemical Structures SRS&lt;/h1&gt;
        &lt;p class=&quot;text-gray-500 mb-4&quot;&gt;Draw the structure, then rate your memory!&lt;/p&gt;

        &lt;div class=&quot;w-full mb-4&quot;&gt;
            &lt;label for=&quot;subjectSelector&quot; class=&quot;block text-sm font-medium text-gray-700 mb-1&quot;&gt;Choose a subject:&lt;/label&gt;
            &lt;select id=&quot;subjectSelector&quot; class=&quot;w-full p-2 border border-gray-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500&quot;&gt;
                &lt;option value=&quot;all&quot;&gt;All Subjects&lt;/option&gt;
&lt;option value=&quot;general&quot;&gt;General Chemistry&lt;/option&gt;
&lt;option value=&quot;organic&quot;&gt;Organic Chemistry&lt;/option&gt;
&lt;option value=&quot;biochem&quot;&gt;Biochemistry&lt;/option&gt;
&lt;option value=&quot;drugs&quot;&gt;Common Drugs &amp; Molecules&lt;/option&gt;
&lt;option value=&quot;alevel&quot;&gt;A Level Chemistry&lt;/option&gt;
&lt;option value=&quot;olevel&quot;&gt;O Level Chemistry&lt;/option&gt;
&lt;option value=&quot;medicinal&quot;&gt;Medicinal Chemistry&lt;/option&gt;
&lt;option value=&quot;inorganic&quot;&gt;Inorganic Chemistry&lt;/option&gt;
&lt;option value=&quot;physical&quot;&gt;Physical Chemistry&lt;/option&gt;
&lt;option value=&quot;analytical&quot;&gt;Analytical Chemistry&lt;/option&gt;
&lt;option value=&quot;icho&quot;&gt;Olympiad Chemistry (IChO / IJSO)&lt;/option&gt;
&lt;option value=&quot;gre&quot;&gt;GRE Chemistry &amp; University Level&lt;/option&gt;
&lt;option value=&quot;iupac&quot;&gt;Advanced Chemistry (IUPAC / Professional)&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
        
        &lt;p id=&quot;progressCounter&quot; class=&quot;text-md font-semibold text-gray-600 mb-4&quot;&gt;&lt;/p&gt;
        
        &lt;div id=&quot;quizArea&quot; class=&quot;w-full mb-6&quot;&gt;
            &lt;h2 id=&quot;chemicalName&quot; class=&quot;text-2xl font-semibold text-indigo-600 mb-4 h-8&quot;&gt;&lt;/h2&gt;
            &lt;canvas id=&quot;quizCanvas&quot; width=&quot;400&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;
            &lt;div id=&quot;noReviewMessage&quot; class=&quot;hidden flex flex-col items-center justify-center h-[300px]&quot;&gt;
                 &lt;p class=&quot;text-xl font-semibold text-green-600&quot;&gt;All done for now! ✅&lt;/p&gt;
                 &lt;p class=&quot;text-gray-500 mt-2&quot;&gt;Come back later for new review items.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div id=&quot;buttonContainer&quot; class=&quot;w-full&quot;&gt;
            &lt;div id=&quot;drawButtons&quot; class=&quot;grid grid-cols-3 gap-4 w-full&quot;&gt;
                 &lt;button id=&quot;clearBtn&quot; class=&quot;bg-yellow-500 text-white font-bold py-3 px-6 rounded-xl shadow-lg hover:bg-yellow-600 transition&quot;&gt;
                    Clear
                &lt;/button&gt;
                &lt;button id=&quot;peekBtn&quot; class=&quot;bg-purple-500 text-white font-bold py-3 px-6 rounded-xl shadow-lg hover:bg-purple-600 transition&quot;&gt;
                    Peek
                &lt;/button&gt;
                &lt;button id=&quot;showAnswerBtn&quot; class=&quot;bg-blue-500 text-white font-bold py-3 px-6 rounded-xl shadow-lg hover:bg-blue-600 transition&quot;&gt;
                    Answer
                &lt;/button&gt;
            &lt;/div&gt;
            &lt;div id=&quot;feedbackButtons&quot; class=&quot;hidden grid grid-cols-2 gap-4 w-full&quot;&gt;
                &lt;button id=&quot;forgotBtn&quot; class=&quot;bg-red-500 text-white font-bold py-3 px-6 rounded-xl shadow-lg hover:bg-red-600 transition&quot;&gt;
                    I forgot
                &lt;/button&gt;
                &lt;button id=&quot;knownBtn&quot; class=&quot;bg-green-500 text-white font-bold py-3 px-6 rounded-xl shadow-lg hover:bg-green-600 transition&quot;&gt;
                    I knew it
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        window.onload = function() {
            // --- DOM Elements ---
            const canvas = document.getElementById(&#39;quizCanvas&#39;);
            const ctx = canvas.getContext(&#39;2d&#39;);
            const chemicalNameEl = document.getElementById(&#39;chemicalName&#39;);
            const progressCounterEl = document.getElementById(&#39;progressCounter&#39;);
            const subjectSelector = document.getElementById(&#39;subjectSelector&#39;);
            const showAnswerBtn = document.getElementById(&#39;showAnswerBtn&#39;);
            const clearBtn = document.getElementById(&#39;clearBtn&#39;);
            const peekBtn = document.getElementById(&#39;peekBtn&#39;);
            const drawButtons = document.getElementById(&#39;drawButtons&#39;);
            const feedbackButtons = document.getElementById(&#39;feedbackButtons&#39;);
            const forgotBtn = document.getElementById(&#39;forgotBtn&#39;);
            const knownBtn = document.getElementById(&#39;knownBtn&#39;);
            const noReviewMessage = document.getElementById(&#39;noReviewMessage&#39;);

            // --- SmilesDrawer Initialization ---
            const smilesDrawer = new SmilesDrawer.Drawer({ width: 400, height: 300 });

            // --- SRS Configuration (Intervals in minutes, starting from 1 minute) ---
            const SRS_LEVELS = 8;
            const SRS_INTERVALS = [
                1,          // Level 1 -&gt; 2: 1 minute
                5,          // Level 2 -&gt; 3: 5 minutes
                15,         // Level 3 -&gt; 4: 15 minutes
                60,         // Level 4 -&gt; 5: 1 hour
                60 * 6,     // Level 5 -&gt; 6: 6 hours
                60 * 24,    // Level 6 -&gt; 7: 1 day
                60 * 24 * 3,// Level 7 -&gt; 8: 3 days
                60 * 24 * 7 // Level 8 -&gt; Mastered: 1 week
            ];
            
            // --- Chemical Data ---
            const allStructures = {
                general: [ { id: &#39;gen1&#39;, name: &#39;Water (H&lt;sub&gt;2&lt;/sub&gt;O)&#39;, smiles: &#39;O&#39; }, { id: &#39;gen2&#39;, name: &#39;Ammonia (NH&lt;sub&gt;3&lt;/sub&gt;)&#39;, smiles: &#39;N&#39; }, { id: &#39;gen3&#39;, name: &#39;Carbon Dioxide (CO&lt;sub&gt;2&lt;/sub&gt;)&#39;, smiles: &#39;C(=O)=O&#39; }, { id: &#39;gen4&#39;, name: &#39;Methane (CH&lt;sub&gt;4&lt;/sub&gt;)&#39;, smiles: &#39;C&#39; }, { id: &#39;gen5&#39;, name: &#39;Sulfuric Acid (H&lt;sub&gt;2&lt;/sub&gt;SO&lt;sub&gt;4&lt;/sub&gt;)&#39;, smiles: &#39;OS(=O)(=O)O&#39; }, { id: &#39;gen6&#39;, name: &#39;Nitric Acid (HNO&lt;sub&gt;3&lt;/sub&gt;)&#39;, smiles: &#39;[N+](=O)(O)[O-]&#39; }, { id: &#39;gen7&#39;, name: &#39;Phosphoric Acid (H&lt;sub&gt;3&lt;/sub&gt;PO&lt;sub&gt;4&lt;/sub&gt;)&#39;, smiles: &#39;OP(=O)(O)O&#39; }, { id: &#39;gen8&#39;, name: &#39;Hydrogen Peroxide (H&lt;sub&gt;2&lt;/sub&gt;O&lt;sub&gt;2&lt;/sub&gt;)&#39;, smiles: &#39;OO&#39; }, { id: &#39;gen9&#39;, name: &#39;Hydrogen Cyanide (HCN)&#39;, smiles: &#39;C#N&#39; }, { id: &#39;gen10&#39;, name: &#39;Sodium Chloride (NaCl)&#39;, smiles: &#39;[Na+].[Cl-]&#39; }, ],
                organic: [ { id: &#39;org1&#39;, name: &#39;Ethane (C&lt;sub&gt;2&lt;/sub&gt;H&lt;sub&gt;6&lt;/sub&gt;)&#39;, smiles: &#39;CC&#39; }, { id: &#39;org2&#39;, name: &#39;Ethene (C&lt;sub&gt;2&lt;/sub&gt;H&lt;sub&gt;4&lt;/sub&gt;)&#39;, smiles: &#39;C=C&#39; }, { id: &#39;org3&#39;, name: &#39;Ethyne (C&lt;sub&gt;2&lt;/sub&gt;H&lt;sub&gt;2&lt;/sub&gt;)&#39;, smiles: &#39;C#C&#39; }, { id: &#39;org4&#39;, name: &#39;Methanol (CH&lt;sub&gt;3&lt;/sub&gt;OH)&#39;, smiles: &#39;CO&#39; }, { id: &#39;org5&#39;, name: &#39;Ethanol (C&lt;sub&gt;2&lt;/sub&gt;H&lt;sub&gt;5&lt;/sub&gt;OH)&#39;, smiles: &#39;CCO&#39; }, { id: &#39;org6&#39;, name: &#39;Isopropanol&#39;, smiles: &#39;CC(C)O&#39; }, { id: &#39;org7&#39;, name: &#39;Acetone&#39;, smiles: &#39;CC(=O)C&#39; }, { id: &#39;org8&#39;, name: &#39;Formaldehyde&#39;, smiles: &#39;C=O&#39; }, { id: &#39;org9&#39;, name: &#39;Acetic Acid&#39;, smiles: &#39;CC(=O)O&#39; }, { id: &#39;org10&#39;, name: &#39;Benzene (C&lt;sub&gt;6&lt;/sub&gt;H&lt;sub&gt;6&lt;/sub&gt;)&#39;, smiles: &#39;C1=CC=CC=C1&#39; }, { id: &#39;org11&#39;, name: &#39;Phenol&#39;, smiles: &#39;C1=CC=C(C=C1)O&#39; }, { id: &#39;org12&#39;, name: &#39;Aniline&#39;, smiles: &#39;C1=CC=C(C=C1)N&#39; }, { id: &#39;org13&#39;, name: &#39;Toluene&#39;, smiles: &#39;CC1=CC=CC=C1&#39; }, { id: &#39;org14&#39;, name: &#39;Cyclohexane&#39;, smiles: &#39;C1CCCCC1&#39; }, { id: &#39;org15&#39;, name: &#39;Diethyl Ether&#39;, smiles: &#39;CCOCC&#39; }, { id: &#39;org16&#39;, name: &#39;Ethyl Acetate&#39;, smiles: &#39;CCOC(=O)C&#39; }, { id: &#39;org17&#39;, name: &#39;Pyridine&#39;, smiles: &#39;C1=CC=NC=C1&#39; }, { id: &#39;org18&#39;, name: &#39;Naphthalene&#39;, smiles: &#39;C1=CC=C2C=CC=CC2=C1&#39; }, { id: &#39;org19&#39;, name: &#39;Styrene&#39;, smiles: &#39;C=CC1=CC=CC=C1&#39; }, { id: &#39;org20&#39;, name: &#39;Dimethyl Sulfoxide (DMSO)&#39;, smiles: &#39;CS(=O)C&#39; }, ],
                biochem: [ { id: &#39;bio1&#39;, name: &#39;Glycerol&#39;, smiles: &#39;C(C(CO)O)O&#39; }, { id: &#39;bio2&#39;, name: &#39;Glucose&#39;, smiles: &#39;C([C@@H]1[C@H]([C@@H]([C@H](C(O1)O)O)O)O)O&#39; }, { id: &#39;bio3&#39;, name: &#39;Fructose&#39;, smiles: &#39;C1[C@H]([C@H]([C@@H](C(O1)(CO)O)O)O)O&#39; }, { id: &#39;bio4&#39;, name: &#39;Sucrose&#39;, smiles: &#39;C([C@@H]1[C@H]([C@@H]([C@H]([C@H](O1)O[C@]2([C@H]([C@@H]([C@H](O2)CO)O)O)CO)O)O)O)O&#39; }, { id: &#39;bio5&#39;, name: &#39;Glycine (Amino Acid)&#39;, smiles: &#39;C(C(=O)O)N&#39; }, { id: &#39;bio6&#39;, name: &#39;Alanine (Amino Acid)&#39;, smiles: &#39;C[C@@H](C(=O)O)N&#39; }, { id: &#39;bio7&#39;, name: &#39;Cysteine (Amino Acid)&#39;, smiles: &#39;C([C@@H](C(=O)O)N)S&#39; }, { id: &#39;bio8&#39;, name: &#39;Tryptophan (Amino Acid)&#39;, smiles: &#39;C1=CC=C2C(=C1)C(=CN2)C[C@@H](C(=O)O)N&#39; }, { id: &#39;bio9&#39;, name: &#39;Urea&#39;, smiles: &#39;C(=O)(N)N&#39; }, { id: &#39;bio10&#39;, name: &#39;Lactic Acid&#39;, smiles: &#39;CC(C(=O)O)O&#39; }, { id: &#39;bio11&#39;, name: &#39;Citric Acid&#39;, smiles: &#39;C(C(=O)O)C(CC(=O)O)(C(=O)O)O&#39; }, { id: &#39;bio12&#39;, name: &#39;Adenine (Nucleobase)&#39;, smiles: &#39;C1=NC2=NC=NC(=C2N1)N&#39; }, { id: &#39;bio13&#39;, name: &#39;Guanine (Nucleobase)&#39;, smiles: &#39;C1=NC2=C(N1)C(=O)NC(=N2)N&#39; }, { id: &#39;bio14&#39;, name: &#39;Cytosine (Nucleobase)&#39;, smiles: &#39;C1=C(NC(=O)N=C1)N&#39; }, { id: &#39;bio15&#39;, name: &#39;Thymine (Nucleobase)&#39;, smiles: &#39;CC1=CNC(=O)NC1=O&#39; }, { id: &#39;bio16&#39;, name: &#39;Uracil (Nucleobase)&#39;, smiles: &#39;C1=CNC(=O)NC1=O&#39; }, { id: &#39;bio17&#39;, name: &#39;Cholesterol&#39;, smiles: &#39;C[C@H](CCCC(C)C)[C@H]1CC[C@@H]2[C@@]1(CC[C@H]3[C@H]2CC=C4[C@@]3(CC[C@@H](C4)O)C)C&#39; }, { id: &#39;bio18&#39;, name: &#39;Testosterone&#39;, smiles: &#39;C[C@]12CC[C@H]3[C@H]([C@@H]1CC[C@@H]2O)CCC4=CC(=O)CC[C@]34C&#39; }, { id: &#39;bio19&#39;, name: &#39;ATP&#39;, smiles: &#39;C1=NC(=C2C(=N1)N(C=N2)[C@H]3[C@@H]([C@@H]([C@H](O3)COP(=O)(O)OP(=O)(O)OP(=O)(O)O)O)O)N&#39; }, { id: &#39;bio20&#39;, name: &#39;Dopamine&#39;, smiles: &#39;C1=CC(=C(C=C1CCN)O)O&#39; }, ],
                drugs: [ { id: &#39;drg1&#39;, name: &#39;Caffeine&#39;, smiles: &#39;CN1C=NC2=C1C(=O)N(C(=O)N2C)C&#39; }, { id: &#39;drg2&#39;, name: &#39;Aspirin&#39;, smiles: &#39;CC(=O)OC1=CC=CC=C1C(=O)O&#39; }, { id: &#39;drg3&#39;, name: &#39;Paracetamol (Acetaminophen)&#39;, smiles: &#39;CC(=O)NC1=CC=C(C=C1)O&#39; }, { id: &#39;drg4&#39;, name: &#39;Ibuprofen&#39;, smiles: &#39;CC(C)CC1=CC=C(C=C1)C(C)C(=O)O&#39; }, { id: &#39;drg5&#39;, name: &#39;Nicotine&#39;, smiles: &#39;CN1CCC[C@H]1C2=CN=CC=C2&#39; }, { id: &#39;drg6&#39;, name: &#39;Serotonin&#39;, smiles: &#39;C1=CC2=C(C=C1O)C(=CN2)CCN&#39; }, { id: &#39;drg7&#39;, name: &#39;Adrenaline (Epinephrine)&#39;, smiles: &#39;CNC[C@@H](C1=CC(=C(C=C1)O)O)O&#39; }, { id: &#39;drg8&#39;, name: &#39;TNT&#39;, smiles: &#39;CC1=C(C=C(C=C1[N+](=O)[O-])[N+](=O)[O-])[N+](=O)[O-]&#39; }, { id: &#39;drg9&#39;, name: &#39;Ascorbic Acid (Vitamin C)&#39;, smiles: &#39;C([C@@H]([C@@H]1C(=C(C(=O)O1)O)O)O)O&#39; }, { id: &#39;drg10&#39;, name: &#39;Vanillin&#39;, smiles: &#39;COC1=C(C=CC(=C1)C=O)O&#39; }, ],
alevel: [
        { id: &#39;al1&#39;, name: &#39;Butane&#39;, smiles: &#39;CCCC&#39; },
        { id: &#39;al2&#39;, name: &#39;But-1-ene&#39;, smiles: &#39;C=CCC&#39; },
        { id: &#39;al3&#39;, name: &#39;But-2-ene (cis)&#39;, smiles: &#39;C/C=C/C&#39; },
        { id: &#39;al4&#39;, name: &#39;But-2-ene (trans)&#39;, smiles: &#39;C/C=C\\C&#39; },
        { id: &#39;al5&#39;, name: &#39;2-methylpropane (isobutane)&#39;, smiles: &#39;CC(C)C&#39; },
        { id: &#39;al6&#39;, name: &#39;Chloroethane&#39;, smiles: &#39;CCCl&#39; },
        { id: &#39;al7&#39;, name: &#39;Bromoethane&#39;, smiles: &#39;CCBr&#39; },
        { id: &#39;al8&#39;, name: &#39;Iodoethane&#39;, smiles: &#39;CCI&#39; },
        { id: &#39;al9&#39;, name: &#39;Ethanoic anhydride&#39;, smiles: &#39;CC(=O)OC(=O)C&#39; },
        { id: &#39;al10&#39;, name: &#39;Methyl ethanoate (ester)&#39;, smiles: &#39;CC(=O)OC&#39; },
        { id: &#39;al11&#39;, name: &#39;Butan-2-ol&#39;, smiles: &#39;CCC(C)O&#39; },
        { id: &#39;al12&#39;, name: &#39;2-methylpropan-2-ol&#39;, smiles: &#39;CC(C)(C)O&#39; },
        { id: &#39;al13&#39;, name: &#39;Hex-1-yne&#39;, smiles: &#39;CCCCC#C&#39; },
        { id: &#39;al14&#39;, name: &#39;Cyclopentane&#39;, smiles: &#39;C1CCCC1&#39; },
        { id: &#39;al15&#39;, name: &#39;Phenylamine&#39;, smiles: &#39;C1=CC=C(C=C1)N&#39; },
{ id: &#39;al16&#39;, name: &#39;Propane&#39;, smiles: &#39;CCC&#39; },
  { id: &#39;al17&#39;, name: &#39;Pentane&#39;, smiles: &#39;CCCCC&#39; },
  { id: &#39;al18&#39;, name: &#39;Hexane&#39;, smiles: &#39;CCCCCC&#39; },
  { id: &#39;al19&#39;, name: &#39;Heptane&#39;, smiles: &#39;CCCCCCC&#39; },
  { id: &#39;al20&#39;, name: &#39;Octane&#39;, smiles: &#39;CCCCCCCC&#39; },
  { id: &#39;al21&#39;, name: &#39;Neopentane (2,2-dimethylpropane)&#39;, smiles: &#39;C(C)(C)(C)C&#39; },
  { id: &#39;al22&#39;, name: &#39;2-Methylpropene (isobutene)&#39;, smiles: &#39;C=C(C)C&#39; },
  { id: &#39;al23&#39;, name: &#39;1,3-Butadiene&#39;, smiles: &#39;C=CC=C&#39; },
  { id: &#39;al24&#39;, name: &#39;Cyclopropane&#39;, smiles: &#39;C1CC1&#39; },
  { id: &#39;al25&#39;, name: &#39;Cyclohexene&#39;, smiles: &#39;C1CCC=CC1&#39; },
  { id: &#39;al26&#39;, name: &#39;1-Bromopropane&#39;, smiles: &#39;CCCBr&#39; },
  { id: &#39;al27&#39;, name: &#39;2-Chlorobutane&#39;, smiles: &#39;CC(Cl)CC&#39; },
  { id: &#39;al28&#39;, name: &#39;tert-Butyl chloride&#39;, smiles: &#39;CC(C)(C)Cl&#39; },
  { id: &#39;al29&#39;, name: &#39;Propanenitrile (propionitrile)&#39;, smiles: &#39;CCC#N&#39; },
  { id: &#39;al30&#39;, name: &#39;Cyclohexanone&#39;, smiles: &#39;C1CCC(=O)CC1&#39; },
  { id: &#39;al31&#39;, name: &#39;Butanone (methyl ethyl ketone)&#39;, smiles: &#39;CC(=O)CC&#39; },
  { id: &#39;al32&#39;, name: &#39;Butanal&#39;, smiles: &#39;CCCC=O&#39; },
  { id: &#39;al33&#39;, name: &#39;Ethylamine&#39;, smiles: &#39;CCN&#39; },
  { id: &#39;al34&#39;, name: &#39;Nitroethane&#39;, smiles: &#39;CC[N+](=O)[O-]&#39; },
  { id: &#39;al35&#39;, name: &#39;Methyl benzoate&#39;, smiles: &#39;COC(=O)C1=CC=CC=C1&#39; },
        // ... (add 15–20 more up to ~30)
    ],

    olevel: [
        { id: &#39;ol1&#39;, name: &#39;Magnesium Oxide&#39;, smiles: &#39;O=[Mg]&#39; },
        { id: &#39;ol2&#39;, name: &#39;Calcium Carbonate&#39;, smiles: &#39;C(=O)([O-])[O-].[Ca+2]&#39; },
        { id: &#39;ol3&#39;, name: &#39;Sodium Hydroxide&#39;, smiles: &#39;[Na+].[OH-]&#39; },
        { id: &#39;ol4&#39;, name: &#39;Potassium Hydroxide&#39;, smiles: &#39;[K+].[OH-]&#39; },
        { id: &#39;ol5&#39;, name: &#39;Ammonium Ion&#39;, smiles: &#39;[NH4+]&#39; },
        { id: &#39;ol6&#39;, name: &#39;Hydrochloric Acid&#39;, smiles: &#39;Cl&#39; },
        { id: &#39;ol7&#39;, name: &#39;Sulfur Dioxide&#39;, smiles: &#39;O=S=O&#39; },
        { id: &#39;ol8&#39;, name: &#39;Calcium Hydroxide (slaked lime)&#39;, smiles: &#39;[Ca+2].[OH-].[OH-]&#39; },
        // ... (build to ~25 structures)
    ],

    medicinal: [
        { id: &#39;med1&#39;, name: &#39;Morphine&#39;, smiles: &#39;CN1CC[C@]23[C@@H]4[C@H]1CC5=C2C(=C(C=C5)O)O[C@H]3[C@H](C=C4)O&#39; },
        { id: &#39;med2&#39;, name: &#39;Penicillin G&#39;, smiles: &#39;CC1([C@@H](N2[C@H](S1)[C@@H](C2=O)NC(=O)CC3=CC=CC=C3)C(=O)O)C&#39; },
        { id: &#39;med3&#39;, name: &#39;Amoxicillin&#39;, smiles: &#39;CC1([C@@H](N2[C@H](S1)[C@@H](C2=O)NC(=O)[C@@H](C3=CC=C(C=C3)O)N)C(=O)O)C&#39; },
        { id: &#39;med4&#39;, name: &#39;Ciprofloxacin&#39;, smiles: &#39;C1CC1N2C=C(C(=O)C3=CC(=C(C=C32)N4CCNCC4)F)C(=O)O&#39; },
        { id: &#39;med5&#39;, name: &#39;Methotrexate&#39;, smiles: &#39;CN(CC1=CN=C2C(=N1)C(=NC(=N2)N)N)C3=CC=C(C=C3)C(=O)N[C@@H](CCC(=O)O)C(=O)O&#39; },
{ id: &#39;med6&#39;, name: &#39;Metformin&#39;, smiles: &#39;CN(C)C(=N)N=C(N)N&#39; },
  { id: &#39;med7&#39;, name: &#39;Atorvastatin&#39;, smiles: &#39;CC(C)C1=C(C(=C(N1CC[C@H](C[C@H](CC(=O)O)O)O)C2=CC=C(C=C2)F)C3=CC=CC=C3)C(=O)NC4=CC=CC=C4&#39; },
  { id: &#39;med8&#39;, name: &#39;Omeprazole&#39;, smiles: &#39;COC1=C(C=CC=N1)S(=O)C2=NC=C(C=C2)OC&#39; },
  { id: &#39;med9&#39;, name: &#39;Warfarin&#39;, smiles: &#39;CC(=O)CC(C1=CC=CC=C1)C2=C(C3=CC=CC=C3OC2=O)O&#39; },
  { id: &#39;med10&#39;, name: &#39;Digoxin&#39;, smiles: &#39;C[C@@H]1[C@H]([C@H](C[C@@H](O1)O[C@@H]2[C@H](O[C@H](C[C@@H]2O)O[C@@H]3[C@H](O[C@H](C[C@@H]3O)O[C@H]4CC[C@]5([C@@H](C4)CC[C@@H]6[C@@H]5C[C@H]([C@]7([C@@]6(CC[C@@H]7C8=CC(=O)OC8)O)C)O)C)C)C)O)O&#39; },
  { id: &#39;med11&#39;, name: &#39;Paclitaxel (Taxol)&#39;, smiles: &#39;CC1=C2[C@H](C(=O)[C@@]3([C@H](C[C@@H]4[C@]([C@H]3[C@@H]([C@@](C2(C)C)(C[C@@H]1OC(=O)[C@@H]([C@H](C5=CC=CC=C5)NC(=O)C6=CC=CC=C6)O)O)OC(=O)C7=CC=CC=C7)(CO4)OC(=O)C)O)C)OC(=O)C&#39; },
  { id: &#39;med12&#39;, name: &#39;Tamoxifen&#39;, smiles: &#39;CC/C(=C(\C1=CC=CC=C1)/C2=CC=C(C=C2)OCCN(C)C)/C3=CC=CC=C3&#39; },
  { id: &#39;med13&#39;, name: &#39;Doxycycline hyclate&#39;, smiles: &#39;CCO.C[C@@H]1[C@H]2[C@@H]([C@H]3[C@@H](C(=O)C(=C([C@]3(C(=O)C2=C(C4=C1C=CC=C4O)O)O)O)C(=O)N)N(C)C)O.C[C@@H]1[C@H]2[C@@H]([C@H]3[C@@H](C(=O)C(=C([C@]3(C(=O)C2=C(C4=C1C=CC=C4O)O)O)O)C(=O)N)N(C)C)O.O.Cl.Cl&#39; },
  { id: &#39;med14&#39;, name: &#39;Clopidogrel&#39;, smiles: &#39;COC(=O)[C@H](C1=CC=CC=C1Cl)N2CCC3=C(C2)C=CS3&#39; },
  { id: &#39;med15&#39;, name: &#39;Levothyroxine&#39;, smiles: &#39;N[C@@H](C(=O)O)Cc1cc(I)c(Oc2c(I)cc(cc2O)I)c(I)c1&#39; },
  { id: &#39;med16&#39;, name: &#39;Salbutamol (Albuterol)&#39;, smiles: &#39;CC(C)(C)NCC(C1=CC(=C(C=C1)O)CO)O&#39; },
  { id: &#39;med17&#39;, name: &#39;Chloramphenicol&#39;, smiles: &#39;C1=CC(=CC=C1[C@H]([C@@H](CO)NC(=O)C(Cl)Cl)O)[N+](=O)[O-]&#39; },
  { id: &#39;med18&#39;, name: &#39;Azithromycin&#39;, smiles: &#39;CC[C@@H]1[C@@]([C@@H]([C@H](N(C[C@@H](C[C@@]([C@@H]([C@H]([C@@H]([C@H](C(=O)O1)C)O[C@H]2C[C@@]([C@H]([C@@H](O2)C)O)(C)OC)C)O[C@H]3[C@@H]([C@H](C[C@H](O3)C)N(C)C)O)(C)O)C)C)C)O)(C)O&#39; },
  { id: &#39;med19&#39;, name: &#39;Erythromycin&#39;, smiles: &#39;CC[C@@H]1[C@@]([C@@H]([C@H](C(=O)[C@@H](C[C@@]([C@@H]([C@H]([C@@H]([C@H](C(=O)O1)C)O[C@H]2C[C@@]([C@H]([C@@H](O2)C)O)(C)OC)C)O[C@H]3[C@@H]([C@H](C[C@H](O3)C)N(C)C)O)(C)O)C)C)O)(C)O&#39; },
  { id: &#39;med20&#39;, name: &#39;Fluoxetine (Prozac)&#39;, smiles: &#39;CNCCC(C1=CC=CC=C1)OC2=CC=C(C=C2)C(F)(F)F&#39; },
  { id: &#39;med21&#39;, name: &#39;Sertraline&#39;, smiles: &#39;CN[C@H]1CC[C@H](C2=CC=CC=C12)C3=CC(=C(C=C3)Cl)Cl&#39; },
  { id: &#39;med22&#39;, name: &#39;Risperidone&#39;, smiles: &#39;CC1=C(C(=O)N2CCCCC2=N1)CCN3CCC(CC3)C4=NOC5=C4C=CC(=C5)F&#39; },
  { id: &#39;med23&#39;, name: &#39;Diazepam&#39;, smiles: &#39;CN1C(=O)CN=C(C2=C1C=CC(=C2)Cl)C3=CC=CC=C3&#39; },
  { id: &#39;med24&#39;, name: &#39;Midazolam&#39;, smiles: &#39;CC1=NC=C2N1C3=C(C=C(C=C3)Cl)C(=NC2)C4=CC=CC=C4F&#39; },
  { id: &#39;med25&#39;, name: &#39;Zidovudine (AZT)&#39;, smiles: &#39;CC1=CN(C(=O)NC1=O)[C@H]2C[C@@H]([C@H](O2)CO)N=[N+]=[N-]&#39; },
        // ... (expand to 30+ drug structures)
    ],

    inorganic: [
        { id: &#39;in1&#39;, name: &#39;Potassium Permanganate&#39;, smiles: &#39;[O-][Mn](=O)(=O)=O.[K+]&#39; },
        { id: &#39;in2&#39;, name: &#39;Chromium(VI) Oxide&#39;, smiles: &#39;O=[Cr](=O)=O&#39; },
        { id: &#39;in3&#39;, name: &#39;Iron(III) Chloride&#39;, smiles: &#39;Cl[Fe]ClCl&#39; },
        { id: &#39;in4&#39;, name: &#39;Copper(II) Sulfate&#39;, smiles: &#39;[Cu+2].[O-]S(=O)(=O)[O-]&#39; },
        { id: &#39;in5&#39;, name: &#39;Sodium Dichromate&#39;, smiles: &#39;[O-][Cr](=O)(=O)O[Cr](=O)(=O)[O-].[Na+].[Na+]&#39; },
{ id: &#39;in6&#39;,  name: &#39;Potassium Chloride (KCl)&#39;, smiles: &#39;[K+].[Cl-]&#39; },
  { id: &#39;in7&#39;,  name: &#39;Sodium Sulfate (Na2SO4)&#39;, smiles: &#39;O=S(=O)([O-])[O-].[Na+].[Na+]&#39; },
  { id: &#39;in8&#39;,  name: &#39;Calcium Chloride (CaCl2)&#39;, smiles: &#39;[Ca+2].[Cl-].[Cl-]&#39; },
  { id: &#39;in9&#39;,  name: &#39;Ammonium Chloride (NH4Cl)&#39;, smiles: &#39;[NH4+].[Cl-]&#39; },
  { id: &#39;in10&#39;, name: &#39;Silver Nitrate (AgNO3)&#39;, smiles: &#39;[Ag+].O[N+](=O)[O-]&#39; },
  { id: &#39;in11&#39;, name: &#39;Lead(II) Nitrate (Pb(NO3)2)&#39;, smiles: &#39;[Pb+2].O[N+](=O)[O-].O[N+](=O)[O-]&#39; },
  { id: &#39;in12&#39;, name: &#39;Iron(II) Sulfate (FeSO4)&#39;, smiles: &#39;[Fe+2].O=S(=O)([O-])[O-]&#39; },
  { id: &#39;in13&#39;, name: &#39;Iron(III) Oxide (Fe2O3)&#39;, smiles: &#39;O=[Fe]O[Fe]=O&#39; },
  { id: &#39;in14&#39;, name: &#39;Copper(I) Chloride (CuCl)&#39;, smiles: &#39;[Cu+].[Cl-]&#39; },
  { id: &#39;in15&#39;, name: &#39;Zinc Oxide (ZnO)&#39;, smiles: &#39;O.[Zn+2]&#39; },
  { id: &#39;in16&#39;, name: &#39;Aluminium Oxide (Al2O3)&#39;, smiles: &#39;[O-2].[O-2].[O-2].[Al+3].[Al+3]&#39; },
  { id: &#39;in17&#39;, name: &#39;Silicon Dioxide (SiO2)&#39;, smiles: &#39;O=Si=O&#39; },
  { id: &#39;in18&#39;, name: &#39;Sulfur Hexafluoride (SF6)&#39;, smiles: &#39;FS(F)(F)(F)(F)F&#39; },
  { id: &#39;in19&#39;, name: &#39;Nitrogen Dioxide (NO2)&#39;, smiles: &#39;O=[N]=O&#39; },
  { id: &#39;in20&#39;, name: &#39;Nitric Oxide (NO)&#39;, smiles: &#39;[N]=O&#39; },
  { id: &#39;in21&#39;, name: &#39;Chlorine (Cl2)&#39;, smiles: &#39;ClCl&#39; },
  { id: &#39;in22&#39;, name: &#39;Bromine (Br2)&#39;, smiles: &#39;BrBr&#39; },
  { id: &#39;in23&#39;, name: &#39;Iodine (I2)&#39;, smiles: &#39;II&#39; },
  { id: &#39;in24&#39;, name: &#39;Calcium Fluoride (CaF2)&#39;, smiles: &#39;[Ca+2].[F-].[F-]&#39; },
  { id: &#39;in25&#39;, name: &#39;Lithium Hydride (LiH)&#39;, smiles: &#39;[Li+].[H-]&#39; },
        // ... (build to 25–30)
    ],

    physical: [
        { id: &#39;ph1&#39;, name: &#39;Hydrogen Molecule&#39;, smiles: &#39;[HH]&#39; },
        { id: &#39;ph2&#39;, name: &#39;Oxygen Molecule&#39;, smiles: &#39;O=O&#39; },
        { id: &#39;ph3&#39;, name: &#39;Ozone&#39;, smiles: &#39;[O-][O+]=O&#39; },
        { id: &#39;ph4&#39;, name: &#39;Superoxide Ion&#39;, smiles: &#39;[O-][O]&#39; },
        { id: &#39;ph5&#39;, name: &#39;Carbon Monoxide&#39;, smiles: &#39;[C-]#[O+]&#39; },
        // ... (~25 molecules demonstrating bonds, gases, radicals)
    ],

    analytical: [
        { id: &#39;an1&#39;, name: &#39;EDTA (Chelating agent)&#39;, smiles: &#39;C(CN(CC(=O)O)CC(=O)O)N(CC(=O)O)CC(=O)O&#39; },
        { id: &#39;an2&#39;, name: &#39;Phenolphthalein&#39;, smiles: &#39;C1=CC=C2C(=C1)C(=O)OC2(C3=CC=C(C=C3)O)C4=CC=C(C=C4)O&#39; },
        { id: &#39;an3&#39;, name: &#39;Methyl Orange&#39;, smiles: &#39;CCN(CC)C1=CC=C(C=C1)N=NC6=CC=CC=C6S(=O)(=O)O&#39; },
        { id: &#39;an4&#39;, name: &#39;Methyl Red&#39;, smiles: &#39;CCN(CC)C1=CC=C(C=C1)N=NC6=CC=CC=C6&#39; },
        { id: &#39;an5&#39;, name: &#39;Bromothymol Blue&#39;, smiles: &#39;CC1=C(C=C(C(=C1Br)O)C(C)C)C2(C3=CC=CC=C3S(=O)(=O)O2)C4=C(C(=C(C(=C4)C(C)C)O)Br)C&#39; },
        // ... (~20–25 indicators &amp; analytical reagents)
        
    ],
    icho: [
    { id: &#39;icho1&#39;, name: &#39;Maleic Acid (cis-butenedioic acid)&#39;, smiles: &#39;C(=C\C(=O)O)\C(=O)O&#39; },
    { id: &#39;icho2&#39;, name: &#39;Fumaric Acid (trans-butenedioic acid)&#39;, smiles: &#39;C(=C/C(=O)O)\C(=O)O&#39; },
    { id: &#39;icho3&#39;, name: &#39;Oxalic Acid&#39;, smiles: &#39;C(=O)(C(=O)O)O&#39; },
    { id: &#39;icho4&#39;, name: &#39;Malonic Acid&#39;, smiles: &#39;C(C(=O)O)C(=O)O&#39; },
    { id: &#39;icho5&#39;, name: &#39;L-Tartaric Acid&#39;, smiles: &#39;[C@@H]([C@H](C(=O)O)O)(C(=O)O)O&#39; },
    { id: &#39;icho6&#39;, name: &#39;Potassium Dichromate&#39;, smiles: &#39;[O-][Cr](=O)(=O)O[Cr](=O)(=O)[O-].[K+].[K+]&#39; },
    { id: &#39;icho7&#39;, name: &#39;Copper(II) Ammonia Complex&#39;, smiles: &#39;[Cu+2]([NH3])([NH3])([H2O])([H2O])&#39; },
    { id: &#39;icho8&#39;, name: &#39;Hexaamminecobalt(III) chloride&#39;, smiles: &#39;[Co+3](N)(N)(N)(N)(N)N.[Cl-].[Cl-].[Cl-]&#39; },
    { id: &#39;icho9&#39;, name: &#39;Ferrocene&#39;, smiles: &#39;C1=C[CH]C=C1.C1=C[CH]C=C1.[Fe]&#39; },
    { id: &#39;icho10&#39;, name: &#39;Fullerene (C60)&#39;, smiles: &#39;C12=C3C4=C5C6=C1C7=C8C9=C1C%10=C%11C(=C29)C3=C2C3=C4C4=C5C5=C9C6=C7C6=C7C8=C1C1=C8C%10=C%10C%11=C2C2=C3C3=C4C4=C5C5=C%11C%12=C(C6=C95)C7=C1C1=C%12C5=C%11C4=C3C3=C5C(=C81)C%10=C23&#39; }
],
gre: [
    { id: &#39;gre1&#39;, name: &#39;Anthracene&#39;, smiles: &#39;C1=CC=C2C=C3C=CC=CC3=CC2=C1&#39; },
    { id: &#39;gre2&#39;, name: &#39;Phenanthrene&#39;, smiles: &#39;C1=CC=C2C(=C1)C=CC3=CC=CC=C32&#39; },
    { id: &#39;gre3&#39;, name: &#39;Benzoic Acid&#39;, smiles: &#39;C1=CC=C(C=C1)C(=O)O&#39; },
    { id: &#39;gre4&#39;, name: &#39;Salicylic Acid&#39;, smiles: &#39;C1=CC=C(C(=C1)C(=O)O)O&#39; },
    { id: &#39;gre5&#39;, name: &#39;Biphenyl&#39;, smiles: &#39;C1=CC=C(C=C1)C2=CC=CC=C2&#39; },
    { id: &#39;gre6&#39;, name: &#39;Grignard Reagent (Methylmagnesium bromide)&#39;, smiles: &#39;C[Mg]Cl&#39; },
    { id: &#39;gre7&#39;, name: &#39;Acetylacetone (pentane-2,4-dione)&#39;, smiles: &#39;CC(=O)CC(=O)C&#39; },
    { id: &#39;gre8&#39;, name: &#39;Triphenylphosphine&#39;, smiles: &#39;C1=CC=C(C=C1)P(C2=CC=CC=C2)C3=CC=CC=C3&#39; },
    { id: &#39;gre9&#39;, name: &#39;Benzaldehyde&#39;, smiles: &#39;C1=CC=C(C=C1)C=O&#39; },
    { id: &#39;gre10&#39;, name: &#39;Thiophene&#39;, smiles: &#39;C1=CSC=C1&#39; }
],
iupac: [
    { id: &#39;iup1&#39;, name: &#39;Porphyrin&#39;, smiles: &#39;C1=CC2=NC1=CC3=NC(=CC4=NC(=CC5=NC(=C2)C=C5)C=C4)C=C3&#39; },
    { id: &#39;iup2&#39;, name: &#39;Chlorophyll a (simplified)&#39;, smiles: &#39;CC1=CC2=C(C=C1)C(=O)N3C2=CC4=C(C3=NC5=C(C=CC=C54)O)C=C&#39; },
    { id: &#39;iup3&#39;, name: &#39;Vitamin B12 (Cobalamin, simplified)&#39;, smiles: &#39;[Co+3](C)(C)(C)(C)&#39; },
    { id: &#39;iup4&#39;, name: &#39;Zeolite fragment (Aluminosilicate)&#39;, smiles: &#39;[SiO4].[AlO4]&#39; },
    { id: &#39;iup5&#39;, name: &#39;Polystyrene (repeating unit)&#39;, smiles: &#39;C(C)C1=CC=CC=C1&#39; },
    { id: &#39;iup6&#39;, name: &#39;Nylon-6,6 (repeating unit)&#39;, smiles: &#39;NC(=O)CCCCC(=O)NCC&#39; },
    { id: &#39;iup7&#39;, name: &#39;Polyethylene Glycol (PEG)&#39;, smiles: &#39;C(COCCO)O&#39; },
    { id: &#39;iup8&#39;, name: &#39;Organometallic Catalyst (Wilkinson’s catalyst)&#39;, smiles: &#39;[Rh](P(c1ccccc1)(c2ccccc2)c3ccccc3)(Cl)&#39; },
    { id: &#39;iup9&#39;, name: &#39;Metal-Organic Framework fragment (MOF)&#39;, smiles: &#39;O=C(O)c1ccccc1C(=O)O.[Zn]&#39; },
    { id: &#39;iup10&#39;, name: &#39;Cyclodextrin fragment&#39;, smiles: &#39;C1C(C(C(C(O1)O)O)O)O&#39; }
],
            };

            // --- State Variables ---
            let progressData = {}, currentDeck = [], reviewQueue = [], currentItem = null;
            let isDrawing = false, isAnswerShown = false, isPeeking = false;

            // --- Drawing Functions ---
            const getPosition = e =&gt; {
                const rect = canvas.getBoundingClientRect();
                const source = e.touches ? e.touches[0] : e;
                return { x: source.clientX - rect.left, y: source.clientY - rect.top };
            };
            const startDrawing = e =&gt; { if (!isAnswerShown) { isDrawing = true; const pos = getPosition(e); ctx.beginPath(); ctx.moveTo(pos.x, pos.y); } };
            const draw = e =&gt; { if (isDrawing &amp;&amp; !isAnswerShown) { e.preventDefault(); const pos = getPosition(e); ctx.lineTo(pos.x, pos.y); ctx.stroke(); } };
            const stopDrawing = () =&gt; { isDrawing = false; };
            const clearCanvas = () =&gt; ctx.clearRect(0, 0, canvas.width, canvas.height);

            // --- Core Quiz/SRS Functions ---
            const loadProgress = () =&gt; { progressData = JSON.parse(localStorage.getItem(&#39;chemicalQuizProgress&#39;) || &#39;{}&#39;); };
            const saveProgress = () =&gt; { localStorage.setItem(&#39;chemicalQuizProgress&#39;, JSON.stringify(progressData)); };
            const initializeItem = id =&gt; { if (!progressData[id]) { progressData[id] = { level: 1, nextReview: Date.now() }; } };

            function loadDeckForSubject(subject) {
                currentDeck = (subject === &#39;all&#39;) ? Object.values(allStructures).flat() : allStructures[subject];
                currentDeck.forEach(item =&gt; initializeItem(item.id));
                reviewQueue = currentDeck.filter(item =&gt; progressData[item.id].nextReview &lt;= Date.now()).sort(() =&gt; Math.random() - 0.5);
                startNextItem();
            }

            function startNextItem() {
                if (reviewQueue.length === 0) {
                    displayCompletionMessage();
                    return;
                }
                currentItem = reviewQueue.pop();
                displayQuizItem();
            }

            function displayQuizItem() {
                isAnswerShown = false;
                canvas.classList.remove(&#39;hidden&#39;);
                canvas.style.cursor = &#39;crosshair&#39;;
                noReviewMessage.classList.add(&#39;hidden&#39;);
                
                chemicalNameEl.innerHTML = currentItem.name;
                progressCounterEl.textContent = `Reviewing: ${reviewQueue.length + 1} item(s) left`;
                
                clearCanvas();
                feedbackButtons.classList.add(&#39;hidden&#39;);
                drawButtons.classList.remove(&#39;hidden&#39;);
            }
            
            function displayCompletionMessage() {
                 chemicalNameEl.innerHTML = &quot;&quot;;
                 progressCounterEl.textContent = &quot;Great job!&quot;;
                 canvas.classList.add(&#39;hidden&#39;);
                 noReviewMessage.classList.remove(&#39;hidden&#39;);
                 drawButtons.classList.add(&#39;hidden&#39;);
                 feedbackButtons.classList.add(&#39;hidden&#39;);
            }

            function showAnswer() {
                isAnswerShown = true;
                canvas.style.cursor = &#39;default&#39;;
                SmilesDrawer.parse(currentItem.smiles, tree =&gt; smilesDrawer.draw(tree, &#39;quizCanvas&#39;, &#39;light&#39;, false));
                drawButtons.classList.add(&#39;hidden&#39;);
                feedbackButtons.classList.remove(&#39;hidden&#39;);
            }

            function handlePeek() {
                if (isPeeking || isAnswerShown) return;

                isPeeking = true;
                peekBtn.disabled = true;
                const userDrawing = ctx.getImageData(0, 0, canvas.width, canvas.height);

                SmilesDrawer.parse(currentItem.smiles, tree =&gt; smilesDrawer.draw(tree, &#39;quizCanvas&#39;, &#39;light&#39;, false));

                setTimeout(() =&gt; {
                    clearCanvas();
                    ctx.putImageData(userDrawing, 0, 0);
                    isPeeking = false;
                    peekBtn.disabled = false;
                }, 1500); // Show answer for 1.5 seconds
            }

            function processFeedback(knewIt) {
                const itemProgress = progressData[currentItem.id];
                if (knewIt) {
                    itemProgress.level = Math.min(itemProgress.level + 1, SRS_LEVELS);
                } else {
                    itemProgress.level = Math.max(1, itemProgress.level - 2);
                }
                const intervalMinutes = SRS_INTERVALS[itemProgress.level - 1];
                itemProgress.nextReview = Date.now() + intervalMinutes * 60 * 1000;
                saveProgress();
                startNextItem();
            }

            // --- Event Listeners ---
            subjectSelector.addEventListener(&#39;change&#39;, e =&gt; loadDeckForSubject(e.target.value));
            showAnswerBtn.addEventListener(&#39;click&#39;, showAnswer);
            clearBtn.addEventListener(&#39;click&#39;, () =&gt; { if (!isAnswerShown) clearCanvas(); });
            peekBtn.addEventListener(&#39;click&#39;, handlePeek);
            forgotBtn.addEventListener(&#39;click&#39;, () =&gt; processFeedback(false));
            knownBtn.addEventListener(&#39;click&#39;, () =&gt; processFeedback(true));

            // Drawing Listeners
            [&#39;mousedown&#39;, &#39;touchstart&#39;].forEach(evt =&gt; canvas.addEventListener(evt, startDrawing));
            [&#39;mousemove&#39;, &#39;touchmove&#39;].forEach(evt =&gt; canvas.addEventListener(evt, draw));
            [&#39;mouseup&#39;, &#39;mouseleave&#39;, &#39;touchend&#39;].forEach(evt =&gt; canvas.addEventListener(evt, stopDrawing));

            // --- Initial Load ---
            ctx.lineWidth = 2.5;
            ctx.lineCap = &#39;round&#39;;
            ctx.strokeStyle = &#39;#333&#39;;
            loadProgress();
            loadDeckForSubject(subjectSelector.value);
        };
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://jeepakistan.blogspot.com/feeds/9023055722187631935/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/8803139780408321815/9023055722187631935' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/9023055722187631935'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/8803139780408321815/posts/default/9023055722187631935'/><link rel='alternate' type='text/html' href='http://jeepakistan.blogspot.com/2025/09/memorize-over-170-chemical-structures.html' title='Memorize over 170 chemical structures by practically drawing and using Spaced Repetition algorithm  '/><author><name>Usman Zafar Paracha</name><uri>http://www.blogger.com/profile/16465951406950976114</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_y7INPu_0pX-htdzolQyu8LXs1HYWLDx1sPyTcTUIYRfQJQWE7tWhHGOXMzXNm7OJVBZvC2rEDpni9ajU4nWnz5ouVT-wlnWNNF5Xl7r7Mh03rd4XKyF0_9PQVqTqEMqxQkTL_G52gz_ySf47kcPD9Xb-z91cl-msVcBpc8hF5ccXhNX4zDRU29dtby5p/s72-c/Cover.jpg" height="72" width="72"/><thr:total>0</thr:total></entry></feed>