Using JavaScript and Articulate Storyline #132

David Anderson
By David Anderson

Using JavaScript and Articulate Storyline #132

Using JavaScript with Articulate Storyline #132: Challenge | Recap

Extend Your E-Learning Development Skills with JavaScript

In a recent screencast challenge, we looked at using variables in e-learning. Since most course designers don’t work with variables, it was a good opportunity to learn how variables can be used to create more dynamic and personalized learning experiences.

Another way to create dynamic courses is by using JavaScript, which is a scripting language that allows users to interact with web pages. Events like hovering, clicking, and typing can execute JavaScript to trigger an action.

In Articulate Storyline, this is all handled for you with built-in triggers. You don’t need to know a thing about JavaScript to build advanced courses.

But Storyline is designed to grow with you. If you look down the list of triggers, you’ll find one dedicated to executing JavaScript.

Extend Your E-Learning Development Skills with JavaScript

Keep in mind that you do not need to learn JavaScript to create highly interactive projects in Storyline. Storyline’s states, triggers, and layers are all you need to create Guru-worthy projects.

Challenge of the Week

This week, your challenge is to share a Storyline example that features JavaScript. You don’t need to build anything complicated or overly technical. Instead, focus on learning how to insert JavaScript and make something happen.

JavaScript isn’t the easiest thing to learn. If your project doesn’t work as intended, don’t sweat it. I’ll still feature your work in the recap.

Finally, keep in mind that Articulate doesn’t provide support for using JavaScript. If you run into any sticking points this week, please post your questions in the Building Better Courses forums. If the community can help, they will.

JavaScript Examples from the Articulate Community

The Articulate community has shared some amazing examples, source files, and tutorials that can help you get started. Feel free to use any of the Storyline-JavaScript downloads as the starting point for your project.

Zsolt Olah

Zsolt Olah Articulate Storyline and JavaScript

Zsolt Olah comes up with some highly creative ways to include JavaScript with Storyline. He also does a fantastic job of writing about his projects.

Here are some articles, demos, and tutorials that will help you get started working with JavaScript in Storyline:

Melissa Milloway

Melissa Milloway Articulate Storyline and JavaScript

Every time I open Twitter, it seems Melissa Milloway has posted another advanced idea for blending programming languages with Storyline. Here are a few of my favorites:

Aman Vohra

Aman Vohra Articulate Storyline and JavaScript

If you follow the weekly challenges, you know Aman Vohra is someone who likes to share advanced ways to push Storyline’s limits. Here are a few of Aman’s examples that feature JavaScript:

Kristin Anthony

Kristin Anthony

Kristin Anthony shared some super-cool projects that feature JavaScript and Storyline. Check out her posts below because she does a great job of writing about her development process.

Storyline+JavaScript Source Files

Resources

Product support articles

Last Week’s Challenge:

Before you geek out on this week’s e-learning challenge, take a look at the blurred background designs your fellow community members shared over the past week:

Blurred Backgrounds in E-Learning

Blurred Backgrounds in E-Learning RECAP #131: Challenge | Recap

Wishing you a JavaScriptastic week, E-Learning Heroes!

New to the E-Learning Challenges?

The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

Related Content

Using JavaScript to Create Random Word Generators in E-Learning #174

David Anderson
David Anderson

A Week in Review: July 11, 2016

David Anderson
David Anderson
Director, Customer Training

Using Random Number Variables to Create Dynamic E-Learning #188

David Anderson
David Anderson
Director, Customer Training
306 Comments
Meaghan Lister
almost 8 years ago07/18/16 at 2:51 am (UTC)
Here is my submission for this challenge. It has been a great challenge - lots of learning. I've used javascript to generate random numbers for my math game. Blog Post - http://meaghanlister.com/2016/07/18/elh132-raindrop-math-javascript/ Published File - http://meaghanlister.com/elh-challenges/raindrop-math/ I still have to figure out the Javascript on how to make the subtraction and division work so that the problems only have positive numbers (ie. one is always larger than the other). I'd really love to hear people's ideas and suggestions for improvement. Please feel free to leave comments either here or on my blog post.
OWEN HOLT
over 7 years ago12/05/16 at 8:17 pm (UTC)

I was playing around with some of the "Random Number" generator projects recently posted and wondered if there was a way to remove numbers previously generated, based on certain conditions, so that they would not appear again. As it turns out, you can do this fairly simply with JavaScript. The key is to use an array and then create a new array from it after filtering out zero values. You then generate a random number from the remaining values. I used this concept to create a trivia quiz that 1st, randomly selects from 5 categories and then, displays a random question from that category. If you miss a question, it will appear again. If you get a question right, it is removed from the available options. Once all the questions in a category have been answered correctly, the category w... Expand

