Business studies • badge cost lab — Help learners classify a supplied fixed setup cost and per-unit cost, compute total modeled revenue/cost at several quantities and explain…

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>Business studies • badge cost lab</title><style>*{box-sizing:border-box}body{margin:0;background:var(--bg,#eef3f6);color:#172a39;font:16px/1.5 system-ui,sans-serif}main{max-width:1200px;margin:auto;padding:28px}h1{font-size:clamp(27px,4vw,42px);line-height:1.12;margin:8px 0 12px;letter-spacing:-.035em}h2{font-size:23px;line-height:1.2;margin:0 0 18px}h3{font-size:17px;margin:14px 0 8px}p{margin:8px 0 16px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.15em;font-weight:800;color:var(--accent,#176b71)}.lead{max-width:75ch;color:#405568}.panel{background:#fff;border:1px solid #cdd9e1;border-radius:14px;padding:24px;margin:18px 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.wide{grid-template-columns:1.6fr 1fr}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.metric{border-left:4px solid var(--accent,#176b71);background:#f4f8fa;padding:18px}.big{display:block;font-size:36px;font-weight:800;line-height:1.2}.muted,small{color:#536879;font-size:14px}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}button{background:var(--accent,#176b71);color:white;border:2px solid transparent;border-radius:8px;padding:10px 16px;min-height:44px;cursor:pointer;font:inherit;font-weight:650}button.secondary{background:#e8eff4;color:#172a39}button:disabled{opacity:.48;cursor:default}button[aria-pressed=true]{outline:3px solid #172a39;outline-offset:2px}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #de7616;outline-offset:3px}label{display:block;font-weight:650;margin:12px 0 6px}input,select,textarea{font:inherit;color:inherit;border:1px solid #8b9eae;border-radius:6px;background:white;padding:10px;width:100%;min-height:44px}textarea{resize:vertical;min-height:110px}input[type=checkbox]{width:22px;min-height:22px;vertical-align:middle}table{border-collapse:collapse;width:100%;font-size:14px}th{text-align:left;background:#eff4f7;color:#3d5261}th,td{padding:12px;border-bottom:1px solid #dce5eb;vertical-align:top}.scroll{overflow-x:auto}caption{text-align:left;margin-bottom:12px;font-weight:700}.notice{background:#eef5f9;border-left:4px solid #628ba1;padding:14px;margin:14px 0}.error{color:#9c2924;font-weight:650}.pill{display:inline-block;border-radius:30px;padding:4px 10px;background:#e5f3ee;color:#17614f;font-size:13px;font-weight:750}.draft{white-space:pre-wrap;font:17px/1.65 Georgia,serif}.rule{display:block;width:100%;text-align:left;margin:10px 0}.rule strong{font-size:26px}details{margin:18px 0}summary{cursor:pointer;font-weight:700;padding:12px;background:#e9eff3;border-radius:6px;min-height:44px}footer{margin:30px 0;color:#536879;font-size:14px}ol,ul{padding-left:23px}.time-input{max-width:90px}.section-no{font-size:52px;color:#b5c8d5;font-weight:800;line-height:1}.tag{font-weight:700;color:var(--accent,#176b71)}[hidden]{display:none!important}@media(max-width:760px){main{padding:18px}.grid,.wide{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr}.panel{padding:18px}.big{font-size:30px}th,td{padding:9px}}:root{--accent:#216b8a;--bg:#eef3f8}.metric .big{font-size:30px}#comparison-graph{width:100%;max-height:150px;margin:12px 0}.scroll input{min-width:95px}.scroll th{white-space:nowrap}</style></head><body><main>
<span class="eyebrow">Classroom model / illustrative US dollars</span><h1>Revenue alone does not cover the costs.</h1><p class="lead">Compare the same quantity of produced and sold paper badges.</p><section class="panel"><div class="grid wide"><div><h2 id="case-title">Four badges / compare both sides</h2><div class="metric-grid"><div class="metric">Modeled revenue<strong class="big" id="revenue"></strong></div><div class="metric">Total modeled cost<strong class="big" id="cost"></strong></div><div class="metric">Modeled difference<strong class="big" id="difference"></strong></div></div><p id="calculation" class="notice" aria-live="polite"></p><svg id="comparison-graph" viewBox="0 0 500 130" role="img" aria-label="Revenue and modeled cost bars"></svg><p id="break-even" class="tag"></p></div><div><h2>Cost cards / one exercise period</h2><label for="fixed">Fixed setup, USD</label><input id="fixed" type="number" value="12"><label for="variable">Variable cost per badge, USD</label><input id="variable" type="number" value="1"><label for="price">Selling price per badge, USD</label><input id="price" type="number" value="3"><label for="quantity">Produced and sold quantity, whole badges</label><input id="quantity" type="number" value="4"><div class="row"><button type="button" id="case-four" class="secondary">Compare q = 4</button><button type="button" id="case-six">Compare q = 6</button><button type="button" id="restore-model" class="secondary">Restore original cost cards</button></div></div></div><p id="model-error" class="error" role="status"></p><p>Assumption: all produced units are sold at the stated price in this exercise period. Demand, unsold inventory, taxes, wages, financing and other real costs are not supplied.</p></section>
<section class="panel"><h2>Learner ledger / original F12, V1, P3 model</h2><p>Enter your calculations. Check the numerical ledger separately from your explanation.</p><div class="scroll"><table><thead><tr><th>q</th><th>Your revenue, USD</th><th>Your total cost, USD</th><th>Your difference, USD</th><th>Feedback</th></tr></thead><tbody><tr><th>0</th><td><label for="ledger-0-r" class="muted">q0 revenue</label><input id="ledger-0-r" type="number" step="0.01"></td><td><label for="ledger-0-c" class="muted">q0 cost</label><input id="ledger-0-c" type="number" step="0.01"></td><td><label for="ledger-0-d" class="muted">q0 difference</label><input id="ledger-0-d" type="number" step="0.01"></td><td id="ledger-feedback-0">Not checked.</td></tr><tr><th>4</th><td><label for="ledger-1-r" class="muted">q4 revenue</label><input id="ledger-1-r" type="number" step="0.01"></td><td><label for="ledger-1-c" class="muted">q4 cost</label><input id="ledger-1-c" type="number" step="0.01"></td><td><label for="ledger-1-d" class="muted">q4 difference</label><input id="ledger-1-d" type="number" step="0.01"></td><td id="ledger-feedback-1">Not checked.</td></tr><tr><th>5</th><td><label for="ledger-2-r" class="muted">q5 revenue</label><input id="ledger-2-r" type="number" step="0.01"></td><td><label for="ledger-2-c" class="muted">q5 cost</label><input id="ledger-2-c" type="number" step="0.01"></td><td><label for="ledger-2-d" class="muted">q5 difference</label><input id="ledger-2-d" type="number" step="0.01"></td><td id="ledger-feedback-2">Not checked.</td></tr><tr><th>6</th><td><label for="ledger-3-r" class="muted">q6 revenue</label><input id="ledger-3-r" type="number" step="0.01"></td><td><label for="ledger-3-c" class="muted">q6 cost</label><input id="ledger-3-c" type="number" step="0.01"></td><td><label for="ledger-3-d" class="muted">q6 difference</label><input id="ledger-3-d" type="number" step="0.01"></td><td id="ledger-feedback-3">Not checked.</td></tr><tr><th>7</th><td><label for="ledger-4-r" class="muted">q7 revenue</label><input id="ledger-4-r" type="number" step="0.01"></td><td><label for="ledger-4-c" class="muted">q7 cost</label><input id="ledger-4-c" type="number" step="0.01"></td><td><label for="ledger-4-d" class="muted">q7 difference</label><input id="ledger-4-d" type="number" step="0.01"></td><td id="ledger-feedback-4">Not checked.</td></tr></tbody></table></div><button type="button" id="check-ledger">Check original-model ledger</button><label for="counterclaim">Explain why q = 4 has not broken even</label><textarea id="counterclaim"></textarea><label for="demand-limit">What does cost equality establish, and what does it not tell us about buyers?</label><textarea id="demand-limit"></textarea><p class="muted">Written explanations require teacher review; the numerical check does not grade them.</p></section>
<section class="panel"><h2>Independent exit / different cost cards</h2><p>F = $15, V = $1 per unit, P = $4 per unit. Keep the whole-unit and all-sold assumptions. Find break-even and verify revenue and total cost.</p><label for="exit-ledger">Your independent quantity / revenue / cost ledger</label><textarea id="exit-ledger"></textarea><label for="exit-explanation">Your independent explanation and demand limitation</label><textarea id="exit-explanation"></textarea></section><section class="panel"><h2>35-minute lesson sequence</h2><div class="scroll"><table><caption>Editable planned minutes</caption><thead><tr><th>Activity</th><th>Minutes</th><th>Elapsed</th></tr></thead><tbody><tr><td>Cost cards / assumptions</td><td><label class="muted" for="t-0">Cost cards / assumptions minutes</label><input class="time-input" id="t-0" type="number" min="1" max="120" value="5"></td><td id="t-range-0"></td></tr><tr><td>Model q = 0 and q = 4</td><td><label class="muted" for="t-1">Model q = 0 and q = 4 minutes</label><input class="time-input" id="t-1" type="number" min="1" max="120" value="8"></td><td id="t-range-1"></td></tr><tr><td>Partner quantities 5, 6 and 7</td><td><label class="muted" for="t-2">Partner quantities 5, 6 and 7 minutes</label><input class="time-input" id="t-2" type="number" min="1" max="120" value="10"></td><td id="t-range-2"></td></tr><tr><td>Counterclaim: revenue is not profit</td><td><label class="muted" for="t-3">Counterclaim: revenue is not profit minutes</label><input class="time-input" id="t-3" type="number" min="1" max="120" value="7"></td><td id="t-range-3"></td></tr><tr><td>Independent exit model</td><td><label class="muted" for="t-4">Independent exit model minutes</label><input class="time-input" id="t-4" type="number" min="1" max="120" value="5"></td><td id="t-range-4"></td></tr></tbody></table></div><p id="t-total" class="tag" aria-live="polite"></p><button type="button" id="t-restore" class="secondary">Restore original timing</button><label for="learner-text">Clean learner task — no teacher answers</label><textarea id="learner-text" readonly></textarea><button type="button" id="select-learner-text" class="secondary">Select text</button><p id="learner-text-status" class="muted">Select the text, then use your device’s copy command. Nothing is saved.</p></section><details><summary>Separate teacher reference</summary><p>Original key (q: revenue, cost, difference): 0: 0,12,−12; 4: 12,16,−4; 5: 15,17,−2; 6: 18,18,0; 7: 21,19,+2. Contribution is $2 per sold badge, not revenue or complete business profit. Break-even is six units; $18 revenue is not $18 profit.</p><p>Exit: 15/(4−1) = 5 units; revenue20, cost20, difference0. At q4: revenue16, cost19, difference−3. No demand evidence is supplied.</p></details><footer>Simplified teaching model and local lesson companion, not a sales forecast, transaction or complete business-profit calculation. No learner evidence is collected or saved.</footer></main><script>const $=id=>document.getElementById(id);const on=(id,fn)=>$(id).addEventListener('click',fn);const text=(id,value)=>$(id).textContent=value;const bind=(id,fn,event='input')=>$(id).addEventListener(event,fn);const selectText=id=>{if(!$(id).value){text(id+'-status','Complete the required fields before selecting text.');return;}$(id).focus();$(id).select();text(id+'-status','Text selected. Use your device’s copy command; nothing has been sent or saved.');};
const NL=String.fromCharCode(10);const ledgerQ=[0,4,5,6,7];function numbers(){const v=['fixed','variable','price','quantity'].map(k=>$(k).value);if(v.some(x=>x.trim()===''||!Number.isFinite(+x)||+x<0)||!Number.isInteger(+v[3])||v.some(x=>+x>1000000))return null;return v.map(Number);}function model(f,v,p,q){if([f,v,p,q].some(n=>!Number.isFinite(n)||n<0)||!Number.isInteger(q))return null;return {revenue:p*q,cost:f+v*q,difference:p*q-f-v*q,contribution:p-v,breakEven:f===0?0:p>v?f/(p-v):null};}const dollars=n=>(n<0?'−':'')+'$'+Math.abs(n).toFixed(2);function draw(){const n=numbers(),r=n?model(...n):null;text('model-error',r?'':'Enter nonnegative finite costs/prices and a whole quantity. Maximum input: 1,000,000.');if(!r){['revenue','cost','difference','calculation','break-even'].forEach(k=>text(k,'—'));$('comparison-graph').innerHTML='';return;}const [f,v,p,q]=n;text('case-title',q+' badges / same quantity on both sides');text('revenue',dollars(r.revenue));text('cost',dollars(r.cost));text('difference',dollars(r.difference));text('calculation',p+' × '+q+' = '+r.revenue+' revenue; '+f+' + '+v+' × '+q+' = '+r.cost+' cost; difference = '+r.difference+'.');text('break-even','Contribution: '+dollars(r.contribution)+' per badge. '+(r.breakEven===null?'No finite break-even quantity with positive setup and price ≤ variable cost.':r.breakEven===0?'At q = 0, revenue and modeled cost are equal.':Number.isInteger(r.breakEven)?'Break-even: '+r.breakEven+' badges; cost equality within this model.':'Exact equality: '+r.breakEven.toFixed(3)+' units; no whole-unit equality. First whole quantity covering cost: '+Math.ceil(r.breakEven)+'.'));const scale=Math.max(r.revenue,r.cost,1);$('comparison-graph').innerHTML='<text x="0" y="26" fill="#23364c">Revenue '+dollars(r.revenue)+'</text><rect x="0" y="36" width="'+450*r.revenue/scale+'" height="22" fill="#287e9b"/><text x="0" y="86" fill="#23364c">Modeled cost '+dollars(r.cost)+'</text><rect x="0" y="96" width="'+450*r.cost/scale+'" height="22" fill="#be6c35"/>';}['fixed','variable','price','quantity'].forEach(k=>bind(k,draw));on('case-four',()=>{$('quantity').value='4';draw();});on('case-six',()=>{$('quantity').value='6';draw();});on('restore-model',()=>{['fixed','variable','price','quantity'].forEach((k,i)=>$(k).value=String([12,1,3,4][i]));draw();});ledgerQ.forEach((_,i)=>['r','c','d'].forEach(k=>bind('ledger-'+i+'-'+k,()=>text('ledger-feedback-'+i,'Edited — check again.'))));on('check-ledger',()=>ledgerQ.forEach((q,i)=>{const vals=['r','c','d'].map(k=>$('ledger-'+i+'-'+k).value),e=[3*q,12+q,2*q-12];text('ledger-feedback-'+i,vals.some(x=>x.trim()==='')?'Unanswered — complete all three amounts.':vals.some(x=>!Number.isFinite(+x))?'Use finite numerical amounts.':vals.every((x,j)=>Math.abs(+x-e[j])<0.005)?'All three amounts match this model.':'Recheck 3q, 12 + q, then revenue − cost.');}));function learner(){const s=schedule();$('learner-text').value=s?['PAPER BADGE MODEL / '+s.total+'-minute lesson','Fixed setup $12 per exercise period; variable $1/badge; price $3/badge. All produced units are sold; quantity is whole nonnegative badges.','Complete revenue, total modeled cost and difference for q = 0, 4, 5, 6, 7.','Explain why q = 4 has not broken even.','What does the model establish? What does it not tell us about buyers?','Independent cards: F15, V1/unit, P4/unit. Find break-even, verify revenue and cost, and explain a limit.','No demand evidence or complete real-business costs are supplied.'].join(NL):'';}on('select-learner-text',()=>selectText('learner-text'));draw();const timeNames=["Cost cards / assumptions","Model q = 0 and q = 4","Partner quantities 5, 6 and 7","Counterclaim: revenue is not profit","Independent exit model"],timeDefaults=[5,8,10,7,5];function schedule(){let total=0;const blocks=[];for(let i=0;i<timeDefaults.length;i++){const v=$('t-'+i).value;if(!/^\d+$/.test(v)||+v<1||+v>120)return null;blocks.push({start:total,end:total+(+v)});total+=+v;}return {total,blocks};}function updateTiming(){const s=schedule();text('t-total',s?s.total+' minutes':'Timing incomplete');timeDefaults.forEach((_,i)=>text('t-range-'+i,s?s.blocks[i].start+'–'+s.blocks[i].end+' min':'—'));learner();}timeDefaults.forEach((_,i)=>bind('t-'+i,updateTiming));on('t-restore',()=>{timeDefaults.forEach((v,i)=>$('t-'+i).value=String(v));updateTiming();});updateTiming();globalThis.app={model,numbers,schedule};</script></body></html>