Interactive Science Quiz
Making Learning More Engaging Through Interactive Web Experiences
Project Overview
The Interactive Science Quiz is a client-side web application designed to demonstrate how thoughtful interaction design and lightweight animations can elevate digital learning materials beyond traditional static question lists.
Targeting fundamental physics and natural science topics (optics, motion, energy), the application emphasizes tactile feedback, immediate pedagogical remediation, and adaptive level progression without requiring complex backend infrastructure.
Educational Context & Objectives
Traditional multiple-choice testing often suffers from passive reading behavior and guessing without conceptual understanding. This project was developed with specific interaction goals:
- Active Engagement: Replacing static radio buttons with animated, high-contrast touch cards that acknowledge player decisions instantly.
- Contextual Explanations: Providing concise explanations immediately after selection so the learning happens at the moment of feedback.
- Tiered Difficulty: Staging questions from foundational definitions to situational calculations to reward steady mastery.
Application Flow & State Management
The quiz is structured as a deterministic finite state machine implemented in vanilla JavaScript, keeping the application lightweight, responsive, and easy to maintain:
Topic Selection
Learner selects physics module (e.g., Optics, Mechanics, Thermodynamics).
Timed Challenge
Card transitions into view with active countdown timer and dynamic progress bar.
Immediate Feedback
Instant color feedback, audio-free visual pulsation, and explanation popover.
Summary & Review
Comprehensive review panel displaying answer breakdown, streaks, and retry suggestions.
Animation & Motion Engineering
Motion in educational software should enhance cognitive flow rather than distract. Using GSAP (GreenSock Animation Platform), animations were tuned with strict timing curves:
- Card Transitions: Smooth flip and slide transforms (250–350ms duration) with
power2.outeasing. - Streak & Score Counter: Dynamic numeric ticker using GSAP's counter interpolation for positive reinforcement.
- Performance Optimization: Animations operate purely on
transformandopacityto avoid layout recalculations and GPU churn. - Accessibility (prefers-reduced-motion): Full media query detection disables transition delays and complex coordinate transforms for motion-sensitive users.
Accessibility (a11y) Implementation
Building an interactive test requires careful attention to assistive technology support:
Keyboard Navigation
Full Tab, Shift+Tab, and Arrow Key navigation across options with distinct :focus-visible indicators.
ARIA Semantics
inside a labeled role=\"radiogroup\" with live region announcements." data-id="Opsi menggunakan role=\"radio\" di dalam role=\"radiogroup\" yang dilabeli dengan pengumuman live region.">Options utilize role="radio" inside a labeled role="radiogroup" with live region announcements.
Contrast Ratios
All typography and state boundaries meet or exceed WCAG AA standards (minimum 4.5:1 contrast against backdrops).
Non-Color Signals
Correct and incorrect states pair color changes with distinct icon markers (checkmarks vs cross symbols) for colorblind clarity.
Engineering Takeaways
Building this client-side interactive tool highlighted key frontend principles:
- Zero Heavy Framework Dependencies: By relying on standard ES6 modules, CSS Custom Properties, and GSAP, bundle size remained under 45KB gzipped.
- Deterministic State: Separating question data schemas from rendering components makes authoring new science quizzes as simple as editing a JSON manifest.