Archive

Add Custom Code to Articulate Rise Courses for Free

TutorialCSSJavaScript

Looking to break free from Articulate Rise's default limitations and add truly custom functionality to your courses? Whether you need interactive elements, custom styling, advanced animations, or specialized learning activities, adding custom code to Articulate Rise can transform your eLearning content from standard to extraordinary.

Why Add Custom Code to Articulate Rise?

While Articulate Rise is an excellent authoring tool, its built-in blocks and themes can sometimes feel limiting. Custom code opens up a world of possibilities:

  • Interactive Elements: Create custom quizzes, games, calculators, and interactive simulations
  • Advanced Styling: Apply unique visual designs that go beyond Rise's theme limitations
  • Dynamic Content: Build adaptive content that responds to learner choices and progress
  • Gamification: Add points, badges, progress bars, and reward systems
  • Custom Analytics: Track specific learner interactions and behaviors
  • Third-Party Integrations: Connect with external APIs, databases, or learning systems
  • Accessibility Enhancements: Implement custom accessibility features for specific needs

Getting Started: Install Slate for Rise (formerly RiseOverride)

Slate for Rise (formerly RiseOverride) is a free Chrome extension that supercharges Articulate Rise with advanced customization capabilities:

  1. Visit the Chrome Web Store page for Slate for Rise (formerly RiseOverride)
  2. Click "Add to Chrome" to install the extension
  3. Navigate to rise.articulate.com and open any course
  4. You'll now see the Slate for Rise (formerly RiseOverride) interface panel on the right side

Adding Custom CSS

Custom CSS is your gateway to unlimited visual customization. From subtle styling tweaks to complete visual overhauls, CSS gives you precise control over every element's appearance.

With Slate for Rise (formerly RiseOverride) active, click on any block, open the panel, navigate to "Custom CSS", and enter your code. Changes apply immediately in the preview.

Example: Floating Pink Continue Button

  1. Use Slate for Rise (formerly RiseOverride)'s Add Class option to add pink-button as a custom class to your chosen block
  2. Paste the following CSS:
.pink-button .continue-btn {
  background-color: pink;
  color: black;
  border-radius: 50px;
  animation: floatY 2.5s ease-in-out infinite;
}

.pink-button .continue-btn:hover {
  background-color: black;
  color: pink;
}

@keyframes floatY {
  0% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

Adding Custom JavaScript

JavaScript is where the real magic happens—adding interactivity, dynamic behavior, and advanced functionality to your Rise courses.

Switch to the "Custom JavaScript" tab in the Slate for Rise (formerly RiseOverride) panel, write or paste your code, and test functionality in the Rise preview.

Best Practices for Custom Code

Mobile-First Responsive Design

  • Always test custom elements on mobile devices
  • Use relative units (rem, em, %) instead of fixed pixels
  • Ensure touch-friendly interactive elements (minimum 44px tap targets)

Cross-Browser Compatibility

  • Test in Chrome, Firefox, Safari, and Edge
  • Provide fallbacks for unsupported features

Accessibility Considerations

  • Maintain proper heading hierarchy
  • Ensure keyboard navigation support
  • Add appropriate ARIA labels and roles
  • Maintain sufficient color contrast ratios

Slate for Rise (formerly RiseOverride)'s Code Tools

  • Copy Block ID: Instantly copy any block's unique identifier for precise targeting
  • Live CSS Preview: See your CSS changes in real-time as you code
  • Add Class: Apply custom class names to blocks for easier styling

Ready to transform your Rise courses? Install Slate for Rise (formerly RiseOverride) for free and start customizing today!

← Back to Developer Notes