Blog Post

Articles
13 MIN READ

How I Made This Randomized Math Game in Storyline 360

SarahHodge's avatar
SarahHodge
Former Staff
3 years ago

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

(edited versions)

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:

Variable Name

Type

Default Value

Purpose

score

Number

0

The total score.

a

Number

0

First number in the math problem.

b

Number

0

Second number in the math problem.

 

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

Variable Name

Type

Default Value

Purpose

timer

True/False

False

To make the timer visible for learners who want it, and invisible for those who don’t.

 

Layers

For the layers, I added the following variables:

Layer Name

Variable Name

Type

Default Value

Purpose

Correct

FeedbackCorrect

Text

blank

The Correct feedback text.

Incorrect

FeedbackIncorrect

Text

blank

The Incorrect feedback text.

Incorrect and Time’s Up

answer

Number

1

The Correct answer.

 

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

Layer Name

Variable Name

Type

Default Value

Purpose

Correct and Incorrect

FeedbackNumber

Number

0

Decides which Correct and Incorrect feedback phrases to display

 

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.

Variable

Trigger

Purpose

a

Set a to random number between 1 and 12 when the timeline starts on this slide

I chose to pull from a range of 1 to 12 since this is a common range used for testing multiplication. You can easily edit the trigger to display a different range.

b

Set b to random number between 1 and 12 when the timeline starts on this slide

NumericEntry

Set NumericEntry to value 0 when the timeline starts on this slide

I wanted the data field to display a neutral number so the learner knows to type their answer there. 

 

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.

Variable

Trigger

Purpose

answer 


a

Multiply answer by variable a when the user clicks Check Answer

When I created the variables earlier, I set the default value of answer to 1. That’s because this is a multiplication problem and anything multiplied by 0 is 0. Setting answer to 1 makes it so:

  • answer (1) x a = a
  • answer (1) x b = b

Which then makes the correct answer: 

  • a x b = answer

answer


b

Multiply answer by variable b when the user clicks Check Answer

NumericEntry


answer

Show layer Correct when the user clicks Check Answer if NumericEntry= variable answer

This lets learners know when their response is the same as the correct answer. 

Show layer Incorrect when the user clicks Check Answer if NumericEntry ≠ variable answer

This lets learners know when their response doesn’t match the correct answer. 

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. 

Variable

Trigger

Purpose

score

Add value 1 to score when the timeline starts on this layer

For every question the learner gets right, a point is added to their 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:

Variable

Trigger

Reason

FeedbackNumber

Set FeedbackNumber to random number between 1 and 10 when the timeline starts on this layer

Since the goal of the game is to answer 10 questions right in a row, I included 10 different feedback phrases. This random number determines which phrase displays each time the learner answers correctly. 

FeedbackCorrect


FeedbackNumber

Set FeedbackCorrect to value Way to go! when FeedbackNumber = value 1

These are all the positive feedback phrases that display depending on the FeedbackNumber. I assigned each phrase a different number. 


 


























 

Set FeedbackCorrect to value Outstanding! when FeedbackNumber = value 2

Set FeedbackCorrect to value Marvelous! when FeedbackNumber = value 3

Set FeedbackCorrect to value Incredible! when FeedbackNumber = value 4

Set FeedbackCorrect to value Right on! when FeedbackNumber = value 5

Set FeedbackCorrect to value You’re on fire! when FeedbackNumber = value 6

Set FeedbackCorrect to value I’m impressed! when FeedbackNumber = value 7

Set FeedbackCorrect to value Good thinking! when FeedbackNumber = value 8

Set FeedbackCorrect to value Grrr … eat! when FeedbackNumber = value 9

Set FeedbackCorrect to value Brilliant! when FeedbackNumber = value 10

 

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.   

Variable

Trigger

Purpose

n/a

Hide this layer when the user clicks Next button

If the learner hasn’t earned 10 points yet, the layer closes and they’re presented with a new question to earn more points.

score

Jump to 1.3 Pass when the user clicks Next button if score = value 10

Once a learner earns 10 points, instead of hiding the layer to display the next question they’re directed to the final slide.

answer

Set answer to value 1 when the user clicks Next button

Since the learner is moving onto the next question, this trigger resets the correct answer to its default value of 1. 

NumericEntry

Set NumericEntry to value 0 when the user clicks Next button

Instead of leaving the previously typed answer visible, this trigger resets the numeric entry field to 0 so the learner can start with a neutral number.

a

Set a to random number between 1 and 12 when the user clicks Next button 

These triggers reset both number fields to display a new math problem within the selected range.

b

Set b to random number between 1 and 12 when the user clicks Next button 

 

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:

Variable

Trigger

Reason

FeedbackNumber

Set FeedbackNumber to random number between 1 and 3 when the timeline starts on this layer

This random number determines which phrase displays each time the learner answers incorrectly. 

Incorrect

FeedbackNumber

Set FeedbackIncorrect to value Ahhh! when FeedbackNumber = value 1

These are all the Incorrect feedback phrases that display depending on the FeedbackNumber. I assigned each phrase a different number. 


I only included three different feedback phrases since the game is set up to get more answers right and the learners won’t see this layer as often.

Set FeedbackIncorrect to value Grrr … when FeedbackNumber = value 2

Set FeedbackIncorrect to value Eeek! when FeedbackNumber = value 3

 

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

Variable

Trigger

Purpose

n/a

Jump to slide 1.4 Fail when the user clicks the Next button

Since the learner didn’t answer 10 questions right in a row, they’re directed to the final slide, where they can play again.

n/a

Hide this layer when the user clicks Next button

Left this trigger in to ensure the slide resets on restart.

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.

Variable

Trigger

Purpose

timer

Set timer to True when the user clicks Timed button

To save the option selected by the learner: Timed or Not Timed. 

 

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: 

Variable

Trigger

Purpose

timer

Change state of [timer color] to Normal when the timeline starts on this slide if timer = value True

To show the timer at the start of this slide when the learner selects the Timed option.  

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:

Variable

Trigger

Purpose

timer

Show layer Time’s Up when the animation Exit on red completes if timer = value True

To make the Time’s Up layer appear when the red shape is no longer visible. 

 

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:

Variable

Trigger

Purpose

answer 


a

Multiply answer by variable a when the timeline starts on this slide

To show the correct answer on this layer.






 

answer 


b

Multiply answer by variable b when the timeline starts on this slide

 

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.

Variable

Trigger

Purpose

n/a

Jump to 1.4 Fail when the user clicks Next button

To see their final results and give them another chance to play.

 

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:

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

Published 3 years ago
Version 1.0
  • Very thorough! Looking forward to trying this out with my own fun, timed course. (:
  • Hi Sarah, I absolutely love this course and want to use it with my math class. How would I be able to change the type of math to addition, subtraction, division, etc?
    • SarahHodge's avatar
      SarahHodge
      Former Staff
      I love this! Your addition version is so dino-mite!🦕😁 Thanks so much for creating this and sharing it, Mr. Joshua!
  • ITSoftware's avatar
    ITSoftware
    Community Member
    Question: How and when does one setup the "Check Answer" field? I am at the step to setup the trigger "Show layer Correct when the user clicks Check Answer if NumericEntry= variable answer" but the "Check Answer" field is unavailable.

    Cheers,
    Dave