Inspiration
There is endless quality information on the internet, but it is not organized properly. This makes it inefficient for individuals to find ways to learn the skills they need to accomplish a goal. For example, if you want to build a blog with CRUD operations without any prior technical knowledge, how do you know which skills you need and where to find the most valuable resources? The lack of guidance is frustrating, often causing learners to give up or waste time going down the wrong path. Additionally, we attended a high school that struggled with a problem that often goes unspoken but is prevalent throughout Bay Area schools. Although the largest ethnic group at our high school is Hispanic, there are rarely Hispanic students in advanced classes, largely because the wealthier White and Asian students attended well-resourced elementary and middle schools. Students from lower-income zip codes did not have the same preparation and simply needed to fill gaps in their knowledge, which can be difficult to identify.
What it does
For educators, Sprout is a way to organize knowledge that does justice to the complex connections between academic disciplines. Educators can add connections between knowledge nodes to show the progression from one topic to another, while also making important resources accessible to students beyond their own classroom. For students, Sprout provides feedback on strengths and weaknesses and generates learning paths to help individuals achieve their goals. Through practice problems, a learner can measure their mastery of prerequisite skills, like “solving linear systems of equations” or “semantic HTML.” Sprout can also generate a personalized course that highlights the path to learning a complex topic or creating a project.
How we built it
Embracing the fact that information is interconnected and messy, we opted to organize topics in a graph, making it easy to represent complex connections between subjects. Each topic is a node, and contains information about learning resources and its prerequisite skills. We used D3.js to create the visualization of the data. We used a recursive depth-first search algorithm to create the personalized learning plan. The structure of the algorithm makes the learning progression logical, so that the student focuses on one topic at a time and goes from general, conceptual concepts to more specific and advanced topics.
Challenges we ran into
We ran into problems with Pinia, Vue’s state-management solution. We encountered a very goofy bug that we were trying to fix between the hours of 1:00 and 4:00 AM -- our website URL is an homage to the frustrations that we encountered. Additionally, as beginner hackers, we had limited knowledge of Vue and we had to learn how to work with D3.js from scratch at the hackathon.
Accomplishments that we're proud of
We exceeded our own expectations for this hackathon! We’re proud of learning new technologies on the spot and becoming more comfortable with partner web development. Our idea originated from a genuine desire for organized academic resources and increased accessibility, and we’re delighted that our project has a social impact!
What we learned
- Using D3.js to create graphical visual representations
- Using Node.js and npm for development
- Implementing recursive depth-first search algorithms
- Deploying code to a web server using Firebase
- Improving Vue and Pinia skills
What's next for Sprout: The Modernized Way to Learn
Overall, we aim to empower educators everywhere to contribute to the database and integrate Sprout into their curriculum. For this to happen, we would want to integrate Neo4j (a graph-based database) so educators can add content to the learning tree, which would be accessible to all students with an individual profile. This content would include practice problems, articles, lecture recordings, and more. Finally, a progress tracking feature that continuously updates mastery levels based on performance in practice problems would improve Sprout’s functionality.
Built With
- d3.js
- pinia
- vue
Log in or sign up for Devpost to join the conversation.