Benetech's vision of incorporating interactive math learning to students.

What it does

Inspired by Benetech Lab's beta-program MathShare, Draw-A-Figure is a stand-alone widget allowing for students and educators to choose from a library of shapes, input specific parameters, and automatically generate those shapes on a graph.

How we built it

We were asked to use vanilla HTML/CSS/Javascript to create the widget that Benetech can use. We utilized HTML Canvas and CSS for the visual aspects including designing the button layout, color theme, and shape.

Challenges we ran into

We faced many challenges individually and as a team. This is the first time that any of us had use any of these languages. This was also all of our first hackathons. We had to learn a lot in a short amount of time.

Accomplishments that we're proud of

We struggled, we shed tears, but we persevered. We managed to learn and incorporate three different languages and connect them to each other in a meaningful manner.

What we learned

We learned how to code for the first time in HTML, CSS, and JS. We also learned the weird thing that in JS, 100 + 100 = 100100. Interesting. We also learned how fun it is at Hackathons.

What's next for Draw-A-Figure

Streamlining graphs and using SVG to create the shapes. Add more shapes and show more properties of them.

Built With

Share this project: