Now that we have this lovely responsive player in Storyline 360, is there a way to to find out what device is being used to view a course so that we can set a variable and adjust some internal controls?
We have some custom buttons that are very small when a course is viewed from a phone, and would like to be able to detect when we need to hide the small version, and show a larger button, easier to touch.
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.
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.
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.
It works perfectly for me. I used a full-screen image in my course, but it doesn't work on mobile. So, I added the same image on SlideMaster and used the code to make it visible when the course is visited on mobile.
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.
13 Replies
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
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/
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
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
Hi Amy,
Thanks so much for sharing! This is super helpful.
Best,
Delaney
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.
Ravindra, did you get this worked out?
Thank you very much Amy,
It works perfectly for me. I used a full-screen image in my course, but it doesn't work on mobile. So, I added the same image on SlideMaster and used the code to make it visible when the course is visited on mobile.
Here you can see it in action;
https://storage.googleapis.com/rscreativework/ELH291/story.html
Is there a way to determine what device is being used to view a Rise 360 course?
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 widealert("This is not a mobile device.");}});</script>You can use above script to do show/hide elements depending on the screen size.