|
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 9 – The Age of Earth</title>
<style>
body {
font-size: 18px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
margin: 0;
padding: 0;
background: #ffffff; /* remove outer blue page */
color: #222;
}
.wrap{
padding: 12px 18px 18px;
max-width: none;
margin: 0;
}
.nav-row{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-bottom:0.8rem;
align-items:center;
}
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);
}
.card{
border:1px solid #dde3ff;
background:#f6f7ff;
border-radius:14px;
padding:1rem 1rem 0.95rem;
margin-top:12px;
}
.small{ font-size:0.95rem; color:#444; }
h1{ margin:0.2rem 0 0.25rem; font-size:2.1rem; }
h2{ margin-top:1.4rem; margin-bottom:0.4rem; font-size:1.55rem; }
p{ margin:0.35rem 0 0.7rem; line-height:1.55; }
.story-frame{
margin-top:1.4rem;
background:linear-gradient(180deg,#f9faff,#ffffff);
border:1px solid #dde3ff;
border-radius:18px;
padding:1.6rem 1.8rem 1.9rem;
box-shadow:0 10px 28px rgba(0,0,0,0.08);
}
.story-images{
display:grid;
grid-template-columns:repeat(3,1fr);
gap: 120px;
align-items:stretch;
}
.story-images img{
width:100%;
height:220px;
object-fit: cover; /* fills box */
border-radius:14px;
border:1px solid #000;
display:block;
border: 5px solid #222;
.
}
@media (max-width:800px){
.story-images{ grid-template-columns:1fr; }
.story-images img{ height:240px; }
}
.topbar{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
}
.topbar label{ margin-left:auto; }
.footer{
margin-top:2.2rem;
font-size:0.9rem;
color:#777;
text-align:left;
border-top:1px solid #eee;
padding-top:0.8rem;
}
.story-images figure {
margin: 0;
text-align: center;
}
.story-images figcaption {
margin-top: 0.6rem;
font-size: 0.95em;
color: #444;
}
</style>
</head>
<body>
<div class="wrap">
<div class="nav-row">
<a href="index.html"><button class="secondary">🧠Hub</button></a>
<a href="adventure_9_home.html"><button class="secondary">🏠Home</button></a>
<a href="adventure_9_activity_student.html"><button class="secondary">âś… Activity</button></a>
</div>
<div class="card">
<h2 style="margin-top:0">🔊 Listen to the story</h2>
<p class="small" style="margin-top:6px">Click <b>Read</b> to hear the story aloud. You can pause or stop at any time.</p>
<div class="topbar" style="margin:10px 0 0">
<button class="btn" id="readBtn" type="button">Read</button>
<button class="btn secondary" id="pauseBtn" type="button">Pause</button>
<button class="btn secondary" id="stopBtn" type="button">Stop</button>
<label class="small" style="display:flex;align-items:center;gap:8px">
Voice:
<select id="voiceSelect" style="padding:8px 10px;border-radius:10px;border:1px solid #bbb;font-size:1rem;min-width:220px">
<option value="">Loading voices…</option>
</select>
</label>
</div>
<div class="small" id="ttsMsg" style="margin-top:10px"></div>
</div>
<div class="story-frame">
<div class="story-images">
<figure>
<img src="images/adventure_9_story_image_1.png"
alt="Clair Patterson"
<figcaption><b>Clair Patterson</b></figcaption>
</figure>
<figure>
<img src="images/adventure_9_story_image_2.png"
alt="Age of Earth"
<figcaption><b>Age of Earth</b></figcaption></figcaption>
</figure>
<figure>
<img src="images/adventure_9_story_image_3.png"
alt="Mitchely"
<figcaption><b>Thomas Midgley Jr. - Lead Gasoline, CFCs and Ferion</b></figcaption>
</figure>
</div>
<div id="storyText"><h1>The Age of Earth, Clair Patterson, and the Planet Covered in Lead</h1>
<p>At the start of the 20th century, scientists still didn’t know how old the Earth was. Estimates ranged wildly—from tens of millions to a billion years—but none were based on solid evidence. Clair Patterson, a quiet and extraordinarily careful geochemist, decided to answer this ancient question. His clock of choice was uranium, a radioactive element that decays into lead at a steady, predictable rate. By comparing the ratio of uranium to lead inside tiny zircon crystals, Patterson realized he could calculate the true age of Earth. But first he had to solve a shocking mystery.
</p>
<p>Everywhere Patterson looked—air, water, dust, the surfaces of his instruments—he found modern lead contamination. Even the ancient zircon crystals contained far too much lead. Something was covering the entire planet in a thin film of this toxic metal, and it made his measurements impossible.</p>
<p>The trail led to Thomas Midgley Jr., a brilliant but disastrous engineer. To stop car engines from knocking, Midgley invented tetra-ethyl lead gasoline. It worked perfectly, but it released lead into the air of every city and household in America. He later invented CFCs, chemicals that would eventually be found to damage the ozone layer.
</p>
<p>To escape this contamination, Patterson built the world’s first ultra-clean laboratory, the model for all future clean rooms. Inside this pristine space he finally obtained the measurements he needed. In 1956 he calculated the age of Earth at 4.55 billion years, astonishingly close to today’s accepted value. At the same time, he revealed the staggering amount of industrial lead entering the environment. Oil and chemical companies attacked his reputation, cut his funding, and fought his findings for decades—but Patterson refused to back down. His persistence helped drive the creation of the Clean Air Act, which finally removed lead from gasoline. Within a generation, lead levels in children’s blood fell by more than 90%.
</p>
<p>Meanwhile, in a strange twist of poetic justice, Midgley was eventually killed by one of his own inventions—a rope-and-pulley device he designed after contracting polio. He became tangled in the machinery and died, a tragic end to a gifted but catastrophic inventor.</p>
<h2>Ice Cores: Earth’s Other Clock</h2>
<p>While uranium gives the deep-time age of our planet, ice cores reveal more recent history. Each year snowfall freezes into a new layer, trapping bubbles of ancient air. Scientists read these layers like pages of a diary—volcanoes, climate swings, carbon dioxide, methane, even nuclear fallout.
</p>
<p>Beginning in the 1960s, Patterson examined these records and found a dramatic jump in atmospheric lead starting around 1927—the exact year tetra-ethyl lead was introduced into gasoline. Patterson used these results extensively to fight the big oil companies and get the Lead out of Gasoline. After the Clean Air Act, ice cores showed lead levels dropping just as quickly.
</p>
<p>Together, uranium dating and ice-core analysis show the sweep of Earth’s story: from billions of years of radioactive decay to the rapid human changes of the last century. Patterson, who merely set out to measure Earth’s age, ended up protecting the health of millions and reshaping modern environmental science.
</p>
</div>
<div class="footer">Created by Dr. Super & Spark – Powered by ChatGPT</div>
</div>
<script>
(function(){
const readBtn = document.getElementById('readBtn');
const pauseBtn = document.getElementById('pauseBtn');
const stopBtn = document.getElementById('stopBtn');
const voiceSel = document.getElementById('voiceSelect');
const msgEl = document.getElementById('ttsMsg');
const storyEl = document.getElementById('storyText');
if(!('speechSynthesis' in window)){
msgEl.textContent = "Text-to-speech is not supported in this browser.";
readBtn.disabled = pauseBtn.disabled = stopBtn.disabled = true;
return;
}
let utter = null;
function pickThreeEnglish(voices){
const en = voices.filter(v => /^en(-|_)?/i.test(v.lang || "") || /english/i.test(v.name || ""));
en.sort((a,b) => (b.localService === true) - (a.localService === true));
const picked = [];
const seen = new Set();
for(const v of en){
const key = (v.name||"").toLowerCase();
if(seen.has(key)) continue;
picked.push(v); seen.add(key);
if(picked.length === 3) break;
}
return picked;
}
function loadVoices(){
const voices = window.speechSynthesis.getVoices();
const picked = pickThreeEnglish(voices);
voiceSel.innerHTML = "";
if(picked.length === 0){
voiceSel.innerHTML = "<option value=''>No English voices found</option>";
msgEl.textContent = "No English voices were found on this device. (Try Chrome or Edge.)";
return;
}
picked.forEach((v, idx) => {
const opt = document.createElement('option');
opt.value = v.name;
opt.textContent = `${v.name} (${v.lang})`;
voiceSel.appendChild(opt);
if(idx === 0) voiceSel.value = v.name;
});
msgEl.textContent = "";
}
loadVoices();
window.speechSynthesis.onvoiceschanged = loadVoices;
function buildUtterance(){
const text = (storyEl ? storyEl.innerText : '').trim();
if(!text){ msgEl.textContent = 'Could not find story text to read.'; return; }
utter = new SpeechSynthesisUtterance(text);
const voices = window.speechSynthesis.getVoices();
const chosenName = voiceSel.value;
const chosen = voices.find(v => v.name === chosenName);
if(chosen) utter.voice = chosen;
utter.rate = 1.0;
utter.pitch = 1.0;
utter.onend = () => {
readBtn.textContent = "Read";
};
utter.onerror = () => {
readBtn.textContent = "Read";
msgEl.textContent = "Could not play audio. Try another voice or refresh.";
};
}
function stop(){
window.speechSynthesis.cancel();
readBtn.textContent = "Read";
}
readBtn.addEventListener('click', () => {
msgEl.textContent = "";
stop();
buildUtterance();
window.speechSynthesis.speak(utter);
readBtn.textContent = "Reading…";
});
pauseBtn.addEventListener('click', () => {
if(window.speechSynthesis.speaking && !window.speechSynthesis.paused){
window.speechSynthesis.pause();
readBtn.textContent = "Read";
msgEl.textContent = "Paused. Click Pause again to resume.";
} else if(window.speechSynthesis.paused){
window.speechSynthesis.resume();
readBtn.textContent = "Reading…";
msgEl.textContent = "";
}
});
stopBtn.addEventListener('click', () => {
stop();
msgEl.textContent = "Stopped.";
});
voiceSel.addEventListener('change', () => {
if(window.speechSynthesis.speaking){
stop();
buildUtterance();
window.speechSynthesis.speak(utter);
readBtn.textContent = "Reading…";
msgEl.textContent = "";
}
});
})();
</script>
</body>
</html>