Custom Table of Contents Based on Variable Button Trigger in Storyline 360
Has anyone tried creating a custom dynamic Table of Contents based on a button trigger in Storyline 360? I want to create a branching lesson that has mostly shared information but at points it separates to offer specified information based off of a button choice made at the start. The problem I'm running into is that it will show all of the contents in the player table of contents. Even when I set up a custom table of contents it shows both choice options. I would like to be able to have that change based off of that initial button choice. I have tried using JavaScript but can't seem to locate where in the story file or the overall published file the table of contents is located. Any ideas if this is even possible or am I barking up the wrong tree?Javascript not working in full screen
Hi all! I have two Javascript codes that execute when selected: one to copy a claim key, and another to add confetti. Both seem to work when completed normally, but once I'm in full screen, neither work! Is it because of the Javascript itself? To recreate the issue: 1. Claim key: if you have something copied, open the Storyline file in full screen, select the "Copy Claim Key" button, and paste in the text field below. If in full screen, it will paste your previous selection instead of the key (which is "S8AM83B2QDBBKKF89K3K")! The code used for this is below, using a "ClaimKey" variable already set in the Storyline file: var player = GetPlayer(); var text = player.GetVar("ClaimKey"); copyFunction (text); function copyFunction(tt) { const copyText = tt; const textArea = document.createElement('textarea'); textArea.textContent = copyText; document.body.append(textArea); textArea.select(); document.execCommand("copy"); textArea.style.display = "none"; } 2. Confetti: if you select the "Add Confetti" button, the confetti will appear on the page normally. If you select full screen and the "Add Confetti" button again, exit full screen early to see the last instances of confetti that don't show up in full screen. Two Javascript codes were used for confetti: var duration = 5 * 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); 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); *The second code is a workaround I used from this Little Man Project postto avoid updating the HTML file each time I publish :) I'm a JavaScript beginner, so any help is appreciated! You can preview the issue here in Review, and I've attached the file for reference. Thanks!How to execute JS in Storyline Block in Rise
I have a Storyline block in rise that is a web object so that I can have the audience interact with a web page. The problem is the web page has some overlay windows that end up taking over most of the screen real estate. A used AI to write this code, added a trigger to execute this code When the timeline starts (also tried 1.5 sec in case it was triggering to soon). Also tried tying it to a button and executing it on click but still no luck. Anyone had luck closing overlay windows on a webpage inside of rise? function closeOverlays() { // Find all elements with the class 'overlay' var overlays = document.querySelectorAll('.overlay'); // Loop through each overlay and close it overlays.forEach(async function(overlay) { // Find the close button within the overlay var closeButton = overlay.querySelector('.close-button'); // If a close button is found, click it to close the overlay if (closeButton) { closeButton.click(); // Wait for the closing animation to complete await new Promise(resolve => setTimeout(resolve, 500)); // Adjust the delay as needed } else { // Handle overlays without a close button overlay.style.display = 'none'; } }); }Get data from Storyline 360 into .csv or .txt
Hi there, we've built a Storyline 360 course and now there is the request to save / export * IP-Address * date/time * confirmation of clicks into any kind of file, to prove users have read a specific document and agreed to the "term of use". Is that possible using java somehow? To be honest, I'm a complete newbe with respect to that, so I appreciate any kind of help/ideas how to realize it. Thanks a lot in advance. Regards WolfgangNew Tutorial! Create and Control Glassmorphism Effects With JavaScript In Storyline
Hi Heroes, I'd like to share the latest episode in my Storyline Magic Series on my YouTube channel! In this episode, we'll delve into 'Glassmorphism'—a modern and powerful design technique that blends translucent surfaces with frosted glass effects. This approach not only enhances the aesthetic of your content but also helps learning designers create depth and establish a clear visual hierarchy. I’ll show you how to create and control this stunning effect entirely within Articulate Storyline 360. Let me know if you'd enjoy seeing more comprehensive start-to-finish project builds like this in the future! And see how other Storyline devs are using Glassmorphism here: https://community.articulate.com/blog/e-learning-challenges/using-glassmorphism-designs-in-e-learning-course-development-310/1151525 --- My name's Chris Hodgson, an eLearning developer and software trainer based in the UK. I enjoy creating fun, unique, and engaging online experiences using Articulate software! Connect with me on LinkedIn -https://www.linkedin.com/in/chrishodgson44/Consulting Opportunity
Hi, Everyone! I hope it is OK to publish this here . . . Several years ago I worked with a consultant to develop a WebObject that used JS to control the behavior of videos that are streamed from Vimeo. The JS allowed us to do things like turn off fast-fowarding, track when the video started and stopped, and select the video to be streamed using variables. It worked very well and allowed us to seamlessly incorporate videos that had been translated into 15 different languages. Now, after several years, the code is getting glitchy. I need some help editing/re-programming the WebObject. Please let me know if this is something that any of you folks can help with. Feel free to reply here or send an email to dellenwood@s2learning.com for details. THANK YOU so MUCH! - Dave EllenwoodElapsed Time when the user is active on the page - help with Javascript code
Hello appreciate your help on this matter~ While storyline has built in variables to document project time & slide time, to my knowledge if you want to collect the elapsed active time, as not on another browser tab or another window, you need to use Javascript. I have attempted this with no results in two ways (see attached storyline files) Attempt #1: Visibility Use document.hidden to detect when the user is inactive (e.g., switches to a different tab). Attempt #2: Set Interval Method Use "start," "stop," and "reset" function when the page is active. Adjust from this source. Note: on the file below I just created it for the first slide but I would replicate it for the rest. Instead of pasting all the code I have it in the files below. Any suggestions on how to accomplish this goal of recording the total course time and the time on each of the slides (but pausing the timer when they aren't on the actual page)?Tutorial - How To Control Rise Block Interaction From Storyline Using JS!
Hi Heroes! It’s fantastic to see that Storyline developers interested in using JavaScript to enhance the user experience now have our own dedicated group with the latest E-Learning Heroes website update! Nearly three years ago, I launched my ‘Storyline Magic’ tutorial series on YouTube because I wanted more resources to be available for those looking to leverage JavaScript coding to push the boundaries of what’s possible working with Articulate software. In the very first episode, I demonstrate how combining JavaScript with CSS in Storyline can automate actions within an Articulate Rise course. Specifically, I show how to automatically advance the learner to the next lesson in Rise after they complete the required actions within a Storyline activity: Storyline Magic Series - Episode 01 Controlling Rise Navigation In Articulate Storyline --- My name's Chris Hodgson, an eLearning developer and software trainer based in the UK. I enjoy creating fun, unique, and engaging online experiences using Articulate software! Connect with me on LinkedIn - https://www.linkedin.com/in/chrishodgson44/
