|
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 content="width=device-width,initial-scale=1" name="viewport"/>
<title>Adventure 14 – The Moon and the Invisible Push</title>
<style>
body{
font-size:18px;
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
margin:0;
padding:0;
background:#f5f5fb;
color:#222;
}
.wrap{
padding:12px 18px 18px;
max-width:none;
margin:0;
}
h1{margin:0.2rem 0 0.25rem;font-size:2.1rem;}
h2{margin-top:0.2rem;margin-bottom:0.55rem;font-size:1.55rem;}
p{margin:0.4rem 0 0.8rem;line-height:1.62;}
a{color:#1f4ed8;text-decoration:none;}
a:hover{text-decoration:underline;}
.card{
border:1px solid #dde3ff;
background:#f6f7ff;
border-radius:14px;
padding:1rem 1rem 0.95rem;
margin-top:12px;
}
.story-frame{
margin-top:1.1rem;
background:linear-gradient(180deg,#f9faff,#ffffff);
border:1px solid #dde3ff;
border-radius:18px;
padding:1.55rem 1.8rem 1.9rem;
box-shadow:0 10px 28px rgba(0,0,0,0.08);
}
.story-images figure{
margin:0;
text-align:center;
}
.story-images img{
width:auto; /* ⭐ key fix */
max-width:100%; /* responsive */
height:291px;
object-fit:contain;
background:#fff;
border-radius:14px;
display:inline-block; /* ⭐ important */
border:5px solid #222;
}
.story-images figcaption{
margin-top:0.6rem;
font-size:0.95em;
color:#444;
}
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);
}
.nav-row{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-bottom:0.8rem;
align-items:center;
}
.footer{
margin-top:2.2rem;
font-size:0.9rem;
color:#777;
text-align:left;
border-top:1px solid #eee;
padding-top:0.8rem;
}
.small{font-size:0.95rem;color:#555;}
.topbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
select{
padding:8px 10px;border-radius:10px;border:1px solid #bbb;font-size:1rem;min-width:220px;
}
@media (max-width:900px){
.story-images{grid-template-columns:1fr;}
}
</style>
</head>
<body>
<div class="wrap">
<div class="nav-row">
<a href="index.html"><button>🧭 Hub</button></a>
<a href="ss_adventure_14_home.html"><button class="secondary">🏠 Home</button></a>
<a href="ss_adventure_14_activity1_student.html"><button class="secondary">🧩 Activity</button></a>
</div>
<div class="card">
<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">
<button class="btn" 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">
<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_14_story_image_2.png" alt="Newton observing an apple and the moon">
<figcaption><b>Newton asks whether one force rules both Earth and sky</b></figcaption>
</figure>
</div>
<div id="storyText">
<h2>The Moon and the Invisible Push</h2>
<p>Every night, the Moon moves.</p>
<p>Not randomly. Not drifting aimlessly. But with remarkable precision.</p>
<p>It rises, crosses the sky, and sets. Over nearly four weeks its shape changes in a repeating pattern — crescent, half, full, and back again.</p>
<p>This rhythm has been observed for as long as humans have watched the sky.</p>
<p>The question is not what the Moon does. The question is why.</p>
<p>On Earth, motion usually ends. A thrown ball falls. A rolling stone stops. A flying arrow eventually reaches the ground. Gravity pulls everything downward.</p>
<p>So why does the Moon not fall?</p>
<p>In the 1600s, Isaac Newton began to wonder whether the same force that pulls objects on Earth might also act on the Moon. If so, then the Moon must be constantly pulled toward Earth. But something else must also be happening, because the Moon does not crash into our planet.</p>
<p>It follows a curved path — steady, repeating, and predictable.</p>
<p>Later, physicist Richard Feynman sometimes joked that we might imagine invisible “angels” pushing objects to keep them moving. Of course, he did not mean real angels. He meant that nature behaves as if space itself contains rules that guide motion.</p>
<p>Today we call this idea a field — a way that space can influence how objects move.</p>
<p>The Moon’s changing phases reveal something important. The Moon itself does not change shape. We simply see different portions of sunlight as it travels along its path. The repeating cycle shows that the Moon’s motion is stable and precise.</p>
<p>If it moved faster, the pattern would change. If it moved slower, the pattern would change. Yet for thousands of years, the rhythm has remained almost the same.</p>
<p>Newton imagined that the Moon might be doing something extraordinary: constantly falling toward Earth while also moving sideways. Always falling. Never landing.</p>
<p>This idea transformed our understanding of the universe. It suggested that the same laws governing motion on Earth also govern the motion of the heavens.</p>
<p>But knowing that raises deeper questions. What determines the Moon’s path? What determines its rhythm? What determines its motion through space?</p>
<p>That is the mystery of this adventure. The sky has been repeating the same pattern for centuries. Now it is our turn to understand why.</p>
</div>
</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})`;
voiceSel.appendChild(opt);
if(idx === 0) voiceSel.value = v.name;
});
msgEl.textContent = "";
}
loadVoices();
window.speechSynthesis.onvoiceschanged = loadVoices;
function buildUtterance(){
const text = (storyEl ? storyEl.innerText : '').trim();
if(!text){ msgEl.textContent = 'Could not find story text to read.'; return; }
utter = new SpeechSynthesisUtterance(text);
const voices = window.speechSynthesis.getVoices();
const chosen = voices.find(v => v.name === voiceSel.value);
if(chosen) utter.voice = chosen;
utter.rate = 1.0;
utter.pitch = 1.0;
utter.onend = () => { readBtn.textContent = "Read"; };
utter.onerror = () => {
readBtn.textContent = "Read";
msgEl.textContent = "Could not play audio. Try another voice or refresh.";
};
}
function stop(){
window.speechSynthesis.cancel();
readBtn.textContent = "Read";
}
readBtn.addEventListener('click', () => {
msgEl.textContent = "";
stop();
buildUtterance();
if(utter){
window.speechSynthesis.speak(utter);
readBtn.textContent = "Reading…";
}
});
pauseBtn.addEventListener('click', () => {
if(window.speechSynthesis.speaking && !window.speechSynthesis.paused){
window.speechSynthesis.pause();
readBtn.textContent = "Read";
msgEl.textContent = "Paused. Click Pause again to resume.";
} else if(window.speechSynthesis.paused){
window.speechSynthesis.resume();
readBtn.textContent = "Reading…";
msgEl.textContent = "";
}
});
stopBtn.addEventListener('click', () => {
stop();
msgEl.textContent = "Stopped.";
});
voiceSel.addEventListener('change', () => {
if(window.speechSynthesis.speaking){
stop();
buildUtterance();
if(utter){
window.speechSynthesis.speak(utter);
readBtn.textContent = "Reading…";
msgEl.textContent = "";
}
}
});
})();
</script>
</body>
</html>