How to Change Text Box Color Using JavaScript in Articulate Storyline 360

• Insert a text box onto your slide canvas.
• Right-click the text box and select Accessibility (or open the Alt Text properties).
• Ensure the alternative text checkbox is marked and enter text as the alternative text string.
• Close the panel. Storyline will render this value as the data-acc-text attribute in the HTML5 DOM.

• Insert a shape or button component to serve as the trigger object.
• Open the Triggers panel and select Create a new trigger.
• Set the action parameters - Action: Execute JavaScript, When: User clicks, Object: Button or shape name.
• Click the JavaScript link in the Trigger Wizard to open the code editor.

Paste the following code in the JavaScript Editor panel:

const texts = document.querySelectorAll('[data-acc-text="text"]');
texts.forEach(text => {
  text.style.backgroundColor = '#175FAD'; // Sets text box background color
  const txt = text.querySelector('text');
  if (txt) {
    txt.style.fill = '#ffffff'; // Sets font fill color
  }
});

Paste the following code in the JavaScript Editor panel:

const texts = document.querySelectorAll('[data-acc-text="text"]');
texts.forEach(text => {
  const txt = text.querySelector('text');
  if (txt) {
    txt.style.fill = '#C0504D'; // Sets font fill color
  }
});

Save your trigger setup and launch Preview or publish the project to HTML5 to test the interactive color transformation upon clicking the target button.