How I Made This Randomized Math Game in Storyline 360

When I was in fourth grade, my teacher would hold math competitions. He’d call two students to the front of the class and then give us a multiplication problem to solve. The first student to answer correctly would remain at the front and another student would be called up until there were no more students left. The last person remaining was the winner. It was a fun yet nerve-wracking challenge. 

I liked math (note: this was before calculus 😆), but didn’t always like practicing in front of a large group of people. That’s what inspired me to create an online version:

View | Download

In my version, instead of competing against others, learners can either answer at their own pace or race against the clock. 

And thanks to random number variables in Storyline 360, I built it all without any coding skills! Curious how I did it? Let me walk you through my process. 

1.  Create the Storyboard 

The concept for this game was pretty simple: I wanted to present learners with 10 questions and see how many in a row they could answer correctly. 

With that in mind, I decided to draft a storyboard using this visual template. Here’s how it turned out:

Basically, I mapped out:

• An intro slide with a Start button and an Instructions layer, where learners decide whether they want to race against the clock.
• A main slide for all the math questions, with some feedback layers.
• A final slide where learners can see if they passed or failed and decide if they want to try again.

2. Build the Slides 

The first thing I did to bring that storyboard to life in Storyline 360 was build each slide and layer. From there, I inserted the text, shapes, icons, and graphics. 

I found the background image and all the monster illustrations in Content Library 360. Then, I used the media library feature to quickly open and edit the illustrations in Photoshop. For example, I was able to transform this free purple monster asset …

Before (Content Library 360 illustration)

… into four additional options by removing the background and making more poses and facial expressions, for a more engaging learning experience.

After I finished building and designing all my slides and layers, I was ready to focus on the more technical aspects—math!😬  

3. Display Random Questions and Feedback 

To make this game challenging, I wanted learners to see different math problems each time they played. I also wanted to show a variety of feedback messages so it felt more personalized.    

To do this, I used variables. Variables collect and store data in Storyline 360 that you can use to display information anywhere in your course. This can be text—the learner’s name, for example—or numbers—like in math problems. 

Most people create variables first and then insert the references to display the values on the screen. However, I decided to type my variable names on the slide before creating them to figure out exactly how many—and what kind—I needed. 

In Storyline 360, it’s easy to manually insert variable references. Simply insert a textbox and type percentage signs on each side of the variable name, as shown below.

Slide

On the base layer, I ended up with the following variables:

I also planned to add one behind-the-scene variable that wasn’t going to be visible on the base layer:

Layers

For the layers, I added the following variables:

I also planned to add one behind-the-scene variable that wasn’t going to be visible on the correct and incorrect layers:

Once I identified all the variables I needed, I went ahead and created them by clicking the Manage Project Variables icon at the top right of the triggers panel.

I then selected the plus (+) sign to create each new variable.

When you’re done, this is what it should look like:

Once everything’s set up, the default values will appear automatically in place of the variable references, as shown below with light yellow boxes. But don’t worry, these boxes won’t show when you preview/publish. They’re simply there to help you see which variables are being referenced. All you need to do is hover over each yellow box to see the name of the variable.

Slide

Layers

4. Make a Space for Learners to Type Their Answers

Next, I needed to create a space for learners to type their answers. I went to the Insert tab, clicked Input, and chose Numeric Entry Field.

Then, I drew the data-entry field on my slide. 

I customized the formatting of the text in the numeric entry field to match my course design and formatted the shape by removing the outline and making the fill color completely transparent. (Note: Do not select the No Fill option. Doing so will prevent learners from clicking on the object and typing an answer.)

When you add a numeric entry field, Storyline 360 automatically creates a variable to save the data … 

… and a trigger to set the value of the variable to whatever the learner types in the field. 

So there’s nothing else for you to do! It’s supereasy. And now, when the learner enters their answer and then clicks away—or selects the Submit button—the NumericEntry variable automatically updates to the value they typed.

5. Set Up the Math Calculations

With the variables and the numeric entry field all set up, it was time to add triggers to make the math problems work! Triggers make it so easy to build these types of interactions without any code. All you have to do is choose an action and decide when you want it to occur. Let’s take a look at the triggers I created on my slide.

First, the base layer. I organized the triggers into two parts: when the timeline starts and when the user clicks Check Answer. Let’s take a look at the triggers I created. 

1. When the timeline starts on this slide. At the start of the slide, learners are presented with a random math problem. Here’s the image with the variable names so it’s easier to follow along.

2. When the user clicks Check Answer. Once the learner types their answer in the numeric entry field, they click the Check Answer button and are automatically directed to a custom feedback layer—Correct or Incorrect—depending on their response. Here are the triggers I created to ensure they were directed to the right layer.

6. Add Some Feedback

