Trace three evaluation questions from proposed evidence to the decision they will inform
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>Evaluation plan · follow the evidence path</title><style>*{box-sizing:border-box}body{margin:0;background:#f0f3ee;color:#263b35;font:16px/1.55 system-ui,sans-serif}main{max-width:980px;margin:auto;padding:24px}h1{font-size:32px;line-height:1.18}h2{font-size:23px}h3{font-size:19px}.eyebrow{color:#57705c;letter-spacing:.05em}.card{padding:18px;background:white;border:1px solid #c7d1c2;border-radius:5px;margin:16px 0}.question{border-left:6px solid #507b5c}.path{display:grid;grid-template-columns:1fr 1fr;gap:12px}.path>div{padding:14px;background:#f2f5ec}.toolbar{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}button,textarea,select{font:inherit;color:inherit}button{min-height:44px;padding:9px 13px;background:white;border:1px solid #55745d;border-radius:4px;cursor:pointer}button[aria-pressed=true]{background:#365c45;color:white}button:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #af621f;outline-offset:3px}.mismatch{border-left:5px solid #b47936;background:#fff5df}.label{padding:18px;border:2px solid #677a69;background:#f8f7ef;max-width:360px}label{display:block;font-weight:650;margin:14px 0 5px}textarea,select{width:100%;min-width:0;max-width:100%;padding:10px;border:1px solid #82977f;border-radius:4px;background:white}textarea{min-height:92px;resize:vertical}select{min-height:44px}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#784a1e}footer{color:#60705e;margin:24px 0}[hidden]{display:none!important}@media(max-width:520px){main{padding:12px}h1{font-size:27px}.path{grid-template-columns:1fr}.card{padding:14px}}</style></head><body><main><p class="eyebrow">FICTIONAL EXHIBIT-LABEL ORIENTATION · PLANNING ONLY</p><h1>Can this evidence answer the question?</h1><p>Four orientation sessions are proposed. The coordinator needs to decide what to revise before the next round; no sessions or findings are recorded here.</p><section class="card"><h2>Trace an evaluation question</h2><div class="toolbar" aria-label="Evaluation question"><button id="q1" type="button" aria-pressed="true">Q1 · Delivery</button><button id="q2" type="button" aria-pressed="false">Q2 · Label interpretation</button><button id="q3" type="button" aria-pressed="false">Q3 · Unclear wording</button></div><section class="card question" aria-live="polite"><h3 id="question-title">Q1 · Were the four sessions delivered as planned?</h3><div id="evidence-path" class="path"></div></section></section><button id="compare" type="button" aria-expanded="false" aria-controls="comparison">Compare data sources for Q2</button><section id="comparison" class="card" hidden><h2>Q2 needs an observation of the two actions</h2><div class="toolbar" aria-label="Proposed source for Q2"><button id="attendance" type="button" aria-pressed="true">Attendance log</button><button id="task-sheet" type="button" aria-pressed="false">Task observation sheet</button></div><section class="card mismatch" aria-live="polite"><h3 id="source-title">Attendance log · participation</h3><p id="source-fit">An attendance log can show participation. It contains no observation of someone reading a label, so it cannot answer Q2.</p></section><section id="task-record" hidden><h3>Original practice label P1</h3><div class="label">Object sketch<br>Source card C12<br>Recorded 2026-09-14</div><p><strong>Neutral instruction:</strong> Show the source reference and the recorded date on this practice label.</p><h3>Blank practice recording sheet</h3><p>Record the two actions separately. These temporary fields do not collect or submit participant records.</p><div class="path"><div><label for="source-action">Source-reference action</label><select id="source-action"><option>Not observed</option><option>Observed; describe in notes</option></select><label for="source-note">What was observed about the source reference?</label><textarea id="source-note"></textarea></div><div><label for="date-action">Recorded-date action</label><select id="date-action"><option>Not observed</option><option>Observed; describe in notes</option></select><label for="date-note">What was observed about the date?</label><textarea id="date-note"></textarea></div></div><label for="help">Help given and missing observations</label><textarea id="help"></textarea></section></section><section class="card mismatch"><h2>Design limits before findings</h2><p>No before-orientation baseline or comparison group is supplied. This plan could describe observations afterward; it cannot estimate improvement or show that the orientation caused the behavior.</p><p>Decision thresholds, named owners, collection dates, available effort and permitted storage arrangements remain to agree. Actual counts, responses and findings are not supplied.</p></section><section class="card"><h2>Your blank evaluation matrix entry</h2><div id="fields"></div><div class="toolbar"><button id="build" type="button">Build review copy</button><button id="reset" type="button">Reset typed work</button></div><section id="confirmation" hidden><h3>Clear the seven planning fields and five practice observation fields?</h3><div class="toolbar"><button id="keep" type="button">Keep my text</button><button id="clear" type="button">Clear typed fields</button></div></section><section id="review" class="card copy" hidden><h2>Supplied evaluation-plan entry</h2><div id="review-content"></div><p>Practice observation fields remain separate from this planning entry. No counts or effectiveness findings are inferred.</p></section></section><p id="status" role="status" aria-live="polite">Question selection changes the planning view, not an evaluation result.</p><footer>Temporary preparation only. No records are saved or submitted. Use the team's maintained system for actual permitted evaluation data.</footer></main><script>(()=>{'use strict';const $=s=>document.querySelector(s),headings=['Indicator','Proposed source','Collection method','Timing','Analysis','Owner','Intended decision','Limits'],questions={q1:['Q1 · Were the four sessions delivered as planned?',['Number of sessions delivered.','Dated session-delivery log.','Facilitator records each session after delivery.','After each of the four planned sessions.','Compare the dated log with the four-session plan.','Name to agree.','Identify delivery gaps before scheduling another round.','Delivery is separate from participant understanding. Actual counts are not supplied.']],q2:['Q2 · How do participants identify a source reference and recorded date in an unfamiliar practice label?',['Source reference identified; recorded date identified. Keep the two actions separate.','Individual task observation sheet.','Observer uses the same neutral instruction and blank recording sheet; records help and missing observations.','At the agreed point after orientation.','Describe each observed action, help given and missing observations.','Observer and reviewer to agree.','Decide which explanation or practice activity needs revision.','No baseline or comparison group. This design cannot establish improvement or causation.']],q3:['Q3 · Which wording do participants find unclear?',['Wording identified as unclear, with the participant’s explanation.','Short voluntary follow-up responses.','Short voluntary follow-up prompts.','At the agreed follow-up point.','Group responses by wording or issue; retain anonymous excerpts only where permitted.','Collector and reviewer to agree.','Select wording to investigate and rewrite.','Responses are not supplied. Optional responses and collection effort need agreement.']]};function select(id){for(const key of Object.keys(questions))$('#'+key).setAttribute('aria-pressed',String(key===id));$('#question-title').textContent=questions[id][0];$('#evidence-path').replaceChildren();for(const[n,text]of questions[id][1].entries()){const div=document.createElement('div'),h=document.createElement('h3'),p=document.createElement('p');h.textContent=headings[n];p.textContent=text;div.append(h,p);$('#evidence-path').append(div);}}for(const id of Object.keys(questions))$('#'+id).addEventListener('click',()=>select(id));select('q1');$('#compare').addEventListener('click',()=>{const open=$('#comparison').hidden;$('#comparison').hidden=!open;$('#compare').setAttribute('aria-expanded',String(open));});for(const id of ['attendance','task-sheet'])$('#'+id).addEventListener('click',()=>{const task=id==='task-sheet';$('#attendance').setAttribute('aria-pressed',String(!task));$('#task-sheet').setAttribute('aria-pressed',String(task));$('#task-record').hidden=!task;$('#source-title').textContent=task?'Task observation sheet · separate actions':'Attendance log · participation';$('#source-fit').textContent=task?'The proposed task records the source-reference action and recorded-date action separately, plus help and Not observed where an observation is missing. No actual outcomes are supplied.':'An attendance log can show participation. It contains no observation of someone reading a label, so it cannot answer Q2.';});const fields=[['question','Evaluation question'],['indicator','Indicator or observable action'],['source','Proposed source'],['method','Collection method'],['use','Intended decision and agreed decision rules'],['timing','Timing, responsible roles and collection effort'],['limits','Design limits and permitted data arrangements']];for(const[id,label]of fields){const l=document.createElement('label'),f=document.createElement('textarea');l.htmlFor=id;l.textContent=label;f.id=id;$('#fields').append(l,f);}for(const f of document.querySelectorAll('textarea,select'))f.addEventListener('input',()=>{$('#review').hidden=true;$('#status').textContent='Entry changed. Build a new planning review; no finding has been inferred.';});$('#build').addEventListener('click',()=>{const missing=fields.slice(0,4).filter(([id])=>!$('#'+id).value.trim());$('#review').hidden=true;if(missing.length){$('#status').textContent='Complete: '+missing.map(([,label])=>label).join(', ')+'.';return;}$('#review-content').replaceChildren();for(const[id,label]of fields){const h=document.createElement('h3'),p=document.createElement('p');h.textContent=label;p.textContent=$('#'+id).value.trim()||'To agree / not supplied.';$('#review-content').append(h,p);}$('#review').hidden=false;$('#status').textContent='Planning review built. Collection, findings and decision thresholds are not invented.';});$('#reset').addEventListener('click',()=>{$('#confirmation').hidden=false;$('#keep').focus();});$('#keep').addEventListener('click',()=>{$('#confirmation').hidden=true;$('#reset').focus();$('#status').textContent='Kept all planning and practice recording fields.';});$('#clear').addEventListener('click',()=>{for(const f of document.querySelectorAll('textarea'))f.value='';for(const id of ['source-action','date-action'])$('#'+id).value='Not observed';$('#review').hidden=true;$('#confirmation').hidden=true;$('#question').focus();$('#status').textContent='All planning and practice recording fields were cleared; both actions are Not observed. Teaching views are unchanged.';});})();</script></body></html>