Gamification in eLearning: Black and White Arkanoid Game

Arkanoid game showing a ball and paddle, with a full health battery.

The Concept

I’m a big fan of using colors, but this week’s eLearning Challenge was all about using a black and white color palette in course design. I took this as an opportunity to play around with something I haven’t really focused too much, which are games and gamification in eLearning. My previous experience was one project, Hi Ho Cherry-O, also built in Storyline. I just started listening to the eLearning Guys podcast and in episode 3 Nejc Žorga Dulmin talks about the bouncy ball concept he made while testing out Storyline 360.

Nejc was kind enough to record a Peek video explaining the thought process behind his build. I decided to use this as my concept to see if I could figure out the nitty gritty details based on his description and if so, if I could add to the design and make it even more interactive. Note: this can only be built in Storyline 360 or Storyline 3 because it relies heavily on the “object intersects” trigger condition.

The Method

My process for this interaction was very iterative. After it was all complete, I ended up with 50 triggers on the gameplay slide and three variables:

  1. Movement- a text variable that stores the direction of the ball (UR, UL, DR, DL)
  2. Lives- a numerical variable that stores the health score of the game (3 through 0)
  3. QuestionsPosed- a numerical variable that stores the number of questions given to the learner

I first started out by building just the gameplay components: four walls, a line for a paddle, and the ball. For the ball, I used Nejc’s description of four directions (upper right, upper left, down right, down left) as motion paths to build. Once the paths were built, they each required triggers to restart their motion when the animation completes.

Next, I built a ton of triggers to allow the ball to change direction when it hit the left, right, or top wall or the paddle. For instance, if a ball was traveling in the upper right direction and it hits the right wall, the direction should change to the upper left. The triggers included both the object the ball intersected (hit) as well as the variable to track the direction it was going before it made contact. The triggers change the Movement variable, which caused other triggers that looked for that variable’s changes to move the ball on a different motion path.

I ended up deleting the bottom wall (which was originally off screen) and just used the “object leaves screen” trigger condition to determine if the learner failed to catch the ball with the paddle. For the paddle itself, I also added two triggers that redirect the paddle back on the screen if the learner takes it too far to the left or too far to the right. This diagram shows these gameplay triggers and where they went:

Diagram showing the triggers needed to construct arkanoid-style game

One problem I ran into with the basic gameplay was the length of the motion paths. The longer the motion paths were from the center of the ball, the more the ball “jolted” when it hit a wall or the paddle. Shortening the paths was the obvious solution, but I also had to balance that against the time of the motion path animation. The shortest duration of an animation is .1 of a second, but when you’re only moving a few pixels, that can make for a slow-moving ball. I found it was a balancing act between having smooth visuals and having exciting and challenging gameplay.

Another minor problem I discovered during testing was the need for the learner to click on the screen in order for the keyboard controls to work on the paddle. That was a simple fix of adding a button to start the game play. I also had the timeline pause when the timeline started, then had the button resume the timeline when clicked in order to truly have 60 seconds of gameplay, rather than 60 seconds sitting on that slide.

After I had finished the basic gameplay and tested it out, I wanted to add additional complexity to the game. I started with adding a health/battery meter to allow the learner to try again rather than going straight to the failure slide. I played around with a couple of options and finally settled on a Lives variable to track the health score. This would allow me to send the learner back to the gameplay slide (the same one they’re on) which is set to reset itself upon revisiting. The Lives variable is used in triggers to change the state of the battery to half power or empty, which would make the learner unaware that they’re back on the same slide.

In addition to the health meter, I also added triggers to adjust the difficulty of the game as time progresses. I couldn’t figure out a way to speed up the animation using a trigger (nor do I think I could due to the minimum time restriction discussed above), which would have been my preferred option. Instead, I decided to adjust the size of the paddle to get smaller at two points during the 60 seconds. This was done with simple state changes and associated “timeline reaches” triggers.

Finally, I decided that I wanted to add an education component to the game through quiz questions. I decided to send the learner to a quiz question if they missed the ball during the 60 seconds. If they answered the question correctly, they wouldn’t lose any battery power and they could try again. If they didn’t, they’d lose one step of battery power, which could either send them back to the game or make them lose the game depending on the power level prior to the wrong answer. In addition, I didn’t want the game to go on forever, so I set a limit of 10 question opportunities. This flowchart represents the logic involved with the triggers to make that happen:

