Seasons lab • follow the tilt — Use an explicit two-position Sun/Earth model to predict opposite hemisphere seasons and correct the misconception that Northern summer is…

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>Seasons lab • follow the tilt</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:#246d82;--bg:#edf7fa}.model svg{width:100%;height:auto;display:block}.model svg text{font:700 18px system-ui,sans-serif}.question{border-top:3px solid #9acbd3;padding:10px 0}.model{background:linear-gradient(120deg,#fff,#f1f9fc)}.mobile-model svg text{font-size:20px}.mobile-panel{border-bottom:1px solid #abcbd5;padding-bottom:14px}@media(max-width:600px){.model>svg{display:none}.mobile-model{display:block!important}.mobile-model svg{display:block;width:100%;height:auto}}
</style></head><body><main>
<span class="eyebrow">Earth science / original two-position model</span><h1>Same tilt. Opposite seasons.</h1><p class="lead">Follow the labeled hemisphere and sunlight before choosing a season.</p>
<section class="panel model"><div class="mobile-model" style="display:none"><div class="mobile-panel"><h3>J · June-like</h3><svg viewBox="0 0 420 250" role="img" aria-label="J: Earth left of the central Sun, north toward, south away"><circle cx="210" cy="125" r="34" fill="#ffc84d"/><circle cx="80" cy="125" r="42" fill="#92cfd2" stroke="#1d6a80" stroke-width="3"/><line x1="50" y1="185" x2="110" y2="65" stroke="#243858" stroke-width="5"/><text x="95" y="42">NJ</text><text x="42" y="220">SJ</text><text x="190" y="132">Sun</text><path d="M170 125L130 125L140 118M130 125L140 132" fill="none" stroke="#c98913" stroke-width="4"/></svg><p>North toward Sun; south away from Sun. Sunlight right → left.</p></div><div class="mobile-panel"><h3>D · December-like</h3><svg viewBox="0 0 420 250" role="img" aria-label="D: Earth right of the central Sun, north away, south toward"><circle cx="210" cy="125" r="34" fill="#ffc84d"/><circle cx="340" cy="125" r="42" fill="#92cfd2" stroke="#1d6a80" stroke-width="3"/><line x1="310" y1="185" x2="370" y2="65" stroke="#243858" stroke-width="5"/><text x="355" y="42">ND</text><text x="302" y="220">SD</text><text x="190" y="132">Sun</text><path d="M250 125L290 125L280 118M290 125L280 132" fill="none" stroke="#c98913" stroke-width="4"/></svg><p>North away from Sun; south toward Sun. Sunlight left → right.</p></div></div><svg viewBox="0 0 800 285" role="img" aria-labelledby="model-title model-desc"><title id="model-title">Parallel southwest-to-northeast axes, fixed central Sun</title><desc id="model-desc">J: Earth left of Sun; north northeast toward Sun, south away; sunlight right to left. D: Earth right of Sun, same axis orientation; north away, south toward; sunlight left to right.</desc><defs><marker id="ray-arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0L10 5L0 10Z" fill="#c98913"/></marker></defs><text x="75" y="30">J · June-like</text><text x="585" y="30">D · December-like</text><circle cx="400" cy="145" r="45" fill="#ffc84d"/><text x="380" y="152">Sun</text><circle cx="150" cy="145" r="52" fill="#92cfd2" stroke="#1d6a80" stroke-width="3"/><circle cx="650" cy="145" r="52" fill="#92cfd2" stroke="#1d6a80" stroke-width="3"/><line id="axis-j" x1="115" y1="215" x2="185" y2="75" stroke="#243858" stroke-width="6"/><line id="axis-d" x1="615" y1="215" x2="685" y2="75" stroke="#243858" stroke-width="6"/><text x="190" y="80">N · NJ</text><text x="50" y="240">S · SJ</text><text x="690" y="80">N · ND</text><text x="550" y="240">S · SD</text><path id="ray-j" d="M343 145L220 145" stroke="#c98913" stroke-width="4" marker-end="url(#ray-arrow)"/><path id="ray-d" d="M457 145L580 145" stroke="#c98913" stroke-width="4" marker-end="url(#ray-arrow)"/><text x="260" y="181">Sunlight</text><text x="480" y="181">Sunlight</text><text x="240" y="270">Both axes: southwest → northeast.</text></svg><div class="row"><button type="button" id="view-nj">J · North / NJ</button><button type="button" id="view-sj" class="secondary">J · South / SJ</button><button type="button" id="view-nd" class="secondary">D · North / ND</button><button type="button" id="view-sd" class="secondary">D · South / SD</button></div><p id="relationship" class="notice" aria-live="polite"></p><details><summary>Full written model description</summary><p>J: Earth is left of the central Sun. Its axis runs southwest to northeast, north at the northeast end. North tilts toward the Sun; south away. Sunlight travels from Sun to Earth, right to left.</p><p>D: Earth is right of the same Sun. The axis has exactly the same southwest-to-northeast orientation, north still at the northeast end. North tilts away; south toward. Sunlight travels left to right.</p></details></section>
<section class="panel"><h2>Four questions / one result per item</h2><p id="score" class="pill" aria-live="polite"></p><div class="grid"><div class="question"><h3>Q1</h3><label for="q-0">In J, which season does the Northern Hemisphere represent?</label><select id="q-0"><option value="">Choose an answer</option><option value="summer">Summer</option><option value="winter">Winter</option></select><p id="feedback-0" class="notice">Unanswered.</p><button type="button" id="retry-0" class="secondary">Retry Q1</button></div><div class="question"><h3>Q2</h3><label for="q-1">In J, which season does the Southern Hemisphere represent?</label><select id="q-1"><option value="">Choose an answer</option><option value="summer">Summer</option><option value="winter">Winter</option></select><p id="feedback-1" class="notice">Unanswered.</p><button type="button" id="retry-1" class="secondary">Retry Q2</button></div><div class="question"><h3>Q3</h3><label for="q-2">In D, which season does the Northern Hemisphere represent?</label><select id="q-2"><option value="">Choose an answer</option><option value="summer">Summer</option><option value="winter">Winter</option></select><p id="feedback-2" class="notice">Unanswered.</p><button type="button" id="retry-2" class="secondary">Retry Q3</button></div><div class="question"><h3>Q4</h3><label for="q-3">Which explanation matches this model?</label><select id="q-3"><option value="">Choose an answer</option><option value="tilt">Axial tilt changes how directly sunlight reaches the hemispheres</option><option value="distance">Northern summer occurs because Earth is closer to the Sun</option></select><p id="feedback-3" class="notice">Unanswered.</p><button type="button" id="retry-3" class="secondary">Retry Q4</button></div></div><div class="row"><button type="button" id="check">Check my choices</button><button type="button" id="reset" class="secondary">Reset practice</button></div></section>
<section class="panel"><h2>Beyond the model</h2><p>What would we need to know to describe the weather where you live?</p><label for="weather-question">Your discussion notes</label><textarea id="weather-question"></textarea><p class="muted">No local temperature, forecast, exact date, distance scale, measured irradiance or day length is supplied.</p></section><details><summary>Separate teacher key</summary><p>Q1 Summer; Q2 Winter; Q3 Winter; Q4 axial tilt and sunlight directness. D south is Summer. J and D are June-like and December-like within this model, not a full four-season calendar.</p></details><footer>Original schematic informed by NASA’s tilt explanation. Local practice is unsaved, not a grade or astronomical simulation.</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 keys=['summer','winter','winter','tilt'],checked=[null,null,null,null];let selected='nj';const relationships={nj:'NJ · J Northern Hemisphere: north tilts toward the central Sun; south tilts away.',sj:'SJ · J Southern Hemisphere: south tilts away from the central Sun; north tilts toward it.',nd:'ND · D Northern Hemisphere: north tilts away from the central Sun; south tilts toward it.',sd:'SD · D Southern Hemisphere: south tilts toward the central Sun; north tilts away from it.'};function relation(k){selected=k;text('relationship',relationships[k]);Object.keys(relationships).forEach(x=>$('view-'+x).setAttribute('aria-pressed',String(x===k)));}Object.keys(relationships).forEach(k=>on('view-'+k,()=>relation(k)));function score(){return {correct:checked.filter(x=>x===true).length,unanswered:keys.filter((_,i)=>!$('q-'+i).value).length,unreviewed:keys.filter((_,i)=>$('q-'+i).value&&checked[i]===null).length};}function update(){const s=score();text('score',s.correct+' of 4 currently correct and checked · '+s.unanswered+' unanswered · '+s.unreviewed+' not checked');}const explanations=['In panel J, north tilts toward the Sun. This panel represents Northern summer and Southern winter. Check the hemisphere label as well as the position.','In panel J, south tilts away from the Sun while north tilts toward it: Southern winter, Northern summer.','In panel D, north tilts away from the Sun and south tilts toward it: Northern winter, Southern summer.','Both axes keep the same direction while opposite hemispheres tilt toward the Sun. Axial tilt changes sunlight directness; distance is not the explanation. Earth is closest to the Sun during Northern winter.'];function check(){keys.forEach((key,i)=>{const v=$('q-'+i).value;if(!v){checked[i]=null;text('feedback-'+i,'Unanswered — choose a response first.');}else{checked[i]=v===key;text('feedback-'+i,(checked[i]?'Matches the model. ':'Recheck the relationship. ')+explanations[i]);}});update();}function retry(i){$('q-'+i).value='';checked[i]=null;text('feedback-'+i,'Unanswered.');update();}keys.forEach((_,i)=>{bind('q-'+i,()=>{checked[i]=null;text('feedback-'+i,$('q-'+i).value?'Choice changed — check again.':'Unanswered.');update();},'change');on('retry-'+i,()=>retry(i));});on('check',check);on('reset',()=>{keys.forEach((_,i)=>retry(i));relation('nj');});relation('nj');update();globalThis.app={score,get:()=>({selected,checked:[...checked]})};</script></body></html>