|
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 7 — Activity</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- ✅ ADD CALCULATOR CSS HERE -->
<link rel="stylesheet" href="images/calc-popup.css">
<style>
body {
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:#fff;
max-width:none;
margin:0 auto;
}
h1{margin:0.2rem 0 0.25rem; font-size:2rem;}
.subtitle{color:#555; margin:0 0 1.2rem; line-height:1.45;}
h2{margin-top:1.4rem; margin-bottom:0.4rem; font-size:1.25rem;}
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;}
.card{border:1px solid #dde3ff; background:#f6f7ff; border-radius:14px; padding:1rem 1rem 0.95rem; margin-top:0.7rem;}
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;}
.two-col{
display:grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 2rem;
align-items:start;
clear:both;
}
.right-col{ text-align:center; }
.charts-stack img{
width: 115%;
height:auto;
border-radius:12px;
border:1px solid #dde3ff;
display:block;
margin: 0 auto 1rem;
}
.chart-sticky{ position: sticky; top: 1rem; }
@media (max-width: 900px){
.two-col{ grid-template-columns:1fr; }
.chart-sticky{ position: static; }
.charts-stack img{ width:100%; }
}
input[type="text"], input[type="number"]{
width:100%;
max-width:260px;
padding:0.35rem 0.45rem;
font-size:0.95rem;
border-radius:8px;
border:1px solid #c3cade;
margin-top:0.25rem;
box-sizing:border-box;
}
textarea{
width:100%;
max-width:640px;
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(3, minmax(0, 1fr));
gap: 1rem 1.4rem;
margin-top:0.6rem;
clear:both;
}
@media (max-width: 900px){
.row-grid{ grid-template-columns:1fr; }
}
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);
}
</style>
</head>
<body>
<div class="page">
<div style="display:flex; flex-wrap:wrap; gap:12px; margin-bottom:0.8rem;">
<a href="index.html"><button style="font-size:16px; padding:12px 16px;">🧭 Hub</button></a>
<a href="adventure_7_home.html"><button style="font-size:16px; padding:12px 16px;">🏠 Home</button></a>
<a href="adventure_7_activity_solution.html"><button style="font-size:16px; padding:12px 16px;">✅ Solutions</button></a>
</div>
<h1>🚀 Adventure 7 — Rocket Launch</h1>
<div class="subtitle">
Use the two chart sets to connect <b>mass</b>, <b>velocity</b>, <b>momentum</b>, and <b>force</b>.
You will practice <b>slope</b>, <b>area</b>, and the <b>product rule</b>.
</div>
<div class="card">
<p style="margin:0;">
Given: <code>p(t)=m(t)v(t)</code> and <code>F(t)=p′(t)=m(t)a(t)+v(t)m′(t)</code>.
Watch units: velocity chart is <b>km/s</b> and must be converted to <b>m/s</b>; mass change is <b>kg/min</b> and must be converted to <b>kg/s</b>.
</p>
</div>
<div class="two-col">
<div class="left-col">
<h2>✳ Equation of Motion (given)
<ul>
<li><b>Mass (kg):</b></li>
<li><code>m(t)=50,000−2,000t</code> for <code>0≤t≤10</code> min</li>
<li><code>m(t)=30,000</code> for <code>10≤t≤55</code> min</li>
<li><code>m(t)=30,000−600(t−55)</code> for <code>55≤t≤60</code> min</li>
<li><b>Velocity (km/s):</b> read from the red velocity curve.</li>
</ul>
</h2>
<h2>1) Estimate Velocity from the slope of the distance curve and compare with v(t) chart</h2>
<p>Fill the table for <b>t = 5, 30, 58</b> minutes.</p>
<div class="row-grid">
<div><b>t=5</b><br><label>Slope estimate (km/s)</label><input id="vSlope5" type="number" step="0.1"></div>
<div><label>From v-chart (km/s)</label><input id="vChart5" type="number" step="0.1"></div>
<div><label>Convert to m/s</label><input id="vMS5" type="number" step="1"></div>
<div><b>t=30</b><br><label>Slope estimate (km/s)</label><input id="vSlope30" type="number" step="0.1"></div>
<div><label>From v-chart (km/s)</label><input id="vChart30" type="number" step="0.1"></div>
<div><label>Convert to m/s</label><input id="vMS30" type="number" step="1"></div>
<div><b>t=58</b><br><label>Slope estimate (km/s)</label><input id="vSlope58" type="number" step="0.1"></div>
<div><label>From v-chart (km/s)</label><input id="vChart58" type="number" step="0.1"></div>
<div><label>Convert to m/s</label><input id="vMS58" type="number" step="1"></div>
</div>
<h2>2) Estimate Acceleration from slope of velocity curve and compare with a(t) chart</h2>
<div class="row-grid">
<div><b>t=5</b><br><label>Slope estimate (m/s²)</label><input id="aSlope5" type="number" step="0.1"></div>
<div><label>From a-chart (m/s²)</label><input id="aChart5" type="number" step="0.1"></div>
<div></div>
<div><b>t=30</b><br><label>Slope estimate (m/s²)</label><input id="aSlope30" type="number" step="0.1"></div>
<div><label>From a-chart (m/s²)</label><input id="aChart30" type="number" step="0.1"></div>
<div></div>
<div><b>t=58</b><br><label>Slope estimate (m/s²)</label><input id="aSlope58" type="number" step="0.1"></div>
<div><label>From a-chart (m/s²)</label><input id="aChart58" type="number" step="0.1"></div>
<div></div>
</div>
<h2>3) Determine Mass from the mass function</h2>
<div class="row-grid">
<div><b>m(5)</b><br><input id="m5" type="number" step="1" placeholder="kg"></div>
<div><b>m(30)</b><br><input id="m30" type="number" step="1" placeholder="kg"></div>
<div><b>m(58)</b><br><input id="m58" type="number" step="1" placeholder="kg"></div>
</div>
<h2>4) Compute mass change m′(t)</h2>
<div class="row-grid">
<div><b>t=5</b><br><label>m′(t) (kg/min)</label><input id="dmMin5" type="number" step="1"></div>
<div><label>m′(t) (kg/s)</label><input id="dmSec5" type="number" step="0.1"></div>
<div></div>
<div><b>t=30</b><br><label>m′(t) (kg/min)</label><input id="dmMin30" type="number" step="1"></div>
<div><label>m′(t) (kg/s)</label><input id="dmSec30" type="number" step="0.1"></div>
<div></div>
<div><b>t=58</b><br><label>m′(t) (kg/min)</label><input id="dmMin58" type="number" step="1"></div>
<div><label>m′(t) (kg/s)</label><input id="dmSec58" type="number" step="0.1"></div>
<div></div>
</div>
<h2>5) Compute Force F(t)=m(t)a(t)+v(t)m′(t)</h2>
<div class="row-grid">
<div><b>t=5</b><br><label>m·a (N)</label><input id="ma5" type="number" step="1"></div>
<div><label>v·m′ (N)</label><input id="vdm5" type="number" step="1"></div>
<div><label>F (N)</label><input id="F5" type="number" step="1"></div>
<div><b>t=30</b><br><label>m·a (N)</label><input id="ma30" type="number" step="1"></div>
<div><label>v·m′ (N)</label><input id="vdm30" type="number" step="1"></div>
<div><label>F (N)</label><input id="F30" type="number" step="1"></div>
<div><b>t=58</b><br><label>m·a (N)</label><input id="ma58" type="number" step="1"></div>
<div><label>v·m′ (N)</label><input id="vdm58" type="number" step="1"></div>
<div><label>F (N)</label><input id="F58" type="number" step="1"></div>
</div>
<p style="margin-top:0.8rem;">Verify your force values are close to what is shown on the Force chart.</p>
<h2>🧠 Interpretation Questions</h2>
<p><b>When is the force largest? Why?</b></p>
<textarea id="q1" rows="2" placeholder="Your answer..."></textarea>
<p><b>Why is the force close to zero during the coasting phase?</b></p>
<textarea id="q2" rows="2" placeholder="Your answer..."></textarea>
<p><b>Why does the force increase again near 58 minutes?</b></p>
<textarea id="q3" rows="2" placeholder="Your answer..."></textarea>
<h2>★ Challenge</h2>
<p><b>(***)</b> Explain why the slope-estimate for acceleration can match the acceleration chart exactly, but the slope-estimate for velocity from the distance curve is only approximate.</p>
<textarea id="q4" rows="3" placeholder="Your explanation..."></textarea>
<p><b>What makes the rocket go forward?</b></p>
<textarea id="q5" rows="2" placeholder="Your answer..."></textarea>
<div class="buttons-row">
<button type="button" onclick="checkAnswers()">✅ Check my answers</button>
<button type="button" class="secondary" onclick="toggleHint()">💡 Show / hide hint</button>
<button type="button" class="secondary" onclick="toggleSolution()">📄 Show / hide sample solutions</button>
<button type="button" class="secondary" onclick="fillSample()">Use sample values</button>
</div>
<div id="hintBox" class="hint">
<ul style="margin:0.2rem 0 0.2rem 1.1rem;">
<li>Convert <b>km/s → m/s</b> by multiplying by 1000.</li>
<li>Convert <b>kg/min → kg/s</b> by dividing by 60.</li>
<li>During coasting, acceleration is ~0 and fuel burn is ~0, so force is ~0.</li>
</ul>
</div>
<div id="solutionBox" class="solution">
<strong>Sample solution ideas:</strong>
<ul>
<li>Force is largest at launch because acceleration and fuel burn are both high.</li>
<li>During coasting, the rocket is not burning fuel, so m′(t)=0 and a(t)=0.</li>
<li>Near 58 minutes, there is a new burn (“escape burn”) giving positive acceleration and fuel loss again.</li>
</ul>
</div>
</div>
<div class="right-col chart-sticky">
<div class="charts-stack">
<img src="images/adventure_7_chart_1.png" alt="Rocket Distance–Velocity–Acceleration charts">
<img src="images/adventure_7_chart_2.png" alt="Rocket Mass–Momentum–Force charts">
</div>
</div>
</div>
<div class="footer">Dr. Super & Spark — Powered by ChatGPT</div>
</div>
<script>
const ANSWERS = {
vSlope5: 3.3, vChart5: 3.9, vMS5: 3900,
vSlope30: 7.9, vChart30: 7.8, vMS30: 7800,
vSlope58: 10.0, vChart58: 11.0, vMS58: 11000,
aSlope5: 13.0, aChart5: 13.0,
aSlope30: 0.0, aChart30: 0.0,
aSlope58: 5.66, aChart58: 5.66,
m5: 40000, m30: 30000, m58: 27000,
dmMin5: -2000, dmSec5: 33.3,
dmMin30: 0, dmSec30: 0,
dmMin58: -600, dmSec58: 10,
ma5: 520000, vdm5: 129870, F5: 390130,
ma30: 0, vdm30: 0, F30: 0,
ma58: 152820, vdm58: 110000, F58: 42820
};
function $(id){ return document.getElementById(id); }
function clearStates(){
Object.keys(ANSWERS).forEach(id => {
const el = $(id);
if(!el) return;
el.classList.remove("correct");
el.classList.remove("incorrect");
});
}
function near(val, target, tol){ return Math.abs(val - target) <= tol; }
function mark(el, ok){
if(!el) return;
el.classList.add(ok ? "correct" : "incorrect");
}
function checkNum(id, target, tol){
const el = $(id);
if(!el) return;
const v = parseFloat(el.value);
if(isNaN(v)) return;
mark(el, near(v, target, tol));
}
function checkAnswers(){
clearStates();
// tolerances
const tolSmall = 0.25;
const tolVelMS = 200;
const tolForce = 2500;
const tolMass = 200;
const tolDmSec = 1.0;
checkNum("vSlope5", ANSWERS.vSlope5, 0.35);
checkNum("vChart5", ANSWERS.vChart5, 0.25);
checkNum("vMS5", ANSWERS.vMS5, tolVelMS);
checkNum("vSlope30", ANSWERS.vSlope30, 0.35);
checkNum("vChart30", ANSWERS.vChart30, 0.25);
checkNum("vMS30", ANSWERS.vMS30, tolVelMS);
checkNum("vSlope58", ANSWERS.vSlope58, 0.6);
checkNum("vChart58", ANSWERS.vChart58, 0.5);
checkNum("vMS58", ANSWERS.vMS58, 400);
checkNum("aSlope5", ANSWERS.aSlope5, 0.6);
checkNum("aChart5", ANSWERS.aChart5, 0.6);
checkNum("aSlope30", ANSWERS.aSlope30, 0.3);
checkNum("aChart30", ANSWERS.aChart30, 0.3);
checkNum("aSlope58", ANSWERS.aSlope58, 0.4);
checkNum("aChart58", ANSWERS.aChart58, 0.4);
checkNum("m5", ANSWERS.m5, tolMass);
checkNum("m30", ANSWERS.m30, tolMass);
checkNum("m58", ANSWERS.m58, tolMass);
checkNum("dmMin5", ANSWERS.dmMin5, 50);
checkNum("dmSec5", ANSWERS.dmSec5, tolDmSec);
checkNum("dmMin30", ANSWERS.dmMin30, 10);
checkNum("dmSec30", ANSWERS.dmSec30, 0.2);
checkNum("dmMin58", ANSWERS.dmMin58, 20);
checkNum("dmSec58", ANSWERS.dmSec58, 0.6);
checkNum("ma5", ANSWERS.ma5, 5000);
checkNum("vdm5", ANSWERS.vdm5, 5000);
checkNum("F5", ANSWERS.F5, 8000);
checkNum("ma30", ANSWERS.ma30, 50);
checkNum("vdm30", ANSWERS.vdm30, 50);
checkNum("F30", ANSWERS.F30, 100);
checkNum("ma58", ANSWERS.ma58, 6000);
checkNum("vdm58", ANSWERS.vdm58, 6000);
checkNum("F58", ANSWERS.F58, 6000);
}
function fillSample(){
Object.keys(ANSWERS).forEach(id => {
const el = $(id);
if(el) el.value = ANSWERS[id];
});
$("q1").value = "At the start of launch, because acceleration and fuel burn are both largest.";
$("q2").value = "During coasting the rocket is not burning fuel (m′=0) and acceleration is ~0, so force is ~0.";
$("q3").value = "Near 58 minutes a new burn adds acceleration and fuel loss, increasing force again.";
$("q4").value = "The velocity curve is piecewise linear, so its slope (acceleration) can be exact. The distance curve is curved, so a rise/run gives only an average slope over an interval.";
$("q5").value = "Fuel ejected backward provides thrust forward (and the rocket becomes lighter).";
clearStates();
}
function toggleHint(){
const box = $("hintBox");
if(!box) return;
box.style.display = (box.style.display === "none" || box.style.display === "") ? "block" : "none";
}
function toggleSolution(){
const box = $("solutionBox");
if(!box) return;
box.style.display = (box.style.display === "none" || box.style.display === "") ? "block" : "none";
}
</script>
<script src="images/calc-popup.js"></script>
</body>
</html>