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.
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:
- JavaScript & Storyline
- Keep Your Head in the Game: Advanced Storyline
- Voice Recognition Experiment
- Storyline Communication with a Web Server
- How did I make the gamified video interview challenge?
- QR Code Generator
- Full Control Over YouTube Videos in Storyline
- Storyline Variables for Non Coders
- Storyline Variables and JavaScript
- JavaScript And Storyline: Time Saver
- Hook them! JavaScript and Storyline to engage learners!
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:
- 5 ideas on using JavaScript to change background color in Storyline
- E-Learning and Retro Games Sample
- Gamify your next e-learning project's background with this trick
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
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 tutor... Expand
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 ... Expand
Here's a section of a larger game I'm building for my employer...the questions are silly replacement ones for this example. It's still work in progress, I'm going to change the placeholder characters with our own internal staff so users can compete against people they know within the game. I've used JS as a key part of the game; the 'Chasers' answer responses. These are random responses, based on the JS I've used. The harder the 'Chaser'. the more likely they are to choose the correct answer. The medium and easy 'Chasers' also have differing levels of probability to get the answer correct. If the Chaser catches up with you, then it's game over. I've only included 4 questions in this demo..purely because I'm still building :) JS is also used to pull the users first name from our... Expand