|
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" />
<title>Adventure 13 – Activity 1 (Student)</title>
<!-- ✅ 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:#fff;
max-width:none;
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;}
.card{border:1px solid #dde3ff; background:#f6f7ff; border-radius:14px; padding:1rem 1rem 0.95rem; margin-top:0.7rem;}
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-col{display:grid;grid-template-columns: 1.15fr 0.85fr;gap: 2rem;align-items:start;clear:both;}
.right-col{ text-align:center; }
.charts-stack img{width:105%;height:auto;border-radius:12px;border:1px solid #dde3ff;display:block;margin: 0 auto 1rem;max-width:105%;}
.chart-sticky{ position: sticky; top: 1rem; }
@media (max-width: 900px){
.two-col{display:grid;grid-template-columns: 1.15fr 0.85fr;gap: 2rem;align-items:start;clear:both;}
.chart-sticky{ position: static; }
.charts-stack img{width:105%;height:auto;border-radius:12px;border:1px solid #dde3ff;display:block;margin: 0 auto 1rem;max-width:105%;}
}
input[type="text"], input[type="number"]{
width:100%;
max-width:260px;
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:640px;
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(3, minmax(0, 1fr));
gap: 1rem 1.4rem;
margin-top:0.6rem;
clear:both;
}
@media (max-width: 900px){
.row-grid{ grid-template-columns:1fr; }
}
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); }
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;
}
</style>
</head>
<body>
<div class="page">
<div style="display:flex; flex-wrap:wrap; gap:12px; margin-bottom:0.8rem;">
<a href="index.html"><button>🧭 Hub</button></a>
<a href="adventure_13_home.html"><button class="secondary">🏠 Home</button></a>
<a href="adventure_13_story.html"><button class="secondary">📜 Story</button></a>
<a href="adventure_13_activity1_solution.html"><button class="secondary">🧠 Solution</button></a>
</div>
<h1>🧩 Adventure 13 — Activity 1</h1>
<div class="subtitle">Training with four functions: <code>x²</code>, <code>−x²</code>, <code>x³</code>, <code>−x³</code></div>
<div class="two-col">
<div class="left-col">
<div class="callout">
<b>Goal:</b> For each function, compute <code>f</code>, <code>f′</code>, and <code>f″</code> at <code>x = −2, −1, 0, 1, 2</code>.
Then decide: does the point (0,0) give a <b>maximum</b>, <b>minimum</b>, or an <b>inflection point</b>?
</div>
<h2>1) f(x) = x²</h2>
<p>Compute derivatives:</p>
<p><b>f′(x) =</b> <input type="text" id="d1" placeholder="" style="max-width:220px;"></p>
<p><b>f″(x) =</b> <input type="text" id="d2" placeholder="" style="max-width:220px;"></p>
<table class="gridtable">
<tr><th>x</th><th>f</th><th>f′</th><th>f″</th></tr>
<tr><td>-2</td><td><input type="number" step="any" id="x2_f_-2" /></td><td><input type="number" step="any" id="x2_fp_-2" /></td><td><input type="number" step="any" id="x2_fpp_-2" /></td></tr>
<tr><td>-1</td><td><input type="number" step="any" id="x2_f_-1" /></td><td><input type="number" step="any" id="x2_fp_-1" /></td><td><input type="number" step="any" id="x2_fpp_-1" /></td></tr>
<tr><td>0</td><td><input type="number" step="any" id="x2_f_0" /></td><td><input type="number" step="any" id="x2_fp_0" /></td><td><input type="number" step="any" id="x2_fpp_0" /></td></tr>
<tr><td>1</td><td><input type="number" step="any" id="x2_f_1" /></td><td><input type="number" step="any" id="x2_fp_1" /></td><td><input type="number" step="any" id="x2_fpp_1" /></td></tr>
<tr><td>2</td><td><input type="number" step="any" id="x2_f_2" /></td><td><input type="number" step="any" id="x2_fp_2" /></td><td><input type="number" step="any" id="x2_fpp_2" /></td></tr>
</table>
<button onclick="checkBlock('x2')">Check f(x)=x² table</button>
<div id="x2_msg" class="small"></div>
<h2 style="margin-top:1.2rem;">2) f(x) = −x²</h2>
<p><b>f′(x) =</b> <input type="text" id="d3" placeholder="" style="max-width:220px;"></p>
<p><b>f″(x) =</b> <input type="text" id="d4" placeholder="" style="max-width:220px;"></p>
<table class="gridtable">
<tr><th>x</th><th>f</th><th>f′</th><th>f″</th></tr>
<tr><td>-2</td><td><input type="number" step="any" id="nx2_f_-2" /></td><td><input type="number" step="any" id="nx2_fp_-2" /></td><td><input type="number" step="any" id="nx2_fpp_-2" /></td></tr>
<tr><td>-1</td><td><input type="number" step="any" id="nx2_f_-1" /></td><td><input type="number" step="any" id="nx2_fp_-1" /></td><td><input type="number" step="any" id="nx2_fpp_-1" /></td></tr>
<tr><td>0</td><td><input type="number" step="any" id="nx2_f_0" /></td><td><input type="number" step="any" id="nx2_fp_0" /></td><td><input type="number" step="any" id="nx2_fpp_0" /></td></tr>
<tr><td>1</td><td><input type="number" step="any" id="nx2_f_1" /></td><td><input type="number" step="any" id="nx2_fp_1" /></td><td><input type="number" step="any" id="nx2_fpp_1" /></td></tr>
<tr><td>2</td><td><input type="number" step="any" id="nx2_f_2" /></td><td><input type="number" step="any" id="nx2_fp_2" /></td><td><input type="number" step="any" id="nx2_fpp_2" /></td></tr>
</table>
<button onclick="checkBlock('nx2')">Check f(x)=−x² table</button>
<div id="nx2_msg" class="small"></div>
<h2 style="margin-top:1.2rem;">3) f(x) = x³</h2>
<p><b>f′(x) =</b> <input type="text" id="d5" placeholder="" style="max-width:220px;"></p>
<p><b>f″(x) =</b> <input type="text" id="d6" placeholder="" style="max-width:220px;"></p>
<table class="gridtable">
<tr><th>x</th><th>f</th><th>f′</th><th>f″</th></tr>
<tr><td>-2</td><td><input type="number" step="any" id="x3_f_-2" /></td><td><input type="number" step="any" id="x3_fp_-2" /></td><td><input type="number" step="any" id="x3_fpp_-2" /></td></tr>
<tr><td>-1</td><td><input type="number" step="any" id="x3_f_-1" /></td><td><input type="number" step="any" id="x3_fp_-1" /></td><td><input type="number" step="any" id="x3_fpp_-1" /></td></tr>
<tr><td>0</td><td><input type="number" step="any" id="x3_f_0" /></td><td><input type="number" step="any" id="x3_fp_0" /></td><td><input type="number" step="any" id="x3_fpp_0" /></td></tr>
<tr><td>1</td><td><input type="number" step="any" id="x3_f_1" /></td><td><input type="number" step="any" id="x3_fp_1" /></td><td><input type="number" step="any" id="x3_fpp_1" /></td></tr>
<tr><td>2</td><td><input type="number" step="any" id="x3_f_2" /></td><td><input type="number" step="any" id="x3_fp_2" /></td><td><input type="number" step="any" id="x3_fpp_2" /></td></tr>
</table>
<button onclick="checkBlock('x3')">Check f(x)=x³ table</button>
<div id="x3_msg" class="small"></div>
<h2 style="margin-top:1.2rem;">4) f(x) = −x³</h2>
<p><b>f′(x) =</b> <input type="text" id="d7" placeholder="" style="max-width:220px;"></p>
<p><b>f″(x) =</b> <input type="text" id="d8" placeholder="" style="max-width:220px;"></p>
<table class="gridtable">
<tr><th>x</th><th>f</th><th>f′</th><th>f″</th></tr>
<tr><td>-2</td><td><input type="number" step="any" id="nx3_f_-2" /></td><td><input type="number" step="any" id="nx3_fp_-2" /></td><td><input type="number" step="any" id="nx3_fpp_-2" /></td></tr>
<tr><td>-1</td><td><input type="number" step="any" id="nx3_f_-1" /></td><td><input type="number" step="any" id="nx3_fp_-1" /></td><td><input type="number" step="any" id="nx3_fpp_-1" /></td></tr>
<tr><td>0</td><td><input type="number" step="any" id="nx3_f_0" /></td><td><input type="number" step="any" id="nx3_fp_0" /></td><td><input type="number" step="any" id="nx3_fpp_0" /></td></tr>
<tr><td>1</td><td><input type="number" step="any" id="nx3_f_1" /></td><td><input type="number" step="any" id="nx3_fp_1" /></td><td><input type="number" step="any" id="nx3_fpp_1" /></td></tr>
<tr><td>2</td><td><input type="number" step="any" id="nx3_f_2" /></td><td><input type="number" step="any" id="nx3_fp_2" /></td><td><input type="number" step="any" id="nx3_fpp_2" /></td></tr>
</table>
<button onclick="checkBlock('nx3')">Check f(x)=−x³ table</button>
<div id="nx3_msg" class="small"></div>
<div class="callout" style="margin-top:1rem;">
<b>Finish:</b> Use your tables to complete these statements:
<ul>
<li>For <code>x²</code>, we have a <input type="text" id="fin_x2_kind" style="max-width:140px;"> at (0,0) because <code>f′(0)=</code> <input type="number" step="any" id="fin_x2_fp0" style="max-width:80px;"> and <code>f″(0)</code> is <input type="text" id="fin_x2_fppsign" style="max-width:140px;">.</li>
<li>For <code>−x²</code>, we have a <input type="text" id="fin_nx2_kind" style="max-width:140px;"> at (0,0) because <code>f′(0)=</code> <input type="number" step="any" id="fin_nx2_fp0" style="max-width:80px;"> and <code>f″(0)</code> is <input type="text" id="fin_nx2_fppsign" style="max-width:140px;">.</li>
<li>For <code>x³</code>, we have an <input type="text" id="fin_x3_kind" style="max-width:180px;"> at (0,0) because <code>f″(0)=</code> <input type="number" step="any" id="fin_x3_fpp0" style="max-width:80px;"> and the concavity changes.</li>
<li>For <code>−x³</code>, we have an <input type="text" id="fin_nx3_kind" style="max-width:180px;"> at (0,0) because <code>f″(0)=</code> <input type="number" step="any" id="fin_nx3_fpp0" style="max-width:80px;"> and the concavity changes.</li>
</ul>
</div>
</div>
<div class="right-col">
<div class="chart-sticky">
<div class="charts-stack">
<img src="images/adventure_13_activity1_graphs.png" alt="Graphs for x^2, -x^2, x^3, -x^3">
</div>
</div>
</div>
</div>
<div class="card" style="margin-top:1rem;">
<h2>✅ Check Your Work</h2>
<p class="small">Use sample values to fill the whole activity, or check all four tables at once.</p>
<div class="buttons-row">
<button id="sampleBtn" type="button" onclick="useSampleValues()">Use Sample Values</button>
<button id="checkBtn" type="button" onclick="checkAllAnswers()">✅ Check My Answers</button>
</div>
<div id="all_msg" class="small" style="margin-top:0.6rem;"></div>
</div>
<div class="footer">Dr. Super & Spark — Powered by ChatGPT</div>
</div>
<script>
const XS = [-2,-1,0,1,2];
// Expected tables
const TABLES = {
x2: { f:[4, 1, 0, 1, 4], fp:[-4, -2, 0, 2, 4], fpp:[2, 2, 2, 2, 2] },
nx2: { f:[-4, -1, 0, -1, -4], fp:[4, 2, 0, -2, -4], fpp:[-2, -2, -2, -2, -2] },
x3: { f:[-8, -1, 0, 1, 8], fp:[12, 3, 0, 3, 12], fpp:[-12, -6, 0, 6, 12] },
nx3: { f:[8, 1, 0, -1, -8], fp:[-12, -3, 0, -3, -12], fpp:[12, 6, 0, -6, -12] },
};
function getNumber(id){
const el = document.getElementById(id);
if(!el) return null;
const v = (el.value||"").trim();
if(v==="") return null;
const n = Number(v);
return Number.isFinite(n) ? n : null;
}
function mark(el, ok){
el.style.borderColor = ok ? "#2e7d32" : "#b00020";
el.style.background = ok ? "#eef8ef" : "#fff2f2";
}
function checkBlock(prefix){
const spec = TABLES[prefix];
let good=0, total=0, missing=0;
for(let i=0;i<XS.length;i++){
const x = XS[i];
for(const col of ["f","fp","fpp"]){
total++;
const id = `${prefix}_${col}_${x}`;
const el = document.getElementById(id);
const got = getNumber(id);
const want = spec[col][i];
if(got===null){ missing++; mark(el,false); continue; }
const ok = Math.abs(got - want) < 1e-9;
mark(el, ok);
if(ok) good++;
}
}
const msg = document.getElementById(prefix+"_msg");
if(missing>0){
msg.textContent = `Checked: ${good}/${total} correct. (You left ${missing} blank.)`;
} else {
msg.textContent = `Checked: ${good}/${total} correct.`;
}
}
const DERIVATIVES = {
d1: "2x", d2: "2",
d3: "-2x", d4: "-2",
d5: "3x²", d6: "6x",
d7: "-3x²", d8: "-6x"
};
const FINISH = {
fin_x2_kind: "minimum",
fin_x2_fp0: 0,
fin_x2_fppsign: "positive",
fin_nx2_kind: "maximum",
fin_nx2_fp0: 0,
fin_nx2_fppsign: "negative",
fin_x3_kind: "inflection point",
fin_x3_fpp0: 0,
fin_nx3_kind: "inflection point",
fin_nx3_fpp0: 0
};
function normalizeExpr(s){
return String(s || "")
.toLowerCase()
.replace(/\s+/g, "")
.replace(/−/g, "-")
.replace(/\*/g, "")
.replace(/\^2/g, "²");
}
function exprOK(got, want){
const g = normalizeExpr(got);
const w = normalizeExpr(want);
const aliases = {
"2x": ["2x"],
"2": ["2"],
"-2x": ["-2x"],
"-2": ["-2"],
"3x²": ["3x²", "3xx"],
"6x": ["6x"],
"-3x²": ["-3x²", "-3xx"],
"-6x": ["-6x"]
};
return (aliases[want] || [w]).includes(g);
}
function setVal(id, value){
const el = document.getElementById(id);
if(el){
el.value = value;
el.classList.remove("correct", "incorrect");
el.style.borderColor = "";
el.style.background = "";
}
}
function clearMsgs(){
for(const id of ["x2_msg", "nx2_msg", "x3_msg", "nx3_msg", "all_msg"]){
const el = document.getElementById(id);
if(el) el.textContent = "";
}
}
function useSampleValues(){
for(const [id, value] of Object.entries(DERIVATIVES)) setVal(id, value);
for(const [prefix, spec] of Object.entries(TABLES)){
for(let i=0; i<XS.length; i++){
const x = XS[i];
for(const col of ["f", "fp", "fpp"]){
setVal(`${prefix}_${col}_${x}`, spec[col][i]);
}
}
}
for(const [id, value] of Object.entries(FINISH)) setVal(id, value);
clearMsgs();
const btn = document.getElementById("sampleBtn");
if(btn) btn.classList.add("sampled");
const msg = document.getElementById("all_msg");
if(msg) msg.textContent = "Sample values filled in. Now press Check My Answers if you want to verify them.";
}
function checkDerivatives(){
let good = 0, total = 0;
for(const [id, want] of Object.entries(DERIVATIVES)){
total++;
const el = document.getElementById(id);
const pass = el && exprOK(el.value, want);
if(el) mark(el, pass);
if(pass) good++;
}
return {good, total};
}
function textOK(got, want){
const g = normalizeExpr(got).replace(/point/g, "point");
const w = normalizeExpr(want);
if(w === "inflectionpoint") return g === "inflectionpoint" || g === "inflection";
return g === w;
}
function checkFinish(){
let good = 0, total = 0;
for(const [id, want] of Object.entries(FINISH)){
total++;
const el = document.getElementById(id);
if(!el) continue;
let pass;
if(typeof want === "number"){
const got = getNumber(id);
pass = got !== null && Math.abs(got - want) < 1e-9;
} else {
pass = textOK(el.value, want);
}
mark(el, pass);
if(pass) good++;
}
return {good, total};
}
function checkAllAnswers(){
let total = 0, good = 0;
const d = checkDerivatives();
total += d.total; good += d.good;
for(const prefix of Object.keys(TABLES)){
const spec = TABLES[prefix];
for(let i=0;i<XS.length;i++){
const x = XS[i];
for(const col of ["f","fp","fpp"]){
total++;
const id = `${prefix}_${col}_${x}`;
const el = document.getElementById(id);
const got = getNumber(id);
const want = spec[col][i];
const pass = got !== null && Math.abs(got - want) < 1e-9;
if(el) mark(el, pass);
if(pass) good++;
}
}
}
const f = checkFinish();
total += f.total; good += f.good;
const btn = document.getElementById("checkBtn");
if(btn) btn.classList.add("checked");
const msg = document.getElementById("all_msg");
if(msg) msg.textContent = `Checked: ${good}/${total} correct.`;
}
</script>
<script src="images/calc-popup.js"></script>
</body>
</html>