forked from ceefoster/peabody-bem
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathPeabody.html
More file actions
227 lines (206 loc) · 12.8 KB
/
Peabody.html
File metadata and controls
227 lines (206 loc) · 12.8 KB
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
<!DOCTYPE html>
<html>
<!-- <html class = "content">
--><!--from tinymce, changes style of whole page-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/svg-style.css">
<script src = "js/jquery-1.11.3.min.js"></script>
<script src = "js/d3.min.js"></script>
<script src="js/script.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!--adding TinyMCE-->
<link rel='stylesheet prefetch' href='http://fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css'>
<link rel='stylesheet prefetch' href='http://www.tinymce.com/css/common.min.css'>
<link rel='stylesheet prefetch' href='http://www.tinymce.com/css/docs.min.css'>
<link rel="stylesheet" href="TinyMCEtest.css">
<link rel = "stylesheet" href = "css/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300|Open+Sans:400,600' rel='stylesheet' type='text/css'>
<script src = "js/respond.min.js"></script>
<title>Peabody</title>
</head>
<body>
<!--using bootstrap to organize elements on page, so container/row/col-md-12 etc come from Bootstrap files-->
<div class = "container">
<div class="row">
<div class="col-md-12">
<h1>Peabody Visual History</h1>
<div class="col-md-8">
<p>Based on work from <a href="https://en.wikipedia.org/wiki/Elizabeth_Peabody">Elizabeth Peabody</a>, an American educator in the 19th century, this interactive tool modernizes a method of learning history chronilogically. Each square represents a year in a century, starting at 0 in the upper left hand corner and ending in 9 in the bottom right hand corner. Each year square is subdivided into 9 squares, which each have an event type. These types are shown in the table on the right. The colors in the color palette represent the countries involved in the historical timeline. </p>
<p>To make your own chronological history chart, take a list of events and fill in the squares accordingly. Click on the color for the country in the palette, and then fill in the square that represents the event type. Clicking on the square once makes it the solid color. To remove the color, click again. To split the colored square with another color, if the nations share the event, click again. Click again to swap the slant. Click one more time to fill the square with the new color.</p>
</div>
<div class="col-md-4">
<table style="width:100%" id="typeReference">
<tr>
<td>Battles, Sieges, Beginnings of War.</td>
<td>Conquests, Annexations, Unions.</td>
<td>Losses and Disasters.</td>
</tr>
<tr>
<td>Falls of States.</td>
<td>Foundations of States and Revolutions.</td>
<td>Treaties and Sundries.</td>
</tr>
<tr>
<td>Births,</td>
<td>Deeds,</td>
<td>Deaths, of remarkable individuals.</td>
</tr>
</table>
</div><!--close col-md-4-->
</div><!--close "col-md-12"-->
</div><!--close row-->
<div class="col-md-4"> <!--column for colorPalette and event list-->
<div id="colorPalette">
<h2>Color Palette</h2>
<div class="panel-group-cp" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingColorPal">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseColorPal" aria-expanded="true" aria-controls="collapseOne">
Customize Color Palette
</a>
</h4>
</div>
<div id="collapseColorPal" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingColorPal">
<div class="panel-body">
<form id="editForm">
<p>Instructions: Add up to 10 countries.</p>
Name of country to add:</br>
<input type="text" id="newCountry" value="">
<button type = "button" id="addCountryButton" >+</button> <!--need to add type="button" to work inside form -->
<br>
Name of country to remove:</br>
<input type="text" id="removeCountry" value="">
<button type = "button" id="removeCountryButton" >-</button><br><br>
<button type = "button" id="removeAllCountriesButton" >Remove all countries</button><br><br>
Select color scheme:
<fieldset id="cpRadio" name="argh">
<p><label for="g1"><input type="radio" name="cpOptions" id="g1" value="1" checked> 1</label></p>
<p><label for="g2"><input type="radio" name="cpOptions" id="g2" value="2"> 2</label></p>
<p><label for="g3"><input type="radio" name="cpOptions" id="g3" value="3"> 3</label></p>
<p><label for="g4"><input type="radio" name="cpOptions" id="g4" value="4"> 4</label></p>
<!--<p><label for="g5"><input type="radio" name="cpOptions" id="g5" value="5"> 5</label></p>
<p><label for="g6"><input type="radio" name="cpOptions" id="g6" value="6"> 6</label></p>
<p><label for="g7"><input type="radio" name="cpOptions" id="g7" value="7"> 7</label></p>-->
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div> <!--close color palette row-->
<div id="eventList" >
<h2>Events</h2>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Sample Event List: Chronological List of the 16th Century
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ol id="sampleList">
<li><button id="showallb">Show me all</button></li>
<li>1501. Henry VII. grants patent for colonizing America. <em>To represent this event, the 6th subdivision of the square on the upper left hand is painted purple, which is the color for England.</em><button class="showme" id="England_type5year0">Show Me</button></li>
<li>1512. Ponce de Leon discovers Florida. <em>Eighth subdivision of the twelfth square is brick red for Spain.</em><button class="showme" id="Spain_type7year11">Show Me</button></li>
<li>1517. Sebastian Cabot's last voyage in the English service. <em>Eighth subdivision, purple.</em><button id="England_type7year16">Show Me</button></li>
<li>1520. Vasquez de Ayllon’s Piracy on Chicora. <em>Eighth, brick red.</em><button class="showme" id="Spain_type7year19">Show Me</button> </li>
<li>1523. Verrazzani explores American coasts for France. <em>Eighth subdivision, blue, for France.</em><button class="showme" id="France_type7year22">Show Me</button></li>
<li>1525. Stephen Gomez tries to discover North West Passage to India for Spain. <em>Eighth subdivision, brick red.</em><button class="showme" id="Spain_type7year24">Show Me</button></li>
<li>1526. Pamphilo de Narvaez attempts to conquer Florida. <em>Eighth, brick red.</em><button class="showme" id="Spain_type7year25">Show Me</button></li>
<li>1534. James Cartier discovers River St. Lawrence. <em>Eighth, blue. </em><button class="showme" id="France_type7year33">Show Me</button></li>
<li>1537. Ferdinand de Soto attempts to conquer Florida. <em>Eighth, brick red.</em><button class="showme" id="Spain_type7year36">Show Me</button></li>
<li>1540. Roberval and Cartier try in vain to colonize Canada. <em>Eighth, blue. </em><button class="showme" id="France_type7year39">Show Me</button></li>
<li>1542. Ferdinand de Soto dies on the Mississippi. <em>Ninth, brick red. </em><button class="showme" id="Spain_type8year41">Show Me</button></li>
<li>1562. Coligny sends a Huguenot Colony to America. <em>Eighth, blue.</em><button class="showme" id="France_type7year61">Show Me</button></li>
<li>1565. St. Augustine, founded by the Spanish Melendez, who conquers the French colony. <em>First and upper half of second, brick red, to represent the conquering Spaniards; also, fifth to represent the foundation of St. Augustine; and eighth, the deed of Melendez, a remarkable person. Blue in the lower half of the second, and in the third, to represent French loss. </em><button class="showme" id="special">Show Me</button></li>
<li>1576. Martin Frobisher renews English Explorations. <em>Eighth, purple.</em><button class="showme" id="England_type7year75">Show Me</button></li>
<li>1578. Sir Humphrey Gilbert’s Voyage and Death. <em>Eighth, purple.</em><button class="showme" id="England_type7year77">Show Me</button></li>
<li>1579. Sir Francis Drake discovers Oregon, and names it New Albion. <em>Eighth, purple.</em><button class="showme" id="England_type7year78">Show Me</button></li>
<li>1584. Sir Walter Raleigh gets patent to colonize. <em>Eighth, purple.</em><button class="showme" id="England_type7year83">Show Me</button></li>
<li>1585. Sir W. R.’s unsuccessful colony at Roanoke, carried out by Sir Richard Grenville. <em>Eighth, purple.</em><button class="showme" id="England_type7year84">Show Me</button></li>
</ol>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Make your own
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<form id="customEventsForm">
<p id="instructionsOrTitle">Type or paste your own list of events.</p>
<div id="customEventsContainer"><textarea id="userEventsInput" value=""></textarea></div>
<div id="titleInstruct"><p id="giveTitle">Give your events a title:</p></div>
<input type="text" id="userTitleInput" value="">
<p id="eventsList"></p><!--where the events go once added -->
<!--either the "add" button or the "edit button" or the "update button"-->
<div id="buttonContainer"><button type = "button" id="addEvents" >Add</button></div>
</form>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title editable">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Testing TinyMCE
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body editable" id="rar">
<p>body</p>
</div>
</div>
</div>
<!-- <div class="panel panel-default">
<div class="panel-heading" role="tab" id="timelineGen">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#timeline" aria-expanded="false" aria-controls="timeline">
Generate Events Timeline
</a>
</h4>
</div>
<div id="timeline" class="panel-collapse collapse" role="tabpanel" aria-labelledby="timelineGen">
<div class="panel-body">
</div>
</div>
</div> -->
</div>
</div><!--close col-md-4-->
<!--container-->
</div> <!--close event list row-->
<div class="col-md-8"> <!--column to hold chart and timeline-->
<div id="gridContainer" class="row">
<h2 id="chartTitle">Chart: Chronological List of the 16th Century</h2>
<!--row for chart-->
</div>
<div class="row"><!--row with timeline-->
<div id="timelineContainer">
<h2>Timeline</h2>
<button type="button" id="timelineGen">Generate Timeline</button>
<div id="timelineViz"></div>
<button type="button" id="clearBtn">Clear All</button>
</div>
</div><!--close row-->
</div> <!--close column holding chart and timeline-->
<!--close container-->
</div>
</svg>
<!--adding TinyMCE-->
<script src='http://cdn.tinymce.com/4/tinymce.min.js'></script>
<script src="TinyMCEtest.js"></script>
</body>
</html>