Connect with us

Education

Storyline eLearning TechTalk For Freshmen: Half 1 – eLearning Business



Do I Want To Know JavaScript If I Use Articulate Storyline For eLearning?

The opposite day I had the pleasure to speak with Devlin Peck about pushing the boundaries of Articulate Storyline by utilizing JavaScript [1]. The dialogue was meant for newbies. Nothing too technical. By way of the dialog, we explored the explanation why somebody would profit from studying JavaScript together with Storyline. I’ve acquired a ton of feedback and questions in regards to the matter and a sample emerged.

Whether or not you employ JavaScript or not in eLearning (not solely with Storyline), there are some fundamentals you want first. It is a two-piece article for individuals who are new to the know-how facet of eLearning.

Is This Article For Me?

This text covers the basics you might want to know earlier than you bounce into JavaScript and even simply fundamental troubleshooting your revealed eLearning programs. You may shortly determine if this text is for you. If you recognize the reply to those questions within the context of eLearning, you’re too superior for this text:

  • What is the distinction between http, https, SSL, and TSL?
  • How do HTML, CSS, and JavaScript work collectively to provide the net web page you see?
  • How do you employ the browser’s Console to test if all information are downloaded accurately?
  • How do you test for errors and warnings in troubleshooting a broadcast course?
  • What is the Storyline Participant? And the way does it talk with JavaScript?
  • The way to get and set Storyline variables from inside an online browser?

Troubleshooting In The Browser

You revealed a course, and whenever you attempt to view it, it is clean. No error message. Nothing. Simply clean. It isn’t working. What do you do?

To troubleshoot this downside you might want to open up the hood and peep into probably the most frequent purposes on the planet: your web browser. While you kind a URL within the browser, you anticipate to see the actual website’s internet web page immediately (or you probably have a slower connection after some lag). Do you know that what you see is NOT a web page on that exact website?

Let me clarify:

  1. You kind in a URL, for instance https://www.rabbitoreg.com, which is my weblog.
  2. In case your browser is linked to the web, the very first thing it’s going to try is to seek out out the “IP deal with” that belongs to www.rabbitoreg.com. There are servers on the web that simply try this. It is like discovering the deal with of your good friend primarily based on their identify (assuming it is distinctive). Why do we want URL addresses and behind-the-scenes IP addresses? They’re sensible as a result of you may hold a URL akin to www.rabbitoreg.com and alter the precise servers with out disruption to your customers. For instance, you may transfer from Hostgator to Bluehost. Your viewers won’t ever discover. On the identical time, it might be laborious to recollect and marker a bunch of numbers as URLs.
  3. As soon as the IP deal with is discovered, then your browser “pings” the webserver that owns this IP deal with. It is like relaying the message that somebody needs to see this explicit web page on that server.
  4. The server then checks if this web page exists in any respect. If it does, it checks if anybody has entry to it or whether or not it’s restricted to sure customers. Whether it is public, then it begins serving bytes to the browser. It is like “Hey, this is all the information, go and put it collectively.”
  5. The browser then receives these “packets” of information and interprets what’s in them. (The explanation why the browser and the server can perceive one another is that they agreed on what language they use, what protocol they convey by, and the port or channel they’re on. Here is extra information in case you’re into these items [2].)
  6. As soon as the browser receives the preliminary packets and places them collectively (that is your HTML web page) domestically, it begins deciphering the HTML web page. The web page might inform the browser to fetch extra information, akin to JavaScript information, graphics, CSS information for colours and format, exterior knowledge, and so on.
  7. As soon as all information are loaded, the browser additionally executes JavaScript code discovered on the web page.
  8. When all is claimed and accomplished, you see the web page in your browser.
  9. All this communication between your native browser and the net server on the web might be vast open. Actually, anybody can hearken to what you are doing if the communication shouldn’t be encrypted. Typically it would not matter. Nevertheless, whenever you’re speaking to your financial institution, you could not need the world to see that. This is the reason “safe” communication is essential. Safe communication signifies that all the data is encrypted between the browser and the webserver. It will probably solely occur on https protocol (relatively than http). There’s much more to find out about this akin to SSL/TLS [3].

