Inspiration
I was inspired to make this web app because, as someone who struggled with learning multiplication, it was tough to be motivated. It was hard to find something interactive at the time. I liked flashcards because it was very fun but also very entertaining since we played games with them as kids. This web app is very kid-friendly, bright, and simple to use for anyone.
What it does
A user will pick a number from 1-12. After picking that number, the user will answer each problem. If an answer is wrong, the user can flip the card to reveal the correct answer when they need help. They won't be able to proceed until the answer is correct.
How we built it
To build this, I used a Flask backend to generate multiplication flashcard data and serve webpages since I had to get this done quickly. The frontend was created with HTML, CSS, and Javascript. I used Python to generate each card based on the selected number. I had to organize the files in two other files to keep everything nice and organized in order to make this kid-friendly web app.
Challenges we ran into
One of the challenges I faced was getting Flask to work correctly. When the user entered a number, Flask did not correctly receive the user's selected number from the homepage and did not create the right deck. I also ran into some problems with card flipping logic, CSS animations, and keeping the flashcard front and back properly synced as the user moved between questions. The background image was another problem as it didn't display properly.
Accomplishments that we're proud of
I'm proud that I created a fully working flashcard web app in two days with all my other projects in the way. The flip card animation works great, and the app checks answers very well and guides the user through the deck.
What we learned
I learned how to use Flask with frontend code, how to use CSS animations, and how to handle user input. I also learned a lot about debugging a full-stack project. I've never built something like this before, so this project taught me some new skills.
What's next for Multiplication Flashcards
I'm not really sure what would be next for "Multiplication Flashcards". I think everything works out very well, and maybe I'll add a feature where users can create their own account to keep track of their learning in the future. As well as a scoreboard so users can see where they're at in their learning journey.
Log in or sign up for Devpost to join the conversation.