Removing objects if I watch my project on a different device

May 28, 2021

ahmad habhab
By ahmad habhab

Hey Guys,

I am working on an E-Learning project on Storyline 360, there is an object that i want  removed or hidden if i switched device, for example i want a specific icon to be displayed only in Desktop view, but i want this specific icon to be hidden or removed if i viewed the project on a mobile phone or an Ipad etc.

Is there any way it can be done ?

Thank you in advance...

6 Replies
Becca Levan
almost 3 years ago06/02/21 at 2:37 pm (UTC)

Hello Ahmad,

There are many talented folks in this community, and I'm excited to see what ideas are shared to change the course based on which device the learner is using. Here's one idea:

  • On the first slide, ask the learner what device they are using, then branch to different versions of the course based on their response.

Looking forward to hearing what others have to say!

Russell Killips
almost 3 years ago06/02/21 at 3:47 pm (UTC)

Hello ahmad,

Storyline automatically adds in identifiers (classes) depending on the device and orientation.

I wrote some javascript to check for these identifiers (classes).

The javascript updates true/false variables: isDesktop, isPhone, isTablet, isLandscape, isPortrait

Depending on these variables, you can add a trigger to change the state of 'an icon' to hidden or normal.

Here is the javascript that I use:

var player = GetPlayer();

player.SetVar('isDesktop', document.body.classList.contains('view-desktop'));

player.SetVar('isPhone', document.body.classList.contains('view-phone'));

player.SetVar('isTablet', document.body.classList.contains('view-tablet'));

player.SetVar('isLandscape', document.body.classList.contains('is-landscape'));

player.SetVar('isPortrait', document.body.classList.contains('is-portrait'));

ahmad habhab
almost 3 years ago06/04/21 at 2:25 pm (UTC)

Hello Russell,

Thanks for your reply

so now i just post your java script on my project 

and i'll create a variable x (True/False) default true

then ill adjust variable x to be true,  when the timeline starts ( do i have to put a condition ?)

finally i change state an icon to be hidden if this variable is false ( for example, the false scenario is that the user is using a mobile or ipad )

Thanks again for your help...

Regards,

 

Russell Killips
almost 3 years ago06/04/21 at 3:48 pm (UTC)

I usually default my variables false.

The javascript trigger executes on timeline start. I suggest moving this to the master slide so it will run on every slide in your project.

You will only need to reference the isDesktop variable. If it is false, it's on a mobile. If it is true, it's on a desktop.

Then on timeline start for your objects, create triggers to show or hide them.

I have attached a short video and a story file for you to look at.

Sign In to Reply