A few basic factors right here: HOW the web page seems depends upon your browser as a result of the server simply sends the data however the “rendering” and interpretation occur domestically in your browser. That is why it’s a nightmare typically for eLearning builders to check one thing in Chrome, Firefox, Opera, Safari, IE (relaxation in peace), Edge, and so on. To not point out that every of those browsers might have totally different variations operating on totally different working techniques.

Browser Troubleshooting: Now What?

Nice story, however what do I do with all this?

Good query. This complete “handshake” and information change occurs so quick in immediately’s world that usually a web page seems immediately. Nevertheless, all browsers present you a approach to monitor and debug points, they’re simply hidden from amateurs.

In Chrome you may open the developer window by a shortcut Ctrl+Shift+I (or … Extra →Developer Instruments). That is going to be your good friend! Even in case you by no means use JavaScript, mastering the developer window can remedy you a bunch of complications.

HTML, CSS, And JavaScript In The Browser

Within the context of internet pages, you could hear three phrases quite a bit: HTML, CSS, and JavaScript. To simplify, consider HTML because the content material to be proven. It’s a markup language you may see in case you right-click on any web page and choose View web page supply. CSS determines how the web page seems: the format, colours, kinds, and so on. It’s normally in a separate file the web page masses. These days, you are able to do actually fancy issues akin to animations with pure CSS with none JavaScript [4]. And at last, JavaScript, which may manipulate the web page, present interactions, disguise and reveal parts, calculate values, deal with varieties, and so on. Since JavaScript has been used for a very long time and sometimes, there are frameworks (Vue, Angular, React, and so on.) created for particular use instances [5]. A framework is sort of a bunch of pre-built parts so you do not begin from scratch.

Vanilla JavaScript

Out of the field, with out utilizing any further frameworks, all browsers perceive JavaScript. That is the plain model of JavaScript, what we frequently seek advice from as vanilla JavaScript. The examples within the article are all vanilla JavaScript.

Components, Console, And Community Tabs In Chrome

Let’s begin with the Community tab. The Community tab exhibits all of the information and bits of knowledge the browser is sending or receiving. We name this Community site visitors. Keep on this Community tab and refresh the web page (F5). You may see in real-time how briskly information are downloading.

One of the essential items of knowledge on this web page is the standing of every merchandise. That is the second column, after the identify of the file. The factor is your browser might ask the webserver for hundreds of particular person gadgets. For every merchandise, the server acknowledges the ask with a standing quantity. The code 200 means every thing is okay.

(Do you know that Google has an app for Chrome referred to as OK 200? The explanation it is referred to as OK 200 is that 200 is the code internet servers ship if the request is served with none problem.)

Different well-known numbers:

  • 404 – Unkown
    This occurs when the browser requests an merchandise that doesn’t exist on the webserver.
  • 401 – Forbidden
    On this case, the browser made a legitimate request however the webserver refuses to serve the data. This might be as a result of the person shouldn’t be logged in or logged in however doesn’t have the permissions to see the merchandise.
  • 500 – Inner Server Error
    That is dangerous. I imply actually dangerous as a result of it means an “unknown cause” triggered the issue on the server. Browsers cannot repair that.

For anything, try this checklist [4].

So, again to the unique query: no error, solely a clean web page. What do you do? You open the developer window, go to the Community tab, and refresh the web page. You might even see issues with sure information (normally purple) with an error code. These could be the perpetrator.

The Console Tab

The Console tab is your buddy for all troubleshooting past the preliminary Community tab. Even when all information are loaded positive, you may have tons of points with them. In actual fact, the Console tab is the place you are going to spend most of your detective work. For starters, the Console tab shows errors and warnings to your internet web page. A few of these are non-vital, others can break the entire web page.

