Some useful tools for developing and testing your JavaScript code
Using a Code Editor
It is important to realise that the Storyline JavaScript Editor will offer no assistance in helping you check your code! There are many free tools, however, that can be used which have built-it syntax checking and intelligent code editing. This can help you enormously by checking the syntax of your JavaScript as you create it…
Visual Studio Code (VS Code) is a popular (FREE) code editor developed by Microsoft (and highly recommended by Profile Learning Technologies). It’s a great tool to use for coding and offers many advantages over the Storyline Editor.
VS Code provides intelligent code completion, syntax highlighting, and error checking for a wide range of programming languages (including JavaScript). Although VS Code has advanced debugging facilities, we are mainly concerned with its syntax checking capabilities. You can download this software for free here:
Visual Studio Code (VS Code) provides several ways to help you create accurate code and identify and fix syntax errors, including:
Syntax Highlighting.
VS Code uses highlighting to color code elements in your code according to their types. This makes it easier to visually identify keywords, variables, strings, and other elements and helps you spot errors in your code.
Intelligent Code completion.
As you type your code, the editor will suggest how you might want to complete each line of code. In the case shown, typing “con” will display a list of functions, keywords, fields or variables that begin with, or contain these letters.
The icons against each suggestion indicate what it is (e.g. the cube icon plus ‘confirm’ signifies a function). Note that in this case VSCode also tells you what the parameters are for this function.
Syntax error checking
VSCode will check the syntax of your code and will highlight errors using squiggly lines to show you where the errors are. There is also an error count showing you how many syntax errors have been found in the code
Using Artificial Intelligence to generate code
Using AI engines like ChatGPT to generate your JavaScript code can save a lot of development time – particularly if your own knowledge of JavasCript is limited…
In this example, we ask ChatGPT to generate JavaScript code to calculate the median of 6 numbers, Number1 to Number 6.
As you can see, the code generated is the code used in our example with the a couple of minor adjustments and the retrieval of the Storyline variables added
Note: Don’t forget to test your code thoroughly, AI engines can make mistakes!
Using the browser Developer Tools
With Javascript running under Storyline, you don’t normally see an error message if the code fails. There are a number of technical reasons for this but, broadly, as Storyline is running the code, it will trap JavaScript errors but is not designed to make them visible to the end user. Also, some JavaScript errors might not cause the entire script to fail. If there’s an error in a specific function or part of the code that isn’t critical to the overall functionality, the script could continue running without showing any visible errors. These ‘silent failures’ make it difficult for us to debug our code and find the problem. This is where the Developer Tools in the browser can be of assistance.
Let’s take an example. We have introduced a minor error in the JavaScript code for the median calculation example we looked at earlier. The code appears to work – BUT, under some circumstances, the code gets the answer wrong.
(In the sample shown, the correct answer is 28, but the code returns an answer of 27)
Without an error message it can be difficult to find the problem, however, using the browser Developer Tools I can get more information about what is going wrong…
Activating the Developer Tools will depend on which browser we are using. In Microsoft Edge, we execute the code and then click F12 to open the developer window:
Clicking the ‘Console’ tab, the browser will show error messages generated when the code is previewed and executed. Here we can see that there was a warning message sent to the console when the JavaScript code was interpreted by the browser that there was an attempt to retrieve a variable NumericEntry6 which was not resolved i.e. this variable was NOT found in the Storyline app.
Looking again at the JavaScript code, we can search for “NumericEntry6” and it becomes obvious that the Storyline variable name has been mis-typed – it should be “NumeicEntry5”.
Correcting this and saving the amended JavaScript code solves the problem.
The correct answer is now generated!
Well done! You have completed this first introductory course on using JavaScript to extend Storyline Capabilities – in the final section we will just summarise what we have covered.