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/Storyline custom focus control
========================================================================= Update 4th Feb 2025 Added a second argument that will determine if the target elements content will be announced to the screen reader, using the aria-live=assertive attribute. ========================================================================= There have many been times, when using Storyline to develop content, it has not been possible to get the kind of screen reader focus control that I have needed. Using layers for this can only get you so far. I developed a JavaScript function that allows you to send the screen reader focus to the text field that you want, via any trigger. Adding the following JavaScript to your projects Slide Master will make it available throughout your module: // Check if function has been defined already if (typeof window.setFocus === "undefined") { // Get reference to the Storyline Player var $player = GetPlayer(); // Set the amount of time to delay before attempting to send focus to the target element (milliseconds) 1000 = 1 second. var $interval = 200; // window.setFocus = function ($target, $announce = false) { // Get the target element, based on the passed argument setTimeout(function () { var $div = document.querySelector('[data-acc-text^="' + $target + '"]'); var $id = "acc-" + $div.dataset.modelId $div = document.getElementById($id); if($announce) { $div.setAttribute("aria-atomic", "true"); $div.setAttribute("aria-live", "assertive"); } // Send focus to target, after defined $interval $div.focus(); }, $interval); } } Once the function is defined in your Slide Master, you can then call the function on the page using a JavaScript function, which can be triggered by any Storyline trigger such as timeline start, timeline end, button click etc. // The second argument will determine if the content should // be announced to assistive technology using aria-live=assertive // This will announce the text contents to the screen reader window.setFocus("Customer in the queue", true); // This will just send focus to the element. window.setFocus("Customer in the queue", false); The first argument, which is passed in the "" quotes, is the text contents of the text field you are targeting. You do not have to include all the text, just enough to ensure it is unique. For example, if you have two text fields: "Customer in the queue talking on their phone." "Customer in the shop staring into space." Passing the words "Customer in the" would not be specific enough, as there would be two text fields found. However, passing "Customer in the queue" would send the focus to the text field that contains the text "Customer in the queue talking on their phone." The second argument (true or false) determines if the target elements contents should be announced to the screen reader when it receives focus.Dynamic border radius experiment
This was just a little experiment to see if I could manipulate the border radius of shapes on the slide numerically using JavaScript, and the answer is yes. Not sure of any use case, but I've always wanted to be able to control the border radius numerically in Storyline as border radius is not maintained when resizing shapes. I'm not sure if this could help as there is no easy way of targeting specific shapes in a slide without knowing their unique ID. It was a bit of fun anyway. If anybody would like to play or expand on this, go for it. What I've found so far, is it will only support solid or no outlines on shapes. When you start using other styles (dot, dash) an image is used by Storyline to achieve this. window.updateCornerRadius = function(targets, radius) { targets.forEach(function(target){ const path = document.querySelector(`[data-dv_ref="ref-${target}"] path`); if (!path) { console.error(`SVG target ${target} not found.`); return; } // Extract the bounding box of the current path const bbox = path.getBBox(); const x = bbox.x; const y = bbox.y; const width = bbox.width; const height = bbox.height; // Ensure radius doesn't exceed half the width or height radius = Math.min(radius, width / 2, height / 2); // Construct a new path data string with the updated corner radius const newPathData = ` M ${x + radius},${y} H ${x + width - radius} A ${radius},${radius} 0 0 1 ${x + width},${y + radius} V ${y + height - radius} A ${radius},${radius} 0 0 1 ${x + width - radius},${y + height} H ${x + radius} A ${radius},${radius} 0 0 1 ${x},${y + height - radius} V ${y + radius} A ${radius},${radius} 0 0 1 ${x + radius},${y} Z `; // Update the path's "d" attribute path.setAttribute("d", newPathData); }); } An example of this being called. I'm using a variable, borderRadius, change trigger. const borderRadius = getVar("borderRadius"); window.updateCornerRadius(['12','15','18','21'], borderRadius);Alt text for the same background
Hi! My Storyline project provides a scenario that demonstrates the feeling of being overwhelmed by responsibilities as a head chef. It emphasizes the importance of trusting your team and delegating tasks to them. Most of the background images are of the Head Chef's office. The dialog is between the Coach and the Head Chef. I want to include the following on the first slide: "The scenario takes place in Head Chef's office. When there is a change, it will be noted." I want to do this so that I don't have to repeat that this takes place in the Head Chef's office in the Focus Order. This is my first Storyline with Accessibility. Thanks, NormaBehind the Scenes: Alternative text tip and counter
Hi there! When we released Storyline 360 Update 90 back in July, we introduced the following enhancement: When writing alt text in Storyline 360, you’ll now see a dynamic character count and a tip not to exceed 150 characters. You may be wondering why, well, check out this behind-the-scenes video! If you'd like to learn more about adding alternative text, check out Storyline 360: Adding Alternative Text for Screen Readers Thanks, Ronnie Pilman, CPACC Sr. QA Engineer II
Storyline Zoom to fit & Accessible text
Hi everyone!👋 Our team has enabled Zoom text fitting and accessible text features in our Storyline learning courses. Should we include these features and their usage in our navigation or control guide? I’d also love to hear your best practices to ensure we are providing the most accessible courses to our learners. Thanks in advance! 🤩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.Recent Accessibility Upgrades in Storyline
Happy release day, everyone! Storyline update 94 includes the following accessibility improvements for a better experience: Fixed: Keyboard navigation worked inconsistently when interacting with 360° images. Fixed: Screen readers didn't always announce layer content. Click the Update button for your Storyline app to check out all the latest goodness.ExecuteScript its not working after reload/refresh in trigger.js
Hi, We have recently upgrade the storyline latest version (Build 3.92.33293.0) and we seems some changes in javascript. Earlier we had only user.js file to each slide script calling for jump on other slides. but after upgrade we can see the ExecuteScript moved to seperate file which is trigger.js file to execute the script on case basis. we noticed that trigger.js file having ExecuteScript calling only once while we cached clear and page reload but second time we just reload page its doesn't calling ExecuteScript from trigger.js file. we have added alert into ExecuteScript function it gives prompt on first time only. Can you please look into it and provide the solutions?
