|
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>🌍 Measuring the World by Slices and Sticks</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: 2rem 5vw 3rem;
background: #ffffff;
max-width: 1100px;
margin: 0 auto;
}
h1 {
margin: 0 0 0.4rem;
font-size: 2rem;
}
.subtitle {
margin: 0 0 1.2rem;
color: #555;
font-size: 1rem;
}
p {
line-height: 1.55;
margin: 0.7rem 0;
font-size: 1.05rem;
}
.controls {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
align-items: center;
margin: 1.2rem 0 1.1rem;
padding: 0.9rem 1rem;
border: 1px solid #dde3ff;
background: #f3f6ff;
border-radius: 12px;
}
button {
border-radius: 999px;
border: none;
padding: 0.45rem 0.95rem;
font-size: 0.95rem;
cursor: pointer;
background: #325dff;
color: #fff;
}
button.secondary {
background: #e4e8fb;
color: #243152;
}
button:active { transform: translateY(1px); }
select {
padding: 0.35rem 0.5rem;
border-radius: 8px;
border: 1px solid #c3cade;
background: #fff;
font-size: 0.95rem;
max-width: 420px;
}
.small {
font-size: 0.85rem;
color: #555;
}
.top-links {
margin-bottom: 0.8rem;
}
a {
color: #1f4ed8;
text-decoration: none;
}
a:hover { text-decoration: underline; }
#status {
margin-left: auto;
font-size: 0.9rem;
color: #444;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="page">
<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>
</div>
<h1>🌍 Measuring the World by Slices and Sticks</h1>
<div class="subtitle">(Inspired by Bill Bryson’s chapter on early attempts to measure Earth)</div>
<div class="controls" role="group" aria-label="Read aloud controls">
<button type="button" onclick="readStory()">🔊 Read aloud</button>
<button type="button" class="secondary" onclick="pauseStory()">⏸ Pause</button>
<button type="button" class="secondary" onclick="resumeStory()">â–¶ Resume</button>
<button type="button" class="secondary" onclick="stopStory()">⏹ Stop</button>
<label class="small" for="voiceSelect" style="margin-left:0.4rem;">Voice:</label>
<select id="voiceSelect" aria-label="Voice selection"></select>
<div id="status">Ready</div>
</div>
<div id="storyText">
<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.</p>
<p>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. Eratosthenes had learned 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.</p>
<p>Eratosthenes realized he could “slice” the Earth using shadows the same way we slice area under a line: by taking a simple measurement and using it to understand something much bigger.</p>
<p>He measured the angle of the shadow in Alexandria (about 7 degrees), knew the distance between the two cities, and reasoned:</p>
<p>“If 7 degrees of curvature corresponds to this many miles,<br>then the whole 360 degrees must correspond to… the entire Earth.”</p>
<p>In other words, he used a small piece — one slice — to understand the whole curve of the planet.</p>
<p>His method was astonishingly accurate, less than 2% error as compared to modern measurements.</p>
</div>
<p class="small" style="margin-top:1.4rem;">
Tip: If “Read aloud” is silent, try choosing a different voice in the menu, or reload the page once.
Some browsers load voices a moment after the page opens.
</p>
</div>
<script>
let utterance = null;
let voices = [];
function setStatus(msg) {
const s = document.getElementById("status");
if (s) s.textContent = msg;
}
function loadVoices() {
voices = window.speechSynthesis.getVoices() || [];
const sel = document.getElementById("voiceSelect");
if (!sel) return;
const current = sel.value;
sel.innerHTML = "";
voices.forEach((v, idx) => {
const opt = document.createElement("option");
opt.value = String(idx);
opt.textContent = v.name + " (" + v.lang + ")";
sel.appendChild(opt);
});
let preferredIndex = voices.findIndex(v => (v.lang || "").toLowerCase().startsWith("en"));
if (preferredIndex < 0) preferredIndex = 0;
sel.value = current || String(preferredIndex);
}
window.speechSynthesis.onvoiceschanged = loadVoices;
loadVoices();
function readStory() {
const el = document.getElementById("storyText");
if (!el) return;
const text = el.innerText.trim();
if (!text) return;
stopStory();
utterance = new SpeechSynthesisUtterance(text);
utterance.rate = 1.0;
utterance.pitch = 1.0;
const sel = document.getElementById("voiceSelect");
const idx = sel ? parseInt(sel.value || "0", 10) : 0;
if (voices && voices[idx]) utterance.voice = voices[idx];
utterance.onstart = () => setStatus("Reading…");
utterance.onend = () => setStatus("Done");
utterance.onerror = () => setStatus("Speech error (try another voice)");
window.speechSynthesis.speak(utterance);
}
function pauseStory() {
if (window.speechSynthesis.speaking) {
window.speechSynthesis.pause();
setStatus("Paused");
}
}
function resumeStory() {
if (window.speechSynthesis.paused) {
window.speechSynthesis.resume();
setStatus("Reading…");
}
}
function stopStory() {
window.speechSynthesis.cancel();
setStatus("Ready");
}
</script>
</body>
</html>