Forum Discussion

JenniferComp730's avatar
JenniferComp730
Community Member
3 years ago

Hotspots not working

Hi, I'm trying to build an activity where students can click to select and deselect certain letters of a word, but I'm having trouble getting this to work. Each letter has a selected and a normal ...
storyline 360
JudyNollet's avatar
JudyNollet
Super Hero
3 years ago

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. 
Related Content