|
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 12 – The Cannonball and the Moment That Changed Motion</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;
}
.page {
width: 100%;
box-sizing: border-box;
padding: 1.8rem 5vw 3rem;
background: #ffffff;
max-width: 1250px;
margin: 0 auto;
}
h1 { margin: 0.2rem 0 0.25rem; font-size: 2.1rem; }
.subtitle { color: #555; margin: 0 0 1.2rem; line-height: 1.45; }
h2 { margin-top: 1.4rem; margin-bottom: 0.4rem; font-size: 1.55rem; }
p { margin: 0.35rem 0 0.7rem; line-height: 1.55; }
ul { margin-top: 0.3rem; padding-left: 1.2rem; }
li { margin: 0.25rem 0; }
a { color: #1f4ed8; text-decoration: none; }
a:hover { text-decoration: underline; }
.toplinks { font-size: 0.95rem; margin-bottom: 0.8rem; }
.card {
border: 1px solid #dde3ff;
background: #f6f7ff;
border-radius: 14px;
padding: 1rem 1rem 0.95rem;
margin-top: 0.7rem;
}
.callout {
background: #f3f6ff;
border-radius: 10px;
border: 1px solid #dde3ff;
padding: 0.9rem 1rem;
font-size: 0.98rem;
margin: 1rem 0;
}
.questions {
background: #fff9e5;
border-radius: 10px;
border: 1px solid #f0e0a0;
padding: 0.9rem 1rem;
font-size: 0.98rem;
margin: 1rem 0;
}
.blank{display:none;}
.blank.sm { min-width: 120px; }
.blank.lg { min-width: 360px; }
code { background:#fff; border:1px solid #d9def5; padding:2px 6px; border-radius:8px; }
.footer {
margin-top: 2.2rem;
font-size: 0.9rem;
color: #777;
text-align: left;
border-top: 1px solid #eee;
padding-top: 0.8rem;
}
/* --- Adventure 4 two-column layout (questions left, chart right) --- */
.page { max-width: none !important; } /* full width */
.two-col {
display: grid;
grid-template-columns: 1.45fr 0.55fr;
gap: 2rem;
align-items: start;
clear: both;
}
.right-col { text-align: center; }
.chart-sticky {
position: sticky;
top: 1rem;
}
@media (max-width: 900px) {
.two-col { grid-template-columns: 1.45fr 0.55fr; }
.chart-sticky { position: static; }
}
/* --- Interactive answer inputs (Adventure style) --- */
input[type="text"], input[type="number"]{
width: 100%;
max-width: 260px;
padding: 0.35rem 0.45rem;
font-size: 18px;
border-radius: 8px;
border: 1px solid #c3cade;
margin-top: 0.25rem;
box-sizing: border-box;
}
textarea{
width: 100%;
max-width: 520px;
padding: 0.45rem 0.55rem;
font-size: 0.95rem;
border-radius: 10px;
border: 1px solid #c3cade;
margin-top: 0.25rem;
box-sizing: border-box;
line-height: 1.45;
}
.row-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem 1.6rem;
margin-top: 0.6rem;
clear: both;
}
.buttons-row{
margin-top: 1rem;
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
button {
border-radius: 999px;
border: none;
padding: 0.45rem 0.95rem;
font-size: 0.92rem;
cursor: pointer;
background: #325dff;
color: #fff;
}
button.secondary {
background: #e4e8fb;
color: #243152;
}
button:active { transform: translateY(1px); }
.correct {
background-color: #e4f9e7 !important;
border-color: #2e9a48 !important;
}
.incorrect {
background-color: #fde3e3 !important;
border-color: #cc3d3d !important;
}
.hint, .solution {
margin-top: 0.9rem;
padding: 0.8rem 0.9rem;
border-radius: 10px;
border: 1px solid #dde3ff;
background: #f6f7ff;
font-size: 0.92rem;
display: none;
}
@media (max-width: 900px) {
.row-grid { grid-template-columns: 1fr; }
}
.right-col{position:sticky; top:1rem; align-self:start;}
/* === DiVA chart sizing (best fit) === */
.chart-box{
height: 540px; /* best-fit: tall enough for readability, keeps 2-column balance */
border-radius: 12px;
border: 1px solid #dde3ff;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
padding: 10px;
box-sizing: border-box;
}
.chart-box img{width:90%;height:auto;display:block;border-radius:10px;margin:0 auto}</style>
</head>
<body>
<div class="wrap">
<div style="display:flex; flex-wrap:wrap; gap:12px; margin-bottom:0.8rem;">
<a href="index.html"><button>🧭 Hub</button></a>
<a href="adventure_12_home.html"><button class="secondary">🏠 Home</button></a>
<a href="adventure_12_activity_student.html"><button class="secondary">✅ Activity</button></a>
<span id="score" class="subtitle" style="margin:0; padding:0;"></span>
</div>
<h1>📜 The Cannonball and the Moment That Changed Motion</h1>
<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">
<button class="btn" type="button" id="readBtn">Read</button>
<button class="btn secondary" type="button" id="pauseBtn">Pause</button>
<button class="btn secondary" type="button" id="stopBtn">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 id="ttsMsg" class="small" style="margin-top:10px"></div>
</div>
<p>
In the early 1600s, European battlefields thundered with cannons. Iron balls flew
through smoke-filled skies — powerful, dangerous, and wildly unpredictable.
Gunners aimed, fired, and hoped. No one could say where a cannonball would land
or why. Yet every shot revealed the same quiet mystery. The cannonball always rose,
slowed, paused for the briefest instant — and then fell. That pause changed science forever.
</p>
<h2>⚔️ From Battlefields to Questions</h2>
<p>
In Italy, a young mathematician named <b>Galileo Galilei</b> watched cannonballs and
falling stones with a new kind of curiosity. Instead of asking where they landed,
he asked: <i>How does motion change from moment to moment?</i> Galileo realized that
guessing was useless. Motion had to be measured. He focused on one direction at a time —
especially up and down.
</p>
<h2>🎯 The Vertical Secret</h2>
<p>
The instant a cannonball leaves the cannon, gravity begins pulling it downward.
Every second: the upward velocity decreases by the same amount; the ball slows
smoothly; until, at one exact moment, the upward motion reaches zero.
At that instant, the cannonball is higher than it will ever be.
This moment is not luck. It is inevitable.
</p>
<p>
If a ball is thrown straight up with the same vertical speed that the cannonball
has when it leaves the cannon, then both objects follow exactly the same vertical motion.
They rise for the same amount of time, reach the same maximum height, pause,
and fall back to the ground in the same way.
The cannonball may travel forward across the sky, but vertically, it behaves no
differently than a ball tossed straight up by hand.
</p>
<h2>📈 Newton Finds the Peak</h2>
<p>
A generation later, in England, <b>Isaac Newton</b> gave this moment a name and a language.
Height, Newton showed, is a function of time. Velocity is the slope of that height.
Acceleration is what changes the slope. When velocity becomes zero, the slope flattens.
That flat point is the maximum — the top of the curve — what we now call a <b>critical point</b>.
</p>
<h2>🚀 Why This Changed the World</h2>
<p>
Once this idea was understood, cannons stopped being guesses. Engineers could finally
predict how high a ball would rise; when it would stop climbing; how far it would travel.
The same mathematics now guides rockets, satellites, and space probes.
It governs basketball shots, golf swings, and planetary motion.
Every arc in the sky carries the same hidden structure.
</p>
<h2>🧠 The Big Idea</h2>
<p>
The most important moment in motion is not when something moves the fastest.
It is the instant when change pauses.
That pause is where calculus lives.
And that is why, on your DiVA charts, the highest point of the height curve
lines up exactly with the zero of the velocity curve.
</p>
<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 : document.body.innerText).trim();
utter = new SpeechSynthesisUtterance(text);
const voices = window.speechSynthesis.getVoices();
const chosenName = voiceSel.value;
const chosen = voices.find(v => v.name === chosenName);
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();
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();
window.speechSynthesis.speak(utter);
readBtn.textContent = "Reading…";
msgEl.textContent = "";
}
});
})();
</script>
</body>
</html>