Forum Discussion

karenforkish's avatar
karenforkish
Community Member
8 years ago

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

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 contr...
storyline 360
AmandaLewis's avatar
AmandaLewis
Community Member
8 years ago

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  

  • DelaneyCollyer's avatar
    DelaneyCollyer
    Community Member
    7 years ago

    Hi Amy,

    Thanks so much for sharing! This is super helpful.

    Best,

    Delaney

  • RidvanSaglam's avatar
    RidvanSaglam
    Community Member
    5 years ago

    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

Related Content