Give every arrow a job.

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"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data:; connect-src 'none'; form-action 'none'; base-uri 'none'"><title>Give every arrow a job.</title><style>:root{--accent:#365b46;--wash:#e9f0e7;--paper:#f6f7f1}
*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:var(--paper,#f6f4ee);color:#222b32;font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:1040px;margin:0 auto;padding:32px}header{padding-bottom:20px;border-bottom:2px solid var(--accent);margin-bottom:24px}.eyebrow{font-size:12px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}h1{font:600 clamp(28px,4.5vw,40px)/1.13 Georgia,serif;letter-spacing:-.025em;margin:0 0 12px;max-width:760px}h2{font-size:21px;line-height:1.3;margin:0 0 12px}h3{font-size:17px;line-height:1.4;margin:0 0 8px}p{margin:0 0 12px}p:last-child{margin-bottom:0}.lede{max-width:740px;color:#47545c}.small{font-size:13px;line-height:1.5;color:#53616b}.tag{display:inline-block;font:700 12px/1.4 system-ui,sans-serif;letter-spacing:.02em;padding:4px 8px;background:var(--wash);color:var(--accent)}.split{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:28px}.split>*{min-width:0}.panel{padding:22px;background:#fff;border:1px solid #cbd1d1}.callout{padding:16px 20px;border-left:4px solid var(--accent);background:var(--wash);margin-bottom:20px}.warning{background:#fff2df;border-left-color:#8a4c17}.section{margin-top:26px}.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}button,input,select,textarea{font:inherit}button,select,summary{min-height:44px}button{background:#fff;color:#24313c;border:1px solid #9aa6aa;border-radius:5px;padding:9px 13px;cursor:pointer;text-align:left;line-height:1.4}button:hover{background:var(--wash)}button[aria-pressed=true],button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}:is(button,input,select,textarea,summary,a):focus-visible{outline:3px solid #bb5b1d;outline-offset:3px}select{width:100%;padding:9px;border:1px solid #859397;background:white;color:#222b32;border-radius:4px}textarea{width:100%;padding:12px;min-height:100px;border:1px solid #859397;border-radius:4px}label{cursor:pointer}input[type=radio]{width:20px;height:20px;accent-color:var(--accent);vertical-align:middle}fieldset{min-width:0;border:1px solid #c4cece;margin:0 0 16px;padding:18px}legend{font-weight:700;padding:0 7px}.choice{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;min-height:44px;border:1px solid #cbd1d1;background:white;margin-right:8px;margin-bottom:8px;border-radius:4px}.choice:has(input:checked){border-color:var(--accent);background:var(--wash)}.feedback{padding:10px 12px;background:#edf1f3;font-size:14px;margin-top:12px;min-height:44px}.feedback[data-state=correct]{background:#e4f1e9;color:#194c35}.feedback[data-state=incorrect]{background:#fff0e3;color:#79451f}details{border-top:1px solid #cbd1d1;margin-top:14px}summary{padding:10px 0;font-weight:650;cursor:pointer}details>div,details>p{padding-bottom:12px}.list{list-style:none;padding:0;margin:0}.list>li{padding:13px 0;border-bottom:1px solid #d2d9da}.list b{display:block}dl{margin:0}dt{font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.07em;color:#53616b;margin-top:14px}dt:first-child{margin-top:0}dd{margin:3px 0 0}table{width:100%;border-collapse:collapse;font-size:14px}caption{text-align:left;font-weight:700;margin-bottom:10px}th,td{padding:12px 9px;border-bottom:1px solid #cbd1d1;text-align:left;vertical-align:top}th{font-size:12px;color:#52616c;letter-spacing:.04em;background:var(--wash)}td .mobile-label{display:none}.rule{padding:16px 0;border-top:1px solid #cbd1d1;margin-top:24px}footer{margin-top:30px;padding-top:16px;border-top:1px solid #bac7cb;font-size:13px;color:#53616b}[hidden]{display:none!important}svg{display:block;max-width:100%;height:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.number{font-variant-numeric:tabular-nums}.empty{color:#754d23;font-weight:650}.row-button{width:100%;border:0;border-bottom:1px solid #cbd1d1;border-radius:0;padding:14px;background:transparent}.row-button[aria-pressed=true]{background:var(--wash);color:var(--accent);border-left:4px solid var(--accent)}.row-button small{display:block;font-size:12px;margin-bottom:4px}.rows{border-top:1px solid #cbd1d1}.timeline{list-style:none;padding:0;margin:0}.timeline li{padding:12px 0 12px 18px;border-left:2px solid #b8c5ca;position:relative}.timeline li:before{content:'';position:absolute;width:8px;height:8px;left:-5px;top:23px;background:var(--accent);border-radius:50%}.timeline time{font-size:12px;font-weight:750;color:var(--accent);display:block}main>*{overflow-wrap:break-word}
@media(max-width:760px){main{padding:24px}.split{grid-template-columns:1fr;gap:20px}h1{font-size:31px}}@media(max-width:480px){main{padding:18px 16px}h1{font-size:28px}.panel{padding:16px}header{margin-bottom:18px}table.responsive,table.responsive tbody,table.responsive tr,table.responsive td{display:block;width:100%}table.responsive thead{display:none}table.responsive tr{border-bottom:1px solid #aebec2;padding:10px 0}table.responsive td{border:0;padding:4px 0}td .mobile-label{display:inline;font-weight:650}fieldset{padding:14px}.toolbar button{flex:1 1 auto}}@media print{body{background:white}main{max-width:none;padding:0}button{color:black!important;background:white!important}.panel{break-inside:avoid}footer{margin-top:18px}}
.mobile-flow{display:none}.plant-diagram{background:#e8eee5;border:1px solid #b8c8b9;padding:14px}.placement-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}.placement{border-top:3px solid #698271;padding-top:12px}.placement:last-child{border-top-color:#a0602e}.placement label{display:block;margin-bottom:8px}@media(max-width:480px){.plant-diagram{display:none}.mobile-flow{display:block;background:#e8eee5;border:1px solid #b8c8b9;padding:16px;margin-bottom:12px}.mobile-flow>div{padding:9px 0;border-bottom:1px solid #bfcec2}.mobile-flow span{display:block;font-size:16px}.flow-boundary{border:2px dashed #829b8b!important;padding:14px!important;margin:10px 0;font-weight:700;text-align:center}.flow-input:first-of-type{color:#784218}.placement-grid{grid-template-columns:1fr}.plant-diagram svg text{font-size:16px}}</style></head><body><main><header><p class="eyebrow">Photosynthesis · Matter and energy · Overview model</p><h1>Give every arrow a job.</h1><p class="lede">Place five labels, then explain which input supplies energy and which inputs supply matter. No dragging is needed.</p></header>
<section class="plant-diagram"><svg viewBox="0 0 640 340" role="img" aria-labelledby="plant-title plant-desc"><title id="plant-title">Simplified photosynthesis overview</title><desc id="plant-desc">A and B are matter arrows into the process from the left. C and D are matter arrows out to the right. E is an energy arrow entering from above. The five matching choices follow the diagram.</desc><defs><marker id="arrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0 0L8 4L0 8Z" fill="#315747"/></marker><marker id="energy-arrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0 0L8 4L0 8Z" fill="#975520"/></marker></defs><rect x="218" y="103" width="204" height="207" rx="12" fill="#fff" stroke="#829b8b" stroke-width="2" stroke-dasharray="6 4"/><text x="320" y="129" text-anchor="middle" font-size="13" fill="#345744">SIMPLIFIED PHOTOSYNTHESIS</text><text x="320" y="147" text-anchor="middle" font-size="13" fill="#345744">OVERVIEW</text><path d="M320 261C277 245 265 206 292 178C329 175 352 199 320 261Z" fill="#619077"/><path d="M320 273L307 194" stroke="#294e39" stroke-width="3"/><path d="M42 187H215M42 268H215M425 187H598M425 268H598" stroke="#315747" stroke-width="3" marker-end="url(#arrow)"/><path d="M320 53V101" stroke="#975520" stroke-width="3" stroke-dasharray="7 4" marker-end="url(#energy-arrow)"/><g font-family="system-ui,sans-serif" font-size="15" fill="#243b30"><text x="40" y="160">A · Matter in</text><text id="diagram-A" x="40" y="210">Not answered</text><text x="40" y="244">B · Matter in</text><text id="diagram-B" x="40" y="292">Not answered</text><text x="441" y="160">C · Matter out</text><text id="diagram-C" x="441" y="210">Not answered</text><text x="441" y="244">D · Matter out</text><text id="diagram-D" x="441" y="292">Not answered</text><text x="320" y="24" text-anchor="middle">E · Energy in</text><text id="diagram-E" x="320" y="46" text-anchor="middle">Not answered</text></g></svg></section><div class="mobile-flow"><p class="eyebrow">Simplified photosynthesis overview</p><div class="flow-input"><b>E · Energy in ↓</b><span id="mobile-E">Not answered</span></div><div class="flow-input"><b>A · Matter in →</b><span id="mobile-A">Not answered</span></div><div class="flow-input"><b>B · Matter in →</b><span id="mobile-B">Not answered</span></div><div class="flow-boundary">Modeled photosynthesis process</div><div class="flow-output"><b>→ C · Matter out</b><span id="mobile-C">Not answered</span></div><div class="flow-output"><b>→ D · Matter out</b><span id="mobile-D">Not answered</span></div></div><p class="small">System boundary: simplified photosynthesis overview. Arrows show roles and directions, not measured amounts or all whole-plant exchanges.</p>
<div class="placement-grid"><div class="placement"><label for="position-A"><b>A · Matter in</b></label><select id="position-A" data-position="A"><option value="">Choose a label</option><option>Water</option><option>Carbon dioxide</option><option>Carbohydrate</option><option>Oxygen</option><option>Light energy</option></select><p id="position-feedback-A" class="feedback" role="status" data-state="unanswered">Not answered</p></div><div class="placement"><label for="position-B"><b>B · Matter in</b></label><select id="position-B" data-position="B"><option value="">Choose a label</option><option>Water</option><option>Carbon dioxide</option><option>Carbohydrate</option><option>Oxygen</option><option>Light energy</option></select><p id="position-feedback-B" class="feedback" role="status" data-state="unanswered">Not answered</p></div><div class="placement"><label for="position-C"><b>C · Matter out</b></label><select id="position-C" data-position="C"><option value="">Choose a label</option><option>Water</option><option>Carbon dioxide</option><option>Carbohydrate</option><option>Oxygen</option><option>Light energy</option></select><p id="position-feedback-C" class="feedback" role="status" data-state="unanswered">Not answered</p></div><div class="placement"><label for="position-D"><b>D · Matter out</b></label><select id="position-D" data-position="D"><option value="">Choose a label</option><option>Water</option><option>Carbon dioxide</option><option>Carbohydrate</option><option>Oxygen</option><option>Light energy</option></select><p id="position-feedback-D" class="feedback" role="status" data-state="unanswered">Not answered</p></div><div class="placement"><label for="position-E"><b>E · Energy in</b></label><select id="position-E" data-position="E"><option value="">Choose a label</option><option>Water</option><option>Carbon dioxide</option><option>Carbohydrate</option><option>Oxygen</option><option>Light energy</option></select><p id="position-feedback-E" class="feedback" role="status" data-state="unanswered">Not answered</p></div></div><div class="toolbar"><button class="primary" id="check-labels">Check labels</button><button id="reset-labels">Reset diagram</button></div><label for="photo-reason"><b>Explain:</b> Which input supplies energy, and which inputs supply matter?</label><textarea id="photo-reason" placeholder="Explain the difference, not just the positions."></textarea><details id="photo-key"><summary>Teacher key and model limits</summary><div><p>Incoming matter labels may exchange A and B, and outgoing matter labels may exchange C and D. Use each label once. The arrangement below is one valid answer.</p><p><b>A · Water:</b> Water is matter entering the modeled process.</p><p><b>B · Carbon dioxide:</b> Carbon dioxide is matter entering the modeled process.</p><p><b>C · Carbohydrate:</b> Carbohydrate is matter produced by this overview process.</p><p><b>D · Oxygen:</b> Oxygen is matter leaving the modeled process.</p><p><b>E · Light energy:</b> Light supplies energy in this model; it is not one of the material substances being moved.</p><p>This overview does not show light reactions, the Calvin cycle, or intermediate carbohydrate formation. It does not claim direct one-step glucose production or net whole-plant gas exchange.</p></div></details><footer>Original illustrative example · Local controls only. Changes are temporary and clear when this page is reloaded. Keep actual records in your approved source tools.</footer></main><script>const $=s=>document.querySelector(s);const $$=s=>Array.from(document.querySelectorAll(s));function pressed(attr,i){$$('[data-'+attr+']').forEach(b=>b.setAttribute('aria-pressed',String(Number(b.dataset[attr])===i)));}

const positions=[["A","Matter in","Water","Water is matter entering the modeled process."],["B","Matter in","Carbon dioxide","Carbon dioxide is matter entering the modeled process."],["C","Matter out","Carbohydrate","Carbohydrate is matter produced by this overview process."],["D","Matter out","Oxygen","Oxygen is matter leaving the modeled process."],["E","Energy in","Light energy","Light supplies energy in this model; it is not one of the material substances being moved."]];$$('[data-position]').forEach(s=>s.addEventListener('change',()=>{const a=s.dataset.position;$('#diagram-'+a).textContent=s.value||'Not answered';$('#mobile-'+a).textContent=s.value||'Not answered';const out=$('#position-feedback-'+a);out.textContent=s.value?'Ready to check your current label.':'Not answered';out.dataset.state=s.value?'selected':'unanswered';}));$('#check-labels').addEventListener('click',()=>positions.forEach(p=>{const val=$('#position-'+p[0]).value,out=$('#position-feedback-'+p[0]);if(!val){out.textContent='Not answered — choose a label for '+p[0]+'.';out.dataset.state='unanswered';return;}const allowed=p[1]==='Matter in'?['Water','Carbon dioxide']:p[1]==='Matter out'?['Carbohydrate','Oxygen']:['Light energy'];const peer=p[0]==='A'?'B':p[0]==='B'?'A':p[0]==='C'?'D':p[0]==='D'?'C':null;const duplicate=peer&&$('#position-'+peer).value===val;const correct=allowed.includes(val)&&!duplicate;out.textContent=correct?'Correct: '+val+' fits '+p[1].toLowerCase()+'.':duplicate?'Try again: use each material label once.':'Try again: this arrow needs '+p[1].toLowerCase()+', not '+val+'.';out.dataset.state=correct?'correct':'incorrect';}));$('#reset-labels').addEventListener('click',()=>{positions.forEach(p=>{$('#position-'+p[0]).value='';$('#diagram-'+p[0]).textContent='Not answered';$('#mobile-'+p[0]).textContent='Not answered';const out=$('#position-feedback-'+p[0]);out.textContent='Not answered';out.dataset.state='unanswered';});$('#photo-reason').value='';$('#photo-key').open=false;});</script></body></html>