Using JavaScript and Articulate Storyline #132

\n

Using JavaScript with Articulate Storyline #132: Challenge | Recap

\n

Extend Your E-Learning Development Skills with JavaScript

\n

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.

\n

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.

\n

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.

\n

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

\n

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.

\n

Challenge of the Week

\n

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.

\n

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.

\n

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.

\n

JavaScript Examples from the Articulate Community

\n

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.

\n

Zsolt Olah

\n

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.

\n

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

\n

Melissa Milloway

\n

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:

\n

Aman Vohra

\n

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:

\n

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

\n

Kristin Anthony

\n

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.

\n

Storyline+JavaScript Source Files

\n

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

\n

Resources

\n

Product support articles

\n

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

\n

Last Week’s Challenge:

\n

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:

\n

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

\n

Wishing you a JavaScriptastic week, E-Learning Heroes!

\n

New to the E-Learning Challenges?

\n

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.

\n

Using JavaScript with Articulate Storyline #132: Challenge | Recap

\n

Extend Your E-Learning Development Skills with JavaScript

\n

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.

\n

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.

\n

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.

\n

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

\n

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.

\n

Challenge of the Week

\n

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.

\n

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.

\n

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.

\n

JavaScript Examples from the Articulate Community

\n

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.

\n

Zsolt Olah

\n

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.

\n

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

\n

Melissa Milloway

\n

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:

\n

Aman Vohra

\n

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:

\n

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

\n

Kristin Anthony

\n

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.

\n

Storyline+JavaScript Source Files

\n

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

\n

Resources

\n

Product support articles

\n

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

\n

Last Week’s Challenge:

\n

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:

\n

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

\n

Wishing you a JavaScriptastic week, E-Learning Heroes!

\n

New to the E-Learning Challenges?

\n

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.

Hmm Javascript . . . let's do some reading and see how it goes, I hope I won't be an observer this week ;) #justsaying

Three very important things: 1) You must publish your course to test JavaScript. It won't work in Preview mode. 2) When you publish, use the Developer mode in your browser (Ctrl+Shift+I in Chrome) to see if any error occurs. One little \";\" missing can cause mysterious nothing on the screen unless you look at errors in developer mode. If there's a red error, it tells at least what's wrong.

3) Is optional but helps a lot. Your JavaScript ends up in a file /story_content/user.js. Why is it good for you? If you publish your file and it's not working, you can open that user.js and try to fix it there. Save it and reload the published version. This way, you don't need to rebuplish every time you try something. However, remember to fix it in your source too.

Welcome to the dark side;

It's nice on the dark side!

Excellent tips Zolt! Thank you for those.

Great tip Zsolt, I use Flow as my FTP client because it has a built in script editor so i can edit the JS file and find errors.

A couple of things I always do when test JS is add a trigger to show an alert on the first slide (this way I can see if JS is working as one broken line breaks it all). For long code step through it add an alert part way through if the alert doesn't fire the error is above that line then move the left line until you isolate the error.

There are some great online code checkers, be careful using text editors for writing your code as it can substitute smart quotes (Mac textEdit does this which i found out last week).

I have a WAMP server installed on my laptop. That's an easy way to test without using FTP. As for editing, Notepad++ does a great job.

The alert is a good one!

Use JavaScript with Storyline 2 Challenge - (recycling is good, right?).

Post: http://goo.gl/sBkhHQ

Demo: http://goo.gl/gon2Uq

It's actually the same as my entry for eLearning Challenge 127 - eLearning Journals. I thought it deserved it's own post on my site, rather than simply being on the same page as all the other challenges, because I wanted to highlight the tutorials I used to create the demo.

In my post I give the links to the tutorials I used to create the printable notes and email notes functions. I particularly liked the printable results page tutorial, because it gives the user an easy way to save a PDF rather than print out the file. I also liked the option of putting your own customized logo on the Print Results page.

E-learning Bros printable results page tutorial:
http://elearningbrothers.com/6-steps-on-how-to-make-a-printable-results-page-in-articulate-storyline/

