Forum Discussion

ZsoltOlah's avatar
ZsoltOlah
Super Hero
7 years ago

99 Practical Examples of Javascript in 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). 

  • 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.

  • I can’t wait for this! Looking forward to it being available soon hopefully! 

  • 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...

    • ZsoltOlah's avatar
      ZsoltOlah
      Super Hero

      Hi Amy! Can you post or send me your Storyline. I'll take a look. 

      • AmyHengst-2af3d's avatar
        AmyHengst-2af3d
        Community Member

        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!! 

  • 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?

    • ZsoltOlah's avatar
      ZsoltOlah
      Super Hero

      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. 

      • JoanneChen's avatar
        JoanneChen
        Super Hero

        Thanks for replying, Zsolt. Will there be js code to replace the current jQuery code? (Sorry I don't have code background)

  • Thank you Zsolt! I feel like I just found the lost ark. :) (Wish I had found it earlier!)

  • Where might I find how to use the javascript print code, but to print to PDF? Also, is there a way to also set the layout and scale? So that the slide fits on one page?

    • ZsoltOlah's avatar
      ZsoltOlah
      Super Hero

      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. 

  • 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!

  • 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!

    • StevenBenassi's avatar
      StevenBenassi
      Staff

      Hi Leonel!

      I just wanted to pop in and share that since this discussion is a bit older, Zsolt may no longer be subscribed. If you have questions and want to reach out to him directly, you can do so by clicking on his name and selecting 'Contact Me'.

      Have a great rest of your week!