We often forget to celebrate our accomplishments and move on to the next big challenge. If you ever wanted to add a little confetti celebration in your Storyline course, this solution may help you.

First, make sure the celebration is warranted! Celebrating everything may diminish the experience. However, when designed and executed correctly, a little confetti shower can be a proper surprise and delight!

The following link takes you to the prototype. See for yourself before you continue!

https://www.rabbitoreg.com/examples/confetti/story.html

Download the source Storyline 360 file.

How to make the confetti shower celebration?

The solution is using JavaScript: you can always get the update from https://github.com/mathusummut/confetti.js.

It is under the MIT license, so make sure you include the license as is.

Note: if you download the source Storyline 360 and use it as a template, you don’t need to do the steps below 1-4. They are already done.

You can download the source Storyline 360 file from my website. The preview won’t work because it does not support JavaScript. You’ll need to publish it. You can publish it to Articulate Review.

If you want to build the same experience from scratch, follow steps 1-4 below:

STEP 1. Add the confetti.js to Storyline

There are two ways to add the required confetti.js to your project:

a) Directly linked from the source
Pros: You always get the latest build as the author updates the JavaScript file.
Cons: Your LMS or firewall may not play nice with external links. If the author decides to remove the file, your solution breaks.

b) Locally loaded within the Storyline project
Pros: It is always there, no matter what happens. Loaded quickly because it is in the same folder as your Storyline project.
Cons: If there is a bug for some reason and you want to update it, you would need to republish the Storyline project. (Or, if you have access to the server where the actual files are stored, you can just update the folder.) You’ll need to add a webobject.

In the example, we’ll add the confetti.min.js locally.

STEP 2: Add a webobject in your Storyline project

Preparing the confetti.js webobject:

  1. Create a folder on your drive (let’s say it’s titled confetti_source)
  2. In the confetti_source folder, download the confetti files from github (it will contain the actual JavaScript file as well as a readme and license)
  3. Create a strawman index.html file (it does not have content, only the HTML structure but Storyline requires an index.html file in the folder.)

Add a webobject FOLDER in Storyline. It doesn’t matter where it is but it should be off the screen. We’re not showing anything. The purpose of the webobject is to force Storyline to have the confetti.js file available every time you publish it.

Note: select the FOLDER (confetti_source) as a webobject rather than the index.html inside.

STEP 3: Publish the project locally

Confirm that you see the confetti_source content in your published version under story_content/WebObjects/XXXXX.

Copy the webobject folder title (in this case 6LASF2apgd6). You’ll need that for the Storyline project. You only have to do this once.

Finally, in the Storyline project, create a text variable, called WebObjectFolder and set the default to the folder name you just copied from the published version.

Storyline creates a random folder name for each webobject but that random name stays with every publishing, so it’s a one-time event for you.

STEP 4: Load the confetti.js

So far, you’ve added a webobject with the required JavaScript file, published the source once to get the name of the folder, and created a variable to store that name.

It’s time to make sure every time someone launches your project, the confetti.min.js file loads into memory.

  1. On the Master Slide page you’re using (if you’re using multiple ones, add this to all) add a JS Trigger when the timeline starts.
  2. Inside the JS trigger, add the following code:

let p = GetPlayer();
let webLoc = p.GetVar(“WebObjectFolder”);
let oLocation=”story_content/WebObjects/”+webLoc+”/”;

function add_script(scriptURL,oID) {

let scriptEl = document.createElement(“script”);

let head=document.getElementsByTagName(‘head’)[0];

let fn = “loadedCallback_”+oID
scriptEl.type = “text/javascript”;

scriptEl.src = scriptURL;

scriptEl.id=oID;

scriptEl.onload = eval(fn);

head.appendChild(scriptEl);

}

if(document.getElementById(‘zsoltsupport’)==null){

add_script(oLocation+”confetti.min.js”,”zsoltsupport”);

}

function loadedCallback_zsoltsupport()
{

// loaded

}

If you want to trigger something when the script is loaded, you can add it to the //loaded line. This code loads the script into memory but only once. Even if a master slide is loaded multiple times, the script will only load it once.

Throwing the confetti

So far, you’ve either decided to use the source Storyline file as-is or build your own based on the steps. It is time to test out the confetti.

To trigger the confetti, add a JS trigger with the following:

confetti.start();

This will use the default setting and continuously throws the confetti.

You can change the default settings by adding these lines before the confetti.start() and adjust the numbers:

confetti.maxCount = 200;
confetti.particleSpeed = 3;
confetti.frameInterval = 20;
confetti.alpha = 1.0;
confetti.gradient = false;

Experiment with different numbers to match your idea of celebration.

How to stop the confetti party?

You can either pause or stop the confetti party in a different JS trigger:

confetti.stop();

or

confetti.pause();

If you don’t want the confetti to go forever, you have two options:

a) Use the confetti.start(timeout); command where you set the timeout in seconds. For example, you can set confetti.start(5) for 5 seconds of confetti.

b) Use the JavaScript function, setTimeOut(), to trigger a stop after a certain time:

confetti.conftime = setTimeout(function(){

let party = !player.GetVar(“Party”);
confetti.stop();
player.SetVar(“Party”,party)
}, 5000);

Why would you bother with this option? Let’s say, you want something to happen after 5 seconds when the shower ends. You can have a Storyline variable Party that is True or False depending on whether confetti is on or off. You can run multiple lines of code after the timeout. In this case, we both stop the confetti and toggle the Party variable. You could also stop playing music or sounds effects this way.

TIP: setTimeout is a JavaScript function that can trigger code execution after a certain amount of time. It returns a unique ID. Normally, you don’t need that ID, unless you want to cancel the timeout for some reason. That is why we store this ID as a property of the confetti object.

TIP: if you need to stop the confetti party BEFORE the set timeout, you can simply clear the timeout using the stored unique ID:

Just make sure you don’t trigger more than one confetti party!

So, if you don’t need anything else to happen when the timeout is triggered, just use the embedded confetti.start(timeout) function. If you need more control over it, use the example in the source.

Can I test if confetti is on or off?

Yes, you can also test any time if confetti falling or not. Here’s the list of all functions: 

confetti.start();                  //starts the confetti animation (keeps going until stopped manually)
confetti.start(timeout);           //starts confetti animation with confetti timeout in milliseconds (if timeout is 0, it will keep going until stopped manually)
confetti.start(timeout, amount);   //like confetti.start(timeout), but also specifies the number of confetti particles to throw (50 would be a good example)
confetti.start(timeout, min, max); //like confetti.start(timeout), but also the specifies the number of confetti particles randomly between the specified minimum and maximum amount
confetti.stop();        //stops adding confetti
confetti.toggle();      //starts or stops the confetti animation depending on whether it's already running
confetti.pause();       //freezes the confetti animation
confetti.resume();      //unfreezes the confetti animation
confetti.togglePause(); //toggles whether the confetti animation is paused
confetti.remove();      //stops the confetti animation and remove all confetti immediately
confetti.isPaused();    //returns true or false depending on whether the confetti animation is paused
confetti.isRunning();   //returns true or false depending on whether the animation is running

TIP: if you want to control the size of the celebration (maybe throwing more confetti for a larger score), use the confetti.start(timeout, amount); JavaScript function and set the amount.

Let the celebration start!