Using JavaScript and Articulate Storyline

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

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

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:

Adding a Live Chat Box to Your Course
Weather App in Storyline 2
Leaderboard example in Articulate Storyline

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

Storyline 2: L&D Title Generator By Trina Rimmer
Storyline 2: Word Count JavaScript By Phil Mayor
Storyline 2: Controlling Variables from JavaScript By Zsolt Olah

Resources

Product support articles

JavaScript Best Practices and Examples
Articulate Support resources for Storyline and JavaScript

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

306 Comments

Brenda Tyedmers

almost 8 years ago05/31/16 at 5:42 pm (UTC)

I took inspiration (and code!) from Zsolt! (Thanks for your blog examples). In this entry, you can manipulate 10 numeric variables in 7 ways, display the corresponding javascript and print the screen if you wish. http://elhchallenges.s3.amazonaws.com/132%20ELH%20-%20Javascript%20-%20Storyline%20output/story.index.html Looking forward to checking out all of your entries!

almost 8 years ago06/01/16 at 7:35 am (UTC)

Brenda, thanks for demo the code! I learnt a lot form it.

almost 8 years ago06/02/16 at 2:45 pm (UTC)

This is awesome!!!!!!!!!

almost 8 years ago06/03/16 at 12:14 pm (UTC)

Amazing course Brenda!

Linda Lorenzetti
Hero

almost 8 years ago05/31/16 at 7:43 pm (UTC)

This is a very helpful interaction to keep nearby Brenda!

Joanne Chen
Hero

almost 8 years ago06/01/16 at 4:24 am (UTC)

Recently, I happened to start using JavaScript and thanks for many heros sharing their JS code in this community. Here is my first entry, it's an after course quiz which I use javascript in a completion certificate in three places, date, print and email. The challenge here for me is the print fuction. To print out the screen is not difficult but to print out the certificate without buttons in the screen took me some effort. http://chilp.it/957b958

almost 8 years ago06/01/16 at 2:56 pm (UTC)

Works great and looks terrific, Joanne - excellent first entry. Would you mind sharing your story file or the JS code? I'd be interested in seeing how you approached it.

almost 8 years ago06/03/16 at 7:37 am (UTC)

Hi Brenda, I've been quite busy these days. I would like to write a post for this challenge when I am free. And of course you could download the story file at https://drive.google.com/open?id=0BzqOBbexfMo3WEpKcVl0MGUwaDQ

almost 8 years ago06/01/16 at 5:09 pm (UTC)

Very nice example Joanne. I was asked to do the same, but by taking the name from the LMS instead of having them enter it. I found that challenging.

almost 8 years ago06/03/16 at 7:40 am (UTC)

Thank you, Linda. Could you please tell me how to take data, eg. name from LMS? I might face that in the future.

almost 8 years ago06/03/16 at 12:04 pm (UTC)

I haven't finished it yet, but here's a link that I found helpful https://community.articulate.com/discussions/articulate-storyline/retrieve-lms-user-name-as-variable

almost 8 years ago06/04/16 at 12:45 pm (UTC)

Linda,thank you ! This is wonderful.

Saurabh Dua

almost 8 years ago06/01/16 at 2:04 pm (UTC)

Hi Everyone! I don't want to be just a viewer this week. That's such a simple sample. Demo: https://saurabhdua77.articulate-online.com/ShortUrlRouter.ashx?404;http://articulate-online.com:80/p/3520514586 Just wanted to check how Auto-scroll web page works?

almost 8 years ago06/01/16 at 2:58 pm (UTC)

Simple and the email works great, Saurabh. I like the colourful graphic you chose.

almost 8 years ago06/02/16 at 10:16 am (UTC)

Thanks Brenda! Yes, it's a very simple one. I was trying to build auto scroll web page, it worked without JS(by line animation) but it wasn't working with JS.

Helen Tyson
Partner

almost 8 years ago06/01/16 at 3:57 pm (UTC)

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

almost 8 years ago06/01/16 at 5:12 pm (UTC)

Hi Helen, I was asked for my email and password when I clicked on that link.

almost 8 years ago06/02/16 at 6:14 am (UTC)

Hi Helen, I had the same experience as Linda. It was an Omniplex website, asking for my email & password.

almost 8 years ago06/03/16 at 3:45 pm (UTC)

Oops, thought I'd set it "Public" - will adjust accordingly

almost 8 years ago06/03/16 at 3:46 pm (UTC)

Adjusted! The link should work happily now :-)

almost 8 years ago06/03/16 at 6:55 pm (UTC)

It works, Helen! The randomizing of question banks is a very useful application. Thanks for the little intro on slide one. I'd be interested in the story file if you're able to share.

almost 8 years ago06/06/16 at 11:33 am (UTC)

