99 Practical Examples of Javascript in Storyline

Jun 06, 2018

Zsolt Olah
By Zsolt Olah

 

99 Practical Examples to Use JavaScript with Storyline

UPDATE: No book but a live document collecting 99 Practical Online Programming examples with JavaScript. Pop(99);

https://www.rabbitoreg.com/examples/p99/#/

 

After years of coming up with practical solutions in javascript to support Storyline development, it's time to wrap them in a book. All in one solution for non-coders. Examples, how to use them, how to tweak them. Best practices, worst nightmares... Limited fluff. Limited geekness: IT'S ABOUT PROGRESS OVER PERFECTION.

There are great courses out there to each you to code. Yet, many of you said you found them boring. Why? Because they're teaching you how javascript works, not how to work javascript along with Storyline to build something faster, easier, better. That's the goal. It will be too light for programmers and too heavy if this is your first time opening up Storyline. If you're inbetween, and you want your elearning design/development to pop, you'll find 99 ways to do it. 

Would you be interested in the book?

Would you be interested in contributing some real-life examples to the book?

Let me know!  

As a reminder, Articulate does not officially support javascript (beyond the Execute Javascript trigger). 

46 Replies
Zsolt Olah
over 5 years ago01/12/19 at 11:23 pm (UTC)

Project 99 has started. We're adding more and more ideas until we reach 99. 

https://www.rabbitoreg.com/examples/p99/#/

I know some of you had reached out earlier with examples. Now it's the time! If you have something you want to share with others, let me know! We can link to your blog, youtube, or wherever if already have something published.

Amy Hengst
5 years ago02/19/19 at 10:46 pm (UTC)

Is there something basic missing in these examples? None of them are working for me on publishing, which is weird. I was just copy/pasting in the functionality as is to test and examine it.

 

Testing with a button to add one to a count using the ++ function, using the counter timer, and setting today's date (which returns as 00/00/00).

I have used other javascript before such as Matthew Bibby's timer count down, and setting alerts, and built in SL variables pretty extensively before so I sort of know what I'm looking at. I also tried typing in the js in case some weird script was copying with the text and pasting into storyline. Bit Mystified...

Amy Hengst
5 years ago02/19/19 at 11:42 pm (UTC)

Thanks Zsolt! I mostly got it working, now, only I'm not quite sure what I changed that worked. It seemed like a missing or added space, and maybe I had some bad code on one slide that interfered with code on the other pages. Is that possible that SL looks ahead and if there is a broken script it interrupts the other scripts? Thanks for offering to help me out!! 

Zsolt Olah
5 years ago02/19/19 at 11:48 pm (UTC)

Amy,

Great! Yes, my very first advice to anyone is ALWAYS open the developer window in your browser and see if there's anything in the Console. One single issue can stop any JS on the page but you won't see any error unless you look at the Console messages. Red is bad. Yellow is warning (for example, when you try to set a variable that does not exist in SL or the upper/lower case does not match it's a yellow warning but it might stop any other scripts running).

Joanne Chen
almost 4 years ago04/29/20 at 9:44 am (UTC)

Hi Zsolt,

Thank you so much for sharing POP(99), I've been learning a lot from it. And I appreciate not only the knowledge you share but also the templates files.  

I encountered one problem when learning topic "Magnetic poetry: order of drag and drop items". It's a little difficult to me to understand how to write js to reveal the order of items, so I downloaded the poetry_test.zip and thought I could twist  to my own version from it. However, when I published the original download version it doesn't work as  the demo magnetic_poetry. It won't jump to next slide. So I tracked the variables and found that all the dragged items work well but the variable Jump doesn't executed as expected. It doesn't execute when clicking submit button. I then pasted the code to https://jshint.com to see if anything wrong (see screenshot as below), but I am not good enough to fix the problem. Can you help me with it?

Zsolt Olah
almost 4 years ago04/29/20 at 11:48 am (UTC)

Hi Joanne,

I need to update the example on the site, or at least for now, add a warning to those that won't work. Every since Articulate came out with their January release they introduced significant changes how the software works. All examples that use jQuery and rely on finding items by their id like the poetry need some adjustment. 

Zsolt Olah
over 1 year ago07/26/22 at 8:57 pm (UTC)

Hi Laura, for PDF there are libraries that you can use. It's way too cumbersome trying to create a PDF from scratch. If you haven't looked at, check out the Deliberate Play example I built for my session at ATD. https://www.rabbitoreg.com/atd21/play/story.html 

This year I'm bringing this to the Chicago eLearning & Technology Showcase and DevLearn conferences. The library is open source and if you have the time and expertise you can do magic. However,  for those who just want to build PDFs from Storyline transferring variables into the PDF, I've built a simple version with instructions. It will be available for anyone after the conferences. 

larry van wave
over 1 year ago08/02/22 at 5:08 pm (UTC)

Zsolt, this code is great!! I just have one question, is it possible that the below code isn't functioning correctly?

  words[cnt][0] = $(".slide-object[aria-label='"+image+"']").offset().left;

I have to comment out the above line for the file to work, but then it doesn't order the text correctly.

Thank you for your work on this!

Leonel "Choco" Villarreal
7 months ago09/27/23 at 3:25 am (UTC)

Hey Everybody! Special salutation to you Zsolt Olah!

Just found the 99 Practical Examples of Javascript in Storyline and it is FANTASTIC! 

However seems like the link to many of the example are pointing to links in http://www.rabbitoreg.com that display this message:

Is this temporary or definitive? Or can I actually find these working examples somewhere else?

I am extremely interested in the examples of section "Rise and Javascript".

Thank you so much!

Sign In to Reply