|
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 5 — Drag Racing</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;
}
.buttons-row{
margin-top: 1rem;
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.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);
}
.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="page" style="max-width:980px;">
<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_5_story.html"><button class="secondary">📖 Story</button></a>
<a href="adventure_5_activity_student.html"><button class="secondary">✅ Activity</button></a>
<span id="score" class="subtitle" style="margin:0; padding:0;"></span>
</div>
<h1>🚀 Adventure 5 — Drag Racing</h1>
<div class="subtitle">
<b>Constant acceleration from rest turns distance, velocity, and acceleration into a perfect “slope + area” laboratory.</b>
</div>
<h2>🎯 What you will learn</h2>
<div class="card">
<ul style="margin:0.2rem 0 0.2rem 1.1rem;">
<h3>Velocity is the slope of the distance graph x(t).</h3>
<h3>Distance is the area under the velocity graph</h3>
<h3>Constant acceleration makes v(t) linear and x(t) quadratic.</h3>
</ul>
</div>
<h2>📖 1) Read / Listen: Story</h2>
<div class="card">
<ul>
<li>📖 <strong><a href="adventure_5_story.html">Why Drag Racing moved to a Track (from the Street)</a></strong>
<p>
Follow the story of drag racing’s evolution from the streets to the track, and how racers used constant acceleration to push the limits of speed. You’ll see how the quest for speed led to a deeper understanding of motion, and how the track became a perfect laboratory for exploring the relationship between distance, velocity, and acceleration.
</p>
</ul>
</div>
<h2>🎥 2) Watch the Video Work, Energy, and Power – Crash Course Physics #9</h2>
<div class="card">
<p>
Next, watch <strong><a href="https://www.youtube.com/watch?v=w4QFJb9a8vo" target="_blank" rel="noopener">Work, Energy, and Power – Crash Course Physics #9</a></strong>
</p>
<p>
In this video, you’ll see how motion and energy are connected, and how an object’s energy increases with speed in a way that is not simply linear, introducing the idea of kinetic energy. As you watch, think about how energy changes when velocity doubles, how constant acceleration affects energy over time, and how distance, velocity, and energy might all be connected through math.
</p>
</div>
<h2>✏️ 3) Do the Adventure Activity</h2>
<div class="card">
<ul>
<li>✏️ <strong><a href="adventure_5_activity_student.html">Open: Adventure 5 — Activity</a></strong></li>
<p>Follow a drag race using DiVA charts and see how motion builds over time. You’ll see that the math of distance, velocity, with constant acceleration is identical to the math of the falling objects under the pull of gravity from Adventure 4.</p>
</ul>
</div>
<div class="footer">Dr. Super & Spark — Powered by ChatGPT</div>
</div>
</body>
</html>