state change based on variable not working in html5

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
Ashley Terwilliger-Pollard

Hi Michael,

What browser are you using to view the HTML5 content? The only fully supported browsers are Google Chrome, Safari and Mobile Safari.  Additionally, is the state being changed based on the conditions of clicking the button or is it being changed based on the variable changed?

 Are you able to share your .story file with us here to test or if you'd prefer to share it privately you can send it along here. 

Ashley Terwilliger-Pollard

Hi Michael,

I see that Regil shared the following information: 

We found that an Execute JavaScript trigger on the Slide Master was causing the state of the battery image to not change. 

This is because if you've added triggers to the slide master or feedback master in your Storyline project, you may find that they don't work as expected in HTML5 output. Please review the following article for more information: 

As a workaround I moved the Execute JavaScript trigger to the slide and it appears to be working. 

Tyler Balding

Hi! I am having this same problem. There are no triggers on the master slide. 

On slide 1.6, after you have visited each activity, the layer that allows you to move forward to the next slide doesn't pop up in HTML5, but it does in the regular published file. 

Any ideas what could be the problem?

File Attached.

Richard Schmidt

We are experiencing a similar issue with our HTML-5 output.  In our case, we have a custom CC button that toggles a variable.  Then we have a Layer that has a trigger to Hide or show this layer when selected.  This works great in FLASH, but whenever we try the functionality in HTML-5, it does nothing.  It appears from some of the blogs that there may be an issue with Storyline working properly in HTML5.  

Can anyone shed some light on this for me so that we can fix or find a workaround?



David Hammond

Wondering if there is any progress on this issue?  I found this thread as I am having the same problem with a course.  I am using variables to track course progression and then layers on a final slide to show check marks for the components viewed.  Works great in FLASH but no functionality in html5.

Ali Goulet

Hi David- Thanks for sharing your experience here. I have no new updates to share at this time. Since you've commented on this thread, however, you're now subscribed to it and will receive notifications of updates when we do have more information to share.

Just to verify that this is definitely issue you're encountering, would you be able to share you're project file here so we can check it out? You can add it as an attachment right to a comment in this thread. Thanks!

Ali Goulet

Hi Chelsea- Thanks for sharing your file here, very cool idea having users choose the colors for the zones by the way! I had fun testing it out. :)

I published your file for web and uploaded it to tempshare to test it in a web environment, I'm not able to see a difference in behavior when viewing in HTML5. Take a peek at it here and let me know if you're still seeing any unwanted behavior. 

If that functions as desired, I'de like to know what environment you're publishing for and how you're testing the published output. You'll want to make sure that you're uploading the published output into the environment for which it's intended, otherwise you may encounter security restrictions from the computer, web browser, Flash Player, and network that'll cause various features of your content to fail. 

Ali Goulet

Hi Alan- Thanks so much for helping out here. I republished the course for TinCan and uploaded it to SCORM Cloud to test it in an LMS environment. I'm still not seeing any difference in behavior viewing in HTML5, check out the course here and let me know if I've missed something. What LMS environment are you viewing the content in?

alan saunders

Hmmm, that interaction worked fine for me via SCORM Cloud! My organization uses Absorb LMS.

I also noticed that when testing the story_html5.html file directly off the computer, the states don't function properly. Is there any reason for that to happen? Is that file not a good indication of how the HTML5 output will function?

Ali Goulet

Hi Alan, Thanks for testing that out- I thought maybe I had overlooked something! Wouldn't be the first time ;) To answer your question- if you view an Articulate Storyline course on your local hard drive, you'll encounter security restrictions from the computer, web browser, Flash Player, and network that'll cause various features of your content to fail. It's always recommended to upload the published output into the environment for which it's intended to properly test it. 

Ali Goulet

Hi again Chelsea-  I was able to reproduce what you're seeing when viewed in Chrome with HTML5 disabled- the states do not hold. This doesn't appear to happen when viewing the HTML5 version in mobile Safari on an iPad, however. I'm going to go ahead and update our QA report to reflect these findings. Thanks for your input here! Since you're subscribed to this thread, you'll receive notifications of any updates.