Button States: button shows text box on same layer when clicked

Apr 01, 2024

Ashley Click
By Ashley Click

Greetings:

Could someone please help me? I am sort of new to Storyline and am working on an eLearning project for a client. This needs to be resolved really soon!

I want the following to happen:

  1. when user clicks a specific button, the button will change to  "HOME state" and text will show.

What I did:

  1. Each button has a  "HOME state" which shows a text boxes with content related to the button.
  2. The background of each textbox is white so that it masks the text boxes from the buttons which have already been clicked.
  3. The initial state for each buttons is "normal."

The Problem

  1. For the top row of buttons, all states change to "HOME state" when the box is clicked and the text box shows; however, after the fourth box on the top row, it gets glitchy: 3 of 4 boxes on bottom row remain in the normal state when clicked and the text box does not show.
  2. I don't understand why this is happening  because I have put triggers on all of the buttons so that the state changes to show the "HOME state" when the button is clicked.
  3. I have added an icon to each button and grouped the icon with the button. This has caused glitches before, but I don't know how to fix it.

What kind of help I need:

  1. Please tell me what I can do so that all of the buttons will function properly and change to the "HOME state" with the text box  when the user clicks it.
  2. I want the learner to have to click on all of the buttons before they can go to the next slide.
  3. It would be extra cool if I could just make the text box disappear when the next button was clicked.
  4. How do I group an icon together with a button so that the user will ALWAYS cause the trigger to execute when the button group is clicked.

I have attached the file to this post. Thank you so much for your time!

Best.

Ashley

2 Replies
Sam Hill
1 month ago04/01/24 at 10:10 am (UTC)

First tip, do not add a button to a group. It causes unpredictable behaviour. Something like a button icon, can just be added to the state(s) of a button.

Also, I don't think you need a custom "HOME" state. I think something like the "Selected" state will be better, as it is a standard state, which is always better for accessibility, and can provide a toggle selected state without any triggers. If you add the buttons to a button set, this will also ensure that only one button is selected at a time.

I would also take the text out of the button, and have this on the main timeline, but hidden. You can then add a trigger that will show/hide the text based on the buttons selected state.

Lastly, to enable the Next button, this can be done using the "visited" state of a button. Even if the button does not have a defined visited state, it still has a programmatic one which can be used to determine the state of the next button.

Sign In to Reply