How I Built This Broomstick Brew Game in Storyline 360
As a kid, I always looked forward to Halloween. In my opinion, it’s one of the best holidays—although my dentist would probably disagree. Besides collecting an abundant amount of candy in my plain white pillowcase (the old-fashioned candy bucket), it was the one time of year I got to be extra creative and plan my costume. This year, I decided to put my creative ideas into Storyline 360 and build this Broomstick Brew Game as a fun Halloween treat. I’ve had a few people ask how I created the different components of the game, so I want to share my process. 1. Create a Storyboard With each of my projects, I like to storyboard my vision. Sometimes I sketch my ideas on sticky notes or on this Visual Storyboard Template I created. Drawing it out helps me see the big picture, so I can fill in missing pieces or scratch out ideas that don’t work. Once I have a solid idea of how to go about my vision, I bring the storyboard to life in Storyline 360. I add all the slides I need and title each slide and their layers. For this example, I planned on having three slides: Title, Game, and Results. If you’re not used to storyboarding before you get started, you can learn more about that here: 11 Best Practices for E-Learning Storyboarding. 2. Find Imagery With my ideas storyboarded, I have a better idea of what assets I need to build the game. Although I like to create my own graphics from time to time, I realized that if I did that for this game, I probably wouldn’t have it ready until Halloween 2021. So I turned to Content Library 360 and the web for free resources to save development time. I started my image search using Content Library 360, where I found this spiderweb icon. I was able to customize the color easily in Storyline 360, since you can edit the color of Content Library 360 icons just like you can with any shape. If you’re not finding exactly what you need, you can also search online for other free resources. For this project, I found a variety of images on Freepik. When I saw a background image with a style I liked, I looked up the artist for similarly themed graphics by clicking on their username. You can also use the search bar if you want to add a descriptive word with your search. If it’s an option, using graphics from the same artist is a good way to keep the look and feel consistent. Depending on the project, you might have to edit some of the graphics—maybe updating the color scheme or removing something from an image. That’s another reason I really like Freepik—they include the Adobe Illustrator file. This makes it super easy to customize the images to fit your needs. Sourcing these assets instead of creating them from scratch saved me a ton of time. For more tips on sourcing assets, dig in to this article: Getting the Assets You Need for Your Online Course. 3. Add Audio Another element I like to add to my projects is sound. There’s just something about the right track or sound effect that makes a project come alive. For this project, I made a list of all the music and sounds effects I needed. I searched YouTube Audio Library for music tracks and Freesound.org for sound effects. I listened to several audio files before deciding which ones to include. If you’ve never used sound effects in your e-learning before, be sure to check out this helpful article: Tips for Using Sound Effects in E-Learning. 4. Build the Slides Once I had all my assets, it was time to build my three slides using a variety of animations and triggers. Let’s walk through how I built each slide. Slide #1: Title Slide The opening slide sets the tone for the entire experience. It’s the first thing learners see when they launch a course. I wanted to make sure this slide reflected the look and feel of the game. Images Since I had the image source files, I was able to pull bits and pieces from the illustrations—the witch, two trees, a spider, rocks, a cauldron, and the sky—and animate them to create this slide. You can see all of these images used throughout the project, but in different ways. Repurposing assets is a great way to save time and make everything look cohesive. Animations With my images in place, I was ready to add animations. Using relevant animations can enhance the experience and connect people to the content. Let’s look at some of the animations I included on this slide. Since this game is about a witch, it made perfect sense to have the witch fly onto the screen to introduce the title of the game. To create this effect, I added an arc motion path to the witch and a wipe-from-right animation to the Broomstick Brew text. The opening slide wouldn’t be complete without some brewing. After all, this is a game about making Broomstick Brew. So, I added floating cauldron bubbles using multiple line motion paths. It felt empty to have the brew boiling but no witch, so I decided to have the witch fly back onto the screen and float over the cauldron. I used the fly-in entrance animation to have the witch enter the slide and a freeform motion path to create the floating-in-place effect. I also added an arc motion path so that when the player selects the play icon, the witch flies off the screen. Timeline/Triggers When timing animations and placing them on the timeline, I often think about it like a story that has a sequence of events. Animations also tell a story, so it’s critical to time them just right. I strategically positioned each image that had animations on the timeline to play out when it made the most sense. I added several triggers to move the different images (witch 1, witch 2, the spider, and cauldron bubbles) along their designated motion paths when the timeline started on each one. For example, here’s what the triggers look like for the cauldron bubbles. And here’s a glimpse of what the timeline looks like. I made sure I evenly distributed the different-size bubbles at various times so it looked more realistic. If you let the slide play out, you might have noticed the floating witch and the cauldron bubble animations never stop. However, the slide is only 9.25 seconds long. So how did I achieve the GIF-like animation? I created a jump-to-time trigger that jumps to a certain time on my timeline when it ends. I didn’t want the entire slide to play over again, so I timed it to jump to the place where I wanted the animation to loop. Audio As mentioned in the last section, I used the jump-to-time trigger to create an animated GIF, so you might be wondering: How do you get the music to continue playing when the slide jumps to another part in the timeline? I simply added the music to a different layer and then created a trigger on the base layer to show the music layer when the timeline starts. This little trick allows the user to still see the animations on the base layer, interact, and see the animation loop, all while still hearing the audio on the music layer play continuously. Here’s a look at all the layers I used for this slide. When the user clicks the play icon, it shows the transition layer with the wipe-from-right entrance animation and then jumps to the next slide. Slide #2: Game Slide It’s game time! But first, let’s look at all the different components that went into making this slide. Layers This slide includes several layers. I’ll refer to the different layers throughout my process. I do want to note that it probably would’ve been more efficient to separate this game slide into two separate slides—instructions and game—since I had to do quite a bit of troubleshooting to get everything to work. #usererror #lessonlearned Luckily, I was able to use the disabling triggers feature in Storyline 360 to easily experiment with different triggers and figure out how to make it all work. Let’s dive into the different game components. Instructions The very first thing you see on the game slide is the “How 1” layer, which includes a purple transition (Exit—Wipe From Right) and then displays the instructions on how to play. Buttons Do the purple buttons look familiar? That’s because I used one on the first slide. When I created the button in Photoshop, I purposely left it blank so I could use the same button throughout my project and just add different Content Library 360 icons to it. I also added a subtle hover state by lowering the brightness level. (Find out more about button states here: Everything You Need to Know About States in Storyline 360.) And this is what it looks like. This saved me a lot of time since I didn’t have to make my own icons or import multiple button images into Storyline. I only had to make one custom button, and within Storyline 360 I was able to quickly and easily customize it across my project. After clicking through the instructions, there’s a countdown timer and then the game begins! Background To make it look like the witch is flying through the forest, I opened the background files up in Adobe Illustrator, combined them, changed the colors, and moved a few items around so it looked like one long scene. Once everything looked good, I split the extra-long image into smaller parts to keep the high quality, since the maximum dimensions for images in Storyline 360 is 2,048 x 2,048 pixels. I inserted the images into Storyline 360 and pieced them together to make it look like one long background. It’s safe to assume I zoomed in/out quite a few times to build this game.😆 I used a similar technique for the starry purple/blue sky, but made the graphic less wide overall since I planned on adding an animation later to make it move at a slower pace for a parallax effect. With the land and sky backgrounds set, I temporarily locked each group on my timeline to prevent myself from accidentally clicking on it while I imported and worked on other images. Witch Next, I inserted the witch image. Since the game takes place at night, I wanted the witch to stand out against the dark background. To achieve this, I used the glow effect. This made the witch appear much more noticeable (and magical). To make the witch move, I added two line motion path animations to the object—up and down. For each path, I selected Relative Start Point so the object would move from where it left off. I edited the duration of each motion path to 00.10 seconds to make the witch move fairly quickly. I wanted to limit the witch’s movements to five total vertical areas before she went off the screen. To determine the length of each motion path, I divided the height of the slide (720) by the total range of movement I desired (5), which resulted in a motion path length of 144. I selected the blue dotted line for each motion path and edited their lengths in the animations tab. To set the flying-up-and-down movement in motion using the keyboard, I created two triggers. If a player moves the witch beyond the 5 vertical areas, I created a trigger on the base layer to show the out-of-bounds layer. The game pauses until the witch flies back. To give this game an extra spin, I added an animation to the witch to spin counterclockwise when she hits a creature. To achieve this, I added a crash state to the object. You might be thinking: But you can’t add animations to states. And you’re right . . . sort of. Although you can’t add animations to objects already in a state, you can still cut the object from the desired state (CTRL+X), paste it onto the slide (CTRL+V), add the animation, and then cut and paste it back into the state. That’s exactly what I did. Now the object had an animation attached to it within that state. I also included -5 in orange text to let players know they lose 5 points every time they crash. Here are what the crash triggers looked like once I had all of my assets imported into Storyline 360. On the base layer, I included the following trigger. On the crash layer, I included the following trigger. I also imported a crash audio file to let the player know they’ve been hit. The timeline on this layer only lasts one second. Potion Bottles Since the goal of the game is to collect potions, I wanted them to stand out against the dark background. Just like I did with the witch, I added a glow effect to each of the four potions. As the witch collects each potion, they disappear. I achieved that effect by adding a disabled state to each potion and removing the image. Then, I created triggers for each potion to change states when the witch intersected with it. As an example, here’s what the trigger looks like for the mushroom potion. After creating triggers for all four potions, I duplicated them. I copied and pasted triggers from one potion to another and tweaked them in the triggers panel. Here’s the triggers panel for the mushroom potions. I scattered all 33 potions across the land. This is a good reason to always plan ahead. The disabled states remained attached to each new potion. Had I just inserted the potions into my project and immediately duplicated them, I would’ve had to individually click each one and edit their state 33 different times. Boo to that idea! 👻 I strategically placed each potion within one of the five vertical zones so the witch could only collect potions within each zone. The five transparent shapes helped me to see where to place each potion—on bridges, gravestones, branches, rocks, lily pads, etc.—to make them look like part of the scene. To give the player a sense of achievement, I created a trigger to play a positive sound effect every time they collected a potion. Similar to the backgrounds, I grouped the potions together (CTRL+G) and temporarily locked the group on my timeline to prevent myself from accidentally clicking on it while I imported and worked on other images. Crows Now it was time to import creatures. I started my search looking for a crow. I found the above image and reworked the Adobe Illustrator file to create two types of crows. Flying—I used the top crow in the image above and added a line motion path. Eating—I combined the two remaining crows to create an animated GIF in Photoshop and then imported it into Storyline 360. I duplicated the crows and placed them throughout the first part of the game in areas I thought would make the game challenging. I later realized there was an odd white line around the transparent crow GIF. I learned that Photoshop assumes the background will be white, so it fades the semi-transparent edges toward white. I had to go back into Photoshop to save a version that fades to a darker color. Thankfully I didn’t have to replace each and every crow manually. I used the Media Library replace feature to replace the incorrect crow GIFs with the updated one all at once. Ghosts My ghoul (goal) for finding the right ghost was to find something that was easy to tweak. I found the above image and selected the ghosts I wanted to use. In Adobe Illustrator, I simply removed the background and imported my two favorite ghosts into Storyline 360. To make them a bit see-through (they are ghosts, after all), I edited the transparency to 21%. I added an arc motion path to the first ghost and a circle motion path to the remaining ghosts. Spiders It’s not every day you go searching for spiders. Thankfully, this one wasn’t real. I sifted through a bunch of spider images and eventually chose the one above, because that big spider smile was ridiculously perfect. For the game, I flipped it upside down and placed it on the spiderweb icon I found in Content Library 360. As an obstacle, I thought it would be fun to have the spider move down. I created a straight line using the same color as the spiderweb, grouped it with the spider, and added a line motion path. Bats For the last creature, I decided to add a bat. I found an animated bat GIF online, but it had too many movements. I only wanted the bat to have two flying motions. Using the bat GIF I found, I redid the GIF in Photoshop with the same technique I used for the crow, and created my own version. Although I didn’t need to add any animations to the bat, since it was already a GIF, I decided to add a line motion path to a few of them to make the end of the game more challenging. Once I had all the creatures on the slide, I grouped each of them by name. Since there were A LOT of objects on this slide, naming and grouping similar objects together helped me keep my triggers and timeline organized as I tested and tweaked a few things. Scoring System I had a difficult time deciding how easy or challenging to make the game. I ended up making it really hard because people are always saying don’t make games too easy. I now realize I may have taken that a little too far. 😆 Here’s a breakdown of the scoring system. I wanted to keep scoring simple. I created one variable to capture the total score. For every potion collected, it would increase the score by 2. To achieve this, I created a trigger on the base layer. If the player crashed into a creature, 5 points is deducted from the score. It’s as simple as that. I also included the score at the top using variable references. Make It Work Together With all my assets on the slide, it was time to make them move seamlessly across the screen. To move the land, creatures, and potions all at the same time and speed, I first grouped them together. I zoomed WAY out of my slide view and added a line motion path animation to the game group. I dragged the group left until the right side of the group reached the slide area. I edited the easing direction to None. And changed the duration to 58 seconds. For the sky group, I also added a line motion path animation. I dragged the group left until the right side of the group reached the slide area. Similar to the game group, I edited the easing direction to None and changed the duration to 58 seconds. With the duration the same as the game group, the sky group still moved at a slower pace (creating a parallax effect) because the group and motion path was less wide. The game is all set! When the witch reaches the end of the slide, there’s a subtle fade to the house layer, where the door opens and the witch enters. Once the door closes, it transitions to the next slide using a purple oval shape with an Entrance—Grow animation. Slide #3: Results Slide On the last slide, the player gets to view their brew rating and results. I used images, animations, and audio to continue the experience. Images I switched out the background and repurposed some of the assets—such as the cauldron, pop-up box, buttons, potions, and witch—to bring it all together. Animations With my images in place, I was ready to add animations. As mentioned earlier, using relevant animations can enhance the experience and connect people to the content. Let’s look at some of the animations I included on this slide. The scene before this shows the witch entering a door, after which the door shuts, so it made sense to have her fly into this scene and drop the potions she’s collected into the cauldron. To create this effect, I added two motion path animations to the witch—an arc motion path to fly in and a line motion path to fly out. I also added line motion paths to each potion (to create a falling effect) and to each bubble (to create a floating effect). States I enjoy adding little details throughout the game to make the experience a bit more interesting. If you look closely when the witch is over the cauldron, her hand comes up as if she is pulling the potions out of her pockets and then dropping them to make the brew. I achieved this effect by adding a custom state. Timeline/Triggers I strategically positioned each image that had animations on the timeline. I added several triggers to either change the state or move the different images (witch, potions, and cauldron bubbles) along their designated motion paths when they reached a certain point on the timeline. Similar to the first slide, I used the jump-to-time trigger to loop the animations on this slide. Audio As mentioned earlier, to get the music to continue playing when the slide jumps to another part in the timeline, I added the music to a different layer and then created a trigger on the base layer to show the music layer when the timeline starts. Results These days, it seems we rate everything by five stars. Since the player is making broomstick brew, I thought it would be a fun element to add a star rating to show how they did. Take a look at the triggers I created that show how I used the score variable to determine how many stars a player earned. And that’s how I created the Broomstick Brew Game! If you haven’t already played, go ahead and give it a try and share your score. I know I covered a lot. Did I miss anything you’d like to know more about? I’d love to hear your feedback in the comments below. Don’t forget to follow us on Twitter for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.Level Up Your E-Learning With These Popular Game Templates
Since we’re on the topic of games, let’s start off with a “Would you rather . . .” question. Here we go: Would you rather take a one-hour online test or play a one-hour online game? My bet is that you chose the one-hour game. And that’s no surprise—games are usually fun, whereas tests can be boring or difficult. But they don’t have to be! If you use gamification elements in your content—or even turn the entire learning experience into a game—you can boost learner engagement and drive performance. To help you get your game on, check out these popular game templates that you can download and customize to fit your learners’ needs. Storyline: Vocabulary Guessing Game With multiple choice questions, learners can sometimes simply guess the correct option. If you want a fun way to increase the challenge, try this vocabulary guessing game by Karlis Sprogis instead. By giving learners the number of letters in the word and limiting the number of attempts, you’re appealing to their competitive nature—will they find the correct answer in time? Or will they see the dreaded game-over screen? Storyline: Jeopardy-Inspired Game Show Template Do you need to test learners on multiple topics? This popular game show template by Sarah Hodge is just the thing to turn a boring assessment into a familiar and fun quizzing experience. Storyline: Countdown Quiz Game Want to see how adding game-like elements to your assessments can motivate learners? Then check out this countdown quiz game by Allison LaMotte. The more questions you get right, the more stars you earn, incentivizing learners to retry sections until they get a perfect score. Storyline 360: Angry Words Side-Scrolling Game If your employees communicate often with customers, the last thing you want is for them to wing it. Try teaching learners which phrases are helpful with this word side-scrolling game by Jonathan Hill. Who knew customer service content could be so much fun? Storyline: Codenames-Inspired Learning Game Need to get new employees up to speed on workplace acronyms and terminology? This learning game by Allison LaMotte will help them catch up in no time! By solving clues and looking for similarities, this game makes it fun to define individual terms and see how they all connect. Storyline: Gamified Quiz Template With Timer Need to check if employees can think and act fast? This timed quiz by Sarah Hodge challenges learners to quickly answer questions to prove they have what it takes. Wrap-Up So what are you waiting for? Go ahead and download any or all of these games and gamification examples and customize them to fit your needs. Or, create your own game-inspired project and share it in the comments below! We love seeing new and innovative ways to engage learners. If you need more inspiration, head on over to the weekly challenges, downloads, and examples to see other creative ideas. Want to try building something similar in Storyline 360, but don’t have Articulate 360? Start a free 30-day trial.How to Customize This Codenames-Inspired Storyline 360 Game
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 Change the number of Correct cards for a clue Change the placement of the Game Over card Add additional clues 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. 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: Delete the current Selected state. Duplicate the Correct or Incorrect state. 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. 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. 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: 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: 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: 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: 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: 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. 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. 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: Gamified Quiz Template with Timer Countdown Quiz Game Randomized Board Game Dice Quiz Game E-Learning Battleship Game Crossword Puzzle Game Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial. And subscribe to our newsletter to get the latest product updates, e-learning examples, and expert advice directly in your inbox.Game Over or Game On: Knowing When Gamification Is Right for Your Course
On the surface, gamification seems like an easy way to make your e-learning experience more engaging. Just add some game elements—like points or badges—to your course and that instantly ramps up the fun factor, right? Well, not exactly. Gamification can be a powerful way to motivate your learners. But, like many learning techniques, it’s not a fit for every situation. And when it’s not a match, it can make a course less fun and less engaging—the complete opposite of what you want! That’s why it’s important to assess early on if this learning approach will work for your project. And you don’t need to be a gamification expert to do that. You just need to keep an eye out for the following clues to guide your decision. Clues That Gamification Might Add Value to Your Course Your audience is already motivated, but could use an extra nudge One of the best-known instances of gamification is Duolingo. It’s an app for learning languages that uses an array of techniques like levels, points, badges, leaderboards, and lives to encourage people to regularly complete lessons. But even thoughtful gamification like this only works well if your audience already thinks the content is worth their time. Learning a new language is hard and takes a lot of time. But if someone thinks it’s worth the effort, then the game elements in Duolingo can help them through the hardest parts—building regular study habits and pushing through difficult lessons. If they have other higher priorities on their plate, however, the small motivational moments gamification can provide likely won’t be enough to overcome the bigger obstacles in the way of completing a course. So, it’s often better to save gamification for courses where your audience is already somewhat interested in your content, but just needs some assistance pushing through. Your course is a longer learning experience If you’ve got the right audience for gamification, then you want to check if your learning experience is long enough for the techniques you want to use to actually work. Many gamification techniques are great for motivating learners over time, such as earning badges for achievements, unlocking quests or levels, or slowly exploring a story. No surprise—a longer course has more room for these approaches to make an impact. Does that mean that every long course is a fit for gamification? No. You’ll want to look for additional signs. But it does mean your list of gamification approaches that could work is more extensive. There are logical ways to build in rewards that matter A big motivator in gamification is rewards. They can include external rewards—like collecting points, unlocking achievements, or getting to the top of a leaderboard—and internal rewards—like excitement about discovering what comes next in a story or personal satisfaction from overcoming a difficult challenge. That said, for them to enhance your course, you need to know what rewards do (and don’t) motivate your audience. For instance, if your course is for salespeople who regularly compete against each other, a leaderboard might tap into their sense of competition. But if your audience isn’t that interested in trying to outdo each other or is more motivated by collaboration, then including a leaderboard could actually make them less engaged in your course. Whatever rewards you might use, you also want to ensure there are ways to smoothly weave them into your course. If you create a reward system that feels awkward or forced, that’s going to make your course clunky and less effective. There are ways to include meaningful choices Agency and autonomy might not be what you think of first when it comes to gamification. But they’re powerful game mechanics for ensuring learners feel ownership over the experience, engage with the content, and are motivated to finish it. That said, the word “meaningful” is key. Just like with rewards, this approach only works if you offer choices that matter to your audience. Can you let learners pick what order they view content in or make decisions in a scenario? Those options typically make an impact. Are surface-level choices, like picking the color of their course player, all you can offer? Those decisions are less likely to impact your audience. Your content loans itself well to stories Weaving a story into your content is another effective game mechanic—and one that’s often forgotten about when talking about gamification. When you include stories that connect strongly with both your content and audience, they can help learners understand how the course applies to their work. Stories are also powerful empathy-building tools, making them a perfect fit when you need to put your audience in someone else’s shoes in order to make a point. And never underestimate how the simple desire to know how a story ends can motivate learners to complete your course! That said, there are times when stories aren’t a fit. Take a course on changing car tires. Learners already know why this information is important and when they’d use it. They don’t need a narrative about someone stranded at the side of the road trying to fix a car wheel. They just want you to quickly teach them the steps. So a story would just add unnecessary bulk to the content. Clues That Gamification Might Not Be a Fit A stakeholder is pushing for it right from the start It’s understandable that managers or clients get excited about the possibilities of gamification—especially if they’re new to the concept. But leading with the solution is the easiest way to end up with a course that falls flat. Gamification might indeed be the right choice, but it’s better to arrive at that decision after a thoughtful analysis instead of jumping to it immediately. Your course is short There are a few gamification techniques that work for short experiences—for instance, a progress bar that marks how far along you are in filling out a form. But the majority of approaches can end up adding unnecessary bulk to what should be a bite-size learning experience. Also, given the extra time it takes to add game elements, you tend to get a better return on your investment if you save all but the simplest of gamification approaches for the longer courses they can have a bigger impact on. It’s proposed as a quick fix for problem content Gamification often comes up as a way to improve underperforming courses that learners don’t like. But simply adding something like points to content that’s tedious, too long, or not a fit for your learners is like putting a band-aid on a broken leg. It’s not going to fix the serious, underlying problem. Could gamification be a part of improving a weak course? Quite possibly! But for it to help, you’ll need to also work on the content itself, not just tack on a quick splash of gamification. You don’t know how specific game mechanics work (or have time to build those skills now) Have you ever played a game that wasn’t fun? That’s because figuring out what people actually find enjoyable and motivating is tough—even for professional game developers. Using gamification effectively is a skill any course creator can learn. But it does take time and effort to build—particularly for understanding how the different game mechanics function. If you don’t have those skills now and you don’t have time to do that deeper dive, you’re better off saving gamification for a future project. You don’t have time to research your audience You’ve probably noticed that not everyone likes the same kinds of games. Something one person finds fun and engaging might be dreadfully boring to someone else. There are loads of different game elements. Each has their own ways of motivating and engaging people and none of them work equally well with everyone. To choose the right ones for your audience, you need to know what motivates and interests them. But if you don’t have the time to do that research, gamification approaches will often stumble. Wrap-Up Gamification has the potential to motivate your learners or cause them to tune out—it all depends on how you use it. But with the clues in this article, you now know how to determine if game mechanics are the right fit for your audience, content, and situation. That means you can move forward with confidence, or pause and consider your other options. Did the clues above convince you gamification works for your project? Then check out the following articles to find out what you need to do next. Everything You Need To Know About Gamification in E-Learning Gamification Techniques: How To Apply Them To E-Learning 7 Tips for Writing Effective E-Learning Scenarios Have some clues you’d add? Be sure to share them in the comments. And don’t forget to follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.How to Customize This Storyline 360 Countdown Quiz Game Template
A few weeks ago I decided to create this Storyline 360 gamified quiz template: Click here to view the interactive version and download the template. If you’re curious about my thought process in creating this example, jump over to this article: A Behind-the-Scenes Look at How I Designed This Gamified Quiz. If you’ve downloaded this template and want to adapt it, keep reading! In this article, I’m going to walk you through the top-four FAQs about adapting this template: How do I change the passing score? How do I change the number of questions in each level? How do I change the amount of time in each level? How do I change the number of levels? This template uses Storyline 360 features like question banks, states, variables, trigger conditions, and slide masters. If you’re not comfortable with how those work, you might want to check out the linked tutorials before continuing. Alright, here we go! How do I change the passing score? By default, I’ve set the passing score to 50 percent. However, depending on the project, you may need learners to get a higher percentage of correct answers to pass. Good news: making this update is super easy! Simply open each result slide, click on Edit Result Slide, and change the percent required to pass, as shown in the GIF below: Note that if you update the passing score, you might decide you also want to update the scores required to earn one, two, or three stars. See the next section of this article to learn how to do that. How do I change the number of questions in each level? By default, each question bank in this template includes 20 questions. If you want to increase or decrease the number of questions, in addition to adding or deleting those questions in the question banks, there are a few other things to update. Let’s walk through each of them. Update the Instructions Slide If you update the number of questions, it’s important to update the on-screen instructions so learners understand how the course works. To update the instruction text, go to your timeline and click on the eye icon to hide the objects that you don’t need to edit. After you’re done making edits, remember to show all the objects again. Update the Question Slide Master Another place you’ll want to update the on-screen text is on the question slide master. Next to the variable that keeps track of the question number you’re currently on, you’ll see it shows the total number of questions—which in this case is 20. Once again, this is a pretty quick fix. Simply replace the number after the slash with the total number of questions in your project. Update the Result Slide for Each Level On the Success layer of the result slide for each level, learners see how many stars they earned as well as a message that explains what those stars mean. Both the number of stars and the message displayed are personalized depending on their score. By default, it’s set up so that: If learners get 10-14 questions right, they’ll see one star and a message saying they got at least 10 questions right. If learners get 15-19 questions right, they’ll see two stars and a message saying they got at least 15 questions right. If learners get a perfect score, they’ll see three stars and a message saying they answered all 20 questions correctly. To make this happen, I’ve added states to both the stars and the feedback textbox. I also added triggers to show the state that corresponds to the learner’s score. Here’s what those triggers look like: If you change the number of questions in each level, you’ll need to update these triggers. But before you do that, you’ll need to calculate the scores that learners need to get to earn one, two, or three stars. For example, let’s say you want to reduce the number of questions per level from 20 to 10. You decide that to earn one star learners need to get five questions right, to earn two stars they need to get seven, and to earn three stars they need to get a perfect score. Assuming that each question is still worth 10 points, here’s what that calculation would look like: 1 star: 5 questions x 10 points each = 50 points 2 stars: 7 questions x 10 points each = 70 points 3 stars: 10 questions x 10 points each = 100 points Since technically learners will earn one star if they get five or six right answers, and two stars if they get seven, eight, or nine right answers, the triggers associated with those stars and the associated feedback messages will need to cover a range of points, unlike the ones associated with three stars. Here’s what those values look like if we use the example above: 1 star: between 50 and 69 points 2 stars: between 70 and 99 points 3 stars: equal to 100 points Thanks to the new trigger panel, it’s quick and easy to make those edits, as you can see in the GIF below: Finally, remember to update the text in the feedback message states to reflect the number of questions learners need to get right to earn one, two, or three stars, as shown in the GIF below: Update the Gameboard Slide The number of points earned—which, as we saw in the previous section, changes when you adjust the number of questions in each level—also impacts two things on the gameboard slide: The number of stars that learners earn The layer that appears when a learner unlocks a new level Updating these triggers looks very similar to what you just did on the result slides. Here’s a GIF that shows me updating those triggers for Level Two: You’ll need to repeat the above process for Levels Three to Five. The good news is that even though there are a bunch of triggers to update here, it’s super-fast since you can do it directly in the trigger panel. And those are all the updates you’ll need to make if you want to change the number of questions in each level. You did it! How do I change the amount of time in each level? By default, learners get one minute to complete each level. For every correct answer, they get an extra five seconds added to their time. If you want to change the amount of time learners start off with, you’ll need to do a few things. Let’s walk through the steps together. Update the Default Value of the Time Variable Start by adjusting the X variable, which counts the total amount of time remaining in seconds. In my template, I set the default value to 60—to give learners one minute to complete each level: If you want to give your learners more or less time, you’ll need to adjust the default value of this variable. Extend the Timer Past Two Minutes (Skip If Decreasing Time) If you’re decreasing the amount of time learners have to complete a level, you can skip this step. However, if you’re increasing it, you’ll want to pay close attention. In my template, a variable called M displays the number of minutes remaining. Even if learners get all the questions right, it’s not set up to work for anything above two minutes. If you decide to give learners extra time, you’ll need to make a couple of adjustments. The minuter-counter functionality is set up on the top-level slide master, on the Slide Loop layer: To figure out how many triggers you’ll need to add, start by calculating the maximum number of minutes that learners could end up with if they got all the questions right. For example, let’s say you decide to give learners two minutes (or 120 seconds) to start out with. To figure out how much total time they could end up with if they get all 20 questions right—and receive a five-second bonus for each—you’d end up with this calculation: 120 + (5 x 20) = 220 seconds. To find the number of minutes, simply divide that number by 60. In this case, the answer is three minutes. To make the timer work for this scenario, you’ll need to: Update the trigger that sets the number of minutes, in this case two, to include a range rather than anything above 120. In other words, you want to set M to 2 if X is between 120 and 179, instead of if it’s equal to or greater than 120. Add a new trigger to set M to 3 if X is greater than or equal to 180. Note that these triggers appear twice—once when the timeline starts and again when the timeline ends—so you’ll need to update them twice. Here’s a GIF that shows me updating them: Update the Reset Triggers Since the timer needs to start over whenever learners begin a new level, you’ll need to update the triggers that reset the starting value of the X variable—which controls the time remaining—in a few spots: On the gameboard slide: On the retry buttons located on the Success and Failure layers of the result slides for each level: Remember to do this on the Success and Failure layers for every single level, or the timer will automatically reset to 60, since that’s the amount of time I set the template up for initially. And you’re done! You’ve successfully updated the amount of time learners have to complete each level. How do I change the number of levels? If you want to split your quizzes up by topic, but you have more or fewer levels than are included in the template, no problem! In this section, I’ll walk you through how to customize the number of levels. If you want to decrease the number of levels, all you need to do is delete the associated scenes as well as the buttons and layers on the gameboard slide. Easy-peasy! However, if you want to add an extra level, there are a few additional steps. Let’s take a closer look. Create a New Level To create a new level, start by inserting a new scene. From there, duplicate one of the existing question banks and insert a new draw into your scene. If you’ve never used question banks before, check out this tutorial: Understanding Question Banks. Next, copy one of the existing result slides and paste it into the new scene, after the question bank draw. If you want, you can update the color of the buttons learners use to select their answers. In my template, I used a different color for each level—to match the color of the button leading to that level on the gameboard slide. Update the Gameboard Slide On the gameboard slide, decide where to insert the button for the new level. As you can see in the screenshot below, there’s a good amount of space between Levels Four and Five, so that may be a good place to put it. To create the Level Six button, duplicate the Level Five button and the associated stars. Then, update the button’s fill color so that it’s different from all the other levels. Next, move the Level Five button to the left, making sure to delete a few of the circles on the path to make space for the new button. Then, update the level number on the duplicated button to 06: Remember to update the fill color and level number in both the Normal and Disabled states, so that they appear correctly whether the level is locked or unlocked. For more tips on working with states, check out this tutorial: Adding and Editing States. Each level has its own layer on the gameboard slide. On each layer, you’ll notice that the path animates to lead up to the button for that level. An arrow and an instruction also appear so learners know which button to click. Finally, the button state changes, effectively unlocking the level. If you’re adding one new level, here are the updates you’ll need to make. On the Level Five layer, delete the part of the path that leads to Level Six and move the arrow and text so that they point to the Level Five button: Then, on the Level Six layer, get rid of the animations—without deleting the circles themselves—on the part of the path that leads to Level Five, and delete the circles that overlap with the Level Five button. Next, update the instruction text to say “Level Six” and update the button that the trigger points to. When you duplicated the level button earlier, the triggers associated with the level button were also duplicated. However, you still need to update a few things: The value of the variable that’s updated when the user clicks to indicate the level the user is currently working on The result slide the button resets The quiz slide the button jumps to Here’s a GIF that shows how to update those triggers: Update the Question Slide Master On the question slide master, duplicate the Level Five variable trigger. Then, change the value to 6 and update the slide it points to, as shown in the GIF below: Update the New Level’s Result Slide On the Level Six result slide, update the triggers on the Try Again buttons on both the Success and Failure layers: Update the Cumulative Result Slide Finally, on the cumulative result slide, check the box to include the result slide for the new level in the cumulative result calculation: Hopefully, this tutorial will help you customize this template to fit 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 me a comment below. Looking for more gamified course templates? Here are few of my favorites: Randomized Board Game Dice Quiz Game E-Learning Battleship Game Crossword Puzzle Game Want to try something you learned here, but don’t have Articulate 360? Start a free 30-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.See How I Gamified This E-Learning Interaction by Making 5 Simple Changes
Gamification is more than just an e-learning buzzword. It’s a great way to engage your learners and make them actually want to complete your course. So if course designers know learners prefer gamified e-learning and it’s more effective, why aren’t we seeing more of it? One reason I keep hearing is that it’s complicated and time-consuming to gamify a course. With the help of this article on gamification techniques, I decided to try it out for myself by turning this “Meet the Team” interaction into a gamified course. Click here to check out the finished result, and read on to find out how I did it. 1. Add A Story My original “Meet the Team” interaction was a classic click-and-reveal. To gamify it, the first thing I did was add a narrative. Instead of just presenting the learners with information about each team member, I folded the interaction into a story where their boss introduces them to their team members. Then the learner must seek help from their coworkers to complete a series of tasks. To succeed, they have to use what they know about their teammates to decide who they should approach for help. While doing this gives the course intrigue, it also helps learners understand why knowing who does what can be useful to them. That relevance increases the likelihood that they will pay attention and retain that information. The good news is that you don't need much to create a compelling story. In this case, all I did was insert a couple of text bubbles (or captions). Then, instead of simply describing the situation, I let my characters tell the story with a dialogue in the bubbles. 2. Offer A Personalized Learning Path The next thing I did to give my interaction a game-like feel was to personalize the course and give learners more control over their journey. I did this in three main ways, by: addressing them by their first name asking them to choose their role giving them access to “on demand” content To accomplish this, I first inserted a data-entry field with a variable reference to capture the learner’s name. Then I added two buttons, each with a trigger linking it to the scene associated with that role. Finally, I added a player tab that linked to the “Meet the Team” content, so they could go back and review it without losing their spot in the course. 3. Present Them With A Challenge To encourage the learner to not only interact with the screen but also to interact with the content, I added a series of challenges. These challenges, or decision-making activities, present the learner with a task that they will need help with, and ask them to decide which of their teammates would be best suited to help them. Adding these challenges was easy, as they are basically just quiz questions. The only difference is that instead of getting points for correct/incorrect answers, my boss is more or less happy with me, as seen on the progress meter described below. 4. Include A Progress Meter The possibility of losing something is more likely to motivate people than the opportunity to gain something else. This basic principle, called loss aversion, can be found in most games in the form of negative points. In this example, I decided to add a progress meter that both adds and subtracts points depending on the learner’s answers, and also serves as visual feedback to them about how they’re doing. To do this, I downloaded and adapted this progress meter template. I also decided to add it to the player tabs so learners could see it at any time. 5. Give Them A Second (or Third!) Chance Have you ever spent hours on the same game, trying to beat your own score? If you’re a gamer, chances are the answer is yes. The opportunity to outdo yourself is addictive. So why not use that same principle to motivate your learners to do their best by allowing them to retry as many times as they’d like? To incorporate this final element into my course, I added a results slide that includes all the questions in both learning paths. Then I checked the box to allow learners to retry the quiz and adjusted the pass percentage. Easy-peasy! More Resources If you want to try out e-learning gamification for yourself but feel intimidated, just remember: you don’t have to add all the elements of a game to your course for it to be fun and effective. A few can be enough to give it a game-like feel that your learners will love. Get a jump-start by downloading this template. Can’t get enough gamification? Don’t miss all the great resources on this page. Have you created a gamified e-learning course? Tell us about your experience in the comments section below! And don’t forget to follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.5 Visual Design Tips for Gamified E-Learning
Whether you’re trying to spice up your e-learning by adding a dynamic element like a branching scenario, or you’re designing a complex and immersive interaction, good content design is undeniably the foundation for creating a great learning experience. But at the end of the day, having great content that’s well written and structured is only half the battle; you also need strong visual design to connect the dots for your learners. This is particularly true for gamifying e-learning. That’s because many of the fundamental game design elements identified by Dr. Karl Kapp—engagement, mastery, autonomy, and progression—are more compelling (and effective) when the visual design of your project rises to the occasion, plunging learners into the experience and supporting them as they achieve the goals of the course. So how can you make sure your visual design is enhancing your great content and not distracting from it? Here are five tips to keep in mind: Tip #1: Look to Your Content to Help You Find a Visual "Hook" Just like a writer uses words to give their material a “hook”—that little something that entices the reader and pulls them into the story—your content can help you come up with a visual or a motif that draws your audience into the learning experience. Check out one example of using creative visuals to "hook" your learners in The Bicycle Thief, by Nancy Woinoski. In Nancy’s interpretation of the detective genre, she uses a colorfully illustrated treatment to grab learners and bring them into her story. Instead of the edgy vintage feel so often associated with detective stories, Nancy's subject matter is a little more playful, with a visual treatment to match. Drawing inspiration from your content can help you identify familiar visual hooks and then narrow in on a distinct interpretation of those motifs. For more pointers on applying game elements and techniques to your e-learning, check out Gamification Techniques: How to Apply Them to E-Learning. Tip #2: Add More Visual Cohesion with Typography When it comes to creating a cohesive visual design, don’t stop at graphics! Above and beyond conveying information to the learner, typography plays a huge role in conveying the mood and personality of your design. Have a fun, lighthearted subject? Consider using fonts that complement the mood with a whimsical or casual flair. Script or handwriting fonts are great examples of fonts you can use for conveying a more relaxed mood. Exploring a more serious topic? Stick with fonts that are less decorative and more clean and straightforward in their styling, like Open Sans (a sans-serif font) or Rockwell (a serif font). For one example of coordinating font personality with the subject matter, take a look at this gamified grocery-themed drag & drop download. It uses an easy-to-read handwriting font, Patrick Hand, as body text and combines it with a more stylized scripted font, Pacifico, for headings. These two fonts not only complement the grocery store theme by referencing the trend of grocery store chalkboard art, but they also scale well and are pretty easy to read. This brings up an important caveat when choosing typefaces: readability always trumps style. The initial typeface I chose for my body text was a little more elaborate and less readable than I wanted, so I ended up replacing it with Patrick Hand. If the typeface you’ve fallen in love with just doesn’t scale or is too hard to read, you may be better off using a less stylized font, or reserving that more stylized choice for accent text. Tip #3: Design Consistent and Intuitive Navigation With all of the lovely visuals you can use to bring a more game-like feel to your e-learning, it can be easy to lose sight of basics like navigation buttons. But buttons need love, too! Having clear and intuitive navigation is especially important for gamified e-learning because it’s often nonlinear, which means clicking the “Next” button probably isn’t going to move you through the course. And, added to the increased navigational complexity of gamified e-learning is the visual complexity that a richer design brings. All of that visual input can leave learners feeling overwhelmed or confused about where to click. So how do you create a visual design with navigation that’s styled to be on-theme, consistent, and intuitive? Try using contrast and repetition. Contrast Creating contrast in onscreen elements is important because it helps learners distinguish between screen objects. In short, contrast is all about catching the learner’s eye. You can create contrast in many different ways, including varying the sizes, weights, or styles of text to denote hierarchy and add emphasis. You can also create contrast with color or hue to draw attention to specific onscreen objects or text, as I’ve done in the Creative Tabs template example below. Repetition Repetition is all about repeating elements so the learner doesn’t have to put a lot of thought into finding or figuring out how to interact with objects like navigation buttons. For instance, style navigation buttons or icons in a way that’s similar to the rest of your graphic elements and then stick with that styling throughout the course. You can also save learners from having to hunt for where to click by placing navigation buttons in the same spot throughout the course. For an example of both contrast and repetition of navigation, check out this job interview simulation created by Nicole Legault. I love how Nicole chose to use a grayscale background to make her interviewer, Erica, stand out. And using contrast also makes the progress meter at the bottom pop (more on that in a moment ...). She also cleverly placed everything on the left so that within the first few screens, you’ve established a mental rhythm of sorts, instinctively directing your attention to the left for the next piece of feedback or to see more choices. Using stylized, consistent, and intuitive navigation is one of the easiest things you can do to create a more cohesive and immersive experience for learners. If you’d like to learn more about it, David Anderson wrote a fantastic article, 3 Essential Visual Design Concepts, that walks through all of the basics. Tip #4: Use Interactive Video When it comes to pulling learners into a setting or a situation and allowing them some free rein to explore and maybe even experience the consequences of their choices, it’s tough to beat the emotional impact and engagement of interactive video. It’s one of the best visual design tools in your gamification arsenal! That’s because in typical e-learning courses, video is more often used as a way to lecture learners rather than engage them in a conversation or an activity. But with interactive video, you can introduce a cast of characters, set the stage for an activity, or let learners choose their own adventure and learn from their mistakes along the way. The creative possibilities are endless. Check out three clever ways you can use interactive video in this free download. Tip #5: Visually Show the Learner's Progress As I mentioned at the beginning, one of the foundational elements of gamification is progression. A visual indicator of progress helps learners see how they’re doing and how much further they have to go before achieving mastery. You can see this concept on display in this delightfully animated example from Steve Andrews. By using game elements like a time limit and a question count to show the learner their progress, this engaging quiz makes identifying your own unconscious bias a fun and motivating experience. What are your e-learning visual design challenges? Share them with us in the comments and we’ll chime in with some community brainpower! And while you’re at it, follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.A Behind-the-Scenes Look at How I Designed This Gamified Quiz
Have you ever wanted to create a gamified quiz, but didn’t know where to start? Or maybe you had a few ideas, but felt a little intimidated and decided to save it for a rainy day...that never came? I feel you. I’ve been there. But guess what? I went for it! Here’s how it turned out: Click here to view the interactive version and download the template. And if I can do it, you can too! In this article, I’m going to walk you through my design process so you can see how I got from an idea to a finished product. Let’s dive in! Coming Up with the Concept One of the hardest parts of gamifying your e-learning course is deciding which game elements to add. There are so many options it can be hard to decide which ones to focus on. There’s no right or wrong answer, but, as always, it’s important to keep your learning objectives and target audience in mind. Since I didn’t have an actual project to tackle, I tried to imagine a situation in which it may be beneficial to gamify a course. Then it came to me! What if I created a quiz for learners who need to memorize a bunch of information—vocabulary words, for example? When it comes to memorization, one thing that can be helpful is repetition. That’s why people use flashcards, so they can run through them over and over, remembering more and more each time. But repetition can also be boring, so why not make it fun? With that in mind, I decided to incorporate the following things: Question banks. I wanted to help commit the answers to long-term memory by randomizing and spacing out the questions and not simply using short-term memory to recall the order. A countdown timer. I wanted to create a sense of urgency and excitement, but also to encourage learners to trust their gut and go with their first instinct rather than overthinking it. Extra time. I added extra time to the clock to reward learners for correct answers and to give them more time to think about subsequent questions. An incentive to try again. Instead of forcing learners to get a perfect score to move forward, I wanted to entice learners to beat their previous score, so I set up a system of stars. Learners only need one star (or 10 correct answers) to pass, but if they want to earn two, they need to get 15 correct answers, and to earn all three stars, they have to get a perfect score. The hope is that learners who only get one star will want to try again until they get two or three stars. Levels. I broke the game up into levels that unlock as they go to give learners a sense of achievement. Sound effects. I embellished the game with sound effects to give it a more playful feel. Now that you have some insight into the ideation process, let’s take a look at how I decided on the design. Designing the Graphics Since my gamified quiz is intended to be a template, I wanted to stick to a simple design that could be used for a broad range of topics and could easily be adapted to fit any company’s brand guidelines. I decided to go with a bright, colorful palette to give it a fun vibe. Initially, I wasn’t sure if I wanted to use a background image or not, so I just left the background white. Here’s what my first draft looked like: But I wasn’t 100 percent satisfied with this first version. The font didn’t feel “fun” enough and all the gray made for visuals that were a little too “blah,” so I started brainstorming ways to improve upon my design. When I’m looking for inspiration, I often try searching Content Library 360 to see if anything jumps out at me. And sure enough, I stumbled upon an illustration of a sky with a big cloud and it just clicked—that’s it! What better way to give my game a lighthearted vibe? After I added the background, things started falling into place. I swapped out the gray for a darker shade of blue, to match the sky, and replaced the boring font with this fun, game-inspired one. Now I was getting somewhere! Here’s what my second version looked like: But something still didn’t feel right. I decided to see what it would look like if the pathway followed the outline of the clouds, to give it a more integrated, cohesive look. Once I was happy with the main menu slide, I created the question slides along the same lines, changing the colors for each level. At this point, I was feeling pretty good about my graphics, so I started thinking about sound effects. Choosing Sound Effects To really give my quiz a game-like feel, I decided to add some sound effects. I was careful not to go overboard, which would distract from the learning experience. Here’s what I landed on: A theme song. I wanted something to play at the beginning and end of the game as well as on the results slide to set the tone for the course. I wasn’t sure exactly what I wanted it to sound like, but I was imagining something a little retro to fit with the graphic style I chose. Correct/incorrect sounds. I thought it would be nice to find sound effects to signal to learners whether they’ve answered a question correctly or incorrectly. I wanted something that was short—so it didn’t get annoying—and unambiguous—so learners wouldn’t be left wondering what it meant. A “time’s up” sound. Finally, I wanted to find another short tone to signal when the time runs out on the clock—like an alarm or a buzzer. With that decided, I started my search. First, I headed over to this list of websites with free sound effects. After looking at a few options, I concentrated my efforts on freesound.org since it’s easy to navigate and the licensing terms for each download are clearly laid out. From there, I started trying out a few keywords—like game, theme song, right, wrong, alarm, buzzer—and gave each one a listen. To include my sound effects in my template, I made sure to choose sound effects that were licensed under Creative Commons 0—so I could use and redistribute them freely. That narrowed down my options, which actually made it easier to choose. If you’ve never used sound effects in your courses before, check out this article for advice on using them effectively: Tips for Using Sound Effects in E-Learning. More Resources Hopefully you found this sneak peek into my design process useful! If you downloaded the template and need some help customizing it, be sure to check out this how-to article, where I walk through how to do that: How To Customize This Storyline 360 Countdown Quiz Game Template. If you want to dig deeper into the concept of gamification and how to apply it to your e-learning courses, check out these helpful articles: Gamification Techniques: How to Apply Them to E-Learning Gamification: How and Why Does It Relate to E-Learning? 5 Visual Design Tips for Gamified E-Learning And here are a couple of gamified course templates in case you’re short on time: Randomized Board Game Dice Quiz Game E-Learning Battleship Game Crossword Puzzle Game Not finding what you’re looking for? There are tons more where these came from! Hop on over to the downloads hub to browse all the Storyline templates. Subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and X (Formerly Twitter).Gamification Techniques: How To Apply Them To E-Learning
If you’re in the e-learning industry, you’ve heard the term by now: gamification. Sounds fun, right? But true gamification is more than throwing together some badges and a leaderboard. E-learning gamification is the application of game elements and gaming techniques to online learning content in an effort to make it fun and engaging. In other words, using game mechanics to encourage learners to explore and learn. What are some of these gamification techniques, and how can you apply them to e-learning? Let’s take a closer look at some examples. Narrative A key part of many games is the narrative, or the story, behind them. These stories often incorporate a protagonist (a relatable character), an antagonist (a challenge the protagonist faces) and a plot (a sequence of events). If you’ve never designed a scenario-based course before, hop on over to this article for some tips: Writing Effective E-Learning Scenarios. Rules Rules are a critical part of any game to set expectations and parameters. They let players know what they can and cannot do. When you’re incorporating game elements, it’s important to provide learners with specific and concise instructions. Clear communication about what you expect learners to do at every turn will ensure they’re never left guessing about what to do. Player Control Having control over the journey and the outcome is a common element of many games. Players love to feel in control of their potential for success. One way to give learners control is to let them choose an avatar or character that appears in the course. Another way is to open up navigation to give learners control over how they progress through the content. For example, you could let learners access content from a main menu with several possible choices, instead of forcing them down a linear path. Discovery Games often encourage discovery and exploration; for example, people love to “hunt” for a hidden treasure. One way to incorporate this technique in your course would be to ask learners to search for hidden nuggets of information to score some extra points. If you decide to implement this technique, keep in mind that while looking for extra information is a fun add-on, you should never make a learner dig for a critical piece of information. Rather, hidden information should be “nice to know” information that’ll help learners deepen their understanding. Also, be sure to provide learners with clear instructions about what they’re looking for. There’s nothing worse than clicking aimlessly without knowing what or where to look. Interactivity How many games have you played that required you to do nothing? None! Games are all about stimulation and engagement, whether mental or physical, and making a move is part of the process. Adding interactivity doesn’t simply mean asking the user to “click” more often. The key is to craft meaningful interactions that require learners to think and make decisions. Instead of telling them the information outright, make them select the correct choice from a list and drag it into place. Instead of presenting them with the steps of a linear process, get them to order the steps themselves. For more information about adding interactivity in a meaningful way, check out this article: 3 Things to Consider Before You Add Interactivity. Feedback Feedback is a key part of gaming. It lets users know their action has been registered or recognized, and it provides a cue to players about how they are progressing. Feedback doesn’t have to be text. “Unlocking” new features, for example, is a type of feedback that lets players know they’re doing well. Badges or checkpoints are a way to show feedback and achievement. Progress bars are also great for providing ongoing feedback and letting learners know how they’re doing. Time Constraints Games use time constraints to create a sense of urgency, which pressures the gamer to think and act quickly. To simulate a real-life constraint, consider using a countdown or a timer on your quiz. For example, if your call center expects calls to be completed in less than five minutes, give your scenario a time limit of five minutes for the learner to pass. Loss Aversion Loss aversion refers to the tendency of humans to prefer avoiding losses to acquiring gains. Studies have demonstrated that a loss is twice as powerful as a gain, and this mental propensity is used by many game developers. Use a points system in your course to let learners know where they stand, and let them know points can be taken away for incorrect answers. You could also use a visual progress meter, such as a map with checkpoints, to show learners whether they’re moving forward or backward as they progress through the content. Continuous Play Continuous play is the ability for gamers to pick up where they left off and continue the game. This means that even gamers who “lose” the game can start over and try again as many times as they want. When you design your content, consider giving learners the opportunity to keep going! It’s a great sign when learners want to retry or revisit content. It means they’re interested and intrigued. Remember: you want to encourage your learners to remember the content, so if they want to revisit it, why not let them? One way to incorporate continuous play into your courses is to allow learners to retake a quiz or assessment if they fail. Another way is to give them a second chance if they answer a question incorrectly. Rewards Bonus points or rewards make people feel good, and are used extensively in many different games. Consider giving learners “bonus points” for more difficult questions, or providing them with an ability to earn extra rewards based on good choices. Levels Achieving different levels, goals, or challenges is a common theme among games. Instead of having chapters or modules, organize your content into “levels” and “unlock” the levels when learners answer choices correctly or hit a certain number of points. Competition Leaderboards are one of the most popular ways to encourage competition in the gaming world. Leaderboards rank players and their scores, and people love them because they like to get recognition for their skills and effort. Use a corporate intranet page or your LMS to let learners see how their coworkers are progressing. However, be mindful of the information you share. Making low scores public could be embarrassing for learners, for example. It might be a better idea to focus only on high scores. The Bottom Line In order for gamification to truly add value to your courses, the game elements need to be well thought out and support the learning objectives. Want to learn more about gamification? Check out these resources: Gamification: How and Why Does It Relate to E-Learning? A Behind-the-Scenes Look at How I Designed This Gamified Quiz 5 Visual Design Tips for Gamified E-Learning And if you’re looking for some game templates, be sure to check these out: Storyline: Countdown Quiz Game Randomized Board Game Dice Quiz Game E-Learning Battleship Game Crossword Puzzle Game We’d love to hear from you in the comments! Which of these gamification techniques have you incorporated in your courses? What did that look like? Are there any gaming techniques we didn’t mention? Please share your experience and insights in the comments below. Follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.How to Create Virtual Rewards for E-Learning
I want to share with you two things I’ve learned about developing great learning experiences: Learners love personalized experiences. Learning is best when it motivates as well as educates. These truths used to get overlooked a lot, but nowadays they’re increasingly becoming a standard expectation. One simple method that ties together personalization with motivation is to award digital prizes for learning achievements. Here, I’m going to show you how to integrate a simple digital rewards structure into an interaction. It’s pretty easy once you see how to do it, and the technique is transferrable to many e-learning projects. You can apply these exact same steps to expand an interaction of your own. In this example, we have a math skills interaction for primary school children. In it, the learner traverses a map breaking codes. Each code a learner cracks successfully unlocks a new challenge. And for every attempt, learners receive a prize: correct answers merit an awesome prize, and for incorrect answers learners get a not-so-awesome prize. When they reach the end of the course, they are shown all the prizes they’ve won—magic wands and smelly socks alike. The trick is to create a virtual bag where learners can throw the swag they grab along the way. This way, the rewards become a more tangible presence throughout the interaction. Here’s how to build the bag-o-swag and make it work. Step 1: Create Your Prizes To create your prizes, come up with a couple of suitable and entertaining offerings, then scout out some images you can use to represent them. The sample interaction uses five questions, with two potential rewards for each: one for the right answer and another for anything that’s not-so-right. Altogether, that’s ten unique digital rewards. Step 2: Customize Layers Next, customize your feedback screens with the prize and anything else you like. All the questions in this interaction are built on one slide—the base layer holds the map and multiple slide layers hold the questions and the different feedback screens. If you need to refresh the basics of working with layers, check out this article. You can also inspect the source file provided in this post. This is how my layers panel looks: When learners answer a question correctly, they proceed to the correct feedback layer for that question. It looks something like this: If learners answer incorrectly, they are taken to a try again screen. There, they get useful feedback and are given a second chance. If they are incorrect a second time, they go to the incorrect feedback layer, which looks something like this: These layers are where the learner discovers the reward for their efforts—amazing or not-so-much. Now we need to make sure that Articulate Storyline knows whether the learner earned the magic wand or the paper plane. Step 3: Create Variables for the Rewards The key here is to create one true/false variable for each pair of rewards. In this example, that makes for five variables, as shown in the image below. The five variables in question are set to a value of False. In the next step, we’ll see why. Tip: I like to name the variables for easy recognition. From a technical view, you can name your variables anything you like, but a descriptive name can make human efforts faster. Step 4: Create Triggers on the Correct Feedback Layers Next, you need to add a trigger on each correct feedback layer. The trigger will change the value of the relevant variable to True, as shown in the image below. In doing so, it tells Storyline that the learner has answered this question correctly, and therefore earned the correct answer prize. If the variable is not adjusted, then it remains False, which indicates that the learner answered that question incorrectly. Tip: As with many things Storyline, you can usually achieve the same result in more than one way. For this trigger, we could also adjust the variable when the timeline starts on the layer rather than when the learner clicks the Next button. Once you create your first trigger, copy and paste it to the other correct feedback layers, updating the variable you need to adjust each time. Step 5: Create Your Results Screen You’ve got prizes. You’ve got variables. You’ve got triggers. All that’s left is to let the learner take a peek in their bag to appreciate their swag. Doing this is easy. Simply create a screen to appear at the end of the interaction. On that page, show the learner all the prizes they won. If you’re like me, a screencast always helps make following along in a tutorial easier. So here is a short video on how to make your results screen. The bullets below summarize the basics. For each question, position both the correct and incorrect prize images directly on top of one another. Only one will ever need to be visible and this will be toggled by the variable values and a state change. Change the initial state of all the prizes to Hidden. Add a new trigger for each correct answer prize to Change state of [prize 1 correct basketball] to Normal when the timeline reaches [X] seconds on the condition that the variable prize1 correct basketball is equal to True. Do the same for each incorrect answer prize but change the final part to is equal to False. Storyline will now check the value of each variable and show the appropriate reward. Test it! I like to go through the interaction several times in Preview Mode first. Make sure each time you go through it, you try different things: the correct answer, the incorrect answer, the back buttons.... Try everything you can so you can catch any potential issues. You never know what the learner is going to do, so try to “break it.” Once you have done that in Preview Mode, publish it for web or LMS and test it the same way again. Rewarding learners with virtual swag is that easy! Of course, this is only one simple way you can reward your learners as they progress. I’d love to hear how you personalize your courses to motivate your learners. You can grab the free download for this example right here. I'd love to hear what you think in the comments below. Veronica Budnikas is an e-learning developer with a passion for clean and simple designs, facilitating comprehension, and enhancing learning. Veronica has a Masters of Online Education and years of rich experience in instructional design, training, content management, and more. Discovering that online education allowed her to make the best of her training experience and instructional design skills, she's been focused on the tech-side ever since. See more of her work on her website and follow her on Twitter at @verobudnikas.
