Forum Discussion
Changing the color of the StoryLine player DYNAMICALLY with JavaScript
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.
Thanks Owen!
No problem!
Thanks Owen this is really useful!
I'm glad you found it so. Interested in hearing how you and others might use this?
Id like to see If i can track down other css in the html 5 files and create a toggle button for not just the player but also the content. Creating a normal but also a more accessible high contrast version of each storyline module.
I dont know if it's possible though.
I know this is an old thread, but was wondering if there is a reason why this can be done just by using JavaScript. In other words, changing the colours using Javascript by itself. Instead of changing the link to the CSS file using Javascript?
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.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
Correct me if I am wrong, but I think the JS-only solution doesn't require anything complicated. The following seems to style the player background color:
document.getElementById("frame").style.backgroundColor = "red";
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).
Something I would like to do is change the "CC" button to the French equivalent "STC". The JS is proving a little complicated because the button keeps getting updated back to CC. I'm wondering if you have any suggestions for this
Working on quarter end deadlines but... connect with me on LinkedIn and let's see if this will work for your use case.
My question is- which file to I need to edit to change the table header in the quiz results of SL.
To change the color of the StoryLine player dynamically using JavaScript, you can follow these general steps:
-
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.
-
Access those elements using JavaScript. You can typically do this by selecting them using methods like
getElementById,getElementsByClassName, orquerySelector. -
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
styleproperty to set thebackgroundColororcolorproperty 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 codeRemember 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.
-
Can this solution work for the modern player as well?
Yes, JS works in the current version and with the modern player. Here is a link on how to find elements in the DOM using Chrome:
https://developer.chrome.com/docs/devtools/domAnd a tutorial on selecting using JS:
https://www.youtube.com/watch?v=W3EK4MlZW4g
