Blog Post

Articles
10 MIN READ

How to Customize This Storyline 360 Countdown Quiz Game Template

AllisonLaMotte's avatar
5 years ago

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:

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:

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.

Published 5 years ago
Version 1.0
  • Hi Allison!

    Thank you for responding. I did update the variables for each section and the feedback for the states as suggested. I think what the issue I am having is the totals are not being recorded when I get to the results slide and I keep getting the incorrect layer.
    I did a run through and got all questions correct but was unable to move onto the next level. I hope my explanations provide a better understanding of the issue I ran into.
    Please also permit the opportunity to say again thank you for responding and providing such an awesome template.
  • Great Template Allison,

    I have used the template to create a quiz for my organization and made some changes but got stuck figuring out the variables. I changed the number of questions for each section and got stuck in each section as it does not permit me to move forward. Any comments on what I am doing wrong perhaps, I don't think you covered that in the comments above.
  • JosephFortine's avatar
    JosephFortine
    Community Member
    Great stuff! We're going to use it to sell more gamification in out eLearns - thanks for your great work!
  • Hi Allison,

    Amazing stuff right here. I just have some minor questions when I try it myself. It seems that the bonus time doesn't really work in my case, and I'm not sure why. Everything was working except that.

    Thanks in advance.
    • AllisonLaMotte's avatar
      AllisonLaMotte
      Staff
      Hi there,
      Can you give me more information about what's not working with the bonus time? Maybe even a quick Peek 360 screencast? Thanks!
  • Hi Allison,

    Thanks for all this tuto. It's great.
    Only one question, I'd like decreasing time. You explain how increasing but not the other way around.

    Thanks for your answer.

    Marry Christmas and happy new year !

    Agnès
    • AllisonLaMotte's avatar
      AllisonLaMotte
      Staff
      Hi Agnès,
      Sorry for the delayed reply, I never saw this notification. To decrease the amount of time, just follow the same steps, but skip the second one. :)
  • Hi - this is a great template - thanks! Here's a dumb question: How do I get into the levels bubbles on the gameboard to change the text? "Edit text" produces the appropriate cursor, but it doesn't have any effect on the text.
      • LerissaPatri540's avatar
        LerissaPatri540
        Community Member
        Well ... duh. ;-) Thanks.

        Now for another one: To change the passing score, you say we should open each result slide and click Edit Result Slide. When I open the result slides, I don't see anything like what your screen shot shows. This is yours:

        [cid:image001.jpg@01D6D3CF.AA7DCAF0]

        And this is mine:

        [cid:image002.jpg@01D6D3CF.AA7DCAF0]

        How do I get to the dialog box "Edit Result Slide"?

        Thanks!

        Lerissa

  • hi Allison,
    What an awesome template, and an even better tut! kudos. I have a few questions:
    1. what if i want to start the timer only after my question is read (i will have voice for my question)?
    2. what if i want to have feedback for each question. the current feedback layers don't have a continue button. but when i insert the feedback in the formview, the continue button appears. should i just delete it?
    • AllisonLaMotte's avatar
      AllisonLaMotte
      Staff
      Hmmm... good questions! For 1, I think you'll just need to tack on some extra time and let the timer start at the beginning.

      For 2, you probably wouldn't want to delete the continue button because you'll want to let people advance when they're done reading the feedback instead of automatically.
  • JohnKilby's avatar
    JohnKilby
    Community Member
    Hi Allison, this is fantastic thanks for sharing, I did end up reducing mine to 10 questions but I changed the value of the questions from 10 to 20 so the final calculations remained the same, again great job thanks
    • AllisonLaMotte's avatar
      AllisonLaMotte
      Staff
      What a great idea! I wish I had thought of that. I'll update the article to include that trick. Thanks for sharing!