As you can't add an attachment to the replies here I've started another conversation to upload it - it's here: https://community.articulate.com/discussions/articulate-storyline/elh-challenge-132-javascript H

BackUp Team

almost 8 years ago06/01/16 at 4:07 pm (UTC)

Hello Everyone, great challenge, very interesting examples. Here's my entry: https://d50860d23022081573a1e5d9af544d3395bca0ed.googledrive.com/host/0B-_R7jR2jYXWYjBXMkNuVm1BOVU/ Calculator is very simple and works one operation at a time! Also this example: https://2dcad15b33c389926b0d9a5d94a1bd01884d3d9c.googledrive.com/host/0B-_R7jR2jYXWWXljZzV2RXdibTg/ also with using of JS to generate equations. Hope it will be interesting!

almost 8 years ago06/01/16 at 4:16 pm (UTC)

I love the equation generator, Alex. Plus the ticking clock and chalkboard writing sound to add drama. Great entry. The calculator worked well...except if I didn't press equal in between each operation. And now I just saw your comment about "one operation at a time!"

almost 8 years ago06/06/16 at 9:15 am (UTC)

Thank you!

almost 8 years ago06/02/16 at 1:41 pm (UTC)

Amazing calculator Alex!

almost 8 years ago06/06/16 at 9:16 am (UTC)

Thank you!

almost 8 years ago06/03/16 at 6:16 pm (UTC)

Somewhat unrelated question, Alex. How do you get the font you're using to work for text entry? Did you specify a web font somewhere?

almost 8 years ago06/06/16 at 9:30 am (UTC)

Hi, Mark. You should format character in the numeric entry by using the font you needed. Here i used 'Bradley Hand ITC' - downloaded from some free font site. The trick is to put any character in the entry field (0 - in the module).

almost 8 years ago06/08/16 at 11:26 am (UTC)

Thanks for getting back to me, Alex. I could have sworn I've tried that and it then changed to the default font in the browser, but I'll try again. Nice entries, btw!

Douglas Spencer

almost 8 years ago06/01/16 at 4:57 pm (UTC)

I designed this slot machine interaction to be included in education about reducing sugary drinks from our diets. Good drinks include water, unsweetened coffee/tea, and alcohol (in moderation). Bad drinks include soda, fruit juice, mocha, and sports drinks. JavaScript was used to generate random numbers, stop user from getting 4 fails in a row, and pick stars more often than random. It's a larger file so it may take a little bit to load. http://www.dougtspencer.com/slots/index_lms.html

almost 8 years ago06/01/16 at 5:15 pm (UTC)

Really nice interaction, Douglas!

almost 8 years ago06/01/16 at 8:11 pm (UTC)

Yes, great slot machine, Douglas. I was remarkably lucky :) What did you use for the three spinners?

almost 8 years ago06/02/16 at 12:52 pm (UTC)

The three spinners are all animated gifs (created with Photoshop) and are the normal state. When the user spins the slot machine, a random number is generated for each slot. A trigger is then used to change the state of each slot image to match the variable number.

Lloyd Hill

almost 8 years ago06/02/16 at 6:30 am (UTC)

Here's our entry. This is the template we use to author screen recordings for clients. It calls 600+ lines of external JavaScript. https://blendedminds.com.au/storyline-screencast-plugin/

Crystal Cooper

almost 8 years ago06/02/16 at 2:54 pm (UTC)

Here's my idea - I bet you can guess what time of day it was when I was working on this activity! I’ve not done much with JavaScript before, but I’ve been looking for a way to build timer results into activities, so this challenge was perfectly timed! My starting point was this forum thread at https://community.articulate.com/discussions/articulate-storyline/timing-how-long-an-interaction-takes#134424 which I adapted for use in a pick one quiz question. Eventually I’d like to be able to use the timer result to drive lesson branching or the final score, but I'll have to learn a lot more to get to that stage! http://crystalcooper.atspace.cc/wp-content/uploads/articulate_uploads/Challenge-132-Javascript/story.html

almost 8 years ago06/02/16 at 9:51 pm (UTC)

Umm, 3pm your time Crystal? Great use and display of the timer, both at the bottom and in the popup window. I don't even drink coffee any more and I was looking at it too long...

blair parkin

almost 8 years ago06/02/16 at 4:00 pm (UTC)

Hi Everyone I had created this a little while ago and had never got around to posting it. It is based on some note taking examples I had seen, except they only allowed you to take one note. I wanted to the ability to take multiple notes per page and across pages and have them all list together in a sort of bullet format. I did have the ability to print them out as well but that stopped working this morning so I removed it. Anyway, hope someone may find this useful: http://blairparkinexamples.s3.amazonaws.com/Notes/index.html Blair PS I know nothing about javascript but I can share the files if anyone wants :)

almost 8 years ago06/02/16 at 6:27 pm (UTC)

