-
Notifications
You must be signed in to change notification settings - Fork 1
/
trivia.html
236 lines (209 loc) · 14.1 KB
/
trivia.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<!--Ensures that the characters work regardless of what symbols or language is used and it loads appropriately sized on all devices-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trivia</title>
<style>
/* Background image styling */
body, html {
height: 100%;
margin: 0;
background-image: url('assets/trivia_background.jpg'); /* Replace 'your-background-image.jpg' with your image URL */
background-size: cover;
background-repeat: repeat;
}
/* Styling for the overlay text */
#overlay-text {
text-align: center;
font-size: 40px;
color: white;
margin-top: 20px;
}
/* Styling for frame that contains all images */
.image-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 1px;
}
/* Styling for all the images */
.image {
width: 300px;
height: 300px;
margin: 10px;
position: relative;
cursor: pointer;
}
/* Styling for background on images when hovering */
.fact-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /*Semi-transparent background for facts */
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s;
}
.image:hover .fact-overlay {
opacity: 1; /* Show the overlay on hover */
}
/* Styling for facts on image overlay */
.fact-text {
color: white;
font-size: 18px;
text-align: center;
}
/* Positioning for back link to take you to home page */
.back-link {
position: absolute;
top: 2px;
right: 10px;
font-size: 17px;
}
/* Styling for back link to take you to home page */
.back-link a {
color: white; /* Change the text color to white */
text-decoration: none; /* Remove underline from the link */
}
</style>
</head>
<body>
<!-- Overlay text -->
<div id="overlay-text">🍫🌍 mars bars for a hungry mind 🌍🍫</div>
</div>
<div class="image-container">
<!-- Image 1 -->
<div class="image">
<img src="assets/spaceship (1).png" alt="Alien">
<div class="fact-overlay">
<p class="fact-text"></p>
</div>
</div>
<!-- Image 2 -->
<div class="image">
<img src="assets/astronaut (1).png" alt="Astronaut">
<div class="fact-overlay">
<p class="fact-text"></p>
</div>
</div>
<!-- Image 3 -->
<div class="image">
<img src="assets/constellations (1).png" alt="Constellations">
<div class="fact-overlay">
<p class="fact-text"></p>
</div>
</div>
<!-- Image 4 -->
<div class="image">
<img src="assets/galaxy (1).png" alt="Galaxy">
<div class="fact-overlay">
<p class="fact-text"></p>
</div>
</div>
<!-- Image 5 -->
<div class="image">
<img src="assets/planet_trivia (2).png" alt="Planet">
<div class="fact-overlay">
<p class="fact-text"></p>
</div>
</div>
<!-- Image 6 -->
<div class="image">
<img src="assets/rocket (1).png" alt="Rocket">
<div class="fact-overlay">
<p class="fact-text"></p>
</div>
</div>
</div>
<!-- Back link to take you to home page -->
<div class="back-link">
<p><a href="https://guptajanavi.github.io/cosmos-cares/">Back to the International Space Station</a></p>
</div>
<script>
/* Arrays of facts for each image: This is a list of lists*/
const facts = [
[
"Despite numerous claims and sightings, there is no concrete scientific evidence to confirm the existence of extraterrestrial life or aliens.",
"Scientists use the Drake Equation to estimate the potential number of advanced civilizations in our galaxy capable of communicating with us. It takes into account various factors such as the rate of star formation and the likelihood of planets with life-supporting conditions.",
"Named after physicist Enrico Fermi, the Fermi Paradox raises the question of why, given the vast number of stars and potentially habitable planets in the universe, we have not yet detected any signs of intelligent extraterrestrial life.",
"The Roswell UFO incident in 1947 is one of the most famous alleged UFO crashes. The U.S. military initially reported the recovery of a flying disc but later said it was a weather balloon.",
"In 1977, a radio telescope received a strong, unexplained signal from space lasting 72 seconds. It was nicknamed the Wow! signal and remains a mystery to this day.",
"Alien abduction stories involve claims of people being taken against their will by extraterrestrial beings for various purposes, including experimentation and communication. These claims are widely debated and often considered part of popular culture."
],
[
"Yuri Gagarin, a Soviet cosmonaut, was the first human to travel into space. He orbited the Earth aboard Vostok 1 on April 12, 1961.",
"Alan Shepard became the first American in space on May 5, 1961, when he piloted the Freedom 7 spacecraft on a suborbital flight.",
"Twelve astronauts have walked on the Moon between 1969 and 1972 during NASA's Apollo missions. Neil Armstrong and Buzz Aldrin were the first, with Armstrong being the first to set foot on the lunar surface.",
"The International Space Station (ISS) is a collaborative effort involving space agencies from multiple countries, including NASA (United States), Roscosmos (Russia), ESA (European Space Agency), JAXA (Japan Aerospace Exploration Agency), and CSA (Canadian Space Agency).",
"The first woman in space was Valentina Tereshkova, a Soviet cosmonaut, who orbited Earth on June 16, 1963. The first American woman in space was Sally Ride, who flew on the Space Shuttle Challenger in 1983.",
"Russian astronaut Gherman Titov holds the record for being the youngest person to travel to space. He was just 25 years old when he orbited the Earth in 1961.",
],
[
"There are 12 zodiac constellations, which are used in astrology to create horoscopes. These constellations lie along the ecliptic, the apparent path of the Sun across the sky.",
"The Big Dipper is one of the most recognizable constellations in the Northern Hemisphere. It's part of Ursa Major (the Great Bear). The Little Dipper is part of Ursa Minor (the Little Bear) and includes the North Star (Polaris), which is used for navigation.",
"In the Southern Hemisphere, the Southern Cross (Crux) is a prominent constellation used for navigation. It's located near the South Celestial Pole.",
"Constellations aren't fixed in the night sky. Over millennia, the positions of stars change due to Earth's precession, so the constellations we see today are different from those observed by ancient civilizations.",
"Stars come in various sizes, colors, and stages of development. These include red dwarfs, yellow dwarfs (like our Sun), giant stars, and supergiants.",
"Extremely massive stars can end their lives as neutron stars or even collapse further to become black holes, both of which have extremely dense and intense gravitational fields."
],
[
"The Andromeda Galaxy (M31) is the nearest spiral galaxy to the Milky Way and is on a collision course with our galaxy. In about 4.5 billion years, the two galaxies are expected to merge.",
"Dwarf galaxies are smaller and less massive than the Milky Way and other large galaxies. They are quite numerous and often orbit larger galaxies as satellites.",
"Some of the most energetic and distant objects in the universe are quasars. They are believed to be powered by supermassive black holes at the centers of galaxies.",
"The Hubble Space Telescope's deep field observations revealed thousands of galaxies in a small, seemingly empty patch of the sky. This image demonstrated the vastness of the universe.",
"The exact process of galaxy formation is still an area of active research, but it is thought to involve the collapse of gas and the accumulation of dark matter over billions of years.",
"The colors of galaxies are determined by the types of stars they contain and the presence of interstellar dust. Young, active galaxies often appear blue due to the abundance of hot, massive stars.",
],
[
"Mercury is the smallest planet, while Jupiter is the largest. In fact, Jupiter is more massive than all the other planets, asteroids, and comets in the solar system combined.",
"The inner planets (Mercury, Venus, Earth, and Mars) are called terrestrial planets and are characterized by solid, rocky surfaces. The outer planets (Jupiter, Saturn, Uranus, and Neptune) are gas giants, composed mostly of gases like hydrogen and helium.",
"Venus has a thick, toxic atmosphere and is the hottest planet in our solar system due to its extreme greenhouse effect, even hotter than Mercury.",
"Pluto was classified as the ninth planet until 2006 when it was reclassified as a dwarf planet by the International Astronomical Union (IAU). Other dwarf planets in our solar system include Eris, Haumea, Makemake, and Ceres.",
"Numerous space missions have been launched to study planets, including the Mars rovers (e.g., Curiosity and Perseverance), the Voyager probes, and the New Horizons mission to Pluto and the Kuiper Belt.",
"Planets form from the disk of gas and dust surrounding young stars. This process involves accretion and gravitational interactions over millions of years.",
],
[
"The ISS is a joint project involving multiple space agencies, including NASA (United States), Roscosmos (Russia), ESA (European Space Agency), JAXA (Japan Aerospace Exploration Agency), and CSA (Canadian Space Agency). It has been continuously inhabited since November 2000.",
"NASA's Voyager 1 and Voyager 2 spacecraft were launched in 1977 and have since traveled beyond the solar system into interstellar space. They carry golden records with sounds and images representing Earth's culture and life.",
"NASA's Space Shuttle program operated from 1981 to 2011, with the shuttles Columbia, Challenger, Discovery, Atlantis, and Endeavour. They were used for a wide range of missions, including deploying and repairing satellites and constructing the ISS.",
"The James Webb Space Telescope (JWST), set to launch in the near future, will be the successor to the Hubble Space Telescope and is designed to observe the universe in the infrared spectrum, providing new insights into the cosmos.",
"Private companies like SpaceX, Blue Origin, and others are playing an increasingly significant role in space exploration and transportation, with missions to the ISS, lunar plans, and the development of reusable rockets.",
"NASA's New Horizons mission conducted a historic flyby of Pluto in 2015, providing our first close-up images and data of the distant dwarf planet.",
]
];
/* Function to generate a random fact from the list of facts for each image */
function getRandomFact(imageIndex) {
const factArray = facts[imageIndex];
const randomIndex = Math.floor(Math.random() * factArray.length);
return factArray[randomIndex];
}
/* Get all image elements with class "image"*/
const images = document.querySelectorAll('.image');
/* Add event listeners to each image for hovering */
images.forEach((image, index) => {
const factOverlay = image.querySelector('.fact-overlay');
const factText = factOverlay.querySelector('.fact-text');
/* Function to update the displayed fact */
function updateFact() {
factText.textContent = getRandomFact(index);
}
/* Set initial fact */
updateFact();
/* Event listener for mouseover (hover) */
image.addEventListener('mouseover', () => {
updateFact();
});
/* Event listener for mouseout (hover out) */
image.addEventListener('mouseout', () => {
updateFact();
});
});
</script>
</body>
</html>