Compare a flawed length-first shortcut with a priority table and test external, internal, and unknown audiences

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Which review route applies?</title><style>*{box-sizing:border-box}body{margin:0;background:#eef4ef;color:#223d2d;font:16px/1.6 system-ui,sans-serif}main{max-width:920px;margin:auto;padding:24px}h1{font-size:clamp(1.9rem,5vw,2.8rem);line-height:1.15}h2{font-size:1.35rem}h3{font-size:1.1rem}.eyebrow{font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:#4f7559}.panel{background:#fff;border:1px solid #c1d7c4;border-radius:10px;padding:22px;margin:18px 0}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}button,input,textarea{font:inherit}button{min-height:44px;padding:10px 14px;border:1px solid #547b5a;background:white;color:#30523a;border-radius:6px;cursor:pointer}button[aria-pressed=true],button.primary{background:#376445;color:white}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b15a18;outline-offset:3px}.notice{padding:14px;border-left:4px solid #548864;background:#e6f1e8}.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.rules article{background:#edf4ec;padding:14px;border-radius:7px}label{display:block;font-weight:650;margin-top:16px}input,textarea{display:block;width:100%;min-width:0;padding:10px;border:1px solid #829b86;border-radius:6px;margin-top:5px}textarea{min-height:90px}pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}[hidden]{display:none!important}@media(max-width:600px){main{padding:16px}.panel{padding:16px}.rules{grid-template-columns:1fr}}</style></head><body><main><p class="eyebrow">A point-of-use decision aid</p><h1>Which review route applies?</h1><p>Original fictional document-review rules. A route is not approval, a completed review, or a live ticket.</p><section class="panel"><h2>Choose the audience first</h2><div class="actions" role="group" aria-label="Document audience"><button type="button" id="external" aria-pressed="true">External</button><button type="button" id="internal" aria-pressed="false">Internal-only</button><button type="button" id="unknown" aria-pressed="false">Unknown</button></div><label for="pages">Number of pages · leave blank if unknown</label><input id="pages" inputmode="numeric" value="1" autocomplete="off"><div class="actions"><button type="button" id="route" class="primary">Trace the route</button><button type="button" id="flawed">Inspect the external one-page trap</button></div><p id="routeNotice" class="notice" role="status">Worked case A: External, one page → External review under R1. Length does not override the audience rule.</p><pre id="trace">R1 applies: external audience, regardless of length. R2/R3 require internal-only audience.</pre><p id="trap" hidden></p></section>
<section class="panel"><h2>The complete conditional table</h2><div class="rules"><article><h3>External · R1</h3><p>≤2 pages: External review<br>&gt;2 pages: External review<br>Unknown length: External review</p><p>Length does not change the route.</p></article><article><h3>Internal-only</h3><p>≤2 pages: R3 Standard check<br>&gt;2 pages: R2 Editorial review<br>Unknown length: Clarify length</p><p>Needed count must be a positive whole number.</p></article><article><h3>Unknown audience</h3><p>≤2 pages: Clarify audience<br>&gt;2 pages: Clarify audience<br>Unknown length: Clarify audience</p><p>Do not infer internal-only from a short document.</p></article></div><p><strong>Boundary case D:</strong> Internal-only, two pages → R3 Standard check. Case B internal-only, three pages → R2. Case C unknown audience, one page → clarify audience.</p></section>
<section class="panel"><h2>Draft your own rule aid</h2><p>These notes do not change the fixed training rules above.</p><label for="source">Maintained source and version</label><textarea id="source"></textarea><label for="conditions">Conditions, priority, and overlapping rules</label><textarea id="conditions"></textarea><label for="notes">Unknown inputs, exceptions, and review questions</label><textarea id="notes"></textarea><div class="actions"><button type="button" id="build">Build rule-review note</button><button type="button" id="reset">Reset practice</button></div><p id="notice" class="notice" role="status">Notes remain in this page session only.</p><pre id="output" hidden></pre><div id="resetPanel" hidden><p>Clear the rule notes and return to case A?</p><button type="button" id="cancel">Keep entries</button> <button type="button" id="confirm">Clear practice</button></div></section></main><script>
'use strict';const $=s=>document.querySelector(s);let audience='external';function stale(){ $('#trace').hidden=true;$('#routeNotice').textContent='Inputs changed. Previous route is stale; trace again.';$('#resetPanel').hidden=true}function choose(id){audience=id;for(const key of ['external','internal','unknown'])$('#'+key).setAttribute('aria-pressed',String(key===id));stale()}for(const id of ['external','internal','unknown'])$('#'+id).addEventListener('click',()=>choose(id));$('#pages').addEventListener('input',stale);$('#route').addEventListener('click',()=>{const raw=$('#pages').value.trim();let result,trace;if(audience==='unknown'){result='Clarify audience. No route assigned.';trace='Audience is unknown. A page count cannot establish whether the document is internal-only.'}else if(audience==='external'){result='External review · R1.';trace='External audience overrides length. R1 applies even when length is unknown. R2/R3 require internal-only audience.'}else if(!raw){result='Clarify length. No internal route assigned.';trace='Internal-only audience is known; page count is required to choose R2 or R3.'}else if(!/^[1-9]\d*$/.test(raw)||!Number.isSafeInteger(Number(raw))){result='Enter a positive whole page count for the internal route.';trace='Invalid needed count is not zero; no route assigned.'}else if(Number(raw)>2){result='Editorial review · R2.';trace='Internal-only AND more than two pages. R1 external condition is false; R3 length condition is false.'}else{result='Standard check · R3.';trace='Internal-only AND two pages or less. At exactly two pages R3 applies. This is not a completed review.'}$('#routeNotice').textContent=result;$('#trace').textContent=trace;$('#trace').hidden=false});$('#flawed').addEventListener('click',()=>{$('#trap').hidden=false;$('#trap').textContent='Fixed trap case: External + 1 page. Flawed length-first rule says ≤2 pages → standard check, then external → external review. Both match, and stopping at the first sends the wrong route. Correct R3 says internal-only AND ≤2 pages; R1 has external priority. Correct result: External review.'});const ids=['source','conditions','notes'];let built=false;for(const id of ids)$('#'+id).addEventListener('input',()=>{$('#output').hidden=true;$('#notice').textContent=built?'Rule notes changed. Review note is stale; build again.':'Rule notes changed.';$('#resetPanel').hidden=true});$('#build').addEventListener('click',()=>{const missing=[['source','Maintained source and version'],['conditions','Conditions and priority']].filter(([id])=>!$('#'+id).value.trim()).map(([,n])=>n);if(missing.length){$('#notice').textContent='Complete: '+missing.join(', ')+'.';$('#output').hidden=true;return}$('#output').textContent='RULE-REVIEW NOTE — no policy validated\nSource: '+$('#source').value+'\nConditions/priority: '+$('#conditions').value+'\nUnknowns/exceptions: '+($('#notes').value||'To examine');$('#output').hidden=false;$('#notice').textContent='Rule-review note built. Your text has not changed the fixed routing model.';built=true});$('#reset').addEventListener('click',()=>{$('#resetPanel').hidden=false;$('#notice').textContent='Reset requested. Choose whether to keep entries.'});$('#cancel').addEventListener('click',()=>{$('#resetPanel').hidden=true;$('#notice').textContent='Reset canceled. Practice entries retained.'});$('#confirm').addEventListener('click',()=>{for(const id of ids)$('#'+id).value='';$('#pages').value='1';choose('external');$('#route').click();$('#trap').hidden=true;$('#output').hidden=true;$('#output').textContent='';$('#resetPanel').hidden=true;built=false;$('#notice').textContent='Practice cleared; fixed case A restored.'});
</script></body></html>