JavaScript,
1 TopicScrolling 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=9XmJEWfe7ky6HNIQ148Views1like3CommentsCode 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=zvonqvBNmobFum3n43Views2likes0CommentsButton 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.Solved182Views1like4CommentsSetting the state of an object to "Disabled" or "Hidden"
Has anyone bumped into an issue of not being able to use JavaScript to change the state of an object to the built-in "Disabled" or "Hidden" state? I'm able to set to "Normal" and any custom states, but for some reason, those two just do not work and pop an error in the console saying these are not valid states. See screenshot for an example:114Views1like2CommentsTop-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/reviewSolved319Views4likes5CommentsProgress 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.346Views1like14CommentsRIVE 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.67Views0likes0CommentsTraining Recommendations for a Beginner?
Hello! I want to learn JavaScript. π I really need JavaScript for Dummies π I have access to LinkedIn Learning and found courses like: "Hands-On Introduction: JavaScript" (uses GitHub Codespace) "JavaScript Essential Training" (uses CoderPad) "Learning the JavaScript Language" (uses GitHub Codespace) Anyone familiar with these? I'm not familiar with GitHub or CoderPad, so I'd like to not have to set up an account and learn another program/site if the course isn't what I need. Does anyone have any recommendations from LinkedIn or YouTube? Or should I go to Microsoft? π± Maybe this is an opportunity for an Articulate Training/Tutorial? Most of the existing training presumes (I think) an intermediate or advanced knowledge of JavaScript. Thanks in advance for helping out a JavaScript newbie πΆπΌSolved415Views5likes19CommentsHighlight.js syntax highlighting in Rise
I've started using highlight.js in Rise for styling the code block. You can download my sample course with the integration: https://theme-360.com/theme-component/highlight-js-integration-for-rise-360/ Video demo: https://youtu.be/AvcDNJX_hpE138Views0likes1CommentSetVar and GetVar March 2025 Update Question
Before I update my Storyline installation to the March 18, 2025 (Build 3.98.34222.0) build, can someone tell me if SetVar and GetVar will still work? I ask because in the Advanced Storyline support article: https://access.articulate.com/support/article/Storyline-360-Advanced-JavaScript-API ...it mentions in the: "Variables (previously GetVar and SetVar)" section... to use: Retrieve a variable's value: getVar('name') Set a variable's value: setVar('name', value) Will this change break existing courses that use SetVar and GetVar in triggers when a course is opened/re-published?Solved179Views0likes3Comments