Computer science students often struggle with the concept of black box thinking while learning about algorithms. We built this application to help visualize the process of black-box thinking in a fun and engaging way.
What it does
Our project is built to ease the process of learning algorithms and abstract thinking for computer science students. It allows you to try to solve problems by connecting blocks ("aka abstractions") and solve a given problem using an intuitive user interface. Once a technique is tried, you can verify your solutions!
How we built it
The frontend is implemented with Bootstrap and uses p5.js as the block drawing utility. We also made use of the Vanta.js library for the interactive background on the about page. We represented each problem as a graph using an adjacency list data structure to store the valid configuration of blocks. We then created an algorithm that traverses the graph, generating each block with the correct number of inputs and outputs. When the user connects an input node to an output node, we update the connections in another graph that gets compared to the original graph when the user clicks the validate button.
Challenges we ran into
The p5.js library is great for quickly drawing things on an html canvas, but one issue we ran into was the word-wrap in text boxes. Originally, when the contents of one of the boxes were split onto multiple lines, they would get hyphenated and it looked very ugly. After a lot of unsuccessful searching the web for solutions, we decided to implement word-wrap from scratch, which ended up working great!
Accomplishments that I'm proud of
First off, we are very proud that we were able to pull this off in the 36 hour time period! The block editor is very intuitive and works amazingly well, and the drawing is smooth and seamless. We are also proud of how well we were able to stick to the initial vision of this application and see it through to the end.
What I learned
We learned that it is ok to backtrack on some features and either implement them later or come up with an entirely different feature!
What's next for LeetGraph
In the future, we are looking to add a custom level designer and all the users to save progress on the problems that they have currently solved. We are also planning to add a collaborative, multiplayer mode where players can communicate with each other solve solve problems under time pressure!