Is there a way to know what device is being used to view a course?

Hello all, 

I posted these in another thread but thought you might find them helpful as well. If you'd like to avoid using a web object and instead put all of the JavaScript code directly in an 'Execute JavaScript' trigger, this is possible!

Here is a sample file (all thanks to Michael Anderson) showing how to set a variable as 'true' if the course is viewed on mobile and 'false' if viewed on a laptop/desktop. Once you have this variable set, you can create all sorts of other triggers to alter your course based on the value of that variable.

I've attached my sample .story file here (sorry it's in 360) and have also attached a .js file of the exact JavaScript code in case anyone can't open the .story file. Apologies that the copy/pasted code is very poorly formatted (read: not at all formatted).

Step 1: Create a True/False variable called clientIsPhone

Step 2: Create an 'Execute JavaScript' trigger on the slide. Copy/paste the code directly into the trigger. You can copy to code either from the trigger in the demo .story file or in the attached .js file.

Here's the demo link: https://360.articulate.com/review/content/ea0a0258-3ffc-4fae-a89d-6797d07f4af5/review  

Karen, I created this demo using code from the MobileESP device detection project (http://blog.mobileesp.com/?page_id=60). This is a free option, and it seems there have been no updates to its development in 2 years. There are paid options for this that are continually updated, which may or may not be necessary for your use.

I just tested it quickly on my desktop and my Android phone. Please test the demo on your intended devices to make sure it behaves as expected. I've attached the Storyline 2 project file (just upgrade it to 360 to open). I can develop in Storyline 3 also, I just usually try to use 2 so that everyone else can open the file.

Demo link: http://www.andersonelearning.com/demo/DetectClientDevice/

There is a JavaScript API built-in for detecting media. The JavaScript window.matchMedia() method returns a MediaQueryList object representing the results of the specified CSS media query string. You can use this method to detect mobile device based on the CSS media query.

<script>
$(document).ready(function(){
let isMobileDevice = window.matchMedia("only screen and (max-width: 760px)").matches;
if(isMobileDevice){
// The viewport is less than 768 pixels wide
//Conditional script here
} else{
//The viewport is greater than 700 pixels wide
alert("This is not a mobile device.");
}
});
</script>

You can use above script to do show/hide elements depending on the screen size.

Karen, there are a few different ways to do this using some javascript like this: https://jstricks.com/detect-mobile-devices-javascript-jquery/  Let me know if you would like me to put together a demo.

Thanks for the link Michael!

A demo, and example story file would be most appreciated!

Karen

Thanks a lot Michael! Really appreciate your help. And glad to see that this is something we can do with Storyline 2 as well, bonus!

Karen

You're welcome. Please test this on all all intended clients devices, as I did not test it thoroughly.

Will do, Michael. Thanks!

Karen

Hi Amy or Michael Anderson or Coomunity,

The given logic is working but using this value I am executing one more JavaScript, which is not working. 

Purpose of Second Javacript I am using:

This is crossword slide once user Type character(text entry) in first box, cursor automatically moving to next (text entry).

But I want to implement this JavaScript only on Web version not on devices, because on the devices it is not allowing to learner to enter anything in the text entry. so I am trying to implement the device detection script provided by you people. 

Now I just want to execute the script which on the crossword slide but only this course is viewed on the desktop not on the devices.

PFA for Output and story file. Please help on same.

Is there a way to determine what device is being used to view a Rise 360 course?