Storyline 360: Quiz Question Responses Shift Slightly on Hover

We are experiencing the same issue when we run the output on our lms. Workarounds are very time consuming, I hope this can be solved. Only the hover states causes this for us 

This is still an issue at the moment, my questions shift all over the place when they are hovered over. Even in a completely new (blank) file. Please address this issue as it is seriously distracting. I don't need to add a file because this issue can be reproduced with any .storyline file. Just create a graded question and voilà the issue appears. 

Hi I am experiencing the same with buttons, particularly when viewed in REview360. A hover causes a slight growth of the button and text although there is absolutely nothing in SL360 I can see to cause this.  Is there a back end setting which causes hover states to demand more attention for the user?

Hello Sandy,

Thanks for reaching out! It sounds like you see a button with text increasing in size when hovered over after publishing in Review. 

Without taking a peek at the button properties, It's hard to pinpoint what would cause this. Could you share your file with us here, or if you're more comfortable, connect with a support engineer here to share it privately. We're happy to take a look and help troubleshoot!

Adding my two cents here as well - since I want to receive updates about this. The shifting text for hover and selected states is a definite issue. Overall, it makes quizzes feel "sloppy" -  like a developer didn't take the time to perfect text box sizing, letting, or whatever. I often delete states and recreate them manually when this occurs, but that only solves the issue sometimes. I'm spending too much time on these fixes and still, most of the time, I'm settling for "good enough." As someone mentioned above, there's no need to upload a file since this is a well-documented issue that has persisted for a long time.

Thank you for any insights you can provide on the status of this update.

The issue seems to be that the shifting happens on selected because the radio button's size changes ever-so-slightly, and that's not something we can control, as far as I can tell. What we've resorted to, which is time consuming, is create text boxes that lay over top of the automatically created ones. We then white-out the original text that's under our new text. It removes the selected state problem, but it's not great. 

I do have a ticket in with this, and the engineer is always helpful, but they seem to think it's an issue with the modern player, and we've had this issue well before we started using the modern player.

We were using the Classic player at 100% and did not have this issue.  We recently moved to the Modern player and this issue is persistent through everything we are building.  It appears to be related to what size the browser window is and how Storyline displays states in response.  Sometimes we don’t get the jiggle and sometimes we do.

I see that you keep referring people to support engineers. If there is a solution/s to this issue, I wish you would post it/them and direct us to it.

This is extremely annoying.

Also experiencing this issue. Please fix ASAP! Can't use the classic player, so not an option. The Modern player comes default with Storyline 360 and we paid for that, so please fix it.

Hi everyone! 

We just released another update for Storyline 360, and included are some new fixes and features you'll see in the release notes here. Just launch the Articulate 360 desktop app on your computer and click the Update button for each application. Details here.

While several bugs are referenced in this discussion, I wanted to point out a related one that some of you may be experiencing. We fixed the issue where:

A Hover state is causing text inside objects to shift whenever an object is hovered on when the player is set to "Scale player to fit browser."

I don't have any updates to share on the others mentioned, but we'll be sure to share any news here as well!

Overview

Our team has been struggling with this issue for a while now. We have been doing a text overlay on top of where the text of the radio buttons are, then getting rid of the text in the radio buttons themselves by either blending them into the background or simply keeping the shape of the hot zone of the button, and deleting the text. This solution, although it does work well, is rather kludgy and adds to the work load. And it also might make maintenance a hassle down the road.

Dreaded Technical Details

The radio button images change shape in the different states. The Down state and the Selected state are slightly larger than the Normal state. Since HTML flows from left-to-right, top-to-bottom, whatever changes on the left will affect what gets drawn to the right of it. So when a radio button changes state from (for example) Normal to Down, the graphic in the state changes from 20 pixels wide to 22 pixels, and shoves the text over to the right and down one pixel.

For those of you that have worked in Flash, you may know about a thing called a registration point. That is the point of reference for a button or a graphic where things proceed from, or to put it another way) grow from. The "registration point" in Storyline buttons is always the top-left corner of a button, so when the graphic associated with the state of the button changes, it changes everything downstream.

Articulate attempts to solve this issue by making the default vertical alignment of a radio button to Middle. This attempts to allow the states of the button to stay relatively steady, with no movement upon clicking it. But they precede from a false premise: that it's "registration point" is the center of the radio button's graphic, rather than the top-left.

A Solution

I found that if you change the default vertical alignment of the radio button to Top instead of Middle, this shifting between states goes away.

I also make sure my radio button text follows this general guideline with a 16px font size (which we are using as a default size):

• a 1-line radio button text string should be around 55 pixels high
• a 2-line radio button text string should be 80 pixels high
• a 3-line radio button text string should be around 105 pixels high
• a 4-line radio button text string - if they need that much text on a button, they should rethink their life choices.

If these buttons are vertically aligned on the slide, they need to be well-separated - not on top of one another, in other words. Just keeping them apart a little bit helps with the screen redraw issue.

Directions

Start by right-clicking on the radio button and go to:

Format Shape >> Text Box >> Text >> Vertical Alignment

and select “Top”.

You may also need to adjust the top or bottom margins in order to get the text vertically centered to the radio button - especially you have two- or three-line answers. Add margins by going here:

Format Shape >> Text Box >> Margins

There is a Top and Bottom margin setting that you can play with to center the text to the radio button. But as long as the height of the buttons follow the size recommendations stated above, you shouldn't have to tweak these much.

Also, be advised that Storyline sometimes changes the height and width of the states of the radio buttons for unknown reasons. To check this, right-click on the radio button and go to:

Size and Position >>

And check each state of the button to be sure width and height for all states are the same.

HTH!