Storyline 360: Quiz Question Responses Shift Slightly on Hover

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!