Which device?

Apr 24, 2013

Is it possible to check which device is using the module?

 For example: I want to know if someone is looking via a iPad or an Android or Windows or Smartphone.

13 Replies
Peter Faulhaber

Alexandros,

thanks.

Do you have any experience with this code in Storyline?

For example: If I have iOS, Android and Windows. If the user use an iPad a mp4 movie must start up. If it is Android use AVI movie and if it is Windows use for example swf.
What I want is make one e-learningmodule as a SCORM within a LMS.
Alexandros Anoyatis

I have had a couple of cases where I differentiated between iPad and desktop and I do have a script utilising 'browser detection', but I have not really tested device detection. There's no foul proof way to do this IMHO - none that I have found so far anyway -, as there are always new browsers (and thus slightly different browser identifiers) popping up, both in the Android and iOS ecosystem, so you're always 'somehow' a step behind.

If it is only video 'behaviour' that you are worried about, you may be better off using an external player ( see this link for more info ).

I'm also attaching an older story file containing JS code you may find useful.

Hope this helps,
Alex

Peter Faulhaber

Alexandros,

Thanks a lot!!

For now I am just worried about the video. I want the module in a LMS (so SCORM or TinCan) but I just want to have one module for tracking and tracing options.

So I reckon if I can determine which device is running I could show a AVI for WIndows and Android and a MOV if a Ipad is the device?

Or am I missing a lot?

Alexandros Anoyatis

Hi Peter,

Your video will still play fine in all devices if you embed it in Storyline, regardless if your module plays through an LMS or not.

However if you don't want to use the stock player you can still use an external one (try the link in my last post again and grab the last story). Keep in mind you will have to make sure you encode to MP4, OGV and WebM and let the script make the decision for you (I doubt AVI & MOV are going to cut it for all browsers).

Hope this helps,
Alex

Peter Faulhaber

Hi Alexandros,

Thanks for your reply. The device is easy to check on. Thanks to your javascript. The browser still is the problem. We decide to develop for the most "common" browsers. So for Safari on the Mac and Chrome, IE and Firefox for Windows. For Android we use the Android browser and maybe Dolphin.

Mike Link

Alexandros Anoyatis said:

I have had a couple of cases where I differentiated between iPad and desktop and I do have a script utilising 'browser detection', but I have not really tested device detection. There's no foul proof way to do this IMHO - none that I have found so far anyway -, as there are always new browsers (and thus slightly different browser identifiers) popping up, both in the Android and iOS ecosystem, so you're always 'somehow' a step behind.

If it is only video 'behaviour' that you are worried about, you may be better off using an external player ( see this link for more info ).

I'm also attaching an older story file containing JS code you may find useful.

Hope this helps,
Alex


Hi Alex,

Can this code be used to launch different versions of the published file depending on what the student is using as a browser? I'm trying to automatically detect and launch the appropriate (html5 or flash) file when a user clicks a "launch this lecture" icon within the course.

Here's a link to the forum thread I started for this topic: http://community.articulate.com/forums/t/37508.aspx

Alexandros Anoyatis

Hi Mike,

I don't think your scenario really applies to the *.story directly. I think the action you are describing has to be done at LMS level. The "script" I provided differentiates inside the actual story. 

I am not near a computer at the moment, but I think the script above only differentiates between mobile/tablet devices and desktops. It was created using Update 1 if memory serves right, so I don't know if it even works anymore. It definitely does not work with AMP since it the app cannot run Javascript.

But the purpose of it was to be able to serve the same story differently depending on the device it is played back (regardless the output is html5 or flash - that is being taken care of automatically anyway) .

The reason for this is that certain states (such as hover for instance) cannot be reliably utilized with a touch device (although technically, hover IS supported on the iPad, it is extremely counterintuitive to use). So certain elements inside the same story (and even the same slide) are actually implemented twice (but only one is shown at all times, depending on the device).

Just my 2 (or...3) c,

Alex

Mike Link

Thanks Alex,

We had done some research at work to see how this might work with Moodle, and here's our proposed solution. We haven't fully tested this yet, but I thought I would share with the community if anyone else came across this issue.

In Moodle, we should be able to just copy & paste inside the HTML content of the section after the launch lecture links:

 
 function init() {
  if (Y.UA.gecko > 0 || Y.UA.ie > 0) {
  Y.one('.html_link').hide();
  } else {
  Y.one('.flash_link').hide();
  }
 }
 YAHOO.util.Event.onDOMReady(init);
 
The logic of the code says: if the browser is Firefox or IE hide the HTML 5 version link (and use the flash link). Otherwise use the HTML 5 version and hide the flash version.
Before this can work you have to add to the html link a class attribute: ... and to the flash link: ...
Also very important: both links have to be on the section at the same time. The code above will hide the one that needs to be hidden depending on the browser.
Hope this helps!
Mike

This discussion is closed. You can start a new discussion or contact Articulate Support.