Over the past eight years, Aten has had the privilege of working with the Colonial Williamsburg Foundation to design, develop, and maintain the Kids Zone, an online experience that leverages imaginative characters, games, activities, and interactive storytelling to engage kids with colonial content. We're thrilled to introduce the latest Kids Zone addition: Treasure Trek, a fun and educational online scavenger hunt that is built on some great web technologies.
Treasure Trek is a JavaScript front-end to a content-managed Drupal back-end. It illustrates that not all Drupal sites need be typical presentations of text based content. In fact, Drupal works great for managing data that will be surfaced by a JavaScript front-end. In the case of Treasure Trek, Aten has implemented a custom menu callback that generates a JSON object containing Drupal nodes. We can then interact with this data using the front-end logic that drives the game, displaying images and text when certain locations on the map are clicked.
The map is built using OpenLayers, which is great for a project requiring custom tilesets and bounds. Aten illustrated a custom tileset for each season of the year. To keep the game in line with the current season, we simply swap out tilesets.
The game logic is primarily driven by a custom JavaScript library. The library defines a single JavaScript global, called cws, that handles click events, generates popups, keeps score of right and wrong answers, and provides its own debugging functionality. This keeps the underpinnings of the game more maintainable, as the file where the cws object is defined is logically arranged, easy to read, and linted with JSHint. If need be, we can easily extend cws to provide additional interactions.
SASS is crucial to all front-end projects at Aten, and Treasure Trek is no exception. Aside from all the usual reasons we love SASS, the title bar of Treasure Trek is exemplary of why SASS is an incredibly useful tool for front-end developers. The gradient background in the title bar is built of many background layers; an effect that would've been terribly time consuming to author in old-fashioned CSS. Luckily, Compass provides some shortcuts for quickly creating multiple backgrounds on elements, and one can achieve something like the title bar on Treasure Trek by combining different gradients and base64 images.
Aten will continue to enthusiastically explore non-conventional implementations of Drupal. It's a lot of fun to experiment with the different ways in which the great content management experience that Drupal provides can be used to drive JavaScript applications.