forked from FranciscoPinto/cern-summer-webfest
-
Notifications
You must be signed in to change notification settings - Fork 2
/
anim.htm
157 lines (113 loc) · 5.52 KB
/
anim.htm
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
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.22/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery.bxSlider/jquery.easing.1.3.js"></script>
<script src="js/jquery.bxSlider/jquery.bxSlider.min.js"></script>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="css/structure.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<script src="bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" type="text/css" media="all" />
<style>
#animation {
margin: 0 auto;
width: 850px;
text-align: center;
}
</style>
<body>
<a class="btn" data-toggle="modal" href="#readmore" >Read more</a>
<div id="animation">
<ul id="frames">
<li><img title="Two quarks are bound together by the strong force." src="img/quark_deconf/1.png">
<li><img title="As their distance increases, so does their attraction." src="img/quark_deconf/2.png">
<li><img title="More and more energy is stored in the force field." src="img/quark_deconf/3.png">
<li><img title="More and more energy is stored in the force field." src="img/quark_deconf/4.png">
<li><img title="More and more energy is stored in the force field." src="img/quark_deconf/5.png">
<li><img title="More and more energy is stored in the force field." src="img/quark_deconf/6.png">
<li><img title="... Until the energy is sufficient to create new particles!" src="img/quark_deconf/7.png">
<li><img title="This is the reason why we can never see colored objects alone. We call this confinement." src="img/quark_deconf/8.png">
</ul>
<div id="slider"></div>
</div>
<div class="modal hide fade" id="readmore">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h2>Atoms!</h2>
</div>
<div class="modal-body">
<p>Atoms actually consist of protons, neutrons and electrons, and can
be torn apart by raising the temperature of the atom so high that the
forces are not strong enough to hold them together. Once we break
apart the atom, what happens? How do these smaller particles
interact? We can understand the atom at follows:</p>
<img src="img/art/hydrogen_atom.png">
<p>A Hydrogen Atom, the simplest possible atom, is made of one proton
and one electron. The proton, which is much heavier than the electron
(in fact about 2000 times heavier) sits in the center, with the
electron orbiting around the proton. The electron is negatively
charged[ref], while the proton is positively charged[ref], so they are
attracted to each other. The electron stays in orbit around the
proton, just like the Earth stays in orbit around the Sun.</p>
<h2>Is this as small as it gets?</h2>
<p>Are these particles the smallest particles, or can we split them,
just like we split the atom?</p>
<p>We believe the electron is indeed fundamental. After trying to
split it apart in many different ways, physicists have concluded that
it is probably not possible, meaning that electrons are not made of
anything smaller.</p>
<p>However, we know that the proton is made up of other smaller
particles, which we call quarks. The proton is made up of two kinds of
quarks, called "up" and "down". [We can imagine]?? the proton is made
up of three quarks: two up quarks and one down quark.</p>
<img src="img/art/proton.png">
<h2>What about other atoms?</h2>
<p>This simple model can be expanded to describe more complicated
atoms. For example, the Helium atom consists of two protons and two
neutrons in the center, forming the nucleus [ref], with two electrons
orbiting them. The proton, made of quarks is very similar to the
neutron, while the electron is indivisible. With a similar mass[ref],
they have very similar properties[ref], apart from their different
electric charge [ref] (the proton is positively charged[ref], the
neutron is neutral and has no electric charge[ref]). This is because
they are also made up of quarks, just in a different
combination. While the proton has two up quarks and one down quark,
the neutron consists of one up quark and two down quarks.</p>
<img src="img/art/proton.png"><img src="img/art/neutron.png ">
<h2>What about their charges?</h2>
<p>How can it be that the proton and neutron have a different charge,
if they are made of the same building blocks? </p>
<p>We know that the proton is up, up, down and charged +1 and the
neutron is up, down, down and charged 0. The only possible way of
resolving this is that the up quark is charged +2/3 and the down quark
is charged -1/3. The fractions only appear here because we discovered
the electron before we discovered the quarks, and called the electron
charge "-1". If we had called the charge of the electron "-3", the
quark charges would be whole numbers.</p>
<h2>Questions we still need to answer</h2>
<p>What are charges? Why do we call them "+" and "-"? What holds
together the Hydrogen atom? And what holds together the nucleus? What
about radioactivity? Why do physicists always draw funny graphs when
explaining this? And finally, what is this "Higgs boson" everyone is
talking about? Continue to answer these questions.</p>
</div>
</div>
<script type="text/javascript">
var anim = $('#frames').bxSlider({
controls: false,
mode: 'fade',
speed: 100,
captions: true
});
$("#slider" ).slider({
value: 0,
min: 0,
max: 7,
step: 1,
slide: function(event, ui) {
anim.goToSlide(ui.value);
}
});
$("#readmore").modal("hide");
</script>
</body>