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/New 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/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!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 WolfgangConsulting 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 Ellenwood
