state change based on variable not working in html5

Nov 01, 2013

I have a graphic that has multiple states. I change the state of this graphic every time a button is selected. In the Flash publish, this process works fine. If I view it on an iPad or in Google Chrome, The graphic doesn't change states even though I know that the variable has been changed. Anyone else experience this issue?

50 Replies
Elena Urbanova

Hi Chelsea,

I think the problem might be in how different browsers and outputs (flash, html5) handle the mouse over - specifically the "Restore on mouse leave" part. It seems, that in html5 the original state is Normal/grey. On mouse over it changes, then you click - state changes. It should change permanently. But than you leave the object, so the object comes back to original state, that was the one you entered with the mouse = normal/grey.

Since there is no mouse leave trigger, that you could attach anything you want to, I would recommend using layers in this specific case.

Ali Goulet

Hey Nora! Thanks so much for adding your voice to the discussion here. You're welcome to attach your project file here in the thread and I'd be more than happy to take a look and add it to our report for this issue. Also, since you've replied here you're now subscribed to the thread and will receive notifications of any updates just as soon as they're available. Thanks again! 

Leslie McKerchie

Hello Lucy - Thanks for chiming in. It looks like there may be a couple of reports here. The original question was resolved based on how the file was set up. We have an issue we are looking into related to the trigger to show a layer not working in HTML5. 

Would you be able to share your .story file so that we could take a look and understand the issue you are experiencing?

Alyssa Gomez

Hi again, and thanks for clarifying that. Now I understand your set-up. 

I published your file and uploaded it to Tempshare. It appears to be working normally there. Can you test this link and let me know how it behaves on your end? 

Keep in mind that Google Chrome is the only browser supported for HTML5. If you want to test in other supported browsers for Flash, be sure Flash is enabled. 

Suvidha kadulkar

Hi, I am also facing the same issue in HTML 5 output in chrome browser. Image is having the different states. I want to show the image in visited state when user click on that image and see the layer. It's like Click and reveal template. Slide had two images  having states like normal, hover, visited and disabled. When user click first image it will show the layer where state for the image is set as disabled. Same for another image. But when I publish the course to view in HTML5 output in chrome browser, It shows hover state instead of visited. On mouse hovering it shows visited state. 

 I checked the settings in slide layer properties and 'Hide objects on base layer' is unchecked. Kindly please can you tell if this is stiil bug in software or if there is any solution to show correct state i.e. visited.


Rose Binder

I am having a similar issue with a course where the state change is not visible when the image is clicked using a mobile device. (It does work otherwise.) I have two instances in a course where I have a similar set up; the learner clicks the image and the state should change. In first instance, when the images are clicked the corresponding layer displays but the state change does not occur on a mobile device. I know the state change is being triggered because I have a trigger to display the Next button when all of the images are selected. The second instance of this DOES work. When the learner clicks the image the corresponding content displays in a lightbox and the state change of the image is visible.

I am not sure if this advances the discussion but I thought it might be helpful to share my experience. Since the learner can successfully navigate through my course, it is not a show stopper but I would prefer that the state change be visible to the learner. Any updates on resolution of this issue would be helpful. Thanks!


Rose Binder

Hi Alyssa,

I am currently using Storyline 2.  Slide 2.2 is the one that is having an issue with the state change being visible. It does detect the state change because it does show the Next button when all of the items have been selected. Slide 3.1 opens lighbox slides and successfully changes states. 

Thanks for taking a look!

Alyssa Gomez

Hi Rose, 

Thanks so much for sharing your file with me. I saw the same problem in the HTML5 output--the "Selected" state did not appear on slide 2.2. 

I did notice that you are using "Selected" on slide 2.2 and "Visited" on slide 3.1. However, that really shouldn't make a difference. 

I'd like to share this with our support engineers to take a closer look. Once they test your file, they'll reach out via email to let you know what they found!

This discussion is closed. You can start a new discussion or contact Articulate Support.