Devlin Peck
Internet Explorer is an outdated browser, and if people use it to access eLearning courses, they’re probably going to run into functionality issues. Even Microsoft recommends staying away from Internet Explorer for modern web tasks!
That’s why, in this tutorial, I’ll show you how to provide a browser warning to any users accessing the course from Internet Explorer.
We will use Articulate Storyline for the purposes of this tutorial, but as long as you know how to create a variable, execute JavaScript, and conditionally display screens in your authoring tool of choice, then you can follow along with minor adjustments.
First, let’s create the browser warning itself. Our goal is to show the users the browser warning immediately upon opening the course if they access it from Internet Explorer.
Because of this, we’ll use Articulate Storyline to create a layer on the first slide of the course. Title this layer “IE,” then open the layer settings and select the box next to “Hide objects on base layer.”
Once this is complete, add all of the images and graphics that comprise the browser warning.
If you want to give users the option to continue with Internet Explorer anyway, then you can add a button that hides the layer (or, if you’re using a different authoring tool, returns to the default title slide).
And voila! Once the browser warning is designed to your standards with an optional “Continue Anyway” button, we’re ready to continue.
Now that our layer is ready, we need to add programming to show the layer when the user accesses the course using Internet Explorer.
First, let’s open the variable manager and create a new True / False variable called “usingInternetExplorer” (capitalization is important here, so take note of exactly how you capitalize your variable). Set the default value to False.
With this variable in place, we only have two steps remaining:
We can accomplish this by adding triggers on the base layer. Let’s take a closer look.
On the base layer, let’s add an Execute JavaScript trigger.
Here’s the code that we’ll add to the Execute Javascript trigger (feel free to copy and paste):
{% c-block language="js" %}
if (window.document.documentMode) {
const player = GetPlayer(); /* If you’re not using Storyline, remove or change this as needed to change variable values in your authoring tool of choice. */
player.SetVar("usingInternetExplorer", true) /* Change usingInternetExplorer to the name of your Storyline variable. It’s case sensitive! */
}
{% c-block-end %}
If you have been following this tutorial precisely, then you will not need to change any of the code above. However, if you named your Storyline variable something different or you’re using a different authoring tool, then you should use the comments in the code above to guide your necessary changes.
Essentially, this code checks if window.document.documentMode exists (which only exists in Internet Explorer), and if it does exist, then it sets the usingInternetExplorer Storyline variable to true.
Now that our variable changes to true when the user accesses the course from Internet Explorer, we just need to set up a trigger that shows the IE layer when the usingInternetExplorer variable changes.
And there we have it! With these triggers in place, your course will now function as desired. When the user opens the course from Internet Explorer, they will see the browser warning that directs them to a modern browser. If they access the course from a modern browser, then the warning will never appear.
By following the steps in this tutorial, you can provide an additional safeguard against Internet Explorer’s shortcomings.
It’s better to direct your users to a different browser early in the experience so that they do not lose progress upon facing an Internet Explorer functionality bottleneck.
If you have any questions or need a hand, feel free to join the free ID community.
