In eLearning development, creating visually appealing and interactive content is key to engaging learners. If you’re using Articulate Storyline 360, you might have encountered a limitation: customizing the dropdown menu to change the font color and background color of the selected option isn’t straightforward.
Click Preview to watch a step-by-step tutorial on How to Change both the Font Color and the Selected Option’s Background Color in a Dropdown Question Using JavaScript in Articulate Storyline 360.
This article shows you exactly how to change both the font color and the selected option’s background color in a dropdown using JavaScript within Storyline 360, helping you enhance user experience and meet modern design standards.
What is JavaScript?
JavaScript is a powerful, high-level programming language used to create interactive and dynamic content on websites and web applications. In the context of eLearning, JavaScript can be used to enhance functionality, customize user interfaces and add behaviors that aren’t possible with default authoring tools.
Key Features of JavaScript:
✔ Enables dynamic styling of HTML elements (like dropdowns, buttons and inputs)
✔ Allows communication with Storyline variables
✔ Can run custom logic based on learner actions or input
✔ Works seamlessly in HTML5-based Storyline outputs
In Storyline 360, JavaScript is commonly used to:
✔ Modify text or visual styles at runtime
✔ Send or retrieve data from an LMS or web server
✔ Trigger animations or complex feedback systems
Note: JavaScript in Storyline 360 runs in a browser environment, so it’s important to test in published HTML5 output (not in Preview Mode).
What is Articulate Storyline 360?
Articulate Storyline 360 is a leading eLearning authoring tool that allows instructional designers to create interactive, multimedia-rich courses without needing to write code. It’s part of the Articulate 360 suite, which includes tools for course collaboration, review and asset creation.
Key Features of Storyline 360:
✔ Slide-based interface similar to PowerPoint
✔ Support for quizzes, branching, triggers and states
✔ Responsive player for mobile and desktop
✔ Rich media support: audio, video, animations
✔ Integration with JavaScript for advanced customization
✔ Output to SCORM, xAPI and HTML5
While Storyline 360 is user-friendly for non-developers, advanced users can leverage JavaScript to add custom interactions, perform real-time calculations, or dynamically style elements (like dropdowns, as we explored in this article).
Why Customize Dropdown Question Appearance in Storyline 360?
By default, Storyline’s dropdown menus have limited styling options. However, you might want to:
✔ Match dropdowns with your brand colors or theme
✔ Improve readability and accessibility
✔ Provide visual feedback when users make a selection
✔ Align with corporate branding guidelines
Unfortunately, there’s no built-in feature for styling the selected dropdown option in Storyline 360. That’s where JavaScript comes in.
Step-by-Step: Change Font Color and the Selected Option’s Background Color
Follow these clear steps to customize your dropdown menu’s appearance using JavaScript in Articulate Storyline 360.
Step 1: Preview the Default Dropdown
Before making any changes, preview your slide containing the dropdown question.
Note: You’ll notice the default styling uses a yellow background for the selected option and standard black font, this might not match your course design.
Step 2: Set Up Your JavaScript Trigger
Now, let’s add a new JavaScript trigger:
✔ Go to the Triggers panel
✔ Click “Create a new trigger”
✔ Choose “Execute JavaScript”
✔ Set it to run “When Timeline Starts”
Step 3: Paste the JavaScript Code
In the JavaScript editor window, paste the following script:
const style = document.createElement(‘style’);
style.innerHTML = `
.drop-list-item-selected {
fill: #B4C424 !important;
}
.drop-list text {
fill: #000000 !important;
}
`;
document.head.appendChild(style);
Step 4: Customize the Colors
✔ To change the background color, replace the #007acc value with your desired hex code.
✔ To change the font color, update the #ffffff to match your project’s text styling.
Step 5: Save and Preview
✔ Click OK to save the JavaScript.
✔ Now preview the slide again in HTML5 format (not just in Storyline Preview mode).
What you’ll see:
✔ The font color inside the dropdown has changed to match your specified design.
✔ The selected option now features your custom background color, replacing the default yellow.
Common Issues and Debugging Tips
Using JavaScript in Storyline can be powerful but it comes with a few quirks.
| Problem | Solution |
| JavaScript not working | Always publish to HTML5; it won’t work in Preview mode |
| Changes not applied | Make sure your browser allows JavaScript (some LMSs may block it) |
| Dropdown not styled | Inspect the HTML output to locate the exact structure or class |
Accessibility Considerations
Custom styling must also be accessible to all learners:
✔ Use high-contrast font and background combinations
✔ Never rely on color alone to indicate correct or incorrect answers
✔ Consider adding ARIA attributes for screen readers (advanced use case)
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
Customizing the font color and background color of selected options in a dropdown can significantly improve your Storyline 360 courses both visually and functionally. With just a bit of JavaScript, you can achieve modern styling, enhance accessibility and align with your brand’s visual identity.
By stepping beyond the default tools and using JavaScript, you unlock the flexibility to build more dynamic and polished eLearning experiences.
Frequently Asked Questions (FAQs)
Q1. How do I add JavaScript to a Storyline 360 course?
A. JavaScript can be inserted using a trigger: go to the Triggers panel, select “Execute JavaScript” and paste your script in the editor. Set it to run “When Timeline Starts” on the slide with the dropdown.
Q2. Who can use JavaScript in Articulate Storyline 360?
A. Instructional designers, eLearning developers, or anyone with basic coding knowledge can use JavaScript in Storyline 360 to customize and enhance interactivity beyond built-in features.
Q3. Is it safe to use JavaScript in Storyline 360?
A. Yes, JavaScript is safe when used correctly. It gives you greater control over interactivity and styling. However, always test across different browsers and LMS environments to ensure consistent behavior.
For more information, please visit our Custom eLearning Development Services page.
Q4. What is Articulate Storyline 360 used for in corporate training?
A. Articulate Storyline 360 is used to create interactive, responsive and SCORM/xAPI-compliant eLearning modules for employee onboarding, compliance training, sales enablement and more.
Q5. Where can I find tutorials for Articulate Storyline 360?
A. If you’re looking to learn more about Articulate Storyline 360, we offer a wide range of free, step-by-step tutorials designed to help both beginners and advanced users master customization techniques.
Explore our tutorials here:
https://www.swiftelearningservices.com/articulate-storyline-360-free-tutorials/
Articulate Storyline 360 Free Tutorials – Swift eLearning Services
Our tutorials cover:
✔ Custom triggers and variables
✔ JavaScript integration for interactivity
✔ Tips for creating responsive, accessible eLearning
✔ Real-world use cases for corporate training solutions
Whether you’re customizing dropdown questions or building complex branching scenarios, our resource hub helps you make the most of Storyline 360.
