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.

329 Comments
Brenda Tyedmers
Joanne Chen
Helen Tyson

Here's my very quick example for this week: http://omniplex.articulate-online.com/9115222693 It's a course with multiple question banks and uses a random number generator to select the order in which they are presented. This can be adjusted by changing the #2 in the javascript to match the number of QBs, and increasing the number of navigation triggers accordingly - including on the feedback layers for the final question in the bank. If you have multiple questions in your banks you might need to lock the final question. But, all in all, it's a scaleable solution, we've done this with client courses with higher numbers of banks. H Edit: link to the thread containing the source file: https://community.articulate.com/discussions/articulate-storyline/elh-challenge-132-jav... Expand

Alex Vostretsov
Douglas Spencer
Lloyd Hill

Here's our entry - Ultimate Screen Recording This is the template we use to author screen recordings for clients. It calls 600+ lines of external JavaScript plus jQuery. http://ultimate_screen_recording.instantrecall.com.au/story.html In short, this template uses JavaScript to: - Use a single instance of a screen recording to function as both a ‘showme’ and ‘tryme’ simulation, which halves development time and maintenance - Counts incorrect and correct hits - Tracks when each ‘showme’ and ‘tryme’ is complete - Uses only a single custom variable for each scene (which contains the simulation). Almost all other variables are dynamically updated by JavaScript. - Track the sequence that scenes are completed in - Display percentage complete - Allow a URL parameter to jump to an... Expand

Matthew Bibby
Crystal Cooper
blair parkin
Cecilia  Bernal
Linda Lorenzetti
Julia Pinholster
Mark Weingarten
David Anderson
Attila Arvai

Hi All, Here's my demo of using javascript in storyline: https://googledrive.com/host/0B3AJzeNxQkY8cjZOSXFBZWUySjg It's a simple board game with questions and opportunities to insert bonus contents. As it hasn't been finished yet (I hope that sometime it will be), there are a few things you should know: - picking a question card is disabled - counting points disabled (as it is connected with question cards) What I've used during the project: - a simple random number generator (JS) - based on the random number you can see different layers (different slides of the dice) - 30 states for the piece - variables that change the state of the piece (it's going to be changed to motion paths) - on the upper left corner you can see the random number generated by clicking th... Expand

Christoph Krieger
Ajay Gupta