Milk or cartons? — Have learners distinguish the quantity of a food substance from the number of individual items or containers, and select much/many from…

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>Milk or cartons?</title><style>*{box-sizing:border-box}body{margin:0;font:16px/1.55 system-ui,sans-serif;color:var(--ink);background:var(--bg)}main{max-width:1120px;margin:auto;padding:30px}h1{font-size:clamp(30px,4vw,44px);line-height:1.12;letter-spacing:-.035em;margin:5px 0 12px}h2{font-size:23px;line-height:1.3;margin:0 0 15px}h3{font-size:17px;margin:0 0 8px}p{margin:0 0 12px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:750;color:var(--accent)}.small,footer{font-size:13px;color:var(--muted)}footer{margin:27px 0}.panel{background:white;border:1px solid var(--line);padding:23px;border-radius:9px;margin-top:22px}.two{display:grid;grid-template-columns:1.35fr 1fr;gap:23px}.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}button{font:700 14px system-ui;min-height:44px;padding:10px 16px;border:1px solid var(--accent);background:var(--accent);color:white;border-radius:5px;cursor:pointer}button.secondary{color:var(--accent);background:white}button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--ink)}button:disabled{opacity:.45;cursor:default}:focus-visible{outline:3px solid #d28b25;outline-offset:3px}label{display:block;font-size:13px;font-weight:650}input,textarea,select{display:block;width:100%;padding:11px;font:16px/1.5 system-ui;color:var(--ink);background:white;border:1px solid #9baab6;border-radius:4px;margin:6px 0 15px}textarea{min-height:100px;resize:vertical}.error{color:#a02b20;font-size:14px;min-height:23px}.result{font-size:40px;line-height:1.25;letter-spacing:-.04em;font-weight:750}.notice{padding:15px;background:#fff3db;border-left:4px solid #cf9d3e;font-size:14px;margin:16px 0}details{margin-top:23px;border-top:1px solid var(--line);padding-top:15px}summary{cursor:pointer;min-height:44px;font-weight:700}.time-row{display:grid;grid-template-columns:75px 1fr 70px;gap:14px;padding:15px 0;border-top:1px solid var(--line)}.time-row p{font-size:14px;margin:5px 0}.time-row input{margin:0;text-align:center}.range{font-size:13px;font-weight:700;color:var(--accent)}[hidden]{display:none!important}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 ui-monospace,Consolas,monospace} @media(max-width:740px){main{padding:23px 16px}.two{grid-template-columns:1fr;gap:0}.panel{padding:20px}}@media(max-width:380px){main{padding:20px 12px}.panel{padding:17px}.time-row{grid-template-columns:1fr 65px}.range{grid-column:1/-1}.row button{flex:1}}:root{--ink:#4c4430;--bg:#faf7ed;--accent:#70804b;--muted:#80765e;--line:#dddcc8}.pantry{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:25px}.food-card{background:white;border:1px solid var(--line);border-radius:12px;padding:20px}.art{height:95px;display:flex;align-items:center;justify-content:center;gap:10px}.apple{width:33px;height:37px;background:#c66b52;border-radius:45% 45% 48% 48%;border-top:5px solid #627a40}.carton{width:57px;height:83px;background:#d5e9ee;border:2px solid #699aa5;border-top:16px solid #83b3bd;text-align:center;padding-top:12px;font-size:14px;color:#326475}.bag{width:48px;height:68px;background:#ebdab3;border-radius:8px 8px 17px 17px;border-top:8px solid #b4a17b;text-align:center;font-size:11px;padding-top:14px}.question{font:30px/1.45 Georgia,serif;margin:20px 0}.question mark{background:#f1dea5;color:inherit;padding:0 4px}.wordchoices button{min-width:120px;font-size:24px;min-height:60px}.referent{padding:19px;background:#f0f2e6;border-radius:8px}.food-card p{font-size:14px}@media(max-width:620px){.pantry{grid-template-columns:1fr}.food-card{display:grid;grid-template-columns:105px 1fr;gap:10px}.food-card .art{grid-row:1/3}.food-card p{margin:0}.question{font-size:27px}}</style></head><body><main><p class="eyebrow">Quantity language · original fictional pantry</p><h1>Milk or cartons?</h1><p>Choose much or many for the noun the question actually asks about.</p><section class="pantry"><div class="food-card"><div class="art" aria-hidden="true"><i class="apple"></i><i class="apple"></i><i class="apple"></i></div><h3>F01 · apples</h3><p>Three individual apples.</p></div><div class="food-card"><div class="art" aria-hidden="true"><div class="carton">1 L</div></div><h3>F02 · milk</h3><p>One sealed full carton labeled one liter of milk.</p></div><div class="food-card"><div class="art" aria-hidden="true"><div class="bag">500 g</div><div class="bag">500 g</div></div><h3>F03 · rice</h3><p>Two sealed bags, each labeled 500 grams.</p></div></section><div class="two"><section class="panel"><div class="row"><button id="item-Q1" type="button" class="secondary">Apples</button><button id="item-Q2" type="button">Milk</button><button id="item-Q3" type="button" class="secondary">Cartons</button><button id="item-Q4" type="button" class="secondary">Bags</button></div><p class="question">How ___ <mark id="head-noun">milk</mark><span id="question-after"> is in F02?</span></p><div class="row wordchoices"><button id="choose-much" type="button" class="secondary" aria-pressed="false">much</button><button id="choose-many" type="button" class="secondary" aria-pressed="false">many</button></div><div class="row" style="margin-top:18px"><button id="check" type="button">Check noun choice</button><button id="retry" type="button" class="secondary">Clear this item</button><button id="reset" type="button" class="secondary">Reset all four</button></div><div class="notice" role="status"><strong id="verdict">Not answered.</strong><p id="feedback">Choose much or many, then check.</p></div><p id="count">0 of 4 checked correct</p></section><aside class="panel"><h2>Keep the same pantry fact</h2><div id="referent" class="referent">F02: one sealed full carton labeled one liter of milk.</div><p id="quantity" class="small" style="margin-top:15px">The supplied milk quantity is one liter; the container count is one carton.</p><label for="reason">Your explanation for this question · teacher review<textarea id="reason"></textarea></label><p class="small">Written reasons are not graded automatically.</p></aside></div><details><summary>Separate teacher key and label reasoning</summary><p>Q1 many/apples: individual items. Q2 much/milk: substance in this sentence. Q3 many/cartons: containers. Q4 many/bags: containers. Same F02 fact, different head noun.</p><p>F03 total: 2 × 500 = 1,000 grams because each bag’s label supplies 500 grams. Two unlabeled bags alone would not establish mass. Countability is scoped to these sentences; serving/type uses in other contexts are not banned.</p></details><footer>Original labels and schematics, not food measurements, a dietary plan or live inventory. Local checked-item count is at most four; no explanation grading, submitted order, saved grade or learner collection.</footer></main><script>
'use strict';const $=id=>document.getElementById(id);

const items={Q1:{noun:'apples',after:' are in F01?',key:'many',record:'F01: three individual apples.',quantity:'Three apples are individual countable items.'},Q2:{noun:'milk',after:' is in F02?',key:'much',record:'F02: one sealed full carton labeled one liter of milk.',quantity:'The supplied milk quantity is one liter; the container count is one carton.'},Q3:{noun:'cartons',after:' of milk are in F02?',key:'many',record:'F02: one sealed full carton labeled one liter of milk.',quantity:'One carton is counted here. It is not the wording “one milk.”'},Q4:{noun:'bags',after:' of rice are in F03?',key:'many',record:'F03: two sealed bags, each labeled 500 grams of rice.',quantity:'Two bags; labeled total 2 × 500 = 1,000 grams. Without labels, mass would be unknown.'}};const state=Object.fromEntries(Object.keys(items).map(id=>[id,{choice:null,checked:false,reason:''}]));let current='Q2';function assess(id,choice){const q=items[id];if(choice===null)return{title:'Not answered.',message:'Choose much or many, then check.'};if(choice===q.key)return{title:'The word fits the requested noun.',message:q.key+' fits '+q.noun+' here. '+q.quantity};if(id==='Q2')return{title:'This asks about the substance.',message:'Use much with milk in this sentence. The label supplies one liter. If the question asked about cartons, many would fit that container noun.'};return{title:'This counts items or containers.',message:'Use many with '+q.noun+'. '+q.quantity};}function score(){return Object.keys(items).filter(id=>state[id].checked&&state[id].choice===items[id].key).length;}function render(){const q=items[current],s=state[current];$('head-noun').textContent=q.noun;$('question-after').textContent=q.after;$('referent').textContent=q.record;$('quantity').textContent=q.quantity;$('reason').value=s.reason;for(const id of Object.keys(items))$('item-'+id).setAttribute('aria-pressed',String(id===current));for(const w of['much','many'])$('choose-'+w).setAttribute('aria-pressed',String(s.choice===w));const r=s.checked?assess(current,s.choice):{title:s.choice?'Not checked.':'Not answered.',message:'Choose much or many, then check.'};$('verdict').textContent=r.title;$('feedback').textContent=r.message;$('count').textContent=score()+' of 4 checked correct';}for(const id of Object.keys(items))$('item-'+id).addEventListener('click',()=>{current=id;render();});for(const w of['much','many'])$('choose-'+w).addEventListener('click',()=>{state[current].choice=w;state[current].checked=false;render();});$('reason').addEventListener('input',()=>{state[current].reason=$('reason').value;});$('check').addEventListener('click',()=>{state[current].checked=state[current].choice!==null;render();});$('retry').addEventListener('click',()=>{state[current]={choice:null,checked:false,reason:''};render();});$('reset').addEventListener('click',()=>{for(const id of Object.keys(items))state[id]={choice:null,checked:false,reason:''};current='Q2';render();});render();
</script></body></html>