Tip: For those who work with purchasers they usually report “it isn’t working” form of errors (which is principally ineffective data for you), ask them to do the identical. Open their developer window, open the tab and take a screenshot of what they see. It is a significantly better start line for troubleshooting than “it isn’t working”

The Frequent Perpetrator: Embedded Objects In Storyline

One query I usually get is about embedded internet objects not displaying up in Storyline. While you publish your course, Storyline tries to indicate your embedded object (which might be a website) in an iframe. An iframe is sort of a browser within the browser. It seems like a part of the net web page however truly, it’s utterly impartial like a window in a window.

The Console the very first thing I inform individuals to take a look at. You might even see within the Console that the location “refused to indicate” in an iframe. It’s a purple error within the Console. For instance, in case you attempt to embed Google as an online object so individuals can search, it might refuse to indicate. (You may’t do something about it except the webserver itself particularly lets you embed within the website.) The identical factor occurs in case your revealed course is on an HTTP website and also you’re attempting to load one other website from an https web page.

The Console Speaks JavaScript

The opposite sensible use of the Console is that it speaks JavaScript. Meaning you do not want any fancy website someplace to check out easy instructions. You are able to do it proper within the Console.

For those who kind in alert(“Hi there World!”) and hit enter, a popup message exhibits up. If you wish to show this message within the Console itself: console.log(“Hi there World!”), this may present the identical message within the Console. Properly, that is type of ineffective. Agreed. “Hi there Worlds” are principally simply the primary steps when studying a brand new programming language. However it will likely be a lifesaver for Storyline and the communication with its Participant.

What Is The Storyline Participant?

You will need to perceive how Storyline programs function in a browser when revealed. Storyline makes use of what they name the Participant contained in the browser. The Participant is liable for understanding what to indicate and when, dealing with variables, watching triggers, and so on. This Participant additionally “hides” Storyline variables from outdoors. The one approach to learn or write Storyline variables is thru the Participant. It is type of the gatekeeper for any change inside your revealed course.

What meaning is that JavaScript, the language that the browser natively understands, shouldn’t be contained in the Participant. It’s outdoors of the Participant solely obtainable for the browser. Storyline variables are contained in the Participant. To entry Storyline variables, JavaScript wants assist. Fortunately, the Participant is keen to play the “messenger” between the surface world and the within Storyline variables.

To show the worth of a Storyline variable within the Console do this command (assuming you have got a Storyline variable referred to as variablename):

console.log(GetPlayer().GetVar(“variablename”))

Let’s break this JavaScript code aside:

console.log(“message”) you discovered earlier than simply shows no matter is within the brackets.

GetPlayer() is a perform that Storyline owns. A perform is sort of a continuously executed program that does a particular factor. On this case, it returns the participant for us to speak with Storyline. You will be unable to make use of this perform except it’s a Storyline revealed venture you are viewing within the browser. GetPlayer() returns an object that lets you set and get variables by their names. Now that you’ve got the Participant’s consideration, it allows you to set or get variables.

The “.” (dot) in GetPlayer().GetVar(“variablename”) is a typical notation to entry the GetVar() perform inside GetPlayer(). You may’t simply kind GetVar(“variablename”) within the Console. It might not be acknowledged as a result of it’s only legitimate contained in the Participant.

To set a Storyline variable, you employ:

GetPlayer().SetVar(“variablename”,”worth”)

With SetVar(), you might want to inform Storyline what variable you are setting to what worth. Relying on the kind of the variable, this command might look totally different:

GetPlayer().SetVar(“Age”, 21)

GetPlayer().SetVar(“Title”,”Zsolt”)

GetPlayer().SetVar(“Very Good”, false)

Does That Imply ANYONE Can Change Storyline Variables From Their Browser?

Sure, you may change your Storyline variables from throughout the Console. And sure, ANYONE can try this. So long as customers know the identify of the variable, they will set it proper from their browser. So, subsequent time you identify your variables you could need to be extra refined than utilizing Rating, for instance.

