An archive-label practice model with five connected stages and an unsupported link to revise

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>A proposed program, five connected stages</title><style>
:root{font:16px/1.65 system-ui,sans-serif;color:#343126;background:#f3eee3}*{box-sizing:border-box}body{margin:0}main{max-width:1000px;margin:auto;padding:24px}h1{font:700 2.3rem/1.2 Georgia,serif;max-width:22ch}h2{font:700 1.6rem/1.3 Georgia,serif}h3{font-size:1.15rem}.notice{padding:18px;background:#fff7de;border-left:5px solid #a56926}.chain{margin:28px 0;counter-reset:stage}.stage{background:#fffdfa;border:1px solid #bbbaa4;padding:20px;margin:0;border-left:7px solid #627650}.stage h2:before{counter-increment:stage;content:counter(stage,decimal-leading-zero) ' / ';font:700 1rem system-ui,sans-serif;color:#536447}.arrow{margin:0;padding:10px 24px;background:#e3e8d8;font-weight:700}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}button,textarea{font:inherit}button{border:1px solid #65784f;border-radius:4px;background:#fffdfa;color:#343126;padding:10px 14px;min-height:46px;cursor:pointer;white-space:normal;text-align:left}button[aria-pressed=true]{background:#405235;color:#fff}button:focus-visible,textarea:focus-visible{outline:3px solid #a74c14;outline-offset:3px}.review{background:#fffdfa;border:1px solid #aab09b;padding:22px;margin:24px 0}.question{padding:18px;background:#e9eddf}.comparison{padding:18px;border-left:4px solid #a56926;background:#fff4dc}.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{font-weight:700}textarea{display:block;width:100%;min-height:105px;margin-top:8px;padding:10px;border:1px solid #7c876d;border-radius:3px;color:#343126;resize:vertical}.confirm{background:#fff4dc;padding:16px}#status{min-height:3em}footer{border-top:1px solid #aab09b;padding:18px 0}[hidden]{display:none!important}@media(max-width:520px){main{padding:18px}h1{font-size:1.9rem}.fields{grid-template-columns:1fr}.toolbar button{flex:1 1 100%}}
</style></head><body><main><header><p><strong>ARCHIVE-LABEL PRACTICE · ORIGINAL FICTIONAL PLAN</strong></p><h1>What connects the session to the change?</h1><p>Keep resources, delivery and intended outcomes in their own places. Then inspect what each connection needs.</p><p class="notice">The program has not run. No real archive records, attendance or participant results are supplied. The model is planning material, not an approved archive procedure.</p></header>
<section class="chain" aria-label="Complete proposed logic model">
<article class="stage" id="inputs"><h2>Inputs</h2><p>Three hours of facilitator time for the program; a set of eight original practice cards; a room still TO CONFIRM.</p><p>The three hours are not three hours per session. The eight-card set is planned, not supplied here.</p></article><p class="arrow">↓ Inputs to activities</p>
<article class="stage" id="activities"><h2>Activities</h2><p>Prepare and run two small practice sessions using modeled checks, participant practice and feedback.</p></article><p class="arrow">↓ Activities to outputs</p>
<article class="stage" id="outputs"><h2>Planned outputs</h2><p>Two sessions and up to ten participation places across those sessions. Actual delivery and attendance are unknown.</p><p>Participation places are not ten unique people. Someone might attend both sessions.</p></article><p class="arrow">↓ Outputs to intended short-term outcome</p>
<article class="stage" id="outcome"><h2>Intended short-term outcome</h2><p>Participants can distinguish required label fields in a later practice record.</p><p>Required fields, check task, indicator, baseline and actual results: TO CONFIRM.</p></article><p class="arrow">↓ Intended outcome to later use</p>
<article class="stage" id="later"><h2>Intended later use</h2><p>Participants apply the check to authorized real work.</p><p>Permission, opportunity and support for that use: TO CONFIRM.</p></article>
</section>
<section class="review"><h2>Inspect one connection</h2><div class="toolbar" aria-label="Model connections"><button id="link1" aria-pressed="true">Inputs → activities</button><button id="link2" aria-pressed="false">Activities → outputs</button><button id="link3" aria-pressed="false">Outputs → outcome</button><button id="link4" aria-pressed="false">Outcome → later use</button></div><div class="question"><h3 id="connection-title">Inputs → activities</h3><p id="connection-context">Three facilitator hours, eight planned cards and an unconfirmed room → preparation and two practice sessions.</p><p id="connection-question">Is the room available, and can the facilitator prepare and deliver the proposed work within the available time?</p></div></section>
<section class="review"><h2>Inspect the leap from delivery to ability</h2><div class="toolbar" aria-label="Connection wording"><button id="unsupported" aria-pressed="true">Unsupported connection</button><button id="revised" aria-pressed="false">Revised connection</button></div><div class="comparison"><h3 id="version-title">Unsupported connection</h3><p id="version-text">Two sessions → participants are competent.</p><p id="version-note">A session count does not establish competence. The required fields, check task, indicator, baseline and actual results remain undefined or unknown.</p></div><p>Both views retain three facilitator hours, eight planned cards, two sessions and up to ten participation places. Changing wording does not supply attendance, an assessment or causal evidence.</p></section>
<section class="review"><h2>Your blank program model</h2><p>Keep your own planning notes separate from the fictional model. These fields do not assess a program or generate results.</p><div class="fields"><label>Inputs<textarea id="own-inputs"></textarea></label><label>Activities<textarea id="own-activities"></textarea></label><label>Planned outputs<textarea id="own-outputs"></textarea></label><label>Intended changes<textarea id="own-changes"></textarea></label><label>Assumptions<textarea id="own-assumptions"></textarea></label><label>Measurement questions<textarea id="own-measurement"></textarea></label><label>Review notes<textarea id="own-notes"></textarea></label></div><div class="toolbar"><button id="reset" aria-expanded="false" aria-controls="confirmation">Clear my planning notes</button></div><div id="confirmation" class="confirm" hidden><p>Clear all seven fields? The proposed model and selected connection will stay unchanged.</p><div class="toolbar"><button id="keep">Keep my notes</button><button id="clear">Clear all seven fields</button></div></div><p id="status" role="status" aria-live="polite">All seven fields are blank. No program results are recorded here.</p></section><footer>Typing lasts in this open page and disappears on reload. Nothing is sent or stored. Keep the maintained program model and actual evidence in your team's approved workflow.</footer></main><script>
'use strict';const byId=id=>document.getElementById(id);const links=[['Inputs → activities','Three facilitator hours, eight planned cards and an unconfirmed room → preparation and two practice sessions.','Is the room available, and can the facilitator prepare and deliver the proposed work within the available time?'],['Activities → outputs','Preparation, modeled checks, practice and feedback → two planned sessions and up to ten participation places.','What will count as a delivered session, and how will actual participation be recorded?'],['Outputs → outcome','Two planned sessions and up to ten participation places → intended ability to distinguish required label fields in a later practice record.','What will participants practice, what feedback will they receive, and what later check could reveal the intended ability?'],['Outcome → later use','Intended ability in a later practice record → applying the check to authorized real work.','Will participants have permission, a relevant opportunity and support to use the check in real work?']];links.forEach((data,i)=>byId('link'+(i+1)).addEventListener('click',()=>{links.forEach((_,j)=>byId('link'+(j+1)).setAttribute('aria-pressed',String(j===i)));['connection-title','connection-context','connection-question'].forEach((id,j)=>byId(id).textContent=data[j]);}));
const versions={unsupported:['Unsupported connection','Two sessions → participants are competent.','A session count does not establish competence. The required fields, check task, indicator, baseline and actual results remain undefined or unknown.'],revised:['Revised connection','Two planned sessions with modeled checks, practice and feedback → intended ability to distinguish required label fields in a later practice record. Actual ability has not been observed.','Specify the required fields and suitable later task before deciding what evidence to collect. No baseline, pass threshold or successful result is supplied; this arrow is not proof of cause.']};for(const [key,data]of Object.entries(versions))byId(key).addEventListener('click',()=>{for(const k of Object.keys(versions))byId(k).setAttribute('aria-pressed',String(k===key));['version-title','version-text','version-note'].forEach((id,j)=>byId(id).textContent=data[j]);});
const fields=['own-inputs','own-activities','own-outputs','own-changes','own-assumptions','own-measurement','own-notes'];function close(){byId('confirmation').hidden=true;byId('reset').setAttribute('aria-expanded','false');}for(const id of fields)byId(id).addEventListener('input',()=>{byId('status').textContent="Draft changed. Review your current planning notes.";});byId('reset').addEventListener('click',()=>{byId('confirmation').hidden=false;byId('reset').setAttribute('aria-expanded','true');byId('keep').focus();});byId('keep').addEventListener('click',()=>{close();byId('status').textContent='Kept all seven planning fields. No results were generated.';byId('reset').focus();});byId('clear').addEventListener('click',()=>{for(const id of fields)byId(id).value='';close();byId('status').textContent='All seven fields were cleared. Worked model, connection and wording views are unchanged.';byId('own-inputs').focus();});
</script></body></html>