Add confetti to your Storyline project – JavaScript in Storyline 360 #1

August 1, 2022

If you’re reading this post, the likelihood is that you’re already pretty familiar with Articulate Storyline 360, what it can do and, more frustratingly, what it can’t…

There is a caveat to these limitations, however. Storyline has a trigger that allows us to create custom functionality. “Execute JavaScript”. This little gem enables us to do some pretty cool stuff. Things that you may or may not realise are possible.

We don’t claim to be Web Developers or experts in JavaScript. Please bear in mind that these methods are not supported by Articulate, and if you’re not careful, you could cause things to stop working. Also, be aware that the Web and Storyline are constantly changing, what works at the time of publishing this post, may not work tomorrow.

With that said, here’s how you can add confetti to your Storyline 360 project. If you find any of these steps hard to follow, be sure to scroll to the bottom of the post where we have a video tutorial on how it’s done. Be sure to leave us a like and a comment!

A common tactic to inspire and motivate learners is to reward them and celebrate their successes. We often use confetti or fireworks to create a little burst of energy on a slide. This can be easily achieved in JavaScript, as there are existing libraries out there that are free to use.

You can click on the images below to enlarge them in a new tab! 🙂

How to:

Step 1: Visit the canvas confetti website and find a confetti effect you like, you can see what each of them looks like by clicking “Run”. Then, copy the code for your chosen effect.

In our example, we are using the Fireworks example, if you want to use the same effect, you can copy the code here:

var duration = 15 * 1000;
var animationEnd = Date.now() + duration;
var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };

function randomInRange(min, max) {
  return Math.random() * (max - min) + min;
}

var interval = setInterval(function() {
  var timeLeft = animationEnd - Date.now();

  if (timeLeft <= 0) {
    return clearInterval(interval);
  }

  var particleCount = 50 * (timeLeft / duration);
  // since particles fall down, start a bit higher than random
  confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
  confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
}, 250);

 

Step 2: In your Storyline project, create a trigger that Executes JavaScript. This needs to happen whenever you want the confetti to come in, whether that is on the Timeline start, or a button click, is up to you.

Step 3: Open the JavaScript Editor and paste in the code you have copied from the canvas confetti library

Step 4 (Method 1): Now, we need to reference the code, and you can do this one of two ways. First, Publish your project, and click open. Next, right-click your story.html and open it in a text editor like notepad (I use Brackets, which is free to download!).

Step 5: Visit the Canvas confetti GitHub and copy the <script> tag. For the most up-to-date link, you’ll need to copy this from the website.

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>

 

Step 6: Paste that script into the head of the document (Just before the </head> tag).

Step 7: Save and close the HTML file.

 

Step 8: View your storyline project, et voilà!

There is, however, an alternative method to referencing this script that doesn’t require editing the HTML file every time you publish:

Step 4 (Method 2): Go back to Storyline, and set up a new trigger to Execute the JavaScript when the timeline starts on that slide.

 

Step 5: Paste in the following code.

var confettiScript = document.createElement('script');
confettiScript.setAttribute('src','https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js');
document.head.appendChild(confettiScript);

Step 6: Publish and view your project, and this works in the same way as Method 1

This is not the ‘correct’ way to reference a script, so Method 1 is preferred. However, this is an excellent workaround for when you’re developing and publishing repeatedly!

 

Watch our video tutorial

If you found this useful and there are other topics you would like us to cover, feel free to leave a comment on the video! We look forward to hearing from you.

Be sure to Subscribe to our channel for future tips and tricks.