-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (116 loc) · 5.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Pathfinder</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS for the '3 Col Portfolio' Template -->
<link href="css/portfolio-item.css" rel="stylesheet">
<!-- p5.js -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
</head>
<body>
<br>
<label for="starts"> Choose your location:</label>
<select name="starts" id="start">
<option value="0">Science and Math Modular Classrooms</option>
<option value="1">Entrance to Science and Math Module</option>
<option value="2">Science and Math Module Hallway</option>
<option value="3">Entrance to Math Building from Module</option>
<option value="4">Furthest Front Side of Math Building</option>
<option value="5">Middle East Hallway of Math Building</option>
<option value="6">Furthest East Back Side of Math Building</option>
<option value="7">Furthest West Back Side of Math Building</option>
<option value="8">Middle West Hallway of Math Building</option>
</select>
<br>
<label for="ends"> Choose your destination:</label>
<select name="ends" id="end">
<option value="0">Science and Math Modular Classrooms</option>
<option value="1">Entrance to Science and Math Module</option>
<option value="2">Science and Math Module Hallway</option>
<option value="3">Entrance to Math Building from Module</option>
<option value="4">Furthest Front Side of Math Building</option>
<option value="5">Middle East Hallway of Math Building</option>
<option value="6">Furthest East Back Side of Math Building</option>
<option value="7">Furthest West Back Side of Math Building</option>
<option value="8">Middle West Hallway of Math Building</option>
</select>
<br><br>
<button onclick="collect()">Submit</button>
</form>
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Pathfinder
<br>
<small>Efficiently Walk Across Campus</small>
</h1>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div id="canvas"></div>
</div>
<div class="col-md-4">
<h3>Project Description</h3>
<hr size="8" width="30%" color="black">
<p>Among the students of Lexington High School, there’s one gripe they all share: how difficult it is to traverse its campus. Who hasn’t gotten lost once or twice, arriving late to a class or not being able to find a room. We present to you a solution: LHS Path Finder! Never get lost again!
</p>
<hr size="8" width="15%" color="black">
<p>
This project was our first try at a hackathon. As three freshmen at Lexington High School, we needed to find an idea that we all felt passionate about, and after talking for a bit about our experiences in school, we found it. The undertaking of this project was not an easy task. All of us being new to creating web apps, we faced numerous roadblocks. We didn’t know how to start, we didn’t have enough time, and halfway through, we hadn’t made much progress at all. It would be a lie if we said there weren't times when we felt hopeless and wanted to quit.
But through it all, we helped each other with problems, encouraged each other to keep going, and slowly but surely, our exclamations of “We’re never going to get this finished in time!” turned into “Wait, hold on, this is actually working.”
The end result is what we have here today.
</p>
<hr size="8" width="15%" color="black">
<p>
LHS Path Finder helps students find the fastest and shortest path to get to their classes across campus using graph theory (and data stored on the website about routes across campus) and Dijkstra's Algorithm to mathematically determine the most efficient pathway throughout campus to the end point. Our initial idea was to incorporate all of Lexington High School into the pathfinder, but after seeing our time constraints, we decided to just incorporate one building. It was easy to choose which one; the Math building was where computer science classes were held, after all.
In the future, we plan to expand our project to include all of LHS, and for it to be more detailed, including more classrooms and significant locations. In time, we might even incorporate other schools!
</p>
<hr size="8" width="15%" color="black">
<h3>Project Details</h3>
<ul>
<li>Frontend is created with the Bootstrap CSS Framework for a better aesthetic.</li>
<li>Backend is written with a combination of NodeJS, JQuery, and Bootstrap. </li>
<li>Dijisktra's Algorithm is efficiently implemented in Javascript, displaying the most optimal path across campus on a map below.</li>
<li>Users can view the final optimal path that they can walk across campus along with a guide) below the returned map.</li>
</ul>
</div>
</div>
</div>
<!-- /.container -->
<div class="container">
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Made by Kevin Zhu, Stephanie Wan, and William Zhang</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/index.js"></script>
</body>
</html>