Top-Down game mechanics in Storyline
I was fooling around with the new API and created a proof of concept for some mechanics of a top-down game. You can use the WASD keys to move the robot around. If you roll close to objects, I set a variable that allows a layer to open. Unfortunately, the built in Intersection triggers don't work when you move objects with API method, so you need it to do it through JavaScript. If you move the robot off screen to the right, it will go to the next screen in the correct position it left. Try going back higher up and see how it works. The current demo only allows you to go to slide (or room) 3 and back. I can get the coordinates of a character object and then since you know the slide size, you can trigger variables to get you to the next slide and back. I also built some logic in to prevent the robot from going too far up or too far down. On the last slide that you can get to through the menu, you will notice a demo of a platform concept. Move the oval using the keys and notice that we can simulate gravity like any game engine. I imagine if I implemented the same positional logic that we could create a simple platformer but haven't got there yet. Full disclosure: All assets are generated using ChatGPT 4.0 except for the ovals and the rectangles. 😉 Take a look here. https://360.articulate.com/review/content/6104372d-85cf-41cc-8f81-6f42e3a6c061/reviewRIVE animations in Storyline
I was curious if anyone has used RIVE for interactive elements in Storyline. I know they can be imbedded in the JavaScript, but I was wondering if you could use the listeners for interactivity within a Storyline project. Any guidance would be appreciated. I'm not sure if I'm barking up the wrong tree or not.Object reference
I only recently started using the JavaScript API beta. I have noticed that sometimes the Object reference connects to the correct object, and other times it does not. Any thoughts on that? It seems that when it does not connect, it displays the top object in the list rather than the one I want. The good news is the script still works.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/Progress bar with javascript not working in new versions
Hi all. I am new here. Maybe a beginner question.... I found out that my javascript progress bar doesn't work after the updates past 8th october 2024. I couldn't find out why, tried with the console and different ways. I think the <div> is not visible or not inserted. Could you please check my script in the example file? Probably you have seen this scipt in other projects, its from the web. Behaviour: start slide (without progress bar) 1. slide - master slide 1 - progress bar works fine the first time. 2. slide - master slide 1 - progress bar failes. 3. slide - master slide 2 - progress bar works fine. 4. slide - master slide 1 - progress bar works fine. If I have two slides with the same master slide in a row, on the second slide the progress bar failes. I upload a example with 4 slides. The script is on the master. Any help is welcome. Thank you.Variable not changing button state
I've got a pretty complicated situation. I am creating a compliance course that a user must be in each module for 30 minutes. There are 9 modules. When the course begins, they can't leave the course, open another browser tab, click on a different monitor screen, etc. Also, if they do any of these, their time stops and resumes when they return to the course and a popup layer tells them that they need to resume and that their time has stopped. Everything works great except that I've got a variable, %correctedElapsedTime%, that shows the actual time that they've been in the course. Essentially, it subtracts the time away from the built in %Project.ElapsedTime% and shows a running timer in the corner of the slide the whole time. I want a button to change states to normal when %correctedElapsedTime% has been met. Right now, I can only get the button to change when it is triggered by %Project.ElapsedTime%. %correctedElapsedTime% is a text variable with a value of MM:SS and %Project.ElapsedTime% is a number variable with a value of 0. I think this is where the problem may be. It also may be that my timer is somehow skipping over the 18000000 ms to meet the 30 min time constraint. Any thoughts? Slide triggers Master slide javascript and triggers Javascript var player = GetPlayer(); var elapsedTime = 0; var timer = null; var isTabActive = true; var isFocused = true; var inactivityTime = 0; var inactivityLimit = 120; var inactivityTimer = null; // Load saved elapsed time if (player.GetVar("correctedElapsedTime")) { var savedTime = player.GetVar("correctedElapsedTime").split(":"); elapsedTime = parseInt(savedTime[0]) * 60 + parseInt(savedTime[1]); } // Update elapsed time function updateElapsedTime() { if (isTabActive && isFocused) { elapsedTime++; var minutes = Math.floor(elapsedTime / 60); var seconds = elapsedTime % 60; var formattedTime = minutes + ":" + (seconds < 10 ? "0" : "") + seconds; player.SetVar("correctedElapsedTime", formattedTime); } } // Start elapsed time counter function startTimer() { if (timer === null) { timer = setInterval(updateElapsedTime, 1000); } } // Stop elapsed time counter function stopTimer() { if (timer !== null) { clearInterval(timer); timer = null; } } // **Inactivity Timer Functions** function resetInactivityTimer() { inactivityTime = 0; // Reset inactivity timer player.SetVar("showPopUpLayer", false); // Hide pop-up if user is active } function trackInactivity() { inactivityTime++; if (inactivityTime >= inactivityLimit) { player.SetVar("showPopUpLayer", true); stopTimer(); } } // **Event Listeners to Reset Inactivity Timer** document.addEventListener("mousemove", resetInactivityTimer); document.addEventListener("keydown", resetInactivityTimer); document.addEventListener("touchstart", resetInactivityTimer); // **Start inactivity tracker** function startInactivityTimer() { if (inactivityTimer === null) { inactivityTimer = setInterval(trackInactivity, 1000); } } // **Detect window focus loss** window.addEventListener("blur", function() { isFocused = false; player.SetVar("isFocused", false); player.SetVar("showPopUpLayer", true); // Show pop-up when window is blurred stopTimer(); }); // **Detect window focus gain** window.addEventListener("focus", function() { isFocused = true; player.SetVar("isFocused", true); player.SetVar("showPopUpLayer", false); startTimer(); }); // **Detect when tab visibility changes** document.addEventListener("visibilitychange", function() { if (document.hidden) { isTabActive = false; player.SetVar("isTabActive", false); setTimeout(function() { player.SetVar("showPopUpLayer", true); // Ensure pop-up layer appears }, 500); // Delay helps trigger the layer reliably stopTimer(); } else { isTabActive = true; player.SetVar("isTabActive", true); player.SetVar("showPopUpLayer", false); startTimer(); } }); // **Start timers** startTimer(); startInactivityTimer();
