Forum Discussion
Adding JavaScript Confetti Effect to a Continue Divider label
Hello! I've been working a lot with JavaScript in Storyline 360, and now I want to add a small interactive element to one of my Rise 360 courses. I want this element to be a built-in continue divider button, that when pressed shoots out confetti. Is there any convenient way of editing the JavaScript properties of this premade block?
2 Replies
Hey, love this idea!
Rise 360’s built-in blocks like the Continue divider don’t really offer much flexibility for customizing behavior with JavaScript — so there’s no easy way to hook confetti effects into that button as-is.
Still you can try :
1. Embed an external button – If you’re up for it, you can build a simple HTML page with a confetti trigger and embed it using an Embed block. Style it to look like a Continue button, and it’ll feel interactive even if it’s not the real divider.I'm not very familiar with Rise's HTML structure, but you should be able to target the .continue-btn once it becomes available in the DOM and trigger a confetti effect when it's clicked.
This assumes that the confetti library (confetti.js) is properly included in the Rise output — typically by adding the <script> tag to the index.html file inside the published folder.
Caveat: every time you re-publish the course, you'll need to reinsert the confetti code into the index.html file manually, as Rise will overwrite your custom edits during publishing.
