MindPilot AI

• 

  Thumbnail

🚀 Inspiration

As students and learners, we often struggle with processing long, dense study notes and textbooks. Reading through pages of text repeatedly is inefficient and lacks active recall. We were inspired to build MindPilot AI to solve this exact problem—turning passive reading into an interactive, gamified learning experience where notes instantly transform into quizzes and flashcards.

🛠️ How We Built It

MindPilot AI is built as a lightweight, lightning-fast web application using core web technologies:

• HTML5: For structured semantic markup and modern user interface layout.
• CSS3: For responsive design, custom CSS variables, gorgeous gradients, glowing buttons, and smooth dark/light mode theming.
• JavaScript (ES6+): For the core logic, dynamic string parsing of notes, interactive quiz navigation, real-time score calculation, and flashcard flipping.
• LocalStorage API: To securely store and persist user high scores across sessions.

🚧 Challenges We Faced

1. Dynamic Text Parsing: Initially, converting raw paragraphs into structured multiple-choice questions without a heavy backend AI server was tricky. We solved this by implementing smart text-splitting algorithms that extract key sentences and generate relevant context options dynamically.
2. Responsive UI/UX: Ensuring that the split-screen layout (notes editor on one side, quiz/flashcards on the other) looked and worked seamlessly on both desktop monitors and mobile screens required careful CSS Grid and Flexbox adjustments.

💡 What We Learned

• How to manage application state purely in Vanilla JavaScript without relying on heavy frameworks.
• The importance of user feedback loops (such as instant green/red color highlights during quizzes and loading state animations).
• How to design clean, modern, and accessible UIs using custom CSS themes.

Built With

• css3
• git
• github
• html5
• javascript