View interactive version | Download the template

I recently created a learning game template inspired by the game Codenames. (If you’ve never played before, check out this short video for a quick overview of the rules.)

I thought it would be fun to make an e-learning version, and this is what I came up with. If you’re familiar with the game, you’ll notice I’ve taken some creative liberties, but hopefully you’ll recognize some of the major mechanics of the original game. And whether or not you’re familiar with the game, I hope you and your learners will enjoy my take on it.

If you downloaded this game and need help customizing it to fit your needs, you’re in the right place! In this article, I’m going to walk you through some common customization options. For example, I’ll show you how to:

Change the placement of the Correct cards for a clue

1. Update the correct answers in Form View.

For Storyline to recognize the answers as correct, you need to check the box next to them in Form View, as shown in the screenshot below.

Screenshot highlighting the checkboxes in Form View

Uncheck the boxes for incorrect answers and then select the correct ones. 

2. Update the Selected state. 

Correct cards have a Selected state that is green and says “Correct.” If you want to change a Correct card to an Incorrect card or vice versa, you’ll need to:

  1. Delete the current Selected state.
  2. Duplicate the Correct or Incorrect state.
  3. Choose Selected from the drop-down list. 

This will apply the Correct or Incorrect state formatting to the Selected state for that card. That way, when the learner clicks on it, they’ll see if it’s correct or incorrect. See the GIF below for a visual of that process.

Animated GIF showing the process described above

3. Update the Initial state. 

In this game, the correct answers from the previous clue still appear on the slide when the learner moves on to the next clue. For this reason, if you decide to change the Correct and Incorrect cards, you’ll need to make some additional adjustments on every subsequent clue slide.

For example, in my game the correct answers for Clue 1 are ADDIE and SAM. So on the second clue slide—and every one after that—I’ve updated the initial state of those cards to Correct. That way, when the learner arrives on the slide, the Correct state is already showing. 

 Screenshot showing the initial state

Note: It’s important to choose the Correct state and not the Selected state. Even though they look visually similar, the Selected state will make Storyline think the learner has selected those cards as answers and will show them the Incorrect layer even if they’ve selected the correct answers for that clue.

4. Update the Triggers.

Each card has two triggers associated with it:

  • Trigger 1 disables that card when it’s clicked so learners can’t change their answer.
  • Trigger 2 adds 1 to the CardsSelected variable so the Correct or Incorrect feedback layer appears once learners select the appropriate number of clues.

Here’s what that looks like:

Screenshot showing card triggers

For the first clue, you can leave all these triggers as is. But for subsequent clues, you’ll want to update the triggers of every card that was a correct answer for a previous clue so they’re immediately disabled and don’t impact the value of the CardsSelected variable.

For example, the correct answers for Clue 1 are ADDIE and SAM. So on the Clue 2 slide, I’ve updated the triggers for these cards so that:

  • The state changes to Disabled when the timeline starts.
  • Nothing happens to the CardsSelected variable if the learner clicks on the card.

Here’s what that looks like:

Screenshot showing the updated trigger

A couple of notes here:

  • You’ll notice that I simply disabled the second trigger instead of deleting it. I did this so you can easily reactivate it if needed. Since you presumably won’t be changing this more than once, you could also just go ahead and delete it.
  • If you add animations to your cards and they don’t appear when the timeline starts, you’ll want to update this trigger so that it says when the timeline starts on this slide. (Currently, it says when the timeline starts on this object.) I left it as is since the object appears when the timeline starts, so it doesn’t make a difference.

5. Update the feedback layers.

To make the correct answers really stand out, I added a transparent rectangle that slightly masks the game board. On top of that rectangle, I pasted the Correct cards, as shown below:

Screenshot showing the feedback layer

You’ll need to move these cards to the correct places and update the terms on both the Correct and Incorrect layers in addition to modifying the text-based feedback, as you normally would.

Change the number of Correct cards for a clue

If you want to change the number of cards that are correct for a given clue, you’ll need to do two things:

1. Update the number that’s shown in the “# of Cards” box. For example, if you have four clues, your “# of Cards” box should look like this:

Screenshot of # of cards box

2. Update the trigger that submits the interaction based on the value of the CardsSelected variable. If you have four clues, the Submit trigger should look like this:

Screenshot of Submit trigger

Change the placement of the Game Over card

When you download the template, the Game Over card is the third card in the first row—marked SME. If you want to change the placement of the Game Over card, you’ll need to do two things.

1. Update the Selected state of the old and new Game Over cards.

Change the appearance of the Selected state of the old Game Over card to look like the Correct or Incorrect state, depending. Then, update the Selected state of the new Game Over card to look like the Game Over state. Learn how to do that here

2. Update the triggers.

The Game Over layer is set to appear when the learner clicks on the Game Over card. You’ll want to edit the trigger so the Game Over layer appears when the new Game Over card is clicked. 

Screenshot of updated Game Over trigger

From there, you’ll want to reactivate the two deactivated triggers on the old Game Over card and disable or delete those same triggers on the new Game Over card. 

Add additional clues

To add additional clues, you’ll need to:

1. Duplicate the last game board slide.

2. Update the passing score on the Results slide. 

Screenshot of passing score

3. Review the other sections of this article and follow the steps for any that apply.

Wrap-Up

Hopefully this tutorial will help you customize this template to suit your needs. If you run into any issues, or if you’d like to update this template in a way that’s not covered in this tutorial, please leave a comment below.

Looking for more gamified course templates? Here are a few of my favorites:

Want to try something you learned here, but don’t have Articulate 360? Start a free 60-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.

6 Comments
Matt Hannah