Forum Discussion
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).
- ZsoltOlahSuper Hero
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.
- KarenKaye-1fcdaCommunity Member
I can’t wait for this! Looking forward to it being available soon hopefully!
- ZsoltOlahSuper Hero
Karen,
It's a live Rise document with example being added each week. There's a lot already there.
https://www.rabbitoreg.com/examples/p99/#/
- AmyHengst-2af3dCommunity Member
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...
- ZsoltOlahSuper Hero
Hi Amy! Can you post or send me your Storyline. I'll take a look.
- AmyHengst-2af3dCommunity 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!!
- JoanneChenSuper Hero
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?- ZsoltOlahSuper 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.
- JoanneChenSuper Hero
Thanks for replying, Zsolt. Will there be js code to replace the current jQuery code? (Sorry I don't have code background)
- SherriSagers-caCommunity Member
Thank you Zsolt! I feel like I just found the lost ark. :) (Wish I had found it earlier!)
- ZsoltOlahSuper Hero
Raiders of the lost ark unite :)
- LauraIngle-2da7Community Member
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?
- ZsoltOlahSuper 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.
- EricZenor-53902Community Member
Brilliant, Zsolt, absolutely brilliant! Thank you for putting this together.
- larryvanwave-ffCommunity Member
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! - LearnWithChocoCommunity Member
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!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!