-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
173 lines (173 loc) · 11.2 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
168
169
170
171
172
173
<html>
<head>
<title>Campus Journeys Data</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<h1 class="text-center">CS 467 Campus Journeys</h1>
<div class="col-md-offset-1 col-md-10">
<div class="row" id="disclaimerRow">
<div class="col-md-12">
<p>Our goal with this visualization is to show how current students move around campus over the course of different time periods. We will require you to fill out some information such as what you're currently studying and what your year in school is.</p>
<p>We currently have two options for you to input location data: 1) Google Location History (if you use it), 2) our dedicated calendar.</p>
<p>All of your data will be anonymized. We promise not to reveal any identifying information about you tied to your locations or times.</p>
<button class="btn btn-primary" onclick="revealRow('idGenerateRow')">Continue</button>
</div>
</div>
<div class="row breaker-row"></div>
<div class="row" id="idGenerateRow">
<div class="col-md-12">
<p>First, let's generate a random ID for you. Your random ID is <b><span class="randID"></span></b>.</p>
<form class="form" id="userInputFormSubmit">
<p>Please enter the following form fields before continuing.</p>
<div class="col-md-6">
<div class="form-group">
<label>Major</label>
<select class="form-control" id="majorDropdown" required>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Year in School</label>
<select id="yearDropdown" class="form-control" required>
<option value="freshman">Freshman</option>
<option value="sophomore">Sophomore</option>
<option value="junior">Junior</option>
<option value="senior">Senior</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Does your major require you to double major or minor?</label>
<div class="radio">
<label>
<input name="yesnoDoublemajor" type="radio" value="yes"> Yes</input>
</label>
</div>
<div class="radio">
<label>
<input name="yesnoDoublemajor" type="radio" value="no"> No</input>
</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>When you first started at UIUC, did you come in with AP/IB or transfer credit?</label>
<div class="radio">
<label>
<input name="apib" type="radio" value="yes"> Yes</input>
</label>
</div>
<div class="radio">
<label>
<input name="apib" type="radio" value="no"> No</input>
</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>If you are double/triple majoring, add those below, one per line.</label>
<textarea id="addlMajors" class="form-control" rows="2"></textarea>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>If you are minoring, add those below, one per line.</label>
<textarea id="addlMinors" class="form-control" rows="2"></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div id="inputOptions">
<p>Thanks for submitting your preliminary information. How would you like to input your data?</p>
<div class="btn-group">
<button type="button" class="btn btn-default" onclick="revealRow('userInput')">Input Your Own</button>
<button type="button" class="btn btn-default" onclick="revealRow('locHistory')">Google Location History</button>
</div>
</div>
</div>
</div>
<div class="row breaker-row"></div>
<div class="row" id="userInput">
<div class="col-md-12">
<p>Click on today to display the calendar. Fill out your weekly schedule. Once you're ready, click Save.</p>
<button class="btn btn-primary" onclick="confirmSubmissionUser()">Save</button>
<div id="calendar"></div>
<div id="eventModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
<h4>New Event</h4>
</div>
<form class="form" id="userEventForm">
<div class="modal-body">
<div class="form-group">
<label>Location: feel free to be general if it's someplace like your current home.</label>
<input type="text" class="form-control" id="locationOfEvent" required></input>
</div>
<div class="form-group">
<label>Activity Type</label>
<select class="form-control" id="activityTypeDropdown" required>
<option value="class">Class</option>
<option value="study">Studying</option>
<option value="fun">Fun</option>
<option value="rso">RSO</option>
<option value="other">Other</option>
<option value="sleep">Sleep</option>
</select>
</div>
<div class="form-group hidden">
<label>Start:</label>
<input type="hidden" class="form-control" id="startTime"></input>
</div>
<div class="form-group hidden">
<label>End:</label>
<input type="hidden" class="form-control" id="endTime"></input>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Cancel</button>
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="locHistory">
<div class="col-md-12">
<h5>How to obtain Location History data</h5>
<ol>
<li>Go to <a href="https://takeout.google.com/settings/takeout" target="_blank">Google Takeout</a>.</li>
<li>Make sure Location History is checked.</li>
<li>Click Create Archive.</li>
<li>Extract the zip file.</li>
<li>Upload the JSON file to this <a href="https://drive.google.com/folderview?id=0B453AFEDjNjyMnVQNkR0blpjazg&usp=sharing" target="_blank">Google Drive folder</a>. The name of the file should be <span class="randID"></span>.json.</li>
</ol>
<button class="btn btn-primary" onclick="confirmSubmissionGoogle()">I have completed the above steps</button>
</div>
</div>
<div class="row" id="thanks">
<h3 class="text-center">Thanks for submitting!</h3>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>