|
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 — Measure the World</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: #eef2ff;
color: #222;
}
.page {
width: 100%;
box-sizing: border-box;
padding: 1.5rem 5vw 2.5rem;
background: #ffffff;
}
a {
color: #1f4ed8;
text-decoration: none;
font-size: 0.9rem;
}
a:hover { text-decoration: underline; }
.hero-right {
float: right;
width: 50%;
max-width: 700px;
margin-left: 1.5rem;
margin-bottom: 1rem;
text-align: center;
}
.hero-right img {
width: 100%;
height: auto;
border-radius: 10px;
}
h1 {
margin-top: 0.4rem;
font-size: 1.8rem;
}
h2 {
margin-top: 1.3rem;
margin-bottom: 0.4rem;
font-size: 1.3rem;
}
p {
margin: 0.3rem 0 0.6rem;
line-height: 1.5;
}
ul {
padding-left: 1.2rem;
margin: 0.2rem 0 0.6rem;
}
li { margin: 0.25rem 0; }
label {
display: block;
margin-top: 0.4rem;
font-size: 0.95rem;
}
input[type="number"] {
width: 100%;
max-width: 260px;
padding: 0.3rem 0.4rem;
font-size: 0.95rem;
border-radius: 6px;
border: 1px solid #c3cade;
margin-top: 0.2rem;
box-sizing: border-box;
}
.row-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.2rem 2rem;
margin-top: 0.5rem;
clear: both;
}
.buttons-row {
margin-top: 0.9rem;
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
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;
}
button.secondary {
background: #e4e8fb;
color: #243152;
}
button:active { transform: translateY(1px); }
.correct {
background-color: #e4f9e7 !important;
border-color: #2e9a48 !important;
}
.incorrect {
background-color: #fde3e3 !important;
border-color: #cc3d3d !important;
}
.hint, .solution {
margin-top: 0.7rem;
padding: 0.7rem 0.8rem;
border-radius: 8px;
border: 1px solid #dde3ff;
background: #f6f7ff;
font-size: 0.9rem;
display: none;
}
code {
background: #f1f1f1;
padding: 0.05rem 0.25rem;
border-radius: 3px;
font-size: 0.9em;
}
@media (max-width: 800px) {
.hero-right {
float: none;
width: 100%;
margin-left: 0;
}
.row-grid {
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 style="display:flex; flex-wrap:wrap; gap:12px;">
<a href="index.html"><button>🧭 Hub</button></a>
<a href="adventure_1_home.html"><button>🏠 Home</button></a>
<a href="adventure_1_activity_1_solution.html" target="_blank"><button>🖼️ Solution</button></a>
</div>
</div>
<h1>Measure the World — Student Activity</h1>
<div class="hero-right">
<img src="images/adventure_1_image_1_student.png"
alt="Measure the World activity illustration with θ, D, and C">
</div>
<p>
Long before satellites and laser measuring tools, no one knew how big the Earth was. People guessed,
argued, and made wildly different claims. Some thought the planet was enormous; others believed it was
much smaller. What they all agreed on was this: the Earth was far too large to measure directly.
</p>
<p>
Then came Eratosthenes. He lived more than two thousand years ago and worked in the Great Library of
Alexandria — a place filled with scrolls, scholars, and a great deal of sunshine. He heard something
curious: in a southern city called Syene, the Sun shone straight down a well on the summer solstice.
At the very same moment in Alexandria, a vertical stick cast a small shadow.
</p>
<p>
This tiny difference — the angle of a single shadow — was the clue. Eratosthenes realized he could
“slice” the Earth using shadows the same way we slice area under a line: by taking a simple local
measurement and using it to understand something much bigger.
</p>
<p>
In this activity, you will follow the same idea. You start from the angle θ and the distance D between
the two cities, compute the ratio R = C / D, and then work your way to Earth’s circumference in meters
and kilometers. Finally, you compare your estimate with a present-day value and see how close you came.
The angle θ is the fraction of the full circle between the two cities. The ratio R = C / D tells you
how many times that distance D fits around the full Earth. From the geometry of the circle, you can use
the relationship R = 360° / θ.
</p>
<h2>1️⃣ Given angle and distance</h2>
<p>
Use the diagram to read the value of θ (in degrees). In Eratosthenes’ classic experiment, θ ≈ 7.2°.
The distance between Syene and Alexandria along the surface is D meters.
</p>
<div class="row-grid">
<div>
<label for="D_m">Distance between Syene and Alexandria D (meters):</label>
<input id="D_m" type="number" step="1">
</div>
</div>
<h2>2️⃣ Ratio R = Earth’s circumference / D</h2>
<p>
Now use the idea above to compute the ratio R. Remember, R tells you how many times the distance D fits
around the entire Earth.
</p>
<p style="margin-left:0.7rem;">
<strong>R = 360° / θ</strong>
</p>
<div class="row-grid">
<div>
<label for="R_ratio">Compute R = 360 ÷ θ :</label>
<div style="font-size:0.8rem;color:#666;margin-top:0.2rem;"><em>(because θ tells you what fraction of the 360° circle separates the two cities)</em></div>
<input id="R_ratio" type="number" step="0.01">
</div>
</div>
<h2>3️⃣ Earth’s circumference in meters and kilometers</h2>
<p>
Once you know D (in meters) and R, you can find the Earth’s circumference in meters using:
</p>
<p style="margin-left:0.7rem;">
<strong>Circumference in meters = R × D</strong>
</p>
<p>
Then convert to kilometers by dividing by 1000:
</p>
<p style="margin-left:0.7rem;">
<strong>Circumference in kilometers = (circumference in meters) ÷ 1000</strong>
</p>
<div class="row-grid">
<div>
<label for="C_m">Your estimate of Earth’s circumference (meters):</label>
<input id="C_m" type="number" step="1">
</div>
<div>
<label for="C_km">Your estimate of Earth’s circumference (kilometers):</label>
<input id="C_km" type="number" step="0.1">
</div>
</div>
<h2>4️⃣ Compare with a present-day value</h2>
<p>
A commonly used present-day value for Earth’s circumference is about
<strong>40,075 kilometers</strong>.
</p>
<p>
First, compute the <em>difference</em> between the present-day value and your estimate:
</p>
<p style="margin-left:0.7rem;">
<strong>difference = present-day value − your estimate</strong>
</p>
<p>
Then use this difference to find the <em>percent error</em> of your estimate:
</p>
<p style="margin-left:0.7rem;">
<strong>percent error = (difference ÷ present-day value) × 100%</strong>
</p>
<div class="row-grid">
<div>
<label for="abs_err">Difference (present value − your estimate) in km:</label>
<input id="abs_err" type="number" step="0.1">
</div>
<div>
<label for="pct_err">Percent error (%):</label>
<input id="pct_err" type="number" step="0.01">
</div>
</div>
<div class="buttons-row">
<button id="sampleBtn" type="button" onclick="playSoftClick(); useSample();">✏️ Sample Values</button>
<button id="checkBtn" type="button" onclick="playSoftClick(); checkAnswers();">✅ Check My Answers</button>
<button type="button" class="secondary" onclick="toggleHint()">💡 Show / hide hint</button>
<button type="button" class="secondary" onclick="toggleSolution()">📄 Show / hide sample solution</button>
</div>
<div id="hintBox" class="hint">
First find the difference between the present-day value (40,075 km) and your estimate. Then divide this
difference by 40,075 and multiply by 100 to get the percent error of your estimate.
</div>
<div id="solutionBox" class="solution" style="display:none;">
<strong>Sample solution (Eratosthenes-style values)</strong>
<p>
Suppose θ = 7.2° and D = 800,000 m (which is 800 km).
</p>
<p>
1. R = 360 ÷ 7.2 = 50. So the Earth is about 50 times the distance between Syene and Alexandria.
</p>
<p>
2. Circumference in meters = 50 × 800,000 = 40,000,000 meters.
</p>
<p>
3. Circumference in kilometers = 40,000,000 ÷ 1000 = 40,000 km.
</p>
<p>
4. Difference = present-day value − your estimate = 40,075 − 40,000 = 75 km.
</p>
<p>
5. Percent error = (difference ÷ present-day value) × 100% = 75 ÷ 40,075 × 100% ≈ 0.19%.
</p>
</div>
</div>
<script>
const THETA_DEG = 7.2; // fixed angle in degrees
const TRUE_CIRC_KM = 40075.0;
function $(id) { return document.getElementById(id); }
function useSample() {
document.getElementById("sampleBtn")?.classList.add("sampled");
document.getElementById("checkBtn")?.classList.remove("checked");
$("D_m").value = 800000;
$("R_ratio").value = 50;
$("C_m").value = 40000000;
$("C_km").value = 40000;
$("abs_err").value = 75;
$("pct_err").value = 0.19;
clearStates();
}
function clearStates() {
["D_m","R_ratio","C_m","C_km","pct_err","abs_err"].forEach(function(id) {
var el = $(id);
if (!el) return;
el.classList.remove("correct");
el.classList.remove("incorrect");
});
}
function checkAnswers() {
document.getElementById("checkBtn")?.classList.add("checked");
clearStates();
var theta = THETA_DEG;
var D_m = parseFloat($("D_m").value);
var R = parseFloat($("R_ratio").value);
var C_m = parseFloat($("C_m").value);
var C_km = parseFloat($("C_km").value);
var pct = parseFloat($("pct_err").value);
var diff = parseFloat($("abs_err").value);
// --- Check D_m (distance) ---
if (!isNaN(D_m) && D_m > 0) {
// Expected distance from the classic setup:
// 5000 stadia × 157.5 m ≈ 787,500 m
var D_expected = 787500;
var relErrD = Math.abs(D_m - D_expected) / D_expected;
(relErrD <= 0.05
? $("D_m").classList.add("correct")
: $("D_m").classList.add("incorrect"));
}
if (!isNaN(theta) && theta > 0) {
var R_expected = 360.0 / theta;
if (!isNaN(R)) {
var relErrR = Math.abs(R - R_expected) / R_expected;
(relErrR <= 0.05 ? $("R_ratio").classList.add("correct")
: $("R_ratio").classList.add("incorrect"));
}
if (!isNaN(D_m) && D_m > 0 && !isNaN(C_m)) {
var C_m_expected = R_expected * D_m;
var relErrCm = Math.abs(C_m - C_m_expected) / C_m_expected;
(relErrCm <= 0.05 ? $("C_m").classList.add("correct")
: $("C_m").classList.add("incorrect"));
if (!isNaN(C_km)) {
var C_km_expected = C_m_expected / 1000.0;
var relErrCkm = Math.abs(C_km - C_km_expected) / C_km_expected;
(relErrCkm <= 0.05 ? $("C_km").classList.add("correct")
: $("C_km").classList.add("incorrect"));
// Now compute expected difference and percent error based on the expected C_km
var diff_expected = TRUE_CIRC_KM - C_km_expected;
var pct_expected = diff_expected / TRUE_CIRC_KM * 100.0;
if (!isNaN(diff)) {
(Math.abs(diff - diff_expected) <= 0.05 * Math.abs(diff_expected) + 1
? $("abs_err").classList.add("correct")
: $("abs_err").classList.add("incorrect"));
}
if (!isNaN(pct)) {
(Math.abs(pct - pct_expected) <= 1.0
? $("pct_err").classList.add("correct")
: $("pct_err").classList.add("incorrect"));
}
}
}
}
}
function toggleHint() {
var box = $("hintBox");
box.style.display = (box.style.display === "none" || box.style.display === "") ? "block" : "none";
}
function toggleSolution() {
var box = document.getElementById("solutionBox");
if (!box) return;
box.style.display = (box.style.display === "none" || box.style.display === "") ? "block" : "none";
}
</script>
<script>
let audioCtx = null; <!-- ADD THIS LINE -->
function playSoftClick(){
if (!audioCtx){
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
}
const ctx = audioCtx;
const osc = ctx.createOscillator();
const gain = ctx.createGain();
osc.type = "sine";
osc.frequency.setValueAtTime(520, ctx.currentTime);
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>