Stem Made Simple Home Screen - Light Mode
STEM Made Simple Math Lesson - Dark Mode
STEM Made Simple My Progress Screen - Light Mode

Inspiration

STEM subjects like coding, electricity, and mathematics can feel intimidating when students are first introduced to them. I wanted to create a learning experience that makes subjects like these more approachable, and interactive, especially for middle school students who are still discovering their interests.

What it does

STEM Made Simple is an interactive educational website designed to help middle school students explore three STEM topics : Coding, Electricity, and Math.

Features include:

Interactive lessons: Introduce concepts through approachable explanations and examples.
Knowledge-check quizzes: Let students test their understanding of each topic.
Instant feedback: Provide feedback on answers and encourage continued learning.
Completion summaries: Display quiz scores, percentages, and encouraging messages based on performance.
My Progress dashboard: Track completed quizzes, individual topic scores, and average quiz performance.
Saved progress: Use browser local storage to retain quiz results between visits on the same browser. Light and dark themes: Let users choose their preferred visual appearance.

How we built it

I built STEM Made Simple using HTML, CSS, and JavaScript. HTML structures the content, CSS controls the visual design and layouts, and JavaScript powers the interactive lessons, quiz logic, answer feedback, completion screens, and progress dashboard.

JavaScript also manages quiz state, calculates scores and percentages, and updates the interface based on student responses. Browser local storage saves quiz results so students can revisit their progress.

Challenges we ran into

One of the main challenges was ensuring that the quiz, completions screen, and progress dashboard displayed consistent results. During testing, I discovered that the completion screen continued displaying its default score even when the progress dashboard showed correct results. The issue was traced the completion screen's score display, so I updated the JavaScript to populate the final score and total number of questions. I tested the fix locally and verified it on the deployed website.

Accomplishments that we're proud of

I am proud to have turned an educational idea into a working website. I am especially proud of the implementation of persistent quiz results without requiring user accounts, creating both light and dark themes, and debugging an issue that affected the consistency of quiz scores across screens.

What we learned

Building this project strengthened my understanding of JavaScript event handling, state management, DOM manipulation, conditional logic, and browser local storage.

Beyond the technical skills, I learned that building a useful application requires attention to the entire user journey. Features must work together reliably, and make the experience straightforward for users.

What's next for STEM Made Simple

I would like to expand STEM Made Simple with additional STEM topics, more lessons and quizzes, and a history of multiple quiz attempts so students can see their progress over time.

I also want to continue improving accessibility, mobile usability, and the overall learning experience. The long-term goal is to make STEM education feel less intimidating and more engaging for students who are just beginning to explore these subjects.