Building a Crossword in Articulate Storyline

Browsing the crossword examples that were posted to E-Learning Heroes Challenge #240 inspired me to share an insight into a crossword puzzle that I built. My original crossword was built as a demo to show how we could recreate eLearning interactions that used to be built in Flash, with a view to extending the life of those eLearning courses that had been bought and paid for only to be shelved when Flash bit the dust.

There are lots of different approaches that can be taken when building anything in Storyline, and crossword interactions are no different. I see similarities between the way some of the other examples have been built and my own example, yet other course designers have taken a totally different view on how to build their games. The diversity of techniques is fantastic, read on to learn how I built my crossword in Storyline.

Step 1: Writing crossword clues

My first step was to write the clues and answers to make up my puzzle. I wanted to give my crossword an elearning/tech theme to keep my content relevant to our industry, so decided to use the following questions/answers:

Across

  1. iPad manufacturer (5) APPLE
  2. Acronym for HyperText Markup Language (4) HTML
  3. Popular search engine (6) GOOGLE
  4. Online training (9) ELEARNING

Down

  1. E-Learning authoring tool from Adobe (9) CAPTIVATE
  2. E-Learning development tool from Articulate (9) STORYLINE

Step 2: Designing the crossword grid

The next step was to design the puzzle grid. I prefer to create my designs in Adobe Illustrator, but you could just as easily work straight into Storyline if that is your preference. During this phase I overlaid the answers on to the grid too.

When I was happy with my layout, I used Illustrator’s Asset Export tool to create my 96ppi PNGs, ready to insert into Storyline. If you use Adobe Illustrator and haven’t discovered the Asset Export tool yet you’re missing out!

Step 3: Building the crossword in Storyline

To construct my crossword puzzle I started by creating a new Storyline project.

Then, I added my instruction text and crossword clues before inserting the crossword grid that I created in Illustrator.

Screengrab showing crossword puzzle without answers

With the grid in place I inserted the answer graphics and positioned them on top of the puzzle grid. I set the answers to an initial state of hidden to prevent them showing on screen until the user answered each clue correctly.

Storyline crossword puzzle with answers faded

The answers are positioned on the puzzle grid and given an initial state of Hidden.

Adobe Flash Professional Logo

Back when Flash was the go-to tool for building eLearning games, it was possible to create what I would consider to be a classic crossword puzzle. By classic I mean a puzzle where you would be able to click into the first square of the answer you wanted to type, and the cursor would tab along nicely to the next square with each letter you entered.

Animated gif showing crossword completing with APPLE answer

I’ve seen examples where course designers have leveraged JavaScript to achieve this sort of result but where possible I prefer to stick to functionality that is native to the authoring tool I’m using, in this case Articulate Storyline.

My preferred solution was to ask the user to click the numbers on the grid to reveal a layer containing a text-entry field, where they could type the answer to the associated clue. Looking at some of the other examples posted by the E-Learning Heroes community, it looks like this approach is one of the more popular alternatives to the ‘classic crossword’.

Crossword text-entry box

If we take a closer look at the text-entry layer for the first clue, you can see that we have a text-entry field and a ‘SUBMIT’ button. When the user submits their answer, a series of Storyline triggers check whether the answer that has been typed is correct.

Storyline 360 triggers

If the answer is incorrect, a message telling the user to ‘TRY AGAIN’ and a red cross are revealed. If the answer is correct, the layer is closed and the state of the associated answer on the base layer is switched from Hidden to Normal.

Storyline 360 crossword incorrect answer message

Incorrect answer message

Storyline 360 crossword correct answer displayed

When answered correctly, the answer is revealed on the main puzzle board.

When all six clues have been answered correctly, a trigger on the base layer launches another layer to inform the user that they have completed the puzzle. This layer is triggered when the state of all the answer text is Normal, and no longer Hidden.

Storyline 360 trigger wizard

Storyline crossword correct feedback

 

Try it: Complete the crossword

Now that you’ve seen under the hood, why not take the crossword for a spin!

Storyline 360 source file download

I’ve simplified my Storyline source file and you can download it here. This version only contains one clue to answer as I think it makes it easier to understand what’s going on in the triggers, which is a bit more friendly for anyone who’s just starting to build advanced Storyline interactions.

Once you understand how the triggers work for a single clue, it’s simply a case of duplicating the text-entry layer and modifying the relevant triggers to add additional clues.

Related Gamification Posts

Storyline 2 Maths Game

Storyline 2 Maths Game

Following on from our earlier post, Using JavaScript in Storyline 2: Interactive Image Colouring, we wanted to share a maths game for kids that we’ve built using a slightly modified version of our original interaction.

Pin It on Pinterest

Share This