Why do we need JavaScript?
As discussed, Storyline already has many powerful tools to build visually stimulating and highly interactive eLearning including:
-
Layers: that overlay the base screen content allowing you to cause content to appear when certain conditions are met. A feature useful for creating pop-up explanations, highlighting additional information, and adding interactive elements.
-
States: that allow the appearance of graphic objects on the screen to chnage in response to events, or based on the value of variables.
- Variables: enable you to capture and store data during the course that can then be used to build personalised and adaptive learning experiences. You can use variables to track progress, display customised content based on learner choices, and create branching scenariobs.
- Triggers: defining events such as a button click or timeline event and setting a trigger, allows the developer to initiate actions like displaying or hiding layers or objects, performing animations or changing variables.
So what does JavaScript add to this armoury? – and where might it provide additional functionality that can’t be achieved using the standard Storyline features?
To answer this question, we should really start at the beginning and explain what JavaScript is and how it works with Storyline…
JavaScript is a powerful programming language used extensively for web development. It is a ‘scripting’ language meaning that the program is interpreted rather than compiled and the code is executed directly by an interpreter (or runtime environment) – In this case the web browser. All the main web browsers are capable of interpreting JavaScript (although it can be switched off if a company’s security policy dictates so). It enables developers to manipulate HTML content, handle user input, and dynamically modify web pages.
NOTE: Security Considerations: although some organisations do have concerns over the security of allowing Javascript code to execute, it should be noted that browsers have security mechanisms in place to prevent potentially harmful actions, like accessing a user’s file system without permission. JavaScript is effectively executed within a ‘sandboxed’ environment to ensure security.
Storyline allows us to define an event and add a ‘trigger’ that will execute a block of JavaScript code, incorporating the JavaScript ‘script’ within the output HTML. This allows us to enhance the interactivity and functionality of courses beyond the built-in features of Storyline.
Let’s look at a few examples of the kind of areas where JavaScript can be used to perform tasks that might otherwise be difficult (or even impossible) in Storyline iteself:
Some Examples of how JavaScript might be used:
Complex math and numeric calculations
If you need to perform complex calculations or keep track of scores in your e-learning course, JavaScript can come in handy. You can use JavaScript to capture user inputs, perform calculations based on those inputs, and update variables to display scores or perform other actions based on the calculated results.
Advanced string variable processing
JavaScript provides a wide array of string manipulation methods not available in Storyline itself. This includes concatenating strings, splitting strings, replacing portions of strings, and converting text case, which can all be leveraged to craft engaging content. JavaScript enables real-time interactivity by allowing you to manipulate strings based on user inputs.
Date and time functions
JavaScript offers a variety of date and time functions that can be useful when working with Storyline. You can, for example, use code to determine the curent date and time and use this to create clocks and timers. You can compare dates and perform date calculations as well as manipulet date formats.
Advanced animation options
Storyline has excellent predefined animations that can be applied to objects within the screen ‘stage’. By providing direct access to JavaScript animation libraries, it is possible to extend the range and style of animations available to build even more exciting visual imagery.
Access to external data sources and storage
Increasingly developers are looking to either store data from the eLearning externally or access data sources outside Storyline itself. JavaScript can facilitate this process. You can use JavaScript to interact with APIs, send and receive data, and update variables within the elearning based on the responses received from external sources.
The reality is that, once you can add JavaScript to your Storyline eLearning app, you have the power to build almost anything you like, creating countless opportunities to enhance the user experience.