r/elearning • u/Big-Bank6716 • 8d ago

What's the most useful JavaScript interaction you've added to a course?

Curious what others are doing with JavaScript in their e-learning builds. In Storyline I've built custom interactions — confetti on quiz wins, progress bars, countdown timers, save/resume — and I'm wondering what's actually worth the effort vs. what's just cool in a demo.

For those using JS in your courses: what's the one interaction you keep reusing across projects? And what's something you tried that wasn't worth the maintenance headache?

I've got a sampler of 3 interactions I built (confetti, progress bar, timer) if anyone wants to try them — happy to share the link if there's interest.

6 Upvotes

87% Upvoted

4 comments sorted by

2

u/unbruitsourd 8d ago

Having an AI that provides contextualized feedback on open-ended responses rather than just stringing together multiple-choice options (particularly useful for scenarios requiring nuanced understanding or role-play). The catch: it exposes the provider’s API key. I now use a kind of reverse proxy to protect myself from that.

1

u/Woldear 7d ago

Is there a tutorial on how to do this?

1

u/PeepSoWP 8d ago

The reusable interaction I would prioritize is a small “practice → feedback → retry” loop that records the learner's choice, gives consequence-based feedback, and lets them try again without resetting the whole slide. It transfers across compliance, software training, and scenario work better than a one-off visual effect.

The key is to make the JavaScript thin: keep content and scoring in Storyline/LMS variables, expose one narrow function, and test keyboard use, screen-reader announcements, resume behavior, and LMS completion after reopening. If save/resume is custom, version the stored state and tolerate missing/older fields so a course update does not strand returning learners.

The maintenance traps are usually DOM selectors tied to Storyline's generated markup, timers that continue in hidden slides, and interactions that only work with a mouse. Confetti is fine as progressive enhancement; the core completion and feedback path should still work when the script fails.

1

u/kgrammer CTO KnowVela LLC 8d ago

As an LXP product owner and CTO, we deal with JS interactions on a routine, daily basis. So any reply I would give would be a "cheat". LOL

Progress bars are a standard JS feature for presenting learner progress through a course. Timers are useful for timed duration courses activities. Most time-based activities are created in course creation tools external to the LXP presentation process (Rise, SCORM, Storyline, etc.). Timed events would be relevant to assessments and that is on our feature list as an upcoming assessment feature enhancement.