|
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 — Student 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: #ffffff;
max-width: 980px;
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; }
.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;
}
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-column (questions left, chart right) */
.page { max-width: none !important; } /* full width */
.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: 115%;
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%; }
}
/* interactive inputs */
input[type="text"], input[type="number"]{
width: 100%;
max-width: 280px;
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: 560px;
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;
}
button{
min-height: 40px;
padding: 6px 14px;
font-size: 0.95rem;
font-weight: 500;
border: 2px solid #666;
background: #f4f4f4;
color: #111;
border-radius: 0; /* ✅ square */
box-sizing: border-box;
cursor: pointer;
}
button.secondary {
background: #e4e8fb;
color: #243152;
}
button:active { transform: translateY(1px); }
.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;
}
@media (max-width: 900px) {
.row-grid { grid-template-columns: 1fr; }
}
</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_6_home.html"><button style="font-size:16px; padding:12px 16px;">🏠 Home</button></a>
<a href="adventure_6_activity_solution.html"><button style="font-size:16px; padding:12px 16px;">✅ Solutions</button></a>
</div>
<h1>✏️ Adventure 6 — Student Activity</h1>
<div class="subtitle">
Use the chart to connect <b>area</b> to <b>distance</b> and <b>velocity</b>.
Motion: speed up, then slow down to a stop (no friction).
</div>
<div class="two-col">
<div class="left-col">
<h2>✳ Equations of Motion (given)</h2>
<ul>
<li><code>a(t)=8-2t</code></li>
<li><code>v(t)=t(8-t)</code></li>
<li><code>s(t)=4t²-(1/3)t³</code></li>
</ul>
<h2>1) How far, how fast? (Read the distance graph)</h2>
<div class="row-grid">
<div>
<label for="s2"><b>Distance traveled in 2 seconds (m):</b></label>
<input id="s2" type="number" step="0.1" value="">
</div>
<div>
<label for="s27"><b>Distance traveled from 2 to 7 seconds (m):</b></label>
<input id="s27" type="number" step="0.1" value="">
</div>
</div>
<h2>2) Area means distance (use the velocity curve)</h2>
<div class="row-grid">
<div>
<label for="int02"><b>Area under v(t) from 0→2 (m):</b></label>
<input id="int02" type="number" step="0.1" value="">
</div>
<div>
<label for="int27"><b>Area under v(t) from 2→7 (m):</b></label>
<input id="int27" type="number" step="0.1" value="">
</div>
<div>
<label for="close1"><b>Are the areas close to the graph read‑offs?</b> (Yes/No)</label>
<input id="close1" type="text" placeholder="Yes / No" value="">
</div>
</div>
<h2>3) Rectangle estimates (convergence idea)</h2>
<p>Estimate total distance from 0→8 seconds by adding rectangles under <code>v(t)</code>.</p>
<div class="row-grid">
<div>
<label for="dt1"><b>Your estimate with Δt = 1 s (m):</b></label>
<input id="dt1" type="number" step="0.01" value="">
</div>
<div>
<label for="dt05"><b>Your estimate with Δt = 0.5 s (m):</b></label>
<input id="dt05" type="number" step="0.01" value="">
</div>
<div>
<label for="dt025"><b>Your estimate with Δt = 0.25 s (m):</b></label>
<input id="dt025" type="number" step="0.01" value="">
</div>
<div>
<label for="trend"><b>As Δt gets smaller, your estimate…</b></label>
<input id="trend" type="text" placeholder="gets closer / diverges / etc." value="">
</div>
</div>
<h2>4) Velocity as area under acceleration</h2>
<div class="row-grid">
<div>
<label for="a_area"><b>Signed area under a(t) from 0→8 (m/s):</b></label>
<input id="a_area" type="number" step="0.1" value="">
</div>
<div>
<label for="v8"><b>Velocity at 8 seconds from the velocity graph (m/s):</b></label>
<input id="v8" type="number" step="0.1" value="">
</div>
<div>
<label for="close2"><b>Are these two numbers equal?</b> (Yes/No)</label>
<input id="close2" type="text" placeholder="Yes / No" value="">
</div>
</div>
<h2>5) Acceleration check (0→5)</h2>
<div class="row-grid">
<div>
<label for="dv05"><b>Change in velocity from 0→5 (m/s):</b></label>
<input id="dv05" type="number" step="0.1" value="">
</div>
<div>
<label for="explain"><b>1 sentence: what does area under a(t) mean?</b></label>
<textarea id="explain" rows="2" placeholder="Area under a(t) gives..."></textarea>
</div>
</div>
<h2>★ Calculus (optional)</h2>
<ul>
<li><code>s'(t)=v(t)</code> and <code>v'(t)=a(t)</code></li>
<li><code>∫v(t)dt</code> gives distance (area idea).</li>
</ul>
</div>
<div class="right-col chart-sticky">
<img src="images/adventure_6_chart.png" alt="Adventure 6 DiVA Chart">
</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>
<button type="button" class="secondary" onclick="toggleSolution()">📄 Show / hide solution</button>
</div>
<div id="hintBox" class="hint">
Hint: <b>Area under v(t)</b> is <b>distance</b>. <b>Signed area under a(t)</b> is <b>change in velocity</b>.
Use the labels on the curves (values at each second) to estimate.
</div>
<div id="solutionBox" class="solution">
<strong>Reference values</strong>
<ul>
<li>Rectangle totals: Δt=1 → 84.00 m, Δt=0.5 → 85.00 m, Δt=0.25 → 85.25 m</li>
<li>Exact integral (true distance): 85.33 m</li>
<li>Velocity at 8 s: 0 m/s</li>
<li>Change in velocity 0→5: 15 m/s</li>
</ul>
</div>
<div class="footer">Dr. Super & Spark — Powered by ChatGPT</div>
</div>
<script>
const ANSWERS = {
s2: 13,
s27: 69,
int02: 13,
int27: 69,
dt1: 84.00,
dt05: 85.00,
dt025: 85.25,
a_area: 0,
v8: 0,
dv05: 15
};
function $(id){ return document.getElementById(id); }
function clearStates(){
["s2","s27","int02","int27","dt1","dt05","dt025","a_area","v8","dv05","close1","close2"].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();
checkNum("s2", ANSWERS.s2, 2.0);
checkNum("s27", ANSWERS.s27, 3.0);
checkNum("int02", ANSWERS.int02, 2.0);
checkNum("int27", ANSWERS.int27, 3.0);
checkNum("dt1", ANSWERS.dt1, 1.5);
checkNum("dt05", ANSWERS.dt05, 1.0);
checkNum("dt025", ANSWERS.dt025, 0.8);
checkNum("a_area", ANSWERS.a_area, 1.0);
checkNum("v8", ANSWERS.v8, 1.0);
checkNum("dv05", ANSWERS.dv05, 1.5);
const c1 = $("close1");
if(c1 && c1.value.trim()) {
const v = c1.value.trim().toLowerCase();
mark(c1, v === "yes");
}
const c2 = $("close2");
if(c2 && c2.value.trim()) {
const v = c2.value.trim().toLowerCase();
mark(c2, v === "yes");
}
}
function fillSample(){
$("s2").value = ANSWERS.s2;
$("s27").value = ANSWERS.s27;
$("int02").value = ANSWERS.int02;
$("int27").value = ANSWERS.int27;
$("close1").value = "Yes";
$("dt1").value = ANSWERS.dt1;
$("dt05").value = ANSWERS.dt05;
$("dt025").value = ANSWERS.dt025;
$("trend").value = "gets closer to one number";
$("a_area").value = ANSWERS.a_area;
$("v8").value = ANSWERS.v8;
$("close2").value = "Yes";
$("dv05").value = ANSWERS.dv05;
const ex = $("explain");
if(ex && !ex.value.trim()) {
ex.value = "Area under a(t) over time equals the change in velocity (Δv).";
}
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>