-
Notifications
You must be signed in to change notification settings - Fork 4
/
assess_12R.3.html
178 lines (159 loc) · 5.33 KB
/
assess_12R.3.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
<!DOCTYPE html>
<html>
<head>
<title class="setTitle"></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Neff,Our Changing Planet" name="description">
<!-- Bootstrap -->
<link href="css/bootstrap_plus.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/module-opener.css" rel="stylesheet">
<link href="css/toc.css" rel="stylesheet">
<link href="css/grey-thing.css" rel="stylesheet">
<link href="css/eCourse-master.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- Body Content -->
<div class="container-fluid">
<div class="row-fluid">
<div class="span12 leftCol">
<h2 class="setTitle"></h2>
<div id="widget3" class="assessment">
<div class="graphTitle">Advances impacting population growth</div>
<p class="questionText">Rapid population growth over the last 300 years is attributable to <b>some</b> of the listed technological advances. Associate those responsible with the eras where they were introduced by placing them on the graph.</p>
<form name="Q3">
<div id="graphTarget6"></div>
<input class="btn btn-primary" type="submit" value="Check Me">
</form>
</div>
</div>
</div>
</div>
<script src="js/jquery-latest.js"></script>
<script src="js/jquery-ui-1.10.2.custom.js"></script>
<script src="js/neff-structure.js"></script>
<script src="js/neff-master.js"></script>
<script src="js/d3.v2.min.js"></script>
<script src="js/graphing.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
var worldPop=[
{x: 1000 , y: 0.265 },
{x: 1100 , y: 0.32 },
{x: 1200 , y: 0.36 },
{x: 1300 , y: 0.36 },
{x: 1400 , y: 0.34 },
{x: 1500 , y: 0.425 },
{x: 1600 , y: 0.545 },
{x: 1700 , y: 0.61 },
{x: 1750 , y: 0.7 },
{x: 1800 , y: 0.9 },
{x: 1850 , y: 1.128 },
{x: 1900 , y: 1.55 },
{x: 1910 , y: 1.75 },
{x: 1920 , y: 1.86 },
{x: 1930 , y: 2.07 },
{x: 1940 , y: 2.3 },
{x: 1950 , y: 2.529346 },
{x: 1955 , y: 2.763453 },
{x: 1960 , y: 3.023358 },
{x: 1965 , y: 3.33167 },
{x: 1970 , y: 3.685777 },
{x: 1975 , y: 4.061317 },
{x: 1980 , y: 4.437609 },
{x: 1985 , y: 4.846247 },
{x: 1990 , y: 5.290452 },
{x: 1995 , y: 5.713073 },
{x: 2000 , y: 6.115367 },
{x: 2005 , y: 6.512276 },
{x: 2010 , y: 6.908688 },
{x: 2015 , y: 7.302186 },
{x: 2020 , y: 7.674833 },
{x: 2025 , y: 8.011533 },
{x: 2030 , y: 8.308895 },
{x: 2035 , y: 8.57057 },
{x: 2040 , y: 8.801196 },
{x: 2045 , y: 8.996344 },
{x: 2050 , y: 9.149984 }
];
var projected = expData({
rate: 0.01,
base: 1,
pts: 300
});
var height=350, width=800, tickheight=10;
var margin0 = {top:10, bottom:6*tickheight, left:2*tickheight, right:200};
var linkedRegions = ["#legend0","#graph01"];
var title = "Growth Rate Lab";
var litekey = [0,1,2];
var yticks = [0,50,100,150,200];
//call graphing shell and stacked bar charts
makeGraph(6,width,height,margin0);
//lineChart(0,1,Data,width,height,margin0,"lines",[[xticks,"bottom"],[8,"right"]],litekey,xLabel,yLabel);
lineChartObj({
graphTarget: 6,
ordinal:0,
Data: [worldPop],
maxWid: width,
maxHt: height,
margin: margin0,
//axisType: "double positive",
type:"lines",
ticks:[[[1500,1600,1700,1800,1900,2000,2100],"bottom"],[0,"right"]],
xLabel:"Year",
yLabel: "Human Population",
areaMarks: {xBands: [[1500,1600],[1700,1800],[1900,2000]]}
});
var linkedRegions=["#label61"];
labeledImageObj({
target:6,
ordinal:1,
maxWid: width,
maxHt:height,
margin: margin0,
liteKey: [0,10,20,30,40,50],
labels: [
{labelText: "Bubonic Plague", labelX: width+30, labelY: 0},
{labelText: "Industrial innovation", labelX: width+30, labelY: height/6},
{labelText: "Modern medical practices", labelX: width+30, labelY: 2*height/6},
{labelText: "Agricultural innovation", labelX: width+30, labelY: 3*height/6},
{labelText: "Sanitation improvements", labelX: width+30, labelY: 4*height/6},
{labelText: "<span class='math'>CO<sub>2</sub> </span> emissions legislation", labelX: width+30, labelY: 5*height/6}
],
labelWid:120,
stateSwitch: "assess",
xStops: [1505,1605,1705,1805,1905,2005,2120],
yStops: [1,2,3,4,5,6,7,8,9]
});
d3.selectAll(".label")
.call(dragNDrop()); //to make the labels drag
var selectRegion = null;
d3.selectAll('.liteable')
.on("click", function(d,i) {
selectRegion = highlighter(d3.select(this),linkedRegions,selectRegion);
});
Q3Data = {
ansType: "labeling",
answer: {
content: {0:[width,0],1:[3*width/6,0],2:[4*width/6,0],3:[5*width/6],4:[4*width/6,0],5:[width,0]},
response: "Growth rate stays constant."
},
distractor:
[{
content: {1:[width,0]},
response: "Bubonic Plague occurred in the 1300s, and it reduced population rather than contributing to its growth."
},
{
content: {5:[width,0]},
response: "<span class='math'>CO<sub>2</sub></span> emissions legislation did not contribute substantially to population growth, although it was an improvement to ecological impact in the 20th century."
},
{
content: "D",
response: "This might happen but is it something is necessarily occurs?"
}
]
};
</script>
</body>