QWiki

I challenge you to a Qwiki !

Comment

Inspiration

This project was inspired by three key factors:

  • A deep appreciation for Wikipedia and Wikiracing. They’re both free, open-source, and community managed projects that have saved people from boredom and blessed us with concise, reliable knowledge to complete our overdue assignments.
  • In a time where people are relying more on technology to read and understand things for us, it is a fun method to train and test our cognitive linkage between topics. It encourages people to read through multiple articles, which may result in improving their reading and comprehension skills.
  • A genuine desire to develop a fun and competitive game to play with others or against a computer AI. As gamers ourselves, we drew inspiration from the transformative impact of platforms like Chess.com and Marvel Snap and wanted to create something we’d actually want to play.

What it does

As its name suggests, QWiki (pronounced as “quickie”) is a game that combines speed and intellect, challenging players to quickly navigate through shortest degree of navigation from a randomly selected article to a specific destination article. The player must only traverse between hyperlinks in Wikipedia pages.

Unlike other “wiki-racing” games, QWiki offers a competitive ELO based match-making system for people to play within their skill level and offers a variety of arcade modes designed to enhance their enjoyment and gaming abilities, including a custom AI-driven competiton.

How we built it

This project uses a minimal two-tier structure, consisting of a web client and firebase DB server, to keep the logic simple and allowed us to focus on the main game logic. The front-end was written in TypeScript with React, Next.js, and Tailwind CSS. It handles the game logic for match making, lobby creation, custom ELO calculation, and assigning game victory points. The backend was written in typescript and utilizes the Wikipedia API for the webpage, OpenAI for the AI player logic, and Firebase / Firestore for the DB.

Challenges we ran into

AI optimization

Upon initial usage of OpenAI’s ChatGPT model, we realized that it is not as straight-forward as a simple prompt on the text field. Like talking to an infant, it requires thorough instructions, consistent language, and several examples of do’s and do-nots to ensure that it would provide the optimal solution. It took several hours to train the model, which initially took around 10 or sometimes impossible number of steps to reach its destination and transformed into traversing just 2-3 steps by the end of the day. We also noticed that providing the parameter in the same form as Wikipedia’s web API was more efficient for its function. It was a good learning process on how we should approach the language model going forward.

Unfamiliarity with Development

One of the team members hadn’t developed a Typescript or React web project before, so it was challenging to learn and adjust within the short period. Speaking for myself, I felt very slow and was worried about delaying the project. However, the knowledge I gained from my team members as they walked me through the steps was invaluable and will hopefully further my career in web-development.

Accomplishments that we're proud of

:^) The project of course!

What we learned

  • Trying to keep track of user interactions with an embedded wikipedia webpage is difficult due to the common CORS plight. We had to find a workaround by fetching the HTML and injecting it directly into our component
  • AI prompt-engineering is very hard and unpredictable. You have to narrowly define your prompts in order to obtain consistent answers. Huge thanks to the mentors who helped with prompt engineering!
  • Trying to design and implement a live, synchronous matchmaking system is no easy feat, especially when paired with a vendor specific provider such as Firebase. However, it was a very fun challenge to design around classic concurrency problems.

What's next for QWiki

QWiki is a fun project that we can see being improved further in the future. We would like to implement more engaging game mechanics, such as:

  • Team arcade matches to offer a collaborative, social, and dynamic gameplay that could possibly elevate the competitiveness, while making it enjoyable for varying skill levels.
  • Ability to ban specific articles to increase difficulty. We noticed that articles pertaining to common topics, such as “water”. “Jesus”, “United States”, and “United Kingdom”, was very quick for both the player and AI to solve.
  • Refactor backend for speed, scalability, and performance. As in every hackathon event, we had to rush our design and implementation, which led us to take shortcuts that would not be performative with a large player base. As the database is interacted heavily with the client for the game logic, it could easily eat up the max data threshold and affect the speed and synchronization between clients.
  • Configure the difficulty of AI as it can be almost impossible to beat the AI at times as it started to improve rapidly, after the basic instructions and requirements were being met.

Built With

Share this project:

Updates