|
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" />
<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{
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;
}
</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. Instead of Л write pi. 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>9.42</code> or <code>(1/2)*base*height</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>
</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>
</body>
</html>