Hotspots not working

When an object has a Selected state and starts in the Normal state, it will automatically switch to Selected the first time it is clicked. The next click will deselect it, that is, it switch it back to Normal. It will keep toggling between Selected and Normal with subsequent clicks.

In other words, you don't need hotspots or transparent objects on top of the letters. Just use the built-in functionality.

Thanks! Unfortunately in this case I need to have a separate object to click on to trigger the change, as the text boxes for the letters themselves are misaligned and overlapping. I've set up shapes that are aligned directly over the letters so that the triggers should work when the user clicks in a logical place, but they don't seem to be working. 

The trigger order matters. If you move all the "Set state of __ to Normal" triggers so they appear before the "Set state of __ to Selected" triggers, each of the letters will appear as Selected when the user clicks the corresponding rectangle. 

However, both triggers run every time the user clicks the rectangle. So here's what happens:

1st click: 

• Trigger "Set state of __ to Normal if state = Selected" -- Nothing happens, because the letter starts as Normal.
• Trigger "Set state of __ to Selected if state = Normal" -- State changes to Selected.

 2nd click: 

• Trigger "Set state of __ to Normal if state = Selected" -- State changes to Normal, because the letter was selected with the 1st click.
• Trigger "Set state of __ to Selected if state = Normal" -- State immediately changes to back to Selected, because it was just put into the Normal state.

Those state changes happen so fast that you don't even see it go to Normal.

If you still want to control this by clicking extra rectangles, you'd need 2 rectangles per letter, one for each set-state trigger. Plus you'd need triggers to show/hide the rectangles so the the proper one (to select or to deselect) would always be shown when appropriate. But I think that'd get awfully messy.

Personally, I think it'd be easier to just adjust the sizing of the letter text boxes so they won't overlap. Maybe even space them a bit further apart for easier clicking (especially if anyone will be using a mobile device and tapping with their fingertips.

You could also create 2 pictures of each letter you'll need: one with a black letter and one with a designed (i.e., "selected") letter. Crop those pictures to the edge of the letters, so when you insert them next to each other, they won't overlap. For each letter, insert the "normal" picture into Storyline. Then add a Selected state, and change the picture to the designed/selected version. 

• I did that for the letter "d" in the attached file. (FYI: I inserted the letter in PowerPoint, and then pasted it as a picture.) 
• You'd only have to create each letter once. Then copy, paste, and rename those pics as needed to form words. 

here is a solution without hotspots and without invisible rectrangles as buttons

https://360.articulate.com/review/content/ca40bd21-3c34-497f-8220-59fa708af8a3/review

important
 - don't mix text and grafic with different sizes in a button
 - use text color for the selected mode
 -> so you can use the characters as buttons

(I had to change the font in the single char buttons - I have no Mangal Pro)

Important for check correct/incorrect
 - check only for the selected state (check for normal don't work in some cases - it's a known bug)

Here's an easier method that maintains most of what you have. Judy is right, you can save a lot of heartache by using the built-in superpowers of the Selected state.

What you need to do is set the margins of each text box to 0 on each side. (Right click it, select Format Shape then Text box.) While you are there, choose Resize shape, and just to be safe, deselect Wrap text. That keeps the enclosing shapes from overlapping.

As Judy suggested, space the letters.

If you can get that working, every time you click Check, it will show both Correct and Incorrect layers. That is because Selected, (like all the pre-built states) is considered a Normal state. So Normal is a normal state, Selected is a normal state, Visited is a normal state, etc. Jurgen calls it a bug, but I think the truth is that triggers use normal to distinguish built-in states from custom states. Either way, he's right. Don't check for Normal, check for Selected, as in: Is Selected or Is Not Selected.

I like the appearance of the Selected letters, but I doubt I would ever take the time to create a graphic. I'd just use either colored text, or fill the textbox with a pattern, like the extra letter. I spent a LOT of time adjusting the height, width, and location of the graphics to get them to line up with Normal states of the letters. Even so, they may not be right, because I don't have your font.

Save yourself a lot of time when you are creating states by clicking the button to duplicate Normal. That lines everything up, at least to start.

Check out the sample. I have attached the .story version, so you can look in it and see how I did things.

Thanks all! I've remade it using the built-in states with images for the letters and it is working now.