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/140Views5likes0CommentsNew 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/80Views2likes0CommentsJavascript 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!66Views1like3Comments