How to make a custom checkbox state that is checked?

Nov 03, 2014

Hello all,

I have the need to have a custom state of a checkbox (call it answered).

Its just like the selected state (its checked) but its a little bolder, and has an outline around it.

I copied the selected state and made the mods I need, but I cannot the actual check box to be checked.  I'm sure its just something small I'm missing...any help would be very much appreciated.




17 Replies
Rebecca Fleisch Cordeiro

Hi Rob,

Interesting. I never tried that before, but just did - in SL1 since I'm not sure which version you're using.

It looks to me like that checkmark won't be copied, even when you duplicate the selected state. I'm sure there's a reason for that. So, you'd have to come up with a workaround.

I have two checkboxes on the attached. With the first, I simply made the border of the box in the selected state black and thicker, in case that might work for you.

With the second, I created a new state called answered. I set the box up again with a black border with a thickness of 3, but I also inserted a checkmark into the box on that state. You'd have to play with the checkmark to get it to look exactly like the default one, but I figured this might at least get you started. Also, I inserted a trigger to change the state of that button to answered when the user clicks it.

Still, perhaps someone else will know how to get that "default checkmark" into a custom state.

Rob Verzera

Thanks Rebecca for the mock up.

I should have specificed this is SL 2.

That was pretty much the same approach I took - I had to insert an image of a checkmark into the custom state.  Its hard for me to believe that we cannot make a custom state of a checkmark and have it be checked.



Rebecca Fleisch Cordeiro

Hmmm ... I'm not a programmer, but somehow it seems to me that the automated checkmark would need to be reserved for the selected state so that SL will know when to automatically turn the checkmark on and off. We still DO have the ability to create our own "checked state", albeit by adding an extra trigger or two. But, I'd love to hear from the horse's mouth why it is that the selected state, when copied, doesn't include the checkmark.

Dorte Lynge Hansen

Hi Dave

Thank you for input :-) In my situation, it is a Multiple Correct question, so the initial state has to be normal. After the user has selected and clicked OK, I want to mark the correct choice with a fill color and keep the users choice (Selected/not selected). I have created 2 new states "Correct-Selected" and "Correct-NotSelected" and I would then like to keep the checkbox selected in the state "Correct-selected" and then show this state, if the user has selected i.e. checkbox1 and the other state if the user has not selected checkbox1.

I would like to keep the possibility to shuffle the answers, so it has to be handled in the states (tried with objects outside the state :-) )

Dave Cox

You can add states, You can also modify the look in the new state. Just set the state to edit, and then modify the fill color to what you want. From there you can set the states however you want with the triggers. You can also check for the currently set states with the trigger logic. I think you are on the right path doing this with states. The states give you a lot of power to perform complex actions in Storyline.

Dave Cox

Oops, my mistake. I forgot that you can't just add a shape with a checked checkbox. Here is my work around.

  1. Set the Selected check box to look the way you want the new Correct check box to look. Right-click the selected check box and select "Save as Picture".
  2. Now set the box back to the appearance you want for it.
  3. Add your new Correct state. Insert the image that you just saved from the selected check box, and align it over the unselected checkbox. You now have a new selected check box that you can use however you want.
Dorte Lynge Hansen

Yes, that's my problem. I tried using graphics, but was just wondering if I was missing a feature somewhere :-) Thank you for your help!

Overall it could be really great, if we could change the Multiple Choice and Multiple Correct checkboxes to our own graphics, so you have the build-in features, but you decide the design :-)

Radosław Kwasek

I have an alternative solution to show right/wrong answers and leave checked answers. It needs some triggers, but works very good. First, You'll need to create a custom state for checkbox and format it as You want e.g. green text for good answer and red text for wrong (You can't format the checkbox as this formatting comes from selected state). Then create variables True/False for each question. On the incorrect layer Add triggers (all when timeline starts, but in provided order)

  1. to adjust variable to True when question state is Selected; False when not Selected (repeat for each question).
  2. to change state for each question to Your new state.
  3. to change state for each question to selected if corresponding variable is true
Rob Verzera

Thanks for the suggestion Radoslaw.  The issue w/ these is that the check box is still active to be checked on the review.  (the user can click the check mark and turn in on and off) The graphics solution was the only way I could come up displaying the correct answer with the checkmark checked and so the user could not change it.  

Peter Moore

That is a great solution.  Thank you Radoslaw.  I didn't think it would work at first because the 'custom' state is set first, followed by the 'selected' state.  I expected the last state that was set - in this case the 'selected' state, would override the formatting of the 'custom' state, but somehow - it doesn't '.  Awesome!!

Rob: I don't know if you found a solution to the issue you had highlighted?  But if there is a way for you to place a Hotspot on the feedback layer(s) over the top of the answer choices - you'll find this blocks them from being interacted with.  However - I don't use the built in review functionality as I always create custom feedback in some I might be suggesting something that is not possible in your use case.  Best of luck if not already solved.

Clinton Otte-Ford

Thanks @Radosław  Kwasek. This works well. As @Peter Moore said below, it doesn't seem like this order would work (due to the 'selected' state overriding the 'custom' state) but it does. 
In some ways, I'd like Storyline to act more logically (or spell out how it's working), but on the other hand this method works, so maybe it should stay as is. Anyway, Thanks, @Radosław Kwasek!