Storyline tips and tricks

Changing slide background colour using Javascript and publish for HTML5

Using JavaScript to change BG colour

At the Omniplex DemoFest event (Feb 2016) I was showing some tips and tricks you can use when preparing a Storyline template at the beginning of a project. One thing you many of you made a note of was the ability in Storyline to change the web page background colour using a very simple single line of JavaScript.
Changing the colour of the slide background on a slide by slide basis can be useful at times, especially to give emphasis to a particular slide, for example a topic header slide or the start of a quiz.
On the Articulate Community site there is a page that provides details of JavaScript best practices and examples. But I found that the code provided ( document.bgColor = “#990000”; ) did NOT work on the HTML5 published output.

However, code that changes the style, like this, does work:
document.body.style.backgroundColor = ‘#ffffff’;

All that is required to change the colour of a slide background is to setup an ‘Execute JavaScript’ trigger to run when the slide timeline starts. Note the colour change will be fixed until you change it again using another ‘Execute JavaScript’ trigger. (I also found that running the JavaScript ‘When the timeline ends’ did not work.)
Here is a example I created, so you can see the code working:

Demo