Changing the color of the StoryLine player DYNAMICALLY with JavaScript

Oct 31, 2017

OWEN HOLT
By OWEN HOLT

In a recent post, a community member wanted to know if they could trigger a color change in the player dynamically when a user performed some action like clicking a button or starting a new course topic. The short answer is "No", StoryLine does not have this functionality. However, that doesn't mean that it can't be done with a little help from some built-in StoryLine functionality and a little JavaScript.

The key is to create some alternative style sheets using StoryLine and save them outside of your published project. Then, after you have added the required JavaScript to point to different style sources, re-publish and drop your files back in.

Watch the video, and hopefully it will all make sense. I've also included the files used in the video.

19 Replies
OWEN HOLT
over 1 year ago10/05/22 at 12:44 pm (UTC)

The reason for this approach is to make it easy for non programmers to change multiple styles within the player by using Storyline to create multiple style sheets. You could just use JavaScript for sure. This is just an alternative method that simplifies the coding. 

Also, this is old enough that all of the jquery coding is no longer valid. All references to jquery style coding would need to use a standard JavaScript alternative to accomplish the step.

 

OWEN HOLT
over 1 year ago10/05/22 at 6:49 pm (UTC)

You are not wrong. The JS solution is just fine. The intent of what I was showing in this thread opens the possibility to change the entire look of the player all at once rather than element by element. 
If all you want to do is change the frame color, nothing more elaborate is needed. 
If you wanted to change colors, fonts, backgrounds, outlines, etc.... then swapping the CSS file on the fly is an easy solution. 
Also, keep in mind, this is, as you said, a VERY old thread.  SAo much has changed with the Articulate products since this was posted. I think this might have been built in Storyline 3 (???) before 360 was even a thing (or at least before I had a license to it).

OWEN HOLT
over 1 year ago10/05/22 at 6:51 pm (UTC)
5 hours ago

Thanks Owen. I haven't tried styling the player with JS only and wasn't sure if using JS alone was a bad idea or not. I think the advantage might be that you don't have to worry about files being overwritten every time you publish, since the JS code is located within Storyline

There are several work arounds to this I've used since. Using an orphaned webobject to create a sort of "assets briefcase" and using a hidden "resources" tab. Either one works and will preserve your files no matter how many times you publish.

shawn mendes
11 months ago06/03/23 at 12:58 pm (UTC)

To change the color of the StoryLine player dynamically using JavaScript, you can follow these general steps:

  1. Identify the element or elements in the StoryLine player that control the color you want to change. This might include elements such as background color, text color, buttons, or any other elements that contribute to the player's appearance.

  2. Access those elements using JavaScript. You can typically do this by selecting them using methods like getElementById, getElementsByClassName, or querySelector.

  3. Apply the desired color to the selected elements. You can do this by modifying the CSS properties of the elements. For example, you can use the style property to set the backgroundColor or color property to the desired color value.

Here's an example of how you could change the background color of the StoryLine player dynamically using JavaScript:

javascriptCopy code
// Select the player element by its ID var player = document.getElementById('player'); // Change the background color player.style.backgroundColor = '#FF0000'; // Replace '#FF0000' with your desired color code

Remember to replace 'player' with the actual ID or class of the element you want to modify, and '#FF0000' with the color code you wish to use.

Keep in mind that this approach assumes you have access to the StoryLine player's HTML and can modify it accordingly. Also, note that modifying latest version 2023 for andriod the appearance of the player dynamically may require additional considerations depending on the specific implementation and structure of the player.

 
Sign In to Reply