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);Microlearning 2: Electric Boogaloo
Hello! I've been taking part in these challenges for so long, sometimes I get to do a 'sequel' to an earlier demo. In the age of AI, witness the return of DOT - my 'microlearning companion' from 2020's 'Tiny E-Learning Challenge'. This time, she's a little bit more advanced, but no less sarcastic. DOT will respond to pre-filled questions with a range of randomised responses. Her code uses your web browser's built-in text-to-speech feature to read the dialog out loud. This week's demo is the result of a 4-hour 'vibe coding' session with Claude.ai, during which I shared images of my original demo for E-Learning Heroes Challenge 331. I'm still tinkering with DOT's code, so I won't be sharing that here. But if you'd like to know how I used two different fonts in the same course title, you'll find that code in the final section of this course. CHAT TO DOT HERE...Rise notes utility
I added a global utility bar to my Rise course to add a simple 'notes' piece, data is kept in the browser's local storage and it will not write to SCORM. Because of the global nature of this addon, it can be a handy way to make the functionality, and even some branding, always available to users across your entire course.
Simple Tabs
That’s probably the most accurate way to describe this submission, possibly the most boring interaction I’ve ever produced for an eLearning challenge. Ironically, it’s built around tabs, which can be pretty useful when done right (keep them simple, clean, and don’t overthink it). But here’s the twist: If you manage to stick around for 2 whole minutes, you’ll unlock a reward, a downloadable Storyline file. Because if you’ve got the stamina to survive two minutes of my "creativity," you deserve something. Inside: 🕒 A global timer built with JavaScript 🎞️ Image transitions powered by the Web Animation API 🎁 And who knows, maybe a surprise or two. LaunchJavaScript for the Rest of Us: A Practical Example in Storyline 360 with Drag and Drop Cables
Join us for the final installment of this engaging webinar series with special guest, Nathanial Hilliard, where we’ll take a closer look at an actual small project that implements several of the ideas introduced in previous sessions, bringing JavaScript to life in your designPizzamama activity... Soooo tasty!
Hi! My name is Adèle. This is my first step in the challenge adventure. I’m quite proud to share with you my very first JS project. I’ve used JavaScript in previous projects, but only by “copying and pasting” code. This time, I managed to understand how to find the ID of an object and then customize the JS code myself :-) I hope you’ll find this little example fun!
