-
Notifications
You must be signed in to change notification settings - Fork 4
/
NeffCar.html
184 lines (155 loc) · 7.46 KB
/
NeffCar.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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="Leslie Bondaryk" />
<meta name="Owner" content="Pearson" />
<meta name="Copyright" content="Copyright (c) 2013 Pearson. All rights reserved." />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="eCourses Author, Title" name="description" />
<!-- Bootstrap -->
<link href="css/bootstrap_eCourses_customized.css" rel="stylesheet" media="screen" />
<link href="css/bootstrap_eCourses_responsive.css" rel="stylesheet" media="screen" />
<link href="css/graphics_and_svg.css" rel="stylesheet" />
<link href="css/learning-objective.css" rel="stylesheet" />
<link href="css/eCourse-master.css" rel="stylesheet" media="screen" />
<title class="setTitle"></title>
</head>
<body>
<div class="titler">
<span class='number setId'></span>
<span class="setTitle">How do nuclear reactors work?</span>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span8 leftCol">
<p>Nuclear reactors use heat from fission reactions to turn water into steam, which spins turbines connected to generators that produce electricity. The figure shows a common design known as a pressurized water reactor.</p>
<div id="imgReactor">
</div>
</div>
<div class="span4 rightCol">
<div id="steps">
</div>
</div>
<div class="row-fluid">
<div class="span6 leftCol">
<p>It’s easy to take our cars for granted, given how easy it is to fill a gas tank. Yet the process of taking crude oil (petroleum) from the ground and turning it into gasoline and other fuels is long and elaborate. </p>
<p>
Nearly all of the fuel used for transportation today comes from crude oil. When it is brought out of the ground, it has to be transported in pipelines, trucks, or ships across vast distances. The engineering required for oil transport can be substantial. The Trans Alaska Pipeline System that runs from the North Slope of Alaska to the city of Valdez on Alaska’s southern coast is 800 miles long. A new pipeline in Russia and Siberia called the Eastern Siberia Pacific Ocean Pipeline will run 2,900 miles (4,700 km) when it is completed around 2014.
</p>
<p>
After oil has been transported, it has to be converted at refineries into secondary fuels such as gasoline. Crude oil contains a wide variety of hydrocarbons, molecules made from hydrogen and carbon. These hydrocarbons are used for a variety of purposes, including fuels in liquid and gas forms. Crude oil is separated into these fuels through a process called fractional distillation that uses heat and chemical reactions to separate molecules into different groups. These final products include not only gasoline and diesel fuels but also other products such as asphalt for roads, oils for engines, and specialized fuels for airplanes.
</p>
<div id="imgReactor">
</div>
</div>
<div class="span6 rightCol">
<div id="steps">
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-latest.js"></script>
<script src="js/d3.v2.min.js"></script>
<script src="js/toc-structure.js"></script>
<script src="js/eCourse-master.js"></script>
<script src="js/widgets.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/widget-callouts.js"></script>
<script src="js/eventmanager.js"></script>
<script>
//the eventManager is an object that is specific to this page. A new one
//is created for every page, and then passed to the widgets in that page
//that must talk to it.
var eventManager = new EventManager();
var svgImg = new MakeSVGContainer(
{
node: d3.select("#imgReactor"),
maxWid: 750,
maxHt: 390
});
svgImg.Axes(
{
xPosPerc: 0, yPosPerc:0,
xPerc: 1, yPerc: 1,
xaxisType: "linear", yaxisType: "linear",
xTicks: 0,
xOrient: "bottom",
yOrient: "left",
xLabel: "Nuclear Reactor Schematic"
});
svgImg.ScalableImage({
images: [
{URI: "img/reactor.jpg", caption: "Nuclear Reactor schematic"}
],
});//this doesn't have an eventmanager argument, because it isn't
//emitting events in this page.
svgImg.Labels (
{type: "numbered",
labels:
[
{content: "1", xyPos: [.025,.17], width: 0},
{content: "2", xyPos: [.08,.38], width: 0},
{content: "3" , xyPos: [.325,.64], width: 0},
{content: "4" , xyPos: [.645,.58], width: 0},
{content: "5" , xyPos: [.69,.095], width: 0}
]}, eventManager);
// Create the callout array. These won't emit events, just get them.
var callEm = new Callouts({
id: "callme",
type: "table",
textBits: {
headers: ["Nuclear Reactor function" ],
content: [{
col0: "1. In a closed circuit, (green) water is pumped at high pressure to the reactor core."},
{
col0: "2. Heat is generated by fission in the fuel rods in the reactor core, which heats the circulating water. Thick layers of concrete and steel or lead contain the reactor core’s radioactivity."},
{
col0: "3. In the steam generator, the energy from the heated water is used to boil water from a separate supply. The resulting steam moves through a pipe to a turbine."},
{
col0: "4. The steam turns the turbine, which is connected to an electricity generator. Power lines distribute the electricity. A typical reactor produces as much as a coal-fired power plant."},
{
col0: "5. A third supply of water is used to cool the steam so it condenses into water, which is pumped back to the steam generator."}
]}
},eventManager);
callEm.draw(d3.select("#steps"));
// Modify the value of the data for the bar graph when the
//numerical input changes. So, subscribe to the event emitted by inputLevo,
//or inputDextro,
//and target whatever is identified by the handler in the second argument.
//TODO: make these methods of the target widget?
// Handle changes of the levo and dextro input values
eventManager.subscribe(svgImg.selectedEventId,
handleSelectionChanged);
eventManager.subscribe(callEm.selectedEventId,
handleSelectionChanged);
//TEST: set the start highlight state of 0 index by calling the
//handler with a hard-set index of 0. This should result in the
//first label getting highlighted and the first callout being displayed.
handleSelectionChanged({selectKey: 0});
/************************************************************************
* handleSelectionChanged *//**
*
* handleInputValueChanged is called from the event handler for one of
* the input widgets when the user changes its value. It updates the
* given matching input widget's value to match the new value and then
* updates the bar chart.
*
* @param eventDetails These are the keyed values returned by
* the event, in this case, a selection
* (click).
*************************************************************************/
function handleSelectionChanged(eventDetails)
{
//Handler needs to get written into each page,
//each widget will have it's own way of responding
//LabelLite should be a method of Labels, once Labels
//is written as a constructor
lite(svgImg,eventDetails.selectKey);
callEm.calloutSwap(eventDetails.selectKey);
}
</script>
</body>
</html>