The Toxic Attraction Pattern Quiz project was developed as part of a capstone project requirement for a sponsor, addressing the gap between entertaining personality quizzes and meaningful relationship insights. Using an innovative "choose your own adventure" travel narrative, this interactive web application reveals users' psychological patterns and vulnerabilities in romantic relationships while maintaining the engaging format of popular personality quizzes.
-
Interactive Storytelling Engine: Built a sophisticated branching narrative system where users navigate a couple's European vacation, with each travel decision revealing deeper personality traits and relationship patterns through carefully designed psychological frameworks.
-
Advanced Algorithm Development: Created a multi-dimensional scoring system that analyzes emotional, logical, and exploratory responses to accurately categorize users into eight distinct personality archetypes, each with specific vulnerability profiles.
-
Dynamic Character Matching System: Developed an extensive database of fictional character profiles representing toxic relationship patterns, with each match tailored to the user's specific psychological vulnerabilities and presented through an engaging swipe interface.
-
Responsive Card Interface: Implemented a mobile-first swipe card system mimicking popular dating apps, allowing users to interact with their "toxic matches" while revealing hidden red flags through scrollable content areas.
-
Data-Driven Personalization: Integrated demographic collection and Google Analytics tracking to provide personalized insights while maintaining user anonymity, demonstrating proficiency in user data handling and privacy considerations.
-
Protection Protocol Generation: Created personalized safety recommendations based on each user's archetype, providing actionable relationship advice tailored to their specific vulnerability patterns.
- Frontend: Pure HTML5, CSS3, and JavaScript with advanced animations, touch/mouse event handling, and responsive design
- UI/UX Design: Modern glassmorphism effects, gradient backgrounds, and smooth transitions creating an engaging visual experience
- Algorithm Engine: Complex personality categorization system using Euclidean distance calculations between user scores and archetype profiles
- Interactive Elements: Advanced swipe functionality with physics-based animations, drag detection, and multi-touch support
- Analytics Integration: Google Analytics event tracking for user behavior analysis and quiz completion metrics
The culmination of this capstone project is a viral-ready personality quiz that combines entertainment with genuine psychological insights. Users embark on a 10-15 minute interactive travel story where their choices about everything from vacation length to conflict resolution reveal their core personality traits. The application then presents them with personalized "toxic matches" - fictional characters who would exploit their specific vulnerabilities - delivered through an engaging dating app interface.
The tool successfully bridges the gap between light entertainment and serious relationship education, making complex psychological concepts accessible through gamification. This capstone project demonstrates advanced frontend development skills, user experience design, and the ability to create viral content that provides genuine value while maintaining high engagement rates, meeting sponsor requirements for both technical excellence and user engagement.
Experience the quiz: https://buzzfeedquiz.netlify.app/
- Branching Narrative: Complex story paths with 15+ decision points leading to personalized outcomes
- Personality Profiling: Eight distinct archetypes (Intellectual, Achiever, Leader, Explorer, Rebel, Peacemaker, Dreamer, Caregiver)
- Character Database: 50+ fictional character profiles with detailed vulnerability explanations
- Swipe Interface: Dating app-style card system with touch/mouse interaction
- Protection Protocols: Personalized safety advice based on user's vulnerability patterns
- Mobile Optimization: Responsive design with touch-friendly controls and animations
- Analytics Tracking: User behavior analysis and completion rate monitoring
- Advanced JavaScript for complex interactive narratives
- CSS3 animations and modern design techniques
- Responsive design and mobile-first development
- Touch event handling and gesture recognition
- Gamification of psychological assessment
- Intuitive interface design for complex interactions
- Visual storytelling through design elements
- User engagement optimization
- Multi-dimensional personality scoring systems
- Character matching algorithms
- Dynamic content generation based on user profiles
- Statistical analysis for personality categorization
- Psychological framework application
- Character development and narrative design
- Educational content delivery through entertainment
- Viral content creation with substance