Looking to inject some excitement and fun into your Storyline courses? Surprise your learners with a burst of confetti! Whether you’re marking a quiz success, a module completion, or just want to create a festive atmosphere, confetti is a simple and effective way to make your e-learning experience memorable.
What’s the Secret Sauce? (JavaScript and Storyline Triggers)
We use a bit of JavaScript code, the language of the web, to create the confetti effect. Think of it as the recipe that makes the confetti appear. Just copy the JavaScript and place it on the success layer of your quiz or where you want it to appear.
Why Confetti Works in E-Learning
Confetti animations in your Storyline courses go beyond just visual flair. They serve as a form of positive reinforcement, rewarding learners for their accomplishments and boosting their confidence. The unexpected burst of color and excitement re-energizes participants, making them more engaged and interested in the content. Moreover, these memorable moments help learners retain information more effectively and create a positive association with your course.
Adding Confetti to Your Storyline Project: A Step-by-Step Guide
To add confetti to your Storyline project, start by heading over to confetti.js and checking out their examples. A great option for educational settings is the “School Pride” example.
Next, decide when you’d like the confetti to appear. Common triggers include when a learner clicks a specific button, successfully completes a quiz, or enters/exits a particular slide.
Now in Storyline, go to the trigger’s settings and paste your confetti code into “Execute JavaScript” trigger of where you want the confetti to appear with this code:
const script1 = document.createElement('script');
script1.src = "https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js";
script1.async = false;
script1.onload = function() {
//paste your code from confetti.js here
};
document.body.appendChild(script1);
This will search for the confetti.js cdn and append it to your course, and placing the code from confetti.js to create the effect you want. Its that simple. Preview your project to see the confetti in action. Adjust the timing, colors, and amount of confetti to fit your preferences.
Ready, Set, Celebrate!
Let’s make your Storyline courses more engaging and memorable with a sprinkle of confetti. It’s a small addition that can make a big impact on the learner experience. If you need any help or have questions, feel free to reach out!
Watch this video:
