Storyline

Storyline 360 & JavaScript: Detecting Learners Operating System

In this latest Articulate Storyline 360 & JavaScript video, I show you how to detect the learner's operating system and then, depending on the result, change an image to match that operating system.

This code allows you to target and show content relevant to the user and the device they are on rather than providing extra content that may not be relevant to each user. It just takes a snippet you can copy and paste, and then it updates as a variable in Storyline; now, with that variable, you can modify the content within Storyline. 

//Player
let player = GetPlayer();

//Updated Variable
player.SetVar("deviceType", getOS())

//Getting and retruning OS
function getOS() {
  var userAgent = window.navigator.userAgent,
      platform = window.navigator?.userAgentData?.platform || window.navigator.platform,
      macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
      windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
      iosPlatforms = ['iPhone', 'iPad', 'iPod'],
      os = null;

  if (macosPlatforms.indexOf(platform) !== -1) {
    os = 'Mac OS';
  } else if (iosPlatforms.indexOf(platform) !== -1) {
    os = 'iOS';
  } else if (windowsPlatforms.indexOf(platform) !== -1) {
    os = 'Windows';
  } else if (/Android/.test(userAgent)) {
    os = 'Android';
  } else if (/Linux/.test(platform)) {
    os = 'Linux';
  }

  return os;
}
Jeff Batt
6 Dec, 2022