Two views of one Moon

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>Two views of one Moon</title><style>
:root{color-scheme:light;--accent:#344d78;--wash:#e8edf8;--ink:#202d3b;--paper:#fffdf9}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#ecedf3;font:17px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif}main{max-width:980px;margin:auto;padding:28px 24px 40px}header{border-top:6px solid var(--accent);padding:20px 0 24px}.kicker{color:var(--accent);font-weight:750;letter-spacing:.06em;margin:0 0 8px}h1{font:700 clamp(30px,5vw,46px)/1.15 Georgia,serif;margin:0 0 14px;max-width:780px}h2{font-size:23px;line-height:1.3;margin:0 0 14px}h3{font-size:19px;margin:12px 0 8px}p{margin:0 0 16px}button,input,textarea,select{font:inherit}button{background:white;border:1px solid #87949b;color:var(--ink);border-radius:8px;padding:11px 16px;min-height:48px;cursor:pointer;font-weight:650}button:hover{background:var(--wash)}button[aria-pressed=true],button.primary{background:var(--accent);color:white;border-color:var(--accent)}:focus-visible{outline:3px solid #b45a1e;outline-offset:3px}label{display:block;font-weight:650;margin:14px 0 6px}input:not([type=checkbox]):not([type=radio]),textarea,select{display:block;width:100%;min-width:0;max-width:100%;border:1px solid #80909b;border-radius:7px;padding:11px;background:white;color:var(--ink)}input[type=checkbox],input[type=radio]{width:21px;height:21px;accent-color:var(--accent)}textarea{resize:vertical}.panel{background:var(--paper);border:1px solid #ccd2d1;border-radius:12px;padding:24px;margin-bottom:20px}.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.two>.panel{margin:0}.two{margin-bottom:20px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.result{padding:18px;background:var(--wash);border-left:5px solid var(--accent);margin-top:18px;white-space:pre-line;overflow-wrap:anywhere}.note{color:#465565;font-size:16px}.strip{padding:18px;background:var(--wash);border-radius:8px;margin-bottom:18px}table{border-collapse:collapse;width:100%;font-size:16px;table-layout:fixed}th,td{text-align:left;padding:10px 8px;border-bottom:1px solid #cbd0d1;overflow-wrap:anywhere;vertical-align:top}th{background:var(--wash)}ol,ul{padding-left:24px}li+li{margin-top:8px}pre{font-size:16px;white-space:pre-wrap;overflow-wrap:anywhere}code{font-size:16px}.grid{display:grid;gap:5px;max-width:440px}.grid button{padding:5px;min-width:0}.grid input{padding:5px!important;text-align:center;font-weight:750}blockquote{font:500 26px/1.5 Georgia,serif;margin:16px 0}footer{font-size:16px;color:#465565;margin-top:22px}[hidden]{display:none!important}svg{display:block;max-width:100%;height:auto}mark{background:#e0efad;color:var(--ink)}@media(max-width:560px){main{padding:18px 12px 28px}.panel{padding:20px 16px}.two{grid-template-columns:minmax(0,1fr)}h1{font-size:32px}.actions button{flex:1 1 135px}th,td{padding:8px 5px}.grid button{min-height:40px}blockquote{font-size:24px}}
</style></head><body><main><header><p class="kicker">SCIENCE LAB · FOUR-POSITION MODEL</p><h1>Two views of one Moon</h1><p>The whole Moon and the Earth-view disk answer different questions. Choose a position, then explain both.</p></header><div class="actions"><button type="button" id="pos0">Right · 1</button><button type="button" id="pos1">Top · 2</button><button type="button" id="pos2">Left · 3</button><button type="button" id="pos3">Bottom · 4</button></div><div class="two"><section class="panel"><h2>Overhead illumination</h2><svg viewBox="0 0 360 290" role="img" aria-label="Earth center; Sun right. Four Moon markers have their right halves sunlit. Counterclockwise progression right, top, left, bottom."><defs><linearGradient id="lit"><stop offset="50%" stop-color="#344152"/><stop offset="50%" stop-color="#ffe6a3"/></linearGradient></defs><circle cx="145" cy="145" r="95" fill="none" stroke="#8794aa" stroke-dasharray="5 5"/><circle cx="145" cy="145" r="23" fill="#648caa"/><text x="145" y="185" text-anchor="middle">Earth</text><g fill="url(#lit)" stroke="#344152"><circle cx="240" cy="145" r="15"/><circle cx="145" cy="50" r="15"/><circle cx="50" cy="145" r="15"/><circle cx="145" cy="240" r="15"/></g><circle cx="330" cy="145" r="23" fill="#ffdb7c"/><text x="325" y="190" text-anchor="middle">Sun</text><path d="M300 100H270 M300 125H270 M300 165H270" stroke="#9b7330" stroke-width="2"/><text x="145" y="280" text-anchor="middle">Right → top → left → bottom</text></svg><p id="position" class="strip"></p><p class="note">Schematic projection, not to scale. Eclipse events excluded. Every marker's Sun-facing half points right.</p></section><section class="panel"><h2>View from Earth</h2><div id="disk" style="width:110px;height:110px;border:2px solid #344d78;border-radius:50%;margin:20px auto"></div><div id="earthView" class="result" role="status" aria-live="polite"></div><p class="note">Bright portion of the apparent disk. Quarter-disk orientation is illustrative, not a sky direction guarantee.</p></section></div><section class="panel"><h2>Make the distinction</h2><label for="phase">Phase name</label><input id="phase" type="text" value=""><label for="litAnswer">Fraction of the whole Moon sunlit (half / full / none)</label><input id="litAnswer" type="text" value=""><label for="viewAnswer">Bright portion of the Earth-view disk (none / half / full)</label><input id="viewAnswer" type="text" value=""><label for="reason">Explain what changes and what stays constant</label><textarea id="reason" rows="4"></textarea><div class="actions"><button type="button" id="check">Check three answers</button><button type="button" id="reveal">Reveal current key</button><button type="button" id="reset">Reset all positions</button></div><div id="feedback" class="result" role="status" aria-live="polite">Choose a position and complete the answers.</div><div id="key" class="strip" hidden></div></section><footer>Original fictional example. Changes remain in this open page and are not saved.</footer><noscript>JavaScript is required for the local controls. The accompanying article contains worked examples.</noscript></main><script>
(()=>{'use strict';const $=id=>document.getElementById(id);
const cards=[['Right','new moon','none'],['Top','first quarter','half'],['Left','full moon','full'],['Bottom','last quarter','half']];const records=cards.map(()=>['','','','']);let index=0;const fields=['phase','litAnswer','viewAnswer','reason'];const clear=()=>{$('feedback').textContent='Complete the three answers; discuss the reason with your teacher.';$('key').hidden=true;};function show(i){index=i;const c=cards[i];$('position').textContent='Selected projected position: '+c[0];$('earthView').textContent='Directly bright portion: '+c[2]+' of the apparent disk.';$('disk').style.background=c[2]==='full'?'#ffe6a3':c[2]==='none'?'#26354d':'linear-gradient(90deg,#26354d 50%,#ffe6a3 50%)';fields.forEach((id,j)=>$(id).value=records[i][j]);cards.forEach((_,j)=>$('pos'+j).setAttribute('aria-pressed',String(i===j)));clear();}cards.forEach((_,i)=>$('pos'+i).addEventListener('click',()=>show(i)));fields.forEach((id,j)=>$(id).addEventListener('input',()=>{records[index][j]=$(id).value;clear();}));$('check').addEventListener('click',()=>{const a=fields.map(id=>$(id).value.trim().toLowerCase());if(a.some(v=>!v)){$('feedback').textContent='Add all three answers and a reason before checking.';return;}const c=cards[index];const phaseAliases={'first quarter moon':'first quarter','last quarter moon':'last quarter','third quarter':'last quarter','third quarter moon':'last quarter'};const n=Number((phaseAliases[a[0]]||a[0])===c[1])+Number(a[1]==='half')+Number(a[2]===c[2]);$('feedback').textContent=n+' of 3 fixed answers correct. Written reasoning is for teacher review.';});$('reveal').addEventListener('click',()=>{$('key').hidden=!$('key').hidden;$('key').textContent=cards[index][1]+'; half of the whole Moon sunlit; '+cards[index][2]+' of the apparent disk directly bright. Ordinary phases describe a changing view, not Earth blocking sunlight.';});$('reset').addEventListener('click',()=>{records.forEach(r=>r.fill(''));show(0);});show(0);
})();
</script></body></html>