New Tutorial! Build Dynamic Animated Bar Charts In Storyline Using JavaScript
Hi Heroes, I’m excited to share the latest episode of my Storyline Magic Series with you all! In this episode, I'll be showing you how to create dynamic animated bar charts in Articulate Storyline 360, using standard Storyline shapes, variables, and a touch of JavaScript magic. 📊✨ One of the highlights of this technique is that your chart animations are controlled using Storyline number variables, and bar shapes will adjust their height beautifully across all screen sizes, ensuring consistent results for all users. By the end of the tutorial, you’ll have a reusable template that you can apply to any bar chart designs you want to bring to life in Storyline! Check out the full tutorial below, along with a link to all previous episodes in the series: Watch the full series here - https://lnkd.in/dNvyD7wv --- 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/
(loading) speed of Storyline 360 slides
Hi all, Does anyone know what influences the loading time of storyline 360 slides? We are creating educational games with storyline, and are trying to figure out how we can decrease the amount of loading (with the three loading dots) between slides. I have a few ideas on what impacts the slide loading time, for example: Amount of layers on a slide Amount of objects on a slide Amount of images in a slide The length of javascript functions The amount of audio files The size of audio files The amount of video files And maybe other that I haven't thought of yet.. And a few questions: Does it matter if you put objects / images / video / audio on timeline start, or after let's say 1 second? How does Storyline internal "pre-load" slide work? I have read somewhere it makes an educated guess which slide comes next, and preloads it. But, as we make a slide selection based on variables, that won't work. Is there any way we can feed storyline information about the upcoming slide, so it can preload it already? I'm very curious to your insights. I will also do some research myself the next few months, and share the outcome, but it will help to gather some input and thoughts from other users before diving in further!Always on top
I just set myself the challenge of having elements that are "always on top". I've worked on a handful of courses in the past, that had an irregular shaped header graphic (sometimes with drop shadow), where it would have been great to be able to set some elements in the Master Template to appears always on top of other elements within the module. For those courses, I had to create a slice of the header (the irregular shaped part) and paste on each slide, where the header appeared over another element on the slide. I have had some success, and of course it is a JavaScript implementation. This is very much an ALPHA release. Here's the implementation if interested in having a play with it or extending it. I'm sure there will be some elements, that I haven't played with, that may need some extra logic in the JS. For each element you would like to appear always on top, add the string "{AOT}" in the "Alternative text" field. If the element is decorative, you can just add "{AOT}". This will be taken care of during processing (removed, and set to aria-hidden=true). If the element is non-decorative, for example an exit button, you would just add "{AOT}Exit" to the alternative text. This would also be process, and "{AOT}" removed and "Exit" retained in the ALT text. Add the following script to the "timeline starts" on the SLIDE MASTER. This ensures that the script will process on every slide. const init = () => { // inititial value for z-index let z = 999; // get all elements with data-acc-text attribute starting with "{AOT}" const elements = document.querySelectorAll('[data-acc-text^="{AOT}"]'); // loop through each element elements.forEach(element => { // get the modelId and accText from the element's dataset const { modelId, accText } = element.dataset; // get the root element with the same modelId const rootElement = document.querySelector(`[data-model-id="${modelId}"]`); // set the z-index of the root element (incrementing by 1 each time) rootElement.style.zIndex = z++; // get the alternative text by removing "{AOT}" from accText and trimming the result const alt = String(accText).replace('{AOT}', '').trim(); // get the alt element with the id "acc-${modelId}" const altElement = document.getElementById(`acc-${modelId}`); // set the alternative text to the element's dataset element.dataset.accText = alt; // re-write the inner text of the alt element altElement.innerText = alt; // if the alternative text is empty (decorative), set the aria-hidden attribute to true and the z-index to -1 if (!alt) { altElement.setAttribute('aria-hidden', 'true'); altElement.style.zIndex = '-1'; } else { if (altElement.hasAttribute('aria-label')) altElement.setAttribute('aria-label', alt); } }); }; requestAnimationFrame(() => { init(); }); I've also including a very simple example file. This just demonstrates that the designated "Always on top" elements will appear over the image on the slide.Return focus to hyper link from layer
This might be a bit of a niche requirement, but it came up a few weeks ago when testing content for a client. If you use a hyperlink (text with a link on it) to show a layer in Storyline, you cannot return the focus to the hyperlink that showed the layer, when closing the layer. Storyline does not return the the focus automatically like it does with other elements such as buttons, nor is it possible to return the focus to a hyperlink using triggers, as the hyperlink is not exposed as an object that you can send focus to. The result is that the focus is returned to the top of the current slide when closing a layer that has been shown using a hyperlink. Maybe the Storyline engineers can fix this up? The solution is a bit of JavaScript. Firstly, we need to add some JavaScript to the Storyline project, to make a function available throughout the project. The best way to do this is to add the following JavaScript to the "When timeline starts on this slide - Execute JavaScript" to the Slide Master. window.RM_focusToLink = function(index) { const arrindex = Number(index) - 1; setTimeout(function(){ var link = document.querySelectorAll('#slide a')[arrindex]; link.focus(); },100); } Then, within the layer, you need to add the following JavaScript to the button (or any other trigger) that is closing the layer: window.RM_focusToLink(1); The number 1 that is placed within the brackets is the argument that needs to be passed to target a specific link on the slide. In this case, it is link number 1 which just means it's the first link on the slide (with regards to the order it appears in the Document Object Model). I did consider targeting the link using the text within the link, but then considered that could be duplicate links with the same name, and so using the index is the safest. For any programmers out there, I'm starting the index at 1 rather than 0 (zero) to make it more user friendly. I have attached a demo file.How To Embed An ElevenLabs Conversational AI Widget Into SL360 Using JS!
Hi Heroes, It feels like something new and exciting is always around the corner in the world of generative AI technology, and this week ElevenLabs put themselves firmly in the driving seat of the agentic AI revolution with their new Conversational AI toolkit. If you haven't heard of this yet, check out this video which explains it all: https://www.youtube.com/watch?v=v-EYzZCLF48&ab_channel=ElevenLabs The interactive, animated widget that this toolkit provided is easy to embed anywhere, including directly within an Articulate Storyline 360 project slide! If you're interested in how to get started, I've written a blog post that includes all the steps, including an Execute JavaScript snippet you can use to effortlessly get your agent loaded into your activity: https://discoverelearninguk.com/how-to-set-up-elevenlabs-conversational-ai-widget-in-articulate-storyline-360/ I'm also currently experimenting with the API for the new Conversational toolkit to understand how I can implement it into my eLearning Magic Toolkit plugin for Storyline + WordPress, potentially opening the door for developing real-time voice activated automation all within a Storyline-built eLearning activity! Much more to come very soon. 🚀 --- 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/In Case You Missed It (ICYMI): Accessibility Updates in Q4 2024
Welcome to 2025! Since my last update, this accessibility group has grown by 61 members, bringing its total to 403 members. The first ICYMI edition was published on October 23, 2024, and established a foundation, but we can keep it short and sweet from now on. Product Updates: Rise 360 New: Immerse all learners in customizable interactive experiences with accessible scenario blocks that offer alternative text, screen reader support, and a visible focus indicator. New: Select the source course language when exporting your training for translation. Enhanced: Select the text of a hyperlink to apply formatting, including changing the color of the text. Enhanced: Line height and letter spacing are now available in the text formatting toolbar. Storyline 360 Enhanced: Expand your reach with a new AI text-to-speech model that supports Hungarian, Norwegian, and Vietnamese in addition to the 29 other languages already supported. Enhanced: You can now add text-to-speech narration and sound effects to markers. Fixed: Text alignment wasn't preserved in existing projects. Upcoming accessibility features: We've released Rise Accessible Drag-and-Drop Questions (Q1 2025, but released before posting this) and added Rise Math Equations. Current accessibility items on our feature roadmap include: Storyline Accessibility Checker Storyline Math Equations Rise Math Equations Updates in articles, documentation, resource center, or training: Refreshed: Storyline 360: Working with Hyperlinks New blog: What Is Section 508? A Quick Guide to Section 508 Compliance Upcoming webinar: Beginner's Guide to NVDA and Storyline for Accessibility Testing New entry in Storyline 360: Our Accessibility Journey - Accessibility Enhancements to Kick Off 2025Get learnername, coursename and coursedate from Cornerstone LMS
I have been tinkering to get the learername, coursename and coursedate from cornerstone lMS ( Cornerstone on demand) but am unable to make it work. i have made it work in Scormcloud but am unable to find the correct way. can someone be of help. thnx
