A letter as evidence • source-analysis lesson — Guide learners to identify a historical document's author, recipient, date and purpose, support one interpretation from the source and…

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>A letter as evidence • source-analysis lesson</title><style>*{box-sizing:border-box}body{margin:0;background:var(--bg,#f3f7fa);color:var(--ink,#203342);font:16px/1.55 system-ui,Segoe UI,sans-serif}main{max-width:1100px;margin:auto;padding:28px 30px 50px}h1{font-size:clamp(27px,3.5vw,40px);line-height:1.18;letter-spacing:-.035em;margin:8px 0 12px}h2{font-size:21px;line-height:1.35;margin:0 0 16px}h3{font-size:18px}.eyebrow{color:var(--accent,#176783);font-size:12px;letter-spacing:.12em;font-weight:800;text-transform:uppercase}.intro,.muted,small{color:#516272}.intro{margin:0 0 24px}.panel{padding:24px;border:1px solid var(--line,#d6e0e7);border-radius:12px;background:white;margin:18px 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.grid>*{min-width:0}.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}button,input,textarea,select{font:inherit}button{border:1px solid var(--accent,#176783);background:var(--accent,#176783);color:white;padding:10px 16px;min-height:44px;border-radius:7px;font-weight:700;cursor:pointer}button.secondary{background:white;color:var(--accent,#176783)}button[aria-pressed=true]{background:var(--tint,#e3f2f8);color:var(--ink,#203342);box-shadow:inset 0 0 0 2px var(--accent,#176783)}button:hover{filter:brightness(.96)}:focus-visible{outline:3px solid #d56b00;outline-offset:3px}label{display:block;margin:12px 0 5px;font-size:14px;font-weight:650}input:not([type=checkbox]),select,textarea{width:100%;padding:10px 12px;min-height:44px;border:1px solid #94a5b2;background:white;color:inherit;border-radius:7px}textarea{resize:vertical;min-height:120px}input[type=checkbox]{width:20px;height:20px;margin-right:9px}label.inline{display:flex;align-items:center;font-weight:500;gap:7px}.result{padding:24px;background:var(--tint,#e3f2f8);border:1px solid var(--line,#c8dce7);border-radius:12px}.big{font-size:clamp(30px,5vw,48px);font-weight:780;line-height:1.25;letter-spacing:-.035em;margin:10px 0}.trace{font:15px/1.7 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.error{color:#a12820;font-weight:650;min-height:24px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:15px}th,td{text-align:left;border-bottom:1px solid var(--line,#d6e0e7);padding:12px 9px;vertical-align:top}th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:#516272}code,pre,.code{font:14px/1.65 ui-monospace,Consolas,monospace}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--tint,#eef3f7);padding:16px;border-radius:6px}details{border-top:1px solid var(--line,#d6e0e7);margin:24px 0;padding-top:16px}summary{cursor:pointer;font-weight:700;min-height:44px}footer{border-top:1px solid var(--line,#d6e0e7);margin-top:26px;padding-top:16px;font-size:13px;color:#516272}.bar{height:16px;background:#dce4ea;border-radius:20px;overflow:hidden;margin:12px 0}.bar span{display:block;height:100%;background:var(--accent,#176783)}[hidden]{display:none!important}@media(max-width:720px){main{padding:20px}.grid{grid-template-columns:1fr;gap:12px}.panel,.result{padding:20px}}@media(max-width:400px){main{padding:16px}.panel,.result{padding:16px}button{padding:10px 13px}} .paper{background:white;padding:26px;border:1px solid var(--line,#d6e0e7)}.badge{display:inline-block;padding:4px 10px;border-radius:20px;background:var(--tint,#e3f2f8);font-size:13px;font-weight:700}.feedback{padding:18px;background:var(--tint,#e3f2f8);border-left:4px solid var(--accent,#176783);line-height:1.7}.schedule-row{display:grid;grid-template-columns:70px 1fr 90px;gap:14px;padding:16px 0;border-bottom:1px solid var(--line,#d6e0e7);align-items:start}.schedule-row label{margin:0}.schedule-row small{display:block;margin-top:6px}.schedule-row b{font-size:17px}.schedule-time{font-weight:700;font-variant-numeric:tabular-nums}.export{margin:24px 0}.export textarea{min-height:180px}.choice-list{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.choice-list button{background:white;color:var(--ink,#203342);border-color:var(--line,#94a5b2)}@media(max-width:400px){.schedule-row{grid-template-columns:48px 1fr 65px;gap:9px}.schedule-row input{padding:8px}}
body{--accent:#7c4032;--bg:#f6f3ef;--ink:#3b302b;--tint:#f1e3d9;--line:#dfd3c8}.source-cover{background:white;border:1px solid #dfd3c8;padding:26px;border-top:5px solid #7c4032}.source-cover h2{font:clamp(24px,3vw,32px)/1.3 Georgia,serif;margin:17px 0 4px}.source-date{font:20px Georgia,serif;margin:8px 0 20px}.source-cover .grid{gap:26px}.source-cover p{font-size:15px}.provenance{color:#63564d;font-size:13px!important}blockquote{font:22px/1.5 Georgia,serif;margin:12px 0;border-left:3px solid #b38b66;padding-left:15px}.panel{border-radius:4px}.paper{border-top:5px solid #b38b66}#claim{font:25px/1.4 Georgia,serif}@media(max-width:720px){.source-cover .grid{grid-template-columns:1fr 1fr;gap:16px}.source-cover{padding:20px}.source-cover p{font-size:14px}blockquote{font-size:19px}}@media(max-width:400px){.source-cover .grid{grid-template-columns:1fr}.source-cover{padding:16px}.provenance{font-size:12px!important}}</style></head><body><main>
<header><span class="eyebrow">Source-analysis workshop / 40-minute plan</span><h1>What can one page establish?</h1><p class="intro">Support one interpretation of a historical letter and name a precise question that needs another source.</p></header>
<section class="source-cover"><span class="badge">FIRST PAGE ONLY · ends mid-sentence</span><h2>Jackie Robinson → President Dwight D. Eisenhower</h2><p class="source-date">May 13, 1958</p><div class="grid"><div><p><b>Page evidence</b><br>The dated line and presidential addressee appear on the page. Later markings are separate from the letter date.</p><blockquote>“We want to enjoy now the rights”</blockquote><small>Short excerpt from the first page; not a full transcription.</small></div><div><p><b>Archive description</b><br>Identifies Jackie Robinson as author and gives the archival location.</p><p class="provenance">White House Central Files · Box 731 · File OF-142-A-3<br>Dwight D. Eisenhower Library · National Archives and Records Administration</p></div></div></section>
<nav class="controls" aria-label="Workshop view"><button type="button" id="learner" class="secondary">Learner workshop</button><button type="button" id="teacher" class="secondary">Teacher plan & guidance</button></nav>
<section id="learner-work"><section class="panel"><span class="eyebrow">Test the boundary of the source</span><h2 id="claim"></h2><div class="controls"><button type="button" id="claim-public" class="secondary">Public opinion</button><button type="button" id="claim-response" class="secondary">Presidential response</button><button type="button" id="claim-outcome" class="secondary">Later outcome</button></div><div class="choice-list"><button type="button" id="supported" class="secondary">Established by this page</button><button type="button" id="unestablished" class="secondary">Not established by this page</button><button type="button" id="false" class="secondary">Proven false by this page</button></div><div class="controls"><button type="button" id="check-claim">Check the evidence boundary</button><button type="button" id="retry" class="secondary">Clear choice</button></div><p id="claim-feedback" class="feedback" aria-live="polite">Choose an evidence judgment.</p></section>
<section class="paper"><h2>Your individual claim sheet</h2><p>Use a passage location and your own reasoning. This page assembles your draft; a teacher reviews the historical interpretation.</p><label for="interpretation">Interpretation — your supported claim</label><textarea id="interpretation" rows="3"></textarea><label for="passage">Supporting passage location</label><input id="passage" type="text" value="" ><label for="reasoning">How that passage supports your claim</label><textarea id="reasoning" rows="3"></textarea><label for="limit">A precise limit or unanswered question</label><textarea id="limit" rows="3"></textarea><label for="corroboration">Another source to seek and why</label><textarea id="corroboration" rows="3"></textarea><div class="controls"><button type="button" id="prepare-claim">Prepare learner sheet</button><button type="button" id="clear-sheet" class="secondary">Clear draft</button></div><p id="draft-status" class="error" role="alert"></p><label for="learner-text">Your exact draft — no teacher key</label><textarea id="learner-text" readonly rows="9"></textarea><div class="controls"><button type="button" id="select-learner" class="secondary">Select draft text</button></div><small>Copy selected text manually. Nothing is saved, sent, or graded automatically.</small></section></section>
<section id="teacher-work" hidden><section class="panel"><h2>Lesson sequence</h2><label for="available">Available lesson minutes</label><input id="available" type="number" value="40" ><p class="badge" id="schedule-summary">40-minute plan ready</p><p id="schedule-error" class="error" role="alert"></p><div class="schedule-row"><span id="range-0" class="schedule-time"></span><div><b>Introduce the source</b><p>Identify author, recipient, date, and first-page-only scope. Discuss unfamiliar language in context without changing the source.</p><small>Learner action: State the target: support an interpretation with a specific source part and identify its limits.</small></div><div><label for="mins-0">Minutes</label><input id="mins-0" type="number" value="5" min="1" max="180"></div></div><div class="schedule-row"><span id="range-1" class="schedule-time"></span><div><b>Observe and locate</b><p>Ask whether each note comes from the page or the archive description; supply reading support as needed.</p><small>Learner action: Record the date line, addressee, markings, and a passage location.</small></div><div><label for="mins-1">Minutes</label><input id="mins-1" type="number" value="8" min="1" max="180"></div></div><div class="schedule-row"><span id="range-2" class="schedule-time"></span><div><b>Purpose and evidence</b><p>Ask which response the writer challenges and which part supports that interpretation.</p><small>Learner action: Work in pairs to connect a purpose claim to a specific passage location.</small></div><div><label for="mins-2">Minutes</label><input id="mins-2" type="number" value="10" min="1" max="180"></div></div><div class="schedule-row"><span id="range-3" class="schedule-time"></span><div><b>Limits and corroboration</b><p>Test claims about public opinion, presidential response, and later outcomes without treating absence of evidence as falsity.</p><small>Learner action: Choose an unanswered question and propose another dated, attributable source.</small></div><div><label for="mins-3">Minutes</label><input id="mins-3" type="number" value="10" min="1" max="180"></div></div><div class="schedule-row"><span id="range-4" class="schedule-time"></span><div><b>Individual claim sheet</b><p>Review the link among interpretation, passage, reasoning, limitation, and further source. Record actual evidence only after instruction.</p><small>Learner action: Write one supported interpretation and one question requiring another source.</small></div><div><label for="mins-4">Minutes</label><input id="mins-4" type="number" value="7" min="1" max="180"></div></div></section><section class="panel"><h2>Separate teacher guidance</h2><p>A supported paraphrase is that Robinson objects to calls for patience over civil rights and argues for rights without further waiting. The opening patience discussion and following rights argument support this reading.</p><p>The first page does not establish public consensus, a presidential response, or a later outcome. Seek relevant dated reply correspondence, evidence representing wider views, or dated event records with evidence connecting them to the claim.</p><p>Identify the author from the archive description. Do not ask for a signature absent from the supplied page, interpret unreadable stamps, invent continuation text, or treat a receipt marking as proof of presidential agreement.</p></section><section class="panel export"><h2>Teacher plan text</h2><div class="controls"><button type="button" id="prepare">Prepare text</button><button type="button" id="select-text" class="secondary">Select text</button></div><p id="export-error" class="error" role="alert"></p><label for="export-text">Exact generated plain text</label><textarea id="export-text" readonly rows="9"></textarea><small>Select the text, then copy it manually into your required format. Nothing is saved or sent.</small></section></section>
<details><summary>Source links and reading scope</summary><p><a href="https://www.archives.gov/historical-docs/jackie-robinson-letter">National Archives description</a> · <a href="https://www.archives.gov/files/historical-docs/doc-content/images/jackie-robinson-letter-to-eisenhower.pdf">Original one-page source PDF</a></p><p>The linked PDF is one page and ends during a sentence. Inspect the original page using your teacher’s source view; this local companion supplies identification notes and a short excerpt, not a facsimile or complete transcription. The source has historical language to discuss in context.</p></details>
<footer>Original lesson prompts around an actual archival source. Free-text interpretations are not machine graded. Teacher guidance is excluded from learner draft text. No student evidence, standards compliance, public consensus, reply, or later result is invented.</footer>
</main><script>const $=id=>document.getElementById(id);const on=(id,e,fn)=>$(id).addEventListener(e,fn);const txt=(id,v)=>$(id).textContent=v;const esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));const positive=x=>String(x).trim()!==''&&Number.isFinite(Number(x))&&Number(x)>0;const num=x=>Number(x.toPrecision(10)).toString();function enter(id,fn){on(id,'keydown',e=>{if(e.key==='Enter'&&!e.isComposing&&e.keyCode!==229){e.preventDefault();fn()}})}function selectText(id){$(id).focus();$(id).select()}
const phases=[["Introduce the source", 5, "Identify author, recipient, date, and first-page-only scope. Discuss unfamiliar language in context without changing the source.", "State the target: support an interpretation with a specific source part and identify its limits."], ["Observe and locate", 8, "Ask whether each note comes from the page or the archive description; supply reading support as needed.", "Record the date line, addressee, markings, and a passage location."], ["Purpose and evidence", 10, "Ask which response the writer challenges and which part supports that interpretation.", "Work in pairs to connect a purpose claim to a specific passage location."], ["Limits and corroboration", 10, "Test claims about public opinion, presidential response, and later outcomes without treating absence of evidence as falsity.", "Choose an unanswered question and propose another dated, attributable source."], ["Individual claim sheet", 7, "Review the link among interpretation, passage, reasoning, limitation, and further source. Record actual evidence only after instruction.", "Write one supported interpretation and one question requiring another source."]];

let scheduleValid=false;
function scheduleState(values,available){if(!/^[1-9]\d*$/.test(String(available))||Number(available)>480)throw Error('Available minutes must be a whole number from 1 to 480.');if(values.some(x=>!/^[1-9]\d*$/.test(String(x))||Number(x)>180))throw Error('Each phase needs 1–180 whole minutes.');const total=values.reduce((a,x)=>a+Number(x),0);let start=0;const ranges=values.map(x=>{const s=start;start+=Number(x);return s+'–'+start});return {total,ranges,ready:total===Number(available)}}
function updateSchedule(){try{const s=scheduleState(phases.map((_,i)=>$('mins-'+i).value),$('available').value);scheduleValid=s.ready;phases.forEach((_,i)=>txt('range-'+i,s.ranges[i]));txt('schedule-summary',s.ready?s.total+'-minute plan ready':s.total+' scheduled / '+$('available').value+' available');txt('schedule-error',s.ready?'':'Adjust phase minutes or available time before preparing the plan.')}catch(e){scheduleValid=false;phases.forEach((_,i)=>txt('range-'+i,'—'));txt('schedule-summary','Schedule needs input');txt('schedule-error',e.message)}if($('export-text'))$('export-text').value=''}
function planText(){if(!scheduleValid)throw Error('Resolve the timetable before preparing the plan.');return phases.map((p,i)=>$('range-'+i).textContent+' min · '+p[0]+'\nTeacher: '+p[2]+'\nLearner: '+p[3]).join('\n\n')}
on('available','input',updateSchedule);phases.forEach((_,i)=>on('mins-'+i,'input',updateSchedule));updateSchedule();

const claims={public:{claim:'The public agreed with Robinson.',next:'Seek evidence of wider opinion beyond one writer, and ask whose views it represents.'},response:{claim:'Eisenhower changed his position after receiving this letter.',next:'Seek relevant reply correspondence or other response records; verify dates and provenance.'},outcome:{claim:'This letter produced a particular later outcome.',next:'Seek dated event records and evidence connecting this letter to the claimed outcome.'}};let claimId='public',judgment='';
function claimFeedback(id,j){if(!j)return 'Not answered. Choose an evidence judgment first.';return (j==='unestablished'?'Correct. ':'Reconsider the evidence boundary. ')+claims[id].claim+' Not established by this first page. This does not mean the claim is false. '+claims[id].next}
function clearJudgment(){judgment='';for(const j of ['supported','unestablished','false'])$(j).setAttribute('aria-pressed','false');txt('claim-feedback','Choose an evidence judgment.')}
function showClaim(id){claimId=id;txt('claim',claims[id].claim);for(const key of Object.keys(claims))$('claim-'+key).setAttribute('aria-pressed',String(key===id));clearJudgment()}
for(const id of Object.keys(claims))on('claim-'+id,'click',()=>showClaim(id));for(const j of ['supported','unestablished','false'])on(j,'click',()=>{judgment=j;for(const k of ['supported','unestablished','false'])$(k).setAttribute('aria-pressed',String(k===j));txt('claim-feedback','Choice changed. Check the evidence boundary.')});on('check-claim','click',()=>txt('claim-feedback',claimFeedback(claimId,judgment)));on('retry','click',clearJudgment);
function view(teacher){$('teacher-work').hidden=!teacher;$('learner-work').hidden=teacher;$('teacher').setAttribute('aria-pressed',String(teacher));$('learner').setAttribute('aria-pressed',String(!teacher))}
on('teacher','click',()=>view(true));on('learner','click',()=>view(false));
const sheetFields=['interpretation','passage','reasoning','limit','corroboration'];for(const id of sheetFields)on(id,'input',()=>{$('learner-text').value='';txt('draft-status','Draft changed. Prepare the current sheet.')});
function learnerSheet(values){if(values.some(v=>!v.trim()))throw Error('Complete all five fields, including a passage location and another source to seek.');return 'LEARNER CLAIM SHEET\nJackie Robinson to President Dwight D. Eisenhower | May 13, 1958\nFirst page only; ends mid-sentence. Author from archive description; date from page.\n\nInterpretation: '+values[0]+'\nPassage location: '+values[1]+'\nReasoning: '+values[2]+'\nLimit / unanswered question: '+values[3]+'\nFurther source: '+values[4]+'\n\nDraft for teacher review; not machine graded.'}
on('prepare-claim','click',()=>{try{$('learner-text').value=learnerSheet(sheetFields.map(id=>$(id).value));txt('draft-status','Draft ready for teacher review.')}catch(e){$('learner-text').value='';txt('draft-status',e.message)}});on('clear-sheet','click',()=>{for(const id of sheetFields)$(id).value='';$('learner-text').value='';txt('draft-status','')});on('select-learner','click',()=>selectText('learner-text'));
on('prepare','click',()=>{try{$('export-text').value='SOURCE-ANALYSIS LESSON — TEACHER PLAN\nJackie Robinson to President Dwight D. Eisenhower | May 13, 1958\nFirst page only. Author from archive description, not a signature on this page.\nTarget: support an interpretation with a specific passage and state a source limit.\n\n'+planText()+'\n\nTeacher guidance: objection to calls for patience on civil rights; supporting locations are the opening patience discussion and following rights argument.\nNo public consensus, presidential reply, or later outcome is established.\nActual learner evidence: NOT RECORDED.';txt('export-error','')}catch(e){$('export-text').value='';txt('export-error',e.message)}});on('select-text','click',()=>selectText('export-text'));showClaim('public');view(false);
</script></body></html>