Simple Tabs
That’s probably the most accurate way to describe this submission, possibly the most boring interaction I’ve ever produced for an eLearning challenge. Ironically, it’s built around tabs, which can be pretty useful when done right (keep them simple, clean, and don’t overthink it). But here’s the twist: If you manage to stick around for 2 whole minutes, you’ll unlock a reward, a downloadable Storyline file. Because if you’ve got the stamina to survive two minutes of my "creativity," you deserve something. Inside: 🕒 A global timer built with JavaScript 🎞️ Image transitions powered by the Web Animation API 🎁 And who knows, maybe a surprise or two. LaunchAlways 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.(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!An AI-Powered Knowledge Check in Storyline
I've been wrestling with this challenge for a while: How do we get learners to reflect without relying on quiz after quiz? How can we use open-ended questions to encourage deeper thought? I've long considered AI for this, but there were hurdles... How do you integrate it into an Articulate Storyline course without paying for tokens or setting up contracts? And how do you do it without leaking credentials in the course itself? Can it be done without having to modify code after exporting the course? I learned recently that Hugging Face Transformers provide a solution. You can now download an AI model to the learner's machine and run it locally in their browser. I've managed to get this running reliably in Storyline, and you don't have to modify the code after export! In the final slide of the demo, your goal is to recall as much as possible from the podcast/summary. The AI will then check your response and give you a percentage score based on what you remembered. Live demo & tutorial here: https://insertknowledge.com/building-an-ai-powered-knowledge-check-in-storyline/ If you want to learn how I recommend starting with the sentiment analysis because it's easier to get started. I've also provided a file to download in that tutorial if you want to reverse engineer it.Rise notes utility
I added a global utility bar to my Rise course to add a simple 'notes' piece, data is kept in the browser's local storage and it will not write to SCORM. Because of the global nature of this addon, it can be a handy way to make the functionality, and even some branding, always available to users across your entire course.
Creating Animations and Interactions in Storyline with Simple CSS and JavaScript (No Coding Required)
Learn how to make your courses move, react, and impress as guest presenter Natalia Vostretsova skips the coding theory and dives straight into what you need to know. You’ll walk away with a practical framework and ready-to-use code you can apply right away.Spookily Accruate
Hello! For this challenge, I reused a character I created way back in 2020, for Challenge #292 (Using Variables). In case you wondered, Zardoz is a cross between Sean Connery and the Zoltan machine from Big. I've upgraded Zardoz with a few tricks I've learned in the meantime, including live polling, a speech animation cycle, and some sneaky Javascript. If Zardoz doesn't successfully read your mind, he can still surprise you with what he does know about you. Does Zardoz know what you're thinking? TRY IT OUT HERE
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/
