Forum Discussion

OwenHolt's avatar
OwenHolt
Super Hero
8 years ago

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.

    • OwenHolt's avatar
      OwenHolt
      Super Hero

      I'm glad you found it so. Interested in hearing how you and others might use this?

      • Carlene's avatar
        Carlene
        Community Member

        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?

    • OwenHolt's avatar
      OwenHolt
      Super Hero

      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.

       

      • JohnBowyer-Smyt's avatar
        JohnBowyer-Smyt
        Community Member

        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";

    • OwenHolt's avatar
      OwenHolt
      Super Hero

      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

    • OwenHolt's avatar
      OwenHolt
      Super Hero

      Working on quarter end deadlines but... connect with me on LinkedIn and let's see if this will work for your use case.

  • DevanAbia's avatar
    DevanAbia
    Community Member

    My question is- which file to I need to edit to change the table header in the quiz results of SL. 

  • shawnmendes's avatar
    shawnmendes
    Community Member

    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.