Fragile · A 25-Minute Vocabulary Lesson — Select a word needed to understand supplied text,teach a student-friendly meaning with context/example/nonexample and plan discussion/use…

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>Fragile · A 25-Minute Vocabulary Lesson</title><style>:root{--bg:#faf6ef;--ink:#493d34;--accent:#8a603d;--line:#ded0bf;--wash:#f3e8d6;}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Arial,Helvetica,sans-serif}main{max-width:1100px;margin:auto;padding:26px 24px 54px}h1,h2,h3,p{margin:0}h1{font-size:clamp(27px,4vw,39px);line-height:1.15;letter-spacing:-.03em}h2{font-size:23px}h3{font-size:18px}header{margin-bottom:18px}header p{margin-top:8px}.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:bold;color:var(--accent)}button,input,textarea,select{font:inherit}button{min-height:44px;padding:9px 15px;background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:6px;cursor:pointer;font-weight:bold}button.secondary{background:#fff;color:var(--accent)}button:disabled{opacity:.45;cursor:default}button[aria-pressed=true]{box-shadow:inset 0 0 0 2px currentColor}input,textarea,select{width:100%;min-height:44px;border:1px solid #919cad;background:#fff;color:var(--ink);border-radius:5px;padding:9px 11px}textarea{resize:vertical;min-height:94px}input[type=checkbox]{width:20px;min-height:20px;vertical-align:middle;margin-right:8px}label{display:block;margin:11px 0 5px;font-size:14px;font-weight:bold}:focus-visible{outline:3px solid #dc8c21;outline-offset:3px}.actions{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}.panel{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px;min-width:0}.columns{display:grid;grid-template-columns:1.45fr 1fr;gap:22px}.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.muted{color:#536176;font-size:14px}.notice{margin:14px 0;background:var(--wash);border-left:4px solid var(--accent);padding:13px 16px;overflow-wrap:anywhere}.error{color:#a42d25;font-weight:bold}.below{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}.below>p{margin:9px 0}.big{font-size:clamp(34px,5vw,56px);line-height:1.15;font-weight:bold}.tag{font-size:12px;padding:4px 8px;border-radius:4px;background:var(--wash)}.row{display:flex;gap:10px;align-items:end}.row>*{min-width:0}.row .unit{width:110px;flex:none}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 ui-monospace,monospace}table{border-collapse:collapse;width:100%;font-size:14px}th,td{text-align:left;vertical-align:top;padding:9px;border-bottom:1px solid var(--line)}th{font-size:12px;text-transform:uppercase}.scroll{overflow-x:auto}.foot{font-size:14px;color:#536176;margin-top:24px}summary{cursor:pointer;font-weight:bold;min-height:44px;padding:10px 0}details{margin:18px 0}.readonly{font:13px/1.5 ui-monospace,monospace;min-height:170px}.hash{overflow-wrap:anywhere;font:12px/1.6 ui-monospace,monospace}[hidden]{display:none!important}@media(max-width:800px){.columns{grid-template-columns:1fr}}@media(max-width:520px){main{padding:18px 14px 40px}.panel{padding:17px}.two,.three{grid-template-columns:1fr}.actions button{flex-grow:1}td,th{padding:7px}.row .unit{width:90px}}h1,h2{font-family:Georgia,serif}.passage{font:25px/1.6 Georgia,serif;background:#fffdf8;padding:24px;border:1px solid #dfd1bb;border-radius:8px;margin:16px 0}.word{font:42px Georgia,serif}.meaning{background:#6c543e;color:#fff;border-radius:9px;padding:23px}.meaning p{margin-top:9px}.meaning .eyebrow{color:#ecd9bf}.plan-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}.time-total{font-size:31px;font-weight:bold;color:#8a603d}.lesson-block{display:grid;grid-template-columns:100px 1fr;gap:16px;border-top:1px solid var(--line);padding:18px 0}.lesson-block input{width:80px}.lesson-block p{margin:6px 0}.range{font-weight:bold;font-size:18px}.evidence{color:#73593f;font-size:14px}.activity-choice{display:flex;gap:10px;flex-wrap:wrap;margin:13px 0}.activity-choice button{background:white;color:#765333}.activity-choice button[aria-pressed=true]{background:#f3e8d6}.writing{background:#fffdf7;border:1px solid #dfd1bb;padding:20px;border-radius:8px}#plan-text{min-height:250px}#learner-text{min-height:190px}@media(max-width:520px){.lesson-block{grid-template-columns:80px 1fr;gap:10px}.lesson-block input{width:68px}.passage{font-size:21px;padding:18px}}</style></head><body><main><header><p class="eyebrow">Original teacher plan · context, contrast, new use</p><h1>Teach “fragile” through the detail that matters</h1><p>A filled lesson plan with editable timing, learner tasks and open observation fields.</p></header><div class="columns"><section class="passage"><p>The thin glass ornament is fragile. A small fall broke it, so Mina wrapped the replacement carefully.</p></section><aside class="meaning"><p class="eyebrow">Target word</p><p class="word">fragile</p><p><strong>Easy to break or damage.</strong></p><p>Context clue: “A small fall broke it.”</p><p>Use the stated damage, not “glass” alone, to explain the meaning.</p></aside></div><section class="below"><div class="plan-heading"><h2>Lesson sequence</h2><p class="time-total" id="total">25 minutes</p></div><p id="schedule-error" class="error" role="status"></p><div id="lesson"><article class="lesson-block"><div><p class="range" id="range-0"></p><label for="minutes-0">Minutes</label><input id="minutes-0" inputmode="numeric" value="3"></div><div><h3>1. Read the context</h3><p><strong>Teacher:</strong> Read the exact passage; identify fragile.</p><p><strong>Learner:</strong> Locate the clue about the fall.</p><p class="evidence"><strong>Look for:</strong> A passage reference, not a guessed definition.</p></div></article><article class="lesson-block"><div><p class="range" id="range-1"></p><label for="minutes-1">Minutes</label><input id="minutes-1" inputmode="numeric" value="5"></div><div><h3>2. Model the meaning</h3><p><strong>Teacher:</strong> Model easy to break or damage; contrast the supplied sturdy wooden block.</p><p><strong>Learner:</strong> Explain why the two described objects differ.</p><p class="evidence"><strong>Look for:</strong> A reason tied to the description and easy damage.</p></div></article><article class="lesson-block"><div><p class="range" id="range-2"></p><label for="minutes-2">Minutes</label><input id="minutes-2" inputmode="numeric" value="7"></div><div><h3>3. Compare descriptions</h3><p><strong>Teacher:</strong> Ask which description fits fragile, and what detail supports it.</p><p><strong>Learner:</strong> Compare the ornament with the sturdy block.</p><p class="evidence"><strong>Look for:</strong> A damage detail, not a material name alone.</p></div></article><article class="lesson-block"><div><p class="range" id="range-3"></p><label for="minutes-3">Minutes</label><input id="minutes-3" inputmode="numeric" value="7"></div><div><h3>4. Use it in a new situation</h3><p><strong>Teacher:</strong> Ask for an original spoken or written sentence.</p><p><strong>Learner:</strong> Make the meaning clear in a new sentence.</p><p class="evidence"><strong>Look for:</strong> A defensible new use for teacher review.</p></div></article><article class="lesson-block"><div><p class="range" id="range-4"></p><label for="minutes-4">Minutes</label><input id="minutes-4" inputmode="numeric" value="3"></div><div><h3>5. Revisit and plan another encounter</h3><p><strong>Teacher:</strong> Return to Mina’s action; identify a later use opportunity.</p><p><strong>Learner:</strong> Explain why Mina wrapped the replacement carefully.</p><p class="evidence"><strong>Look for:</strong> Meaning connected back to the passage.</p></div></article></div><div class="actions"><button type="button" id="reset-time" class="secondary">Restore 25-minute timing</button></div></section><section class="below"><h2>Preview the topic-specific learner tasks</h2><p>These are local previews for planning. They do not fill actual learner observations.</p><div class="two"><article class="writing"><h3>1 · Locate the context clue</h3><p>Which supplied detail shows that the ornament is easy to damage?</p><div class="activity-choice"><button type="button" id="clue-fall" class="secondary">A small fall broke it.</button><button type="button" id="clue-glass" class="secondary">It is made of glass.</button></div><p class="notice" id="clue-feedback" role="status">Choose a detail to inspect the authored feedback.</p></article><article class="writing"><h3>2 · Compare the given descriptions</h3><p>Ornament: a small fall broke it.<br>Wooden block: described as sturdy.</p><div class="activity-choice"><button type="button" id="compare-ornament" class="secondary">The described ornament fits fragile.</button><button type="button" id="compare-block" class="secondary">The described sturdy block fits fragile.</button></div><p class="notice" id="compare-feedback" role="status">Choose a description and connect it to easy damage.</p></article></div><article class="writing" style="margin-top:16px"><h3>3 · Create a new use</h3><label for="new-use">Draft a sentence that makes the meaning clear</label><textarea id="new-use" placeholder="Blank until a learner or teacher supplies a draft"></textarea><div class="actions"><button type="button" id="review-use">Prepare draft for human review</button></div><p id="use-feedback" role="status" class="notice">No sentence reviewed. Word presence alone is not meaning.</p></article></section><details><summary>Teacher model and discussion key · keep separate from learner copy</summary><p><strong>Original teacher model:</strong> I put the fragile paper star in a box so its thin points would not tear.</p><p>The damage risk makes the new meaning visible. “I wrote the word fragile” merely contains the word. “Fragile means hard to damage” reverses the meaning. Do not grade arbitrary sentences by word presence.</p><p>If fragile is equated with glass, return to the paper-star contrast. If vulnerability is identified but Mina’s action is unexplained, revisit the exact fall clue. The sturdy wooden block is a supplied contrast, not a rule about all wood. Use descriptions or pictures; no object needs to be broken.</p></details><section class="below"><h2>Actual observation · leave blank until teaching</h2><div class="two"><div><label for="actual-response">Actual response</label><textarea id="actual-response"></textarea><label for="meaning-evidence">Evidence of meaning</label><textarea id="meaning-evidence"></textarea></div><div><label for="next-instruction">Next instruction</label><textarea id="next-instruction"></textarea><label for="later-encounter">Planned later encounter · teacher-supplied text or description</label><textarea id="later-encounter" placeholder="[NEEDED: a supplied later text or object description]"></textarea><label for="later-response">Actual later response</label><textarea id="later-response"></textarea></div></div></section><section class="below"><div class="two"><article><h2>Teacher plan text</h2><label for="plan-text">Manual-copy current timing, activities and observations</label><textarea id="plan-text" readonly class="readonly"></textarea><div class="actions"><button type="button" id="select-plan" class="secondary">Select teacher plan</button></div></article><article><h2>Student-only task text</h2><label for="learner-text">Passage and open tasks · no teacher model or key</label><textarea id="learner-text" readonly class="readonly"></textarea><div class="actions"><button type="button" id="select-learner" class="secondary">Select learner text</button></div></article></div><p id="selection-status" class="muted" role="status"></p><p class="foot">Original fictional classroom note and proposed lesson; no reading-level, standards or learning-gain claim. The whole page is a teacher-review copy; distribute only the learner text for a student-only sheet. Local preview choices are not observed learner evidence. Free prose needs teacher review. No responses are collected or saved; retain actual school records in the approved school workflow.</p></section></main><script>'use strict';const $=id=>document.getElementById(id);const passage='The thin glass ornament is fragile. A small fall broke it, so Mina wrapped the replacement carefully.';const steps=[["Read the context","Read the exact passage; identify fragile.","Locate the clue about the fall.","A passage reference, not a guessed definition."],["Model the meaning","Model easy to break or damage; contrast the supplied sturdy wooden block.","Explain why the two described objects differ.","A reason tied to the description and easy damage."],["Compare descriptions","Ask which description fits fragile, and what detail supports it.","Compare the ornament with the sturdy block.","A damage detail, not a material name alone."],["Use it in a new situation","Ask for an original spoken or written sentence.","Make the meaning clear in a new sentence.","A defensible new use for teacher review."],["Revisit and plan another encounter","Return to Mina’s action; identify a later use opportunity.","Explain why Mina wrapped the replacement carefully.","Meaning connected back to the passage."]];
function schedule(){const values=Array.from({length:5},(_,i)=>$('minutes-'+i).value.trim());if(values.some(v=>!/^\d+$/.test(v)||Number(v)<1||Number(v)>120))return {error:'Use whole minutes from 1 to 120 for every block.'};let end=0;return {blocks:values.map((v,i)=>{const start=end;end+=Number(v);return {start,end,minutes:Number(v),step:steps[i]};}),total:values.reduce((a,v)=>a+Number(v),0)};}
function render(){const p=schedule();if(p.error){$('total').textContent='Timing incomplete';$('schedule-error').textContent=p.error;for(let i=0;i<5;i++)$('range-'+i).textContent='—';$('plan-text').value='';return;}$('schedule-error').textContent='';$('total').textContent=p.total+' minutes';p.blocks.forEach((s,i)=>$('range-'+i).textContent=s.start+'–'+s.end+' min');$('plan-text').value='VOCABULARY LESSON — TEACHER PLAN\nTarget: fragile — easy to break or damage\nExact passage: '+passage+'\nClue: A small fall broke it.\nTotal planned time: '+p.total+' minutes\n\n'+p.blocks.map(s=>s.start+'–'+s.end+' min · '+s.step[0]+'\nTeacher: '+s.step[1]+'\nLearner: '+s.step[2]+'\nEvidence: '+s.step[3]).join('\n\n')+'\n\nACTUAL OBSERVATIONS — not auto-filled\nActual response: '+$('actual-response').value+'\nEvidence of meaning: '+$('meaning-evidence').value+'\nNext instruction: '+$('next-instruction').value+'\nPlanned later encounter: '+($('later-encounter').value||'[NEEDED: supplied later text or description]')+'\nActual later response: '+$('later-response').value;}
function checkUse(){const v=$('new-use').value.trim();$('use-feedback').textContent=v?'Draft ready for teacher review. Check that the reason shows easy breakage or damage; this tool has not judged the meaning.':'Supply a draft sentence before preparing a review.';}
for(let i=0;i<5;i++)$('minutes-'+i).addEventListener('input',render);$('reset-time').addEventListener('click',()=>{[3,5,7,7,3].forEach((v,i)=>$('minutes-'+i).value=String(v));render();});$('clue-fall').addEventListener('click',()=>{$('clue-feedback').textContent='The small fall broke it: that damage detail supports fragile in this passage.';});$('clue-glass').addEventListener('click',()=>{$('clue-feedback').textContent='A material name alone is not enough. Look for the detail about what happened after a small fall.';});$('compare-ornament').addEventListener('click',()=>{$('compare-feedback').textContent='The described ornament fits: a small fall caused damage. Compare that detail with the supplied sturdy block.';});$('compare-block').addEventListener('click',()=>{$('compare-feedback').textContent='The supplied block is described as sturdy, so it is the nonexample here. Do not infer that every wooden object resists damage.';});$('review-use').addEventListener('click',checkUse);$('new-use').addEventListener('input',()=>{$('use-feedback').textContent='Draft changed — human meaning review is still pending.';});for(const id of ['actual-response','meaning-evidence','next-instruction','later-encounter','later-response'])$(id).addEventListener('input',render);$('learner-text').value='VOCABULARY TASK — STUDENT COPY\nRead: '+passage+'\n\nTarget word: fragile\n1. Which detail helps you work out the meaning? Explain.\n2. Compare the supplied ornament and the sturdy wooden block. Which description fits fragile, and why?\n3. Write a sentence in a new situation that makes the meaning of fragile clear. Explain the reason.\n4. Return to the passage. Why did Mina wrap the replacement carefully?\n\nYour response: __________________\nTeacher/partner discussion: __________________';for(const [button,field] of [['select-plan','plan-text'],['select-learner','learner-text']])$(button).addEventListener('click',()=>{if(!$(field).value){$('selection-status').textContent='Correct the timing before selecting a teacher plan.';return;}$(field).focus();$(field).select();$('selection-status').textContent='Text selected. Use your device’s copy command and paste into a separate document.';});globalThis.app={schedule,render,checkUse,passage};render();</script></body></html>