Blink and you'll miss it!

Inspiration

Flashcards are great for learning, but they can get repetitive and boring. We wanted to create a way to make self-study more engaging and enjoyable by turning simple flashcard-style quizzes into a fun, interactive challenge that keeps users on their toes... literally making learning a game you can’t blink and miss!

What it does

"Blink and you'll miss it!" is a web-based quiz platform where users answer Long Answer Questions or Multiple Choice Questions (MCQs), which are uploaded by the user or chosen from pre-existing sets. The twist: if you blink while answering, the question is skipped automatically, using MediaPipe blink detection. After completing the quiz, users can self-assess (with auto-assessment available for MCQs), view statistics, and export their results as PDF or CSV.

How we built it

We built the application using basic web technologies (HTML, CSS, and JavaScript) for maximum accessibility. Blink detection relies on MediaPipe, which processes webcam input to determine if the user blinks. For exporting results, we used custom JavaScript functions for CSV and the jsPDF library for PDF output. To shower confetti fireworks if the user scores 80+% we used a JavaScript function loaded from CDN. The app runs entirely in the browser: no backend or server setup required.

Challenges we ran into

One of the main challenges was implementing accurate real-time blink detection. To address this, we used the MediaPipe FaceMesh library, which offers robust facial landmark and eye tracking capabilities. Integrating MediaPipe involved configuring facial landmark indexing, tuning the Eye Aspect Ratio (EAR) formula, and handling asynchronous video processing in the browser. We also needed to dynamically adjust blink detection thresholds based on real-time FPS calculations to maintain reliability across different devices and conditions.

Another area that required significant attention was file parsing for both Long Answer Questions and MCQ formats. We had to design a parsing system that could reliably interpret different file structures, handle user formatting errors gracefully, and provide useful feedback when something went wrong. Ensuring the parser was flexible enough to accept common variations, yet strict enough to prevent quiz-breaking problems, was a complex balancing act.

Another technical challenge was introducing a visual reward (firework effect) to the website when the user achieves 80% or more in their quiz. We used a pre-existing JavaScript function loaded from CDN and took extra caution to ensure seamless integration.

Orchestrating all these libraries: MediaPipe, fireworks, and our custom code, while keeping the app accessible and intuitive, was both a challenge and a rewarding learning experience.

Accomplishments that we're proud of

We’re especially proud of how Blink and You’ll Miss It! evolved into more than just a fun quiz app, it became a thoughtful experiment in reimagining digital learning experiences. Our focus on real-time blink detection led to a unique, high-stakes interaction model, and the quiz format is designed to keep users engaged and attentive. Accessibility was a priority, reflected in choices like using a dyslexia-friendly font (Sans serif) to support readability for a wider audience. Every aspect, from intuitive file parsing for custom question uploads, playful features like fireworks and face tracking, to automated MCQ grading, was designed to make educational technology more interactive, memorable, and enjoyable. Our commitment to thoughtful design and creative use of technology demonstrates our goal to create learning tools that are both innovative and inclusive.

What we learned

Through building Blink and You’ll Miss It!, we gained valuable insights into the intersection of technology, user experience, and playful design. On the technical front, we developed hands-on experience with MediaPipe for real-time blink detection, integrated webcam functionality, and created interactive web features using HTML, CSS, and JavaScript. We learnt how to build a flexible quiz system capable of handling multiple question formats while delivering meaningful feedback and supporting exports to PDF and CSV. Moreover, we explored how humour, through surprise animations, cheeky warnings, and quirky design, can elevate a simple educational tool into a fun and memorable experience.

We also discovered the importance of balancing usability, accessibility, and user comfort, especially when working with eye-tracking features. Thoughtful choices, such as using a dyslexia-friendly font, reinforced our commitment to inclusive design.

As a team, we strengthened our collaboration skills, learning to integrate our contributions cohesively and maintain a clear, consistent coding style. In particular, naming variables and functions in a clear and descriptive way ensured that our code was easy to read, maintain, and integrate.

What's next for Blink and you'll miss it!

There are some exciting next steps that could take _Blink and you’ll miss it! _ to the next level, both in terms of educational value and user engagement. Firstly, expanding the range of question formats, for example, True/False and Fill in the blank, would make the quiz experience more versatile and suitable for different types of learning. Alongside this, enhancing the Blink detection system with more precise calibration and feedback could reduce false positives, making the gameplay feel smoother and fairer.

Integrating AI-powered tools opens huge potential: automatically generating questions based on user-uploaded text, and even evaluating long answers with intelligent feedback, would save time and make the app feel like a personal tutor. To boost engagement and fun, we could offer face filters (sunglasses, moustaches, or other overlays) during webcam sessions to add an element of personalisation and maintain a welcoming, approachable atmosphere.

Adding leaderboards could foster friendly competition, encouraging users to keep coming back and challenging their blinkless streaks. Introducing user accounts would let people save their progress, track their stats over time, and return to incomplete quizzes. Looking ahead, scaling the platform for institutional use, allowing educators to create and assign custom quizzes, could make this innovative blink-based approach a valuable tool in both classroom and remote learning environments.