Articulate Storyline 360 is one of the most popular tools for creating interactive eLearning content. While it’s built-in text formatting options are powerful, there are times when you need more customization, such as applying multiple colors to different words or phrases dynamically. With a little JavaScript, you can transform plain text into engaging, color-rich content that captures learners’ attention.
Click Preview to watch how to apply multiple text colors in Articulate Storyline 360 using JavaScript.
In this article, we will show you step by step how to apply multiple text colors in Storyline 360 using JavaScript, a simple solution to make your courses more visually appealing and interactive.
What is Articulate Storyline?
Articulate Storyline is one of the most popular eLearning authoring tools used to create interactive online courses, training modules and assessments. It’s widely used by instructional designers, educators and corporate trainers because it combines ease of use with powerful features.
Think of it like PowerPoint on steroids, you can design slides, add multimedia and then take it further with animations, triggers, branching scenarios and quizzes.
Key Features of Articulate Storyline
1. Slide-Based Authoring: Build courses just like creating slides in PowerPoint.
2. Triggers & States: Add interactivity with “if this, then that” logic.
3. Quizzes & Assessments: Create graded or ungraded quizzes with built-in templates.
4. Variables: Personalize learning by storing learner input or tracking progress.
5. Screen Recording: Record software simulations or step-by-step tutorials.
6. Responsive Player: Courses automatically adjust to desktop, tablet and mobile screens.
7. SCORM, xAPI and AICC Support: Publish courses that work in most LMS platforms.
8. JavaScript Integration: Extend functionality (like multicolored text, custom interactions, or dynamic data).
Why Use JavaScript for Text Styling in Storyline?
Storyline’s built-in text editor lets you format content, but it doesn’t provide much flexibility for dynamically updating colors through triggers or user interaction. JavaScript offers:
✔ Dynamic styling: Change text colors based on user actions.
✔ Custom control: Highlight specific keywords, phrases, or learner responses.
✔ Enhanced interactivity: Make your slides stand out with unique designs.
Step-by-Step Guide: Applying Multiple Text Colors
Follow these steps to implement custom text color changes in Storyline 360.
1. Set-up Your Project
✔ Open your project in Articulate Storyline 360.
✔ On your desired slide, add a shape that will serve as a button.
✔ Style and position it to fit your design.
✔ Rename it – for example, “Change Font Color”.
2. Create a JavaScript Trigger
✔ Open the Triggers panel.
✔ Add a new trigger:
- Action: Execute JavaScript
- When: User clicks
- Object: Change Font Color button
This ensures your JavaScript code runs whenever the learner clicks the button.
3. Add the JavaScript Code
Now it’s time to write the script. Open the JavaScript editor and paste this example code:
const parent = document.querySelector(‘[data-acc-text=”text2Change”]’);
gsap.to(parent, {duration:0.7,scale:1.5,transformOrigin:”top left”});
Array.from(parent.children).forEach((child, index) => {
const txtSpan = child.querySelectorAll(‘tspan’);
for (let i = 0; i < txtSpan.length ; i++) {
txtSpan[i].style.fill = generateRandomColor();
}
});
function generateRandomColor(){
let maxVal = 0xFFFFFF; // 16777215
let randomNumber = Math.random() * maxVal;
randomNumber = Math.floor(randomNumber);
randomNumber = randomNumber.toString(16);
let randColor = randomNumber.padStart(6, 0);
return `#${randColor.toUpperCase()}`
}
4. Preview Your Slide
✔ Preview the slide.
✔ Click the Change Font Color button.
✔ You’ll see your text update with multiple colors instantly.
Best Practices for Multicolors Text in Storyline
1. Keep readability in mind: Too many colors can overwhelm learners.
2. Use contrast wisely: Ensure text is accessible against the background.
3. Highlight important words: Apply colors to emphasize key learning points.
4. Test across devices: Make sure styling works well on both desktop and mobile.
Looking for a Learning Management System (LMS) Solution?
We offer Learning Management System (LMS) solutions tailored to your organization’s unique training, compliance, and performance management goals.
Whether you’re a corporate organization, educational institution, or non-profit, we’re here to help you deliver engaging, scalable, and measurable learning experiences.
Summary
Applying multiple text colors in Articulate Storyline 360 using JavaScript is a simple yet powerful way to enhance your eLearning projects. With just a few lines of code, you can draw attention to critical words, create engaging visual effects and make your learning content more interactive.
By combining Storyline’s flexibility with JavaScript customization, you’ll have the tools to create standout learning experiences that captivate your audience.
Frequently Asked Questions (FAQs)
Q1. Why should I use JavaScript to change text colors in Storyline 360?
A. JavaScript offers more flexibility than the built-in text editor, enabling dynamic styling, interactive highlights and brand-specific color customization.
Q2. Where do I add the JavaScript code in Articulate Storyline 360?
A. The code is added via a trigger, usually on a button click – using the Execute JavaScript action in the Triggers panel.
Q3. What is the difference between Articulate Storyline and Articulate Rise?
A. Storyline is a slide-based authoring tool that gives you complete design flexibility and customization. Rise is template-based and responsive-first, making it faster for simple courses but with fewer customization options.
Q4. Can I use Articulate Storyline without coding?
A. Yes. Most Storyline features like quizzes, triggers and animations work without coding. However, developers can extend functionality with JavaScript for advanced customization.
Q5. What is the difference between Articulate Storyline and Articulate Rise?
A. Storyline is a slide-based authoring tool that gives you complete design flexibility and customization. Rise is template-based and responsive-first, making it faster for simple courses but with fewer customization options.
Q6. What is Articulate Storyline used for?
A. Articulate Storyline is used to create interactive eLearning courses, training modules, quizzes and software simulations. It helps trainers and instructional designers deliver engaging online learning experiences.
