buildQuiz("insolation-temp", [ {q:"In the graph above, what is the approximate period of the major temperature cycles?",options: ["About 10,000 years","About 23,000 years","About 100,000 years","About 1 million years"],correct:2,emoji:"🌡️",explanation:"The temperature trace shows a clear sawtooth pattern that repeats roughly every 100,000 years — matching Earth's eccentricity cycle. Notice the rapid warming (interglacial spikes) followed by slow cooling back into glacial periods." }, {q:"What do the yellow highlighted regions (labeled 'IG') represent?",options: ["Ice ages (glacial periods)","Interglacial warm periods","Volcanic eruptions","Periods of low solar output"],correct:1,emoji:"☀️",explanation:"IG stands for 'interglacial' — warm periods between ice ages when temperatures were similar to or warmer than today. Notice these correspond to peaks in the insolation (orange) curve." }])
23 Engage: Solar Radiation Patterns
23.1 Solar Radiation at 65°N
Connecting to our earlier questions about how Earth’s temperature has varied in the past, let’s analyze the total amount of energy from solar radiation reaching Earth at 65°N over the last 750,000 years.
viewof timeRange = Inputs.range([0,750], {step:50,value:750,label:"View last ___ thousand years:"})
Code
filteredRadData = radiationData.filter(d => d.kya<= timeRange)Plot.plot({title:"Summer Radiation at 65°N Over the Past "+ timeRange +",000 Years",subtitle:"Solar Radiation (Watts/m²)",width:750,height:400,x: {label:"Thousands of Years Ago (kya)",reverse:true},y: {label:"Radiation (W/m²)",domain: [420,550]},marks: [ Plot.ruleY([480], {stroke:"#999",strokeDasharray:"4,4"}), Plot.areaY(filteredRadData, {x:"kya",y:"radiation",y2:480,fill: d => d.radiation>480?"#e74c3c":"#3498db",fillOpacity:0.4,tip:true}), Plot.line(filteredRadData, {x:"kya",y:"radiation",stroke:"#2c3e50",strokeWidth:2,tip:true}), Plot.dot(filteredRadData.filter(d => d.radiation>520), {x:"kya",y:"radiation",fill:"red",r:5,tip:true}), Plot.text(filteredRadData.filter(d => d.radiation>520), {x:"kya",y:"radiation",text: d =>"Peak",dy:-10,fontSize:10}) ]})
23.1.1 🎯 DETECTIVE MODE: What Do You See?
🔍 What repeating pattern jumps out at you in the last 750,000 years?
⏰ How often does the radiation peak?
🧊 Could this pattern explain Ice Ages?
🤯 WAIT — this pattern has been repeating for THREE-QUARTERS OF A MILLION YEARS?! Let’s find out WHY… 🤯
Code
buildQuiz("solar-rad-65n", [ {q:"What repeating pattern do you observe in the Summer Radiation at 65°N graph?",options: ["Radiation is constant over time","Radiation peaks and dips in a regular cycle roughly every 20,000–25,000 years","Radiation has been steadily increasing","The pattern is completely random"],correct:1,emoji:"🔍",explanation:"The graph shows regular peaks and valleys with a period of roughly 20,000–25,000 years. This matches the precession cycle — one of the three Milankovitch orbital cycles that controls how much summer sunlight reaches 65°N." }, {q:"What does the dashed horizontal line at ~480 W/m² represent, and why is it significant?",options: ["The maximum possible radiation","An approximate average — above it (red) means warmer summers, below it (blue) means cooler summers","The current radiation level","The minimum needed for life"],correct:1,emoji:"📊",explanation:"The 480 W/m² line serves as a baseline. When radiation is above this line (shaded red), summers at 65°N are warmer and can melt ice sheets. When below (shaded blue), summers are cooler and ice can accumulate — potentially triggering ice ages." }])
24 Explore: Earth’s Orbital Cycles
24.1 🎢 The THREE ORBITAL CYCLES
MISSION: Use these interactive models to gather evidence about Earth’s position in space. Could these orbital wobbles and stretches be causing the 100,000-year radiation pattern we just saw?
💡 DID YOU KNOW? In 1941, Serbian scientist Milutin Milankovitch figured out that Earth’s “wobbles” in space control Ice Ages. Mind = blown! 🤯
24.1.1 🔵 Cycle 1: ECCENTRICITY (~100,000 years)
THE STRETCH: Earth’s orbit changes from nearly circular ⭕ to more elliptical 🥚
// Draw orbit with variable eccentricity{const width =500;const height =400;const cx = width /2;const cy = height /2;const a =180;// semi-major axisconst b = a *Math.sqrt(1- eccentricity * eccentricity);// semi-minor axisconst c = a * eccentricity;// focal distanceconst svg = d3.create("svg").attr("width", width).attr("height", height);// Draw orbit ellipse svg.append("ellipse").attr("cx", cx + c).attr("cy", cy).attr("rx", a).attr("ry", b).attr("fill","none").attr("stroke","#3498db").attr("stroke-width",2);// Draw Sun at one focus svg.append("circle").attr("cx", cx).attr("cy", cy).attr("r",20).attr("fill","#f1c40f"); svg.append("text").attr("x", cx).attr("y", cy +5).attr("text-anchor","middle").attr("font-size","12px").text("☀️");// Draw Earth positions svg.append("circle").attr("cx", cx + c + a).attr("cy", cy).attr("r",10).attr("fill","#3498db"); svg.append("text").attr("x", cx + c + a).attr("y", cy -20).attr("text-anchor","middle").attr("font-size","10px").text("Aphelion (farthest)"); svg.append("circle").attr("cx", cx + c - a).attr("cy", cy).attr("r",10).attr("fill","#2ecc71"); svg.append("text").attr("x", cx + c - a).attr("y", cy -20).attr("text-anchor","middle").attr("font-size","10px").text("Perihelion (closest)");// Info box svg.append("rect").attr("x",10).attr("y",10).attr("width",200).attr("height",80).attr("fill","#f5f5f5").attr("rx",5); svg.append("text").attr("x",20).attr("y",35).attr("font-size","12px").text(`Eccentricity: ${eccentricity.toFixed(3)}`);const distDiff = ((2* a * eccentricity) / a *100).toFixed(1); svg.append("text").attr("x",20).attr("y",55).attr("font-size","12px").text(`Distance variation: ${distDiff}%`); svg.append("text").attr("x",20).attr("y",75).attr("font-size","11px").attr("fill","#666").text(`Cycle: ~100,000 years`);return svg.node();}
Code
buildQuiz("eccentricity-quiz", [ {q:"As you increase eccentricity from 0 to 0.06, what happens to Earth's orbit shape?",options: ["It becomes more circular","It becomes more elongated (elliptical)","It stays the same shape but gets larger","It flips upside down"],correct:1,emoji:"🥚",explanation:"Higher eccentricity means the orbit is more stretched out — more elliptical. At eccentricity = 0, the orbit would be a perfect circle. At 0.06 (the maximum in Earth's cycle), it's noticeably oval-shaped." }, {q:"What is the period of Earth's eccentricity cycle, and why does it matter for climate?",options: ["23,000 years — it changes seasonal timing","41,000 years — it changes seasonal intensity","100,000 years — it changes the total solar energy Earth receives over a year","1,000 years — it causes volcanic eruptions"],correct:2,emoji:"⏰",explanation:"The eccentricity cycle takes ~100,000 years. When the orbit is more elliptical, the difference between Earth's closest approach (perihelion) and farthest point (aphelion) is greater, affecting total annual solar radiation — and this matches the major glacial-interglacial cycle!" }])
buildQuiz("obliquity-quiz", [ {q:"When Earth's axial tilt increases from 22.1° to 24.5°, what happens to the seasons?",options: ["Seasons become less extreme (milder summers and winters)","Seasons become more extreme (hotter summers and colder winters)","Only summers change; winters stay the same","The seasons reverse (summer becomes winter)"],correct:1,emoji:"🌡️",explanation:"Greater tilt means the Northern Hemisphere points more directly toward the Sun in summer and more directly away in winter. This amplifies the seasonal contrast — hotter summers and colder winters. Less tilt = milder, more uniform seasons." }, {q:"Why is obliquity important for ice ages?",options: ["Higher tilt causes Earth to move closer to the Sun","Lower tilt means cooler summers, allowing winter snow to persist and ice sheets to grow","Higher tilt stops ocean currents","Obliquity has no effect on ice ages"],correct:1,emoji:"🧊",explanation:"When obliquity decreases, summers at high latitudes become cooler. If summers aren't warm enough to melt winter snow, ice accumulates year after year, eventually forming massive ice sheets. This is the key mechanism by which obliquity influences glaciation." }])
24.1.3 🔄 Cycle 3: PRECESSION (~23,000 years)
THE SPIN: Earth’s axis wobbles like a spinning top 🌀 — changing which hemisphere points toward the Sun when we’re closest! This affects whether Northern or Southern summers are INTENSE.
24.2 🔬 INVESTIGATION LAB: Crack the Climate Code! 🕵️
⚡ TIME TO BECOME AN ORBITAL DETECTIVE! ⚡
24.2.1 🎒 Materials:
Graph paper or spreadsheet 📊
Colored pencils 🎨
Calculator 🧮
Your detective skills 🔍
24.2.2 📋 Mission Steps:
STEP 1: Analyze the Cycles 🌀
Use the interactive simulations above to explore each cycle
Record observations in your data table:
Cycle
Period
Current Value
Range
Climate Effect
Eccentricity
~100,000 yrs
0.017
0.0 - 0.06
Changes total radiation received
Obliquity
~41,000 yrs
23.5°
22.1° - 24.5°
Changes seasonal contrast
Precession
~23,000 yrs
N/A
360° rotation
Changes timing of seasons
STEP 2: Connect to the Data 📈
Go back and review that radiation graph from the beginning!
🎯 Which cycle’s period matches the big 100,000-year pattern?
🌊 Could the other two cycles explain the smaller “wiggles”?
STEP 3: Make Your Claim 🎤
📣 YOUR VERDICT: Do Earth’s orbital cycles CAUSE those radiation changes? Back it up with EVIDENCE from the models and data!
Code
buildQuiz("precession-orbital-quiz", [ {q:"How does precession affect Earth's climate?",options: ["It changes the total solar energy Earth receives each year","It changes which season occurs when Earth is closest to the Sun","It changes Earth's distance from the Sun","It changes the Sun's brightness"],correct:1,emoji:"🔄",explanation:"Precession (Earth's axial wobble) changes WHICH season occurs at perihelion (closest approach to the Sun). Currently, Northern Hemisphere winter occurs near perihelion. ~11,500 years from now, Northern Hemisphere summer will be at perihelion, making Northern summers more intense." }, {q:"Which Milankovitch cycle's period best matches the major ~100,000-year glacial pattern in the radiation data?",options: ["Precession (~23,000 years)","Obliquity (~41,000 years)","Eccentricity (~100,000 years)","None of them match"],correct:2,emoji:"🎯",explanation:"The eccentricity cycle at ~100,000 years matches the dominant glacial-interglacial pattern. While precession and obliquity contribute smaller variations (the 'wiggles'), the big picture rhythm of ice ages is paced by eccentricity changes." }, {q:"In the orbital simulator, what happens when all three cycles align to minimize summer radiation at 65°N?",options: ["Temperatures rise sharply","Conditions favor ice sheet growth and glaciation","Ocean currents reverse","The Earth moves closer to the Sun"],correct:1,emoji:"❄️",explanation:"When eccentricity is high, obliquity is low, and precession puts Northern summer at aphelion (farthest from the Sun), summer radiation at 65°N drops to its lowest. Cool summers can't melt winter snow, ice sheets grow, and albedo feedback amplifies the cooling — triggering an ice age." }])
25 Explain: Connecting Orbit to Climate
🧊 THE MILLION-DOLLAR QUESTION 🧊
Did Earth’s orbital wobbles ACTUALLY cause Ice Ages? 🤔
25.1 🌍 THE SECRET MECHANISM REVEALED
💥 PLOT TWIST: It’s not about total yearly radiation — it’s about SUMMER radiation at 65°N (high northern latitudes)!
25.1.1 Why 65°N Matters:
Most of Earth’s land mass is in the Northern Hemisphere
Ice sheets grow when summer is NOT warm enough to melt winter snow
When summer radiation at 65°N is LOW, ice sheets expand
When summer radiation at 65°N is HIGH, ice sheets retreat
25.1.2 The Feedback Loop:
Low summer radiation → Snow persists → Ice sheets grow →
Higher albedo → More cooling → More ice growth
25.2 Comparing Radiation and Temperature
Code
combinedData = iceCoreTempData.map(d => {const rad = radiationData.find(r => r.kya=== d.kya);return {kya: d.kya,temp: d.temp,radiation: rad ? rad.radiation:480 };})Plot.plot({title:"Temperature vs. Summer Radiation at 65°N",width:750,height:400,x: {label:"Thousands of Years Ago",reverse:true},y: {label:"Temperature Anomaly (°C)",axis:"left"},marks: [ Plot.line(combinedData, {x:"kya",y:"temp",stroke:"#e74c3c",strokeWidth:2,tip:true}), Plot.dot(combinedData.filter(d => d.temp>-2), {x:"kya",y:"temp",fill:"#e74c3c",r:6,tip:true}), Plot.text([{x:350,y:2}], {x:"x",y:"y",text: d =>"Temperature",fill:"#e74c3c",fontSize:12}),// Add radiation trend for comparison (scaled to fit) Plot.line(combinedData, {x:"kya",y: d => (d.radiation-480) /10-6,stroke:"#3498db",strokeWidth:1,strokeDasharray:"4,2",tip:true}), Plot.text([{x:350,y:-5}], {x:"x",y:"y",text: d =>"Radiation (scaled)",fill:"#3498db",fontSize:10}) ]})
25.2.1 💡 Key Ideas: Earth-Sun Dynamics
Temperatures on Earth have fluctuated greatly during human history, marked by glacial and interglacial periods
A pattern exists in the frequency of these fluctuations (~100,000 years)
The pattern is explained by cyclical changes in Earth’s orbit shape and tilt
These changes cause ice sheets to expand and retreat
Current orbital parameters suggest Earth should be cooling, yet global temperatures are increasing
Code
buildQuiz("temp-vs-rad-quiz", [ {q:"Looking at the Temperature vs. Summer Radiation chart, what is the relationship between radiation peaks and temperature peaks?",options: ["They are completely unrelated","Temperature peaks closely follow radiation peaks — they are strongly correlated","Temperature peaks occur opposite to radiation peaks","Only some peaks align; most are random"],correct:1,emoji:"📈",explanation:"The red temperature line and blue radiation line show a strong correlation — when summer radiation at 65°N peaks, temperatures rise to interglacial levels shortly after. This is powerful evidence that orbital changes in solar radiation drive the glacial-interglacial cycle." }, {q:"Based on the key ideas, why is it significant that current orbital parameters predict cooling, yet Earth is warming?",options: ["It means Milankovitch theory is wrong","It means another powerful factor (greenhouse gases) must be overriding the natural orbital cooling trend","It means Earth's orbit has changed unexpectedly","It means the data is inaccurate"],correct:1,emoji:"🚨",explanation:"Milankovitch cycles have reliably explained 800,000+ years of climate patterns. The fact that Earth is warming despite orbital parameters favoring cooling is strong evidence that human greenhouse gas emissions are now the dominant climate forcing — powerful enough to override natural orbital trends." }])
26 Elaborate: Solar Activity vs. Glacial Cycles
☀️ BUT WAIT… WHAT ABOUT THE SUN? ☀️
26.1 🔥 Solar Activity Data
🤔 NEW THEORY ALERT: Some people say the Sun itself is getting brighter, causing climate change. We know orbital wobbles caused Ice Ages… but what about the Sun’s OUTPUT? Let’s investigate! 🕵️
Code
solarData = [ {year:1880,tsi:1365.5,temp:-0.16}, {year:1900,tsi:1365.7,temp:-0.08}, {year:1920,tsi:1365.6,temp:-0.25}, {year:1940,tsi:1365.8,temp:0.12}, {year:1960,tsi:1365.9,temp:-0.01}, {year:1980,tsi:1366.1,temp:0.26}, {year:2000,tsi:1366.0,temp:0.42}, {year:2020,tsi:1361.0,temp:1.02}]Plot.plot({title:"Solar Output (TSI) vs Global Temperature",width:700,height:400,x: {label:"Year"},marks: [ Plot.line(solarData, {x:"year",y: d => (d.tsi-1360) *2,stroke:"#f1c40f",strokeWidth:2,tip:true}), Plot.line(solarData, {x:"year",y: d => d.temp*3+5,stroke:"#e74c3c",strokeWidth:2,tip:true}), Plot.text([{x:1900,y:12}], {x:"x",y:"y",text: d =>"Solar Output",fill:"#f1c40f",fontSize:12}), Plot.text([{x:1900,y:7}], {x:"x",y:"y",text: d =>"Temperature",fill:"#e74c3c",fontSize:12}) ]})
26.1.1 ✅ Analysis Questions
Has solar output increased significantly since 1980?
Has temperature increased significantly since 1980?
Can changes in solar output explain recent warming? Why or why not?
Code
buildQuiz("tsi-temp-quiz", [ {q:"Looking at the Solar Output (TSI) vs. Global Temperature chart, what happens after 1980?",options: ["Both solar output and temperature increase together","Solar output increases but temperature decreases","Solar output levels off or decreases while temperature rises sharply","Both solar output and temperature decrease"],correct:2,emoji:"📊",explanation:"After ~1980, solar output (yellow line) flattens or even slightly decreases, while global temperature (red line) rises dramatically. This divergence is key evidence that the Sun's output is NOT driving recent warming." }, {q:"What can you conclude from the fact that solar output and temperature diverge after 1980?",options: ["The Sun is the main driver of current warming","Another factor besides solar output must be responsible for the rapid warming since 1980","Temperature data after 1980 must be incorrect","Solar cycles take time to affect temperature, so the warming will stop soon"],correct:1,emoji:"🔬",explanation:"If the Sun were driving warming, we'd expect solar output and temperature to rise together. Since they diverge — solar output flat, temperature shooting up — something else must be responsible. This points to rising greenhouse gas concentrations as the dominant cause of recent warming." }])
27 Evaluate: Are Orbital Factors Causing Warming Today?
🚨 THE FINAL VERDICT 🚨
So… are Earth’s orbital cycles causing climate change RIGHT NOW? 🌡️
27.1 📊 THE EVIDENCE SAYS…
Based on current orbital parameters:
Parameter
Current Value
Trend
Climate Effect
Eccentricity
0.017
Decreasing
Less seasonal variation
Obliquity
23.44°
Decreasing
Less extreme seasons
Precession
NH summer at aphelion
Changing slowly
Cooler NH summers
Conclusion: Based on Milankovitch cycles alone, Earth should be gradually cooling. The fact that Earth is warming despite this indicates another factor is at play.
This sets up our next investigation: What IS causing the warming?
Code
{// 1. CONTENT: Myths and Facts about Earth-Sun Dynamics & Milankovitch Cyclesconst cards = [ {text:"Earth's orbit around the Sun is a perfect circle.",type:"Myth",explanation:"False. Earth's orbit is an ellipse — slightly oval-shaped. This eccentricity changes over a ~100,000-year cycle, affecting how much solar energy Earth receives." }, {text:"Milankovitch cycles can trigger ice ages by changing the distribution of solar energy on Earth.",type:"Fact",explanation:"Correct! Even though total solar energy barely changes, shifts in where and when that energy arrives — especially at 65°N in summer — can trigger the growth or retreat of ice sheets." }, {text:"When Earth is closest to the Sun (perihelion), it is summer in the Northern Hemisphere.",type:"Myth",explanation:"False. Earth is currently closest to the Sun in early January — which is winter in the Northern Hemisphere. Seasons are caused by axial tilt, not distance from the Sun." }, {text:"Earth's axial tilt stays fixed at exactly 23.5° forever.",type:"Myth",explanation:"False. Earth's tilt slowly cycles between about 22.1° and 24.5° over ~41,000 years. More tilt means more extreme seasons; less tilt means milder seasons." }, {text:"Summer insolation at 65°N is important for ice ages because that's where most of Earth's land is located.",type:"Fact",explanation:"Correct! The Northern Hemisphere has most of Earth's land mass. If summers at 65°N are too cool to melt the previous winter's snow, ice sheets can grow — potentially triggering an ice age." }, {text:"The 'wobble' of Earth's axis (precession) changes the total amount of solar energy Earth receives each year.",type:"Myth",explanation:"False. Precession only changes which season occurs when Earth is closest to the Sun. It does not change the total annual solar energy received — it shifts how that energy is distributed across seasons." }, {text:"Based on current Milankovitch cycles, Earth should be slowly cooling right now.",type:"Fact",explanation:"Correct! Our current orbital parameters — decreasing eccentricity and obliquity, with Northern Hemisphere summer at aphelion — point toward gradual cooling. The fact that Earth is rapidly warming instead means another factor (greenhouse gases) is overriding the natural trend." }, {text:"The ~100,000-year ice age cycle is caused by changes in Earth's axial tilt.",type:"Myth",explanation:"False. The ~100,000-year cycle matches Earth's eccentricity cycle — the gradual change in the shape of Earth's orbit. Axial tilt (obliquity) drives a separate ~41,000-year cycle." }, {text:"Milankovitch cycles have successfully explained the timing of ice ages over the past 800,000 years.",type:"Fact",explanation:"Correct! Ice core records show that glacial-interglacial cycles closely match the rhythms predicted by Milankovitch's three orbital parameters. This is strong evidence that orbital cycles drove past climate change." }, {text:"Because Milankovitch cycles caused past climate changes, they must also be responsible for the warming we see today.",type:"Myth",explanation:"False. Milankovitch cycles work over tens of thousands of years. Current warming has occurred in just ~150 years — far too fast for orbital changes. The culprit is the rapid increase in greenhouse gases from human activity." }, {text:"A stronger axial tilt leads to more extreme seasons — hotter summers and colder winters.",type:"Fact",explanation:"Correct! Greater tilt means each hemisphere tilts more directly toward (or away from) the Sun during summer (or winter), intensifying seasonal temperature swings." }, {text:"Precession causes ice ages by moving Earth farther away from the Sun.",type:"Myth",explanation:"False. Precession does not change Earth's distance from the Sun — it only changes which season lines up with perihelion (closest approach). Ice ages result from changes in seasonal insolation, not total distance." } ];// 2. STATE MANAGEMENTlet currentIndex =0;let score =0;// Container for the gameconst container =html`<div style=" font-family: sans-serif; max-width: 500px; margin: 20px auto; text-align: center; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; background: #f7fafc; box-shadow: 0 4px 6px rgba(0,0,0,0.1); "></div>`;// Function to render the current cardfunctionrenderCard() { container.innerHTML="";// A. End Screenif (currentIndex >= cards.length) { container.innerHTML=` <h2 style="color: #2d3748; margin-bottom: 10px;">Activity Complete!</h2> <div style="font-size: 40px; margin-bottom: 10px;">🎉</div> <p style="font-size: 18px; color: #2d3748;">You got <b>${score} / ${cards.length}</b> correct.</p> <p style="color: #718096; font-size: 14px; margin-bottom: 20px;">Review the "Earth-Sun Dynamics" sections for any you missed.</p> <button id="restart-btn" style=" padding: 10px 20px; background: #3182ce; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; ">Play Again</button> `; container.querySelector("#restart-btn").addEventListener("click", () => { currentIndex =0; score =0;renderCard(); });return; }// B. The Cardconst cardData = cards[currentIndex];const progress =html`<div style="font-size: 12px; color: #a0aec0; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px;">Card ${currentIndex +1} of ${cards.length}</div>`;const card =html` <div style=" background: white; min-height: 200px; display: flex; align-items: center; justify-content: center; padding: 30px; border-radius: 8px; border: 1px solid #cbd5e0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 25px; "> <h3 style="color: #2d3748; font-size: 18px; line-height: 1.5; margin: 0;">${cardData.text}</h3> </div> `;const controls =html` <div style="display: flex; justify-content: center; gap: 15px;"> <button id="myth-btn" style=" background: white; color: #e53e3e; border: 2px solid #e53e3e; padding: 10px 24px; border-radius: 50px; font-weight: bold; cursor: pointer; font-size: 16px; transition: all 0.2s; ">MYTH (False)</button> <button id="fact-btn" style=" background: white; color: #38a169; border: 2px solid #38a169; padding: 10px 24px; border-radius: 50px; font-weight: bold; cursor: pointer; font-size: 16px; transition: all 0.2s; ">FACT (True)</button> </div> `;const feedback =html`<div style=" display: none; margin-top: 20px; padding: 15px; border-radius: 6px; text-align: left; "></div>`; container.appendChild(progress); container.appendChild(card); container.appendChild(controls); container.appendChild(feedback);const handleChoice = (choice) => {const isCorrect = choice === cardData.type;if (isCorrect) score++;const btnMyth = container.querySelector("#myth-btn");const btnFact = container.querySelector("#fact-btn"); btnMyth.disabled=true; btnFact.disabled=true;if (choice ==="Myth") { btnMyth.style.background="#e53e3e"; btnMyth.style.color="white"; } else { btnFact.style.background="#38a169"; btnFact.style.color="white"; } feedback.style.display="block"; feedback.style.background= isCorrect ?"#f0fff4":"#fff5f5"; feedback.style.border= isCorrect ?"1px solid #38a169":"1px solid #e53e3e"; feedback.innerHTML=` <div style="font-size: 18px; margin-bottom: 5px; font-weight: bold; color: ${isCorrect ?"#2f855a":"#c53030"}">${isCorrect ?"✅ Correct!":"❌ Incorrect."} </div> <div style="color: #4a5568; margin-bottom: 10px;">It is a <b>${cardData.type}</b>. ${cardData.explanation}</div> <div style="text-align: right;"> <button id="next-btn" style=" background: #4a5568; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-weight: bold; ">Next Card →</button> </div> `; feedback.querySelector("#next-btn").addEventListener("click", () => { currentIndex++;renderCard(); }); }; container.querySelector("#myth-btn").addEventListener("click", () =>handleChoice("Myth")); container.querySelector("#fact-btn").addEventListener("click", () =>handleChoice("Fact")); }renderCard();return container;}
Code
{const d3 =awaitrequire("d3@7");const questions = [ {q:"What is the approximate period of the eccentricity cycle?",options: ["23,000 years","41,000 years","100,000 years","1 million years"],correct:2,explanation:"The eccentricity cycle takes about 100,000 years — the longest of the three Milankovitch cycles. This matches the major Ice Age pattern seen in the paleoclimate data." }, {q:"Why is summer radiation at 65°N latitude so important for ice ages?",options: ["It's where most people live","It's where most land mass is located, and ice sheets need cool summers to persist","The Sun is closest to Earth at this latitude","Ocean currents are strongest here" ],correct:1,explanation:"Most of Earth's land is in the Northern Hemisphere. When summers at 65°N are cool enough that winter snow doesn't fully melt, ice sheets can grow and persist — triggering an ice age." }, {q:"Earth's current axial tilt is approximately:",options: ["22.1°","23.5°","24.5°","45°"],correct:1,explanation:"Earth currently tilts at about 23.5° — right in the middle of its range between the minimum (22.1°) and maximum (24.5°)." }, {q:"According to Milankovitch cycles, what should Earth's climate be doing right now?",options: ["Warming rapidly","Staying constant","Cooling gradually","Experiencing an ice age"],correct:2,explanation:"Based on current orbital parameters alone, Earth should be cooling gradually. The fact that it's warming rapidly instead means another factor — greenhouse gas emissions — must be at work." }, {q:"What causes the ~100,000 year glacial-interglacial cycle?",options: ["Changes in the Sun's energy output","Volcanic activity","Changes in Earth's orbital eccentricity","Human activity" ],correct:2,explanation:"Changes in Earth's orbital eccentricity — how elliptical or circular its orbit is — drive the major 100,000-year glacial-interglacial cycle seen in ice core records." }, {q:"The precession cycle affects climate by:",options: ["Changing total solar radiation received","Changing which season occurs at perihelion vs aphelion","Changing Earth's distance from the Sun","Changing the Sun's output" ],correct:1,explanation:"Precession (Earth's wobble) changes WHICH SEASON occurs when Earth is closest to the Sun (perihelion). This makes some hemispheres' summers more intense without changing total solar radiation received." }, {q:"If Earth's axial tilt increased to 24.5°, seasons would become:",options: ["Less extreme","More extreme","Unchanged","Reversed"],correct:1,explanation:"Greater axial tilt means the Northern Hemisphere points more directly toward (or away from) the Sun during summer and winter, making seasons more extreme — hotter summers and colder winters." }, {q:"What is the significance of global warming occurring despite Milankovitch cycles predicting cooling?",options: ["Milankovitch cycles are wrong","Another factor must be causing the warming","The Sun's output has increased dramatically","Earth's orbit has changed unexpectedly" ],correct:1,explanation:"Milankovitch cycles have reliably explained climate patterns for hundreds of thousands of years. The fact that Earth is warming despite orbital cycles predicting cooling means a new, powerful factor — human greenhouse gas emissions — is overriding the natural trend." } ];// Build the interactive quizconst wrap = d3.create("div").attr("class","pf-quiz");// Headerconst header = wrap.append("div").attr("class","pf-quiz-header"); header.append("h2").text("📝 Earth-Sun Dynamics Quiz"); header.append("p").text("Click an answer to see instant feedback and guidance on each question.");let score =0;let answered =0;const scoreBanner = wrap.append("div").attr("class","pf-score-banner").style("display","none"); questions.forEach((q, qi) => {const card = wrap.append("div").attr("class","pf-question-card"); card.append("div").attr("class","pf-q-meta").text(`Question ${qi +1} of ${questions.length}`); card.append("div").attr("class","pf-q-text").text(q.q);const feedbackDiv = card.append("div").attr("class","pf-feedback-box");const optionEls = q.options.map((opt, oi) => {const btn = card.append("div").attr("class","pf-option").text(opt); btn.on("click",function() {// Ignore if already answeredif (card.classed("pf-done")) return; card.classed("pf-done",true);const isCorrect = oi === q.correct;if (isCorrect) score++; answered++;// Lock and style all options optionEls.forEach((el, idx) => { el.classed("pf-locked",true);if (idx === oi && isCorrect) el.classed("pf-selected-correct",true);elseif (idx === oi &&!isCorrect) el.classed("pf-selected-wrong",true);elseif (idx === q.correct&&!isCorrect) el.classed("pf-reveal-correct",true); });// Show feedback feedbackDiv.classed("pf-fb-correct", isCorrect).classed("pf-fb-wrong",!isCorrect).html(`<strong>${isCorrect ?"✅ Correct!":`❌ Not quite — the correct answer is: <em>${q.options[q.correct]}</em>`}</strong><br><br>`+ q.explanation );// Update score bannerif (answered === questions.length) {const pct =Math.round(score / questions.length*100);const emoji = pct ===100?"🌟": pct >=80?"👏": pct >=60?"👍":"📚"; scoreBanner.style("display","block").html(`<div class="pf-score-emoji">${emoji}</div>`+`<div class="pf-score-text">Score: ${score} / ${questions.length} (${pct}%)</div>`+`<div class="pf-score-sub">${ pct ===100?"Perfect score! You've mastered Earth-Sun dynamics and Milankovitch cycles!": pct >=80?"Great work! Review any questions you missed for full understanding.": pct >=60?"Good effort! Revisit the orbital simulator and Milankovitch sections to strengthen your knowledge.":"Keep studying! Focus on the Engage and Explain sections to build your understanding."}</div>`+`<button class="pf-restart-btn" onclick=" this.closest('.pf-quiz').querySelectorAll('.pf-question-card').forEach(c => { c.classList.remove('pf-done'); c.querySelectorAll('.pf-option').forEach(o => { o.classList.remove('pf-locked','pf-selected-correct','pf-selected-wrong','pf-reveal-correct'); }); c.querySelector('.pf-feedback-box').className = 'pf-feedback-box'; c.querySelector('.pf-feedback-box').innerHTML = ''; }); this.closest('.pf-score-banner').style.display = 'none'; ">🔄 Try Again</button>` );// Reset counters on restart click scoreBanner.select(".pf-restart-btn").on("click.reset", () => { score =0; answered =0; }); } });return btn; }); });// Move score banner to end wrap.node().appendChild(scoreBanner.node());return wrap.node();}
🌍
Source Code
---title: "Unit 4: Earth-Sun Dynamics 5E"subtitle: "What factors have contributed to climate change in the past and are they contributing to climate change now?"author: "Earth & Space Science"format: html: toc: false toc-depth: 3 number-sections: true code-fold: trueexecute: echo: true warning: false---```{=html}<style>@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=Inter:wght@400;600;800&display=swap');.engage-box { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 25px; margin: 20px 0; border-radius: 15px; box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3); border: none;}.engage-box h2 { font-family: 'Space Grotesk', sans-serif; font-size: 2em; margin-top: 0; }.explore-box { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; padding: 25px; margin: 20px 0; border-radius: 15px; box-shadow: 0 10px 30px rgba(240, 147, 251, 0.3);}.explain-box { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: #1a1a1a; padding: 25px; margin: 20px 0; border-radius: 15px; box-shadow: 0 10px 30px rgba(79, 172, 254, 0.3);}.elaborate-box { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); color: #1a1a1a; padding: 25px; margin: 20px 0; border-radius: 15px; box-shadow: 0 10px 30px rgba(67, 233, 123, 0.3);}.evaluate-box { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); color: #1a1a1a; padding: 25px; margin: 20px 0; border-radius: 15px; box-shadow: 0 10px 30px rgba(250, 112, 154, 0.3);}.check-understanding { background: linear-gradient(to right, #667eea, #764ba2); color: white; padding: 20px; margin: 20px 0; border-radius: 12px; border-left: 6px solid #fff; animation: pulse 2s infinite;}@keyframes pulse { 0%, 100% { box-shadow: 0 0 20px rgba(102, 126, 234, 0.5); } 50% { box-shadow: 0 0 30px rgba(102, 126, 234, 0.8); }}.key-idea { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); padding: 20px; margin: 20px 0; border-radius: 12px; border-left: 8px solid #ff6b6b; font-size: 1.1em;}.lab-activity { background: linear-gradient(to bottom, #ffeaa7, #fdcb6e); border: 4px solid #e17055; padding: 25px; margin: 25px 0; border-radius: 15px; box-shadow: 0 8px 20px rgba(0,0,0,0.1);}.quiz-section { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); padding: 25px; margin: 25px 0; border-radius: 15px; border: 4px dashed #ff6b6b;}.pe-badge { display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 800; margin: 5px; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); text-transform: uppercase; letter-spacing: 1px;}.big-question { font-family: 'Space Grotesk', sans-serif; font-size: 2.5em; font-weight: 800; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 30px 0 20px 0; text-align: center; animation: slideIn 0.8s ease-out;}@keyframes slideIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); }}.mind-blown { background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); color: white; padding: 20px; margin: 20px 0; border-radius: 15px; font-size: 1.3em; font-weight: 700; text-align: center; box-shadow: 0 10px 25px rgba(255, 107, 107, 0.4); animation: bounce 1s ease infinite alternate;}@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-5px); }}h1 { font-family: 'Space Grotesk', sans-serif !important; font-weight: 800 !important; font-size: 2.8em !important; margin-top: 40px !important;}h2 { font-family: 'Space Grotesk', sans-serif !important; font-weight: 700 !important; color: #667eea !important;}/* Interactive Quiz Styles */.pf-quiz { font-family: 'Inter', sans-serif; max-width: 720px; margin: 0 auto; }.pf-quiz-header { text-align: center; margin-bottom: 28px; }.pf-quiz-header h2 { font-family: 'Space Grotesk', sans-serif !important; font-weight: 800; font-size: 1.8em; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 6px; color: unset !important; }.pf-quiz-header p { color: #718096; font-size: 0.95em; }.pf-question-card { background: white; border-radius: 14px; padding: 22px 26px; margin-bottom: 22px; border: 2px solid #e2e8f0; box-shadow: 0 3px 12px rgba(0,0,0,0.07); transition: box-shadow 0.2s; }.pf-question-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.11); }.pf-q-meta { font-size: 11px; font-weight: 700; color: #a0aec0; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }.pf-q-text { font-size: 16.5px; font-weight: 700; color: #2d3748; margin-bottom: 14px; line-height: 1.5; }.pf-option { display: block; padding: 12px 18px; margin: 7px 0; border-radius: 9px; border: 2px solid #e2e8f0; cursor: pointer; font-size: 14.5px; color: #4a5568; transition: border-color 0.18s, background 0.18s, transform 0.1s; background: #f7fafc; user-select: none; }.pf-option:hover:not(.pf-locked) { border-color: #667eea; background: #eef2ff; transform: translateX(3px); }.pf-option.pf-selected-correct { border-color: #38a169 !important; background: #f0fff4 !important; color: #22543d !important; font-weight: 700; }.pf-option.pf-selected-wrong { border-color: #e53e3e !important; background: #fff5f5 !important; color: #9b2c2c !important; }.pf-option.pf-reveal-correct { border-color: #38a169 !important; background: #f0fff4 !important; color: #22543d !important; font-weight: 700; }.pf-option.pf-locked { cursor: not-allowed; opacity: 0.65; }.pf-option.pf-locked:not(.pf-selected-correct):not(.pf-selected-wrong):not(.pf-reveal-correct) { opacity: 0.5; }.pf-feedback-box { margin-top: 14px; padding: 13px 17px; border-radius: 9px; font-size: 14px; line-height: 1.65; display: none; }.pf-feedback-box.pf-fb-correct { display: block; background: #f0fff4; border: 1.5px solid #38a169; color: #276749; }.pf-feedback-box.pf-fb-wrong { display: block; background: #fff5f5; border: 1.5px solid #e53e3e; color: #742a2a; }.pf-score-banner { text-align: center; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); border-radius: 14px; padding: 22px 30px; margin-top: 10px; margin-bottom: 10px; }.pf-score-banner .pf-score-emoji { font-size: 2.5em; margin-bottom: 6px; }.pf-score-banner .pf-score-text { font-size: 1.35em; font-weight: 800; color: #1a1a1a; }.pf-score-banner .pf-score-sub { font-size: 0.9em; color: #333; margin-top: 4px; }.pf-restart-btn { margin-top: 14px; padding: 10px 28px; background: #2d3748; color: white; border: none; border-radius: 25px; font-weight: 700; font-size: 0.95em; cursor: pointer; transition: background 0.2s; }.pf-restart-btn:hover { background: #1a202c; }/* Fix Observable Plot tooltip visibility — prevent currentColor:white from bleeding in */svg [aria-label="tip"] text { fill: #1a1a1a !important; }svg [aria-label="tip"] rect { fill: rgba(255, 255, 255, 0.97) !important; stroke: #d4d4d4 !important; }</style>```<span class="pe-badge">HS-ESS2-4</span> <span class="pe-badge">Time: 5 Days</span> <a class="quiz-jump-btn" href="#evaluate">🧠 Quiz & Evaluate ↓</a><div class="big-question">🌍 MYSTERY: Earth's Climate Cycles 🌍</div>::: {.engage-box}## 🔬 THE PHENOMENON<div style="font-size: 1.4em; font-weight: 700; text-align: center; margin: 20px 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">⚡ The amount of solar radiation hitting 65°N has been CYCLING UP AND DOWN for 750,000 years — repeating the same pattern every ~100,000 years! ⚡</div>### 🤔 THE BIG QUESTIONS:- 🌀 Could **natural cycles** be causing today's climate change?- 🛸 How has Earth's **position in space** changed over time?- 🔥 What happens to Earth's temperature when our orbit shifts?:::``` {ojs}//| echo: false{ // 1. Load Plotly const Plotly = await require("plotly.js-dist-min"); // 2. Generate Simulated Data to match the image // The graph covers 0 to 350,000 years ago const years = d3.range(0, 360, 0.5); const data = years.map(t => { // A. Insolation (Orange Line): Dominated by Precession (~23k yr cycle) // We sum sine waves to mimic the Milankovitch pattern seen in the image const precession = Math.sin((t / 23) * 2 * Math.PI) * 25; const obliquity = Math.sin((t / 41) * 2 * Math.PI) * 5; const eccentricity = Math.cos((t / 100) * 2 * Math.PI) * 2 + 1; // Modulates the amplitude // Combine and shift to match the Y-axis range (400-500) const insolation = 440 + (precession + obliquity) * eccentricity * 0.4 + (Math.random() * 2); // B. Temperature (Black Line): Sawtooth pattern (100k yr cycle) // Fast warming (interglacial), slow cooling (glacial) const cycle100k = (t % 110) / 110; // Create the "sawtooth" shape seen in ice core data let baseTemp = -8 + (Math.exp(-4 * cycle100k) * 10); // Add noise and correlation to insolation to make it look real const tempNoise = (Math.random() - 0.5) * 1.5; const temp = baseTemp + (insolation - 440) * 0.1 + tempNoise; return { t, insolation, temp }; }); // 3. Define the "Interglacial" (IG) Yellow Highlights // These approximate the yellow bars in your image const shapes = [ { type: 'rect', x0: 5, x1: 20, y0: 0, y1: 1, xref: 'x', yref: 'paper', fillcolor: 'gold', opacity: 0.2, line: {width: 0}}, { type: 'rect', x0: 118, x1: 135, y0: 0, y1: 1, xref: 'x', yref: 'paper', fillcolor: 'gold', opacity: 0.2, line: {width: 0}}, { type: 'rect', x0: 235, x1: 250, y0: 0, y1: 1, xref: 'x', yref: 'paper', fillcolor: 'gold', opacity: 0.2, line: {width: 0}}, { type: 'rect', x0: 325, x1: 345, y0: 0, y1: 1, xref: 'x', yref: 'paper', fillcolor: 'gold', opacity: 0.2, line: {width: 0}} ]; // 4. Create Traces const traceInsolation = { x: data.map(d => d.t), y: data.map(d => d.insolation), mode: 'lines', name: 'July Insolation', line: { color: '#e6ac5a', width: 2 }, // Light Orange yaxis: 'y2' // Maps to the left axis }; const traceTemp = { x: data.map(d => d.t), y: data.map(d => d.temp), mode: 'lines', name: 'Temperature Change', line: { color: '#2d3436', width: 1.5 } // Dark Grey/Black }; // 5. Layout Configuration const layout = { title: { text: "Insolation vs. Temperature (Past 350,000 Years)", font: { size: 18 } }, height: 500, margin: { l: 60, r: 60, t: 50, b: 60 }, showlegend: false, // X-Axis: Reversed (Present is 0, on the right) xaxis: { title: "Years before present (in thousands)", autorange: "reversed", range: [350, 0], showgrid: false }, // Left Y-Axis (Temperature - Black) yaxis: { title: "Temperature change from present (°C)", titlefont: { color: '#2d3436' }, tickfont: { color: '#2d3436' }, range: [-12, 6], side: 'right' // In Plotly, we often swap sides to match visual preference, usually temp is right in these charts }, // Right Y-Axis (Insolation - Orange) yaxis2: { title: "July Insolation at 65°N (W/m²)", titlefont: { color: '#e6ac5a' }, tickfont: { color: '#e6ac5a' }, overlaying: 'y', // Important: This overlays the second axis on top of the first side: 'left', range: [380, 530], showgrid: false }, shapes: shapes, // Annotations (IG labels and Snowflakes) annotations: [ // IG Labels { x: 12, y: 1, yref: 'paper', text: "<b>IG</b>", showarrow: false, font: {color: 'red', size: 12} }, { x: 126, y: 0.75, yref: 'paper', text: "<b>IG</b>", showarrow: false, font: {color: 'red', size: 12} }, { x: 242, y: 0.75, yref: 'paper', text: "<b>IG</b>", showarrow: false, font: {color: 'red', size: 12} }, { x: 335, y: 0.75, yref: 'paper', text: "<b>IG</b>", showarrow: false, font: {color: 'red', size: 12} }, // Snowflakes (Using emoji) { x: 60, y: -9, yref: 'y', text: "❄️", showarrow: false, font: {size: 20} }, { x: 165, y: -9, yref: 'y', text: "❄️", showarrow: false, font: {size: 20} }, { x: 270, y: -9, yref: 'y', text: "❄️", showarrow: false, font: {size: 20} }, // Legend (Manual placement) { x: 350, y: -16, yref: 'y', text: "<b>IG = Inter-glacial</b>", showarrow: false, xanchor: 'left', font: {color: 'red'} }, { x: 350, y: -18, yref: 'y', text: "<b>❄️ = Glacial</b>", showarrow: false, xanchor: 'left', font: {color: 'blue'} } ] }; // 6. Render const div = document.createElement('div'); Plotly.newPlot(div, [traceTemp, traceInsolation], layout, {responsive: true}); return div;}``````{ojs}//| echo: falsefunction buildQuiz(id, questions) { const outer = html`<div style="font-family:'Inter',sans-serif; max-width:720px; margin:18px auto;"></div>`; const toggle = html`<button style="display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border:2px solid #c7d2fe;border-radius:30px;background:linear-gradient(135deg,#eef2ff 0%,#e8f4fd 100%);color:#4338ca;font-weight:700;font-size:0.95em;cursor:pointer;transition:all 0.25s ease;box-shadow:0 2px 8px rgba(67,56,202,0.12);"><span style="font-size:1.15em;">✅</span><span>Check Your Understanding</span><span class="quiz-chevron" style="display:inline-block;transition:transform 0.3s ease;font-size:0.8em;">▶</span></button>`; toggle.onmouseenter = () => { toggle.style.background='linear-gradient(135deg,#dbeafe 0%,#c7d2fe 100%)'; toggle.style.boxShadow='0 4px 14px rgba(67,56,202,0.22)'; }; toggle.onmouseleave = () => { toggle.style.background='linear-gradient(135deg,#eef2ff 0%,#e8f4fd 100%)'; toggle.style.boxShadow='0 2px 8px rgba(67,56,202,0.12)'; }; outer.appendChild(toggle); const body = html`<div style="max-height:0;overflow:hidden;opacity:0;transition:max-height 0.5s cubic-bezier(0.4,0,0.2,1),opacity 0.4s ease,margin-top 0.4s ease,padding 0.4s ease;padding:0 20px;margin-top:0;background:linear-gradient(135deg,#eef2ff 0%,#e8f4fd 100%);border-radius:14px;border:2px solid #c7d2fe;"></div>`; const closeBtn = html`<div style="text-align:right;padding-top:14px;"><button style="padding:6px 16px;border:1.5px solid #c7d2fe;border-radius:20px;background:white;color:#4338ca;font-weight:700;font-size:0.82em;cursor:pointer;transition:all 0.2s;">▲ Hide Quiz</button></div>`; closeBtn.querySelector('button').onmouseenter = function(){ this.style.background='#eef2ff'; }; closeBtn.querySelector('button').onmouseleave = function(){ this.style.background='white'; }; body.appendChild(closeBtn); body.appendChild(html`<div style="text-align:center;margin-bottom:14px;"><span style="font-size:1.3em;font-weight:800;color:#4338ca;">✅ Check Your Understanding</span></div>`); let expanded = false; function collapseQuiz(){ expanded=false; body.style.maxHeight='0'; body.style.opacity='0'; body.style.marginTop='0'; body.style.padding='0 20px'; toggle.querySelector('.quiz-chevron').style.transform='rotate(0deg)'; } function expandQuiz(){ expanded=true; body.style.padding='0 20px 20px 20px'; body.style.marginTop='12px'; body.style.opacity='1'; body.style.maxHeight=body.scrollHeight+5000+'px'; toggle.querySelector('.quiz-chevron').style.transform='rotate(90deg)'; } toggle.onclick = () => { expanded ? collapseQuiz() : expandQuiz(); }; closeBtn.querySelector('button').onclick = collapseQuiz; questions.forEach((q, qi) => { const emoji = q.emoji || '❓'; const card = html`<div style="background:white;border-radius:10px;padding:16px 20px;margin-bottom:14px;border:2px solid #e2e8f0;box-shadow:0 2px 8px rgba(0,0,0,0.06);max-height:2000px;overflow:hidden;"><div style="font-size:11px;font-weight:700;color:#a0aec0;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;">${emoji} Question ${qi+1}</div><div style="font-size:15px;font-weight:700;color:#2d3748;margin-bottom:12px;line-height:1.5;">${q.q}</div></div>`; const fb = html`<div style="display:none;margin-top:10px;padding:12px 15px;border-radius:8px;font-size:13.5px;line-height:1.6;"></div>`; q.options.forEach((opt, oi) => { const btn = html`<div style="display:block;padding:10px 16px;margin:6px 0;border-radius:8px;border:2px solid #e2e8f0;cursor:pointer;font-size:14px;color:#4a5568;background:#f7fafc;transition:all 0.18s;user-select:none;">${opt}</div>`; btn.onmouseenter = () => { if(!card.dataset.done){ btn.style.borderColor='#667eea'; btn.style.background='#eef2ff'; btn.style.transform='translateX(3px)'; } }; btn.onmouseleave = () => { if(!card.dataset.done){ btn.style.borderColor='#e2e8f0'; btn.style.background='#f7fafc'; btn.style.transform='none'; } }; btn.onclick = () => { if(card.dataset.done) return; card.dataset.done='1'; const correct = oi===q.correct; btn.style.borderColor = correct ? '#38a169' : '#e53e3e'; btn.style.background = correct ? '#f0fff4' : '#fff5f5'; btn.style.fontWeight = '700'; btn.style.color = correct ? '#22543d' : '#9b2c2c'; if(!correct){ const corEl=card.querySelectorAll('div')[q.correct+2]; corEl.style.borderColor='#38a169'; corEl.style.background='#f0fff4'; corEl.style.fontWeight='700'; corEl.style.color='#22543d'; } card.querySelectorAll('div').forEach((el,i)=>{ if(i>1){ el.style.cursor='not-allowed'; el.style.opacity=(i-2===oi||i-2===q.correct)?'1':'0.5'; } }); fb.style.display='block'; fb.style.background = correct ? '#f0fff4' : '#fff5f5'; fb.style.border = correct ? '1.5px solid #38a169' : '1.5px solid #e53e3e'; fb.innerHTML = `<strong style="color:${correct?'#276749':'#c53030'}">${correct?'✅ Correct!':'❌ Not quite.'}</strong><br>${q.explanation}`; body.style.maxHeight = body.scrollHeight+2000+'px'; }; card.appendChild(btn); }); card.appendChild(fb); body.appendChild(card); }); outer.appendChild(body); return outer;}``````{ojs}//| echo: falsebuildQuiz("insolation-temp", [ { q: "In the graph above, what is the approximate period of the major temperature cycles?", options: ["About 10,000 years", "About 23,000 years", "About 100,000 years", "About 1 million years"], correct: 2, emoji: "🌡️", explanation: "The temperature trace shows a clear sawtooth pattern that repeats roughly every 100,000 years — matching Earth's eccentricity cycle. Notice the rapid warming (interglacial spikes) followed by slow cooling back into glacial periods." }, { q: "What do the yellow highlighted regions (labeled 'IG') represent?", options: ["Ice ages (glacial periods)", "Interglacial warm periods", "Volcanic eruptions", "Periods of low solar output"], correct: 1, emoji: "☀️", explanation: "IG stands for 'interglacial' — warm periods between ice ages when temperatures were similar to or warmer than today. Notice these correspond to peaks in the insolation (orange) curve." }])```# Engage: Solar Radiation Patterns## Solar Radiation at 65°NConnecting to our earlier questions about how Earth's temperature has varied in the past, let's analyze the total amount of energy from solar radiation reaching Earth at 65°N over the last 750,000 years.```{ojs}//| echo: falsePlot = require("@observablehq/plot")// Extended Radiation Data (750k years)radiationData = [ {kya: 740, radiation: 460}, {kya: 720, radiation: 490}, {kya: 700, radiation: 470}, {kya: 680, radiation: 440}, {kya: 660, radiation: 500}, {kya: 640, radiation: 470}, {kya: 620, radiation: 450}, {kya: 600, radiation: 480}, {kya: 580, radiation: 510}, {kya: 560, radiation: 470}, {kya: 540, radiation: 450}, {kya: 520, radiation: 490}, {kya: 500, radiation: 460}, {kya: 480, radiation: 520}, {kya: 460, radiation: 530}, {kya: 440, radiation: 480}, {kya: 420, radiation: 460}, {kya: 400, radiation: 460}, {kya: 380, radiation: 490}, {kya: 360, radiation: 470}, {kya: 340, radiation: 440}, {kya: 320, radiation: 500}, {kya: 300, radiation: 470}, {kya: 280, radiation: 450}, {kya: 260, radiation: 480}, {kya: 240, radiation: 510}, {kya: 220, radiation: 470}, {kya: 200, radiation: 450}, {kya: 180, radiation: 490}, {kya: 160, radiation: 460}, {kya: 140, radiation: 520}, {kya: 120, radiation: 530}, {kya: 100, radiation: 480}, {kya: 80, radiation: 460}, {kya: 60, radiation: 440}, {kya: 40, radiation: 470}, {kya: 20, radiation: 450}, {kya: 0, radiation: 480}]// Vostok ice core data (kept for reference/comparison later)iceCoreTempData = [ {kya: 400, temp: -8}, {kya: 380, temp: -4}, {kya: 360, temp: -6}, {kya: 340, temp: -8}, {kya: 320, temp: -3}, {kya: 300, temp: -6}, {kya: 280, temp: -8}, {kya: 260, temp: -4}, {kya: 240, temp: -2}, {kya: 220, temp: -6}, {kya: 200, temp: -8}, {kya: 180, temp: -4}, {kya: 160, temp: -6}, {kya: 140, temp: -1}, {kya: 120, temp: 2}, {kya: 100, temp: -4}, {kya: 80, temp: -6}, {kya: 60, temp: -8}, {kya: 40, temp: -6}, {kya: 20, temp: -8}, {kya: 10, temp: -2}, {kya: 0, temp: 0}]``````{ojs}//| echo: falseviewof timeRange = Inputs.range([0, 750], { step: 50, value: 750, label: "View last ___ thousand years:"})``````{ojs}//| echo: falsefilteredRadData = radiationData.filter(d => d.kya <= timeRange)Plot.plot({ title: "Summer Radiation at 65°N Over the Past " + timeRange + ",000 Years", subtitle: "Solar Radiation (Watts/m²)", width: 750, height: 400, x: {label: "Thousands of Years Ago (kya)", reverse: true}, y: {label: "Radiation (W/m²)", domain: [420, 550]}, marks: [ Plot.ruleY([480], {stroke: "#999", strokeDasharray: "4,4"}), Plot.areaY(filteredRadData, {x: "kya", y: "radiation", y2: 480, fill: d => d.radiation > 480 ? "#e74c3c" : "#3498db", fillOpacity: 0.4, tip: true}), Plot.line(filteredRadData, {x: "kya", y: "radiation", stroke: "#2c3e50", strokeWidth: 2, tip: true}), Plot.dot(filteredRadData.filter(d => d.radiation > 520), {x: "kya", y: "radiation", fill: "red", r: 5, tip: true}), Plot.text(filteredRadData.filter(d => d.radiation > 520), {x: "kya", y: "radiation", text: d => "Peak", dy: -10, fontSize: 10}) ]})```::: {.check-understanding}### 🎯 DETECTIVE MODE: What Do You See?1. 🔍 What **repeating pattern** jumps out at you in the last 750,000 years?2. ⏰ How often does the radiation **peak**?3. 🧊 Could this pattern explain **Ice Ages**?:::<div class="mind-blown">🤯 WAIT — this pattern has been repeating for THREE-QUARTERS OF A MILLION YEARS?! Let's find out WHY... 🤯</div>```{ojs}//| echo: falsebuildQuiz("solar-rad-65n", [ { q: "What repeating pattern do you observe in the Summer Radiation at 65°N graph?", options: ["Radiation is constant over time", "Radiation peaks and dips in a regular cycle roughly every 20,000–25,000 years", "Radiation has been steadily increasing", "The pattern is completely random"], correct: 1, emoji: "🔍", explanation: "The graph shows regular peaks and valleys with a period of roughly 20,000–25,000 years. This matches the precession cycle — one of the three Milankovitch orbital cycles that controls how much summer sunlight reaches 65°N." }, { q: "What does the dashed horizontal line at ~480 W/m² represent, and why is it significant?", options: ["The maximum possible radiation", "An approximate average — above it (red) means warmer summers, below it (blue) means cooler summers", "The current radiation level", "The minimum needed for life"], correct: 1, emoji: "📊", explanation: "The 480 W/m² line serves as a baseline. When radiation is above this line (shaded red), summers at 65°N are warmer and can melt ice sheets. When below (shaded blue), summers are cooler and ice can accumulate — potentially triggering ice ages." }])```# Explore: Earth's Orbital Cycles## 🎢 The THREE ORBITAL CYCLES**MISSION:** Use these interactive models to gather evidence about Earth's position in space. Could these orbital wobbles and stretches be causing the 100,000-year radiation pattern we just saw?<div style="background: linear-gradient(to right, #ff6b6b, #feca57); color: white; padding: 15px; border-radius: 10px; margin: 15px 0; font-weight: 600;">💡 <strong>DID YOU KNOW?</strong> In 1941, Serbian scientist Milutin Milankovitch figured out that Earth's "wobbles" in space control Ice Ages. Mind = blown! 🤯</div>### 🔵 Cycle 1: ECCENTRICITY (~100,000 years)**THE STRETCH:** Earth's orbit changes from nearly circular ⭕ to more elliptical 🥚```{ojs}//| echo: falseviewof eccentricity = Inputs.range([0, 0.06], { step: 0.005, value: 0.017, label: "Eccentricity (current = 0.017):"})``````{ojs}//| echo: false// Draw orbit with variable eccentricity{ const width = 500; const height = 400; const cx = width / 2; const cy = height / 2; const a = 180; // semi-major axis const b = a * Math.sqrt(1 - eccentricity * eccentricity); // semi-minor axis const c = a * eccentricity; // focal distance const svg = d3.create("svg") .attr("width", width) .attr("height", height); // Draw orbit ellipse svg.append("ellipse") .attr("cx", cx + c) .attr("cy", cy) .attr("rx", a) .attr("ry", b) .attr("fill", "none") .attr("stroke", "#3498db") .attr("stroke-width", 2); // Draw Sun at one focus svg.append("circle") .attr("cx", cx) .attr("cy", cy) .attr("r", 20) .attr("fill", "#f1c40f"); svg.append("text") .attr("x", cx) .attr("y", cy + 5) .attr("text-anchor", "middle") .attr("font-size", "12px") .text("☀️"); // Draw Earth positions svg.append("circle") .attr("cx", cx + c + a) .attr("cy", cy) .attr("r", 10) .attr("fill", "#3498db"); svg.append("text") .attr("x", cx + c + a) .attr("y", cy - 20) .attr("text-anchor", "middle") .attr("font-size", "10px") .text("Aphelion (farthest)"); svg.append("circle") .attr("cx", cx + c - a) .attr("cy", cy) .attr("r", 10) .attr("fill", "#2ecc71"); svg.append("text") .attr("x", cx + c - a) .attr("y", cy - 20) .attr("text-anchor", "middle") .attr("font-size", "10px") .text("Perihelion (closest)"); // Info box svg.append("rect") .attr("x", 10) .attr("y", 10) .attr("width", 200) .attr("height", 80) .attr("fill", "#f5f5f5") .attr("rx", 5); svg.append("text") .attr("x", 20) .attr("y", 35) .attr("font-size", "12px") .text(`Eccentricity: ${eccentricity.toFixed(3)}`); const distDiff = ((2 * a * eccentricity) / a * 100).toFixed(1); svg.append("text") .attr("x", 20) .attr("y", 55) .attr("font-size", "12px") .text(`Distance variation: ${distDiff}%`); svg.append("text") .attr("x", 20) .attr("y", 75) .attr("font-size", "11px") .attr("fill", "#666") .text(`Cycle: ~100,000 years`); return svg.node();}``````{ojs}//| echo: falsebuildQuiz("eccentricity-quiz", [ { q: "As you increase eccentricity from 0 to 0.06, what happens to Earth's orbit shape?", options: ["It becomes more circular", "It becomes more elongated (elliptical)", "It stays the same shape but gets larger", "It flips upside down"], correct: 1, emoji: "🥚", explanation: "Higher eccentricity means the orbit is more stretched out — more elliptical. At eccentricity = 0, the orbit would be a perfect circle. At 0.06 (the maximum in Earth's cycle), it's noticeably oval-shaped." }, { q: "What is the period of Earth's eccentricity cycle, and why does it matter for climate?", options: ["23,000 years — it changes seasonal timing", "41,000 years — it changes seasonal intensity", "100,000 years — it changes the total solar energy Earth receives over a year", "1,000 years — it causes volcanic eruptions"], correct: 2, emoji: "⏰", explanation: "The eccentricity cycle takes ~100,000 years. When the orbit is more elliptical, the difference between Earth's closest approach (perihelion) and farthest point (aphelion) is greater, affecting total annual solar radiation — and this matches the major glacial-interglacial cycle!" }])```### 🌐 Cycle 2: OBLIQUITY (Axial Tilt) (~41,000 years)**THE WOBBLE:** Earth doesn't spin perfectly upright! Our axial tilt changes between 22.1° and 24.5° — affecting how extreme our seasons are! 🎿❄️🏖️```{ojs}//| echo: falseviewof tiltAngle = Inputs.range([22.1, 24.5], { step: 0.1, value: 23.5, label: "Axial Tilt (current = 23.5°):"})``````{ojs}//| echo: false{ const width = 500; const height = 350; const svg = d3.create("svg") .attr("width", width) .attr("height", height); // Draw orbital plane svg.append("line") .attr("x1", 50) .attr("y1", height/2) .attr("x2", width - 50) .attr("y2", height/2) .attr("stroke", "#ccc") .attr("stroke-width", 2) .attr("stroke-dasharray", "5,5"); svg.append("text") .attr("x", width - 100) .attr("y", height/2 + 20) .attr("font-size", "11px") .attr("fill", "#999") .text("Orbital Plane"); // Draw Earth const earthX = width / 2; const earthY = height / 2; const earthR = 60; svg.append("circle") .attr("cx", earthX) .attr("cy", earthY) .attr("r", earthR) .attr("fill", "#3498db"); // Draw tilted axis const tiltRad = tiltAngle * Math.PI / 180; const axisLength = 120; svg.append("line") .attr("x1", earthX - axisLength * Math.sin(tiltRad)) .attr("y1", earthY + axisLength * Math.cos(tiltRad)) .attr("x2", earthX + axisLength * Math.sin(tiltRad)) .attr("y2", earthY - axisLength * Math.cos(tiltRad)) .attr("stroke", "#e74c3c") .attr("stroke-width", 3); // Angle indicator svg.append("text") .attr("x", earthX + 70) .attr("y", earthY - 80) .attr("font-size", "14px") .attr("font-weight", "bold") .attr("fill", "#e74c3c") .text(`${tiltAngle.toFixed(1)}°`); // Effect description const effect = tiltAngle > 23.5 ? "MORE extreme seasons" : tiltAngle < 23.5 ? "LESS extreme seasons" : "Current tilt"; svg.append("rect") .attr("x", 20) .attr("y", 20) .attr("width", 180) .attr("height", 60) .attr("fill", "#f5f5f5") .attr("rx", 5); svg.append("text") .attr("x", 30) .attr("y", 45) .attr("font-size", "12px") .text(`Tilt: ${tiltAngle.toFixed(1)}°`); svg.append("text") .attr("x", 30) .attr("y", 65) .attr("font-size", "11px") .attr("fill", "#666") .text(effect); return svg.node();}``````{ojs}//| echo: falsebuildQuiz("obliquity-quiz", [ { q: "When Earth's axial tilt increases from 22.1° to 24.5°, what happens to the seasons?", options: ["Seasons become less extreme (milder summers and winters)", "Seasons become more extreme (hotter summers and colder winters)", "Only summers change; winters stay the same", "The seasons reverse (summer becomes winter)"], correct: 1, emoji: "🌡️", explanation: "Greater tilt means the Northern Hemisphere points more directly toward the Sun in summer and more directly away in winter. This amplifies the seasonal contrast — hotter summers and colder winters. Less tilt = milder, more uniform seasons." }, { q: "Why is obliquity important for ice ages?", options: ["Higher tilt causes Earth to move closer to the Sun", "Lower tilt means cooler summers, allowing winter snow to persist and ice sheets to grow", "Higher tilt stops ocean currents", "Obliquity has no effect on ice ages"], correct: 1, emoji: "🧊", explanation: "When obliquity decreases, summers at high latitudes become cooler. If summers aren't warm enough to melt winter snow, ice accumulates year after year, eventually forming massive ice sheets. This is the key mechanism by which obliquity influences glaciation." }])```### 🔄 Cycle 3: PRECESSION (~23,000 years)**THE SPIN:** Earth's axis wobbles like a spinning top 🌀 — changing which hemisphere points toward the Sun when we're closest! This affects whether Northern or Southern summers are INTENSE.```{ojs}//| echo: falseviewof precessionAngle = Inputs.range([0, 360], { step: 15, value: 0, label: "Precession angle (degrees):"})``````{ojs}//| echo: false{ const width = 450; const height = 350; const svg = d3.create("svg") .attr("width", width) .attr("height", height); const cx = width / 2; const cy = height / 2; // Wobble circle (path of North Pole) svg.append("ellipse") .attr("cx", cx) .attr("cy", cy - 80) .attr("rx", 50) .attr("ry", 20) .attr("fill", "none") .attr("stroke", "#9b59b6") .attr("stroke-width", 2) .attr("stroke-dasharray", "5,5"); // Earth svg.append("circle") .attr("cx", cx) .attr("cy", cy) .attr("r", 50) .attr("fill", "#3498db"); // Wobbling axis const precRad = precessionAngle * Math.PI / 180; const wobbleX = 30 * Math.cos(precRad); const wobbleY = 15 * Math.sin(precRad); svg.append("line") .attr("x1", cx - wobbleX) .attr("y1", cy + 100 - wobbleY) .attr("x2", cx + wobbleX) .attr("y2", cy - 100 + wobbleY) .attr("stroke", "#e74c3c") .attr("stroke-width", 3); // North marker svg.append("circle") .attr("cx", cx + wobbleX) .attr("cy", cy - 100 + wobbleY) .attr("r", 8) .attr("fill", "#e74c3c"); svg.append("text") .attr("x", cx + wobbleX + 15) .attr("y", cy - 100 + wobbleY) .attr("font-size", "12px") .text("N"); // Info svg.append("rect") .attr("x", 10) .attr("y", height - 70) .attr("width", 200) .attr("height", 60) .attr("fill", "#f5f5f5") .attr("rx", 5); svg.append("text") .attr("x", 20) .attr("y", height - 45) .attr("font-size", "12px") .text(`Precession: ${precessionAngle}°`); svg.append("text") .attr("x", 20) .attr("y", height - 25) .attr("font-size", "11px") .attr("fill", "#666") .text("Cycle: ~23,000 years"); return svg.node();}``````{=html}<iframe src="orbital_simulator.html" width="100%" height="1100px" style="border:none;"></iframe>```::: {.lab-activity}## 🔬 INVESTIGATION LAB: Crack the Climate Code! 🕵️<div style="text-align: center; font-size: 1.3em; font-weight: 700; margin: 15px 0; color: #e17055;">⚡ TIME TO BECOME AN ORBITAL DETECTIVE! ⚡</div>### 🎒 Materials:- Graph paper or spreadsheet 📊- Colored pencils 🎨- Calculator 🧮- Your detective skills 🔍### 📋 Mission Steps:**STEP 1: Analyze the Cycles** 🌀1. Use the interactive simulations above to explore each cycle2. Record observations in your data table:| Cycle | Period | Current Value | Range | Climate Effect ||-------|--------|---------------|-------|----------------|| Eccentricity | ~100,000 yrs | 0.017 | 0.0 - 0.06 | Changes total radiation received || Obliquity | ~41,000 yrs | 23.5° | 22.1° - 24.5° | Changes seasonal contrast || Precession | ~23,000 yrs | N/A | 360° rotation | Changes timing of seasons |**STEP 2: Connect to the Data** 📈Go back and review that radiation graph from the beginning!1. 🎯 Which cycle's period **matches** the big 100,000-year pattern?2. 🌊 Could the other two cycles explain the smaller "wiggles"?**STEP 3: Make Your Claim** 🎤<div style="background: white; padding: 15px; border: 3px solid #e17055; border-radius: 10px; margin: 10px 0;">📣 <strong>YOUR VERDICT:</strong> Do Earth's orbital cycles CAUSE those radiation changes? Back it up with EVIDENCE from the models and data!</div>:::```{ojs}//| echo: falsebuildQuiz("precession-orbital-quiz", [ { q: "How does precession affect Earth's climate?", options: ["It changes the total solar energy Earth receives each year", "It changes which season occurs when Earth is closest to the Sun", "It changes Earth's distance from the Sun", "It changes the Sun's brightness"], correct: 1, emoji: "🔄", explanation: "Precession (Earth's axial wobble) changes WHICH season occurs at perihelion (closest approach to the Sun). Currently, Northern Hemisphere winter occurs near perihelion. ~11,500 years from now, Northern Hemisphere summer will be at perihelion, making Northern summers more intense." }, { q: "Which Milankovitch cycle's period best matches the major ~100,000-year glacial pattern in the radiation data?", options: ["Precession (~23,000 years)", "Obliquity (~41,000 years)", "Eccentricity (~100,000 years)", "None of them match"], correct: 2, emoji: "🎯", explanation: "The eccentricity cycle at ~100,000 years matches the dominant glacial-interglacial pattern. While precession and obliquity contribute smaller variations (the 'wiggles'), the big picture rhythm of ice ages is paced by eccentricity changes." }, { q: "In the orbital simulator, what happens when all three cycles align to minimize summer radiation at 65°N?", options: ["Temperatures rise sharply", "Conditions favor ice sheet growth and glaciation", "Ocean currents reverse", "The Earth moves closer to the Sun"], correct: 1, emoji: "❄️", explanation: "When eccentricity is high, obliquity is low, and precession puts Northern summer at aphelion (farthest from the Sun), summer radiation at 65°N drops to its lowest. Cool summers can't melt winter snow, ice sheets grow, and albedo feedback amplifies the cooling — triggering an ice age." }])```# Explain: Connecting Orbit to Climate <div class="big-question">🧊 THE MILLION-DOLLAR QUESTION 🧊</div><div style="text-align: center; font-size: 1.5em; font-weight: 700; margin: 20px 0; color: #667eea;">Did Earth's orbital wobbles ACTUALLY cause Ice Ages? 🤔</div>::: {.explain-box}## 🌍 THE SECRET MECHANISM REVEALED<div style="background: rgba(255,255,255,0.3); padding: 15px; border-radius: 10px; margin: 15px 0;">💥 <strong>PLOT TWIST:</strong> It's not about total yearly radiation — it's about **SUMMER** radiation at 65°N (high northern latitudes)!</div>### Why 65°N Matters:1. Most of Earth's land mass is in the Northern Hemisphere2. Ice sheets grow when summer is NOT warm enough to melt winter snow3. When summer radiation at 65°N is LOW, ice sheets expand4. When summer radiation at 65°N is HIGH, ice sheets retreat### The Feedback Loop:```Low summer radiation → Snow persists → Ice sheets grow → Higher albedo → More cooling → More ice growth```:::## Comparing Radiation and Temperature```{ojs}//| echo: false// Combined visualizationcombinedData = iceCoreTempData.map(d => { const rad = radiationData.find(r => r.kya === d.kya); return { kya: d.kya, temp: d.temp, radiation: rad ? rad.radiation : 480 };})Plot.plot({ title: "Temperature vs. Summer Radiation at 65°N", width: 750, height: 400, x: {label: "Thousands of Years Ago", reverse: true}, y: {label: "Temperature Anomaly (°C)", axis: "left"}, marks: [ Plot.line(combinedData, {x: "kya", y: "temp", stroke: "#e74c3c", strokeWidth: 2, tip: true}), Plot.dot(combinedData.filter(d => d.temp > -2), {x: "kya", y: "temp", fill: "#e74c3c", r: 6, tip: true}), Plot.text([{x: 350, y: 2}], {x: "x", y: "y", text: d => "Temperature", fill: "#e74c3c", fontSize: 12}), // Add radiation trend for comparison (scaled to fit) Plot.line(combinedData, {x: "kya", y: d => (d.radiation - 480) / 10 - 6, stroke: "#3498db", strokeWidth: 1, strokeDasharray: "4,2", tip: true}), Plot.text([{x: 350, y: -5}], {x: "x", y: "y", text: d => "Radiation (scaled)", fill: "#3498db", fontSize: 10}) ]})```::: {.key-idea}### 💡 Key Ideas: Earth-Sun Dynamics1. **Temperatures on Earth have fluctuated greatly** during human history, marked by glacial and interglacial periods2. **A pattern exists** in the frequency of these fluctuations (~100,000 years)3. **The pattern is explained by cyclical changes** in Earth's orbit shape and tilt4. **These changes cause ice sheets** to expand and retreat5. **Current orbital parameters suggest Earth should be cooling**, yet global temperatures are increasing:::```{ojs}//| echo: falsebuildQuiz("temp-vs-rad-quiz", [ { q: "Looking at the Temperature vs. Summer Radiation chart, what is the relationship between radiation peaks and temperature peaks?", options: ["They are completely unrelated", "Temperature peaks closely follow radiation peaks — they are strongly correlated", "Temperature peaks occur opposite to radiation peaks", "Only some peaks align; most are random"], correct: 1, emoji: "📈", explanation: "The red temperature line and blue radiation line show a strong correlation — when summer radiation at 65°N peaks, temperatures rise to interglacial levels shortly after. This is powerful evidence that orbital changes in solar radiation drive the glacial-interglacial cycle." }, { q: "Based on the key ideas, why is it significant that current orbital parameters predict cooling, yet Earth is warming?", options: ["It means Milankovitch theory is wrong", "It means another powerful factor (greenhouse gases) must be overriding the natural orbital cooling trend", "It means Earth's orbit has changed unexpectedly", "It means the data is inaccurate"], correct: 1, emoji: "🚨", explanation: "Milankovitch cycles have reliably explained 800,000+ years of climate patterns. The fact that Earth is warming despite orbital parameters favoring cooling is strong evidence that human greenhouse gas emissions are now the dominant climate forcing — powerful enough to override natural orbital trends." }])```# Elaborate: Solar Activity vs. Glacial Cycles<div class="big-question">☀️ BUT WAIT... WHAT ABOUT THE SUN? ☀️</div>## 🔥 Solar Activity Data<div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; padding: 20px; border-radius: 12px; margin: 20px 0; font-size: 1.1em;">🤔 <strong>NEW THEORY ALERT:</strong> Some people say the Sun itself is getting brighter, causing climate change. We know orbital wobbles caused Ice Ages... but what about the Sun's OUTPUT? Let's investigate! 🕵️</div>```{ojs}//| echo: falsesolarData = [ {year: 1880, tsi: 1365.5, temp: -0.16}, {year: 1900, tsi: 1365.7, temp: -0.08}, {year: 1920, tsi: 1365.6, temp: -0.25}, {year: 1940, tsi: 1365.8, temp: 0.12}, {year: 1960, tsi: 1365.9, temp: -0.01}, {year: 1980, tsi: 1366.1, temp: 0.26}, {year: 2000, tsi: 1366.0, temp: 0.42}, {year: 2020, tsi: 1361.0, temp: 1.02}]Plot.plot({ title: "Solar Output (TSI) vs Global Temperature", width: 700, height: 400, x: {label: "Year"}, marks: [ Plot.line(solarData, {x: "year", y: d => (d.tsi - 1360) * 2, stroke: "#f1c40f", strokeWidth: 2, tip: true}), Plot.line(solarData, {x: "year", y: d => d.temp * 3 + 5, stroke: "#e74c3c", strokeWidth: 2, tip: true}), Plot.text([{x: 1900, y: 12}], {x: "x", y: "y", text: d => "Solar Output", fill: "#f1c40f", fontSize: 12}), Plot.text([{x: 1900, y: 7}], {x: "x", y: "y", text: d => "Temperature", fill: "#e74c3c", fontSize: 12}) ]})```::: {.check-understanding}### ✅ Analysis Questions1. Has solar output increased significantly since 1980?2. Has temperature increased significantly since 1980?3. Can changes in solar output explain recent warming? Why or why not?:::```{ojs}//| echo: falsebuildQuiz("tsi-temp-quiz", [ { q: "Looking at the Solar Output (TSI) vs. Global Temperature chart, what happens after 1980?", options: ["Both solar output and temperature increase together", "Solar output increases but temperature decreases", "Solar output levels off or decreases while temperature rises sharply", "Both solar output and temperature decrease"], correct: 2, emoji: "📊", explanation: "After ~1980, solar output (yellow line) flattens or even slightly decreases, while global temperature (red line) rises dramatically. This divergence is key evidence that the Sun's output is NOT driving recent warming." }, { q: "What can you conclude from the fact that solar output and temperature diverge after 1980?", options: ["The Sun is the main driver of current warming", "Another factor besides solar output must be responsible for the rapid warming since 1980", "Temperature data after 1980 must be incorrect", "Solar cycles take time to affect temperature, so the warming will stop soon"], correct: 1, emoji: "🔬", explanation: "If the Sun were driving warming, we'd expect solar output and temperature to rise together. Since they diverge — solar output flat, temperature shooting up — something else must be responsible. This points to rising greenhouse gas concentrations as the dominant cause of recent warming." }])```# Evaluate: Are Orbital Factors Causing Warming Today?<div class="big-question">🚨 THE FINAL VERDICT 🚨</div><div style="text-align: center; font-size: 1.4em; font-weight: 700; margin: 20px 0; color: #fa709a;">So... are Earth's orbital cycles causing climate change RIGHT NOW? 🌡️</div>::: {.evaluate-box}## 📊 THE EVIDENCE SAYS...Based on current orbital parameters:| Parameter | Current Value | Trend | Climate Effect ||-----------|---------------|-------|----------------|| Eccentricity | 0.017 | Decreasing | Less seasonal variation || Obliquity | 23.44° | Decreasing | Less extreme seasons || Precession | NH summer at aphelion | Changing slowly | Cooler NH summers |**Conclusion:** Based on Milankovitch cycles alone, Earth should be gradually cooling. The fact that Earth is warming despite this indicates another factor is at play.This sets up our next investigation: **What IS causing the warming?**:::---```{ojs}//| echo: false{ // 1. CONTENT: Myths and Facts about Earth-Sun Dynamics & Milankovitch Cycles const cards = [ { text: "Earth's orbit around the Sun is a perfect circle.", type: "Myth", explanation: "False. Earth's orbit is an ellipse — slightly oval-shaped. This eccentricity changes over a ~100,000-year cycle, affecting how much solar energy Earth receives." }, { text: "Milankovitch cycles can trigger ice ages by changing the distribution of solar energy on Earth.", type: "Fact", explanation: "Correct! Even though total solar energy barely changes, shifts in where and when that energy arrives — especially at 65°N in summer — can trigger the growth or retreat of ice sheets." }, { text: "When Earth is closest to the Sun (perihelion), it is summer in the Northern Hemisphere.", type: "Myth", explanation: "False. Earth is currently closest to the Sun in early January — which is winter in the Northern Hemisphere. Seasons are caused by axial tilt, not distance from the Sun." }, { text: "Earth's axial tilt stays fixed at exactly 23.5° forever.", type: "Myth", explanation: "False. Earth's tilt slowly cycles between about 22.1° and 24.5° over ~41,000 years. More tilt means more extreme seasons; less tilt means milder seasons." }, { text: "Summer insolation at 65°N is important for ice ages because that's where most of Earth's land is located.", type: "Fact", explanation: "Correct! The Northern Hemisphere has most of Earth's land mass. If summers at 65°N are too cool to melt the previous winter's snow, ice sheets can grow — potentially triggering an ice age." }, { text: "The 'wobble' of Earth's axis (precession) changes the total amount of solar energy Earth receives each year.", type: "Myth", explanation: "False. Precession only changes which season occurs when Earth is closest to the Sun. It does not change the total annual solar energy received — it shifts how that energy is distributed across seasons." }, { text: "Based on current Milankovitch cycles, Earth should be slowly cooling right now.", type: "Fact", explanation: "Correct! Our current orbital parameters — decreasing eccentricity and obliquity, with Northern Hemisphere summer at aphelion — point toward gradual cooling. The fact that Earth is rapidly warming instead means another factor (greenhouse gases) is overriding the natural trend." }, { text: "The ~100,000-year ice age cycle is caused by changes in Earth's axial tilt.", type: "Myth", explanation: "False. The ~100,000-year cycle matches Earth's eccentricity cycle — the gradual change in the shape of Earth's orbit. Axial tilt (obliquity) drives a separate ~41,000-year cycle." }, { text: "Milankovitch cycles have successfully explained the timing of ice ages over the past 800,000 years.", type: "Fact", explanation: "Correct! Ice core records show that glacial-interglacial cycles closely match the rhythms predicted by Milankovitch's three orbital parameters. This is strong evidence that orbital cycles drove past climate change." }, { text: "Because Milankovitch cycles caused past climate changes, they must also be responsible for the warming we see today.", type: "Myth", explanation: "False. Milankovitch cycles work over tens of thousands of years. Current warming has occurred in just ~150 years — far too fast for orbital changes. The culprit is the rapid increase in greenhouse gases from human activity." }, { text: "A stronger axial tilt leads to more extreme seasons — hotter summers and colder winters.", type: "Fact", explanation: "Correct! Greater tilt means each hemisphere tilts more directly toward (or away from) the Sun during summer (or winter), intensifying seasonal temperature swings." }, { text: "Precession causes ice ages by moving Earth farther away from the Sun.", type: "Myth", explanation: "False. Precession does not change Earth's distance from the Sun — it only changes which season lines up with perihelion (closest approach). Ice ages result from changes in seasonal insolation, not total distance." } ]; // 2. STATE MANAGEMENT let currentIndex = 0; let score = 0; // Container for the game const container = html`<div style=" font-family: sans-serif; max-width: 500px; margin: 20px auto; text-align: center; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; background: #f7fafc; box-shadow: 0 4px 6px rgba(0,0,0,0.1); "></div>`; // Function to render the current card function renderCard() { container.innerHTML = ""; // A. End Screen if (currentIndex >= cards.length) { container.innerHTML = ` <h2 style="color: #2d3748; margin-bottom: 10px;">Activity Complete!</h2> <div style="font-size: 40px; margin-bottom: 10px;">🎉</div> <p style="font-size: 18px; color: #2d3748;">You got <b>${score} / ${cards.length}</b> correct.</p> <p style="color: #718096; font-size: 14px; margin-bottom: 20px;">Review the "Earth-Sun Dynamics" sections for any you missed.</p> <button id="restart-btn" style=" padding: 10px 20px; background: #3182ce; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; ">Play Again</button> `; container.querySelector("#restart-btn").addEventListener("click", () => { currentIndex = 0; score = 0; renderCard(); }); return; } // B. The Card const cardData = cards[currentIndex]; const progress = html`<div style="font-size: 12px; color: #a0aec0; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px;">Card ${currentIndex + 1} of ${cards.length}</div>`; const card = html` <div style=" background: white; min-height: 200px; display: flex; align-items: center; justify-content: center; padding: 30px; border-radius: 8px; border: 1px solid #cbd5e0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 25px; "> <h3 style="color: #2d3748; font-size: 18px; line-height: 1.5; margin: 0;">${cardData.text}</h3> </div> `; const controls = html` <div style="display: flex; justify-content: center; gap: 15px;"> <button id="myth-btn" style=" background: white; color: #e53e3e; border: 2px solid #e53e3e; padding: 10px 24px; border-radius: 50px; font-weight: bold; cursor: pointer; font-size: 16px; transition: all 0.2s; ">MYTH (False)</button> <button id="fact-btn" style=" background: white; color: #38a169; border: 2px solid #38a169; padding: 10px 24px; border-radius: 50px; font-weight: bold; cursor: pointer; font-size: 16px; transition: all 0.2s; ">FACT (True)</button> </div> `; const feedback = html`<div style=" display: none; margin-top: 20px; padding: 15px; border-radius: 6px; text-align: left; "></div>`; container.appendChild(progress); container.appendChild(card); container.appendChild(controls); container.appendChild(feedback); const handleChoice = (choice) => { const isCorrect = choice === cardData.type; if (isCorrect) score++; const btnMyth = container.querySelector("#myth-btn"); const btnFact = container.querySelector("#fact-btn"); btnMyth.disabled = true; btnFact.disabled = true; if (choice === "Myth") { btnMyth.style.background = "#e53e3e"; btnMyth.style.color = "white"; } else { btnFact.style.background = "#38a169"; btnFact.style.color = "white"; } feedback.style.display = "block"; feedback.style.background = isCorrect ? "#f0fff4" : "#fff5f5"; feedback.style.border = isCorrect ? "1px solid #38a169" : "1px solid #e53e3e"; feedback.innerHTML = ` <div style="font-size: 18px; margin-bottom: 5px; font-weight: bold; color: ${isCorrect ? "#2f855a" : "#c53030"}"> ${isCorrect ? "✅ Correct!" : "❌ Incorrect."} </div> <div style="color: #4a5568; margin-bottom: 10px;">It is a <b>${cardData.type}</b>. ${cardData.explanation}</div> <div style="text-align: right;"> <button id="next-btn" style=" background: #4a5568; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-weight: bold; ">Next Card →</button> </div> `; feedback.querySelector("#next-btn").addEventListener("click", () => { currentIndex++; renderCard(); }); }; container.querySelector("#myth-btn").addEventListener("click", () => handleChoice("Myth")); container.querySelector("#fact-btn").addEventListener("click", () => handleChoice("Fact")); } renderCard(); return container;}```---::: {.quiz-section}```{ojs}//| echo: false{ const d3 = await require("d3@7"); const questions = [ { q: "What is the approximate period of the eccentricity cycle?", options: ["23,000 years", "41,000 years", "100,000 years", "1 million years"], correct: 2, explanation: "The eccentricity cycle takes about 100,000 years — the longest of the three Milankovitch cycles. This matches the major Ice Age pattern seen in the paleoclimate data." }, { q: "Why is summer radiation at 65°N latitude so important for ice ages?", options: [ "It's where most people live", "It's where most land mass is located, and ice sheets need cool summers to persist", "The Sun is closest to Earth at this latitude", "Ocean currents are strongest here" ], correct: 1, explanation: "Most of Earth's land is in the Northern Hemisphere. When summers at 65°N are cool enough that winter snow doesn't fully melt, ice sheets can grow and persist — triggering an ice age." }, { q: "Earth's current axial tilt is approximately:", options: ["22.1°", "23.5°", "24.5°", "45°"], correct: 1, explanation: "Earth currently tilts at about 23.5° — right in the middle of its range between the minimum (22.1°) and maximum (24.5°)." }, { q: "According to Milankovitch cycles, what should Earth's climate be doing right now?", options: ["Warming rapidly", "Staying constant", "Cooling gradually", "Experiencing an ice age"], correct: 2, explanation: "Based on current orbital parameters alone, Earth should be cooling gradually. The fact that it's warming rapidly instead means another factor — greenhouse gas emissions — must be at work." }, { q: "What causes the ~100,000 year glacial-interglacial cycle?", options: [ "Changes in the Sun's energy output", "Volcanic activity", "Changes in Earth's orbital eccentricity", "Human activity" ], correct: 2, explanation: "Changes in Earth's orbital eccentricity — how elliptical or circular its orbit is — drive the major 100,000-year glacial-interglacial cycle seen in ice core records." }, { q: "The precession cycle affects climate by:", options: [ "Changing total solar radiation received", "Changing which season occurs at perihelion vs aphelion", "Changing Earth's distance from the Sun", "Changing the Sun's output" ], correct: 1, explanation: "Precession (Earth's wobble) changes WHICH SEASON occurs when Earth is closest to the Sun (perihelion). This makes some hemispheres' summers more intense without changing total solar radiation received." }, { q: "If Earth's axial tilt increased to 24.5°, seasons would become:", options: ["Less extreme", "More extreme", "Unchanged", "Reversed"], correct: 1, explanation: "Greater axial tilt means the Northern Hemisphere points more directly toward (or away from) the Sun during summer and winter, making seasons more extreme — hotter summers and colder winters." }, { q: "What is the significance of global warming occurring despite Milankovitch cycles predicting cooling?", options: [ "Milankovitch cycles are wrong", "Another factor must be causing the warming", "The Sun's output has increased dramatically", "Earth's orbit has changed unexpectedly" ], correct: 1, explanation: "Milankovitch cycles have reliably explained climate patterns for hundreds of thousands of years. The fact that Earth is warming despite orbital cycles predicting cooling means a new, powerful factor — human greenhouse gas emissions — is overriding the natural trend." } ]; // Build the interactive quiz const wrap = d3.create("div").attr("class", "pf-quiz"); // Header const header = wrap.append("div").attr("class", "pf-quiz-header"); header.append("h2").text("📝 Earth-Sun Dynamics Quiz"); header.append("p").text("Click an answer to see instant feedback and guidance on each question."); let score = 0; let answered = 0; const scoreBanner = wrap.append("div").attr("class", "pf-score-banner").style("display", "none"); questions.forEach((q, qi) => { const card = wrap.append("div").attr("class", "pf-question-card"); card.append("div").attr("class", "pf-q-meta").text(`Question ${qi + 1} of ${questions.length}`); card.append("div").attr("class", "pf-q-text").text(q.q); const feedbackDiv = card.append("div").attr("class", "pf-feedback-box"); const optionEls = q.options.map((opt, oi) => { const btn = card.append("div") .attr("class", "pf-option") .text(opt); btn.on("click", function() { // Ignore if already answered if (card.classed("pf-done")) return; card.classed("pf-done", true); const isCorrect = oi === q.correct; if (isCorrect) score++; answered++; // Lock and style all options optionEls.forEach((el, idx) => { el.classed("pf-locked", true); if (idx === oi && isCorrect) el.classed("pf-selected-correct", true); else if (idx === oi && !isCorrect) el.classed("pf-selected-wrong", true); else if (idx === q.correct && !isCorrect) el.classed("pf-reveal-correct", true); }); // Show feedback feedbackDiv .classed("pf-fb-correct", isCorrect) .classed("pf-fb-wrong", !isCorrect) .html( `<strong>${isCorrect ? "✅ Correct!" : `❌ Not quite — the correct answer is: <em>${q.options[q.correct]}</em>`}</strong><br><br>` + q.explanation ); // Update score banner if (answered === questions.length) { const pct = Math.round(score / questions.length * 100); const emoji = pct === 100 ? "🌟" : pct >= 80 ? "👏" : pct >= 60 ? "👍" : "📚"; scoreBanner.style("display", "block") .html( `<div class="pf-score-emoji">${emoji}</div>` + `<div class="pf-score-text">Score: ${score} / ${questions.length} (${pct}%)</div>` + `<div class="pf-score-sub">${ pct === 100 ? "Perfect score! You've mastered Earth-Sun dynamics and Milankovitch cycles!" : pct >= 80 ? "Great work! Review any questions you missed for full understanding." : pct >= 60 ? "Good effort! Revisit the orbital simulator and Milankovitch sections to strengthen your knowledge." : "Keep studying! Focus on the Engage and Explain sections to build your understanding." }</div>` + `<button class="pf-restart-btn" onclick=" this.closest('.pf-quiz').querySelectorAll('.pf-question-card').forEach(c => { c.classList.remove('pf-done'); c.querySelectorAll('.pf-option').forEach(o => { o.classList.remove('pf-locked','pf-selected-correct','pf-selected-wrong','pf-reveal-correct'); }); c.querySelector('.pf-feedback-box').className = 'pf-feedback-box'; c.querySelector('.pf-feedback-box').innerHTML = ''; }); this.closest('.pf-score-banner').style.display = 'none'; ">🔄 Try Again</button>` ); // Reset counters on restart click scoreBanner.select(".pf-restart-btn").on("click.reset", () => { score = 0; answered = 0; }); } }); return btn; }); }); // Move score banner to end wrap.node().appendChild(scoreBanner.node()); return wrap.node();}```:::---