The Tree of Knowledge grew out of a common dilemna we had when trying to learn new skills. Often, we did not know where to jump into a new skill, or the literature on that new skill was disorganized and lacked focus. We decided that a tree structure would provide an excellent means of organization, and would allow us to show the connections between skills. As soon as we saw the fliers for HackUMBC go up, we knew we had to build it.

What it does

 The Tree of Knowledge is a website which allows users to easily jump into a new topic. The demo we built today uses programming as a broad topic area, but the site could be extended to other STEM fields, and even to the humanities. Categories are then listed under the broad topic area (in this case Java and Python), and from there users can open up links which teach them everything from basic syntax to more advanced functions. We have made every effort to source the links from reputable websites, and we have also added an editing feature so that selected users may make changes to the site.

How we built it

 The Tree of Knowledge relies heavily on JavaScript; in particular, we made extensive use of the AngularJS library. The tree is stored as a JSON (JavaScript Object Notation) object, which is stored server side and sent to the client side via a Java Rest API. From there, the JSON is parsed by the JavaScript, and topic names and other content are printed as tables. From here, some CSS and Bootstrap magic is used to make the diagram display nicely. It is worth noting that editing the webpage in browser actually edits the JSON. 

Challenges we ran into

 Our biggest issue was visualizing the JSON in a way that looked like a tree diagram. Originally, we had planned to use lines drawn with the Canvas tool, but we had difficulties sizing and resizing the canvas. We later tried using SVG lines, before deciding to ditch the idea of lines entirely. We found that the site looked enough like a tree diagram as is that drawing lines between the elements would have created unnecessary clutter.

Accomplishments that we're proud of

 Overall, we are very proud of our finished product. We believe that our demo is solid enough to demonstrate the format we have created, and that we could apply this format to other areas. We are proud of the fact that The Tree of Knowledge is a simple yet powerful format for organizing data that could be useful to educators as well as learners.

What we learned

 Entering the hackathon, Zach and I (Matthew) had a very minimal understanding of Java and JavaScript. We learned very much about these two useful languages and how they can interact to produce complex web apps. Mark had a relatively high level of knowledge of both of those languages going into this project, and he too was able to advance his skills, as well as learn about how JavaScript and Bootstrap integrate into webpage design. 

What's next for The Tree of Knowledge

 Our development team hopes that The Tree of Knowledge can be expanded upon and developed into a useful tool for learners and educators in all fields. We will either expand the site to cover topics besides programming, or find a way to create a templated version of the tree that can be filled with custom content. Furthermore, we would like to integrate accounts somehow so we can designated editors besides ourselves, and so that people can keep track of visited parts of the tree. The Tree of Knowledge is in its elementary stages, but with the right support, it can grow into something much greater.
Share this project: