|
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" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- ✅ ADD CALCULATOR CSS HERE -->
<link rel="stylesheet" href="images/calc-popup.css">
<title>Adventure 8 — Activity 2: Four DiVA Chart Sets</title>
<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; /* ≈ 0.5 cm */
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;
}
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;
}
@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{
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
object-fit: contain;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="page wide-page">
<div class="wrap">
<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_8_home.html"><button style="font-size:16px; padding:12px 16px;">🏠 Home</button></a>
<a href="adventure_8_activity_2_solution.html"><button style="font-size:16px; padding:12px 16px;">✅ Solutions</button></a>
</div>
</div>
<header>
<h1>Adventure 8 — Activity 2: Four DiVA Chart Sets</h1>
<div class="subtitle">Compute the two missing equations for each set and use slope/area checks.</div>
</header>
<div class="buttons-row">
<button onclick="checkAll()">Check Answers</button>
<button onclick="showSolutions()">Show Solutions</button>
<span id="score" class="secondary"></span>
</div>
<div class="two-col">
<div class="questions">
<h2>Set 1 — Free Fall (constant acceleration)</h2>
<div class="callout"><b>Given:</b> Distance (height) function from the graph: <span style="white-space:nowrap;">y(t) = 980 − 5t²</span> (using g = 10). Find <b>v(t)</b> and <b>a(t)</b> by differentiating.</div>
<div class="callout"><b></b></div>
<div class="card">
<div class="row-grid">
<div><b>v(t) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="s1_v" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>a(t) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="s1_a" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>y(7) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="s1_y7" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>v(7) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="s1_v7" placeholder="Type here…" /></div>
</div>
</div>
<h2>Set 2 — Constant Acceleration a = 8</h2>
<div class="callout"><b>Given:</b> Constant Acceleration: <span style="white-space:nowrap;">a = 8</span>. Find <b>x(t)</b> and <b>v(t)</b> by integrating.</div>
<div class="callout"><b>Given:</b> Is the slope of v(t) equal to a(t)?</div>
<div class="callout"></div>
<div class="callout"></div>
<div class="card">
<div class="row-grid">
<div><b>x(t) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="s2_x" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>v(t) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="s2_v" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>a(t) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="s2_a" placeholder="Type here…" /></div>
</div>
</div>
<h2>Set 3 — Variable Acceleration</h2>
<div class="callout"><b>Given:</b> Distance function from the graph: <span style="white-space:nowrap;">x(t) = 4t² − (1/3)t³</span>. Find <b>v(t)</b> and <b>a(t)</b> by differentiating.</div>
<div class="callout"></div>
<div class="card">
<div class="row-grid">
<div><b>x(t) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="s3_x" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>v(t) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="s3_v" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>a(t) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="s3_a" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>v(4) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="s3_v4" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>Area under a(t) from 0 to 4 =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="s3_area4" placeholder="Type here…" /></div>
</div>
</div>
<h2>Set 4 — Piecewise Motion (0–10 min, 10–50 min)</h2>
<div class="callout"><b>Given:</b> Constant Accelaration a: <span style="white-space:nowrap;">is given from the chart. Find <b>x(t)</b> and <b>v(t)</b> by integrating.</div>
<div class="callout"></div>
<div class="card">
<div class="row-grid">
<div><b>(0–10 min) x(t) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="s4_x1" placeholder="6.5t^2" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>(0–10 min) v(t) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="s4_v2" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>(0–10 min) a(t) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="s4_a1" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>(10–50 min) x(t) sec =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="s4_a2" placeholder="7.8t-2502" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>x(20 min) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="s4_x20" placeholder="Type here…" /></div>
</div>
</div>
</div>
<div class="right-col">
<div class="chart-sticky">
<div class="chart-box"><img src="images/adventure_8_activity_2_set1.png" alt="Set 1" ></div>
<div class="chart-box"><img src="images/adventure_8_activity_2_set2.png" alt="Set 2" ></div>
<div class="chart-box"><img src="images/adventure_8_activity_2_set3.png" alt="Set 3" ></div>
<div class="chart-box"><img src="images/adventure_8_activity_2_set4.png" alt="Set 4" ></div>
</div>
</div>
</div>
<div class="footer">
Created by Dr. Super and Spark — Powered by ChatGPT
</div>
</div>
<script>
const ANSWERS = {
"s1_v": [
"10t",
"10*t"
],
"s1_a": [
"10"
],
"s1_y7": [
"735"
],
"s1_v7": [
"70"
],
"s2_x": [
"4t^2",
"4t**2",
"4t2",
"4*t^2",
"4*t**2"
],
"s2_v": [
"8t",
"8*t"
],
"s2_a": [
"8"
],
"s3_x": [
"4t^2-(1/3)t^3",
"4t**2-(1/3)t**3",
"4t2-(1/3)t3",
"4t^2-1/3t^3",
"4t**2-1/3t**3"
],
"s3_v": [
"8t-t^2",
"8t-t**2",
"8t-t2",
"8*t-t^2",
"8*t-t**2"
],
"s3_a": [
"8-2t",
"8-2*t"
],
"s3_v4": [
"16"
],
"s3_area4": [
"16"
],
"s4_x1": [
"6.5t^2",
"6.5t**2",
"6.5t2"
],
"s4_a1": [
"13"
],
"s4_v2": [
"7.8"
],
"s4_a2": [
"7.8t - 2502",
"7.8t-2502",
"7.8*t-2502",
"7.8t - 2502",
"7.8*t - 2502",
"7.8t-2,502",
"7.8*t-2,502"
],
"s4_x20": [
"6860",
"6,860"
]
};
function $(id) { return document.getElementById(id); }
function clearStates(){
document.querySelectorAll("input").forEach(inp=>inp.classList.remove("correct","incorrect"));
document.querySelectorAll(".blank").forEach(b=>b.textContent="");
}
function norm(s){
return (s??"").toString().trim().toLowerCase()
.replace(/\s+/g,"")
.replace(/·/g,"*");
}
function mark(id, ok, msg){
const el=$(id);
if(!el) return;
el.classList.remove("correct","incorrect");
el.classList.add(ok? "correct":"incorrect");
const b=$("b_"+id);
if(b) b.textContent = ok? "✓" : (msg||"✗");
}
function check(id){
const expected = ANSWERS[id];
const got = norm($(id).value);
if(Array.isArray(expected)){
const ok = expected.some(e => norm(e)===got);
mark(id, ok);
return ok;
} else {
const ok = norm(expected)===got;
mark(id, ok);
return ok;
}
}
function norm(s){
return (s ?? "")
.toString()
.trim()
.toLowerCase()
.replace(/\s+/g, "") // remove spaces
.replace(/,/g, "") // remove commas
.replace(/[−–—]/g, "-") // convert fancy minus/dashes to normal hyphen
.replace(/·/g, "*");
}
function checkAll(){
let okCount=0, total=0;
clearStates();
Object.keys(ANSWERS).forEach(k=>{
total++;
if(check(k)) okCount++;
});
const out=$("score");
if(out) out.textContent = `Score: ${okCount} / ${total}`;
}
function showSolutions(){
const SOLUTIONS = {
// --- Set 1 ---
s1_v: "10t",
s1_a: "10",
s1_y7: "735",
s1_v7: "70",
// --- Set 2 ---
s2_x: "4t^2",
s2_v: "8t",
s2_a: "8",
// --- Set 3 ---
s3_x: "4t^2 - (1/3)t^3",
s3_v: "8t - t^2",
s3_a: "8 - 2t",
s3_v4: "16",
s3_area4: "16",
// --- Set 4 ---
s4_x1: "6.5t^2",
s4_a1: "13",
s4_v2: "7.8",
s4_a2: "7.8t-2502",
s4_x20: "6860"
};
Object.keys(SOLUTIONS).forEach(id => {
const el = document.getElementById(id);
if(el){
el.value = SOLUTIONS[id];
el.classList.remove("incorrect");
el.classList.add("correct");
}
});
const score = document.getElementById("score");
if(score){
score.textContent = "Solutions shown";
}
}
</script>
<script src="images/calc-popup.js"></script>
</body>
</html>