Javascript to Detect if Launched in Mobile/Tablet?
Sep 21, 2017
Hello Heroes!
Every once in a while I need to add a slide pointing out a feature of the player, such as Resources or the Menu. Since these are displayed differently on laptop/desktop and on mobile, the instructions for how to find these features differs based on where the course was launched.
I usually set up a pre-instructions slide asking if the user is viewing on desktop/laptop or on mobile/tablet. They click one of the two options and a new layer displays the appropriate instructions. This setup generally works fine, but it does require input from the user.
Is there a way with Javascript to detect whether the course is currently launched in laptop/desktop or on mobile? If so, I could load the value into a variable and then have the course automatically show the appropriate instructions based on that value, rather than relying on user input. It's obviously not necessary, but I think it would make the course feel sleeker and smarter.
Has anyone ever written some JS code to do this detection? I know that Storyline already detects the mobile vs laptop/desktop distinction to determine whether to launch the Mobile player (done in the story.html file), so I would assume there's a way to tap into that functionality, but my JS knowledge is far too limited.
Thank you!
Amy
11 Replies
Searching these forums will yield a few peoples' suggested scripts. Note - scripting is unavailable when content is viewed on mobile via Articulate's Mobile Player. A tad bit ironic...
Thanks Brian. Do you have any links to specific threads? I spent a good half hour looking around for relevant information before I posted this and couldn't find anything that seemed relevant.
For your second point, do you mean that javascript won't work if viewing in the Articulate Mobile app, or do you mean it's unavailable on any mobile device's browser (i.e. Safari for iOS)?
Amy, try out the project file I posted in this thread: https://community.articulate.com/discussions/articulate-storyline/is-there-a-way-to-know-what-device-is-being-used-to-view-a-course
Thanks for the link and the demo file, Michael! Maybe you can help me out - I'm not actually seeing where in your file you're referencing the JS code, and I can't figure out what the Web Object is doing (I suspect one is influencing the other). Can you provide a little more detail about what you did?
Yes, sorry, I'm usually short on description but happy to elaborate when asked. When you publish this project, you will see two files in the web object folder. One is the index.html which simply contains:
<script type="text/javascript" src="mdetect.min.js"></script><script type="text/javascript">var player = parent.GetPlayer();player.SetVar("clientIsPhone",MobileEsp.DetectTierIphone());</script>The index file loads the mdetect.min.js file which does all the checking of the client device, then just sets a Storyline variable with the result from the mdetect file. The mdetect file is the second file in the web object folder, but you could just as easily leave it out and host it on a website or CDN instead.
As Brian mentioned, none of this will work if the user is viewing through AMP, as javascript does not work in AMP, but it shouldn't be too hard to test for that case too. Let me know if you need more help.
YES! Michael, thank you for pointing those out.
To avoid using a web object I transferred the code into an 'Execute JavaScript' trigger directly on the slide. It's working perfectly on Articulate Review via my iPhone, my Android tablet, and my laptop. Now that I have a True/False variable holding the information about the device, I can set any number of other triggers 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 I put into the Execute JavaScript when timeline starts trigger in case anyone can't open the .story file. Apologies that the copy/pasted code is very poorly formatted (not at all formatted).
Here's the demo link: https://360.articulate.com/review/content/ea0a0258-3ffc-4fae-a89d-6797d07f4af5/review
Yes, that's probably much easier to work with there, good idea. I'm not sure why I originally used a web object... Thanks for posting the project back here and in the other thread, hopefully others will also find that useful. I'm happy to hear it's all working for you.
There are more device properties you can check on, see them here: http://blog.mobileesp.com/?page_id=60
I'm not sure if the MobileESP project is still in development, so it might not work as well as newer devices come on the market. You will need to test and see.
Michael and Amy - Thank you! I needed a course to launch a different link based upon whether the user was on mobile or desktop, and this worked perfectly.
I'm glad to hear that Travis, thanks for the feedback.
Can somebody help me for detecting a screen, for example, if somebody viewing the project in the portrait mode of mobile then a message/instruction should appear to watch the module in the landscape mode. And once orientation change message should be disappeared.
Thanks for sharing these. Worked perfectly.
This discussion is closed. You can start a new discussion or contact Articulate Support.