Identity Adventure (Team 23)

Discover your personality type through a fun, interactive story-based website!

Comment

Inspiration

As people that are both fascinated by and enjoy the concept of psychology and personality tests, we were very inspired by the Myers-Briggs Type Indicator (MBTI), which is a self-report personality assessment test. MBTI has been recently popularized in the East that it has become a common question to ask on people’s first meetings, aside from their name and age. However, the process of taking the test can be boring and straightforward, so we thought of a way to make that process more interactive with simple games and story-based, hilarious adventure. Rather than having just text-based questions, we wanted to place the user in various scenarios visually, so they would be able to make the decisions that felt most natural to them. We were also inspired by the fun and silliness of other game-like quizzes, such as “The Impossible Quiz”. To make the quiz not only fun but also relatable, we incorporated activities and questions geared towards computer science students and Gen-Z.

What it does

Our website takes the player through an interactive and comedic story where they can play simple games and be surprised by sudden story twists. Individualizing each MBTI category, we assigned scores based on user actions and interacted content. For example, the user might have clicked an option that demonstrates their introverted nature, we will add a score to the I category which represents Introversion. Throughout the entire story, user interactions, and programmed scoring, each dichotomy categories will be compared to narrow the complete MBTI of the user. Note that the scoring system is completed through rough estimation so the end results might not be completely accurate but it’s sure to provide some level of relatableness.

How we built it

We first brainstormed the general topic or direction of our ideas. We transformed those ideas into separate pages, and developed a chaotic and fun story encompassing them. Before starting with coding, we made sure that the content of each page is well thought of and finalized. On the technical aspect, our project is built using resources such as React, TypeScript, and CSS, mostly resources that we’re not completely familiar with. To have a baseline to build off of, we were able to utilize AI tools, such as Claude and ChatGPT to create a working file structure. From there, we spent a lot of time developing and customized those baselines into desired outcomes with accompanied trial and errors. We debugged the framework, added and removed components to fit our detailed initial idea. We also utilized AI image generation and online available images to support the visual aspect of our project.

We structured the project by creating multiple pages and files, with each page representing a different screen or activity in the experience. We organized components so that each interaction and scene could be developed and tested independently before being connected into the overall flow. Much of the development process involved trial and error, where we iteratively adjusted logic, layout, and component structure to match our intended behavior. We sourced images from online resources and generated additional visuals using ChatGPT to support the design and atmosphere of each scene.

Challenges we ran into

At this event, we decided to challenge ourselves by using tools we were not very familiar with, specifically React and TypeScript. We especially had a hard time in the beginning with setting up and organizing the multiple files required for our project, as well as understanding how components connect and communicate with each other. As beginners, we relied on AI tools to help guide our development, but this also introduced challenges in keeping our code consistent and cohesive across the project while understandable enough for us to learn and build off of it. CSS also presented difficulties, particularly when trying to position elements precisely, layer interactive components, and maintain consistent styling across different pages with different activities and layouts. Early on, we struggled with establishing a clear style and theme for the entire project, but once we were able to solidify one page, it became much easier to maintain consistency moving forward. Another challenge was maintaining consistent logic throughout the application, especially when handling state, navigation, and ensuring that user choices correctly influenced the overall flow and scoring system. We also attempted to incorporate external packages to make our code cleaner and more efficient, but ran into dependency issues, which forced us to find alternative approaches to achieve our intended functionality.

Accomplishments that we're proud of

We are most proud of our general direction on this project, through the partnership of interesting and quirky ideas. Supporting those ideas, we were able to create satisfying visuals that further elevates the overall story and direction of our project. Lastly, we are pleased with the level of dedication and accountability that we presented at this event, sacrificing sleep to produce the best output given the very limited amount of time.

What we learned

Through building this project, we developed a deeper understanding of CSS and its capabilities beyond basic styling, including positioning, layering, and creating interactive layouts such as clickable image regions and overlays. We also learned how to use CSS animations and keyframes to create smooth transitions and interludes, giving our project a more dynamic, game-like feel. Before this project, we had no idea CSS could produce such visuals and include so much customizability. As our codebase grew, we steadily improved our class naming conventions and overall organization, making components more consistent and maintainable. Working with React head-first strengthened our understanding of hooks, particularly useState and useRef, which we used to manage scene transitions, user interactions, and persistent score values. We explored navigation patterns both across multiple files and within a single component using conditional rendering, allowing us to implement a scene-based structure that functions more like an interactive narrative than a traditional quiz . Additionally, we gained experience incorporating images in React, from proper asset handling to using them as interactive UI elements with overlays. Using TypeScript, we applied interfaces and types to structure our data, improving code reliability and clarity. We also implemented shared logic through context to track the player’s MBTI score across the entire application, ensuring consistency between scenes. Finally, we designed a scoring system that maps user choices directly to MBTI traits, seamlessly integrating personality assessment into gameplay, and became more familiar with standard naming conventions for functions, hooks, and components to enhance readability and collaboration.

What's next for Identity Adventure

Considering the time frame, we weren’t able to have polished code that maintains an efficient structure. If we were to continue with Identity Adventure, we would organize our code and file structure by creating more reusable components, having a centralized file for consistent styling across pages, and including more thorough comments to easily understand and work together on features. The process of scoring every user interaction has been accomplished with just intuition and based on our own understanding of MBTI categories and corresponding dichotomies. In the future, we want to refine this scoring-process to produce more accurate and relatable test results. We would love to include additional activities and games to further test the player and also provide more fun!

Built With

Share this project:

Updates