Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Quizible : The Integration of Drupal and the iPhone

Parent Feed: 

The web game Quizible originated from the popular Microsoft Excel spreadsheet picture based games from the late 90's.

The Drupal powered site was developed as part of an in-house training month at Ixis. The mobile project came about as we looked for a new way to utilise the data Quizible had collected.

The Drupal Benefit

Drupal allowed us to offer users the ability to make their own quizzes and for everyone else to play them whilst achieving a score on the leaderboard. Over the next two years Quizible was featured on Techcrunch, it became popular on social sites such as Stumbleupon and Facebook - gaining over 20,000 users and hundreds of user generated quizzes.

The quiz data held in Drupal is built on the node system - each question is a single node and in turn a collection of nodes were attached to a quiz node by means of multiple node reference fields. The storage of quiz data like this meant it's very easy to re-cycle the data for other uses.

Over the years we noticed the Quizible website was being accessed using various Apple iOS devices using the Google Analytics module. Playing a quiz on the Apple iPad was reasonable but the iPhone was awkward to enter text in to the answer box due to the standard iPhone pop-over keyboard.

The Mobile Interface

When the mobile development began the alternative frameworks such as PhoneGap and Titanium Appcelerator were very rough and incomplete. So we opted for the traditional route of Apples Objective-C programming language.

The Apple user interface already has a common image browser control known as "cover flow" in the iPod application. We made use of this and populated it with the images for each question - simply using a different ImageCache preset to resize the original image to fit the small screen.

Taking on board the problems of text entry on a small screen we devised a new answer input system for the mobile device. The hangman style letter input cut the amount of key presses required to input the answer.

The Data Integration

The Quizible mobile game was to be distributed with no quiz data bundle - meaning users could pick what quiz they wanted to try before downloading all the image data. We needed to keep the over-the-air data transfer as small as possible to make it playable over 3G networks whilst players are on traveling to work or idling out in public.

The Drupal node data is served over HTTP using a combination of the Services package and Views with Views Datasource providing the JSON output style. The iOS application was given an authentication key used to authorise itself against the Quizible RPC server when requesting data. We chose the JSON-RPC server module for encoding the data during transit - this version of the JSON server was selected for its compatibility with the JSON framework for iOS.

As the Quizible website already has a number of Views configured to return latest quizzes, list of taxonomy categories, top rated quizzes etc we built on these by simply adding a new View Display with a JSON style formatter. These views provided the read-only data consumed by the mobile application to power all its main screen menus.

The RPC Services provides user login capability and access to actual quiz data - including the answers, hence the need for key based authentication for this data. Score submissions for the mobile leaderboard are also carried out with the RPC service.

The development of a custom RPC service module was relatively straight forward as it's nothing more than a hook_menu() like structure of methods and associated callback functions accepting arguments in hook_services() and processing data before returning it for encoding as JSON data and sending to the mobile device.

User Authentication

We'd built up a considerable Drupal user database over the year - so it was essential we allowed these users to login and use their existing account on the new mobile application. However we didn't have time to create a user registration process for the phone and we still wanted users to be able to record their scores on our leaderboard.

Facebook connect was the obvious integration, allowing us to provide new Quizible users with a quick way to get going without having to visit the quizible.com site to register for an account. When a user authenticated with Facebook we get their Facebook unique ID and send it to a custom login RPC web service which checked to see if the Facebook ID maps to a Drupal user ID. If a match is found the Drupal $user account object  is returned. If no association to a Drupal user is found, a new Drupal user account is created and a mapping to the Facebook ID is added. The login service then returns the Drupal $user account object back to the mobile application for use with the mobile leaderboard.

Keeping Score

Our mobile game didn't have the same user interface as the web based version so the scoring system had to work in a completely different manner. This meant providing a dedicated leaderboard for users to compete on.

Two types of score leadboard exist - the per quiz leaderboard, and the main global leaderboard. We also needed to keep the score per quiz-question as users could re-visit any quiz to see their previous progress - and the score per question was based on how many right and wrong letters they had guessed so far. We left the per question score calculation to the iPhone app as it would prove to expensive to be calculating this on the server during submission.

When scores were submitted back to the Drupal webservice it triggered a re-calculation of the users overall score for the global leaderboard, and cleared the leaderboard cache to show the new scores.

Keeping the leaderboard up to date posed some challenges for us. 

There was never a definitive end to a quiz, so when should the score be added to the leaderboard? We opted to cache the score in the iPhone application and resync when a user exited a quiz.

What if the user was off-line when they finished a quiz? The application stores a list of all quizes and scores. The network connection was checked regularly in the background and when a connection is made the scores are submitted back to the Drupal site via a custom webservice. The actual leaderboards are still visible whilst offline by using a HTML5 Manifest cache.

Performance

We've read many stories about how iPhone applications had exploded in popularity and killed servers due to traffic overload. The problem was in the back of our mind whilst building the Drupal backend of the iPhone application.

The main Quizible website is backed by Varnish caching for the pages - but this wasn't possible for the JSON web service calls to be cached so all webservice communication is carried out on a sub domain aliased to the same server. This allowed Varnish caching to be ommitted from the domain and gave us scope for moving the mobile API off to its own front end server in the future if traffic demanded it.

Launch

The approval process was mostly painless - the initial rejection from Apple was regarding user generated content of questionable copyright content - mainly Disney and Pixar movie stills (I wonder why? :-) )

Thankfully Drupal's CCK, Views & Rules tools made it easy to build a Quiz moderation queue, flagging to indicate the Quiz was "mobile friendly", and an email notification system to alert moderators that new Quizes were available for review! After showing our co-operation to Apple the app was approved for sale.

Our launch timing could not be more perfect - we hit the Apple AppStore Christmas eve deadline perfectly - meaning no other apps would be approved until after the Christmas holidays, giving us some opportunity to get noticed in the new releases ... maybe. 

Marketing

The app went live just before Christmas, we submitted a press release and posted various promo codes on popular forums such as Touch Arcade and twitter.

On the existing Quizible site we decided to redirect users using iPhones or iPads to the dedicated promo splash page by simply checking the useragent of the client. Little tweaks like this have helped to bring in additional sales each day.

After the initial launch we managed to hit the top 10 in the trivia games category which resulted in a large increase in sales, we also gave the application away for free for one day which saw it jump to number 1 in the free trivia section (and as a knock on effect we went to #1 in the trivia section in Taiwan!)

Quizible hasn't quite had the success of say Angry Birds but continues to make modest revenue which is nice given the project was initially a proof of concept in Drupal!

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web