Button color changes

ActivePresenter
1

Dear Support,

I have a 5 buttons on a slide. Clicking a button changes the button color to faint blue and takes me to the next expected slide. Now when I click “Back” on this slide, I need the button color on the previous slide to remain faint blue to indicate that the learner has already seen this content.

This is super urgent. How do I achieve this?

Thanks for your guidance.

2

Hi,

  1. Create a Boolean variable for each button (e.g., btn1_visited, btn2_visited).
  2. When a button is clicked:
  • Set its variable to True.
  • Change the button’s state to Visited (where the color is faint blue).
  1. On the previous slide (when user goes back):
  • Add an On Load action:
    If btn1_visited == True, change the button state to Visited.
  1. Repeat for all buttons.

This way, the color stays faint blue after navigating back.

3

Tried all these steps already but for some reason they do not work as expected. Am I missing something?

4

I’ve created a sample project where this solution works correctly and attached it for your reference. Please review the project and check the actions to see how it’s implemented. Let me know if you have any questions after testing it.

Best Regards,

Demo.approj (220 KB)

5

Thanks for sharing the sample .approj file. I tried using the Adjust variable option the way its there in the demo.approj but unfortunately it still does not work. The only difference in my case, is I have used the Go To Slide as against Go Forward used in this Demo.approj file. Would that create this issue for me?

Also, what is the possible reason for the color changing back again to original when I go back to the previous slide and hover over the button?

6

I’ve recreated the demo and also checked the hover issue you mentioned, and it’s working fine on my end.

The reason why the color changes back when you return to the previous slide and hover over the button is usually because the button states are reloaded. When you go back, the default state becomes active again. To prevent this, make sure the button’s state is controlled through a variable instead of relying only on default states.

You can also check the video I shared, where you’ll see the recreated demo and how the hover issue was resolved.

Best Regards

Demo.approj (264 KB)

7

Thanks a lot this worked. Next, I have approximately 9 images in a tree format on a slide. I would want to view each of these images in a bigger size after clicking. Also, when I click these images, the other images should not be visible. Can you please help achieve this?

8

Hi @Aditya_Bhide,

You can achieve this using the Change State and Hide Object actions in ActivePresenter:

  1. Add another state to the image.
    image
    image875×580 51 KB
  2. In that new state, resize the image to make it larger.
  3. Then use the Change Object State action to switch between the image sizes and the Hide Object action if you want to hide/show the image based on user interaction.
    image
    image410×128 2.01 KB

Please find the attached file for your reference.
change_state.approj (1.6 MB)

9

I see that there are two images present but unable to make out how have they been added or what have they been named? Can you please help elaborate? In my case I have approximately 9 images on a single slide. Is the same activity doable when I have 9 images on a single slide?

10

Additionally, is there a way we can create a collapsible TOC? Also, can I lock a specific section of the TOC and make it visible only when the learner completes the previous sections?

11

Yes, these two images demonstrate an example where clicking on Image_9 changes its object state and simultaneously hides Image_6.
To achieve this, you need to create an additional state for the image using the Object State feature. You can follow this tutorial for guidance:

Then, follow the steps I mentioned earlier to set it up.

This example shows how to handle clicking on one object. If you have 9 objects, you will need to add more event-action pairs to show or hide them accordingly. For more details, see:

Regarding your second question about the Table of Contents (TOC) in ActivePresenter, you can use the default TOC and configure the Navigation option in Player Settings (Export tab > Player Settings) to None or Backward Only as needed.

image
image532×596 14.3 KB

Hope this helps!