Nice example, Blair. You should add this to the Learning Journals Challenge https://community.articulate.com/articles/learning-journals-in-online-training

Julia Pinholster

almost 8 years ago06/02/16 at 9:43 pm (UTC)

Hello! I don't have any experience with JavaScript, so I went for something very simple. I took the code and instructions found here: https://www.articulate.com/support/storyline/javascript-best-practices-and-examples and here: https://vimeo.com/145579732 to make a quick "Pick a Number" game. Enter a number from one to ten and see if you matched the generator. http://bit.ly/1sr5hmW

almost 8 years ago06/02/16 at 9:47 pm (UTC)

The pick a number game worked really well, Julia. Nice design with the dropping numbers on the entry. I matched on the very first number, and then not at all for 10-20 more :)

almost 8 years ago06/03/16 at 1:33 pm (UTC)

Thank you!

almost 8 years ago06/04/16 at 4:20 am (UTC)

This is great Julia!

almost 8 years ago06/07/16 at 7:33 am (UTC)

Welcome to the challenges, Julia! Your project turned out really well. I just updated the recap to feature your example: https://community.articulate.com/articles/javascript-and-articulate-storyline#JuliaPinholster

JD Maddox

almost 8 years ago06/03/16 at 5:22 pm (UTC)

I created this a while back, but used Javascript as a RNG. Depending on the number generated, it shows a random layer. 100% random Magic 8 Ball. Enjoy! www.googledrive.com/host/0Bxawj2MldS61ZFNyb0Y5UVJoR3c

almost 8 years ago06/03/16 at 6:38 pm (UTC)

Love the magic 8-ball, JD. Great concept to show a random layer.

JD Maddox
Brenda Tyedmers

almost 8 years ago06/03/16 at 6:40 pm (UTC)

Thank you Brenda!

almost 8 years ago06/07/16 at 7:38 am (UTC)

Thanks for reviving one of my fav toys, JD! Cool use of JS to randomize layers. Updated the recap to feature your example: https://community.articulate.com/articles/javascript-and-articulate-storyline#JDMaddox

Mark Weingarten

almost 8 years ago06/03/16 at 5:56 pm (UTC)

Here's a game I designed to work in a classroom setting. The teacher would "roll" the dice and then move to the corresponding space. The dice trigger was set up to generate a random number using javascript, and each question slide (the lightboxed ones) is set up with an individual variable so that it is only viewed once. Live version: http://www.mindstreamelearning.com/what_would_you_do/ Source file: https://drive.google.com/file/d/0BzhTrO8IvHuTOEp6RVRORkRjYm8/view?usp=sharing - Mark Weingarten - http://www.mindstreamelearning.com

almost 8 years ago06/03/16 at 6:45 pm (UTC)

The diceroll/lightbox game worked really well, Mark. Would be very useful in both a classroom setting and situational learning. The dice animation is smooth and simple.

almost 8 years ago06/05/16 at 12:13 pm (UTC)

Thanks, Brenda!

almost 8 years ago06/07/16 at 8:00 am (UTC)

Cool example, Mark! I updated the recap post to feature your example: https://community.articulate.com/articles/javascript-and-articulate-storyline#MarkWeingarten I wasn't able to grab the download. Can you verify the link is working? I'd like to include the download as well. Welcome to the challenges!

almost 8 years ago06/07/16 at 11:17 am (UTC)

Thanks, David! Much appreciated. I just uploaded it again. This link should work: https://drive.google.com/file/d/0BzhTrO8IvHuTOEp6RVRORkRjYm8/view?usp=sharing

Alice Liu

almost 8 years ago06/03/16 at 6:37 pm (UTC)

I created a game for my three godkids. They can't read yet and are still learning to use devices, so there are no directions. This is my first challenge ! http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/sto_1akbmcfh1mtmpc4p81v0910v99/story.html

almost 8 years ago06/03/16 at 6:48 pm (UTC)

Good execution - this matching effect using the random generator has some great potential applications, Alice. Well done. First challenge ever?

Alice Liu
Brenda Tyedmers

almost 8 years ago06/07/16 at 1:14 pm (UTC)

Thanks Brenda! Yes, this was my first challenge ever.

almost 8 years ago06/07/16 at 8:09 am (UTC)

Welcome to the challenges, Alice! I noticed your demo is hosted on Tempshare. Tempshare's a great solution for testing projects but it deletes everything after 10 days. Would you mind posting a zipped version of your project in the forums or emailing it to me? I'd like to post in on our servers to preserve your work. I added your example to the recap: https://community.articulate.com/articles/javascript-and-articulate-storyline#AliceLiu

Alice Liu
David Anderson

almost 8 years ago06/07/16 at 1:47 pm (UTC)

Thanks David! The zip file can be found here: https://s3-us-west-2.amazonaws.com/storyinewonderland/Matching+upper+lowercase/Keyboard+Games.zip

