Three people, three archive tasks, explicit performance anchors, and a manifest-coverage review
HTML for this example
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>Archive team · task evidence and coverage</title><style>*{box-sizing:border-box}body{margin:0;background:#f0f2ef;color:#304038;font:16px/1.6 system-ui,sans-serif}main{max-width:1100px;margin:auto;padding:28px}h1{font:700 clamp(31px,5vw,48px)/1.12 Georgia,serif;margin:12px 0 18px}h2{font-size:24px;line-height:1.3}h3{font-size:19px}p{margin:8px 0 16px}p,h1,h2,h3,label,button,td,th{overflow-wrap:anywhere}div,section,article{min-width:0}.eyebrow{font-size:16px;letter-spacing:.08em;font-weight:750}.panel{padding:22px;margin:22px 0;background:white;border:1px solid #bfcbbe;border-radius:8px}.scope{padding:20px;background:#3a5b47;color:white;border-radius:8px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.record{padding:16px;background:#eff5ea;border-left:4px solid #729268;margin:14px 0}.record h3{margin:0 0 8px}.self{background:#fcf0dc;border-color:#b58145}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}button,input,textarea,select{font:inherit}button{min-height:44px;padding:10px 12px;border:1px solid #68865b;border-radius:5px;background:white;color:inherit;cursor:pointer}button[aria-pressed="true"]{background:#3a5b47;color:white}button:hover{box-shadow:inset 0 0 0 1px #3a5b47}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #b05b24;outline-offset:3px}table{width:100%;table-layout:fixed;border-collapse:collapse}th,td{padding:12px;border:1px solid #bfcbbe;text-align:left;vertical-align:top}th{background:#e4eddf}th:first-child{width:20%}td button{width:100%;text-align:left}label{display:block;font-weight:650;margin:14px 0 6px}input,textarea,select{display:block;width:100%;min-width:0;min-height:44px;padding:10px;border:1px solid #7c9470;border-radius:4px;background:white;color:inherit}textarea{min-height:110px;resize:vertical}.note{padding:16px;background:#fff0d8;border-left:5px solid #b58145}footer{border-top:1px solid #bfcbbe;padding-top:18px;margin-top:26px}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}.panel{padding:16px}.grid{grid-template-columns:1fr}table,tbody,tr,td{display:block}thead{display:none}tr{margin:16px 0;border:1px solid #bfcbbe}td{border:0;border-top:1px solid #d2ddd0}td::before{content:attr(data-label);display:block;font-weight:750;margin-bottom:6px}.toolbar button{flex:1 1 140px}}</style></head><body><main><p class="eyebrow">ORIGINAL FICTIONAL ARCHIVE TEAM · TASK-SPECIFIC EVIDENCE</p><h1>Compare demonstrated work with the coverage you need.</h1><p>Three people prepare digital archive handoffs. Read the task standard and evidence before treating a course list or self-report as independent task coverage.</p><div class="scope">No actual employees, qualifications, completed training or personnel assessments are represented. Levels concern supplied task demonstrations; they do not grant authority, establish availability or rank people.</div>
<section class="panel" aria-labelledby="anchors-title"><h2 id="anchors-title">Define the task and level</h2><div class="grid"><article class="record"><h3>L1 · Supported</h3><p>Completes the supplied task with step-by-step guidance.</p></article><article class="record"><h3>L2 · Routine independent</h3><p>Completes a routine supplied case using the agreed checklist without step-by-step help, and flags exceptions.</p></article><article class="record"><h3>L3 · Exception handling</h3><p>Handles a supplied exception using the given rules, explains the decision, and escalates what those rules do not resolve.</p></article><article class="record self"><h3>Unknown</h3><p>No adequate reviewed demonstration is supplied for this task. It is not a level below L1 or a zero score.</p></article></div><p><strong>S1 · Filename checks:</strong> apply the supplied naming rules to the batch and flag a conflicting name.</p><p><strong>S2 · Caption/source matching:</strong> match caption references to source records and flag missing support.</p><p><strong>S3 · Handoff manifest preparation:</strong> list supplied files and versions, then reconcile them against the source inventory.</p><p>L3 does not authorize inventing a naming rule, changing a source or approving a handoff.</p></section>
<section class="panel" aria-labelledby="matrix-title"><h2 id="matrix-title">Select a person and task</h2><table aria-label="Fictional archive-team assessment and evidence matrix"><thead><tr><th scope="col">Person</th><th scope="col">S1 · Filename checks</th><th scope="col">S2 · Caption/source matching</th><th scope="col">S3 · Handoff manifest</th></tr></thead><tbody id="matrix"></tbody></table><article class="record" aria-labelledby="selected-title"><h3 id="selected-title"></h3><p id="assessment"></p><p id="anchor"></p><p id="evidence-detail"></p><p id="self-report" class="note" hidden></p></article><p id="selection-status" role="status" aria-live="polite">Cy / S3 selected. No rating has changed.</p></section>
<section class="panel" aria-labelledby="coverage-title"><h2 id="coverage-title">Evidence-backed L2-or-higher coverage</h2><p>Proposed next-cycle targets: S1 two people, S2 one, S3 two. These are supplied planning targets, not universal staffing ratios.</p><div id="coverage"></div><button id="review-s3" type="button" aria-expanded="false" aria-controls="s3-review">Review S3 coverage</button><div id="s3-review" hidden><h3>S3 · target 2, current evidence count 1</h3><p id="s3-evidence"></p><p class="note">One further evidence-backed L2-or-higher assessment is needed to meet the target. Bo’s record suggests supported practice toward the routine checklist. Cy’s report suggests arranging a demonstration without assuming an L2 outcome. The page selects no trainee and assigns no work.</p><p>Discuss interest, availability, support, reviewer and actual permissions with the people involved. Counts are not a staffing plan.</p></div></section>
<section class="panel" aria-labelledby="evidence-title"><h2 id="evidence-title">Complete fictional evidence set · E1–E8</h2><div id="evidence-list"></div></section>
<section class="panel" aria-labelledby="blank-title"><h2 id="blank-title">Blank matrix cell and evidence scaffold</h2><div class="grid"><div><label for="own-person">Person or sanitized role ID</label><input id="own-person"><label for="own-task">Task and version</label><input id="own-task"><label for="own-level">Proposed level to verify</label><select id="own-level"><option>Unknown</option><option>L1</option><option>L2</option><option>L3</option></select><label for="own-anchor">Task-specific observable anchor</label><textarea id="own-anchor"></textarea></div><div><label for="own-evidence">Demonstration evidence, method, reviewer and date · supplied facts only</label><textarea id="own-evidence"></textarea><label for="own-self">Separate self-report, interest or preparation</label><textarea id="own-self"></textarea><label for="own-target">Coverage target and its basis</label><textarea id="own-target"></textarea></div></div><label for="own-questions">Temporary review and development questions</label><textarea id="own-questions"></textarea><div class="toolbar"><button id="reset" type="button">Clear my evidence notes</button></div><p id="status" role="status" aria-live="polite">Your seven writing fields start blank and proposed level Unknown. Teaching selections preserve them.</p><div id="confirmation" hidden><p>Clear your seven writing fields and return the proposed level to Unknown? The supplied assessments and coverage remain unchanged.</p><div class="toolbar"><button id="confirm-reset" type="button">Clear typed notes</button><button id="keep" type="button">Keep typed notes</button></div></div></section><footer>Notes are temporary in this open page; reloading clears them. No personnel record is stored or submitted, and no employee score, ranking, qualification or assignment is created. Keep actual records in approved systems.</footer></main>
<script>(()=>{'use strict';const $=id=>document.getElementById(id);const evidence={E1:'Ana applied the supplied filename checklist to a routine batch without step-by-step help and flagged a conflicting name.',E2:'Bo did the same filename task without step-by-step help and flagged a conflicting name.',E3:'Cy completed the filename task with a guide walking through the steps.',E4:'Ana matched the supplied caption references to source records without step-by-step help and flagged a missing reference.',E5:'Bo completed that matching task with step-by-step guidance.',E6:'Ana prepared and reconciled the routine handoff manifest without step-by-step help, identifying a missing inventory item.',E7:'Bo prepared the routine manifest with step-by-step guidance.',E8:'Cy reports being able to prepare a manifest independently. No reviewed demonstration accompanies that report.'};const tasks={S1:{name:'Filename checks',anchor:'Apply the supplied naming rules to the batch and flag a conflicting name.',target:2},S2:{name:'Caption/source matching',anchor:'Match caption references to source records and flag missing support.',target:1},S3:{name:'Handoff manifest preparation',anchor:'List supplied files and versions and reconcile them against the source inventory.',target:2}};const people={Ana:{S1:[2,'E1'],S2:[2,'E4'],S3:[2,'E6']},Bo:{S1:[2,'E2'],S2:[1,'E5'],S3:[1,'E7']},Cy:{S1:[1,'E3'],S2:[null,null],S3:[null,null]}};function choose(person,task){for(const button of document.querySelectorAll('#matrix button'))button.setAttribute('aria-pressed',String(button.id==='cell-'+person+'-'+task));const [level,ref]=people[person][task];$('selected-title').textContent=person+' / '+task+' · '+tasks[task].name;$('assessment').textContent='Current supplied assessment: '+(level?'L'+level:'Unknown')+'.';$('anchor').textContent='Task anchor: '+tasks[task].anchor;$('evidence-detail').textContent=ref?ref+': '+evidence[ref]:'No adequate reviewed demonstration is supplied for this task.';$('self-report').hidden=!(person==='Cy'&&task==='S3');$('self-report').textContent=person==='Cy'&&task==='S3'?'Separate self-report E8: '+evidence.E8+' It is not counted as demonstrated L2 coverage.':'';$('selection-status').textContent=person+' / '+task+' selected. No rating has changed.';}for(const [person,assessments]of Object.entries(people)){const tr=document.createElement('tr');const name=document.createElement('td');name.dataset.label='Person';name.textContent=person;tr.append(name);for(const [task,[level,ref]]of Object.entries(assessments)){const td=document.createElement('td');td.dataset.label=task+' · '+tasks[task].name;const b=document.createElement('button');b.type='button';b.id='cell-'+person+'-'+task;b.textContent=(level?'L'+level:'Unknown')+(ref?' · '+ref:person==='Cy'&&task==='S3'?' · self-report E8 separate':' · no demonstration');b.setAttribute('aria-label',person+' / '+task+' · '+b.textContent);b.setAttribute('aria-pressed','false');b.addEventListener('click',()=>choose(person,task));td.append(b);tr.append(td);}$('matrix').append(tr);}for(const [task,t]of Object.entries(tasks)){const names=Object.keys(people).filter(person=>people[person][task][0]>=2);const row=document.createElement('article');row.className='record';row.id='coverage-'+task;const h=document.createElement('h3');h.textContent=task+' · '+t.name;const p=document.createElement('p');p.textContent='Target: '+t.target+'; supplied L2-or-higher evidence count: '+names.length+' ('+names.join(' and ')+'). '+(names.length>=t.target?'The evidence count meets the supplied target.':'One further evidence-backed L2-or-higher assessment is needed.');row.append(h,p);$('coverage').append(row);}$('s3-evidence').textContent='E6: '+evidence.E6+' E7: '+evidence.E7+' E8 (separate self-report): '+evidence.E8;for(const [id,text]of Object.entries(evidence)){const p=document.createElement('p');const strong=document.createElement('strong');strong.textContent=id+': ';p.append(strong,document.createTextNode(text));$('evidence-list').append(p);}$('review-s3').addEventListener('click',()=>{const open=$('s3-review').hidden;$('s3-review').hidden=!open;$('review-s3').setAttribute('aria-expanded',String(open));$('review-s3').textContent=open?'Hide S3 coverage review':'Review S3 coverage';});for(const id of ["own-person","own-task","own-anchor","own-evidence","own-self","own-target","own-questions","own-level"])for(const event of ['input','change'])$(id).addEventListener(event,()=>{$('status').textContent="Your evidence notes or proposed level were edited. Teaching assessments and coverage are unchanged.";});$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('status').textContent='Kept your evidence notes and proposed level.';$('reset').focus();});$('confirm-reset').addEventListener('click',()=>{for(const field of document.querySelectorAll('input,textarea'))field.value='';$('own-level').value='Unknown';$('confirmation').hidden=true;$('status').textContent='Your evidence notes were cleared and proposed level is Unknown. Teaching assessments and coverage are unchanged.';$('own-person').focus();});choose('Cy','S3');})();</script></body></html>