Follow four notes into complete sentences and assemble a focused reading-corner paragraph

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>Reading corner · notes into sentences</title><style>*{box-sizing:border-box}body{margin:0;background:#faf2e6;color:#4c4032;font:16px/1.55 system-ui,sans-serif}main{max-width:960px;margin:auto;padding:24px}h1{font-size:34px;line-height:1.16}h2{font-size:24px}h3{font-size:19px}.eyebrow{letter-spacing:.06em;color:#8a7459}.card{padding:20px;margin:18px 0;background:white;border:1px solid #decdb2;border-radius:6px}.squares{display:grid;grid-template-columns:1fr 1fr;gap:12px}.squares button{text-align:left;background:#fff7df}.squares strong{display:block}.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}button,textarea{font:inherit;color:inherit}button{min-height:44px;padding:10px 14px;background:white;border:1px solid #a18a5c;border-radius:4px;cursor:pointer}button[aria-pressed=true]{background:#93713b;color:white}button:disabled{opacity:.5;cursor:default}button:focus-visible,textarea:focus-visible{outline:3px solid #ae591d;outline-offset:3px}.model{background:#eef5e8;border-left:6px solid #8da366}.sentence-row{padding:14px;margin:12px 0;background:#f4f1e7;border:1px solid #d0c5ab}.sentence-row .tabs{margin-bottom:0}label{display:block;font-weight:650;margin:14px 0 6px}textarea{width:100%;max-width:100%;min-width:0;min-height:90px;padding:10px;border:1px solid #ac9c7e;border-radius:4px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status,#order-status{font-weight:650;color:#80551b}footer{margin:24px 0;color:#84745e}[hidden]{display:none!important}@media(max-width:560px){main{padding:12px}h1{font-size:28px}.card{padding:14px}.squares{grid-template-columns:1fr}}</style></head><body><main><p class="eyebrow">ORIGINAL CLASSROOM MODEL · OUR READING CORNER</p><h1>A note reminds the writer. A sentence tells the reader.</h1><p>Adapted note-to-sentence planning approach described by Jane Meyer, whose modified four-square account credits Judith S. and Evan Jay Gould. This is one adaptable model, not a rule requiring every paragraph to have four details.</p><section class="card"><h2>One topic, four useful notes</h2><p><strong>Topic:</strong> Our reading corner</p><div id="squares" class="squares"></div><h3 id="note-title">By window</h3><p id="sentence">The window gives the corner daylight.</p><p id="explanation">The sentence explains what the window contributes to the corner.</p><div class="tabs"><button id="fragment" type="button" aria-expanded="false" aria-controls="fragment-view">Compare two cushions</button><button id="irrelevant" type="button" aria-expanded="false" aria-controls="irrelevant-view">Consider lunch menu</button></div><section id="fragment-view" class="card" hidden><h3>Fragment → sentence</h3><p>“two cushions” → “Two cushions sit beside the shelf.”</p><p>The sentence adds where the cushions are. It helps a reader picture the space.</p></section><section id="irrelevant-view" class="card" hidden><h3>Set this supplied note aside</h3><p>“Lunch menu” does not help describe this reading corner in the supplied model. Another box is not a reason to add an unrelated detail.</p><p>This is guidance for the supplied example, not automatic relevance assessment of your writing.</p></section></section><section class="card model"><h2>Complete fixed model paragraph</h2><p id="full-model">Our reading corner has a place for books and readers. The window gives the corner daylight. A low shelf holds our books. Two cushions sit beside the shelf. A basket collects books ready to return. These parts keep the corner ready for our next reading time.</p></section><section class="card"><h2>Practice the supplied model order</h2><p>Opening → window → shelf → cushions → basket → ending. Other descriptive orders can be sensible; this practice checks only this model.</p><div id="order"></div><div class="tabs"><button id="check" type="button">Check this model order</button><button id="scramble" type="button">Restore practice arrangement</button></div><p id="order-status" role="status"></p></section><section class="card"><h2>Your separate topic and four-square planner</h2><div id="fields"></div><div class="tabs"><button id="build" type="button">Preview my supplied sentences</button><button id="reset" type="button">Reset typed planner</button></div><p id="status" role="status"></p><section id="confirm" hidden><h3>Clear all eleven planner fields?</h3><div class="tabs"><button id="keep" type="button">Keep my planner</button><button id="clear" type="button">Clear typed planner</button></div></section><section id="review" class="card copy" hidden><h3 id="own-topic"></h3><div id="copy"></div><p>No grammar or relevance grade has been assigned. Review the supplied sentences with a teacher or partner.</p></section></section><footer>Temporary practice only; no saved learner work or claimed learning gains. Keep each note beside the sentence it helps you write.</footer></main><script>'use strict';const $=id=>document.getElementById(id),notes=[['window','By window','The window gives the corner daylight.','The sentence explains what the window contributes to the corner.'],['shelf','Low bookshelf','A low shelf holds our books.','The sentence tells what the shelf holds.'],['cushions','Two cushions','Two cushions sit beside the shelf.','The sentence tells where the cushions are.'],['basket','Return basket','A basket collects books ready to return.','The sentence tells what the basket collects.']];for(const[id,note,sentence,why]of notes){const b=document.createElement('button');b.id='note-'+id;b.type='button';b.setAttribute('aria-pressed',String(id==='window'));const h=document.createElement('strong');h.textContent=note;b.append(h,document.createTextNode('Inspect the complete sentence'));b.addEventListener('click',()=>{for(const[key]of notes)$('note-'+key).setAttribute('aria-pressed',String(key===id));$('note-title').textContent=note;$('sentence').textContent=sentence;$('explanation').textContent=why;});$('squares').append(b);}for(const[button,panel]of [['fragment','fragment-view'],['irrelevant','irrelevant-view']])$(button).addEventListener('click',()=>{const open=$(panel).hidden;$(panel).hidden=!open;$(button).setAttribute('aria-expanded',String(open));});const sentences={opening:'Our reading corner has a place for books and readers.',window:notes[0][2],shelf:notes[1][2],cushions:notes[2][2],basket:notes[3][2],ending:'These parts keep the corner ready for our next reading time.'},expected=['opening','window','shelf','cushions','basket','ending'];let order=['opening','window','cushions','shelf','basket','ending'];function render(){const focus=document.activeElement?.id;$('order').replaceChildren();for(const[id,index]of order.map((id,index)=>[id,index])){const row=document.createElement('section');row.className='sentence-row';const p=document.createElement('p');p.textContent=(index+1)+'. '+sentences[id];const controls=document.createElement('div');controls.className='tabs';for(const[direction,delta]of [['up',-1],['down',1]]){const b=document.createElement('button');b.type='button';b.id=direction+'-'+id;b.textContent=direction==='up'?'Up':'Down';b.setAttribute('aria-label',b.textContent+' '+id+' sentence');b.disabled=index+delta<0||index+delta>=order.length;b.addEventListener('click',()=>{[order[index],order[index+delta]]=[order[index+delta],order[index]];render();$('order-status').textContent='Arrangement changed. Check against this supplied model order.';});controls.append(b);}row.append(p,controls);$('order').append(row);}if(focus&&$(focus)){const fallback=focus.startsWith('up-')?'down-'+focus.slice(3):focus.startsWith('down-')?'up-'+focus.slice(5):'check';if(!$(focus).disabled)$(focus).focus();else if($(fallback)&&!$(fallback).disabled)$(fallback).focus();}}$('check').addEventListener('click',()=>{$('order-status').textContent=order.join('|')===expected.join('|')?'Matches this supplied six-sentence model order. This is not a rule for all paragraphs.':'Does not match this supplied model yet. Check opening, window, shelf, cushions, basket, ending.';});$('scramble').addEventListener('click',()=>{order=['opening','window','cushions','shelf','basket','ending'];render();$('order-status').textContent='Practice arrangement restored. Fixed model paragraph unchanged.';});render();const fields=[['topic','Your topic · required'],['opening','Your opening sentence'],...notes.flatMap(([id,note],i)=>[['own-note-'+i,'Detail '+(i+1)+' · short planning note'],['own-sentence-'+i,'Detail '+(i+1)+' · practice sentence']]),['ending','Your ending sentence']];for(const[id,label]of fields){const l=document.createElement('label'),t=document.createElement('textarea');l.htmlFor=id;l.textContent=label;t.id=id;t.addEventListener('input',()=>{$('review').hidden=true;$('status').textContent='Planner changed. Preview again to review current words.';});$('fields').append(l,t);}$('build').addEventListener('click',()=>{$('review').hidden=true;if(!$('topic').value.trim()){$('status').textContent='Complete: your topic.';return;}$('own-topic').textContent=$('topic').value;$('copy').replaceChildren();for(const id of ['opening',...notes.map((_,i)=>'own-sentence-'+i),'ending']){const p=document.createElement('p');p.textContent=$(id).value.trim()||'Sentence not supplied.';$('copy').append(p);}$('review').hidden=false;$('status').textContent='Your supplied sentence preview is ready for discussion.';});$('reset').addEventListener('click',()=>{$('confirm').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirm').hidden=true;$('reset').focus();});$('clear').addEventListener('click',()=>{for(const[id]of fields)$(id).value='';$('review').hidden=true;$('confirm').hidden=true;$('status').textContent='Eleven planner fields cleared. Fixed model and current ordering practice unchanged.';$('topic').focus();});</script></body></html>