Matthew Bibby’s JavaScript/Email answer on the Articulate website:
https://community.articulate.com/discussions/building-better-courses/user-notes-that-they-can-print-and-email?page=5#reply-350644
His posted demo: http://matthewbibby.com/demo/120416/email/story.html
His posted source file: http://bit.ly/1RSAKaM

I like the practicality of the print out, Tracy! Amazing how you put this together after 20 minutes the challenge was announced :)

I'm really efficient when I don't have to create anything! :)

Very useful ideas Tracey.Thanks

Thank you, Julia!

Thanks for the tips Tracy! You are my teacher. I loved your look-alike drawing of you on your site. Well done! Could make a fun challenge some day. Drawing ourselves !

Thanks so much, Dani!

Oooh, this should be nice. I've only used Javascript a few times, so I might recycle bits of an older project.

I won't have heaps of time this week because, guess what guys?
DAVE AND TOM ARE DOWN UNDER!!

They're doing two-day workshops in Sydney and Melbourne, so I'll get to meet them this week in Melbourne, soooooo exciting!

Hey Veronica. Not only do you live in a great country with a beautiful accent, you are graced with the presence of some great e-learning connoissuers (yes, I mean Dave and Tom). I, too have limited javascript.

I am Jealous :P

Almost there, Veronica! Sessions are going great and I think we worked out all the kinks in Sydney... Joking!

Looking forward to finally meeting you this week!

Haha! Can't wait, counting down the hours! I'll be the one in the front row with the big smile on her face :)

Here are a couple of old ones

This will tweet slide location + a message http://test.elearninglaboratory.co.uk/TweetLocation/story.html

The ninja game has loads of Javascript in (It checks screen rotation when you load, tweets and many more ) http://test.elearninglaboratory.co.uk/Guru/story.html

Great ninja game, Phil.

Oldies but goodies Phil!

If I get chance this week I will post a mobile style game/notes thingy i have been working on, just overloaded at the moment

Here is a quick one slide.
Changing colours using JS and the instructions are also JS.
http://juliacollins.s3.amazonaws.com/%23132/story.html

Nice psychedelic colour changes, Julia!

Thanks Brenda, I suppose I should have used more subtle colours.

My eyes! You woke them up Julia, nice interaction.

haha...I second Linda...Nice one.

Cool example, Julia!

I really enjoyed meeting you this week!

Thanks David, I enjoyed meeting you and Tom too.

Here is an old one (Panorama image+ JS to score clicks on various hazards in the panorama) I did when I first started in SL1: http://dev.keypointlearn.com/xcl71_SL/VT/story.html
Here is a short blog post about the setup: http://wp.me/p2BoUf-5g. It's been 3 years, so I'm not sure if this still works in all browsers, but there you go.

Amazing as always!

Here's my Entry for this challenge:

https://www.linkedin.com/pulse/ui-course-managing-your-time-aman-vohra?trk=mp-reader-card

Please let me know what do you guys think about it.. Thanks!

Hey Aman,
That looked soooo good!

Thanks a lot Veronica for sparing your time to check it out...
Glad you liked it. :)

Hey all, I'm leaving for vacation and disconnecting. I didn't have time to make something but hopefully when I get back I can add more to the JS collection! I can't wait to see everyone's projects.

Have a great vacation wherever you're going Melissa!

Well call me crazy - I'm working about 80 hrs a week right now and am supposed to be working now but I could not resist this one. The JS in this example takes a number and converts it into hours and minutes. I used this in a math game in which the learner was supposed to get Ellen to the bus on time by estimating how long it would take her to perform certain activities before getting to the bus. The learners then had to answer some time-related questions based on the estimate.

This example shows one of the questions. If you look at the source, you will notice there are 3 JS triggers on the second slide - these all calculate the hours and minutes based on a variable called ellenTime but pass the calculated value to 3 separate variables on Storyline. I then adjust 2 of these variables to create 2 incorrect answers.

demo: http://pinchedhead.articulate-online.com/3796832589

source: https://dl.dropboxusercontent.com/u/73851/JSChallenge.zip

I like this Nancy! I expected extra entries from the Queen of JavaScript :)

You are too funny Linda 😄. Thanks for the laugh.

Wow..Inspired to learn more...Thank you

This one is really cool, Nancy--thanks for including the source file!

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

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?

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?