Learning from a silly game

Llama or Alpaca?

For the second year, Alison and I teamed up with our friend and neighbor Jill to compete in Rails Rumble. Teams can have up to four people, but our fourth from 2012, Dave Fritz, was swamped with work and couldn’t play. Plus, Alison and I had travel commitments on the second day of the contest, so for us it would really be a one-day project.

In 2012, we’d built a site called Confofa that explored one of Dave’s passion project ideas — a site for sharing accommodations, like Couchsurfing or AirBNB, but limited to participants in special events, like conferences or athletic meets. A less creepy/scary way to share your home with strangers.

Confofa was way too ambitious for a 2-day build, even with four members pulling all-nighters. We were happy that we got anything done by the deadline to demonstrate the concept. But it was only a tiny fraction of something useful.

Confofa had a llama mascot, due to some serendipity involving an animal-shapes font and our goofy sense of humor. A lot of people asked us “what’s up with the llamas?”

So, for 2013, we chose something super simple, fun, and llama-themed … a little game based on the idea that llamas are frequently confused with alpacas. Llama or Alpaca was born. We selected the idea only a day before the start of the competition.

The “A or B” picture quiz game is an old time-honored format, and everybody already knows how to play. It’s not exactly disruptive.

But within the one day we had for the competition, we wanted to do a good job with it. We needed to create the content, the look and feel, and the simple game mechanic. There were a number of little nuances we wanted to explore, and we had fun doing that.

We wanted the game to meet “E for Everyone” standards — kid friendly. There’s nothing racy or offensive about camelids, and while a lot of Rails Rumble entries have often gone to more adult levels of humor, we chose to keep it extremely clean. There are a couple of tech industry inside jokes that can be displayed on the score page, but nothing inappropriate.

We thought the game should be playable by players who don’t speak much English. Llamas and alpacas natively range through the western parts of South America, and we expected (and found) a lot of players to be native speakers of Spanish or Portuguese. It’s a simple game and need not be excessively wordy. The quiz page just shows progress, the photo to guess, and the choices. The score page shows right and wrong answers in a non-verbal way.

We limited the game to 10 questions so it would be quick and yield a simple score. While the questions selected for each player are random, they’re selected in a way that should ensure a balanced difficulty level for each player (based on our entirely subjective opinion).

We made it difficult to cheat. The 10 questions for each quiz are downloaded in one shot to the browser, which then plays through the game using browser-side JavaScript. But the answers provided by the player are scored on the server, so it’s not possible to cheat by looking in the HTML or JavaScript for the answers.

We had added a mechanism for providing instant right-or-wrong feedback via an AJAX call, but we dropped it after play testing because we felt it didn’t add anything to the experience.

The site uses Bootstrap for responsive grids and some other CSS boilerplate, but we didn’t want it to feel “bootstrappy.” Jill, the team’s designer, really wanted something colorful and light that would appeal to kids, so we stayed away from a corporate look.

We used the ubiquitous background-size: cover for the mountains on the home page. Originally, the quiz showed each llama or alpaca in a box, typical for these sort of games, but on a lark, we tried loading them into a background cover instead, and we loved it.

Depending on the window size, the way the background cover is stretched can make a photo much harder to recognize, raising the difficulty in an unpredictable and often hilarious way. Some players on mobile devices hated this and felt it was a bug, and we expected that reaction. But we thought that trying to guess Llama or Alpaca from a little tuft of ear hair or a patch of grass was pretty darn funny. Really, once we put the critters into a background cover, there was no way we were going back.

Alison did a great job of selecting our menagerie from Creative Commons images, and ensured proper attribution on all the images. We’ve actually received a challenge or two from players who tracked down the original images and felt they were misidentified by the photographer. Who knew that people would take their Llama or Alpaca scores so seriously?

The “fun facts” and score assessments at the end add a lot to the game experience and have sparked funny exchanges on social media. Jill cracked herself — and the rest of us — up on a regular basis making silly images for the fun facts. Later, when Alison and I were already on the road, she surprised us by adding useful and educational content, too:

None of the game material is hard coded; it’s all in a PostgreSQL database and remotely manageable via rails_admin. Images are managed with paperclip and served up efficiently via nginx … we used the same nginx+unicorn stack on Llama or Alpaca that we use on most of our professional Rails sites.

We don’t seriously expect to win Rails Rumble this year with Llama or Alpaca, but we did have a great time building it, a great time playing it, and have been thrilled to see others having fun with it as well.

The most important thing I took away from this experience was a reminder of how good it feels to do a simple thing as well as you can, for no reason other than the enjoyment of the challenge, and ship it to a happy public.

Llama or Alpaca has been played nearly 900 times as of this writing, by over 500 unique players, and most of them have played through to completion. Half the players find the game through Rails Rumble, the other half through social media.

And the average score is still hovering at 6/10.