-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpage1.html
132 lines (129 loc) · 7.18 KB
/
page1.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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="stylebasis.css">
<link rel="stylesheet" href="css/magnify.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/barba.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/soundjs.min.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/anime.min.js"></script>
<script type="text/javascript" src="js/jquery.magnify.js"></script>
</head>
<div id="barba-wrapper">
<div class="barba-container">
<header class="header_top">
<nav class="nav_top">
<a href="index.html"><button class="nav_button--context nav_button--featured" data-button-type="home" ontouchstart=""><img src='/assets/icons/home.svg'></button></a>
<button class="nav_button--standard quiz_open" data-button-type="quiz" ontouchstart=""><span>Quiz</span></button>
<div class="nav_segmented" data-button-type="navigation">
<a class="nav_link--forward"><button class="nav_segmented_item"><span>Forward</span></button></a>
</div>
<button class="nav_button--context sound_settings" data-button-type="sound" ontouchstart=""><img src='/assets/icons/volume.svg'><span>Sound</span></button>
</nav>
</header>
<body onload="loadSound();">
<main class="main_content">
<div class="overlay"></div>
<section class="quiz_module">
<h2>Quiz<button class="nav_button nav_button--context quiz_close" ontouchstart=""><img src='/assets/icons/crossRed.svg'><span>Clear</span></button></h2>
<article class="question" id="question_1">
<p><strong>Question 1.</strong>Light is a form of...?</p>
<label>
<input type="radio" name="question_1_options" correct="true">
<span class="inner_check"></span><span class="outer_check"></span>
Energy
</label>
<label>
<input type="radio" name="question_1_options">
<span class="inner_check"></span><span class="outer_check"></span>
Force
</label>
<label>
<input type="radio" name="question_1_options">
<span class="inner_check"></span><span class="outer_check"></span>
Colour
</label>
</article>
<article class="question" id="question_2">
<p><strong>Question 2.</strong>The colour of light is dependent on the light's...</p>
<label>
<input type="radio" name="question_2_options">
<span class="inner_check"></span><span class="outer_check"></span>
Strength
</label>
<label>
<input type="radio" name="question_2_options">
<span class="inner_check"></span><span class="outer_check"></span>
Diameter
</label>
<label>
<input type="radio" name="question_2_options" correct="true">
<span class="inner_check"></span><span class="outer_check"></span>
Wavelength
</label>
</article>
<article class="question" id="question_3">
<p><strong>Question 2.</strong>If you were painting, what form of color mixing would you be using?</p>
<label>
<input type="radio" name="question_3_options" correct="true">
<span class="inner_check"></span><span class="outer_check"></span>
Subtractive Color Mixing
</label>
<label>
<input type="radio" name="question_3_options">
<span class="inner_check"></span><span class="outer_check"></span>
Additive Color Mixing
</label>
<label>
<input type="radio" name="question_3_options">
<span class="inner_check"></span><span class="outer_check"></span>
Attractive Colour Mixing
</label>
</article>
<article class="question" id="question_4">
<p><strong>Question 2.</strong>If you were mixing colours on a screen, this would be an example of...?</p>
<label>
<input type="radio" name="question_4_options">
<span class="inner_check"></span><span class="outer_check"></span>
Aggressive Color Mixing
</label>
<label>
<input type="radio" name="question_4_options" correct="true">
<span class="inner_check"></span><span class="outer_check"></span>
Additive Color Mixing
</label>
<label>
<input type="radio" name="question_4_options">
<span class="inner_check"></span><span class="outer_check"></span>
Supportive Color Mixing
</label>
</article>
<div class="feedback_container"></div>
<button class="nav_button nav_button--standard nav_button--validate" ontouchstart=""><span>Submit</span></button>
</section>
<section class="page">
<h1>How Does Light Work?</h1>
<div class="article_content">
<article>
<h2>What is color?</h2>
<p>Light is electromagnetic radiation within a certain portion of the electromagnetic spectrum. The word usually refers to visible light, which is the visible spectrum that is visible to the human eye and is responsible for the sense of sight. Visible light is usually defined as having wavelengths in the range of 400-700 nanometres (nm), or 4.00 x 10-7 to 7.00 x 10-7 m, between the infrared (with longer wavelengths) and the ultraviolet (with shorter wavelengths). This wavelength means a frequency range of roughly 430-750 terahertz (THz).</p>
</article>
<article>
<h2>Why is light important?</h2>
<p>The main source of light on Earth is the Sun. Sunlight provides the energy that green plants use to create sugars mostly in the form of starches, which release energy into the living things that digest them. This process of photosynthesis provides virtually all the energy used by living things. Historically, another important source of light for humans has been fire, from ancient campfires to modern kerosene lamps. With the development of electric lights and power systems, electric lighting has effectively replaced firelight. Some species of animals generate their own light, a process called bioluminescence. For example, fireflies use light to locate mates, and vampire squids use it to hide themselves from prey.</p>
</article>
</div>
<aside>
<h2>Light is Energy!</h2>
<img src="assets/images/sun.jpg">
<p>But why does light make this journey at all? As you probably know, the Sun is a nuclear fireball spewing energy in all directions. The light that we see it simply the one part of the energy that the Sun makes that our eyes can detect. When light travels between two places (from the Sun to the Earth or from a flashlight to the sidewalk in front of you on a dark night), energy makes a journey between those two points. The energy travels in the form of waves (similar to the waves on the sea but about 100 million times smaller) - a vibrating pattern of electricity and magnetism that we call electromagnetic energy. If our eyes could see electricity and magnetism, we might see each ray of light as a wave of electricity vibrating in one direction and a wave of magnetism vibrating at right angles to it. These two waves would travel in step and at the speed of light.</p>
</aside>
</section>
</main>
</body>
</div>
</div>
</html>