Flowchart showing decisions and processes needed for a learner to go through arkanoid learning game.

Although I would love to say I came up with that flowchart ahead of time, it was after the fact. If you’re designing a game, I’d highly recommend sitting down and making something like this because it will save you a lot of time and tweaking.

My original idea with the question was to use one slide and a question bank. However, I discovered that you can’t revisit a “draw from question bank” slide and have it pull out a new question. Therefore, I built a variable to keep track of how many questions the learner has seen already. I then incorporated the QuestionsPosed variable into a number of triggers to control navigation to the question slides. For instance, if the learner has seen questions #1 & #2, the next time he or she fails in the game, triggers would send the learner to question #3. In the project, I had one scene for the gameplay and one for the questions just to keep them organized:

Storyline Story screenshot showing two scenes: one for game play and one for questions

Finally, the last touch I added on was changing the START button to TRY AGAIN if someone is attempting the game again. Since the slide goes back to its original state, I took advantage of the QuestionsPosed variable and used triggers and told the slide to hide the START button but display the TRY AGAIN button if the number of questions posed was greater than 0.

Uffda, that’s a lot going on. If you’ve made it this far, congrats, you are one dedicated developer!

The Result

To see this in action, launch the game!

If you want to pick apart the Storyline 360 file (which I highly encourage), download it here.

One thing I wanted to do but couldn’t figure out (without using 60 states and 60 triggers) was a custom timer in the top portion of the game with the battery. That would have allowed me to get rid of the default player seekbar, which is a bit confusing with the pause and reset controls. It might be possible with JavaScript, but I’d have to do more research to be sure. This was a really intense but rewarding build and I definitely feel like a trigger master because of it!


Creating a Common Craft-style Video

The Concept

I don’t play the Millennial card very often, but I do think it’s a factor in my terrible handwriting and drawing skills. Why use paper and pencil when computers exist? I was therefore a bit apprehensive about this week’s eLearning challenge, Create and Share Your Own Hand-Crafted Explainer Videos. The challenge is based off Common Craft videos, which use hand-drawn graphics to create videos designed to get an audience all on the same page. Nevertheless, it had been awhile since I last created a video, so I went all in.

The Method

I started off by picking a topic. The Common Craft videos I watched all illustrated a concept, rather than a step-by-step procedure. I decided on Flexible Spending Accounts (FSAs) because I’ve been dealing with some parking/commuter card issues lately.

Once I had the topic, I went to work writing the script. I’ve done this before with instructional videos, so it was pretty easy for me to write out what I wanted to say efficiently. I made a column for the narration and a column for the matching visuals. In the end, I deviated a bit from this when I got to the drawing phase, but it got everything organized.Script for video with narration column on the left, visuals on the right

For my graphics, I did some googling for some basic stick figure designs, then started drawing. The original Common Craft graphics use a colored border just inside the black border to give the graphics personality, which I really liked. It cut down on the amount of work I’d have to do.

In the end, I needed to make a variety of graphics, including different versions of the same thing to use when animating something. This is what my table looked like halfway through:

Paper cutouts of hand-drawn people

Then I set up to shoot the scene. I played around with a couple of set-ups but ended up using a white poster board as my background (whiteboards are surprisingly reflective), with a tripod-mounted camera about a foot above it. Although I would have liked to shoot from directly overhead, the lighting was too weird to make it work. I shot about 18 minutes worth of footage for this 2:18 video. I had originally planned on using a lot of cuts to make the graphics appear and disappear, but after seeing the footage sped up, I decided to keep a lot of the hand movements in the video.

To edit the video, I used Camtasia. I had to do a lot of slicing and dicing to get the speed of the video just right (as well as cover up one or two mistakes). I recorded audio on my Blue Yeti Snowball microphone. The background music is a song called Lenny’s Song, available from Wistia. This is what the project looked like when I was done:

Screenshot of Camtasia showing how a video is edited

To finish, I added in captions and then exported.

The Result

