Inspiration
The inspiration for the STEM Flashcards project came from my desire to make STEM education more interactive and engaging. Learning complex concepts in Physics, Chemistry, and Math can be challenging, especially when relying on traditional methods like textbooks. Flashcards have been a proven learning tool for years, helping with memory retention through repetition and self-quizzing. My idea was to modernize flashcards by making them more interactive, accessible, and customizable for learners of all ages.
What It Does
The STEM Flashcards project is an interactive learning tool that allows users to:
- Learn STEM concepts by flipping through flashcards and revealing answers.
- Filter flashcards based on categories like Physics, Chemistry, and Math to focus on specific subjects.
- Create and add their own flashcards, enabling personalized learning.
- Engage in a quiz mode to test their knowledge with multiple-choice questions.
- Use text-to-speech to hear the questions, making it more accessible for auditory learners.
- Switch between dark and light modes for comfortable viewing.
How I Built It
I built the project using HTML, CSS, and JavaScript:
- HTML: Provided the basic structure of the flashcards, buttons, forms, and other user interface elements.
- CSS: Enhanced the visual appeal with a clean, modern look, including light and dark themes.
- JavaScript: Added interactivity, such as card flipping, filtering by category, quiz mode, text-to-speech, and storing preferences in local storage.
The app is a client-side solution, which means users can download and open it in their browser without the need for any server setup. JavaScript handles all the logic for navigating through cards, managing categories, and even generating multiple-choice quizzes.
Challenges I Faced
One of the main challenges I faced was ensuring that the "Next" and "Previous" navigation buttons worked seamlessly with filtered flashcards. The flashcard filtering logic needed to work dynamically, adapting both the content displayed and the progress indicators. Another challenge was implementing the text-to-speech functionality to make learning more accessible—this required exploring the Web Speech API and integrating it seamlessly into the card flipping experience.
What I Learned
Through the development of this project, I learned a lot about:
- User Interface Design: Creating a visually appealing but simple UI that keeps users engaged without distractions.
- JavaScript Interactivity: Handling card flipping, filtering, and other real-time interactions using vanilla JavaScript.
- Accessibility: Making the app more accessible by integrating text-to-speech to help users with different learning preferences.
- Local Storage: Utilizing browser local storage to save user preferences, such as dark mode settings.
What's Next
I plan to take this project further by:
- Adding user authentication to allow each user to create and save their own personalized sets of flashcards.
- Developing a sharing feature so users can share their flashcards with friends or classmates.
- Incorporating leaderboards and progress tracking to add a competitive element and motivate users to keep learning.
- Building a mobile-friendly version to enhance accessibility across different devices.
Log in or sign up for Devpost to join the conversation.