almost 8 years ago06/07/16 at 4:00 pm (UTC)

Got it! Thanks, Alice. I updated the links!

Tracy Carroll

almost 8 years ago06/07/16 at 12:52 am (UTC)

EAP Awareness Training - This demo has a printable notes function, and the html file has been modified so that the background music plays over all the slides in the demo. Demo http://goo.gl/sDR970 Post http://goo.gl/8bxkWF

almost 8 years ago06/07/16 at 8:27 am (UTC)

Nicely done, Tracy! Thanks for putting a post together on this one. This is really helpful. Recap updated: https://community.articulate.com/articles/javascript-and-articulate-storyline#TracyCarroll

Tracy Carroll

almost 8 years ago06/07/16 at 6:19 pm (UTC)

Thanks, David!

Attila Arvai

almost 8 years ago06/08/16 at 9:25 am (UTC)

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

Jay Sprout

almost 8 years ago06/09/16 at 3:39 pm (UTC)

I don't see a date for the post or a deadline--the comments were my only clue this challenge was already over. What day of the week are these challenges released? What are the deadlines? Are they different every week?

almost 8 years ago06/09/16 at 4:01 pm (UTC)

Hi Jay! The challenges are always open. We post a new challenge each Friday and recap the examples on the following Thursday. But the older challenges are always open so you can share anytime. I'll update the recap whenever you post your example.

Tania Vercoelen

almost 8 years ago06/09/16 at 7:23 pm (UTC)

So many awesome Javascript examples I wanted to give this one a go! Here is another take on the random number generator. A fun little twist to add into scenario based training: http://www.taniavercoelen.com/spinningwheel/story.html

almost 8 years ago06/21/16 at 11:57 pm (UTC)

Cool demo, Tania! Randomization is a big request so your example is really helpful! Recap updated: https://community.articulate.com/articles/javascript-and-articulate-storyline#Tania

Ajay Gupta

almost 8 years ago06/21/16 at 7:59 am (UTC)

Here is the classic Lemonade Stall business simulation game created in Storyline. The whole simulation business logic is kept in Javascript code and the game refers to the code to dynamically change information and calculate the results for each round. A few tweaks to the mathematical model is still required. Link: http://epiphanylearning.co.in/GuruAwards/story.html BLog: http://epiphanylearning.co.in/using-articulate-storyline-to-create-business-simulation-games-part-1/

almost 8 years ago06/22/16 at 11:48 am (UTC)

Fantastic example, Ajay! Love the slider action going on in your demo. Recap updated: https://community.articulate.com/articles/javascript-and-articulate-storyline#Ajay

David Anderson
Author

almost 8 years ago06/22/16 at 12:10 pm (UTC)

Hey folks! The challenge recap is current: https://community.articulate.com/articles/javascript-and-articulate-storyline If I missed your example, let me know so I can update the recap. Other than that... keep the awesome JavaScript examples coming!

Tracy Carroll

almost 8 years ago06/27/16 at 12:33 am (UTC)

I've just added a new Print Certificate freebie template to my site! JavaScript is used to add this function to Storyline. Demo: http://goo.gl/QvIOel The Zip file download contains the .story file, the printCertificate.html file, and the Storyline output folder: http://tracycarroll.net/Freebie_Print_Cert.zip

almost 8 years ago06/27/16 at 2:11 pm (UTC)

Having the user type their name right at the certificate slide is a nice addition, Tracy. Thanks for sharing.

almost 8 years ago06/27/16 at 9:35 pm (UTC)

Thank you, Brenda!

Tracy Carroll

almost 8 years ago06/28/16 at 5:17 pm (UTC)

This #132 challenge demo is a downloadable freebie! The demo features a learning journal. JavaScript is used to provide a Print/Save and/or Email notes function. Demo & download: http://goo.gl/a4AQ9Z

Phil Mayor
Hero

almost 8 years ago07/08/16 at 9:31 am (UTC)

Here is an example that concatenates a list and ensures fixed decimal places for pricing. http://test.elearninglaboratory.co.uk/Shop/story.html

Aman Vohra

almost 8 years ago07/14/16 at 11:50 am (UTC)

Hi David, Used JS along with Storyline 2 to depict the score in an interactive bar chart. Please have a look- https://www.linkedin.com/pulse/graphical-representation-quiz-results-sl2-aman-vohra?trk=prof-post

Using JavaScript and Articulate Storyline #132

Extend Your E-Learning Development Skills with JavaScript

Challenge of the Week

JavaScript Examples from the Articulate Community

Zsolt Olah

Melissa Milloway

Aman Vohra

Kristin Anthony

Storyline+JavaScript Source Files

Resources

Last Week’s Challenge:

New to the E-Learning Challenges?

Related Content

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

A Week in Review: July 11, 2016

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

306 Comments