Custom multiple choice design in Storyline 3

Feb 08, 2021

Hello,

I have to build a quiz according to a specific design. For the multiple choice questions, I first tried Multiple Choice (Graded Question) because that seems obvious, but I ran into some limitations realizing the visual design.

I then tried to recreate the multiple choice questions using Pick One (Free Form), which allowed me to recreate the design pixel perfectly, by putting elements in a set of states, rather than on the main timeline.

However, the way it is currently set up, I need to define the answer texts in the Slide View, rather than in the Form View, making it harder to manage. What’s worse, is that I need to copy said text to the different states (two of which are visually identical, being Hover and Active).

Text changes are bound to happen in this project, in which case I cannot just go to a Question Bank, apply the changes there, and be done with it. Instead, I have to find the relevant question in the Slide View, and adjust all its three states accordingly. This feels inefficient, error-prone, and frankly a bit silly.

I hope there is a smarter way to go about this, without making concessions to the visual appearance. Could somebody please help me out with this?

I included a screenshot of the visual design, as well as a demo Story which contains the implementation I described. If you’re having trouble selecting the text in a state, that’s because there’s a partially transparent image on top of it.

Thanks in advance.

demo-mc-design.story
screenshot-mc-design.png

3 Replies

Judy Nollet
Hero

3 years ago02/09/21 at 3:33 pm (UTC)

Hi, Alexander,

You can use standard Multiple-Choice question slide, which will allow you to edit text in Form View.

To get the design you want, adjust the states of the radio buttons. You can add objects to those states, and adjust them to be behind or in front of the main parts of the radio button.

For an example, see radio button B in the attached file. I didn't take the time to completely re-create your design, but this does show how it can be done.

I deleted the Down and Disabled states in button B, because those are really needed in a question slide. So that just makes less to fuss with.
I suggest you set up one question slide to use as a template. Then copy and paste it as needed to create your quiz.
You'll have to re-adjust states whenever there's a response that doesn't fit within the template.

demo-mc-design_alt.story

Alexander Dekker
Author

3 years ago02/10/21 at 11:57 am (UTC)

Hi Judy,

Thank you for your reply and demo. That looks awfully close to our design, so I might be able to pull it off with Multiple Choice after all. I will report back to this thread once I succeed to make it pixel perfect, or when I run into something. Thanks again!

3 years ago02/10/21 at 2:04 pm (UTC)

Hi again, Alexander,

I didn't take the time to match your design completely. I copied your gradient rectangle, but I didn't add the gradient outlines. However, I'm sure you can get it set up to match your original.

BTW, here's a quick tip: Make any background object(s) slightly longer than the main rectangle that contains the radio button and its text. Doing that will make it easier to select the background rectangle when editing states.