|
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>Adventure 9 — Activity</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; 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; }
.callout { background:#f3f6ff; border-radius:10px; border:1px solid #dde3ff; padding:0.9rem 1rem; font-size:0.98rem; margin:1rem 0; }
code { background:#fff; border:1px solid #d9def5; padding:2px 6px; border-radius:8px; }
.chart-float { float:right; width:min(44vw, 520px); max-width:520px; margin:0.2rem 0 1.2rem 1.6rem; position:sticky; top:1rem; text-align:center; }
.chart-float img { width:120%; height:auto; border-radius:12px; border:1px solid #dde3ff; display:inline-block; background:#fff; }
.clearfix::after { content:""; display:block; clear:both; }
input[type="text"], input[type="number"]{ width:100%; max-width:360px; 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:720px; 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; clear:both; }
.footer{ margin-top:2.2rem; font-size:0.9rem; color:#777; text-align:left; border-top:1px solid #eee; padding-top:0.8rem; clear:both; }
.reader{ border:1px solid #dde3ff; border-radius:12px; padding:0.9rem 1rem; background:#f6f7ff; margin:1rem 0 1.2rem; clear:both; }
.reader-controls{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-bottom:0.7rem; font-size:0.95rem; }
.reader textarea{ width:100%; box-sizing:border-box; border-radius:10px; border:1px solid #c3cade; padding:10px; font-size:0.95rem; line-height:1.45; background:#fff; white-space:pre-wrap; }
.reader-buttons{ display:flex; flex-wrap:wrap; gap:10px; margin-top:0.7rem; }
.reader-buttons button{ border:1px solid #c3cade; background:#fff; color:#243152; }
.reader-buttons button:hover{ background:#f3f6ff; }
.hintline{ font-size:0.9rem; color:#666; margin:0.3rem 0 0; }
@media (max-width:900px){
.row-grid{ grid-template-columns:1fr; }
.chart-float{ float:none; width:100%; max-width:none; margin:0 0 1rem 0; position:static; }
.chart-float img{ width:100%; }
}
/* SS4-style mini callouts that point back to the main chart */
.lookback {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.9rem;
color: #4a5bdc;
background: #f3f6ff;
border: 1px solid #dde3ff;
border-radius: 999px;
padding: 0.25rem 0.7rem;
margin: 0.4rem 0 0.2rem;
}
.dot {
display: inline-block;
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
margin-right: 0.25rem;
vertical-align: middle;
}
.dot.green { background: #1f9d55; } /* Lead / Uranium */
.dot.red { background: #e02424; } /* v(t) decay speed */
.dot.orange{ background: #f59e0b; } /* a(t) / second derivative */
/* content shift */
.content-shift p,
.content-shift .row-grid {
margin-left: 1cm;
}
</style>
</head>
<body>
<div class="page">
<div class="buttons" style="display:flex; flex-wrap:wrap; gap:12px; margin-bottom:0.8rem;">
<a href="index.html"><button>🧭 Hub</button></a>
<a href="adventure_9_home.html"><button>🏠 Home</button></a>
<a href="adventure_9_solution.html"><button>✅ Solutions</button></a>
<a href="adventure_9_charts.pdf" target="_blank" rel="noopener"><button class="secondary">📈 Charts PDF</button></a>
</div>
<h1>✏️ Adventure 9 — Activity</h1>
<div class="subtitle">Exponential Decay & the Age of the Earth — Using U‑235, half‑life, and the DiVA chart.</div>
<div class="card"><p class="subtitle" style="margin:0;">
Use the chart to estimate values (close estimates are fine). Units: <b>t</b> in billions of years, mass in grams.
</p>
</div>
</div>
<div class="card" style="margin-top:1.2rem;">
<div style="text-align:center;">
<img
src="images/adventure_9_chart.png"
alt="Exponential Decay of U-235 — DiVA Charts"
style="
width: 60%;
max-width: 680px;
height: auto;
border-radius: 14px;
border: 1px solid #dde3ff;
background: #fff;
"
>
<div style="font-size:0.95rem; color:#666; margin-top:0.4rem;">
Exponential Decay of U-235 — DiVA Charts (L, M, v, a)
</div>
</div>
</div>
<div class="content-shift">
<h2>🧩 Part 1 — The magic derivative</h2>
<div class="lookback">
<span class="dot green"></span><span class="dot red"></span><span class="dot orange"></span>
Look back at the chart above
</div>
<p>We start with the exponential because it keeps its shape when you differentiate.</p>
<div class="row-grid">
<div>
<label for="dexp"><b>1A)</b> Derivative: d/dx of <code>e^x</code> =</label>
<input id="dexp" type="text" placeholder="Type your answer">
</div>
<div>
<label for="dchain"><b>1B)</b> Chain rule: d/dx of <code>e^{g(x)}</code> =</label>
<input id="dchain" type="text" placeholder="Type your answer">
</div>
</div>
<h2>🧱 Part 2 — Find the decay constant from half‑life</h2>
<p>Decay Model<code>M(t)=M(0)e^{-kt} </code><code>M(t)/M(0)=e^{-kt}</code><code>ln(M(T)/M(0)=-kT</code>. U‑235 half‑life is about <b>T=0.704</b> billion years. This is when <code>M(T)/M(0)=1/2</code>.</p>
<div class="row-grid">
<div>
<label for="kexpr"><b>2A)</b> Solve for <code>k</code> from the half‑life condition: <code>k=</code></label>
<input id="kexpr" type="text" placeholder="Expression for k (in terms of T)">
</div>
<div>
<label for="kval"><b>2B)</b> Numerical value (approx): <code>k ≈</code></label>
<input id="kval" type="number" step="0.0001" placeholder="e.g., 0.9846">
</div>
</div>
<h2>📊 Part 3 — Half‑life table (powers of 2)</h2>
<p>Start with <b>1024 g</b>. Each half‑life cuts the remaining mass in half.</p>
<div class="row-grid">
<div><label for="hl1"><b>After 1 half‑life:</b> grams left</label><input id="hl1" type="number" step="1"></div>
<div><label for="hl2"><b>After 2 half‑lives:</b> grams left</label><input id="hl2" type="number" step="1"></div>
<div><label for="hl3"><b>After 3 half‑lives:</b> grams left</label><input id="hl3" type="number" step="1"></div>
<div><label for="hl4"><b>After 4 half‑lives:</b> grams left</label><input id="hl4" type="number" step="1"></div>
<div><label for="hl5"><b>After 5 half‑lives:</b> grams left</label><input id="hl5" type="number" step="1"></div>
<div><label for="hl6"><b>After 6 half‑lives:</b> grams left</label><input id="hl6" type="number" step="1"></div>
<div><label for="hl7"><b>After 7 half‑lives:</b> grams left</label><input id="hl7" type="number" step="1"></div>
</div>
<h2>📊 Part 4 — Estimate the Age of Earth </h2>2>
<p><b>Starting with a sample of <b>1024 g</b> of pure U‑235, Clair Patterson found that only 11 g of Uranium remained.</p>
<div class="row-grid">
<div><label for="agehl">Estimate the number of half-lives and multiply by 0.704 (billion years)</label><input id="agehl" type="number" step="0.01"> <b> billion years</b></div>
</div>
<h2>🧮 Part 5 — Read the DiVA chart</h2>
<div class="lookback">
<span class="dot green"></span><span class="dot red"></span>
Use the DiVA curves above (mass and decay speed)
</div>
<p>Use the <b>green curves</b> for Lead <code>L(t)</code> (solid) and Uranium <code>M(t)</code> (dashed). Use the <b>red curve</b> for <code>v(t)</code>.</p>
<div class="row-grid">
<div><label for="L1"><b>4A)</b> Estimate <code>L(1)</code> (grams)</label><input id="L1" type="number" step="1"></div>
<div><label for="L2"><b>4B)</b> Estimate <code>L(2)</code> (grams)</label><input id="L2" type="number" step="1"></div>
<div><label for="v05"><b>4C)</b> Estimate <code>v(0.5)</code> (g / billion years)</label><input id="v05" type="number" step="1"></div>
<div><label for="v2"><b>4D)</b> Estimate <code>v(2)</code> (g / billion years)</label><input id="v2" type="number" step="1"></div>
</div>
<h2>🧠 Part 6 — One integral (concept)</h2>
<div class="lookback">
<span class="dot red"></span>
Think about the shaded area under v(t) above
</div>
<p>The area under <code>v(t)</code> from 0 to 1 is the total mass that has changed into lead by time 1.</p>
<div class="row-grid">
<div><label for="intloss"><b>5A)</b> Explain: <code>∫₀¹ v(t) dt</code> equals…</label><input id="intloss" type="text" placeholder="What does this area represent?"></div>
<div><label for="M1"><b>5B)</b> Estimate <code>M(1)</code> Uranium remaining from chart (grams)</label><input id="M1" type="number" step="1"></div>
</div>
</div>
<div class="page">
<div class="buttons" style="display:flex; flex-wrap:wrap; gap:12px; margin-bottom:0.8rem;">
<button type="button" onclick="checkAnswers()">✅ Check my answers</button>
<button type="button" class="secondary" onclick="fillSample()">Use sample values</button>
<button type="button" class="secondary" onclick="toggleHint()">💡 Show / hide hint</button>
<button type="button" class="secondary" onclick="toggleSolution()">📄 Show / hide solution</button>
</div>
</div>
<div id="hintBox" class="hint">
<ul style="margin:0.2rem 0 0.2rem 1.2rem;">
<li>Half‑life table is just dividing by 2 each step.</li>
<li><code>L(t)=1024 − M(t)</code>. If you read one, you can get the other.</li>
<li>On the chart, values are estimates — within ~5–10% is fine.</li>
</ul>
</div>
<div id="solutionBox" class="solution">
<strong>Sample answers (for checking)</strong>
<ul>
<li>d/dx of <code>e^x</code> is <code>e^x</code>, and d/dx of <code>e^{g(x)}</code> is <code>g'(x)e^{g(x)}</code>.</li>
<li><code>k = ln(2)/T</code>; for <code>T=0.704</code>, <code>k≈0.985</code>.</li>
<li>Half‑life table: 512, 256, 128, 64, 32, 16, 8; age ≈ 4.58.</li>
<li>From chart (example): <code>L(1)≈644</code>, <code>L(2)≈884</code>.</li>
</ul>
</div>
<div class="footer">Dr. Super & Spark — Powered by ChatGPT</div>
<script>
function $(id){ return document.getElementById(id); }
const ANSWERS = {
kval: 0.9846,
hl1: 512, hl2: 256, hl3: 128, hl4: 64, hl5: 32, hl6: 16, hl7: 8,
agehl: 4.58,
L1: 644, L2: 884,
M1: 380
};
function clearStates(){
["dexp","dchain","kexpr","kval","hl1","hl2","hl3","hl4","hl5","hl6","hl7","agehl","L1","L2","v05","v2","intloss","M1"].forEach(id => {
const el = $(id);
if(!el) return;
el.classList.remove("correct");
el.classList.remove("incorrect");
});
}
function mark(el, ok){ if(el) el.classList.add(ok ? "correct" : "incorrect"); }
function near(val, target, tol){ return Math.abs(val - target) <= tol; }
function checkAnswers(){
clearStates();
const dexp = $("dexp");
if(dexp && dexp.value.trim()){
const v = dexp.value.trim().replaceAll(" ","").toLowerCase();
mark(dexp, (v === "e^x" || v === "exp(x)" || v === "eˣ"));
}
const dchain = $("dchain");
if(dchain && dchain.value.trim()){
const v = dchain.value.toLowerCase().replaceAll(" ","");
const ok = v.includes("g'(x)") && (v.includes("e^{g(x)}") || v.includes("e^(g(x))") || v.includes("exp(g(x))") || v.includes("e^g(x)"));
mark(dchain, ok);
}
const kexpr = $("kexpr");
if(kexpr && kexpr.value.trim()){
const v = kexpr.value.toLowerCase().replaceAll(" ","");
mark(kexpr, v.includes("ln(2)/") || v.includes("ln2/"));
}
const kval = $("kval");
if(kval && kval.value) mark(kval, near(parseFloat(kval.value), ANSWERS.kval, 0.03));
["hl1","hl2","hl3","hl4","hl5","hl6","hl7"].forEach(id => {
const el = $(id);
if(el && el.value) mark(el, near(parseFloat(el.value), ANSWERS[id], 0.1));
});
const agehl = $("agehl");
if(agehl && agehl.value) mark(agehl, near(parseFloat(agehl.value), ANSWERS.agehl, 0.15));
const L1 = $("L1"); if(L1 && L1.value) mark(L1, near(parseFloat(L1.value), ANSWERS.L1, 80));
const L2 = $("L2"); if(L2 && L2.value) mark(L2, near(parseFloat(L2.value), ANSWERS.L2, 80));
const M1 = $("M1"); if(M1 && M1.value) mark(M1, near(parseFloat(M1.value), ANSWERS.M1, 80));
["v05","v2","intloss"].forEach(id => {
const el = $(id);
if(!el) return;
if(el.value.trim()) el.classList.add("correct");
});
}
function fillSample(){
$("dexp").value = "e^x";
$("dchain").value = "g'(x) e^{g(x)}";
$("kexpr").value = "ln(2) / T";
$("kval").value = "0.9846";
$("hl1").value = "512";
$("hl2").value = "256";
$("hl3").value = "128";
$("hl4").value = "64";
$("hl5").value = "32";
$("hl6").value = "16";
$("hl7").value = "8";
$("agehl").value = "4.58";
$("L1").value = "644";
$("L2").value = "884";
$("v05").value = "620";
$("v2").value = "140";
$("intloss").value = "L(1) = 644";
$("M1").value = "380";
clearStates();
}
function toggleHint(){
const box = $("hintBox");
box.style.display = (box.style.display === "none" || box.style.display === "") ? "block" : "none";
}
function toggleSolution(){
const box = $("solutionBox");
box.style.display = (box.style.display === "none" || box.style.display === "") ? "block" : "none";
}
</script>
</div>
<script src="images/calc-popup.js"></script>
</body>
</html>