Five tasks with deadline and goal reasoning, four priority areas, and an unassessed request

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>Makerspace priorities · urgency and importance</title><style>*{box-sizing:border-box}body{margin:0;background:#f0f2ed;color:#2e4038;font:16px/1.6 system-ui,sans-serif}main{max-width:1080px;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,dd{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;border:1px solid #bfccbc;border-radius:8px;background:white}.goal{background:#305746;color:white;padding:20px;border-radius:8px}.areas{display:grid;grid-template-columns:1fr 1fr;gap:16px}.area{padding:16px;border-top:5px solid #6b8e67;background:#eef5e9}.area h3{margin:0 0 10px}.area:last-child{grid-column:1/-1;background:#fff3df;border-color:#b38143}.area button{display:block;width:100%;text-align:left;margin:10px 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.record{padding:16px;margin:16px 0;background:#f2f6ef;border-left:4px solid #7f9b6d}.record h3{margin:0 0 12px}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}button,textarea,select{font:inherit}button{min-height:44px;padding:10px 14px;border:1px solid #64815c;border-radius:5px;background:white;color:inherit;cursor:pointer}button[aria-pressed="true"]{background:#305746;color:white}button:hover{box-shadow:inset 0 0 0 1px #305746}button:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #b35a25;outline-offset:3px}label{display:block;font-weight:650;margin:14px 0 6px}textarea,select{display:block;width:100%;min-width:0;min-height:44px;padding:10px;border:1px solid #819475;border-radius:4px;background:white;color:inherit}textarea{min-height:110px;resize:vertical}.note{padding:16px;background:#fff0d5;border-left:5px solid #ae773b}dl{margin:0}dt{font-weight:750;margin:14px 0 5px}dd{margin:0 0 16px}footer{border-top:1px solid #bfccbc;padding-top:18px;margin-top:26px}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}.panel{padding:16px}.areas,.grid{grid-template-columns:1fr}.area:last-child{grid-column:auto}.toolbar button{flex:1 1 140px}}</style></head><body><main><p class="eyebrow">ORIGINAL FICTIONAL FRIDAY-MORNING SNAPSHOT</p><h1>Check the deadline and the goal separately.</h1><div class="goal"><strong>Planning goal:</strong> Prepare clear arrival instructions and a workable facilitator plan for Saturday’s makerspace induction, plus preparation for the recurring induction process.</div><p>No actual event, staff agreement, delegation, sending or completed action is represented. Urgency concerns timing and consequences; importance concerns this stated goal, not a task’s worth to the whole organization.</p>
<section class="panel" aria-labelledby="map-title"><h2 id="map-title">Four areas, plus room for an unknown</h2><div id="areas" class="areas"></div><p>These are prompts for a human decision. Moving T3 does not agree a handoff; moving T4 does not cancel an obligation. No exact order within a quadrant is calculated.</p></section>
<section class="panel" aria-labelledby="selected-title"><h2 id="selected-title">Inspect one task’s proposed assessment</h2><label for="task">Selected task</label><select id="task"></select><div class="grid"><div><label for="urgent">Urgent?</label><select id="urgent"><option>Yes</option><option>No</option><option>Unknown</option></select></div><div><label for="important">Important to this induction goal?</label><select id="important"><option>Yes</option><option>No</option><option>Unknown</option></select></div></div><p id="placement" class="note"></p><dl><dt>Supplied urgency basis · retained after edits</dt><dd id="urgency-reason"></dd><dt>Supplied importance basis · retained after edits</dt><dd id="importance-reason"></dd><dt>Original proposed next action</dt><dd id="next-action"></dd></dl><p id="reason-review" class="note" hidden></p><button id="restore" type="button">Restore example</button><p id="status" role="status" aria-live="polite">T2 selected. No time is booked and no task is assigned.</p></section>
<section class="panel" aria-labelledby="records-title"><h2 id="records-title">All five original task records</h2><div id="records"></div></section>
<section class="panel" aria-labelledby="blank-title"><h2 id="blank-title">Blank goal and task scaffold</h2><div class="grid"><div><label for="own-goal">Your planning goal and responsibilities</label><textarea id="own-goal"></textarea><label for="own-task">Task and relevant context</label><textarea id="own-task"></textarea><label for="own-urgency">Timing and consequence of delay</label><textarea id="own-urgency"></textarea><label for="own-urgent">Proposed urgency</label><select id="own-urgent"><option>Unknown</option><option>Yes</option><option>No</option></select></div><div><label for="own-importance">Contribution to your stated goal</label><textarea id="own-importance"></textarea><label for="own-important">Proposed importance to that goal</label><select id="own-important"><option>Unknown</option><option>Yes</option><option>No</option></select><label for="own-next">Proposed next action, owner and agreement still needed</label><textarea id="own-next"></textarea><label for="own-notes">Temporary review questions</label><textarea id="own-notes"></textarea></div></div><div class="toolbar"><button id="reset" type="button">Clear my task notes</button></div><p id="blank-status" role="status" aria-live="polite">Your six writing fields start blank; both own assessments start Unknown.</p><div id="confirmation" hidden><p>Clear six writing fields and return both own assessments to Unknown? The five teaching tasks keep their current assessments.</p><div class="toolbar"><button id="confirm-reset" type="button">Clear my entries</button><button id="keep" type="button">Keep my entries</button></div></div></section><footer>Typing and changed assessments are temporary in this open page; reloading restores the example. Nothing is stored, booked, assigned, cancelled or marked complete. Agree actual next actions through the team’s working process.</footer></main>
<script>(()=>{'use strict';const $=id=>document.getElementById(id);const initial=[{id:'T1',name:'Correct the arrival reminder',urgent:'Yes',important:'Yes',urgency:'The reminder is due Friday noon and currently names the wrong entrance. Delay would leave incorrect instructions in the planned message.',importance:"Clear arrival instructions directly support Saturday's induction.",action:'Correct the instruction and use the actual review/send process before noon.'},{id:'T2',name:'Prepare a reusable welcome checklist',urgent:'No',important:'Yes',urgency:"Intended for next month's induction; no immediate deadline is supplied.",importance:'A reusable preparation aid supports the recurring induction process.',action:'Agree a preparation slot and reviewer.'},{id:'T3',name:'Format the separate club newsletter',urgent:'Yes',important:'No',urgency:'Its requester asks for formatting today.',importance:'The supplied work concerns a separate club newsletter, outside this induction goal.',action:'Discuss routing with the newsletter owner and confirm who can take it.'},{id:'T4',name:'Browse unused banner styles',urgent:'No',important:'No',urgency:'No deadline or dependency is supplied.',importance:'No use for the banner styles is identified in the induction plan.',action:'Reconsider spending time on it.'},{id:'T5',name:'Update a supply order',urgent:'Unknown',important:'Unknown',urgency:'Deadline and consequence of delay are not supplied.',importance:'The request does not state its connection to the induction.',action:'Ask what must change, by when, and which work depends on it.'}];let tasks=initial.map(t=>({...t,review:false}));const selected=()=>tasks.find(t=>t.id===$('task').value);const key=t=>t.urgent==='Unknown'||t.important==='Unknown'?'unknown':t.urgent+'/'+t.important;const areas=[['Yes/Yes','Urgent / Important','Attend to the instruction through the actual review process.'],['No/Yes','Not urgent / Important','Agree time and a reviewer for useful preparation.'],['Yes/No','Urgent / Not important to this goal','Discuss route and ownership; a label does not delegate the work.'],['No/No','Not urgent / Not important to this goal','Reconsider this time use; a label does not cancel an obligation.'],['unknown','Unassessed','Either dimension Unknown keeps the task here. Unknown is not No.']];function draw(){$('areas').replaceChildren();for(const [id,title,description]of areas){const a=document.createElement('section');a.className='area';a.id='area-'+id.replace('/','-');const h=document.createElement('h3');h.textContent=title;const p=document.createElement('p');p.textContent=description;a.append(h,p);const matches=tasks.filter(t=>key(t)===id);for(const t of matches){const b=document.createElement('button');b.type='button';b.id='task-'+t.id;b.textContent=t.id+' · '+t.name;b.setAttribute('aria-pressed',String(t.id===selected().id));b.addEventListener('click',()=>{$('task').value=t.id;show();$('task').focus();});a.append(b);}if(!matches.length){const empty=document.createElement('p');empty.textContent='No tasks in this area.';a.append(empty);}$('areas').append(a);}}function detail(){const t=selected();$('urgent').value=t.urgent;$('important').value=t.important;$('placement').textContent='Current proposed placement: '+areas.find(a=>a[0]===key(t))[1]+'.';$('urgency-reason').textContent=t.urgency;$('importance-reason').textContent=t.importance;$('next-action').textContent=t.action;$('reason-review').hidden=!t.review;$('reason-review').textContent=t.review?'Assessment changed. Review both retained reasons and the original proposed action against the new judgment; no new deadline, rationale or handoff has been invented.':'';}function show(){detail();draw();$('status').textContent=selected().id+' selected. No time is booked and no task is assigned.';}for(const t of tasks){const option=document.createElement('option');option.value=t.id;option.textContent=t.id+' · '+t.name;$('task').append(option);const a=document.createElement('article');a.className='record';const h=document.createElement('h3');h.textContent=t.id+' · '+t.name;a.append(h);for(const text of ['Original urgency: '+t.urgent+'. '+t.urgency,'Original importance to this goal: '+t.important+'. '+t.importance,'Original proposed action: '+t.action]){const p=document.createElement('p');p.textContent=text;a.append(p);}$('records').append(a);}$('task').value='T2';$('task').addEventListener('change',show);for(const dimension of ['urgent','important'])$(dimension).addEventListener('change',()=>{const t=selected();t[dimension]=$(dimension).value;t.review=true;detail();draw();$('status').textContent=t.id+' '+dimension+' assessment changed. Supplied reasons retained and marked for review.';});$('restore').addEventListener('click',()=>{tasks=initial.map(t=>({...t,review:false}));detail();draw();$('status').textContent='All five original assessments restored. Changed-reason prompts cleared; your own notes are unchanged.';});for(const id of ["own-goal","own-task","own-urgency","own-importance","own-next","own-notes","own-urgent","own-important"])for(const event of ['input','change'])$(id).addEventListener(event,()=>{$('blank-status').textContent="Your own task notes or proposed assessments were edited. Teaching tasks are unchanged.";});$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('blank-status').textContent='Kept your own task notes and assessments.';$('reset').focus();});$('confirm-reset').addEventListener('click',()=>{for(const field of document.querySelectorAll('textarea'))field.value='';$('own-urgent').value='Unknown';$('own-important').value='Unknown';$('confirmation').hidden=true;$('blank-status').textContent='Your six writing fields were cleared and both own assessments are Unknown. Teaching tasks are unchanged.';$('own-goal').focus();});show();})();</script></body></html>