|
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" />
<title>Adventure 10 — L’Hôpital’s Rule & the Feynman–Gamow Mission</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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;
max-width: 1600px;
margin: 0 auto;
}
.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;
}
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;
}
/* Hover */
button:hover {
background: #f3f7ff;
}
/* Pressed */
button:active {
background: #cddcff;
box-shadow: 0 1px 0 #4f6fe6;
transform: translateY(2px);
}
/* Optional: "checked" feeling after click */
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);
}
.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 class="secondary">🧭 Hub</button></a>
<a href="adventure_10_story.html"><button class="secondary">📖 Story</button></a>
<a href="adventure_10.html"><button class="secondary">✅ Activity</button></a>
<a href="adventure_10_Buffons_Needle_Problem_Student_Activity.html"><button class="secondary">✅ Buffons Needle Problem</button></a>
<span id="score" class="subtitle" style="margin:0; padding:0;"></span>
</div>
<h1>🚀 Adventure 10 — L’Hôpital’s Rule (Visual)</h1>
<div class="subtitle">
A deep‑space mission where one simple idea decides everything:
<b>compare how fast things change</b> (Distance → Velocity → Acceleration).
</div>
<h2>🎯 What you will learn</h2>
<div class="callout">
<ul>
<li>Why ratios like <code>f(t)/g(t)</code> can hide a simple long‑term truth.</li>
<li>How taking derivatives can make a messy ratio become clear (visual L’Hôpital).</li>
<li>How DiVA turns “limits” into something you can <b>see</b>.</li>
</ul>
</div>
<h2>🎥 Video (3Blue1Brown)</h2>
<div class="callout">
<ul>
<li>🎥 <strong><a href="https://www.youtube.com/watch?v=kfF40MiS7zA" target="_blank" rel="noopener">Limits, L'Hôpital's rule, and epsilon‑delta definitions | Chapter 7 — Essence of calculus</a></strong></li>
<p>Watch how complicated curves can be rebuilt using simple pieces like lines and parabolas. You’ll see how zooming in lets you approximate almost anything—and why those approximations keep getting better.</p>
</ul>
</div>
<h2>📖 1) Read / Listen: Story</h2>
<div class="callout">
<ul>
<li>📖 <strong><a href="adventure_10_story.html">“The Feynman–Gamow Deep‑Space Mission”</a></strong></li>
</ul>
<p>Read or listen to the story of a daring space mission where the crew must use L’Hôpital’s Rule to navigate through a cosmic storm. Experience the tension and triumph as they apply mathematical insights to save the day!</p>
</div>
<h2>✏️ 2) Do the Adventure Activity</h2>
<div class="callout">
<ul>
<li>✏️ <strong><a href="adventure_10.html">Open: Adventure 10 — Activity Page</a></strong></li>
<p>Complete the interactive activity to explore L’Hôpital’s Rule in action. Build your own approximations and see how close you can get. Each step adds more accuracy—can you tell when your model is “good enough”?</p>
<li>✏️ <strong><a href="adventure_10_Buffons_Needle_Problem_Student_Activity.html">Open: Buffon’s Needle Problem</a></strong></li>
<p>Explore the classic Buffon’s Needle Problem and its connection to estimating π through probability and geometry. Drop a needle at random and see what happens—you can actually estimate π from pure chance. It’s a surprising way to see how randomness and geometry connect.</p>
</ul>
</div>
<div class="footer">Dr. Super & Spark — Powered by ChatGPT</div>
</div>
</body>
</html>