Adjusting colors and images using variables
Dec 05, 2021
I am trying to customize my courses by changing colors and images based on variables. I am passing the color codes and image names into the course and using javascript to transfer those pieces of information to storyline variables.
I cannot figure out how to change the colors of text or shapes to the values of the variables. Maybe this is not possible. I was hoping that I would be able to change the default palette using javascript so that the new colors would be translated throughout the course.
As for the image, I tried inserting a placeholder image with the intent of using javascript to swap it out for the image that I really want. In this case, all of the alternate images would be in the same directory on the server so all I would need to do is change the file name.
Is any of this possible? I've seen other threads where they suggest using states but that won't work. States would allow a certain number of preset color options, but would not allow for changing the color specifically to a client's brand.
Thank you in advance for your help.
6 Replies
Hey Douglas,
As far as modifying elements through the DOM using Javascript, Storyline makes it a bit of a pain. Math Notermans came up with a pretty ingenious solution for identifying elements using accessibility labels. Using this method I managed to get it sort of working...
Slide view:
Javascript that runs on timeline start:
Published view:
I don't know your situation, but generally this kind of stuff is easier to achieve and maintain using master slides and/or theme colours.
Ben,
This is very helpful. You are correct, I would like to do this via master slides and theme colors. Doing so will allow me to quickly change all colors at once and change the image in one spot. It would not be practical to execute javascript on every page to change the colors and images to match brand color scheme. Does the method you outlined work to update the color theme and images on the master slide so that the script only has to be executed once?
Of course, it just occurred to me that if you use the accessibility text for this purpose, then you are no longer using it to make your courses accessible.
I have played around with your code and see that it will need to be executed on every slide for the changes to be made. I guess that makes sense since even though the colors and images are on the master slide, I just can't update the master slide after the course was published.
Hi Ben,
This is pretty ingenious. How did you find the commands to recolor a shape, for example?
Hi, Kamal.
Ben might not be subscribed to this discussion, but you're welcome to contact them directly through their profile by clicking on their name and selecting Contact Me.