KGRKJGETMRETU895U-589TY5MIGM5JGB5SDFESFREWTGR54TY
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 :
current_dir [ Writeable ] document_root [ Writeable ]

 

Current File : /domains/drsuper/CalculusMechanics/adventure_11_story.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Adventure 11 – TThe Apple, the Bet, and the Book</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;
}
button:hover { background: #f3f7ff; }
button:active { background: #cddcff; box-shadow: 0 1px 0 #4f6fe6; transform: translateY(2px); }
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:100px;
  margin:12px 0 14px;
  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>🧭 Hub</button></a>
      <a href="adventure_11_home.html"><button class="secondary">🏠 Home</button></a>
      <a href="adventure_11_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_11_story_image_1.png"
           alt="Newton">
      <figcaption><b>Sir Isaac Newton</b></figcaption></figcaption>
    </figure>

    <figure>
      <img src="images/adventure_11_story_image_2.png"
           alt="Halley's Comet">
      <figcaption><b>Halley's Comet</b></figcaption></figcaption>
    </figure>

    <figure>
      <img src="images/adventure_11_story_image_3.png"
           alt="Sir Edmond Halley"
           <figcaption>
              <a href="https://www.youtube.com/watch?v=VIDEO_ID" target="_blank">
            <b>Sir Edmond Halley</b>
            </a>
          </figcaption>
    </figure>

  </div>
      <div id="storyText"><h1>Halley’s Comet, Newton’s Falling Moon & the Secret Behind Taylor Series</h1>
<p>When the kids were talking about space, I told them something I had never shared in any math class before. I said, quietly: “Thirty-eight years from now, Halley’s Comet will return. I won’t be here anymore. But you will be. And when you look up and see that pale streak across the sky, I want you to remember this moment — our Math Circle — and think of me.” The room went still. Cyrus was emotional, Rooz and Marc stopped talking and moving. We had an emotional moment together.
<p> Long before rockets, long before NASA, long before we could track anything with computers, there lived a curious man named Edmond Halley. He wasn’t rich. He wasn’t a superstar scientist like Newton. But he had one extraordinary gift: he could look at scattered, messy data and find patterns that no one else could see. In the early 1700s he noticed something peculiar — a bright comet seen in 1682 looked very much like ones recorded in 1607 and 1531.
</p>
<p>
“Astronomers told him he was wasting his time: “You can’t compare events 75 years apart”; “The orbits are different”; “The math is impossible.” Halley ignored them. After months of calculation, he made one of the boldest statements in scientific history: “They are the same comet. It returns every 76 years. It will be back in 1758.” This was the first time any human predicted a cosmic event so far into the future — and he was right.”
</p>
<p>
Years later three brilliant friends—Sir Christopher Wren, Robert Hooke, and Edmond Halley—were arguing about what kind of curve a planet follows around the Sun.
Wren, always mischievous, offered a bet:
</p>

<p>
Hooke bragged that he knew the answer but did not want to spoil the bet.
Halley, curious and determined, rode all the way to Cambridge to ask Newton.
When he said, “What shape would the orbit be if gravity pulls as the inverse square of distance?” Newton quietly replied,
</p>
<p>
But Halley did not do it alone. He had a secret weapon: Isaac Newton. Newton had just discovered something shocking — something that changed how humans understood the universe. He realized that the same force that pulls an apple down also pulls the Moon toward the Earth. The Moon is falling, but because it keeps missing the Earth as it falls, it stays in orbit. When Halley asked Newton to explain how comets move, Newton used an idea that was revolutionary for its time: you can understand a complicated path by breaking it into tiny steps.”
</p>
<h2>
Start with gravity here; Measure a small change there; Approximate the motion step by step;
Tiny steps → Giant arcs; Small formulas → Predictions across the sky.
</h2>
<p>
This simple, brilliant idea — using small changes to understand big curves — eventually grew into what we now call Taylor Series. It is the mathematics of “little steps,” the same idea that let Halley predict a comet and Newton map the orbit of the Moon.
</P>
<p>
And now in this adventure you will use that same idea. Not to find comets. Not to save astronauts. But to understand something just as magical: How small pieces of information can reveal the shape of an entire function.
</p>
<P>
And maybe — just maybe — when Halley’s Comet returns in 38 years, you will look up at the night sky and whisper, “We learned this with Dr. Super.”
</p>
</div>
 

    <div class="footer">Created by Dr. Super &amp; 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>

Anon7 - 2021