|
Server : Apache/2.4.62 System : FreeBSD fbsdweb2.web.rcn.net 14.1-RELEASE FreeBSD 14.1-RELEASE releng/14.1-n267679-10e31f0946d8 GENERIC amd64 User : www ( 80) PHP Version : 8.3.8 Disable Function : NONE Directory : /domains/drsuper/CalculusMechanics/ |
Upload File : |
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Adventure 15 Story β Fire, the Sun, and Civilization</title>
<style>
body{font-size:18px;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin:0;background:#f5f5fb;color:#222;}
.wrap{padding:12px 18px 18px;}
.card{border:1px solid #dde3ff;background:#f6f7ff;border-radius:14px;padding:1rem;margin-top:12px;}
h1{margin:0.2rem 0;font-size:2.1rem;}
p{margin:0.5rem 0 0.9rem;line-height:1.7;}
.formula{font-family:"Courier New",monospace;background:#fff;border:1px solid #d9dff5;padding:10px 12px;display:inline-block;margin:8px 0;}
.nav-row{display:flex;gap:12px;margin-bottom:10px;flex-wrap:wrap;}
button{min-height:40px;padding:6px 14px;font-size:0.95rem;border:2px solid #666;background:#f4f4f4;cursor:pointer;}
.footer{margin-top:2rem;font-size:0.9rem;color:#777;border-top:1px solid #eee;padding-top:0.8rem;}
.small{font-size:0.95rem;color:#555;}
.story-frame{
margin-top:1.4rem;
background:linear-gradient(180deg,#f9faff,#ffffff);
border:1px solid #dde3ff;
border-radius:18px;
padding:1.6rem 1.8rem 1.9rem;
box-shadow:0 10px 28px rgba(0,0,0,0.08);
}
.story-images{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:100px;
margin:12px 0 14px;
align-items:stretch;
}
.story-images img{
width:100%;
height: 375px;
object-fit: cover; /* fills box */
border-radius:14px;
border:1px solid #000;
display:block;
border: 5px solid #222;
}
.story-images figure {
margin: 0;
text-align: center;
}
.story-images figcaption {
margin-top: 0.6rem;
font-size: 0.95em;
color: #444;
}
.caption-main{
text-align:center;
font-size:20px;
font-weight:600;
margin-top:10px;
}
.caption-sub{
text-align:center;
font-size:15px;
color:#555;
margin-top:4px;
}
button {
background: #e9f0ff;
border: 2px solid #6b8cff;
border-radius: 0;
padding: 10px 18px;
font-size: 1rem;
cursor: pointer;
box-shadow: 0 3px 0 #4f6fe6;
transition: all 0.12s ease;
}
button:hover { background: #f3f7ff; }
button:active { background: #cddcff; box-shadow: 0 1px 0 #4f6fe6; transform: translateY(2px); }
button.checked {
background: #dff5e1;
border-color: #3a9b3a;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}
button.sampled {
background: #fff3d9;
border-color: #d9a441;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}
</style>
</head>
<body>
<div class="wrap">
<div class="nav-row">
<a href="index.html"><button>π§ Hub</button></a>
<a href="adventure_15_home.html"><button>π Home</button></a>
<a href="adventure_15_activity_1_student.html"><button>𧩠Activity 1</button></a>
<a href="adventure_15_activity_2_student.html"><button>𧩠Activity 2</button></a>
</div>
<div class="card" style="margin-top:12px">
<h2 style="margin-top:0">π Listen to the story</h2>
<p class="small" style="margin-top:6px">
Click <b>Read</b> to hear the story aloud. You can pause or stop at any time.
</p>
<div class="topbar" style="margin:10px 0 0; display:flex; flex-wrap:wrap; gap:10px; align-items:center;">
<button class="btn secondary" id="readBtn" type="button">Read</button>
<button class="btn secondary" id="pauseBtn" type="button">Pause</button>
<button class="btn secondary" id="stopBtn" type="button">Stop</button>
<label class="small" style="display:flex;align-items:center;gap:8px;margin-left:auto">
Voice:
<select id="voiceSelect" style="padding:8px 10px;border-radius:10px;border:1px solid #bbb;font-size:1rem;min-width:220px">
<option value="">Loading voicesβ¦</option>
</select>
</label>
</div>
<div class="small" id="ttsMsg" style="margin-top:10px"></div>
</div>
<div class="story-frame">
<div class="story-images">
<figure>
<img src="images/adventure_15_story_image_1.png"
alt="Sunlight powering photosynthesis in green plants">
<figcaption>
<div class="caption-main">Plants convert sunlight into stored chemical energy.</div>
<div class="caption-sub">Through photosynthesis, solar energy is stored in sugars and plant tissue.</div>
</figcaption>
</figure>
<figure>
<img src="images/adventure_15_story_image_2.png"
alt="Trees storing solar energy in chemical bonds">
<figcaption>
<div class="caption-main">Trees store solar energy in chemical bonds.</div>
<div class="caption-sub">Carbon from the air becomes part of wood, locking in energy from the Sun.</div>
</figcaption>
</figure>
<figure>
<img src="images/adventure_15_story_image_3.png"
alt="Fire releasing stored solar energy from burning wood">
<figcaption>
<div class="caption-main">π₯ Fire releases sunlight stored in trees.</div>
<div class="caption-sub">Combustion converts stored chemical energy into heat, light, and carbon dioxide.</div>
</figcaption>
</figure>
</div>
</div>
<div class="card" id="storyText">
<h1>π Adventure 15 Story</h1>
<p class="small"><b>Fire, the Sun, and the Making of Civilization</b></p>
<p>
Of all the discoveries humans have ever made, few were as transformative as fire.
The wheel helped us move things. Writing helped us remember things. But fire helped us
survive long enough to invent both.
</p>
<p>
Early humans probably first encountered fire through lightning strikes or volcanic eruptions.
At first it must have been terrifying β a roaring, glowing force that consumed forests and
turned night into flickering day. But eventually, curiosity overcame fear. Humans learned
not just to use fire, but to make it. This single step changed the trajectory of our species.
</p>
<p>
Cooking food made nutrients easier to absorb. Anthropologists believe that cooked diets
helped support the growth of larger human brains. Fire also extended the day, allowing
people to gather, talk, plan, and imagine. Around campfires, language deepened, stories
formed, and cultures began.
</p>
<p>
Fire transformed materials too. Clay hardened into pottery and bricks, making permanent
settlements possible. Sand melted into glass. Metals softened in furnaces and could be
shaped into tools and weapons. The rise of civilizations β from Mesopotamia to Rome β
depended on the controlled power of flame.
</p>
<p>
Humans are, as far as we know, the only creatures to deliberately create fire. Myths filled
the gap in understanding. Many cultures imagined gods or dragons breathing flame, symbols
of power over nature. In a poetic sense, these myths were not entirely wrong.
</p>
<p>
Science later revealed that fire is a chemical process. When wood burns, atoms rearrange,
releasing stored energy as heat and light. But this only pushes the mystery one step further:
why was energy stored in the wood at all?
</p>
<p>
The answer leads us beyond Earth, to the Sun. Plants capture sunlight through photosynthesis,
storing solar energy in chemical bonds. Trees are, in effect, living batteries charged by
starlight. When wood burns, the Sunβs ancient energy is released again.
</p>
<div class="formula"><b>Fire is sunlight stored in trees.</b></div>
<p>
This realization connects everyday experience to cosmic physics. The same Sun that warms
your face and fuels a forest fire also governs the motion of planets. Its gravity shapes
orbits, seasons, climates, and the architecture of the Solar System itself.
</p>
<p>
In this adventure, you will explore how a single quantity β the gravitational strength of
the Sun β determines how worlds move through space. From the first campfires to the paths
of distant planets, the story of science is a story of understanding energy, motion,
and the laws that connect them.
</p>
</div>
<div class="footer">Created by Dr. Super & Spark β Powered by ChatGPT</div>
</div>
<script>
(function(){
const readBtn = document.getElementById('readBtn');
const pauseBtn = document.getElementById('pauseBtn');
const stopBtn = document.getElementById('stopBtn');
const voiceSel = document.getElementById('voiceSelect');
const msgEl = document.getElementById('ttsMsg');
const storyEl = document.getElementById('storyText');
if(!('speechSynthesis' in window)){
msgEl.textContent = "Text-to-speech is not supported in this browser.";
readBtn.disabled = pauseBtn.disabled = stopBtn.disabled = true;
return;
}
let utter = null;
function pickThreeEnglish(voices){
const en = voices.filter(v => /^en(-|_)?/i.test(v.lang || "") || /english/i.test(v.name || ""));
en.sort((a,b) => (b.localService === true) - (a.localService === true));
const picked = [];
const seen = new Set();
for(const v of en){
const key = (v.name || "").toLowerCase();
if(seen.has(key)) continue;
picked.push(v);
seen.add(key);
if(picked.length === 3) break;
}
return picked;
}
function loadVoices(){
const voices = window.speechSynthesis.getVoices();
const picked = pickThreeEnglish(voices);
voiceSel.innerHTML = "";
if(picked.length === 0){
voiceSel.innerHTML = "<option value=''>No English voices found</option>";
msgEl.textContent = "No English voices were found on this device. Try Chrome or Edge.";
return;
}
picked.forEach((v, idx) => {
const opt = document.createElement('option');
opt.value = v.name;
opt.textContent = `${v.name} (${v.lang})`;
if(idx === 0) opt.selected = true;
voiceSel.appendChild(opt);
});
msgEl.textContent = "";
}
function selectedVoice(){
const voices = window.speechSynthesis.getVoices();
return voices.find(v => v.name === voiceSel.value) || null;
}
function stopReading(){
window.speechSynthesis.cancel();
utter = null;
readBtn.textContent = "Read";
}
readBtn.addEventListener('click', () => {
if(window.speechSynthesis.paused){
window.speechSynthesis.resume();
readBtn.textContent = "Read";
return;
}
stopReading();
const text = (storyEl ? storyEl.innerText : document.body.innerText).trim();
if(!text){
msgEl.textContent = "No story text found to read.";
return;
}
utter = new SpeechSynthesisUtterance(text);
const voice = selectedVoice();
if(voice) utter.voice = voice;
utter.rate = 0.92;
utter.pitch = 1.0;
utter.onend = () => {
readBtn.textContent = "Read";
utter = null;
};
utter.onerror = () => {
msgEl.textContent = "The reader stopped. Try pressing Read again or choose another voice.";
readBtn.textContent = "Read";
utter = null;
};
window.speechSynthesis.speak(utter);
});
pauseBtn.addEventListener('click', () => {
if(window.speechSynthesis.speaking && !window.speechSynthesis.paused){
window.speechSynthesis.pause();
readBtn.textContent = "Resume";
}
});
stopBtn.addEventListener('click', stopReading);
voiceSel.addEventListener('change', () => {
if(window.speechSynthesis.speaking || window.speechSynthesis.paused){
stopReading();
msgEl.textContent = "Voice changed. Press Read to start again.";
}
});
loadVoices();
window.speechSynthesis.onvoiceschanged = loadVoices;
window.addEventListener('beforeunload', stopReading);
})();
</script>
</body>
</html>