|
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 1 – Introduction and Measuring the World</title>
<style>body {
font-size: 18px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
margin: 0;
padding: 0;
background: #ffffff; /* small clean page margin handled by .wrap */
color: #222;
}
.wrap{
padding: 12px 18px; /* ≈ 0.5 cm */
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; }
}
.top-buttons{
display: flex;
gap: 10px;
margin-left: 12px; /* ← move right */
}
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);
}
.nav-row a{
border-radius: 0 !important;
}
.wrap .nav-row *{
border-radius: 0 !important;
}
.nav-row button{
outline: 3px solid red;
}
/* --- 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;
}
.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_1_story.html"><button class="secondary">📜 Story</button></a>
<a href="adventure_1_activity_1_student.html"><button class="secondary">✅ Activity Measure World</button></a>
<a href="adventure_1_activity_2_student.html"><button class="secondary">✅ Activity 1 & 2</button></a>
</div>
<h1>Adventure 1 – Introduction and Measuring the World </h1>
<div class="subtitle">Use this intro on your own: story, video, and worksheets that show how area and slope power all of calculus.</div>
<h2>🌍 1) Start With the Measure The World Story</h2>
<div class="card">
<p>
<li>📖 <strong><a href="adventure_1_story.html">Read / Listen: “Measuring the World by Slices and Sticks”</a></strong></li>
</p>
<p>A stick, a shadow, and a bold idea—see how Eratosthenes who lived more than two thousand years ago measured the circumference of Earth. One clever observation turns into a result that feels almost impossible. It’s a great example of how we can use simple local information to understand something big. You’ll see how the idea of a small angle and a known distance can unlock the size of our entire planet.</p>
</p>
</div>
<h2>🌍 2) Next Do the Interactive Activity and measure the World your self</h2>
<div class="card">
<ul>
<li>🌍 <strong><a href="adventure_1_activity_1_student.html">Measure the World — Adventure</a></strong></li>
</ul>
<p>
In this activity you use a small angle and a known distance to estimate Earth’s circumference. You are
doing with shadows and circles what we will later do with areas and slopes: using simple local
information to understand something big.
</p>
</div>
<h2>🎥 3) Watch the Video The Essence of Calculus (Chapter 1)</h2>
<div class="card">
<p>
Next, watch <strong><a href="https://www.youtube.com/watch?v=WUvTyaaNkzM&list=PLZHQObOWTQDMsr9K-rj53DwVRMYO3t5Yr&index=1" target="_blank" rel="noopener"><a href="https://www.youtube.com/watch?v=WUvTyaaNkzM&list=PLZHQObOWTQDMsr9K-rj53DwVRMYO3t5Yr&index=1" target="_blank" rel="noopener">3Blue1Brown — The Essence of Calculus (Chapter 1)</a></a></strong>
</p>
<p>
This video shows how we can understand change by looking at slopes of curves, and also how the area of a circle can be found by building it from many thin slices. It introduces the idea that even smooth motion can be measured moment by moment. Focus on how curves reveal both changing motion and accumulated area.
</p>
</div>
<h2>✏️ 4) Worksheets in This Intro (Do These in Order)</h2>
<div class="card"><ul>
<li>🧩 <strong><a href="adventure_1_activity_2_Student.html">Open: Activities 1 & 2 — Student Worksheet Page</a></strong></li>
</ul>
<ul>
<li><strong>Worksheet A — Area Under a Line</strong></li>
<li><strong>Worksheet B — Tangent & Slope</strong></li>
</ul></div>
Use this intro on your own: story, video, and worksheets that show how area and slope power all of calculus.
</div>
<h2>📈 5) What You Will Discover</h2>
<div class="callout">
Two ideas power almost all of calculus:
<ul>
<li><strong>Area = total change</strong></li>
<li><strong>Slope = instantaneous change</strong></li>
</ul>
</div>
<div class="questions">
<strong>🧠 Questions to Keep in Mind</strong>
<ul>
<li>How does the shaded area grow as x increases?</li>
<li>Why do steeper lines change the growth rate?</li>
<li>What does a tangent line tell you about “right now”?</li>
<li>How is Eratosthenes using a tiny angle to understand something big?</li>
</ul>
</div>
<h2>🚀 6) Why This First Adventure is Important</h2>
<div class="callout">
<p>
This Introductory adventure prepares you for motion, velocity, acceleration, exponentials, limits, derivatives, and the
DiVA charts. Everything in the Adventures series grows out of these two ideas: <em>area</em> and <em>slope</em>.
</p>
</div>
<h2>💡 7) If You Get Stuck</h2>
<div class="callout">
<p>
Redraw the picture, re‑shade the region, or re‑estimate a slope. Your best tools are still triangles,
rectangles, and your eyes.
</p>
</div>
<div class="footer">Dr. Super & Spark — Powered by ChatGPT</div>
</body>
</html>