|
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 6 — Activity 1</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, "Segoe UI", sans-serif; margin:0; background:#f5f5fb; }
.page { padding:1.6rem 4vw; background:#fff; }
h1 { font-size:2rem; margin:0.2rem 0 0.4rem; }
.two-col { display:grid; grid-template-columns:1.1fr 0.9fr; gap:2rem; }
.right-col {
min-height:600px;
border:4px solid black;
}
table { border-collapse:collapse; width:100%; max-width:760px; margin-top:0.6rem; }
th,td { border:1px solid #cfd6ee; padding:8px; text-align:center; }
th { background:#eef2ff; }
td.blank { height:2.1rem; }
td.blank input { width:90%; height:1.6rem; border:1px solid #c3cade; border-radius:6px; padding:2px 4px; }
.correct { background:#e4f9e7; border-color:#2e9a48; }
.incorrect { background:#fde3e3; border-color:#cc3d3d; }
.buttons-row{ margin-top:1rem; display:flex; gap:10px;}
button{ background:#e9f0ff; border:2px solid #6b8cff; padding:10px 18px; cursor:pointer; } 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;
}
button:hover {
background: #f3f7ff;
}
button:active {
background: #cddcff;
box-shadow: 0 1px 0 #4f6fe6;
transform: translateY(2px);
}
.nav-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 0.8rem;
}
@media (max-width: 980px) {
.two-col {
grid-template-columns: 1fr;
}
} /* ← ADD THIS LINE */
.section-box {
background: #fff9e5;
border: 1px solid #f0e0a0;
border-radius: 10px;
padding: 12px 14px;
margin-top: 14px;
}
</style>
</head>
<body>
<div class="page">
<div class="nav-buttons">
<a href="index.html"><button type="button">🧭 Hub</button></a>
<a href="adventure_6_home.html"><button type="button">🏠 Home</button></a>
<a href="adventure_6_student_1_solution.html"><button type="button">✅ Solutions</button></a>
</div>
<h1>✏️ Adventure 6 — Activity 1 — Area under Velocity Curve</h1>
<div class="subtitle">
<b>Area under the velocity curve and distance traveled.</b>
Use the velocity graph to estimate total distance by adding rectangle areas,
then compare your estimates with the exact integral value.
</div>
<div class="two-col">
<div>
<div class="section-box">
<h2>Rectangle Table (Δt = 1)</h2>
<table>
<tr><th>Interval</th><th>Δt</th><th>Starting Velocity</th><th>vΔt</th></tr>
<tr><td>0–1</td><td>1</td><td class="blank"><input id="v01"></td><td class="blank"><input id="a01"></td></tr>
<tr><td>1–2</td><td>1</td><td class="blank"><input id="v12"></td><td class="blank"><input id="a12"></td></tr>
<tr><td>2–3</td><td>1</td><td class="blank"><input id="v23"></td><td class="blank"><input id="a23"></td></tr>
<tr><td>3–4</td><td>1</td><td class="blank"><input id="v34"></td><td class="blank"><input id="a34"></td></tr>
<tr><td>4–5</td><td>1</td><td class="blank"><input id="v45"></td><td class="blank"><input id="a45"></td></tr>
<tr><td>5–6</td><td>1</td><td class="blank"><input id="v56"></td><td class="blank"><input id="a56"></td></tr>
<tr><td>6–7</td><td>1</td><td class="blank"><input id="v67"></td><td class="blank"><input id="a67"></td></tr>
<tr><td>7–8</td><td>1</td><td class="blank"><input id="v78"></td><td class="blank"><input id="a78"></td></tr>
<tr><th>Total</th><td></td><td></td><td class="blank"><input id="total"></td></tr>
</table>
</div>
<div class="section-box">
<h2>Comparison Table</h2>
<table>
<tr><th>Width (Δt)</th><th>Method</th><th>Sum of Areas</th></tr>
<tr><td>1</td><td>Your Estimate</td><td class="blank"><input id="dt1_total"></td></tr>
<tr><td>1/2</td><td>Finer estimate</td><td>85.21</td></tr>
<tr><td>1/4</td><td>Very fine estimate</td><td>85.31</td></tr>
</table>
</div>
<div class="section-box">
<h2>3) Integral Calculation</h2>
<p>
S = ∫₀⁸ (8t − t²) dt<br>
= [4t² − (1/3)t³]₀⁸<br>
= 256 − 512/3<br>
= 85⅓ ≈ 85.33 m
</p>
</div>
<div class="buttons-row">
<button onclick="checkAnswers()">Check my answers</button>
<button onclick="fillSample()">Use sample values</button>
</div>
</div>
<div class="right-col">
<img src="images/adventure_6_activity_1_chart.png" style="width:100%; border-radius:10px;">
</div>
</div>
</div>
<script>
const A={v01:0,v12:7,v23:12,v34:15,v45:16,v56:15,v67:12,v78:7,
a01:0,a12:7,a23:12,a34:15,a45:16,a56:15,a67:12,a78:7,
total:84,dt1_total:84};
function g(id){return document.getElementById(id);}
function near(a,b){return Math.abs(a-b)<=1;}
function mark(e,ok){e.classList.remove("correct","incorrect");e.classList.add(ok?"correct":"incorrect");}
function checkAnswers(){
Object.keys(A).forEach(id=>{
let e=g(id); if(!e) return;
let v=parseFloat(e.value); if(isNaN(v)) return;
mark(e,near(v,A[id]));
});
}
function fillSample(){
Object.keys(A).forEach(id=>{let e=g(id); if(e) e.value=A[id];});
}
</script>
<script src="images/calc-popup.js"></script>
</body>
</html>