Maggie Cowan
over 7 years ago12/08/16 at 7:12 pm (UTC)
Late entry, I know! I'm going back through challenges to re-energize my creativity. This is a super simple use of JS in Storyline, but it's really important for my company. Our LMS uses a static course player, so no matter what settings we use in SL, the course plays in a tiny window. Most of the time, it's not a big deal. However, systems training or anything that's screenshot heavy, is unreadable in that tiny window. We use JavaScript to circumvent that window size and show the course full screen. http://s3.amazonaws.com/ElearningChallenges/132/story.html
Anne Seller
7 years ago01/30/17 at 7:05 pm (UTC)
This is really cool, David! I would really like to learn more about how to include JS libraries in my Storyline projects, to be able to create this kind of animation. Can you offer any tips on a good place to learn the basics? Can you also recommend a good text editor? I recently discovered the "Atom" text editor, but it might be too advanced for me at this stage. Thanks! - Anne
David Charney
7 years ago01/30/17 at 8:13 pm (UTC)
Hi Anne, Thanks! I will be cleaning up a Storyline file that I can share so you can see how it works. If you want to use some JavaScript, I recommend putting the word JavaScript in front of anything you might want to try that Storyline can't do itself, such as "JavaScript get current date"...lots of good info should show up. Often JavaScript is used to adjust variables in Storyline. As for a text editor. I tend to use Notepad++
Alexandros Anoyatis
almost 7 years ago05/12/17 at 6:17 am (UTC)
Just the right page to repost some recent (and some not so recent) examples: 1) Menu Toolkit ( https://community.articulate.com/discussions/building-better-courses/demo-menu-toolkit-for-articulate-storyline ) 2) BackgroundMe ( https://community.articulate.com/discussions/building-better-courses/demo-backgroundme ) 3) CardCounters 101 ( https://community.articulate.com/discussions/building-better-courses/demo-card-counters-101 ) 4) SoundManager2 Background Audio with Dynamic Fade ( https://community.articulate.com/discussions/building-better-courses/demo-dynamic-fade-in-out-using-sm2-background-audio )
Veronica Brown
over 6 years ago08/08/17 at 7:13 pm (UTC)

I'd like to get in on this challenge with a project I call "Itr8" (iterate). I want to add a small "database" to a module, so that I can iterate a few slides with changing data instead of building many slides. For example, my first prototype, Flash Cards, iterates one slide with data of the 50 U.S. states and their capital cities. I used an Excel file to generate the JavaScript that defines arrays containing the data. I also wrote JavaScript to randomize the flash cards, track right and wrong answers (self-reported by the user), and repeat wrong ones until the user gets them all right. http://www.veronicabrown.com/itr8-project/ This is a simple first prototype of this concept. I'd like to use this approach for more complex modules in the future. For example, a grammar exercise tha... Expand

Rick Maranta
over 6 years ago08/25/17 at 4:32 pm (UTC)
This demo, done in Articulate Storyline 2, gives the student some math practice by using time. Here I incorporate JavaScript to manipulate the time. You will notice that all the calculations are relative to the current time. I have also tried to incorporate some randomness to the times, particularly in the first example. If you come back to the first screen, it will update with a new time interval. I also use the random function in JavaScript to vary the position of the correct answer. Check it out. http://www.labratlearning.com/got-time-for-math/
Caesar Aycocho
almost 6 years ago04/28/18 at 5:37 am (UTC)
Hello everyone. I am looking for a javascript sample in the community that will dynamically replace a picture in SL slide with a picture saved in a Windows folder. The intention is to save on effort of editing the .story file and re-publishing the project every time the image changes, eg new employee assumes a role like Sales Manager. Thank you very much for the attention.
Caesar Aycocho
almost 6 years ago04/28/18 at 5:39 am (UTC)
Hello everyone. I am looking for a javascript sample in the community that will dynamically replace a picture in SL slide with a picture saved in a Windows folder. The intention is to save on effort of editing the .story file and re-publishing the project every time the image changes, eg new employee assumes a role like Sales Manager. Thank you very much for the attention.
Socrates Anastasiou
over 1 year ago11/06/22 at 7:48 pm (UTC)
I think this is a good place to ask the following question: I am trying to modify the content of a scorm package by altering the javascript files that correspond to different pages of the online course. However, the final result is the same., although the reference js files have some modified text strings. What am I missing? Does the story HTML file dynamically link with the JS sources? Thank you.
Math Notermans
over 1 year ago11/07/22 at 3:02 am (UTC)
On publishing Storyline creates files based on the files in your folder C:\Program Files (x86)\Articulate\360\Storyline\player\unified\html5\lib\scripts. So the best approach is changing the things you want changed inthere. This is for the Modern Player, for the Classic Player its the other folder inthere... It depends somewhat on what files you have been modifying.
Socrates Anastasiou
over 1 year ago11/07/22 at 9:44 am (UTC)
Hi Math, So I have a quiz and try to change a few questions. By the way, I have only identified the stems of the questions in the JS files, not the actual content. {Where does the actual text of the course live?} The file path is this C:\Users\Desktop\Javascript\Self-Assessement_Sport_Science_newJS - Storyline output\html5\data\js However, the 'story' HTML page is not getting modified. Thoughts?
Sign In to Comment