When it comes to quizzes, feedback is essential because it lets learners know how they’re doing. Since this is a game, I kept the feedback simple to keep the momentum going. Let’s take a quick look at how I set up the feedback from a technical perspective.

Correct layer

For the Correct layer, I organized the triggers into three different categories—Score, Feedback, Next button.  

1. Score: Displaying a score helps learners gauge their progress. Since the goal of this game is for the learner to get 10 questions right in a row, I created the following trigger to calculate the score. 

2. Feedback: When I first created the Correct layer, I typed the feedback phrase, “That’s right!” But as I reviewed this interaction, seeing “That’s right!” 10 times in a row felt too repetitive. So, in addition to random math problems, I decided to add random feedback phrases for some variety. 

I wasn’t quite sure how to randomize words, but I remembered seeing this awesome Storyline: E-Learning Needs Analysis Generator by Montse. The concept was similar to what I was looking to do, so I dug into her file to see how she set it up.  Here’s how I got the randomized feedback to work in my  project:

3. Next button: After the learner reviews the correct feedback, they can move on to the next question. But since I built this entire interaction on just one slide, there are a few other triggers to add to reset everything after each question.   

Incorrect layer

For the Incorrect layer, I organized the triggers into two categories—Feedback and Next button. This layer didn’t require as many triggers since the Next button takes them to a final slide that allows them to restart the game. 

1. Feedback: Similar to the Correct layer, I wanted to present different feedback phrases for incorrect responses. This is how that works:

2. Next button: After the learner reviews the Incorrect feedback, they’re directed to the final slide. Here’s how I set that up:

7. Include an Optional Timer 

I decided to give learners the option to race against the clock, to make it even more challenging if they wanted to. Timed quizzes make for a more gamified experience, but—for accessibility purposes—I made the timer optional. Timers put learners who have visual, cognitive, or motor impairments and those using screen readers at a disadvantage. By providing two options, all learners are empowered to personalize the experience to fit their needs.

Here’s how I set that up.

Create the Timer Graphic

To create the timer graphic, I inserted three long, thin rectangles at the top of the main quiz slide. Then, I changed the fill colors of each so that I had one white, one gray, and one red rectangle.

Hide the Timer 

For learners who want to answer the questions at their own pace, I hid the timer. To do this, I changed the initial state of each shape to Hidden.

Now, if a learner selects “Not timed,” the timer remains hidden. No triggers necessary.  

Show the Timer 

Then, to ensure the timer is visible for learners who want it, I added the following trigger to the Instructions layer of the introduction slide.

Then, I added three triggers to the base layer of the main quiz slide—one for each of the colored rectangles—so that the timer displays if the learner selects the Timed button: 

Remember: You need to add the above trigger to each colored rectangle, so in the end, you should have three almost identical triggers:

Make the Timer Work

Now it’s time to add animations to the timer so it looks like time is running out. To do that, I added a Fade and Wipe from Right animation to the red timer rectangle at the top of my slide. I changed the duration of the wipe to 30 seconds to give learners 30 seconds to complete the 10-question quiz before the timer runs out.

Next, I extended the timeline of my slide to 30.75 seconds to take into account the animation durations.

Then, I added the following trigger to display the Time’s Up layer when the time runs out:

Here’s what that layer looks like:

Since the Time’s Up layer appears automatically when time runs out, there’s no time for learners to click on the Check button to see if they answered the questions correctly. For this reason, I added the following triggers to this layer:

Then, I added a trigger to jump to the Fail slide when learners click on Next so they can see their score and decide whether they want to play again.

Finally, I adjusted the settings of each layer on the main quiz slide so that the timer would only run when the learner was solving a math problem—not when they were viewing feedback. To do that, I clicked the properties icon and selected the Pause Timeline of Base Layer option:

8. Add Finishing Touches

Once everything worked the way I wanted it to, I added some finishing touches to make it feel more game-like. For example, I inserted music I found on YouTube Studio and included a few sound effects I downloaded from Freesound. I also added subtle fade-ins and wipe-up animations for a smoother gaming experience. It’s amazing what a difference these small details can make when it comes to the overall experience.

Wrap-Up

In this project, I used random number variables to generate unpredictable math problems and phrases to make a more dynamic learning experience, but there are so many other cool ways to use this feature. Want to take a deeper dive into this game? You can download it here. 

How have you used random number variables in your projects? Please share your ideas or examples in the comments below. 

Looking for more inspiration on how to use variables in your projects? Check out these these e-learning challenges:

• 39 Brilliant Ways to Use Random Number Variables in E-Learning
• 24 Dynamic Ideas for Using Number Variables in E-Learning
• 33 Random Number Variable Examples in E-Learning

Want to try building something similar in Storyline 360, but don’t have Articulate 360? Start a free 30-day trial.