Project Overview
This project is an interactive, gamified web application designed as a parody of the iconic Aperture Science universe from the Portal video game series. It combines immersive storytelling, user input collection, and dynamic UI feedback to create an engaging experience that feels like stepping into a test chamber.
The core feature is a multi-section medical pre-test questionnaire, which collects fictional participant data across categories such as personal identification, cognitive and mental status, medical history, nutritional habits, genetic mutations, and consent. Each section uses a combination of input types, including text fields, radio buttons, checkboxes, dropdowns, and text areas, demonstrating advanced form handling and UX design.
Key Elements
Gamified User Experience
A starting screen sets the narrative, challenging users to complete the questionnaire under a strict six-minute timer. Users are met with playful, narrative-driven feedback messages for each input, enhancing immersion and humor. Easter eggs and interactive “death” or “rebellion” screens appear based on user choices, mimicking the unpredictability and dark humor of the Portal series.
Dynamic Front-End Interactions
Real-time form validation with interactive tooltips provides feedback on user input (e.g., test subject ID, age). Conditional screens and modals trigger dynamically depending on user choices (e.g., companion cube interaction, opting out). A custom countdown timer adds tension and urgency, updating in hundredths of a second.
Responsive and Accessible Design
Built with HTML5 and CSS3, the layout is fully responsive across desktops, tablets, and mobile devices. Design emphasizes clarity, readability, and user guidance, while maintaining a thematic, immersive style aligned with the Aperture aesthetic.
Data Handling and Storage
Form submissions are processed and pushed to Firebase Realtime Database, demonstrating cloud-based data storage and integration. Data is collected in structured JSON objects, enabling future analytics or further interaction simulations.
Thematic and Visual Integration
Strong branding through custom typography, color palette, and imagery reflects Aperture Science’s futuristic, sterile, yet darkly comedic environment. Animation and imagery enhance narrative storytelling (e.g., GLaDOS GIFs, turret animations, companion cube interactions).
Purpose and Impact
This project showcases a combination of front-end design, UX-focused interactivity, gamification, and cloud integration while demonstrating creativity, humor, and narrative-driven web development. It is an example of how user input forms can be transformed into an engaging, interactive experience that goes beyond traditional data collection.