browser detection, feature detection

Oct 08, 2013

Since the Storyline HTML5 output does not render well in browsers other than chrome, safari and mobile safari, (see here) I'd like to figure out some code to detect what browser users are accessing their LMS with and only show the appropriate icon/link to launch our lectures.

For example, if a user prefers to use Firefox, only the flash output icon/link will show up in my course page. If another user accesses the course using Chrome, the flash output link is hidden and the html5 version is displayed. Normally we display a "Launch this lecture" icon, so I'd like to stick with this format if possible and only showing a single icon/link.

I've read on html forums that feature detection is the way to go, but I'm looking at this as a different situation. It seems to me that feature detection is preferred to future-proof browser compatibility, but in this instance it's not about the browser supporting features, it's about the output of Storyline not compatible with up-to-date browsers. Am I looking at this right?

Either way, for the short term I'd like to detect the browser a student is using and make the most compatible version available. In order to streamline the student experience, I'd like to avoid the obvious "just give them two links to click" workaround.

Is there an easy way to do this with the standard storyline output that I'm missing, or do I have to get into javascript? Any help is appreciated, even if it just pointing me to a different resource or forum to explore.

Thanks in advance everyone!

8 Replies

Ashley Terwilliger-Pollard
Staff

over 10 years ago10/09/13 at 7:24 am (UTC)

Hi Mike and welcome to Heroes!

No standard way to do this within Storyline, so it sounds like it'll be a Javascript that you'll need to include and there is a similar discussion with an example in this thread.

Mike Link
Author

over 10 years ago10/09/13 at 9:56 am (UTC)

Thanks Ashley, I'll see if Alex can help me out with this!

Ashley Terwilliger-Pollard
Staff

over 10 years ago10/09/13 at 9:59 am (UTC)

You may also want to PM him instead of just replying in the thread - no guarantee he's subscribed.

Mike Link
Author

over 10 years ago10/09/13 at 10:21 am (UTC)

Thanks, will do!

Sadeq Salehi

over 4 years ago11/01/19 at 2:16 am (UTC)

Try this JavaScript code:

var browser = require("bowser");

var browserName= browser.name;
var browserVersion=browser.version;
var osName=browser.osname;
var osVersion=browser.osversion;

James Ferrone

over 3 years ago08/21/20 at 3:15 pm (UTC)

Our LSO will not allow confirmation with browsers other than Internet Explorer. So I would like to make a script that detects their browser, so I can tell those using Edge or Chrome to stop and open Internet Explorer in order to get credit for the course.

I see Sadeq's script, but I have no idea how to implement it. I worked a little bit with JavaScript and VB years ago, but have never tried using scripts with Storyline. Could you give me some guidance as to how to proceed?

Thanks in advance,
Jim

Scarlett Brooks

over 3 years ago12/16/20 at 3:38 pm (UTC)

I think you would have to add to Sadeq's script some additional lines that enable you to push information to SL variables and pull information from them, as well. I got this information here.

With this one, you have to make sure to insert a reference to the variable on the slide where you want the information displayed. Otherwise, the script may run, but you will not be able to see the result.

Additionally, this thread gives you a nice, clean code that works beautifully as-is if you want your end users to generate an email with browser information already populated.

Lastly, you may try below just to get you started. It should work as-is. But again, don't forget to insert a reference to the variable on the slide; otherwise, the result from the script won't be visible.

Good luck!

var platform= navigator.platform
var player = GetPlayer();
player.SetVar("BrowserPlatform", platform);

Scarlett Brooks

over 3 years ago12/16/20 at 3:42 pm (UTC)

P.S. "BrowserPlatform" is my own variable. If you want to copy this example, you will have to set this variable yourself in SL. What's happening here is that my SL variable "BrowserPlatform" captures the JS variable "player." On my slide, I have a reference to the variable "Browser Platform," like so: %BroswerPlatform%.