atro101kids/telescopes.html at main · yuyvonnejin/atro101kids · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eyes on the Universe - Astro for Kids</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/animations.css">
    <link rel="stylesheet" href="css/pages/telescopes.css">
</head>
<body>
    <div class="stars-bg"></div>
    <nav class="top-nav"></nav>
    <main class="page-content">

        <!-- ===== HERO ===== -->
        <section class="page-hero fade-in">
            <h1>Eyes on the Universe</h1>
            <p>How did we go from squinting at the sky to photographing a black hole?</p>
        </section>

        <!-- ===== INTRO ===== -->
        <section class="card fade-in fade-in-delay-1">
            <h2>Four Centuries of Sharper Vision</h2>
            <p>
                For thousands of years, human eyes were the only telescopes we had. Then, in 1609,
                Galileo pointed a small tube with two glass lenses at the sky -- and everything changed.
                In just 400 years, we went from seeing fuzzy dots to capturing the shadow of a black hole
                65 million light-years away.
            </p>
            <p>
                Scroll through the timeline below to explore each leap forward. Watch how the same patch
                of sky gets sharper and sharper as our tools improve.
            </p>
        </section>

        <!-- ===== INTERACTIVE TIMELINE EXPLORER ===== -->
        <div class="interactive-area fade-in fade-in-delay-2">
            <div class="interactive-label">Interactive -- Telescope Timeline</div>
            <h3>Journey Through Telescope History</h3>
            <p>Click any stop on the timeline to explore that era. See how resolution improved from blurry naked-eye views to impossibly sharp images.</p>

            <div class="timeline-container" id="timelineContainer">
                <div class="timeline-track" id="timelineTrack">
                    <!-- JS fills timeline stops -->
                </div>
            </div>

            <div class="timeline-detail-card" id="timelineDetail">
                <div class="detail-header">
                    <span class="detail-era" id="detailEra">Naked Eye</span>
                    <span class="detail-date" id="detailDate">Prehistory</span>
                </div>
                <div class="detail-body">
                    <div class="detail-left">
                        <div class="detail-svg-wrap" id="detailSvgWrap">
                            <!-- JS fills telescope SVG illustration -->
                        </div>
                        <div class="detail-resolution">
                            <span class="res-label">Resolution</span>
                            <span class="res-value" id="detailResolution">~60 arcseconds</span>
                        </div>
                    </div>
                    <div class="detail-right">
                        <h4 class="detail-discovery-title">Key Discoveries</h4>
                        <p class="detail-discovery" id="detailDiscovery">Hipparchus cataloged 850 stars. Tycho Brahe pushed positional accuracy to 1 arcminute.</p>
                        <p class="detail-fun" id="detailFun"></p>
                    </div>
                </div>
            </div>

            <!-- ===== RESOLUTION COMPARISON ===== -->
            <div class="resolution-comparison">
                <h4>Same Patch of Sky, Different Eyes</h4>
                <p>See how the same star cluster looks through telescopes of different eras. The image sharpens as resolution improves.</p>
                <div class="res-grid" id="resGrid">
                    <!-- JS fills resolution comparison panels -->
                </div>
            </div>
        </div>

        <!-- ===== REFRACTOR VS REFLECTOR ===== -->
        <div class="interactive-area fade-in">
            <div class="interactive-label">Interactive -- Optics Explorer</div>
            <h3>Refractor vs. Reflector: Two Ways to Focus Light</h3>
            <p>
                Every telescope does the same job: gather light and bring it to a focus.
                But there are two fundamentally different ways to do it. Toggle between them
                to see how light travels through each design.
            </p>

            <div class="optics-toggle-wrap">
                <button class="optics-toggle-btn active" id="btnRefractor" data-type="refractor">Refractor (Lens)</button>
                <button class="optics-toggle-btn" id="btnReflector" data-type="reflector">Reflector (Mirror)</button>
            </div>

            <div class="optics-diagram-wrap">
                <svg id="opticsDiagram" viewBox="0 0 700 320" xmlns="http://www.w3.org/2000/svg" aria-label="Telescope optics diagram">
                    <!-- JS draws the light path diagrams here -->
                </svg>
            </div>

            <div class="optics-explanation" id="opticsExplanation">
                <p id="opticsText">
                    <strong>Refractor:</strong> Light passes through a convex lens, which bends
                    (refracts) all the rays toward a single focal point. Simple and sturdy, but
                    different colors bend by different amounts -- this is called
                    <strong>chromatic aberration</strong>. Notice how the colors separate near the focus.
                </p>
            </div>
        </div>

        <!-- ===== BUILD YOUR OWN TELESCOPE ===== -->
        <section class="card fade-in">
            <h2>Build Your Own Telescope</h2>
            <p>
                You do not need millions of dollars to own a telescope. With some patience and about
                $200-400 in materials, you can build a real reflecting telescope that shows you craters
                on the Moon, the rings of Saturn, and the moons of Jupiter.
            </p>

            <h3>The Dobsonian Mount</h3>
            <p>
                In the 1960s, a sidewalk astronomer named <strong>John Dobson</strong> had a simple
                idea: separate the optics problem from the mount problem. Traditional telescope mounts
                were heavy, complex, and expensive. Dobson replaced all of that with a plywood box on
                a lazy Susan.
            </p>
            <ul class="build-list">
                <li><strong>Azimuth axis:</strong> A flat board rotates on a ground board with Teflon pads on Formica -- just like a turntable.</li>
                <li><strong>Altitude axis:</strong> Circular side panels rest on Teflon pads so the tube tilts up and down smoothly.</li>
                <li><strong>The mirror:</strong> You can buy a premade 6-8 inch mirror ($150-400) or grind your own from a glass blank using progressively finer abrasives. Grinding typically takes 20-40 hours.</li>
                <li><strong>Testing:</strong> Use a Foucault tester (just a razor blade, a light source, and a ruler) to check that the mirror surface is accurate to within 140 nanometers.</li>
            </ul>
            <p>
                Before Dobson, owning a 10-inch telescope was a serious investment. After Dobson, you
                could build one in a garage for the cost of the mirror alone. The tradeoff? No automatic
                tracking, so it is not ideal for astrophotography -- but for visual deep-sky observing,
                it is hard to beat.
            </p>
        </section>

        <!-- ===== DIG DEEPER: FERMAT'S PRINCIPLE ===== -->
        <div class="accordion fade-in">
            <div class="accordion-header">
                <span class="accordion-arrow">&#9654;</span>
                Dig Deeper: Why Both Methods Work -- Fermat's Principle
            </div>
            <div class="accordion-body">
                <div class="accordion-inner">
                    <p>
                        It might seem like a coincidence that both lenses and mirrors can focus light.
                        But there is a deep reason they both work, and it comes from a beautiful idea
                        called <strong>Fermat's principle of least time</strong>.
                    </p>
                    <p>
                        Fermat's principle says: light always travels along the path that takes the
                        <strong>least time</strong>. Not the shortest distance -- the least time.
                    </p>
                    <h3>How a Lens Uses This</h3>
                    <p>
                        Light moves slower in glass than in air. A convex lens is thicker in the middle
                        and thinner at the edges. Light going through the center spends more time in
                        slow glass, while light going through the edges has a shorter path through glass
                        but a longer path through air. The lens is shaped so that <strong>every possible
                        path from the star to the focus takes exactly the same total time</strong>.
                    </p>
                    <h3>How a Mirror Uses This</h3>
                    <p>
                        A parabolic mirror is shaped so that every path from a distant star to the
                        mirror surface and then to the focus has <strong>exactly the same total
                        length</strong>. Since light in air always moves at the same speed, equal
                        length means equal time.
                    </p>
                    <p>
                        In both cases, all light waves arrive at the focus perfectly in sync -- their
                        peaks line up, which is called <strong>constructive interference</strong>.
                        That is what makes a sharp image. Any imperfection in the lens or mirror surface
                        means some light arrives out of sync, and the image gets blurry.
                    </p>
                </div>
            </div>
        </div>

        <!-- ===== QUIZ ===== -->
        <section class="fade-in">
            <h2>Test Your Telescope Knowledge</h2>

            <div class="quiz-box">
                <h4>Question 1: Refractors vs. Reflectors</h4>
                <p>What problem did Newton's reflecting telescope solve that Galileo's refractor had?</p>
                <button class="quiz-option" data-correct="false" data-feedback="Reflectors still have limits on magnification. The key advantage was about color.">It could magnify objects more</button>
                <button class="quiz-option" data-correct="true" data-feedback="Correct! Mirrors reflect all colors the same way, so there is no color-splitting problem. Lenses bend blue light more than red, creating colored fringes around bright objects.">It eliminated chromatic aberration (color-splitting)</button>
                <button class="quiz-option" data-correct="false" data-feedback="Actually, reflectors need careful alignment. The advantage was about how light behaves differently when bouncing vs. passing through glass.">It was easier to build and align</button>
                <button class="quiz-option" data-correct="false" data-feedback="Weight was a factor for very large telescopes later, but Newton's original motivation was about color problems in lenses.">It was lighter and more portable</button>
                <div class="quiz-feedback"></div>
            </div>

            <div class="quiz-box">
                <h4>Question 2: Resolution</h4>
                <p>The Hubble Space Telescope can see details 10 times sharper than most ground-based telescopes. Why?</p>
                <button class="quiz-option" data-correct="false" data-feedback="Hubble's mirror is 2.4 meters -- much smaller than many ground-based telescopes. Size is not the main advantage.">Its mirror is much larger</button>
                <button class="quiz-option" data-correct="false" data-feedback="Hubble orbits at about 540 km altitude, which is close in astronomical terms. The advantage comes from what it avoids, not where it is.">It is closer to the stars</button>
                <button class="quiz-option" data-correct="true" data-feedback="Correct! Earth's atmosphere bends and blurs incoming light (that is why stars twinkle). Above the atmosphere, Hubble gets a perfectly steady view.">It orbits above Earth's atmosphere, which blurs light</button>
                <button class="quiz-option" data-correct="false" data-feedback="Hubble uses visible and near-infrared light, which ground telescopes also use. The key is avoiding atmospheric distortion.">It uses special wavelengths of light</button>
                <div class="quiz-feedback"></div>
            </div>

            <div class="quiz-box">
                <h4>Question 3: The Event Horizon Telescope</h4>
                <p>How did the EHT achieve sharp enough vision to photograph a black hole?</p>
                <button class="quiz-option" data-correct="false" data-feedback="A single mirror that large would be impossible to build. The EHT used a cleverer approach.">It used the largest single mirror ever built</button>
                <button class="quiz-option" data-correct="true" data-feedback="Correct! By linking radio telescopes across the globe and combining their signals, the EHT created a virtual telescope the size of Earth. This gave it a resolution of about 20 micro-arcseconds -- sharp enough to read a newspaper in New York from Paris.">It linked radio telescopes around the world to act as one Earth-sized telescope</button>
                <button class="quiz-option" data-correct="false" data-feedback="The EHT observed from the ground using radio wavelengths, not from space.">It was launched into deep space for a closer view</button>
                <button class="quiz-option" data-correct="false" data-feedback="AI helped process the data, but the fundamental breakthrough was in how the telescopes were connected.">It used artificial intelligence to enhance blurry images</button>
                <div class="quiz-feedback"></div>
            </div>
        </section>

        <!-- ===== FUN FACT ===== -->
        <div class="fact-box fade-in">
            <div class="fact-label">Fun Fact</div>
            <p>
                From naked eye to the Event Horizon Telescope, our ability to see fine detail has
                improved by a factor of about <strong>3 million</strong>. That is like going from
                barely reading a road sign across the street to reading a coin on the surface of
                the Moon. And it all happened in just four centuries -- a blink of an eye in
                cosmic time.
            </p>
        </div>

        <div class="page-nav"></div>
        <footer class="page-footer">
            <p>Astro for Kids -- Built for curious minds exploring the cosmos</p>
        </footer>
    </main>
    <script src="js/nav.js"></script>
    <script src="js/common.js"></script>
    <script src="js/pages/telescopes.js"></script>
</body>
</html>