Forum Discussion
JAVAscript does not work in LMS Moodle
I tested your file on MoodleCloud and the JavaScript works just fine there.
I don’t have much experience with Moodle LMS, so this is only a guess, but it’s possible that the LMS environment loads or renders SCORM content differently than MoodleCloud, which can impact JavaScript timing.
Because of this, the behavior may be related to the LMS setup rather than the code itself. To me, it appears to be a timing issue where the Storyline slide content may be loaded or rendered slightly later, causing the JavaScript to run before the elements it depends on are available.
One possible workaround would be to run the JavaScript after a small delay (for example, when the Storyline timeline reaches around 0.25 seconds), or to use a version of the code that waits until the required elements are present before initializing.
IMO:
- The SCORM player loads
- Your JS runs
- Storyline has not rendered the slide yet
- querySelectorAll(...) returns an empty NodeList
- targets.forEach(...) runs on nothing
- No listeners → no interaction → code doesn’t work
- No error is thrown (an empty NodeList is still a valid object, so calling .forEach on it is completely legal, it just silently does nothing
Try:
(function initWhenReady() {
var targets = document.querySelectorAll("[data-acc-text='target']");
if (!targets.length) {
setTimeout(initWhenReady, 100);
return;
}
let activeTarget = null;
let inTakeover = false;
function takeover(target) {
gsap.killTweensOf(targets);
gsap.set(targets, { opacity: 0 });
gsap.set(target, { opacity: 1 });
targets.forEach(t => {
t.style.pointerEvents = (t === target) ? "auto" : "none";
});
activeTarget = target;
inTakeover = true;
GetPlayer().SetVar("isBlinking", false);
}
function startBlink(target) {
gsap.killTweensOf(targets);
gsap.set(targets, { opacity: 1 });
gsap.to(targets, {
opacity: 0,
duration: 0.5,
repeat: -1,
yoyo: true,
ease: "power1.inOut"
});
targets.forEach(t => t.style.pointerEvents = "auto");
activeTarget = target;
inTakeover = false;
GetPlayer().SetVar("isBlinking", true);
}
targets.forEach(target => {
target.addEventListener('click', () => {
if (inTakeover && activeTarget === target) {
startBlink(target);
} else if (inTakeover && activeTarget !== target) {
return;
} else {
takeover(target);
}
});
});
})();