A learning plan for clearer handoffs — Turn a self-chosen skill gap into practice, an evidence request and a review decision that changes the next attempt without treating…

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 learning plan for clearer handoffs</title><style>
:root{color-scheme:light;--ink:#233b36;--muted:#566760;--line:#cdd7ce;--green:#28634e;--paper:#fffef9;--wash:#edf2e9;--gold:#ead5a1}*{box-sizing:border-box}body{margin:0;background:#f3f1e9;color:var(--ink);font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:1120px;margin:auto;padding:30px 32px 60px}h1,h2,h3,p{margin:0}h1{font:clamp(30px,4vw,46px)/1.1 Georgia,serif;letter-spacing:-.025em;margin:8px 0 10px}h2{font:29px/1.2 Georgia,serif}h3{font-size:18px}.eyebrow{font-size:12px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--green)}.intro{color:var(--muted);margin-bottom:23px}.sheet{background:var(--paper);border:1px solid var(--line);border-radius:6px;box-shadow:0 7px 20px #21392e06}.work{display:grid;grid-template-columns:1fr 1.35fr;gap:0;overflow:hidden}.baseline{padding:25px;border-right:1px solid var(--line)}.baseline blockquote{font:25px/1.35 Georgia,serif;margin:12px 0 20px}.rewrite{padding:25px;background:var(--wash)}.rewrite blockquote{font:27px/1.35 Georgia,serif;margin:12px 0 16px}.tag{font-size:12px;font-weight:700;display:inline-block;padding:3px 8px;background:#e7eadd;border-radius:3px}.sources{display:grid;gap:8px;font-size:14px}.sources b{font-size:12px;color:var(--green);margin-right:7px}.small{font-size:14px;color:var(--muted)}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.actions{margin-top:16px}button{font:600 14px/1.3 system-ui;min-height:44px;padding:10px 15px;border:1px solid var(--green);background:var(--green);color:white;border-radius:5px;cursor:pointer}button.secondary{background:var(--paper);color:var(--green)}button[aria-pressed=true]{box-shadow:inset 0 -3px 0 var(--gold)}button:disabled{opacity:.5;cursor:default}:focus-visible{outline:3px solid #b4612b;outline-offset:3px}.criteria{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--line);background:var(--paper)}.criterion{padding:15px 20px}.criterion+.criterion{border-left:1px solid var(--line)}.criterion strong{display:block;font-size:14px}.criterion span{font-size:13px;color:var(--muted)}.note{margin-top:12px;font-size:14px;color:var(--muted)}.mock{border-left:3px solid #a77d38;padding-left:12px;margin-top:12px;color:#69502b;font-size:14px}.sectionhead{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:38px 0 18px}.editor{display:grid;grid-template-columns:1fr 1fr;gap:24px}.panel{padding:24px}.fields{display:grid;gap:15px;margin-top:18px}label{display:block;font-size:14px;font-weight:650}input,textarea{display:block;width:100%;margin-top:6px;padding:10px 11px;border:1px solid #9daea2;border-radius:4px;background:#fff;color:var(--ink);font:16px/1.45 system-ui}textarea{min-height:82px;resize:vertical}input[aria-invalid=true],textarea[aria-invalid=true]{border:2px solid #9e3526}.error{color:#9e3526;font-size:14px;min-height:22px;margin-top:10px}.timeline{list-style:none;padding:0;margin:19px 0 0;counter-reset:phase}.timeline li{position:relative;padding:0 0 22px 39px;border-left:1px solid #bdcbbb;margin-left:12px;counter-increment:phase}.timeline li:before{content:counter(phase);position:absolute;left:-13px;top:0;background:var(--wash);border:1px solid #aabca9;width:25px;height:25px;display:grid;place-items:center;font-size:12px;border-radius:50%}.timeline li:last-child{border:0;padding-bottom:0}.timeline input{font-size:14px}.timeline p{font-size:14px;margin:4px 0 8px}.status{background:var(--wash);padding:16px;border-left:4px solid var(--green);margin-top:18px}.status p{margin-top:6px;font-size:14px}.status ul{padding-left:22px;margin:8px 0;font-size:14px}details{border-top:1px solid var(--line);margin-top:24px;padding-top:18px}summary{cursor:pointer;font-weight:700;min-height:44px}details .fields{padding:8px 0}.preview{margin-top:25px;padding:24px}.preview textarea{min-height:300px;background:#fafbf5;font:14px/1.6 ui-monospace,Consolas,monospace}.preview .row{justify-content:space-between}.footer{margin-top:25px;font-size:13px;color:var(--muted);max-width:80ch}a{color:var(--green)}[hidden]{display:none!important}@media(max-width:760px){main{padding:22px 20px 40px}.work,.editor{grid-template-columns:1fr}.baseline{border-right:0;border-bottom:1px solid var(--line)}.baseline,.rewrite{padding:20px}.baseline blockquote{font-size:22px;margin:8px 0 14px}.rewrite blockquote{font-size:25px}.sectionhead{display:block}.sectionhead p{margin-top:8px}.panel,.preview{padding:20px}.criterion{padding:12px}.sources{gap:5px}}@media(max-width:420px){main{padding:20px 14px}.criteria{grid-template-columns:1fr}.criterion{padding:8px 18px}.criterion+.criterion{border-left:0;border-top:1px solid var(--line)}.criterion strong{display:inline;margin-right:5px}.row button{flex:1}.rewrite blockquote{font-size:23px}.sectionhead{margin-top:29px}.panel,.preview{padding:17px}}
</style></head><body><main>
<header><p class="eyebrow">Learning plan · LP01</p><h1>Make the next handoff clearer.</h1><p class="intro">Connect one writing goal to practice, feedback, and a different brief.</p></header>
<section class="sheet" aria-label="Fictional worked example">
<div class="work"><div class="baseline"><span class="tag">Fictional baseline · B1</span><blockquote>“Send the draft soon.”</blockquote><p class="small">No named deliverable, exact date, or dependency status.</p><div class="sources" style="margin-top:18px"><div><b>R1</b>Two-page event outline</div><div><b>R2</b>Due October 23, 2026</div><div><b>R3</b>Room capacity unconfirmed</div></div></div>
<div class="rewrite"><span class="tag" id="example-label">Fictional first rewrite · H1</span><blockquote id="example-result" aria-live="polite">Deliver the two-page event outline by October 23, 2026; room capacity is not confirmed.</blockquote><p id="example-observation" class="small">3 of 3 supplied criteria are stated. This is a worked model, not evidence of a learner’s ability.</p><div class="row actions"><button type="button" id="show-h1" aria-pressed="true">First rewrite</button><button type="button" id="show-h2" class="secondary" aria-pressed="false">Apply mock feedback</button></div><div id="mock-feedback" class="mock" hidden><b>Mock feedback F1:</b> Who will confirm room capacity, and when?<br>The owner and confirmation date remain unknown.</div></div></div>
<div class="criteria"><div class="criterion"><strong>C1 · Deliverable</strong><span>B1 missing → H1 present · R1</span></div><div class="criterion"><strong>C2 · Exact due date</strong><span>B1 missing → H1 present · R2</span></div><div class="criterion"><strong>C3 · Dependency</strong><span>B1 missing → H1 present · R3</span></div></div></section>
<p class="note">These local presence checks do not establish quality, approval, complete scope, or skill transfer.</p>
<div class="sectionhead"><h2>Your practice cycle</h2><p class="small">Planned actions below; actual evidence starts blank.</p></div>
<div class="editor"><section class="sheet panel"><p class="eyebrow">01 · Planned</p><h3>Choose what to work on</h3><div class="fields">
<label for="need">Your development need<input id="need" maxlength="500" placeholder="Name your own gap or situation"></label>
<label for="goal">Observable goal <span class="small">(required)</span><textarea id="goal" maxlength="1200">Write a client handoff that states the deliverable, exact due date, and unresolved dependency or confirmed none.</textarea></label>
<label for="strength">Strength to build on<input id="strength" maxlength="500" placeholder="Add your own strength"></label>
<label for="guidance">Your handoff guidance · source and version<input id="guidance" maxlength="500" placeholder="TO CONFIRM"></label>
<label for="question">Question to ask a reviewer <span class="small">(required)</span><textarea id="question" maxlength="1200">What would you need to start the room layout?</textarea></label>
<label for="reviewer">Reviewer to approach<input id="reviewer" maxlength="300" placeholder="Unassigned"></label>
<label for="review-date">Planned review date<input id="review-date" type="date"></label></div></section>
<section class="sheet panel"><p class="eyebrow">02 · Practice & evidence</p><h3>Make an artifact at every step</h3><ol class="timeline">
<li><strong>P1 · Read current guidance</strong><p>Retain the reference/version and note which expectations apply.</p><label for="p1">Planned timing<input id="p1" maxlength="200" value="Before the first rewrite"></label></li>
<li><strong>P2 · Write your first handoff</strong><p>Use R1–R3 above. Keep your attempt separate from the model.</p><label for="p2">Planned timing<input id="p2" maxlength="200" value="After reading the guidance"></label></li>
<li><strong>P3 · Ask for feedback</strong><p>Retain the actual response, its source, date, and artifact reference.</p><label for="p3">Planned timing<input id="p3" maxlength="200" value="After the first attempt"></label></li>
<li><strong>P4 · Revise, then try a new brief</strong><p>Retain what changed and why. Use a different supplied brief for H3.</p><label for="p4">Planned timing<input id="p4" maxlength="200" value="After receiving actual feedback"></label></li></ol>
<div class="status"><strong id="evidence-heading">Request missing evidence</strong><p id="evidence-next">Start by attaching your own baseline and first attempt.</p><ul id="missing-list"></ul></div>
</section></div>
<details id="actual-record"><summary>03 · Add your actual evidence — blank until you supply it</summary><p class="small">Record what happened. A model sentence or mock response is not received evidence.</p><div class="editor"><div class="fields">
<label for="baseline">Your baseline · artifact and source/context<textarea id="baseline" maxlength="3000"></textarea></label>
<label for="resource-note">Guidance used · reference, completion date, applicable expectations<textarea id="resource-note" maxlength="2000"></textarea></label>
<label for="attempt">Your first attempt · H1<textarea id="attempt" maxlength="3000"></textarea></label>
<label for="feedback">Received feedback · response, reviewer/source, date, artifact reference<textarea id="feedback" maxlength="3000"></textarea></label>
</div><div class="fields">
<label for="revision">Your revision · H2, what changed and why<textarea id="revision" maxlength="3000"></textarea></label>
<label for="new-brief">Different brief for H3 · material and source<textarea id="new-brief" maxlength="3000"></textarea></label>
<label for="transfer">Your independent H3 attempt · note any prompting<textarea id="transfer" maxlength="3000"></textarea></label>
<label for="reflection">Review notes · independent work, prompting, missing information<textarea id="reflection" maxlength="2000"></textarea></label>
</div></div></details>
<section class="sheet preview" aria-label="Personal plan preview"><div class="row"><div><p class="eyebrow">Your personal record</p><h2>Plan to take into practice</h2></div><button id="select-text" type="button" class="secondary">Select text</button></div><p class="small" style="margin-top:10px">Copy the selected text manually into your own document. Fictional examples are excluded.</p><p id="plan-error" class="error" role="alert"></p><label for="plan-text">Current plan · plain text<textarea id="plan-text" readonly spellcheck="false"></textarea></label><p id="select-status" class="small" role="status"></p></section>
<footer class="footer"><p>This HTML companion keeps edits only in this open page. Copy your personal record before leaving. It does not create a DOCX, send requests, assess writing, or record course completion. Filled evidence fields still need human review; attendance and a guided revision do not establish transfer.</p><p style="margin-top:12px">Structure reference: Princeton HR’s learning-plan guidance. Keep the fictional LP01 example/key separate from your personal record.</p></footer>
</main><script>
'use strict';
const $=id=>document.getElementById(id);
const h1='Deliver the two-page event outline by October 23, 2026; room capacity is not confirmed.';
function showExample(revised){
 $('example-label').textContent=revised?'Fictional revision · H2':'Fictional first rewrite · H1';
 $('example-result').textContent=h1+(revised?' Capacity owner and confirmation date: TO CONFIRM.':'');
 $('example-observation').textContent=revised?'All three criteria remain stated. The missing owner and date are exposed, not invented.':'3 of 3 supplied criteria are stated. This is a worked model, not evidence of a learner’s ability.';
 $('mock-feedback').hidden=!revised;
 $('show-h1').setAttribute('aria-pressed',String(!revised));$('show-h2').setAttribute('aria-pressed',String(revised));
}
const fields=['need','goal','strength','guidance','question','reviewer','review-date','p1','p2','p3','p4','baseline','resource-note','attempt','feedback','revision','new-brief','transfer','reflection'];
const evidenceFields=[['baseline','Baseline artifact and source/context'],['resource-note','Guidance used and applicable expectations'],['attempt','Your first attempt'],['feedback','Received feedback with source, date, and artifact reference'],['revision','Your revision and reason for change'],['new-brief','Different brief and source for H3'],['transfer','Independent H3 attempt'],['reflection','Review notes']];
function collect(){return Object.fromEntries(fields.map(id=>[id,$(id).value.trim()]));}
function buildRecord(v){
 const missing=evidenceFields.filter(([id])=>!v[id]).map(([,name])=>name);
 const invalid=['goal','question'].filter(id=>!v[id]);
 if(invalid.length)return{invalid,missing,text:''};
 const val=id=>v[id]||'[not supplied]';
 const heading=missing.length?'Request missing evidence':'Ready for a human evidence review';
 const next=missing.length?'Next: supply '+missing[0].toLowerCase()+'.':'Compare the artifacts with C1–C3 and the supplied briefs; decide whether to continue practice, revise the next task, or request evidence. No goal achievement is inferred.';
 const text=['PERSONAL LEARNING PLAN','PLANNED','Development need: '+val('need'),'Strength: '+val('strength'),'Goal: '+val('goal'),'Criteria: C1 named deliverable; C2 exact due date; C3 unresolved dependency or confirmed none, each traced to supplied evidence. Presence is not a quality or mastery grade.','Guidance source/version: '+val('guidance'),'P1 Read guidance; retain reference and applicable expectations. Timing: '+val('p1'),'P2 Write first handoff from supplied brief; retain actual attempt. Timing: '+val('p2'),'P3 Request review; retain actual response, source/date, artifact reference. Timing: '+val('p3'),'Reviewer question: '+val('question'),'Reviewer to approach: '+val('reviewer'),'P4 Revise using feedback, then write from a different supplied brief. Timing: '+val('p4'),'Planned review date: '+val('review-date'),'','OBSERVED — USER-SUPPLIED RECORD',...evidenceFields.map(([id,name])=>name+': '+val(id)),'','EVIDENCE REVIEW',heading,next,missing.length?'Missing records: '+missing.join('; '):'Field presence only; contents have not been verified.','No fictional baseline, model answer, or mock feedback is included in this personal record.'].join('\n');
 return{invalid,missing,text,heading,next};
}
function update(){
 const r=buildRecord(collect());
 ['goal','question'].forEach(id=>$(id).setAttribute('aria-invalid',String(r.invalid.includes(id))));
 $('plan-error').textContent=r.invalid.length?'Enter '+r.invalid.map(id=>id==='goal'?'an observable goal':'a reviewer question').join(' and ')+'. The plan preview is cleared until both are supplied.':'';
 $('plan-text').value=r.text;$('select-text').disabled=!!r.invalid.length;$('select-status').textContent='';
 $('evidence-heading').textContent=r.invalid.length?'Plan needs required fields':r.heading;
 $('evidence-next').textContent=r.invalid.length?'Add the required goal and reviewer question to rebuild your plan.':r.next;
 $('missing-list').replaceChildren();
 r.missing.forEach(name=>{const li=document.createElement('li');li.textContent=name;$('missing-list').appendChild(li);});
}
$('show-h1').addEventListener('click',()=>showExample(false));$('show-h2').addEventListener('click',()=>showExample(true));
fields.forEach(id=>$(id).addEventListener('input',update));
$('select-text').addEventListener('click',()=>{$('plan-text').focus();$('plan-text').select();$('select-status').textContent='Text selected. Use your device’s copy command, then paste into your own document.';});
update();
</script></body></html>