Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

How to Make a QR Code Adventure

by

A scavenger hunt adventure is a fun game that can be played at any party or gathering.  It takes players from clue to clue before finally leading them to a prize. This tutorials teaches you how to add a new high tech spin on this game.

Players will find QR, or Quick Response, codes along the way. Scanning these with a smart phone or tablet will reveal the next clue. The game culminates when the players arrive at the final location. Follow the steps below to setup a fun activity for family and friends. This might be a creative way to get kids up and around over holiday breaks and they don't have to put down their screens.


Gather the Components

  • Google Account to access Google Docs and Goo.gl link shortening
  • Dropbox to share files
  • Scissors and Tape
  • Computer with printer to print out the QR Codes
  • Tablet or smartphone to play the game

Organize the Game

I use a google docs spreadsheet to to help me organize the adventures I create, however, it's not required and you can use whatever you are most comfortable with.

  • Create a new document and name it something appropriate like: Christmas Vacation QR Adventure 2013
  • Setup the column headers: Step, Riddle to next clue, HTML File of THIS clue, Link to THIS Clue, Location of this Clue

Create the Clues

This step is the where you use your imagination to create the adventure.  Decide if you are going to have prizes at each stop or one at the final location.  This of course will impact your choices for where clues will be hidden.  It's easy to tape a QR code to a dog tag, but including little treats with the clues might be a little more challenging.   Once you have determined the prize(s), you can move to the next step.

Envision where it would be fun to have the adventurers explore.  Basements, attics, play grounds, and even household pets are all game for riddle locations.  If you have a theme for your party, you might consider incorporating things like ornaments, picnic tables, or trees.  Also consider where you might present your first clue.  I typically email or text the first clue to the players to start off the game.  The location of that clue then is Email / Text.  

As you think of ideas for the whole adventure write them down in the  spreadsheet in the Location of this clue column.  After some brainstorming make sure you are happy with the order of the locations and then fill in the Step number and a incrementing file name in the HTML File of THIS clue.

When you are finished you should have something that looks like the image below.

qrcode-phase1

Spreadsheet Started

Create the Clues

After you have created the itinerary for the adventure it's time to create clues for each one.  Notice the column named Riddle to next clue.  This may be confusing, but once a player has found the location, it will contain the clue to the next clue, and so on, so this field is where you put the clue for the next location.  

Take some time to create clues or riddles for each location and write it in the Riddle to next clue column of the row before the location described.  The result could look something like this:

qrcode-phase2

Spreadsheet With Clues

Create the Clue Pages

Now that you have the clues worked out, the next step is to create the web pages that will be pulled up when the QR Code is scanned.  If you are good at HTML or CSS you could put your own flair on these pages, maybe even adding images into them.  For folks (like me) whose talents lie elsewhere, you can use the basic HTML template below.

  • Create a directory in your Dropbox public directory specifically for the game
  • Create a file in this new directory named after the file name in the HTML File of THIS clue of your spreadsheet, for example: clue1.html, clue2.html, etc
  • Edit the files you created with a text editor and add your clue and other information to the file.  See the template below for an example.  If you want to copy and paste it, you can simply replace the appropriate sections with the the values from your spreadsheet.  In the example below replace the "Clue One" at both locations and the clue itself above the hr tag.
<!DOCTYPE HTML><html dir="ltr"><head>
<Title>Clue One</title></head>
<body>
<h2>Clue One</h2>
This is the clue to the next place you are going.
<hr>

Complete the Game Page

Now that you have the spreadsheet and template files created the next step is to create the QR codes for your files.  There is a bit of cut and pasting here, but if you follow the steps you should be alright.

  • Open the Dropbox web interface locate the list of your clue files
  • Secondary-click on the first file, clue1.html in this example, to open the action menu
  • Click Copy public link
  • Click Copy to clipboard
  • Open a goo.gl web page
  • Paste the public link for the web page into the Paste your long URL here field and click Shorten URL
  • Copy the new short goo.gl link and paste it into the Link to THIS Clue column of your spreadsheet
  • Click into the untitled field next to the Location of THIS Clue column
  • Click  Insert > Image then By URL
  • Paste the link into the Paste an image URL here field and the add .qr to the end of the URL.  You should see a QR code image show up.
  • Click Select to insert the image into the spreadsheet
  • Stretch the height of the column and re-position the image so that the QR code is part of the row
  • Repeat the process for each row that you have

After this process you should have a spreadsheet that looks something like the image below.

qrcode-phase3

Completed Spreadsheet

The last steps are simple

  • Print the spreadsheet
  • Double check your QR codes by scanning them yourself and making sure they pull up the correct clues
  • Cut the QR codes out of your spreadsheet.  If you are accident prone like me, you might want to write the step number on the back of the code as you cut them out so they don't get mixed up.
  • Now go hide the codes.

Summary

In this tutorial, you learned how to create a free and fun game with a twist of technology. This method demonstrates a very simple example of how to make a linear clue hunt adventure game using dropbox and link shorting.  

After trying it out a few times, you might try out a few ways to enhance the game.  Some suggestions you might try are adding more html to the template to add pictures or color or creating a choose your own adventure version of the game with choices and branches. Regardless of whether you decide to change it or keep it simple, the game should provide lots of fun and keep players up and scampering about without abandoning their favorite screens.

Advertisement