Creating an eLearning Bingo Board

DIY Weekend Project Bingo title slide on an illustrated wood background.


Challenge #98 asked participants to create a bingo board of common industry buzzwords. Rather than doing a bingo board around instructional design, I decided to do it on do-it-yourself (DIY) projects and the many ways they can go awry.

This build had a few things going on. I had created an intro, the board itself, and then a results page which changed depending on how many mishaps you had before completing your project.

The Method

The introduction was one of my favorite parts of this challenge. I created a pretty standard intro page, then used moving paint rollers as a transition to the rules page. To create the paint rollers, I first built them in powerpoint so I’d be able to choose the paint color myself. I then imported them into Storyline, add rectangles, and rotated them to create the “V” shape recommended for painting. I added motion paths, then spent a lot of time playing with the timing to make it realistic and line up with the sound effects.

Zoomed out image of the Storyline slide view showing the paint roller images, animations, and triggers.

For the bingo board, I had a number of things to do. First, I planned out the board. I did a 4×4 board and created rectangles for each mishap. Each rectangle has text in a normal state, then it changes to an icon when clicked (and then disables itself). Using states for this aspect of the build kept my trigger list somewhat sane.

Next, I built the actions. This had two parts: first, I created a variable to track the total number of mishaps, which controls what appears on the final results slide. Each time one of the rectangles was clicked, this variable would increase by 1. For the second part, I built triggers to pop up a layer that warns the game player that he or she might be getting into trouble. This occurred whenever the player got a bingo across, down or diagonally. For a 4×4 board, that required 10 triggers. Since I had an even number of rows and column, I didn’t have to worry about a free space in the middle.

Finally, I created triggers to move the player to the results slide. This would happen under two circumstances: either the player clicked the “Project Complete” button or the player had managed to click all 16 mishaps buttons.

Storyline triggers that display bingo messages during gameplay

For the results slide, I displayed a different layer based on the variable value. These layers let the game player how he or she did, including recommendations on future DIY projects.

On both the final results slide and the game play slide, I included a reset button. This was a neat little trick I learned at a Storyline workshop. The reset button simply loaded the game play slide again. As long as the slide is set to reset to the initial state (not to resume the saved state), everything on the slide will get reset. I did have to add a second trigger to reset the variable value to zero since that’s stored at the project level, not the slide level.

Storyline triggers that display the results of the bingo game

The Result

Click here for the full interaction.


Leave your comment