In the world of e-learning development, creating an engaging and visually appealing user interface is crucial. Articulate Storyline is a powerful tool for building interactive courses, but sometimes you want to go beyond the standard design to create something unique. One way to add flair is by customizing the shape of your navigation buttons, turning them into stylish ovals. This post walks you through a simple JavaScript solution to achieve this effect.
The Problem
By default, Articulate Storyline provides standard rectangular navigation buttons like “Next”, “Previous”, “Submit”. While these are functional, they lack that extra bit of creativity that can make your course more visually appealing. Unfortunately, Storyline doesn’t provide built-in options to customize button shapes, but with JavaScript, you can transform these buttons easily.
The Solution
To address this, we’ve developed a simple JavaScript function that adjusts the roundness of your navigation buttons, making them look oval or rounded based on your preferences.
function applyOvalButtons(percentage, options = {}) {
function applyOvalStyle(button, buttonOptions) {
if (!button) return;
const className = 'oval-button-' + Math.random().toString(36).substr(2, 9);
button.classList.add(className);
let style = document.createElement('style');
document.head.appendChild(style);
const minDimension = Math.min(button.offsetWidth, button.offsetHeight);
const radiusPixels = (minDimension * percentage) / 100;
let baseStyles = '';
let hoverStyles = '';
const darkenColor = (color, amount = 0.2) => {
// Handle rgba colors
const rgbaMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
if (rgbaMatch) {
const [, r, g, b, a] = rgbaMatch;
const darkenChannel = (c) => Math.max(0, c - c * amount);
return `rgba(${darkenChannel(r)}, ${darkenChannel(g)}, ${darkenChannel(b)}, ${a || 1})`;
}
// Handle hex colors
color = color.replace('#', '');
const num = parseInt(color, 16);
const r = Math.max(0, (num >> 16) - (num >> 16) * amount);
const g = Math.max(0, ((num >> 8) & 0x00FF) - ((num >> 8) & 0x00FF) * amount);
const b = Math.max(0, (num & 0x0000FF) - (num & 0x0000FF) * amount);
return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)}`;
};
if (buttonOptions.gradient) {
baseStyles += `background-image: ${buttonOptions.gradient} !important;`;
const darkenedGradient = buttonOptions.gradient.replace(/rgba?\([\d\s,\.]+\)|#[a-fA-F0-9]+/g, color => darkenColor(color));
hoverStyles += `background-image: ${darkenedGradient} !important;`;
} else if (buttonOptions.color) {
baseStyles += `background-color: ${buttonOptions.color} !important;`;
hoverStyles += `background-color: ${darkenColor(buttonOptions.color)} !important;`;
}
if (buttonOptions.border) {
baseStyles += `border: ${buttonOptions.border} !important;`;
}
style.sheet.insertRule(`
.${className} {
border-radius: ${radiusPixels}px !important;
overflow: hidden !important;
${baseStyles}
transition: all 0.3s ease !important;
}
`, 0);
style.sheet.insertRule(`
.${className}:hover {
${hoverStyles}
}
`, 0);
style.sheet.insertRule(`
.${className}::before {
border-radius: ${radiusPixels}px !important;
}
`, 0);
if (buttonOptions.textColor) {
style.sheet.insertRule(`
.${className}#next,
.${className}#prev,
.${className}#submit,
.${className}#next * ,
.${className}#prev * ,
.${className}#submit * ,
.${className}#next .view-content,
.${className}#prev .view-content,
.${className}#submit .view-content,
.${className}#next .btn-icon,
.${className}#prev .btn-icon,
.${className}#submit .btn-icon,
.${className}#next .btn-text,
.${className}#prev .btn-text,
.${className}#submit .btn-text,
.${className}#next:hover .view-content,
.${className}#prev:hover .view-content,
.${className}#submit:hover .view-content,
.${className}#next:hover .btn-icon,
.${className}#prev:hover .btn-icon,
.${className}#submit:hover .btn-icon,
.${className}#next:hover .btn-text,
.${className}#prev:hover .btn-text,
.${className}#submit:hover .btn-text {
color: ${buttonOptions.textColor} !important;
fill: ${buttonOptions.textColor} !important;
stroke: ${buttonOptions.textColor} !important;
}
`, 0);
}
console.log(`Applied oval shape to button with class ${className}`);
}
const nextButton = document.querySelector("#next");
const prevButton = document.querySelector("#prev");
const submitButton = document.querySelector("#submit");
applyOvalStyle(nextButton, options.next || options);
applyOvalStyle(prevButton, options.prev || options);
applyOvalStyle(submitButton, options.submit || options);
}
window.applyOvalButtons = applyOvalButtons;
// Example usage with gradient
applyOvalButtons(50, {
// Uncomment and modify these options as needed
// color: '#FFFF00',
//gradient: 'linear-gradient(135deg, #FF0000 0%, #A11100 100%)',
//border: '2px solid #810E00',
//textColor: '#FFFFFF',
//next: { color: '#00FF00', textColor: '#FFFFFF' },
//prev: { color: '#FF0000', textColor: '#FFFFFF' },
//submit: { gradient: 'linear-gradient(45deg, #8E44AD, #9B59B6)', border: '2px solid #660094', textColor: '#FFFFFF' }
});
How It Works
- Rounding Percentage: The
percentageinput determines how rounded your buttons will be. A value of 50 will create perfectly oval buttons. - Unique Class Generation: A unique class name is generated for each button to avoid CSS conflicts, ensuring that the new styles apply only to the specified buttons.
- Border-Radius Calculation: The function calculates the
border-radiusbased on the smallest dimension (height or width) of the button, making the rounding dynamic based on button size. - Additional Styling: You can add a gradient background, solid color, border, or text color by passing options into the function.
- Multiple Button Support: The function can apply the styles to various buttons like “Next”, “Previous”, or even “Submit” if desired.
How to Use It in Articulate Storyline
You can integrate this JavaScript solution into your Storyline project with ease. Here’s how:
- Go to the Master Slide: In Articulate Storyline, navigate to View > Slide Master and select the top slide (the one that controls all the layouts).
- Add a JavaScript Trigger: Insert a new Execute JavaScript trigger that runs when the timeline starts. This ensures the buttons are customized when the slide loads.
- Paste the JavaScript Code: Copy the
makeButtonsOvalfunction and paste it into the JavaScript window. - Call the Function: At the end of the JavaScript code, call the function with your desired percentage. For example, calling
makeButtonsOval(50)will make the buttons 50% rounded (oval).
This function works best with the hover wipe function. When using the wipe function only use this call example.
makeButtonsOval(50);
Customizing the Look
You can adjust the look of your buttons by tweaking the percentage or adding extra style options such as colors, gradients, or borders. If you aren’t using the wipe function then color it and apply it using this call example below.
applyOvalButtons(50, { color: '#3498db', border: '2px solid #2ecc71', textColor: '#ffffff' });
Conclusion
With this simple JavaScript solution, you can easily customize the shape and style of your navigation buttons in Articulate Storyline. By adjusting the border-radius dynamically, this approach allows you to give your course a fresh, modern look. Whether you’re looking for subtle rounded corners or full oval buttons, this code offers an easy way to enhance the design of your e-learning courses.
Remember, engaging design is an important part of effective e-learning, and small visual improvements can go a long way in improving user experience. Happy coding and designing!
