Learning Mapper

Inspiration

I think linear tutorials are not very good at teaching subjects like Artificial Intelligence, game development or software engineering. That is why we made Learning Mapper. It is a system that helps learners by turning goals into interactive maps with many branches.

What it does

Learning Mapper has a main features.

• Dynamic Roadmaps: It shows learning paths as graphs based on what you want to achieve.

• Deep-Dive Expansion: It adds sub-concept nodes to specific branches when you need them.

• Prerequisite Logic: It helps you keep track of your progress and only lets you move on to the topic when you have finished the previous ones.

• Tactile Canvas: You can drag nodes around freely. It has a smooth trailing effect.

How we built it

We built Learning Mapper using HTML, Tailwind CSS and JavaScript. We also used Vis.js to make the canvas. We made a special RoadmapController to handle the graph and the physics.

Challenges we ran into

We had a problems when we were building Learning Mapper.

• Graph Layout vs. Physics: The physics engine was not working well with the graph layout. We had to turn it off and on when people were interacting with it.

• Spatial Node Spawning: New nodes were appearing close together. We had to write an algorithm to make them appear in a circle around the parent node.

• Smooth Subtree Dragging: The child nodes were jumping around when you dragged the parent node. We had to make a loop to make them move smoothly.

Accomplishments that we're proud of

We are really happy with how Learning Mapper turned out.

• We made a smooth and interactive drag system.

• We made an engine that checks if you have finished all the prerequisites before moving on to the next topic.

• We made a feature that can reorganize the graph with one click.

What we learned

We learned a lot of things when we were building Learning Mapper.

We learned about graph data structures and how to make physics solvers.

We also learned about coordinate geometry and how to make animations that work well.

Whats next for Learning Mapper

We have a plans, for the future.

• We want to integrate Local Language Models so that you can generate roadmaps offline.

• We want to add resources to the nodes, like code snippets and links.

• We want to make it possible to export completed roadmaps into files.

Built With

• flask
• gemini-api
• javascript
• python