|
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 13 – ATP Story (Critical Points)</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}
/* === Adventure Button Style (match reference image) === */
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);
}
/* Align the top nav buttons with the reader card content */
.nav-row{
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 0.8rem;
align-items: center;
padding-left: 16px; /* aligns left edge with card content */
}
@@media (max-width: 800px){
.story-images{
grid-template-columns: 1fr;
}
} /* ✅ closes the @media block */
.story-images{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 100px;
margin: 12px 0 14px;
}
.story-images img{
width: 100%;
height: 220px; /* adjust 200–260 if needed */
object-fit: contain;
background: #fff;
border-radius: 14px;
display: block;
border: 5px solid #222;
}
.wrap{
padding: 12px 18px 18px;
max-width: none;
margin: 0;
}
.story-images figure {
margin: 0;
text-align: center;
}
.story-images figcaption {
margin-top: 0.6rem;
font-size: 0.95em;
color: #444;
}
</style>
</head>
<body>
<div class="wrap">
<div class="nav-row"><a href="index.html"><button class="secondary">🧭 Hub</button></a>
<a href="adventure_13_home.html"><button class="secondary">🏠 Home</button></a>
<a href="adventure_13_activity1_student.html"><button class="secondary">🧩 Activity 1</button></a>
<a href="adventure_13_activity2_student.html"><button class="secondary">🧩 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">
<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>
<p></p>
<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_13_story_image_1.png"
alt="Diagram showing the ATP–ADP cycle with phosphate added and removed">
<figcaption><b>ATP–ADP Cycle: Storing and Releasing Energy</b></figcaption>
</figure>
<figure>
<img src="images/adventure_13_story_image_2.png"
alt="Hand-drawn diagram comparing ATP to a rechargeable battery">
<figcaption><b>ATP as a Rechargeable Energy Battery</b></figcaption>
</figure>
<figure>
<img src="images/adventure_13_story_image_3.png"
alt="Cellular diagram showing ATP and ADP cycling during energy use">
<figcaption><b>ATP–ADP Cycle Inside the Cell</b></figcaption>
</figure>
</div>
<div id="storyText"><h2>ATP: The Curve Behind Every Movement</h2><p>Every movement you have ever made — walking, jumping, throwing a ball, even breathing — has been powered by the same invisible molecule. Not food. Not calories. Not energy in the abstract. A specific molecule called ATP, adenosine triphosphate. ATP is the immediate currency of motion inside your body. When a muscle contracts, ATP is spent. When ATP runs low, motion slows or stops. Long before calculus entered textbooks, ATP was already tracing curves inside living cells.</p><p>ATP was identified in the late 1920s, when scientists were trying to answer a deceptively simple question: what actually powers muscle contraction? Working independently, Karl Lohmann, and soon after Cyrus Fiske and Yellapragada Subbarow, isolated a molecule that appeared whenever work was done inside muscle tissue. What made ATP remarkable was not that it stored energy, but that it flowed. It was used, regenerated, and used again, constantly. ATP was not a static reserve. It was a dynamic process unfolding in time.</p><p>That single fact changes everything. Your body does not stockpile ATP the way a car stores gasoline. At any moment, ATP is being consumed and replenished at the same time. The amount available rises and falls as conditions change. When exercise begins, ATP availability drops. As metabolism responds, production increases. Sometimes ATP stabilizes or even recovers. Eventually, fatigue sets in and availability declines again. This story is not random. It has structure. It has turning points. It has shape.</p><p>Once something changes in time, it becomes a function. And once something is a function, it has a graph. ATP availability can be drawn as a curve — not because we like graphs, but because curves are the natural language of change. That curve has a minimum when ATP is most stressed, a maximum when recovery peaks, and a change in concavity when the body shifts strategies. Those features are not guesses. They are enforced by mathematics.</p><p>This is where calculus quietly enters biology. Calculus was invented to understand motion, but motion is not only about position and velocity. It is about rates. How fast something changes, and how that rate itself changes. In mechanics we track position, velocity, and acceleration. In biology we can track ATP availability, its rate of change, and how that rate is changing. Different systems — Same logic and same mathematics.</p><p>Critical points on a curve — maxima, minima, and inflection points — are not found by looking. They are found by reasoning. A maximum occurs when the first derivative changes from positive to negative. A minimum occurs when it changes from negative to positive. The second derivative tells us why the turn happens — whether the curve bends like a hill or a bowl. Zero slope alone is not enough. Direction change is the key. This rule applies to falling objects, racing cars, and molecules inside muscle cells alike.</p><p>There is an old story from ancient Iran about the Parthians, famous horse archers who would appear to retreat from battle, only to turn back in the saddle and release one final, devastating arrow. Historians called it the Parthian shot. Calculus has its own version. After all the algebra and tables, one idea remains standing: you do not need the exact curve to understand the motion. If you know how derivatives behave, you can reconstruct the story.</p><p>That final sketch — built from signs, slopes, and concavity — is the real lesson. ATP did not just teach us how muscles move. It shows us why calculus exists at all: to read change, predict turning points, and understand the hidden structure behind motion. That insight is the parting shot — and it carries far beyond this page.</p></div> <!-- end storyText -->
</div> <!-- end story-frame -->
<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 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>