Click here to watch the video. This is was a fun experiment, but I don’t think I’d ever use it professionally. I could make a video like this in Keynote or Powerpoint in a fraction of the time. Drawing and cutting out the graphics took a lot longer than I thought it would!

Round Two: Using Scrolling Panels in eLearning

Two people in video chatting, covered by breaking news banner

The Concept

After viewing some of the other submissions for ELH Challenge #169, I really liked the idea of using motion paths in conjunction with scrolling panels. This would allow you to move something from place to place, while not always seeing that object. I thought a great way to use this idea would be to create a “Breaking News” banner that could be used on top of videos.

The Method

I started with a stock video from the 360 Content Library, then I played around with a few ideas of how to execute this idea. A horizontally scrolling news tickers actually wouldn’t need scrolling panels to work because the sides of the slide naturally create areas that hide where information appears.

Instead, I built a vertically “scrolling” ticker. My version had four news items located within a scrolling panel on top of a red background. Each news item is located underneath the red rectangle (outside the scrolling panel) with two motion paths: the first to bring the news item on to the rectangle; the second, to move it offscreen. The second actually had the same starting and ending points as the first motion path, but I used a relative starting point to keep the movement smooth.

Articulate Storyline construction process with scrolling panel

Once I built all of these motion paths, I created a series of triggers so the first item moves onscreen when the slide loads, then moves off so the second can come on. These triggers ensured the cycle would continue indefinitely. This is what the triggers look like:

Diagram explaining how the triggers in this project work

Lastly, I added a bit of Javascript in order to capture the learner’s current system time to display it in the small grey panel. There were two triggers that executed the Javascript: one when the slide initially loads and one when the news item cycle completes. This is what the code looked like:

Javascript code to set a variable to the current time


The Result

Click here to see the full interaction. I’m very pleased with how it turned out. I think this would be a great attention-grabber at the beginning of a compliance course.

Click here to download the .story file (Storyline 360).

Using Scrolling Panels in eLearning

Woman with speech bubble of placeholder text followed by placeholder responses to choose from

The Concept

Scrolling panels were the topic of this week’s eLearning challenge. Before today I had never actually used them, so I was happy to try something new. While my mind immediately jumped to a software simulation, I ended up going with a decision scenario involving a prompt with wordier responses. These longer responses would be impractical to write out on a screen altogether, so a scrolling panel would be the perfect space-saving solution.

The Method

When creating the interaction, I found it easier to build what I wanted, then put it into the scrolling panel when complete. I think a key to getting a conversation interaction right with scrolling panels is to make it very obvious that one of the speech bubbles is cut off. If I was to switch the position of response bubbles #2 & #3 below, it might not be clear that the learner should scroll down in order to read response #4.

Construction of scrolling panel responses within Articulate Storyline

In addition to the scrolling panel, I also had the opportunity to use two icons from the content library in Storyline 360. I definitely saved some time by using the content library rather than searching for icons or building my own. In future projects I’d like to dig into the customization options of these icons.

The Result

Click here to see the full interaction.

Click here to download the .story file (Storyline 360).


Using Fonts to Create Custom Graphics

Drawing of components to building an online business

The Concept

This week’s eLearning challenge used a technique that I hadn’t used in the past- converting fonts (specifically icon fonts) to vector images. Once the font icons have been converted, you can customize them by tweaking the shapes, combining them together, or changing colors. For my entry, I chose this free font I found called PeaxDrawnIcons, which have a hand-drawn look.

Icons representing common components of e-commerce

The Method

To create the graphics, I followed the procedure shown in Tom Kullman’s video here.

Process of changing font into vector image

Most of the icons were pretty easy to convert over. There were a couple (the man and woman), that needed to have some shapes added in order to color them correctly. For that, I added ovals and then edited the shapes’ points to make it match exactly.

Since a lot of the icons had a money/shopping theme, I chose to make my interaction about building an online business. To compliment the hand-drawn look of the icons, I found some scribbled circle vectors and another font called Kalam.

Scribbled circle icons and links to font and background image

The Result

Click here to view the interaction.

Click here to download the .ppt file with the graphics and mockup. Click here to download the Storyline 360 source file. Note: due to a bug with some fonts displaying incorrectly when previewing & publishing in Storyline 360, the titles are all images.