|
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 — 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 4vw 3rem;
background: #ffffff;
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;
}
/* --- two-column layout (questions left, chart right) --- */
.two-col {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 2rem;
align-items: start;
clear: both;
}
.right-col { text-align: center; }
.right-col img {
width: 105%;
margin-left: -1cm;
height: auto;
border-radius: 12px;
border: 1px solid #dde3ff;
display: inline-block;
}
.chart-sticky {
position: sticky;
top: 1rem;
}
@media (max-width: 900px) {
.two-col { grid-template-columns: 1fr; }
.chart-sticky { position: static; }
.right-col img { width: 100%; }
}
/* --- inputs & buttons --- */
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: 620px;
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;
}
@media (max-width: 900px) {
.row-grid { grid-template-columns: 1fr; }
}
.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);
}
.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;
}
table {
border-collapse: collapse;
width: 100%;
max-width: 760px;
margin-top: 0.6rem;
}
th, td {
border: 1px solid #dde3ff;
padding: 8px 10px;
text-align: center;
font-size: 0.95rem;
}
th { background: #f6f7ff; }
.footer {
margin-top: 2.2rem;
font-size: 0.9rem;
color: #777;
text-align: left;
border-top: 1px solid #eee;
padding-top: 0.8rem;
}
code { background:#fff; border:1px solid #d9def5; padding:2px 6px; border-radius:8px; }
</style>
</head>
<body>
<div class="page">
<div style="display:flex; flex-wrap:wrap; gap:12px;">
<a href="index.html"><button style="font-size:16px; padding:12px 16px;">🧭 Hub</button></a>
<a href="adventure_5_home.html"><button style="font-size:16px; padding:12px 16px;">🏠 Home</button></a>
<a href="adventure_5_activity_solution.html"><button style="font-size:16px; padding:12px 16px;">✅ Solutions</button></a>
</div>
<h1>🏁 Adventure 5 — Activity</h1>
<div class="subtitle">
Use the charts to connect <b>distance</b>, <b>velocity</b>, and <b>acceleration</b> — and discover why calculus is really “slope + area”.
</div>
<div class="card">
<p class="subtitle" style="margin:0;">Assumptions: no friction • constant acceleration from rest • time ticks every 1 second.</p>
</div>
<div class="two-col">
<div class="left-col">
<h2>✳ Equations (given)</h2>
<ul>
<li><code>a(t) = 8</code> (constant, m/s²)</li>
<li><code>v(t) = a·t</code></li>
<li><code>x(t) = ½·a·t²</code></li>
</ul>
<h2>1) How far, how fast? (Read the graphs)</h2>
<div class="row-grid">
<div>
<label for="x5"><b>Distance after 5 s (m):</b></label>
<input id="x5" type="number" step="1" value="">
</div>
<div>
<label for="x10"><b>Distance after 10 s (m):</b></label>
<input id="x10" type="number" step="1" value="">
</div>
<div>
<label for="v5"><b>Velocity after 5 s (m/s):</b></label>
<input id="v5" type="number" step="1" value="">
</div>
<div>
<label for="v10"><b>Velocity after 10 s (m/s):</b></label>
<input id="v10" type="number" step="1" value="">
</div>
</div>
<h2>2) Area means distance (Area under v(t))</h2>
<div class="row-grid">
<div>
<label for="area05"><b>Area under v(t) from 0→5 s (m):</b></label>
<input id="area05" type="number" step="1" value="">
</div>
<div>
<label for="area010"><b>Area under v(t) from 0→10 s (m):</b></label>
<input id="area010" type="number" step="1" value="">
</div>
<div>
<label for="match"><b>Do these areas match the distances?</b> (Yes/No)</label>
<input id="match" type="text" placeholder="Yes / No" value="">
</div>
</div>
<h2>3) Slope means velocity (Tangent line idea)</h2>
<div class="row-grid">
<div>
<label for="slope5"><b>Slope of tangent to x(t) at t=5 (m/s):</b></label>
<input id="slope5" type="number" step="1" value="">
</div>
<div>
<label for="close"><b>Is this close to v(5)?</b> (Yes/No)</label>
<input id="close" type="text" placeholder="Yes / No" value="">
</div>
</div>
<h2>4) Finish line (¼ mile = 400 m)</h2>
<div class="row-grid">
<div>
<label for="tfinish"><b>Time to reach 400 m (s):</b></label>
<input id="tfinish" type="number" step="0.1" value="">
</div>
<div>
<label for="vfinish"><b>Velocity at finish (m/s):</b></label>
<input id="vfinish" type="number" step="0.1" value="">
</div>
<div>
<label for="vfinish_kmh"><b>Velocity at finish (km/h):</b></label>
<input id="vfinish_kmh" type="number" step="0.1" value="">
</div>
</div>
<h2>5) Acceleration check (Area under a(t))</h2>
<div class="row-grid">
<div>
<label for="dv05"><b>Δv from 0→5 s (m/s):</b></label>
<input id="dv05" type="number" step="1" value="">
</div>
<div>
<label for="dv010"><b>Δv from 0→10 s (m/s):</b></label>
<input id="dv010" type="number" step="1" value="">
</div>
<div>
<label for="explain"><b>Explain (1 sentence):</b></label>
<textarea id="explain" rows="2" placeholder="What does the area under a(t) mean?"></textarea>
</div>
</div>
<h2>6) (***) Calculus</h2>
<ul>
<li>Differentiate <code>x(t)</code> to get <code>v(t)</code>, then differentiate <code>v(t)</code> to get <code>a(t)</code>.</li>
<li>Integrate <code>a(t)</code> to recover <code>v(t)</code>, and integrate <code>v(t)</code> to recover <code>x(t)</code>.</li>
</ul>
<h2>7) (***) Kinetic Energy and Work</h2>
<p>Fill the table to verify <code>KE = ½ m v²</code> matches <code>Work = F·d</code> (for constant acceleration).</p>
<table>
<thead>
<tr>
<th>Time (s)</th>
<th>Velocity (m/s)</th>
<th>Distance (m)</th>
<th>KE (kJ)</th>
<th>Work (kJ)</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td><input id="ke_v2" type="number" step="1"></td>
<td><input id="ke_d2" type="number" step="1"></td>
<td><input id="ke_ke2" type="number" step="1"></td>
<td><input id="ke_w2" type="number" step="1"></td>
</tr>
<tr>
<td>5</td>
<td><input id="ke_v5" type="number" step="1"></td>
<td><input id="ke_d5" type="number" step="1"></td>
<td><input id="ke_ke5" type="number" step="1"></td>
<td><input id="ke_w5" type="number" step="1"></td>
</tr>
<tr>
<td>10</td>
<td><input id="ke_v10" type="number" step="1"></td>
<td><input id="ke_d10" type="number" step="1"></td>
<td><input id="ke_ke10" type="number" step="1"></td>
<td><input id="ke_w10" type="number" step="1"></td>
</tr>
</tbody>
</table>
</div>
<div class="right-col chart-sticky">
<img src="images/adventure_5_image_1.png" alt="Adventure 5 DiVA Charts">
</div>
</div>
<div class="buttons-row">
<button type="button" onclick="checkAnswers()">✅ Check my answers</button>
<button type="button" class="secondary" onclick="fillSample()">Use sample values</button>
<button type="button" class="secondary" onclick="toggleHint()">💡 Show / hide hint</button>
</div>
<div id="hintBox" class="hint">
Tips: For triangles, area = <b>½·base·height</b>. For unit conversion: km/h = (m/s) × 3.6.
<br/>Remember: area under <b>v(t)</b> gives <b>distance</b>, and area under <b>a(t)</b> gives <b>change in velocity</b>.
</div>
<div class="footer">Dr. Super & Spark — Powered by ChatGPT</div>
</div>
<script>
const ANSWERS = {
x5: 100,
x10: 400,
v5: 40,
v10: 80,
area05: 100,
area010: 400,
slope5: 40,
tfinish: 10,
vfinish: 80,
vfinish_kmh: 288,
dv05: 40,
dv010: 80,
// KE table (assuming m = 1, so KE in kJ uses the provided teacher table values)
ke_v2: 16, ke_d2: 16, ke_ke2: 128, ke_w2: 128,
ke_v5: 40, ke_d5: 100, ke_ke5: 800, ke_w5: 800,
ke_v10: 80, ke_d10: 400, ke_ke10: 3200, ke_w10: 3200
};
function $(id){ return document.getElementById(id); }
function clearStates(){
Object.keys(ANSWERS).concat(["match","close"]).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 checkAnswers(){
clearStates();
const tolMeters = 5;
const tolVel = 3;
const tolTime = 0.5;
const tolEnergy = 10;
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));
}
checkNum("x5", ANSWERS.x5, tolMeters);
checkNum("x10", ANSWERS.x10, tolMeters);
checkNum("v5", ANSWERS.v5, tolVel);
checkNum("v10", ANSWERS.v10, tolVel);
checkNum("area05", ANSWERS.area05, tolMeters);
checkNum("area010", ANSWERS.area010, tolMeters);
checkNum("slope5", ANSWERS.slope5, tolVel);
checkNum("tfinish", ANSWERS.tfinish, tolTime);
checkNum("vfinish", ANSWERS.vfinish, tolVel);
checkNum("vfinish_kmh", ANSWERS.vfinish_kmh, 15);
checkNum("dv05", ANSWERS.dv05, tolVel);
checkNum("dv010", ANSWERS.dv010, tolVel);
["ke_v2","ke_d2","ke_ke2","ke_w2","ke_v5","ke_d5","ke_ke5","ke_w5","ke_v10","ke_d10","ke_ke10","ke_w10"].forEach(id=>{
const tol = id.includes("ke_") && (id.includes("ke_ke") || id.includes("ke_w")) ? tolEnergy : tolVel;
checkNum(id, ANSWERS[id], tol);
});
const match = $("match");
if(match && match.value.trim()){
const v = match.value.trim().toLowerCase();
mark(match, v === "yes" || v === "y");
}
const close = $("close");
if(close && close.value.trim()){
const v = close.value.trim().toLowerCase();
mark(close, v === "yes" || v === "y");
}
}
function fillSample(){
Object.keys(ANSWERS).forEach(id => {
const el = $(id);
if(el) el.value = ANSWERS[id];
});
const ex = $("explain");
if(ex && !ex.value.trim()){
ex.value = "Area under acceleration gives change in velocity (Δv).";
}
$("match").value = "Yes";
$("close").value = "Yes";
clearStates();
}
function toggleHint(){
const box = $("hintBox");
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>