|
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>CM Intro — Activities 1 & 2</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; background:#f5f5fb; color:#222;
}
.page{
width:100%; box-sizing:border-box; padding:1.6rem 5vw 3rem; background:#fff;
}
.toplinks{ margin-bottom:0.9rem; font-size:0.95rem; }
a{ color:#1f4ed8; text-decoration:none; }
a:hover{ text-decoration:underline; }
h1{ margin:0.4rem 0 0.2rem; font-size:1.8rem; }
.subtitle{ color:#555; margin:0 0 1.2rem; line-height:1.45; }
h2{ margin-top:1.5rem; margin-bottom:0.35rem; font-size:1.25rem; }
p{ line-height:1.55; margin:0.35rem 0 0.75rem; }
.card{
border:1px solid #dde3ff; background:#f6f7ff; border-radius:14px;
padding:1rem 1rem 0.9rem; margin-top:0.7rem;
}
.imgwrap{
width:100%; overflow:hidden; border-radius:12px; background:#fff;
border:1px solid #d9def5;
}
.imgwrap img{ width:100%; height:auto; display:block; }
.inputs{
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap:0.8rem 1.2rem;
margin-top:0.8rem;
}
label{ display:block; font-size:0.95rem; margin-bottom:0.25rem; }
input[type="text"]{
width:100%; max-width:520px;
padding:0.45rem 0.55rem;
font-size:1rem;
border-radius:10px;
border:1px solid #c3cade;
box-sizing:border-box;
background:#fff;
}
.hint{ font-size:0.85rem; color:#666; margin-top:0.15rem; line-height:1.35; }
.tablewrap{ overflow-x:auto; margin-top:0.4rem; }
table{
border-collapse:collapse; width:100%; background:#fff;
border:1px solid #c3cade; border-radius:12px; overflow:hidden;
}
th, td{
border:1px solid #d7dcef;
padding:0.55rem 0.5rem;
text-align:center;
font-size:0.98rem;
}
th{ background:#f3f6ff; }
td input{
max-width:160px;
text-align:center;
}
.twoCol{
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap:0.9rem 1.2rem;
align-items:start;
}
.panel{
border:1px solid #dde3ff;
background:#fff;
border-radius:12px;
padding:0.8rem 0.9rem;
}
.panelTitle{
font-weight:700;
margin-bottom:0.4rem;
}
@media (max-width: 900px){
.inputs{ grid-template-columns: minmax(0,1fr); }
.twoCol{ grid-template-columns: minmax(0,1fr); }
}
.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);
}
input.correct {
background:#eaffea !important;
border-color:#3a9b3a !important;
}
input.incorrect {
background:#ffecec !important;
border-color:#c33 !important;
}
</style>
</head>
<body>
<div class="page">
<div class="top-buttons">
<div class="buttons-row">
<a href="index.html"><button class="secondary">🧭 Hub</button></a>
<a href="adventure_1_home.html"><button class="secondary">🏠 Home</button></a>
<a href="adventure_1_activity_2_solution.html"><button>✅ Solution</button></a>
</div>
</div>
<h1>✏️ Activities 1 & 2 — Student Worksheet Page</h1>
<div class="subtitle">
Type your answers in the boxes. For Л use the value 3.14, For powers, use plain text like <code>r^2</code> (instead of r²).
If you need to write something like “x to a power,” you can type it directly (example: <code>x^3</code>).
</div>
<!-- 1.1 -->
<h2>1.1 — Area Under a Line (Triangle)</h2>
<div class="card">
<div class="imgwrap">
<img src="images/adventure_1_image_2.1_student.png" alt="Activity 1.1 diagram">
</div>
<div class="inputs">
<div>
<label for="a11_area_num">Area of the shaded region (numeric):</label>
<input id="a11_area_num" type="text" placeholder="Area =">
<div class="hint">Example format: <code>(1/2)*base*height</code> <code>(Use pi=3.14)</code></div>
</div>
<div>
<label for="a11_area_r">Area of the shaded region (in terms of r):</label>
<input id="a11_area_r" type="text" placeholder="Area(r) =">
<div class="hint">Example: <code>r^2/2</code></div>
</div>
</div>
</div>
<!-- 1.2 -->
<h2>1.2 — Area Under a Line (Triangle)</h2>
<div class="card">
<div class="imgwrap">
<img src="images/adventure_1_image_2.2_student.png" alt="Activity 1.2 diagram">
</div>
<div class="inputs">
<div>
<label for="a12_area_num">Area of the shaded region (numeric):</label>
<input id="a12_area_num" type="text" placeholder="Area =">
<div class="hint">Example: <code>(1/2)*12*12</code></div>
</div>
<div>
<label for="a12_area_r">Area of the shaded region (in terms of r):</label>
<input id="a12_area_r" type="text" placeholder="Area(r) =">
<div class="hint">Common form: <code>r^2/2</code></div>
</div>
</div>
</div>
<!-- 2.1 -->
<h2>2.1 — Find the Area of the Shaded Trapezoid</h2>
<div class="card">
<div class="imgwrap">
<img src="images/adventure_1_image_3.1_student.png" alt="Activity 2.1 trapezoid diagrams">
</div>
<p class="hint" style="margin-top:0.85rem;">
Do this for <strong>both pictures</strong>: compute <strong>Area of rectangle</strong> and <strong>Area of triangle</strong>,
then add to get the <strong>Total Area</strong>.
</p>
<div class="twoCol" style="margin-top:0.7rem;">
<div class="panel">
<div class="panelTitle">Left picture</div>
<label for="a21_left_rect">Area of rectangle:</label>
<input id="a21_left_rect" type="text" placeholder="Rectangle area =">
<label for="a21_left_tri" style="margin-top:0.7rem;">Area of triangle:</label>
<input id="a21_left_tri" type="text" placeholder="Triangle area =">
<label for="a21_left_total" style="margin-top:0.7rem;">Total Area (rectangle + triangle):</label>
<input id="a21_left_total" type="text" placeholder="Total area =">
</div>
<div class="panel">
<div class="panelTitle">Right picture</div>
<label for="a21_right_rect">Area of rectangle:</label>
<input id="a21_right_rect" type="text" placeholder="Rectangle area =">
<label for="a21_right_tri" style="margin-top:0.7rem;">Area of triangle:</label>
<input id="a21_right_tri" type="text" placeholder="Triangle area =">
<label for="a21_right_total" style="margin-top:0.7rem;">Total Area (rectangle + triangle):</label>
<input id="a21_right_total" type="text" placeholder="Total area =">
</div>
</div>
<div class="inputs" style="margin-top:0.9rem;">
<div style="grid-column:1 / -1;">
<label for="a21_formula"><strong>Write the total area as a function of x</strong> (plain text):</label>
<input id="a21_formula" type="text" placeholder="A(x) =">
<div class="hint">Example: <code>A(x)=x^2/2 + 2x</code></div>
</div>
</div>
<!-- 2.2 -->
<h2>2.2 — Tables First, Then Slope at x = 2</h2>
<div class="card">
<p class="hint" style="margin-top:0;">
<strong>Step 1:</strong> Complete both tables. Put the tables side-by-side so you can compare them easily.
</p>
<div class="twoCol" style="margin-top:0.6rem;">
<div>
<h3 style="margin:0.2rem 0 0.25rem;">Table A — Area of the trapezoid at x</h3>
<div class="tablewrap">
<table>
<thead><tr><th>x</th><th>Area of the Trapezoid at x</th></tr></thead>
<tbody>
<tr><td>0</td><td><input type="text" id="tA0"></td></tr>
<tr><td>1</td><td><input type="text" id="tA1"></td></tr>
<tr><td>2</td><td><input type="text" id="tA2"></td></tr>
<tr><td>3</td><td><input type="text" id="tA3"></td></tr>
</tbody>
</table>
</div>
</div>
<div>
<h3 style="margin:0.2rem 0 0.25rem;">Table B — Values of A(x) = x^2/2 + 2x</h3>
<div class="tablewrap">
<table>
<thead><tr><th>x</th><th>A(x) = x^2/2 + 2x</th></tr></thead>
<tbody>
<tr><td>0</td><td><input type="text" id="tB0"></td></tr>
<tr><td>1</td><td><input type="text" id="tB1"></td></tr>
<tr><td>2</td><td><input type="text" id="tB2"></td></tr>
<tr><td>3</td><td><input type="text" id="tB3"></td></tr>
</tbody>
</table>
</div>
</div>
</div>
<p class="hint" style="margin-top:0.85rem;">
<strong>Step 2:</strong> After you fill the tables, answer this:
</p>
<div class="inputs" style="margin-top:0.4rem;">
<div style="grid-column:1 / -1;">
<label for="a22_explain">Explain (1–3 sentences): How does the area under the line relate to A(x)?</label>
<input id="a22_explain" type="text" placeholder="Your explanation...">
</div>
</div>
<p class="hint" style="margin-top:1.0rem;">
<strong>Step 3:</strong> Look at the graph below and estimate the slope at x=2.
</p>
<div class="twoCol" style="margin-top:0.6rem; align-items:start;">
<div class="imgwrap">
<img src="images/adventure_1_image_3.2_student.png" alt="Activity 2.2 graph with tangent at x=2">
</div>
<div class="panel" style="height:fit-content;">
<div class="panelTitle">Slope question</div>
<label for="a22_slope">Estimate the slope at x = 2 (rise/run):</label>
<input id="a22_slope" type="text" placeholder="Slope at x=2 =">
<div class="hint">Example format: <code>rise/run = (y2-y1)/(x2-x1)</code></div>
</div>
</div>
</div>
</div></div>
</div>
<div class="top-buttons">
<div class="buttons-row">
<button id="sampleBtn" type="button" onclick="playSoftClick(); fillSampleValues();">✏️ Sample Values</button>
<button id="checkBtn" type="button" onclick="playSoftClick(); checkActivity2();">✅ Check My Answers</button>
</div>
</div>
<p></p>
<script>
/* ========= Helpers ========= */
function $(id){ return document.getElementById(id); }
function clearMarks(){
document.querySelectorAll("input").forEach(el=>{
el.classList.remove("correct","incorrect");
});
}
function mark(id, ok){
const el = $(id);
if(!el) return;
el.classList.add(ok ? "correct" : "incorrect");
}
// Zero-safe numeric comparison:
// - if expected is 0, use absolute tolerance
// - else use relative tolerance
function near(a, b, rel=0.05, absTol=0.05){
if (Math.abs(b) < 1e-12){
return Math.abs(a - b) <= absTol;
}
return Math.abs(a - b) / Math.abs(b) <= rel;
}
// Read a number from an input; returns NaN if missing/empty
function num(id){
const el = $(id);
if(!el) return NaN;
return parseFloat(el.value);
}
/* ========= Main Checker ========= */
function checkActivity2(){
document.getElementById("checkBtn")?.classList.add("checked");
clearMarks();
/* ---- 1.1 and 1.2 numeric areas ---- */
const a11num = num("a11_area_num");
const a12num = num("a12_area_num");
if(!isNaN(a11num)) mark("a11_area_num", near(a11num, 9.42, 0.02, 0.1));
if(!isNaN(a12num)) mark("a12_area_num", near(a12num, 72));
/* ---- 2.1 Left picture (numbers) ----
rectangle = 4
triangle = 2
total = 6
*/
const Lrect = num("a21_left_rect");
const Ltri = num("a21_left_tri");
const Ltot = num("a21_left_total");
if(!isNaN(Lrect)) mark("a21_left_rect", near(Lrect, 4));
if(!isNaN(Ltri)) mark("a21_left_tri", near(Ltri, 2));
if(!isNaN(Ltot)) mark("a21_left_total", near(Ltot, 6));
/* ---- 2.1 Right picture (numeric check at r=2) ----
rectangle = r*2 = 4
triangle = r^2/2 = 2
total = 6
const Rrect = num("a21_right_rect");
const Rtri = num("a21_right_tri");
const Rtot = num("a21_right_total");
if(!isNaN(Rrect)) mark("a21_right_rect", near(Rrect, 4));
if(!isNaN(Rtri)) mark("a21_right_tri", near(Rtri, 2));
if(!isNaN(Rtot)) mark("a21_right_total", near(Rtot, 6));
*/
/* ---- 2.2 Tables ----
A(x) = x^2/2 + 2x for x = 0,1,2,3 gives:
[0, 2.5, 6, 10.5]
*/
const expected = [0, 2.5, 6, 10.5];
// Table A: tA0..tA3
["tA0","tA1","tA2","tA3"].forEach((id,i)=>{
const v = num(id);
if(!isNaN(v)) mark(id, near(v, expected[i]));
});
// Table B: tB0..tB3
["tB0","tB1","tB2","tB3"].forEach((id,i)=>{
const v = num(id);
if(!isNaN(v)) mark(id, near(v, expected[i]));
});
/* ---- Slope at x = 2 ----
If A(x)=x^2/2 + 2x, then A'(x)=x+2, slope at 2 is 4.
*/
const slope = num("a22_slope");
if(!isNaN(slope)) mark("a22_slope", near(slope, 4));
/* ---- (Optional) A(x) text box ----
You said symbolic can be ignored, so we do nothing here.
If later you want to lightly validate, we can.
*/
}
</script>
<script>
function fillSampleValues(){
document.getElementById("sampleBtn")?.classList.add("sampled");
const samples = {
// ---- earlier activities (unchanged) ----
a11_area_num: 9.42,
a12_area_num: 72,
a21_left_rect: 4,
a21_left_tri: 2,
a21_left_total: 6,
/*
// Right picture (example numeric check using r = 2)
a21_right_rect: 4, // r*2 = 2*2
a21_right_tri: 2, // r^2 / 2 = 4/2
a21_right_total: 6, // 4 + 2
*/
// ---- 2.2 tables ----
tA0: 0,
tA1: 2.5,
tA2: 6,
tA3: 10.5,
tB0: 0,
tB1: 2.5,
tB2: 6,
tB3: 10.5,
// ---- slope ----
a22_slope: 4
};
for (const id in samples) {
const el = document.getElementById(id);
if (!el) continue;
el.value = samples[id];
el.classList.remove("correct","incorrect");
}
}
</script>
<script>
let audioCtx = null;
function playSoftClick(){
// Create audio context on first user interaction
if (!audioCtx){
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
}
const ctx = audioCtx;
const osc = ctx.createOscillator();
const gain = ctx.createGain();
// Soft, warm click
osc.type = "sine";
osc.frequency.setValueAtTime(520, ctx.currentTime); // pitch
gain.gain.setValueAtTime(0.0001, ctx.currentTime);
gain.gain.exponentialRampToValueAtTime(0.06, ctx.currentTime + 0.01);
gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + 0.12);
osc.connect(gain);
gain.connect(ctx.destination);
osc.start();
osc.stop(ctx.currentTime + 0.13);
}
</script>
<script src="images/calc-popup.js"></script>
</body>
</html>