|
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" />
<title>Adventure 8 — Activity 1: Derivatives & Antiderivatives</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;
}
.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: 1fr;
gap: 2rem;
align-items: start;
clear: both;
}
.right-col { text-align: center; }
.right-col img {
width: 115%; /* expanded another 20% */
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 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{display:none !important;}
</style>
</head>
<body>
<div class="page wide-page">
<<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_1_solution.html"><button style="font-size:16px; padding:12px 16px;">📝 Solutions</button></a>
</div>
<header>
<h1>Adventure 8 — Activity 1: Derivatives & Antiderivatives</h1>
<div class="subtitle">Power rule, antiderivatives, and the chain/product rules.</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>Part A — Power Rule (Derivatives)</h2>
<div class="card">
<div class="row-grid">
<div><b>1) d/dx (7.8) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="d_const" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>2) d/dx ((13/2)x^2) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="d_quad" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>3) d/dx ((1/2)·g·x^2), with g=10 =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="d_g" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>4) d/dx (4x^2 − (1/3)x^3) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="d_poly" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>5) d/dx (a·x), where a is a constant =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="d_ax" placeholder="Type here…" /></div>
</div>
</div>
<h2>Part B — Antiderivatives (Integrals)</h2>
<div class="card">
<div class="row-grid">
<div><b>6) ∫ 10 dx =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="a_10" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>7) ∫ 13 dx =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="a_13" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>8) ∫ 10x dx =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="a_10x" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>9) ∫ 13x dx =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="a_13x" placeholder="Type here…" /></div>
</div>
</div>
<h2>Part C — Sum / Product / Chain Rule (Derivatives)</h2>
<div class="card">
<div class="row-grid">
<div><b>10) d/dx (x^2 + x^3) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="d_sum" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>11) d/dx (sin(x^2)) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="d_chain" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>12) d/dx (sin(x)·e^x) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="d_prod" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>13) d/dx (e^(−x^2)) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="d_exp" placeholder="Type here…" /></div>
</div>
</div>
<div class="card">
<div class="row-grid">
<div><b>14) d/dx (x ln x) =</b></div>
<div style="display:flex; gap:10px; align-items:center;">
<input id="d_ln" placeholder="Type here…" /></div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
Created by Dr. Super and Spark — Powered by ChatGPT
</div>
</div>
<script>
const ANSWERS = {
"d_const": [
"0",
"0.0"
],
"d_quad": [
"13x",
"13*x"
],
"d_g": [
"10x",
"10*x"
],
"d_poly": [
"8x-x^2",
"8x-x**2",
"8x-x2",
"8*x-x^2",
"8*x-x**2"
],
"d_ax": [
"a",
"a*1",
"a "
],
"a_10": [
"10x",
"10*x",
"+10x"
],
"a_13": [
"13x",
"13*x"
],
"a_10x": [
"5x^2",
"5x**2",
"5x2"
],
"a_13x": [
"(13/2)x^2",
"13/2x^2",
"6.5x^2",
"6.5x**2",
"6.5x2"
],
"d_sum": [
"2x+3x^2",
"2x+3x**2",
"2x+3x2"
],
"d_chain": [
"2xcos(x^2)",
"2x*cos(x^2)",
"2xcos(x**2)",
"2x*cos(x**2)"
],
"d_prod": [
"(cosx+sinx)e^x",
"(cosx+sinx)ex",
"(cos(x)+sin(x))e^x",
"(cos(x)+sin(x))*e^x",
"(cos(x)+sin(x))ex"
],
"d_exp": [
"-2xe^-x^2",
"-2x e^-x^2",
"-2x*e^-x^2",
"-2x e^(-x^2)",
"-2x*e^(-x^2)",
"-2xe^(-x^2)"
],
"d_ln": [
"lnx+1",
"ln(x)+1",
"ln(x)+1.0",
"lnx+1.0"
]
};
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 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 = {
d_const: "0",
d_quad: "13x",
d_g: "10x",
d_poly: "8x - x^2",
d_ax: "a",
a_10: "10x",
a_13: "13x",
a_10x: "5x^2",
a_13x: "(13/2)x^2",
d_sum: "2x + 3x^2",
d_chain: "2x cos(x^2)",
d_prod: "(cos(x) + sin(x))e^x",
d_exp: "-2x e^(-x^2)",
d_ln: "ln(x) + 1"
};
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>
</body>
</html>