Keep the inconvenient fact in the claim

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html>
<html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Keep the inconvenient fact in the claim</title><style>*{box-sizing:border-box}body{margin:0;background:#f3f4f2;color:#202c32;font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:1120px;margin:auto;padding:30px 28px 60px}header{margin-bottom:22px}.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:750;color:#59676b}h1{font-size:clamp(25px,4vw,36px);line-height:1.15;letter-spacing:-.035em;margin:7px 0 10px}h2{font-size:21px;line-height:1.3;margin:0 0 16px}h3{font-size:17px;margin:0 0 10px}p{margin:8px 0 16px}label{display:block;font-size:14px;font-weight:650;margin:12px 0 5px}input,select,textarea,button{font:inherit}input,select,textarea{width:100%;min-width:0;border:1px solid #b6c0bf;border-radius:7px;background:#fff;color:#202c32;padding:10px 12px}textarea{resize:vertical;min-height:88px}input[type=checkbox]{width:18px;height:18px;vertical-align:middle;margin-right:8px}button{border:1px solid #b8c3c1;border-radius:7px;padding:10px 15px;background:#fff;color:#203632;font-weight:650;cursor:pointer}button.primary{background:#243f3c;color:white;border-color:#243f3c}button:hover{filter:brightness(.95)}button:disabled{opacity:.48;cursor:not-allowed}:focus-visible{outline:3px solid #b05814;outline-offset:3px}.buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.panel{background:#fff;border:1px solid #d7ddda;border-radius:12px;padding:24px}.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px}.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.result{background:#e4eee8;border:1px solid #c5d6ca;border-radius:12px;padding:28px}.big{font-size:clamp(32px,5vw,56px);font-weight:740;line-height:1.14;letter-spacing:-.04em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.muted{color:#59686a;font-size:14px}.tag{display:inline-block;background:#edf0ed;border-radius:4px;padding:3px 8px;font-size:12px;font-weight:700}.error{color:#9d301b;font-weight:650;min-height:24px;margin-top:10px}.note{border-left:3px solid #9a794a;padding:10px 15px;background:#faf5e9;margin:18px 0}.below{margin-top:28px}.record{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;background:#f2f4f1;padding:18px;border-radius:8px}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;vertical-align:top;border-bottom:1px solid #dce1dd;padding:12px 10px;overflow-wrap:anywhere}th{color:#59686a;font-size:12px}a{color:#2c5a6a;overflow-wrap:anywhere}details{margin-top:20px}summary{cursor:pointer;font-weight:650}hr{border:0;border-top:1px solid #d6dcd6;margin:22px 0}[hidden]{display:none!important}ol,ul{padding-left:23px}.statline{display:flex;gap:20px;flex-wrap:wrap;margin:18px 0}.statline strong{display:block;font-size:24px}.inline{display:flex;align-items:center;gap:8px}.inline label{margin:0} .blank{min-height:36px;border-bottom:1px dashed #aebbb5;color:#66736d;font-size:13px;padding:8px 0}@media(max-width:720px){main{padding:22px 18px 45px}.split{grid-template-columns:1fr}.panel,.result{padding:20px}.row{gap:12px}th,td{padding:10px 6px}}@media(max-width:400px){main{padding:18px 14px 40px}.big{font-size:34px}button{padding:10px 12px}.row{grid-template-columns:1fr}.panel,.result{padding:17px}}.inline{flex-wrap:wrap}.metric{font-size:clamp(29px,4vw,44px);font-weight:750;line-height:1.2;letter-spacing:-.025em;font-variant-numeric:tabular-nums}.strip{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}.caption{font-size:13px;color:#5d6b6f}.tag.warn{background:#f7e9ce;color:#795323}.tag.good{background:#e4ebe4;color:#344f3e}pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}button[aria-pressed=true]{background:#304b51;color:white}.fieldNote{font-size:13px;color:#5e6a6d;margin:5px 0}.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.docHeader{display:flex;gap:24px;justify-content:space-between;align-items:start;flex-wrap:wrap;border-bottom:2px solid #445a58;padding-bottom:20px}.docHeader h2{margin:0}.money{font-variant-numeric:tabular-nums;white-space:nowrap}.statusBand{padding:17px 22px;border-radius:8px;background:#f5ead5;color:#654c2c;font-weight:650}.statusBand p{font-size:14px;font-weight:400;margin:5px 0 0}.blankLine{border-bottom:1px dashed #b6bfb8;min-height:38px}.evidenceRow{display:grid;grid-template-columns:1fr 1fr;gap:18px;border-top:1px solid #dce1dc;padding:18px 0}.checklabel{font-weight:400;margin:10px 0}.subtle{background:#f4f6f3}.downloadStatus{font-size:13px;min-height:22px;color:#49645a}@media(max-width:650px){.three{grid-template-columns:1fr}.evidenceRow{grid-template-columns:1fr}.metric{font-size:32px}}.model{padding:25px 28px;border:1px solid #d4d5c3;background:#f4f1df;border-radius:12px}.modelParagraph{font:21px/1.7 Georgia,"Times New Roman",serif;max-width:850px;margin:16px 0}.model mark{background:#e6dfb1;color:inherit;padding:2px 0}.model .traced{outline:2px solid #a18734;outline-offset:2px;background:#f8e99f}.factGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.factGrid button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:12px;padding:20px;font-weight:400;line-height:1.5}.factGrid strong{font-size:13px;letter-spacing:.1em}.factGrid button[aria-pressed=true]{background:#e4ece6;color:#263b31;border-color:#7f9689}@media(max-width:650px){.factGrid{grid-template-columns:1fr}.factGrid button{flex-direction:row;gap:20px;padding:15px}.model{padding:20px}.modelParagraph{font-size:19px}}</style></head><body><main><header><div class="eyebrow">Language arts · Fictional library brief · 40 minutes</div><h1>Keep the inconvenient fact in the claim</h1></header>
<div class="buttons"><button id="teacher" aria-pressed="true">Teacher model</button><button id="learner" aria-pressed="false">Learner organizer</button></div><section id="teacherView" class="model below"><span class="eyebrow">Model recommendation · Audience: display coordinator</span><p class="modelParagraph">I recommend the movable table for the four-person caption activity <mark data-fact="F03">only after a location that keeps the aisle clear is confirmed</mark>. <span data-fact="F01">F01 says it seats four, so it can provide a place for each participant.</span> <span data-fact="F02">The counter alone seats two, according to F02.</span> <span data-fact="F03">However, F03 says the table blocks the aisle beside the door, so that placement should not be used for this recommendation.</span></p><p class="caption">Original teacher model · A suitable location remains unconfirmed.</p></section>
<section id="learnerView" class="panel below" hidden><h2>Recommend a setup for four participants</h2><p>Write to the display coordinator. Use the supplied facts and state what still needs checking.</p><label for="claim">Claim · What do you recommend?</label><textarea id="claim"></textarea><label for="evidence">Evidence · Which fact IDs support it?</label><textarea id="evidence"></textarea><label for="reason">Reason · How do the facts help this audience decide?</label><textarea id="reason"></textarea><label for="limit">Limit and action · What does F03 require you to change or check?</label><textarea id="limit"></textarea><label for="paragraph">Your paragraph</label><textarea id="paragraph" rows="5"></textarea></section>
<section class="factGrid below" aria-label="Supplied fictional fact cards"><button data-fact="F01" id="fact1" aria-pressed="false"><strong>F01</strong><span>A movable table seats four people.</span></button><button data-fact="F02" id="fact2" aria-pressed="false"><strong>F02</strong><span>A fixed counter seats two people.</span></button><button data-fact="F03" id="fact3" aria-pressed="false"><strong>F03</strong><span>The table blocks the aisle if placed beside the door.</span></button></section><p id="factStatus" class="muted" role="status">Select a fact to trace its use in the teacher model.</p>
<section class="panel below"><h2>40-minute teaching sequence</h2><label for="phase">Review an instruction block</label><select id="phase"><option value="0">0–5 · Brief and audience</option><option value="1">5–12 · Model claim versus fact</option><option value="2">12–22 · Select support and explain</option><option value="3">22–32 · Draft with the limit</option><option value="4">32–37 · Peer check</option><option value="5">37–40 · Revision exit response</option></select><div id="phaseDetail" class="record below"></div><p class="muted">5 + 7 + 10 + 10 + 5 + 3 = 40 minutes. Class level, required standards and access/vocabulary needs are TO CONFIRM.</p></section>
<section class="panel below"><h2>Revise the overclaim</h2><p><strong>Original attempt:</strong> “The table is perfect, so put it beside the door.”</p><div class="teacherOnly"><p><strong>Teacher model revision:</strong> Use the table only after confirming a location that keeps the aisle clear.</p><p class="muted">F03 changes the recommendation itself; a fancier adjective does not resolve the conflict.</p></div><label for="revision">Learner revision · retain the original attempt above</label><textarea id="revision"></textarea><label for="exit">Exit explanation · What fact forced you to change?</label><textarea id="exit"></textarea><h3 class="below">Peer/teacher review prompts</h3><ul><li>Does it address the coordinator and four-person task?</li><li>Do cited facts match the cards?</li><li>Does the reasoning connect facts to the recommendation?</li><li>Does F03 survive as a condition or unresolved placement question?</li><li>Does it avoid inventing a confirmed location or extra resources?</li></ul><div class="buttons"><button id="download">Show blank learner handout to copy</button></div><p id="feedback" class="downloadStatus" role="status"></p><p class="muted">Defensible alternatives, including waiting for placement confirmation, can meet these criteria. There is no single opinion key, automatic writing grade or room-clearance claim. Actual learner records belong in the school workflow.</p><a href="https://www.readwritethink.org/sites/default/files/resources/lesson_images/lesson1137/elements.pdf">Position, audience and factual support reference</a></section><footer class="muted below">Local review copy · Edits last only while this page is open.</footer></main><script data-app>
(()=>{
const $=id=>document.getElementById(id);const text=(id,v)=>$(id).textContent=String(v);const on=(id,type,fn)=>$(id).addEventListener(type,fn);const escapeHTML=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));const money=n=>'$'+(n/100).toFixed(2);const quantity=(s,integer=false)=>{s=String(s).trim();if(!(integer?/^[0-9]+$/:/^[0-9]+(?:[.][0-9]{1,2})?$/).test(s)||!Number.isFinite(+s)||+s>100000)throw Error('Enter a nonnegative '+(integer?'whole number':'number with at most two decimals')+' up to 100,000. Blank is missing.');return +s};const cents=s=>Math.round(quantity(s)*100);const download=(filename,content,type='text/plain')=>{let panel=document.getElementById('manualCopyPanel');if(!panel){panel=document.createElement('section');panel.id='manualCopyPanel';panel.className='panel below';panel.style.cssText='max-width:100%;margin:24px 0';const heading=document.createElement('h2');heading.id='manualCopyName';const hint=document.createElement('p');hint.textContent='Select the content below, then press Ctrl+C or Command+C to copy it into your own file. This preview does not download files.';const area=document.createElement('textarea');area.id='manualCopyContent';area.readOnly=true;area.rows=12;area.spellcheck=false;area.setAttribute('aria-label','Generated file content to copy');area.style.cssText='display:block;width:100%;max-width:100%;box-sizing:border-box;font:13px/1.5 ui-monospace,monospace';const select=document.createElement('button');select.type='button';select.id='manualCopySelect';select.textContent='Select content';select.addEventListener('click',()=>{area.focus();area.select();});panel.append(heading,hint,area,select);(document.querySelector('main')||document.body).append(panel);}document.getElementById('manualCopyName').textContent=String(filename);const area=document.getElementById('manualCopyContent');area.value=String(content);area.dataset.mimeType=String(type);panel.scrollIntoView({block:'nearest'});area.focus();area.select();};

const phases=[{minutes:5,instruction:'Read the brief and identify the coordinator’s question.',collect:'Audience and task in the learner’s own words.'},{minutes:7,instruction:'Model the distinction between a recommendation and a supplied fact.',collect:'Claim, evidence, reason and limit with fact IDs.'},{minutes:10,instruction:'Ask which fact supports the sentence and how it helps the coordinator decide.',collect:'Evidence-and-reason notes that include F03.'},{minutes:10,instruction:'Draft a recommendation retaining the placement condition.',collect:'Original learner paragraph.'},{minutes:5,instruction:'Exchange drafts for a fact-and-limit check.',collect:'Peer comment linked to a sentence and fact ID.'},{minutes:3,instruction:'Explain one revision that a supplied fact required.',collect:'Earlier wording, revised wording and reason for change.'}],facts={F01:'A movable table seats four people.',F02:'A fixed counter seats two people.',F03:'The table blocks the aisle if placed beside the door.'};let mode='teacher';
function setView(v){if(!['teacher','learner'].includes(v))throw Error('Unknown view');mode=v;for(const id of ['teacher','learner'])$(id).setAttribute('aria-pressed',String(id===v));$('teacherView').hidden=v!=='teacher';$('learnerView').hidden=v!=='learner';document.querySelectorAll('.teacherOnly').forEach(el=>el.hidden=v!=='teacher');text('factStatus',v==='learner'?'Use all relevant facts; actual learner writing remains your own.':'Select a fact to trace its use in the teacher model.')}
function selectFact(id){if(!Object.hasOwn(facts,id))throw Error('Unknown fact');document.querySelectorAll('.factGrid button').forEach(b=>b.setAttribute('aria-pressed',String(b.dataset.fact===id)));document.querySelectorAll('#teacherView [data-fact]').forEach(el=>el.classList.toggle('traced',el.dataset.fact===id));text('factStatus',id+': '+facts[id]+(mode==='teacher'?' Its authored use is highlighted in the model.':' Use this fact in your own reasoning; the teacher model remains hidden.'))}
function handout(){return '<!doctype html><html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Recommendation writing · Learner handout</title><style>body{font:17px/1.6 system-ui;max-width:780px;margin:24px auto;padding:20px;color:#283a3a}.blank{min-height:90px;border-bottom:1px solid #98a7a0}h1{line-height:1.2}</style></head><body><h1>Write a recommendation with its limit</h1><p>Audience: library display coordinator. Task: recommend a setup for a four-person caption activity and explain what still needs checking.</p>'+Object.entries(facts).map(([id,f])=>'<p><strong>'+id+'</strong> '+f+'</p>').join('')+['Claim','Evidence and fact IDs','Reason','Limit and action','Your paragraph'].map(label=>'<h2>'+label+'</h2><div class="blank"></div>').join('')+'<p>Original attempt to revise: The table is perfect, so put it beside the door.</p><h2>Your revision and explanation</h2><div class="blank"></div><p>Check the audience, accurate facts, reasons and F03’s limitation. No confirmed alternate location is supplied.</p></body></html>'}
on('teacher','click',()=>setView('teacher'));on('learner','click',()=>setView('learner'));for(const id of ['fact1','fact2','fact3'])on(id,'click',()=>selectFact($(id).dataset.fact));on('phase','change',()=>{const p=phases[Number($('phase').value)];text('phaseDetail',p.minutes+' minutes\nInstruction: '+p.instruction+'\nWork to collect: '+p.collect)});on('download','click',()=>{download('recommendation-learner-handout.html',handout(),'text/html');text('feedback','Blank learner handout shown below for manual copying; teacher model answers are excluded.')});window.app={phases,setView,selectFact,handout};$('phase').dispatchEvent(new Event('change'));setView('teacher');
})();
</script></body></html>