Alex Clemesha

The Wiki Game

Explore and race through Wikipedia articles!

A dynamic, educational, multi-player web game based on connecting Wikipedia articles.

Currently averaging 45K engaged players per month, with highly positive mentions, reviews, and gamer livestreams and videos posted across social media.

Built in a modern architecture style, with decoupled back-end and front-end codebases that each utilize the best of web application software.


Exploring Wikipedia, Gamified

Given two distinct Wikipedia articles, how are they connected by other article links?

With that simple question, I set out to build The Wiki Game. The resulting (and ongoing) project is an interactive, educational, multi-player game that’s now been played many millions of times, by several million people.

Core Game Mechanics

The game, at its most basic, presents players with a Challenge: that is a Start Article and Goal Article that must be connected via clicking article links, during a given Round.

Different game modes require players to connect articles the fastest, with the fewest clicks, or other combinations and variations.

There’s an infinite possible space of game paths that can be taken - paths that weave through topics that span the entirety of Wikipedia itself - and the winning connections can vary from intelligent, to surprising, to simply clever and fun.

Flexible Features & Controls

There’s a prominent educational aspect to The Wiki Game, and it’s feedback from teachers and educators that has motivated the continued expansion of the game engine and interface.

With the functionality to create private groups, group admins (such as teachers, event organizers, or even just friends) can choose targeted Wikipedia topics and control game flow. For example, the admin tools allow teachers and their students to play and learn at their own pace - exploring topics and reviewing results relevant to curriculum and grade level interests.

Additionally, there’s a very popular public group, where anonymous users can start playing immediately (greatly increasing engagement for first-time users). Then users can convert to creating personal accounts to retain game wins and appear on the leadboards. Users can then further convert to creating their own private groups, inviting others, and thus enhancing the viral loop of the application.

All groups are multi-player, and all players’ current progress is visible to all others in real-time, making gameplay inherently social and competitive, yet still fun and educational. For example, post-Round viewing and comparing all players’ paths is often praised as a beloved game feature.

Along with the praise and feedback from passionate users that motivates the continued development on the project, there’s also the enjoyment of building and solving the project’s technical challenges.

Modern Tools & Architecture

Software engineers love building with an excellent toolset. As The Wiki Game is a solo project, I’ve used just what I believe is best of breed.

For the user-facing web browser interface, it was obvious a Single Page Application (SPA) was needed to produce a dynamic, interactive, application-like experience.

For the behind-the-scenes functionality, I knew I wanted a clean API (built with Python, pure-JSON, and REST-based) to maximise flexibility and reusability.

The Front-End: Dynamic User Interface

The creation of large-scale web applications have come a long way. Today’s JavaScript frameworks provide impressive productivity, are highly modular (Components), and are centered around the latest modern programming languages (TypeScript) and versions (ES6) - all while still targeting all popular browser (and even non-browser) platforms.

The Wiki Game front-end has many elements of a modern web application such as:

  • It creates the experience of browsing Wikipedia, combined with all game elements, into a dynamic and interactive single page app.
  • It reacts to all asynchronous game data events, player interactions, and game state transitions.
  • It enables group admins to invite and manage players, create content, control round flow, etc.

To implement those elements, the main tools used are:

  • Angular: Powerful and productive JavaScript web application platform.
  • TypeScript: Elegant superset of the JavaScript programming language.
  • RxJS: Library for reactive programming, using observables.
  • Sass: Makes CSS scriptable (and much more sane to manage).
  • Angular CLI: Comprehensive command line interface for developing and deploying Angular projects.

Modern Angular (version 7+) has been fantastic to use. I’ve found Angular’s more ‘opinionated’ stack and workflow to be very powerful and productive to work with. For example, creating new site functionality is a straightforward process of making a new Component, writing some self-contained markup and styles, and adding a Service that cleanly calls the back-end API.

The Back-End: Brains & Business Logic

The front-end (a stateless web interface) is powered by a Python-centric back-end API. Behind that API lives the game engine and a great deal of peripheral logic for mapping web requests to all app functionality, persisting data, accessing content, and handling the overall application lifecycle. Those elements can be logically grouped as the following:

Server foundation:

  • Python: The finest all-purpose programming language in the world, even more so with Python 3 onward.
  • Django: Best-of-breed web application framework, and clear top choice for Python users.
  • Django REST framework: Elegant API framework that’s very well designed and a joy to use.

Data management:

  • PostgreSQL: Top open-source relational database worldwide. Fast, reliable, and simple to manage.
  • Redis: Fast and flexible cache, message broker, and data structure store. Used for intelligient caching of real-time game data structures, leaderboards, and more.

Content handling:

  • Python Requests: Simplifies calling the Wikipedia API for article content, metadata, and more.
  • Beautiful Soup: Aids in parsing and customizing Wikipedia article content.

Various other elements:

  • Nginx: Extremely fast, simple to config, and easy manage web server.
  • Let’s Encrypt SSL: Certificate authority for free and automated SSL certs.
  • Amazon Web Services SES: Amazon’s excellent email service.
  • Twilio: SMS message platform to message web players’ mobile devices.
  • systemd: Service and process management for Linux.
  • Ubuntu: Long-standing favorite Linux flavor.

All Together: Integration & Deployment

The front-end, by a simple git push, is automatically deployed by a modern Continous Deployment platform that sends the latest code snapshot up to be served by a global CDN.

The back-end is deployed locally using Fabric, via a git branch snapshot, which is bundled and sent to a standard virtual private server instance running the latest Ubuntu Server.

The decoupled nature of the back-end and front-end greatly increases the speed and flexibility of development. Additionally, a separate API back-end enables use in other target front-ends, most importantly future improvements to Wiki Game for iOS.

Evolution & Achievements

The Wiki Game is an ongoing labor of love enabling me to create something fun and educational many people use and truly enjoy. A main driving force motivating my continued work and improvements is the widespread usage and detailed feedback I get from passionate users.

Improving via User Feedback

One major source of interest in The Wiki Game is from teachers (and students!) to use the game as a fun and educational tool in the classroom.

For example, Bryan B., a teacher from California, provided instrumental advice and feedback aiding me to build out the new private groups functionality.

Here are Bryan’s specific thoughts on the value of The Wiki Game, in the classroom:

  • It uses a resource (Wikipedia) that everyone is already familiar with.
  • The game teaches important 21st century skills (connecting related concepts and information filtering).
  • It’s broadly usable with different age groups and subjects.
  • The experience is highly engaging and entertaining, and well as educational.

With teacher input, and classroom testing, I developed several new features of the game centered around the private groups functionality, which greatly increased its usefulness in a teaching environment.

Praise & Ongoing Usage

The Wiki Game continues to grow, with usage and very positive reviews from across the web.

“The most addictive site ever” and “My new obsession!” and “This is brilliant fun”, are just a few of many highly positive mentions on Twitter.

Other examples (among many) include:

With positive interest comes traffic and users. There has now been several millions of players, playing many millions of games, and with time-on-site averaging above 10 mins! As the site gains new players and retains loyal fans, work continues to build and improve the best place on the web to explore and race through Wikipedia.