Tip: There isn’t a approach to checklist all of the variables that Participant has, so customers should know the identify of the variable. However sure, JavaScript can manipulate your course. This will get even worse, although! For those who’re utilizing SCORM customers might merely ship a few traces of code from the Console and your LMS marks the course full with a 100% rating. (It doesn’t work with all programs however sure, that is how weak a easy move/fail might be.)

Final phrase on GetPlayer(): Since usually the code we use has a number of traces, it’s cumbersome to kind GetPlayer() each single time. It additionally makes the code much less readable. That’s the reason you usually see in JavaScript that we assign the GetPlayer() to a JavaScript variable first after which use the variable from there:

let participant = GetPlayer();

console.log(participant.GetVar(“Age”))

-> 21

participant.SetVar(“Age”,100)

console.log(participant.GetVar(“Age”))

-> 100

JavaScript And Storyline Variables

The “participant” on this case is a JavaScript variable. We may identify it foo, or junglegym so long as you persistently use it afterward. JavaScript variables are NOT the identical as Storyline variables. Bear in mind, the Participant retains every thing inside, remoted from the world. JavaScript variables are like Storyline variables however there are extra varieties than simply quantity, textual content, and boolean. We’ll cowl variables within the second a part of this text collection.

Tip: Take note of decrease and higher case letters in your variable naming conference. Variable names are case-sensitive in JavaScript. In case your Storyline variable known as Age however you problem a command for participant.SetVar(“age”, 21) it will not work as a result of “age” and “Age” are two totally different variables in JavaScript even when Storyline variables are NOT case-sensitive. In JavaScript, you may have two totally different variables akin to age and Age on the identical time. Storyline will not allow you to create Age if there’s already an age variable as it isn’t case-sensitive.

Superior Participant actions

Now that you know the way to get and set variables, this is a remaining problem for you. Assuming that you’ve got an “Age” variable in Storyline, what would be the Console outputs after operating this code? And why?

let participant = GetPlayer();

participant.SetVar(“Age”, 21);

console.log ( participant.SetVar(“Age”, participant.GetVar(“Age”) + 1) );

let age = participant.GetVar(“Age”);

console.log ( age );

The reply is coming partially 2 of this text collection.

Conclusion

Troubleshooting any HTML revealed course ought to begin with the developer window. Examine the errors within the Console, test the Community purple traces (apart from OK 200). A single error can break the entire course. One other benefit of utilizing the Console is that it clear the cache to your web page (if set correctly). Usually issues linger as a result of the browser is utilizing cached knowledge.

Use the Console to work together with variables inside Storyline. That is helpful whenever you’re doing high quality assurance, for instance, and you might want to unlock sure issues with out going by the exercise. You may simply flip no matter variable Storyline is watching as a set off to unlock a slide or exercise.

Lastly, you should use Storyline’s JavaScript set off to ship messages to the Console. It is a lifesaver when you have got advanced logic and many variables in Storyline. You may add JavaScript triggers within the stream of your design to maintain you up to date within the Console on how issues are working. For those who’re planning to be taught extra about JavaScript, try these really helpful programs [6].

Ultimate Tip: When to make use of alert() versus consol.log()? Alert suspends all actions within the browser and shows a popup message. Console.log writes the message into the console however by no means interrupts your code. Which one to make use of when? The one time I recommend utilizing alert() is whenever you need to STOP every thing. That is helpful, for instance, when variables change so shortly that by the point you see the ends in the Console, it is too late. You may add step-by-step alert() instructions to see how they’re altering. Be aware which you could have just one alert popup at a time.

References:

[1] Going Past Storyline with JavaScript ft. Zsolt Olah

[2] TCP/IP Ports and Sockets Defined

[3] What’s SSL, TLS? And the way this encryption protocol works

[4] 150+ Superb Examples of CSS Animation & Results

[5] Comparability of JavaScript-based internet frameworks

[6] High 10 JavaScript Programs, Tutorials, & Certifications On-line in 2021

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *