April 30, 2012

Scavenger Hunt

By Chris Heiland

This was originally posted on Chris Heiland’s staff blog while he was a member of the Web Team. Chris migrated this post to the Web Team blog before he left because we thought the content still had value to the UW community.


Scavenger Hunt is an application that utilizes several technologies to make everything work seamlessly. The actual site runs off the main HuskyFest site that is built on WordPress.

The background:

HuskyFest is an event that is the reinvention of Washington Weekend last held a few year ago. A part of the user engagement is the Scavenger Hunt. The concept is students would go around looking for locations based on a clue, once found, they would answer a trivia question about the site. The experience would be optimized for smartphone users but have a desktop experience for those without fancy phones.

I was tasked with creating the experience based on a few key requirements.

  1. Build on the existing Huskyfest site powered by WordPress.
  2. Use the bootstrap framework to power a responsive design to display the information in a device-agnostic fashion.
  3. Utilize GeoLocation on smart phones to provide an additional experience
  4. Each user will receive a randomly assigned location per day they must find to a answer a question

WordPress has a few ways of storing data, the best one for this case was creating an extra table to track a netid and assigned location. This way I could easily run reports based off a certain day or netid or question. Part of the contest was choosing a randomly assigned person for the winner. I was able run a simple SQL query without needing several joins or parsing the post_meta table.

SELECT netid FROM wp-table WHERE day='monday' ORDER BY RAND();

The responsive design was the easiest of all. The bootstrap framework along with the design of the site made it very easy to plug into. I had to make sure that the HTML I was producing was consistent with the rest of the site, but for the most part everything just worked. I was able to add classes to certain elements and they would hide and show based on browser capabilities. The only problem was the geolocation.

The geolocation was actually straightforward by using navigator.geolocation();. The biggest problem I encountered was smart browsers. During testing I found that desktop browsers were producing their location, this feature was problematic. The goal for the mobile experience was to display the question once the user was within so many feet of the location. As people are not expected to bring their desktops to the location I had to disable that feature if the user was not on mobile.

The other problem I ran into with geolocation was the accuracy of the location on the iPhone. Specifically, iPhone Safari does not use the GPS of the phone, only triangulation which brings the accuracy down to 15-20m. Unfortunately this lead to a more generalized slider widget that we had to limit on the how close the user looked to the location.

All in all it was a fairly straight build and fairly quick as well. By building on existing frameworks it saved a number of hours creating everything from scratch.¬†Internally we are using WordPress for more and more sites. Not only because it’s a very flexible system which allows rapid application development, but also because of the easy to use editor interface. This was the first experience with bootstrap, however, based on what we found we will be using it in the future.

Leave a Reply