Making stylized radio buttons

Working in Storyline...

I am trying to create a stylized radio button series for an exercise - here's the functionality I am trying to achieve

> three choices represented by an icon (picture) and text

> change to a selected state when clicked

> only one picture should be clicked at a time

> When satisfied with answer, learners can click on a button to see the "textbook" answer.  (I know how to make this part work.)

One choice is to use the radio buttons, make the button have no fill, and place it over the picture so when selected, it looks like the picture is in a circle. However, there does not appear to be a way to enlarge the radio buttons so that they cover the picture.

Another possibility is to create an alternate state for the pictures - I can, for example, put a line around the picture that appears when the picture is clicked. However, there does not appear to be a way to toggle the state so that when the learner clicks on the picture again, it goes back to the original state. This option also allows users to actually select more than one of the choices, but I can live with that if they can "turn off" a selection if they change their minds.

I welcome suggestions....

3 Replies
Annie Jean

Hi Catherine,

I was able to produce exactly (I think) what you wanted.

First of all, I have added the native "Selected" state to my images and modified that state with the expected format (for me, it was a glow). With the native state, I was able to activate and deactivate by clicking just the way you wanted it.

Then, I selected my images, right-click and select "Button set". I have used Button set 1 since I don't have others. Button set prevents the learner from activating more than one button at a time.

Hope it helps and it makes sense.

If you need further information don't hesitate to post back.

Have a nice day!

Annie

Annie Jean

Hi Catherine,

I made a sample but noticed something bizarre at the same time.

As long as your buttons are not included in a button set, you can select and de-select a button.

As soon as you create the button set and that you select a button, it cannot be de-selected by clicking on it, only by selecting another button.

Annie