Why two racks? WIDA lesson planning copy

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>Why two racks? | WIDA lesson planning copy</title>
<style>
:root{color-scheme:light;--ink:#202c35;--blue:#244f72;--paper:#faf7ef;--line:#d6d5cc;--soft:#e9f0f5}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 system-ui,sans-serif}main{max-width:1020px;margin:auto;padding:32px 28px 60px}h1,h2,h3,p{margin:0 0 16px}h1{font:700 clamp(36px,6vw,58px)/1.12 Georgia,serif;letter-spacing:-.035em}h2{font:700 27px/1.25 Georgia,serif}h3{font-size:19px}header{border-bottom:2px solid var(--ink);padding-bottom:24px;margin-bottom:28px}.eyebrow{font-weight:700;color:var(--blue);margin-bottom:12px}.lede{max-width:720px;font-size:20px}.badge{display:inline-block;padding:6px 12px;background:#fff0c6;border:1px solid #8b681d;border-radius:5px;font-weight:650}section{margin:0 0 32px}.workspace{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px}.panel{background:#fffdf8;border:1px solid var(--line);padding:24px;border-radius:10px;min-width:0}.number{display:inline-block;color:var(--blue);font:700 18px system-ui;margin-right:8px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:block;font-weight:650;margin:0 0 16px}input,textarea{display:block;width:100%;min-width:0;font:inherit;color:var(--ink);background:white;border:1px solid #71808a;border-radius:5px;padding:10px;margin-top:6px}textarea{min-height:100px;resize:vertical}button{font:650 17px/1.4 system-ui;cursor:pointer;border:1px solid var(--blue);background:var(--blue);color:white;padding:11px 18px;border-radius:5px;min-height:46px}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b56621;outline-offset:3px}.result{background:var(--soft);border-left:4px solid var(--blue);padding:16px;margin-top:18px;white-space:pre-line}.rack{margin:16px 0;padding:12px;background:#eee9db;border-bottom:4px solid #817561}.slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.token{display:block;aspect-ratio:1;max-height:38px;border:1px dashed #938c7d;border-radius:3px}.token.filled{background:#c9dce9;border:2px solid var(--blue)}.caption{font-size:16px;color:#4a5660}.row{border-top:1px solid var(--line);padding:14px 0}.row strong{display:block;color:var(--blue)}.choice{display:block;text-align:left;width:100%;margin-top:12px;background:white;color:var(--blue)}.choice[aria-pressed=true]{background:var(--blue);color:white}ol{padding-left:25px}li{padding:0 0 15px}li strong{display:block}mark{background:#d5f525;padding:0 3px}.blank{min-height:48px;border-bottom:1px dashed #89949b;padding:8px 0;color:#59646a}.ledger{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}.ledger dt{font-weight:650}.ledger dd{margin:0}.full{grid-column:1/-1}footer{border-top:2px solid var(--ink);padding-top:20px;color:#4a5660;font-size:16px}a{color:#244f72;overflow-wrap:anywhere}p:last-child{margin-bottom:0}@media(max-width:680px){main{padding:22px 18px 40px}.workspace{grid-template-columns:1fr;gap:0}.panel{padding:20px}.fields,.ledger{grid-template-columns:1fr}.full{grid-column:auto}h1{font-size:40px}.lede{font-size:18px}}@media print{body{background:white}main{padding:0}button{display:none}.workspace{display:block}.panel{break-inside:avoid}input,textarea{border:0}}
@media(max-width:680px){main{padding:16px 16px 36px}header{padding-bottom:12px;margin-bottom:16px}.eyebrow{margin-bottom:6px}h1{font-size:32px;margin-bottom:10px}.lede{font-size:18px;line-height:1.45;margin-bottom:12px}.badge{padding:4px 9px}.panel{padding:16px}h2{font-size:24px}.fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.fields label{font-size:16px}.result{padding:12px;margin-top:12px;line-height:1.5}}
</style>
</head>
<body>
<main>
<header>
<p class="eyebrow">Teacher planning notebook · Original fictional lesson</p>
<h1>Why two racks?</h1>
<p class="lede">Ten drawings need to dry at once. Each rack holds six. Plan an explanation that connects the quantities to the choice.</p>
<p class="badge" id="alignmentStatus">Draft: alignment pending</p>

</header>
<div class="workspace">
<section class="panel" aria-labelledby="taskHeading">
<h2 id="taskHeading"><span class="number">01</span>Make the capacity visible</h2>
<p>Each drawing needs one place. Two racks are available. Every drawing must dry simultaneously; do not reuse a rack in successive batches.</p>
<div class="fields"><label for="drawings">Drawings<input id="drawings" type="number" min="1" max="60" step="1" value="10"></label><label for="capacity">Places per rack<input id="capacity" type="number" min="1" max="60" step="1" value="6"></label></div>
<button id="calculate" type="button">Calculate</button>
<p id="calculation" class="result" role="status" aria-live="polite"></p>
<div id="diagram" aria-label="Places on the two available racks"></div>
<p class="caption" id="diagramNote"></p>
<div class="row"><strong>Ask</strong>Why can one rack not hold all ten drawings?</div>
<div class="row"><strong>Anticipated teacher demonstration</strong>“We need two racks because one holds six drawings and there are ten drawings.”</div>
<p class="caption">The demonstration and original lesson below use 10 drawings and 6 places. Changing the calculator creates a transfer problem; review the lesson wording and mapping before using different quantities.</p>
</section>
<section class="panel" aria-labelledby="crosswalkHeading">
<h2 id="crosswalkHeading"><span class="number">02</span>Connect task and language</h2>
<p>Authored teaching choices, ready for a teacher to compare with the selected official entry.</p>
<div class="row"><strong>Content goal</strong>Explain why one rack is insufficient and two provide enough places.</div>
<div class="row"><strong>Proposed language purpose</strong>Explain</div>
<div class="row"><strong>Authored function</strong>Connect the capacity of one rack to the number of racks needed.</div>
<div class="row"><strong>Possible features</strong>A because clause; quantity phrases such as “six drawings” and “two racks.”</div>
<div class="row"><strong>Content evidence to look for</strong>Six is fewer than ten. Two racks provide twelve places, enough for ten drawings.</div>
<div class="row"><strong>Language evidence to look for</strong>A meaningful connection between the stated quantities and the rack choice.</div>
<div class="row"><strong>Optional support</strong>Point to the quantity diagram, rehearse with a partner, or use: “We need ___ racks because one holds ___ drawings and we have ___ drawings.”</div>
<p><mark>Support keeps the reasoning goal constant.</mark> Frame use does not assign a proficiency level.</p>
</section>
</div>
<section class="panel" aria-labelledby="sequenceHeading">
<h2 id="sequenceHeading"><span class="number">03</span>A twenty-minute lesson</h2>
<ol>
<li><strong>Launch · 3 minutes</strong>Present ten paper drawing tokens and two six-place rack outlines. Ask whether one rack will work and invite a prediction.</li>
<li><strong>Model · 5 minutes</strong>Partners fill the first rack with six tokens and move the remaining four to the second. Ask them to point to what does not fit.</li>
<li><strong>Compare · 4 minutes</strong>Discuss the two hypothetical explanations below. Which explains the number of racks needed?</li>
<li><strong>Rehearse · 5 minutes</strong>Offer a diagram, frame, or partner rehearsal. Elicit an individual explanation and record the response mode and support used.</li>
<li><strong>Transfer · 3 minutes</strong>Try eighteen drawings with six places per rack. Three racks are needed; two leave six drawings without a place. Use the calculator to check.</li>
</ol>
<h3>Which explanation uses capacity as its reason?</h3>
<p class="caption">Teacher preparation comparison. These are hypothetical examples, not observed student work.</p>
<button id="generalReason" type="button" class="choice" aria-pressed="false">A. We need two racks because racks are useful.</button>
<button id="quantityReason" type="button" class="choice" aria-pressed="false">B. We need two racks because one holds six drawings and there are ten drawings.</button>
<p id="answerFeedback" class="result" role="status" aria-live="polite">Select an explanation to examine its reasoning.</p>
</section>
<section class="panel" aria-labelledby="sourceHeading">
<h2 id="sourceHeading"><span class="number">04</span>Attach the exact reference</h2>
<p class="caption" style="margin-top:12px">Selected reference: WIDA ELD Standards Framework, 2020 Edition. This original planning copy is not an official WIDA template or an endorsed lesson.</p>
<p>Use the official entry for your intended grade-level cluster. Blank fields are <mark>to confirm</mark>. Checking field presence does not verify the source or certify alignment.</p>
<label for="sourceUrl">Official document URL<input id="sourceUrl" type="url" placeholder="https://wida.wisc.edu/…"></label>
<div class="fields"><label for="sourceSection">Page or section<input id="sourceSection" type="text"></label><label for="gradeCluster">Grade-level cluster<input id="gradeCluster" type="text"></label></div>
<label for="expectationId">Language Expectation identifier<input id="expectationId" type="text"></label>
<label for="expectationText">Exact expectation text or precise entry reference<textarea id="expectationText"></textarea></label>
<button id="checkReference" type="button">Check reference fields</button>
<p id="referenceFeedback" class="result" role="status" aria-live="polite"></p>
<p class="caption" style="margin-top:16px">Teacher mapping review: pending. Verify the official entry and compare it with the task, function, features, and evidence above. Revisit the mapping after any source or task change. An older planning form's standards checkbox does not establish a 2020 expectation.</p>
</section>
<section class="panel" aria-labelledby="evidenceHeading">
<h2 id="evidenceHeading"><span class="number">05</span>Record only what you observe</h2>
<p>Use these headings in your maintained teacher record during the lesson. This planning page deliberately leaves actual evidence blank.</p>
<dl class="ledger"><div><dt>Actual learner expression</dt><dd class="blank">&nbsp;</dd></div><div><dt>Response mode</dt><dd class="blank">&nbsp;</dd></div><div><dt>Support actually used</dt><dd class="blank">&nbsp;</dd></div><div><dt>Content interpretation</dt><dd class="blank">&nbsp;</dd></div><div><dt>Language interpretation</dt><dd class="blank">&nbsp;</dd></div><div><dt>Feedback and next instruction</dt><dd class="blank">&nbsp;</dd></div></dl>
<p>Keep the anticipated teacher demonstration separate from actual learner work. Review the official entry and transfer the lesson into your required school planning format.</p>
</section>
<footer><p>Changes in this page are temporary and disappear when reloaded. No student record is saved. Planning background: <a href="https://wida.wisc.edu/resources/putting-it-all-together-next-steps-using-2020-edition">WIDA's 2020 Edition next-steps resource</a>. Keep the exact official reference and your school record authoritative.</p></footer>
</main>
<script>
(() => {
'use strict';
const query = selector => document.querySelector(selector);
const referenceFields = [['#sourceUrl','official URL'],['#sourceSection','page or section'],['#gradeCluster','grade-level cluster'],['#expectationId','expectation identifier'],['#expectationText','expectation text or entry reference']];
function checkReference() {
 const missing = referenceFields.filter(([selector]) => !query(selector).value.trim()).map(([,label]) => label);
 query('#referenceFeedback').textContent = missing.length ? 'Missing: ' + missing.join('; ') + '. Draft: alignment pending.' : '5 of 5 reference fields filled. Teacher source verification and mapping review still required. Draft: alignment pending.';
}
function calculate() {
 const drawingCount = Number(query('#drawings').value);
 const rackCapacity = Number(query('#capacity').value);
 if (![drawingCount,rackCapacity].every(value => Number.isInteger(value) && value >= 1 && value <= 60)) {
  query('#calculation').textContent = 'Enter whole numbers from 1 to 60 for both quantities.';
  query('#diagram').replaceChildren();
  query('#diagramNote').textContent = 'No diagram shown for invalid quantities.';
  return;
 }
 const needed = Math.ceil(drawingCount / rackCapacity);
 const availablePlaces = 2 * rackCapacity;
 const shortage = Math.max(0,drawingCount - availablePlaces);
 query('#calculation').textContent = 'Minimum racks: ' + needed + '.\nTwo available racks: ' + availablePlaces + ' places. ' + (shortage ? 'Shortage: ' + shortage + ' places.' : 'Unused places: ' + (availablePlaces-drawingCount) + '.') + '\nOne rack leaves ' + Math.max(0,drawingCount-rackCapacity) + ' drawings without a place.';
 query('#diagram').replaceChildren();
 for (let rackIndex=0; rackIndex<2; rackIndex++) {
  const rack = document.createElement('div'); rack.className='rack';
  const title = document.createElement('p'); title.textContent='Rack ' + (rackIndex+1) + ' · ' + rackCapacity + ' places'; rack.appendChild(title);
  const slots = document.createElement('div'); slots.className='slots'; slots.setAttribute('aria-hidden','true');
  for(let placeIndex=0;placeIndex<rackCapacity;placeIndex++) {
   const token = document.createElement('span'); token.className='token' + (rackIndex*rackCapacity+placeIndex<drawingCount?' filled':''); slots.appendChild(token);
  }
  rack.appendChild(slots); query('#diagram').appendChild(rack);
 }
 query('#diagramNote').textContent = 'Filled squares represent drawings. Empty squares represent unused places.' + (shortage ? ' ' + shortage + ' drawings remain off the two racks.' : '');
}
function chooseExplanation(usesQuantities) {
 query('#generalReason').setAttribute('aria-pressed',String(!usesQuantities));
 query('#quantityReason').setAttribute('aria-pressed',String(usesQuantities));
 query('#answerFeedback').textContent = usesQuantities ? 'B connects six places to ten drawings. One rack leaves four drawings without a place; two racks provide twelve places. This explains why two are needed.' : 'A gives a general reason to use racks. It does not connect six places to ten drawings or explain why two racks are needed. Compare it with B.';
}
query('#calculate').addEventListener('click',calculate);
query('#checkReference').addEventListener('click',checkReference);
query('#generalReason').addEventListener('click',() => chooseExplanation(false));
query('#quantityReason').addEventListener('click',() => chooseExplanation(true));
referenceFields.forEach(([selector]) => query(selector).addEventListener('input',() => {query('#referenceFeedback').textContent='Reference changed. Check field completeness again; teacher mapping review remains pending.';}));
calculate(); checkReference();
})();
</script>
</body>
</html>