forked from charleswang007/majoraha
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
167 lines (152 loc) · 6.54 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<!-- adapted from http://eikes.github.com/facetedsearch/ -->
<head>
<title>Faceted Major Search</title>
<link type="text/css" rel="stylesheet" href="css/main.css">
<link href="js/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/tooltip.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
<script src="js/facetedsearch.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/fancybox/jquery.fancybox-1.3.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$('.iframe').fancybox({
width : '100%',
height : '100%',
titlePosition: 'outside'
});
}); // end ready
</script>
<script type="text/javascript">
function print(){
var str = "";
var majors = document.getElementById("majorList").getElementsByTagName("li");
for (var i=0;i<majors.length;i++)
{
var text = majors.item(i).getElementsByTagName("a").item(0).getAttribute("title").replace("_"," ").replace("_"," ").replace("_"," ") + ", ";
console.log(text);
str = str.concat(text);
}
var str_final = str.substring(0, str.length - 2).concat("\n\nCongratulations on finding your majors on MajorAha.com!");
alert("Your selected majors are: " + str_final);
}
</script>
</head>
<body>
<!-- html boilerplate -->
<div id="container">
<div id="title-panel">
<span id="title"> MajorAha --- A College Major Search Browser and Information Provider</span>
<span id="button-panel">
<a class="btn1 green iframe" title="about" href="carousel.html">About</a>
<a class="btn1 blue iframe" title="team" href="team.html">Team</a>
<a class="btn1 orange iframe" title="major list" href="major.html">Major List</a>
<a class="btn1 red iframe" title="data visualization" href="moredata/vis.html">More Data</a>
<a class="btn1 purple iframe" title="reference" href="reference.html">Reference</a>
</span>
</div>
<p> </p>
<div> </div>
<div id="facets"></div>
<div id="results"></div>
</div>
<!--data.js holds the information about instances. You will add your data here -->
<script src="js/data.js"></script>
<script>
$(function() {
$( "#dialog" ).dialog({
show: {effect: 'fade', duration: 2000},
draggable: false,
resizable: false,
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
<script>
var itemsTemplate =
'<div></div><button>Show More</button>';
var itemTemplate =
'<a class="fade iframe imglink" href="major.html" target="_blank"> <img width="100%" src="<%= obj.imageURL %>"></a>' +
'<h5 class="itemtitle"><span class="trigger" data-tooltip="#tip1" id=<%= obj.titleshort %>><%= obj.title %></span></h5>' +
'<ul class="tags">' +
'<% if (obj.facet1) { %><li><%= obj.facet1 %></li><% } %>' +
'<% if (obj.facet2) { %><li>ASS: <%= obj.facet2 %> (<%= obj.ASS %>)</li><% } %>' +
'<% if (obj.facet3) { %><li>AMS: <%= obj.facet3 %> (<%= obj.AMS %>)</li><% } %>' +
'<% if (obj.facet4) { %><li>GIP: <%= obj.facet4 %> (<%= obj.GIP %>)</li><% } %>' +
'</ul>' +
'<p></p>' +
//'<p class="desc"><%= obj.description %>' +
'<div class="select" id=<%= obj.titleshort %>- name=<%= obj.titleshort %>_button\'></div></p>'
var facetTemplate =
'<h4 class=facettitle><%= title %></h4>';
var facetItemTemplate =
'<span class=facetitemname><%= name %></span> ' + '<span class=facetitemcount>(<%= count %>)</span>';
//part 1. update the names of these example facets to match the name of your own facet
//part 2. add 2 more facets to organize your animals
var settings = {
items : instances,
//These are the facet titles that get shown in the user interface. You will ultimatley add facet4
//and facet5 and rename the facets to match the facets you chose to organize your instances
facets : {
'facet1' : 'Category',
'facet2' : 'Average Starting Salary (ASS)',
'facet3' : 'Average Mid-Career Salary (AMS)',
'facet4' : 'Growth In Pay (GIP)'
//'facet5 : 'Another Facet'
},
resultSelector : 'results',
facetSelector : 'facets',
itemTemplate : itemTemplate,
itemsTemplate : itemsTemplate,
facetTemplate : facetTemplate,
facetItemTemplate : facetItemTemplate,
paginationCount : 100,
orderByOptions : {'firstname': 'First name', 'lastname': 'Last name', 'category': 'Category', 'RANDOM': 'Random'}
}
var fs = new FacetedSearch(settings);
var itemsView = new ItemsView({
itemsTemplate: settings.itemsTemplate,
itemTemplate: settings.itemTemplate,
el: document.getElementById(settings.resultSelector),
collection: fs.get("items")
});
itemsView.render();
var facetsView = new FacetsView({
facetTemplate: settings.facetTemplate,
facetItemTemplate: settings.facetItemTemplate,
el: document.getElementById(settings.facetSelector),
facets: fs.get("facets")
});
facetsView.render();
</script>
<div id="dialog" class="foo" title="Info-153 Final Proejct">
<p>Welcome to MajorAha.com!!</p>
</div>
<div class="tooltip" id="tip1">
<h2>A Tooltip</h2>
<p id="tooltip_text">some basic info</p>
</div>
<div id="results2">
<p>Your selected majors <br/> (can be deleted or sorted):
<form name="form1" method="post" action="" onSubmit="JavaScript:print()">
<div class="results2-1" id="majorList">
<ul id="sortable" class="ui-sortable">
</p>
<input type="submit" name="answer" id="answer" value="Export">
</form>
</ul>
</div>
</div>
</body>
</html>