HTML5 Button Issue

Mar 05, 2015

Alicia Benben
By Alicia Benben

My project manager wants to convert a HTML course to HTML5 for use on tablets. I have published the course to allow for the Articulate iPad app and that created minimal functionality issues but when I when I just did HTML5 and viewed it on my iPad in Safari and Google Chrome I was meet with more difficulty. I have reviewed some articles and troubleshooting concerning HTML to HTML5 output, but am unsure why my buttons and change of state triggers are not registering. I have attached a sample file of what my first few slides consist on. When viewing on my iPad in a browser, I couldn't move past the first slide. I have a layer that appears alerting a user when they have not interacted with all the buttons. Once the buttons are visited, that layer is hidden and the next button goes from disabled to normal. This works fine in HTML and on the Articulate app but with HTML5 that layer keeps appearing even when I have visited all the buttons. Is there anything outright that I am using that I need to avoid when publishing to HTML5?

3 Replies
James Morris
9 years ago03/09/15 at 7:37 pm (UTC)

Hi Alicia,

 HTML5 does not work well with the glow effect from storyline. Hopefully it will be fixed in the future.

Regarding your button that doesn't work. Storyline had an issue where buttons in the disabled state would not function. An update was released here that fixed the issue. Make sure you have the latest version for storyline 1. The update was released in update 3, but now I think the latest is 8.

https://www.articulate.com/products/storyline-update.php

 

 

James Morris
9 years ago03/10/15 at 5:21 pm (UTC)

There still must be an issue with the disabled state.  I played around with it this morning a bit and uploaded the attachment to this post. Here is a basic overview of what was done, but take a look at the actual file, I might have missed something in the description below.

First slide:

  • Switched each button to a "normal state" instead of disabled state on load
  • Removed many unnecessary rules / triggers
  • Removed the rectangle over the next button.
  • Created a rule on the next button (normal state) to jump to next slide if each button is visited, and....
  • Created a rule on the next button that displayed a popup error (layer) if user tried to proceed without visiting

Second slide

  • Removed hover glow, HTML5 doesn't like hover
    • Note: on the "Select One" freeform, storyline automatically will create a "Selected" state that creates a glow. You must manually edit the state to remove it.
  • Created a red border to the buttons when mouse is hovering
  • Removed submit button and created the submit interaction rule to each button individually, so user gets immediate feedback when clicking buttons

Last slide

  • Similar to slide 1, removed triggers and removed disabled states.
  • Put the info box on the main layer, removed the unnecessary layer.
  • Info box initial state to hidden
  • Made rule on next box to only proceed is the info box state is normal
  • Made rule on next box to display error if info box is hidden.

I hope that helps, I attached the document so you can take a look at it.

Let me know if it works for you.

 

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