JavaScript

39 Topics

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/
ChrisHodgson
7 days ago Place JavaScript
431Views
3likes
2Comments
(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!
Janwillem
16 days ago Place JavaScript
36Views
1like
2Comments
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.
SamHill
21 days ago Place JavaScript
152Views
2likes
4Comments
Capturing Text from a Shape or TextBox
I have a game with 40 questions, subdivided into 4 categories. I've created an object for each category and used states for each question within the category. My current plan is to enter the questions in the WYSIWYG environment for easier proof reading than if I tried to enter them into the Variables editor. It's a team based game and if nobody can get the answer right, I want it to save the question to a variable, then at the end of the game, I want it to email the questions to the SMEs. My problem is that unless I switch to using 40 variables, I haven't figured out a way to pull the question from the object before moving on to the next question. I had thought it would be something simple like this: const jsObject = object('6N5bhivlzyV'); set jsText = jsObject.value; setVar('theText',jsText); But, that's not working. Is my javascript bad or is there a way to do this with standard triggers?
Solved
HoneyTurner
21 days ago Place JavaScript
53Views
0likes
3Comments
Cost Estimate
Hi everyone, My company recently developed a children's app using .NET MAUI. It was a slow and expensive process. Plans for an new app are in the works, and the goal is to build a hybrid app this time, leveraging the company's Articulate 360 subscription. As part of a proof of concept exercise, a developer recently used Articulate 360 and Java to recreate several games that were featured in the original, native app. They were exported in a SCORM format and the games actually functioned better than their native counterparts. They also took FAR less time and money to complete. I'm trying to estimate the cost of developing the new hybrid app, and I need someone who has both a developer background and Articulate 360 knowledge. I'm on the content creation end, and this is not my area of expertise. I realize I may be casting a line in the wrong place, but if anyone out there could offer advice, including a better place to search for answers, I'd really appreciate it. Thank you!
Solved
GleasonSWA
29 days ago Place JavaScript
89Views
0likes
5Comments
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/
ChrisHodgson
2 months ago Place JavaScript
955Views
6likes
7Comments
JavaScript Timer Question
Hello! I'm new to using JavaScript in Storyline. But after watching a Learning Dojo video and using Claude to help me put some code together, I was able to come up with the following code to use in an "execute JavaScript" trigger that happens when the learner clicks the Start button for a matching game. My goal is to start a timer when they start the game. It counts in seconds and shows on the screen as they go through the game. When the learner completes the game, it shows them how many seconds it took them. All of that works one time. But if the learner clicks to restart the game, the original timer is still counting from the first go-around, plus a new timer is started, such that it flashes back and forth between one counter and the other. I can't figure out how to stop the timer, reset it, and allow them to start over. Claude suggested the code where it "clears any existing timerId stored in Storyline" -- but while a new timer starts, the old one still keeps going. Is there any solution to this? Thanks for any help! //Getting the player const player = GetPlayer(); //Where to start let sec = 0; //Set up the timer function startTimer() { sec += 1; player.SetVar("timer", sec); } //Clear any existing timerId stored in Storyline let existingTimerId = player.GetVar("timerId"); if (existingTimerId !== null && existingTimerId !== undefined) { clearInterval(existingTimerId); } //Reset the counter sec = 0; player.SetVar("timer", sec); //Start the timer and store the ID in Storyline let timerId = setInterval(startTimer, 1000); player.SetVar("timerId", timerId);
Solved
Jenn-Barnabee
2 months ago Place JavaScript
82Views
1like
2Comments
Scrolling with JS
I use a lot of scrolling, so I added here two types with simple JS (just copy and paste from YouTube comments) 1. Scrolling the entire slide is useful for simulating interfaces like Figma or large canvases. Zoom in/out with Ctrl+Scroll and move around freely. 2. Auto-scrolling a panel – perfect for text boxes or scrolling objects. When the slide loads, the content scrolls down smoothly to show that it’s interactive. This is the link to see how: https://youtu.be/TanOufT30vE?si=9XmJEWfe7ky6HNIQ
BarMazuz
5 months ago Place JavaScript
191Views
1like
3Comments
Code Terminal Simulation
Hi, I needed to create a code terminal for the learner to type in the code and get the feeling that it is a real terminal, and also get some kind od an imidiate feedback so they can spot the mistake on the spot. I built this with JS, and the code is in the YouTube comment with an explanation, so if you want to change colors and more, you'd know where, even if you are not a JS developer. Maybe it will help others too, and if so, enjoy! https://youtu.be/PWDxqyq4sRo?si=zvonqvBNmobFum3n
BarMazuz
5 months ago Place JavaScript
67Views
2likes
0Comments
Button Listener to move a character
Hello everyone I've dealing with a problem, I started a project, it is supposed to be an Escape Room, and most of the things I need for it are already available on Storyline. But I've been stuck on the movement of the character, it is a simple 2D movement, right and left, inside the room. The problem is: I already got it to move on a click, but it is just on that click, I want it to move as long as I keep the button pressed. This is the last JavaScript I tried to make it move: const button = object('5yfHufFxicy'); function moveWhilePressed() { button[i].addEventListener("mousedown",() =>{ const player = GetPlayer(); player.GetVar("MousePressed"); const currentX = player.GetVar("MoveX"); player.SetVar("MoveX", currentX +1); setTimeout(moveWhilePressed, 100); const objects = [ object('6EPGwyDzEfX'), ]; const positions = objects.map(obj => ({ x: obj.x})); objects.forEach((obj, i) => { obj.x = positions[i].x+currentX; }); }); } moveWhilePressed(); Not sure if I'm wrong on the EventListener, before I added it, the character moved, but the moment I clicked, it kept moving without the button pressed. I tried using Variables, but the result was the same, the character kept moving.
Solved
CajaPopularM704
5 months ago Place JavaScript
225Views
1like
4Comments