javascript
20 TopicsGSAP Articulate Storyline 360 Restart Issue
Greetings. I've posted my issue on the GSAP forums. But upon looking through there it seems there's only a handful of people who can relate with Articulate Storyline 360. So I decided to try my luck here in the e-learning heroes forums. This is my issue https://gsap.com/community/forums/topic/42498-gsap-articulate-storyline-360-restart-course-bug If anyone is knowledgable with GSAP and JS in general that could help. It would be really appreciated. Any input is welcome. Thank you! P.S. MathNotermans-9 if you can read this, I wanted to PM you specifically to inquire about this issue since I've seen your posts on JS and all that. But I can't find a PM function, so was hoping you can see this message and reach out hopefully.199Views0likes15CommentsJavascript not working in full screen
Hi all! I have two Javascript codes that execute when selected: one to copy a claim key, and another to add confetti. Both seem to work when completed normally, but once I'm in full screen, neither work! Is it because of the Javascript itself? To recreate the issue: 1. Claim key: if you have something copied, open the Storyline file in full screen, select the "Copy Claim Key" button, and paste in the text field below. If in full screen, it will paste your previous selection instead of the key (which is "S8AM83B2QDBBKKF89K3K")! The code used for this is below, using a "ClaimKey" variable already set in the Storyline file: var player = GetPlayer(); var text = player.GetVar("ClaimKey"); copyFunction (text); function copyFunction(tt) { const copyText = tt; const textArea = document.createElement('textarea'); textArea.textContent = copyText; document.body.append(textArea); textArea.select(); document.execCommand("copy"); textArea.style.display = "none"; } 2. Confetti: if you select the "Add Confetti" button, the confetti will appear on the page normally. If you select full screen and the "Add Confetti" button again, exit full screen early to see the last instances of confetti that don't show up in full screen. Two Javascript codes were used for confetti: var duration = 5 * 1000; var animationEnd = Date.now() + duration; var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }; function randomInRange(min, max) { return Math.random() * (max - min) + min; } var interval = setInterval(function() { var timeLeft = animationEnd - Date.now(); if (timeLeft <= 0) { return clearInterval(interval); } var particleCount = 50 * (timeLeft / duration); // since particles fall down, start a bit higher than random confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } })); confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } })); }, 250); var confettiScript = document.createElement('script'); confettiScript.setAttribute('src','https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js'); document.head.appendChild(confettiScript); *The second code is a workaround I used from this Little Man Project postto avoid updating the HTML file each time I publish :) I'm a JavaScript beginner, so any help is appreciated! You can preview the issue here in Review, and I've attached the file for reference. Thanks!Solved176Views1like5CommentsTutorial - How To Control Rise Block Interaction From Storyline Using JS!
Hi Heroes! It’s fantastic to see that Storyline developers interested in using JavaScript to enhance the user experience now have our own dedicated group with the latest E-Learning Heroes website update! Nearly three years ago, I launched my ‘Storyline Magic’ tutorial series on YouTube because I wanted more resources to be available for those looking to leverage JavaScript coding to push the boundaries of what’s possible working with Articulate software. In the very first episode, I demonstrate how combining JavaScript with CSS in Storyline can automate actions within an Articulate Rise course. Specifically, I show how to automatically advance the learner to the next lesson in Rise after they complete the required actions within a Storyline activity: Storyline Magic Series - Episode 01 Controlling Rise Navigation In Articulate Storyline --- 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/156Views7likes0CommentsMagic JavaScript switch?
I have a drag and drop quiz with 95 drag options that are then added to a chart. This is all working beautifully and tiling onto the chart very nicely, but if I want to randomize the order that the 95 options appear in (on the drag sequence menu) then I have to manually drag them around to make them appear randomized. Has anyone ever incorporated javascript to make drag options appear in random order if they are appearing one by one? Apologies if this is unclear or not allowed to ask.125Views0likes6CommentsNew 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/99Views3likes0CommentsNew Tutorial! Create and Control Glassmorphism Effects With JavaScript In Storyline
Hi Heroes, I'd like to share the latest episode in my Storyline Magic Series on my YouTube channel! In this episode, we'll delve into 'Glassmorphism'—a modern and powerful design technique that blends translucent surfaces with frosted glass effects. This approach not only enhances the aesthetic of your content but also helps learning designers create depth and establish a clear visual hierarchy. I’ll show you how to create and control this stunning effect entirely within Articulate Storyline 360. Let me know if you'd enjoy seeing more comprehensive start-to-finish project builds like this in the future! And see how other Storyline devs are using Glassmorphism here: https://community.articulate.com/blog/e-learning-challenges/using-glassmorphism-designs-in-e-learning-course-development-310/1151525 --- 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/99Views2likes0CommentsGet data from Storyline 360 into .csv or .txt
Hi there, we've built a Storyline 360 course and now there is the request to save / export * IP-Address * date/time * confirmation of clicks into any kind of file, to prove users have read a specific document and agreed to the "term of use". Is that possible using java somehow? To be honest, I'm a complete newbe with respect to that, so I appreciate any kind of help/ideas how to realize it. Thanks a lot in advance. Regards Wolfgang99Views0likes3CommentsHow to implementing 180-Degree Slider Control
I want to connect a slider to the 360-degree image, enabling the user to control the horizontal movement, similar to how the 'A' and 'D' keys work. I'm unsure which method would result in smoother interaction, so I'd appreciate your recommendation on the best approach. Please refer to the attached image. Additionally, instead of rotating the image a full 360 degrees, I only want to rotate it 180 degrees using the slider. The process I’m describing differs from typical object rotation in product viewers (e.g., rotating a device with a dial). My image is equirectangular, commonly used for 360-degree panoramic views, and I only want to control 180 degrees of its movement through the slider. Based on the instructions provided, the image can be rotated and moved using the keyboard keys (W, A, S, D), but I’d like to replicate this interaction using a slider instead of keyboard input. I also came across a discussion here where someone mentioned difficulties with students using Chromebooks being unable to rotate 360-degree pictures on their touchscreens. They were seeking an alternative method, such as using a slider, to rotate the image. I’m facing a similar challenge, and I’d appreciate any guidance on how to best implement this functionality.93Views0likes1CommentUsing Javascript to run complex mathematical simulations in a 'space survival' game
As a learning designer, I'm always looking for new ways to engage learners and create immersive experiences. I'm a big fan of board games like Catanand7 Wonders, where you have to manage resources and make strategic decisions. It struck me that similar game mechanics could make corporate e-learning more compelling and realistic and help people refine their decision-making skills. I started experimenting with this waaaay back inE-Learning Heroes Challenge #314, with myUsable Suspects game: In that game, the player has topick the best gang memberto crack a safe within 20 seconds. Fast forward toE-Learning Heroes Challenge #430, and I took this 'resource management' concept much further inNo Sushi!: This game involved a lot of complex math that nearly broke Storyline andme. (Yes, I did it all with triggers and, no, I wouldn't do that again!) Recently, I've discovered thatlarge language modelsare great at writing code - it's just another language after all - which makes it astonishingly easy to write custom Javascript for use in Storyline. No more triggers! No more headaches! With the help ofClaude.ai, I built this 'space survival' game: PLAY SURVIVAL HERE! The Concept The game is a first-person survival scenario set on a remote planet. Players must choose two out of three specialists, each with unique skills, to awaken from cryosleep and keep everyone alive for 90 days until rescue arrives. The challenge? Managing four critical resources: Food, Shelter, Security, and Communications. Collaborating with Claude To create the game's underlying simulation, I explained my idea to Claude, outlined what I wanted the code to do, and then defined the specific outcomes I was seeking in Storyline. The Development Process Establishing the Basics: We started by defining the core mechanics – how resources would deplete over time and how each specialist would influence these rates. Creating the Simulation: Claude generated JavaScript code that would run within Storyline, simulating the daily resource changes and determining the mission's outcome. Balancing Act: One of our biggest challenges was fine-tuning the resource depletion rates to ensure each team combination (A+B, A+C, B+C) presented unique challenges and outcomes. This required multiple iterations and careful adjustments. Implementing Cascading Effects: We introduced more complex mechanics, such as security breaches leading to rapid resource loss, and the effects of malnutrition on the crew's ability to maintain systems. Crafting Narratives: For each possible outcome, we developed detailed feedback messages to provide players with a clear understanding of their mission's fate. Debugging and Refinement: Throughout the process, we encountered and solved various issues, from unexpected behaviour in certain scenarios to ensuring the correct triggers for different endings. Lessons Learned Iterative Development is Key: Our back-and-forth process, constantly testing and refining the simulation, was crucial to creating a balanced and engaging game. Claude as a Collaborative Tool: Claude proved helpful in rapidly prototyping ideas, generating code, and problem-solving. However, human oversight and creative direction were essential in shaping the final product. Balancing Realism and Gameplay: We often had to strike a balance between realistic outcomes and maintaining engaging gameplay. For instance, we adjusted how quickly resources depleted to create tension without making the game overly difficult. The Importance of Narrative: While the underlying mechanics were crucial, we found that crafting compelling narratives for each outcome enhanced the player experience. The characters define the mechanic and vice versa. Flexibility in Design: Being open to unexpected outcomes led to more interesting gameplay. For example, we implemented a system where the communication beacon could continue functioning even after the crew had perished, adding a thoughtful touch to certain failure scenarios. Technical Challenges and Solutions One particular challenge we faced was ensuring that for certain team combinations (like A+B), security would fail before other resources reached critical levels. This required careful adjustment of depletion rates and the implementation of conditional penalties. We also had to be mindful of some limitations, particularly how Storyline displays text generated by variables. This led to problem-solving sessions, where Claude and I used the console log to dig into what was happening. Conclusion While collaborating with Claude felt very natural, we did at times have to go back a few steps to debug the code. I am not a coder, so I don't know whether 12 iterations to get this to work as I liked is unreasonable by human standards. But I'm really pleased with the results.SURVIVALteaches resource management and strategic thinking while also telling a story of survival against the odds. And it conveys this lesson in just two slides and a few minutes of your time. I haven't shared my master file as I'm still tinkering with the visual design and this will likely become a portfolio piece, but I'm happy to share what I've learned and answer any questions you may have. For anyone interested,here's the latest version of the code that powers the simulation. If you want to know more about any part of this demo, please ask. (This is a repost of this article from the 'Share Examples' group.)89Views2likes0CommentsStoryline 360 JS: Pointing to a local file instead of a URL
Looking at JLiu's and Chris Hodgson's solution to integrate canvas-confetti.js into the Storyline slide stage and looking over this code: var confettiScript = document.createElement('script'); confettiScript.setAttribute('src','https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js'); document.head.appendChild(confettiScript); I am wondering if there is a way that the "src" attribute can point to a local file? I was wondering about a webobject. I am not sure if this would be the case?Solved81Views0likes2Comments