An informative report beside its complete practice text and paragraph evidence

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>The Unlabeled Pot · book report teaching copy</title><style>
*{box-sizing:border-box}body{margin:0;background:#f0f2ed;color:#2b392f;font:16px/1.65 system-ui,sans-serif}main{max-width:1080px;margin:auto;padding:28px}h1{font:700 clamp(30px,5vw,48px)/1.12 Georgia,serif;margin:12px 0 18px}h2{font-size:23px;line-height:1.3}h3{font-size:18px}p{margin:8px 0 16px}p,h1,h2,h3,label,button,textarea{overflow-wrap:anywhere}section,div,article{min-width:0}.eyebrow{font-size:14px;letter-spacing:.08em;font-weight:750}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}.paper{background:#fffefa;border:1px solid #bec6b7;border-radius:8px;padding:22px;margin:20px 0}.source{border-top:6px solid #55734b}.report{border-top:6px solid #b87a3d}.label{font-size:14px;font-weight:750;letter-spacing:.04em;color:#4b5a4e}.note{background:#e2eadc;border-left:5px solid #55734b;padding:16px;margin:18px 0}.status{background:#fff0d8;border-left:5px solid #b87a3d;padding:14px;min-height:54px}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}button,textarea,input{font:inherit}button{padding:10px 16px;min-height:44px;border:1px solid #5e7358;border-radius:5px;background:white;color:inherit;cursor:pointer}button[aria-pressed="true"]{background:#35563d;color:white}button:hover{box-shadow:inset 0 0 0 1px #35563d}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b86026;outline-offset:3px}label{display:block;font-weight:650;margin-top:16px}textarea,input{display:block;width:100%;min-width:0;color:inherit;background:white;border:1px solid #75856d;border-radius:4px;padding:11px;margin:7px 0 14px}textarea{min-height:120px;resize:vertical}input{min-height:44px}textarea[readonly]{background:#fafbf5;min-height:260px}.citation{display:inline-block;font-size:15px;color:#294f35}.highlight{background:#fff0c7;outline:2px solid #b87a3d;outline-offset:5px}.sentence{border-left:3px solid #bf8151;padding-left:16px}.metric{font-weight:700}footer{border-top:1px solid #bec6b7;padding-top:18px;margin-top:26px}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}.grid{grid-template-columns:1fr;gap:0}.paper{padding:17px}.toolbar button{flex:1 1 140px}}
</style></head><body><main><p class="eyebrow">ORIGINAL PRACTICE STORY · SUMMARY BEFORE RESPONSE</p><h1>Keep what happened separate from what you think.</h1><p>Read the complete short story beside an informative report. Check an event against its paragraph before adding your own response.</p><div class="note">This is a fictional teaching example, not a report on a published book. No author byline, publisher, year, edition or page numbers are supplied. Paragraph IDs are the evidence locations.</div>
<div class="grid"><section class="paper source" aria-labelledby="source-title"><p class="label">COMPLETE PRACTICE TEXT</p><h2 id="source-title">The Unlabeled Pot</h2><p id="p1" tabindex="-1"><strong>P1.</strong> Theo brought seedlings to the neighborhood plant swap. One pot had no label, so he set it apart from the labeled pots.</p><p id="p2" tabindex="-1"><strong>P2.</strong> A volunteer suggested a plant name from the shape of its leaves. Theo said he could not confirm the name and asked to leave the pot on a side table.</p><p id="p3" tabindex="-1"><strong>P3.</strong> At the end of the swap, Theo took that pot home with a note saying “Name unconfirmed.” He exchanged only the labeled pots.</p><p class="label">EVIDENCE LOOKUP</p><div class="toolbar"><button id="show-p1" type="button">Locate P1</button><button id="show-p2" type="button">Locate P2</button><button id="show-p3" type="button">Locate P3</button></div><p id="evidence-status" role="status" aria-live="polite">Choose a paragraph to locate its wording. The plant remains unidentified.</p></section>
<section class="paper report" aria-labelledby="report-title"><p class="label">WORKED INFORMATIVE REPORT</p><h2 id="report-title">A summary you can check</h2><p><strong>Title and source:</strong> <em>The Unlabeled Pot</em>, original practice story provided here.</p><h3>Summary</h3><p id="worked-summary">In “The Unlabeled Pot,” Theo brings seedlings to a neighborhood plant swap. One pot has no label, so he keeps it apart from the labeled pots. A volunteer suggests a plant name based on the leaves, but Theo says he cannot confirm that name. He asks to leave the pot on a side table. By the end of the swap, he has exchanged only the labeled pots. He takes the unconfirmed pot home with a note saying its name is still unknown. The story ends with the plant's identity still unconfirmed.</p><h3>Character-action note</h3><p>Theo keeps the unnamed pot apart in P1, does not confirm the suggested name in P2, and takes the pot home in P3.</p><h3>What I think</h3><p>Optional response: “I liked the decision to keep the name unconfirmed because P2 gives a suggestion, not a confirmed identification.”</p></section></div>
<section class="paper" aria-labelledby="revision-title"><h2 id="revision-title">Remove the unsupported event</h2><p class="sentence"><strong>Sentence to check:</strong> “Theo discovered a rare herb and everyone admired his expertise.”</p><button id="reveal" type="button" aria-expanded="false" aria-controls="revision">Show a supported revision</button><div id="revision" hidden><p><strong>Why revise:</strong> The story gives neither the plant’s identity nor anyone’s admiration. A different adjective would not supply that missing evidence.</p><p><strong>Supported revision:</strong> “Theo could not confirm the suggested name, so he kept the pot separate and took it home.”</p><p>Check the unconfirmed suggestion in P2 and the outcome in P3.</p></div></section>
<section class="paper" aria-labelledby="scaffold-title"><h2 id="scaffold-title">Prepare your own report scaffold</h2><p>Follow your teacher’s required format and reading scope. Copy actual book details from your assigned book; leave missing details unfilled. This editor starts blank and never inserts the worked report into your writing.</p><label for="details">Book details required by your assignment</label><input id="details" maxlength="1200" placeholder="Title, author and any edition details actually supplied"><label for="scope">Assignment and reading scope</label><input id="scope" maxlength="1200" placeholder="What you were asked to cover"><label for="summary">Objective summary</label><textarea id="summary" placeholder="Recount the events the assigned text supplies."></textarea><p id="word-count" class="metric">Summary words: 0</p><p>The practice story uses a 90–120-word assignment. That range is not a general requirement for book reports. The counter counts whitespace-separated words; it does not grade your summary.</p><label for="action-note">Character-action note with an accurate location</label><textarea id="action-note" placeholder="What did the character do? Where can you find it?"></textarea><label for="response">Optional response</label><textarea id="response" placeholder="If required or useful, explain your view with a text detail."></textarea><div class="toolbar"><button id="assemble" type="button">Update plain-text scaffold</button><button id="clear" type="button">Clear my scaffold</button></div><p id="status" class="status" role="status" aria-live="polite">Your scaffold is blank. The preview uses only what you enter.</p><div id="confirmation" hidden><p>Clear all five scaffold fields and the plain-text preview? The worked report stays unchanged.</p><div class="toolbar"><button id="confirm-clear" type="button">Clear my writing</button><button id="keep" type="button">Keep my writing</button></div></div><label for="plain">Plain-text scaffold · select and copy manually</label><textarea id="plain" readonly aria-describedby="preview-note"></textarea><p id="preview-note">Blank required sections are labeled [not supplied]. The optional response is omitted if empty. Review all events, names and references against the assigned book.</p></section><footer>Writing remains only in this open page; reloading clears it. Nothing is saved, submitted or automatically evaluated. Use your assignment’s required submission format.</footer></main>
<script>(()=>{'use strict';const $=id=>document.getElementById(id);const words=s=>s.trim()?s.trim().split(/\s+/u).length:0;const fields=['details','scope','summary','action-note','response'];let dirty=false;function count(){$('word-count').textContent='Summary words: '+words($('summary').value);}for(const id of fields)$(id).addEventListener('input',()=>{dirty=true;count();$('status').textContent='Writing changed. Update the plain-text scaffold to include these edits.';});for(const id of ['p1','p2','p3'])$('show-'+id).addEventListener('click',()=>{for(const p of ['p1','p2','p3'])$(p).classList.toggle('highlight',p===id);$(id).focus();$(id).scrollIntoView({block:'nearest',behavior:'auto'});$('evidence-status').textContent=id.toUpperCase()+' located. Read its exact wording before making a claim.';});$('reveal').addEventListener('click',()=>{const open=$('revision').hidden;$('revision').hidden=!open;$('reveal').setAttribute('aria-expanded',String(open));$('reveal').textContent=open?'Hide the supported revision':'Show a supported revision';});$('assemble').addEventListener('click',()=>{const labels=['Book details','Assignment and reading scope','Objective summary','Character-action note'];const out=[];for(let i=0;i<4;i++)out.push(labels[i]+':\n'+($(fields[i]).value.trim()||'[not supplied]'));if($('response').value.trim())out.push('Optional response:\n'+$('response').value.trim());$('plain').value=out.join('\n\n');dirty=false;const missing=fields.slice(0,4).filter(id=>!$(id).value.trim()).length;$('status').textContent='Plain-text scaffold updated. '+(missing?missing+' required sections are not supplied.':'All four scaffold sections contain text.')+' Check accuracy and assignment requirements yourself; no prose grade was assigned.';});$('clear').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('clear').focus();$('status').textContent='Kept your writing and preview.'+(dirty?' The preview still needs an update.':'');});$('confirm-clear').addEventListener('click',()=>{for(const id of fields)$(id).value='';$('plain').value='';dirty=false;count();$('confirmation').hidden=true;$('status').textContent='Your scaffold and preview were cleared. The worked report is unchanged.';$('details').focus();});})();</script></body></html>