An access problem, an unclear field, and later practice evidence with different next steps

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>Check the evidence before the training request</title><style>
:root{font:16px/1.65 system-ui,sans-serif;color:#293849;background:#eaf0f4}*{box-sizing:border-box}body{margin:0}main{max-width:1040px;margin:auto;padding:24px}h1{font:700 2.65rem/1.12 Georgia,serif;max-width:21ch}h2{font:700 1.65rem/1.3 Georgia,serif}h3{font-size:1.16rem;line-height:1.4}.eyebrow{font-weight:750;letter-spacing:.04em}.requirement{background:#fff;border-left:5px solid #406a80;padding:20px}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}button,textarea{font:inherit}button{min-height:46px;padding:11px 15px;border:1px solid #56758a;border-radius:4px;background:#fff;color:#293849;white-space:normal;text-align:left;cursor:pointer}button[aria-pressed=true]{background:#234c65;color:#fff}button:focus-visible,textarea:focus-visible{outline:3px solid #b45a16;outline-offset:4px}.ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0}.source{padding:20px;background:#fff;border:1px solid #a5b7c2;border-top:5px solid #648493}.source strong{font-size:1.3rem}.source p{margin:10px 0}.source[data-stage=B2]{border-top-color:#a47440}.panel{background:#fff;border:1px solid #a5b7c2;padding:24px;margin:24px 0}.stage-label{padding:15px;background:#e3edf2;font-weight:700}.worksheet{margin:0}.worksheet div{display:grid;grid-template-columns:minmax(170px,1fr) minmax(0,2fr);gap:24px;padding:18px 0;border-bottom:1px solid #c3d0d7}.worksheet dt{font-weight:750}.worksheet dd{margin:0;overflow-wrap:anywhere}.decision{border-left:5px solid #a47440;background:#fbf1e2;padding:20px}.decision p{margin:10px 0}.blank-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}label{font-weight:700}textarea{display:block;width:100%;min-height:120px;padding:12px;margin-top:8px;border:1px solid #6d8697;border-radius:3px;color:#293849;resize:vertical}.confirm{padding:18px;background:#fff0d5}#note-status{min-height:3em}footer{padding:18px 0;border-top:1px solid #b1c1cb}[hidden]{display:none!important}@media(max-width:680px){.ledger{grid-template-columns:1fr}.worksheet div{grid-template-columns:1fr;gap:7px}}@media(max-width:520px){main{padding:18px}h1{font-size:2.05rem}.panel{padding:18px}.blank-grid{grid-template-columns:1fr}.toolbar button{flex:1 1 100%}}
</style></head><body><main>
<header><p class="eyebrow">HANDOFF-FORM PILOT · ORIGINAL FICTIONAL EVIDENCE</p><h1>What would the next observation tell you?</h1><p>“Book training for everyone” gives the team a course request. These three source stages give it different questions to settle first.</p><div class="requirement"><h2>The required work and its conditions</h2><p id="work-requirement">Given an accessible approved form and supplied field definitions, create a handoff entry identifying the item ID, current version, and next owner.</p><p>The cases below are authored teaching material, not actual employee or performance records.</p></div></header>
<section aria-labelledby="ledger-title"><h2 id="ledger-title">Keep the source stages separate</h2><div class="ledger">
<article class="source" id="source-A1" data-stage="A1"><strong>A1</strong><h3>Access prerequisite</h3><p>The approved form link displays “Access denied.”</p><p>No form-field response is available. Form skill has not been observed.</p></article>
<article class="source" id="source-B1" data-stage="B1"><strong>B1</strong><h3>Unclear wording</h3><p>The form opens. Its guidance says “identify the owner.”</p><p>The demonstration writer asks whether that means current reviewer or next recipient. No explicit definition or completed entry is supplied.</p></article>
<article class="source" id="source-B2" data-stage="B2"><strong>B2</strong><h3>Separate later hypothetical record</h3><p>Definition: next owner means “next person receiving the handoff.”</p><p>Practice response: the current reviewer was named. The cause remains open to inquiry.</p></article></div><p>B2 adds a later definition and practice response. It does not rewrite B1's original instruction or supply a response for that earlier stage.</p></section>
<section class="panel" aria-labelledby="worksheet-title"><h2 id="worksheet-title">A completed evidence-to-action worksheet</h2><div class="toolbar" aria-label="Evidence stage"><button id="case-A1" aria-pressed="true">A1 · Access prerequisite</button><button id="case-B1" aria-pressed="false">B1 · Unclear wording</button><button id="case-B2" aria-pressed="false">B2 · Later practice evidence</button></div><p class="stage-label" id="selected-case" role="status" aria-live="polite">A1 · Access prerequisite</p><dl class="worksheet" id="worked-worksheet">
<div><dt>Required work</dt><dd id="case-required"></dd></div>
<div><dt>Supplied condition and source ID</dt><dd id="case-condition"></dd></div>
<div><dt>Exact observation</dt><dd id="case-observation"></dd></div>
<div><dt>Possible explanations</dt><dd id="case-explanations"></dd></div>
<div><dt>Missing check</dt><dd id="case-check"></dd></div>
<div><dt>Proposed step outside training</dt><dd id="case-outside"></dd></div>
<div><dt>Tentative learning objective</dt><dd id="case-objective"></dd></div>
<div><dt>Evidence and review needed</dt><dd id="case-review"></dd></div></dl></section>
<section class="panel" aria-labelledby="request-title"><h2 id="request-title">What should happen to the request?</h2><div class="toolbar" aria-label="Proposed response"><button id="blanket" aria-pressed="true">Blanket request</button><button id="evidence" aria-pressed="false">Evidence-based next steps</button></div><div class="decision"><h3 id="decision-title">Blanket request</h3><p id="blanket-text">Book handoff-form training for everyone.</p><div id="evidence-steps" hidden><p><strong>A1:</strong> Confirm the access prerequisite before observing form performance.</p><p><strong>B1:</strong> Clarify which person the owner field means, then inspect a response under that instruction.</p><p><strong>B2:</strong> Explore how the writer selected the current reviewer and test a focused practice question about the next recipient.</p></div><p id="decision-note">The blanket request does not resolve missing access or unclear instructions, and the evidence does not establish a course for everyone.</p></div><p>These are proposed checks. The comparison changes no source record, grants no access and books no training. No cause, employee score or final ability is established.</p></section>
<section class="panel" aria-labelledby="blank-title"><h2 id="blank-title">Your blank needs-review worksheet</h2><p>Keep your observation and the checks it calls for separate. These eight temporary entries do not change the worked records.</p><div class="blank-grid">
<label>Required work<textarea id="own-required"></textarea></label>
<label>Supplied condition and source ID<textarea id="own-condition"></textarea></label>
<label>Exact observation<textarea id="own-observation"></textarea></label>
<label>Possible explanations<textarea id="own-explanations"></textarea></label>
<label>Missing check<textarea id="own-check"></textarea></label>
<label>Proposed step outside training<textarea id="own-outside"></textarea></label>
<label>Tentative learning objective<textarea id="own-objective"></textarea></label>
<label>Evidence and review needed<textarea id="own-review"></textarea></label></div><div class="toolbar"><button id="reset" aria-expanded="false" aria-controls="confirmation">Clear my eight entries</button></div><div class="confirm" id="confirmation" hidden><p>Clear all eight entries? The selected case, source records and request view will stay unchanged.</p><div class="toolbar"><button id="keep">Keep my entries</button><button id="clear">Clear all eight entries</button></div></div><p id="note-status" role="status" aria-live="polite">All eight entries are blank. No training decision has been approved.</p></section>
<footer>Typing lasts in this open page only and disappears on reload. Nothing is stored, submitted or exported. Keep the maintained process instructions and actual evidence in the team's normal records.</footer>
</main><script>
'use strict';
const byId=id=>document.getElementById(id),caseIds=['A1','B1','B2'];
const required='Create an entry with item ID, current version and next owner using an accessible approved form and supplied definitions.';
const cases={
A1:{title:'A1 · Access prerequisite',required,condition:'A1: the approved form link displays Access denied.',observation:'No form-field response is available.',explanations:'An access prerequisite is unresolved. Form skill has not been observed; the message does not establish a skill gap.',check:'Ask the process owner to confirm access, then observe the task when the form is accessible.',outside:'Resolve access through the normal process.',objective:'Not established. Confirm the prerequisite before investigating a learning objective.',review:'Record the access condition and subsequent observed task response; review it with the process owner.'},
B1:{title:'B1 · Unclear wording',required,condition:'B1: the form opens; guidance says identify the owner.',observation:'The writer asks whether owner means current reviewer or next recipient. No completed response is supplied.',explanations:'The field wording may be unclear. The writer\'s understanding of the intended handoff rule has not been demonstrated.',check:'Obtain an explicit definition from the process owner and inspect a response under that definition.',outside:'Clarify the field instruction.',objective:'Not yet specified; clarify the requirement first.',review:'Record the definition, observe a short practice response if needed, and review the result with the process owner.'},
B2:{title:'B2 · Separate later hypothetical practice evidence',required,condition:'B2: a separate later source defines next owner as next person receiving the handoff.',observation:'A practice response names the current reviewer.',explanations:'Possible explanations need inquiry. One response does not establish its cause or final ability.',check:'Ask how the writer chose that person and inspect focused practice distinguishing current reviewer from next recipient.',outside:'Confirm the explicit definition is present where the work occurs.',objective:'Given a handoff scenario identifying the current reviewer and next recipient, select the next recipient as the next owner.',review:'Review the writer\'s explanation and a further practice response with the process owner. No completed learning or organization-wide course is established.'}
};
let selected='A1',request='blanket';
const fields=['required','condition','observation','explanations','check','outside','objective','review'];
function renderCase(){const entry=cases[selected];byId('selected-case').textContent=entry.title;for(const key of fields)byId('case-'+key).textContent=entry[key];for(const id of caseIds)byId('case-'+id).setAttribute('aria-pressed',String(id===selected));}
function renderRequest(){const differentiated=request==='evidence';byId('blanket').setAttribute('aria-pressed',String(!differentiated));byId('evidence').setAttribute('aria-pressed',String(differentiated));byId('decision-title').textContent=differentiated?'Evidence-based next steps':'Blanket request';byId('blanket-text').hidden=differentiated;byId('evidence-steps').hidden=!differentiated;byId('decision-note').textContent=differentiated?'Each stage has a next check that could change the decision. B1 remains the earlier unclear instruction; B2 remains a separate later practice record.':'The blanket request does not resolve missing access or unclear instructions, and the evidence does not establish a course for everyone.';}
for(const id of caseIds)byId('case-'+id).addEventListener('click',()=>{selected=id;renderCase();});
for(const id of ['blanket','evidence'])byId(id).addEventListener('click',()=>{request=id;renderRequest();});
function closeConfirmation(){byId('confirmation').hidden=true;byId('reset').setAttribute('aria-expanded','false');}
for(const id of fields.map(key=>'own-'+key))byId(id).addEventListener('input',()=>{byId('note-status').textContent="Analysis entries changed. Review your current evidence and open questions.";});byId('reset').addEventListener('click',()=>{byId('confirmation').hidden=false;byId('reset').setAttribute('aria-expanded','true');byId('keep').focus();});
byId('keep').addEventListener('click',()=>{closeConfirmation();byId('note-status').textContent='Kept all eight entries. Worked evidence and request view are unchanged.';byId('reset').focus();});
byId('clear').addEventListener('click',()=>{for(const key of fields)byId('own-'+key).value='';closeConfirmation();byId('note-status').textContent='All eight entries were cleared. The selected case, source records and request view are unchanged.';byId('own-required').focus();});
renderCase();renderRequest();
</script></body></html>