🚀 Quick Start

🖥️ Desktop App Method (Recommended)

  1. Create Triggers: Use the Builder to define interactive behaviors for your Rise blocks
  2. Download Code: Visit Generated Code and download Triggers.js and Observer.js files
  3. Use Desktop App: Open the Rise Triggers Desktop App, go to Integration tab, link the JS files and attach your course ZIP
  4. Preview: See your triggers working in the app's live preview
💡 Pro Tip: The desktop app handles integration automatically and provides instant preview without manual file editing. Download Desktop App

⚙️ Manual Method

  1. Create Triggers: Use the Builder to define interactive behaviors for your Rise blocks
  2. Get Code: Visit Generated Code to copy your JavaScript files
  3. Integrate: Add the files to your Rise course directory and include the integration HTML
  4. Test: Open your course in a browser and test the interactive triggers

🔍 Finding Rise Block IDs

Every Rise block has a unique data-block-id attribute. Here's how to find them:

Method 1: Chrome Extension (Recommended)

Use our Chrome extension to add a Copy Block ID button to every Rise block. Click the button to instantly copy the data-block-id and paste it into the Builder.

  1. Install the extension: Download Chrome Extension
  2. Open your Rise course in Chrome
  3. Hover any block to see the Copy Block ID button
  4. Click to copy the ID and paste it into the Block ID field
Tip: The extension only reads visible data-block-id values and does not modify your course.

Method 2: Browser Developer Tools

  1. Right-click on any Rise block in your course
  2. Select "Inspect Element" or "Inspect"
  3. Look for the data-block-id attribute in the HTML
  4. Copy the ID value (e.g., cm8slill1002035749mxy0t1c)

🎯 Trigger Types Explained

📥 Load Event

Triggers when the block becomes visible in the browser viewport.

Example Use Cases:
  • Automatically highlight important content
  • Start animations when blocks appear
  • Log analytics when users reach certain sections
  • Initialize interactive elements

👆 Click Event

Triggers when user clicks anywhere on the block.

Example Use Cases:
  • Navigate to external resources
  • Lock/unlock other course sections
  • Show additional information
  • Track user interactions

🖱️ Hover Event

Triggers when user hovers their mouse over the block.

Example Use Cases:
  • Preview content on hover
  • Change visual appearance temporarily
  • Show tooltips or help text
  • Highlight related content

👆👆 Double Click Event

Triggers when user double-clicks the block.

Example Use Cases:
  • Advanced navigation options
  • Reset or toggle states
  • Access hidden features
  • Confirm important actions

⚡ Action Types Explained

💻 Execute CSS/JavaScript

Run custom code when the trigger fires.

JavaScript Examples:

// Simple alert
alert('Hello from block: ' + blockId);

// Change block appearance
block.style.backgroundColor = '#ffeb3b';
block.style.transform = 'scale(1.1)';

// Log analytics
console.log('User interacted with:', blockId);

// Show/hide other elements
document.getElementById('hidden-content').style.display = 'block';

CSS Examples:

/* Highlight the block */
[data-block-id="{blockId}"] {
    border: 3px solid #ff4444;
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.5);
}

/* Animation effects */
[data-block-id="{blockId}"] {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

🔒 Change Block State

Modify the state of any block in your course.

Available States:

  • Normal: Default state, fully interactive
  • Locked: Disabled with lock overlay, prevents interaction
  • Hidden: Completely invisible to users
Example Scenarios:
  • Lock next section until current one is completed
  • Hide advanced content until prerequisites are met
  • Create conditional learning paths
  • Progressive disclosure of course content

🌐 Open URL

Navigate to external websites or resources.

Use Cases:
  • Link to external documentation
  • Open company websites or resources
  • Direct to assessment tools
  • Connect to external learning platforms
💡 Tip: Choose "New Tab" to keep your course open, or "Current Tab" to replace the course page.

📚 Jump to Lesson

Navigate to specific lessons within your Rise course.

Finding Lesson IDs:

Lesson IDs appear in your course URL after /lessons/:

https://your-course.com#/lessons/Cs7kw5I6oM1I7LIFEi4VZuo1xNAWU05P
                                        ↑ This is your lesson ID
Example Uses:
  • Create custom navigation between lessons
  • Skip to specific sections based on user choices
  • Implement branching scenarios
  • Quick access to reference materials

🔧 Integration Process

🖥️ Desktop App Integration (Recommended)

Automatic integration with live preview using our desktop application

Step 1: Create Your Triggers

  1. Go to the Builder page
  2. Click "Add Trigger" to create a new trigger
  3. Fill in the block ID, trigger type, and action details
  4. Click "Save Trigger" to add it to your list
  5. Repeat for all triggers you need

Step 2: Download Generated Files

  1. Visit the Generated Code page
  2. Click the "Download All Files" button to get Triggers.js and Observer.js
  3. Save the files to your computer

Step 3: Use Desktop App

  1. Open the Rise Triggers Desktop App
  2. Go to the Integration tab
  3. Link the downloaded Triggers.js and Observer.js files
  4. Attach your Rise course ZIP file
  5. Preview your triggers in real-time within the app
💡 Advantage: The desktop app automatically handles all file integration and provides instant visual feedback without manual HTML editing. Download Desktop App

⚙️ Manual Integration

Traditional file-based integration for advanced users

Step 1: Create Your Triggers

  1. Go to the Builder page
  2. Click "Add Trigger" to create a new trigger
  3. Fill in the block ID, trigger type, and action details
  4. Click "Save Trigger" to add it to your list
  5. Repeat for all triggers you need

Step 2: Generate and Copy Code

  1. Visit the Generated Code page
  2. Review your triggers in the overview section
  3. Copy or download the Triggers.js file
  4. Copy or download the Observer.js file
  5. Copy the integration HTML code

Step 3: Add Files to Your Course

  1. Create two new files in your Rise course directory: Triggers.js and Observer.js
  2. Paste the respective generated code into each file
  3. Save both files in the same directory as your course's index.html

Step 4: Integrate with Your Course

  1. Open your course's index.html file
  2. Add the integration code before the closing </body> tag:
<script src="Triggers.js"></script>
<script src="Observer.js"></script>

Step 5: Test Your Triggers

  1. Open your Rise course in a web browser
  2. Navigate to blocks that have triggers
  3. Test the trigger events (click, hover, etc.)
  4. Verify that actions execute as expected
  5. Use browser console to check for any error messages

🔧 Troubleshooting

❌ Triggers Not Working

Problem: Triggers don't fire when interacting with blocks

Solutions:

  • Verify block IDs are correct using browser inspector
  • Check that both Triggers.js and Observer.js are loaded
  • Look for JavaScript errors in browser console (F12)
  • Ensure files are in the correct directory
  • Refresh the Observer: RiseObserver.refresh()

❌ Block Not Found Errors

Problem: Console shows "Block not found" messages

Solutions:

  • Double-check the block ID spelling
  • Ensure the block exists in the current lesson
  • Some blocks load dynamically - use 'load' trigger type
  • Wait for full page load before testing

❌ JavaScript Code Errors

Problem: Custom JavaScript code doesn't execute

Solutions:

  • Check syntax in your JavaScript code
  • Don't include <script> tags in code content
  • Use block variable to reference the current block
  • Use blockId variable for the current block ID
  • Test code in browser console first

❌ CSS Styles Not Applying

Problem: CSS styles don't appear on blocks

Solutions:

  • Don't include <style> tags in CSS content
  • Use {blockId} placeholder for dynamic block targeting
  • Add !important to override existing styles
  • Check CSS syntax and selector specificity

🔬 Development Mode

Use development mode to debug and visualize your triggers:

Useful Commands:

// Enable visual trigger indicators
RiseObserver.enableDevMode();

// Disable visual indicators
RiseObserver.disableDevMode();

// Refresh block detection
RiseObserver.refresh();

// List all tracked blocks
console.log(RiseObserver.getTrackedBlocks());

// Get info about a specific block
console.log(RiseObserver.getBlockInfo('your-block-id'));

// List all triggers
console.log(window.RiseTriggers.triggers);
💡 Pro Tip: Add ?debug=true to your course URL to automatically enable development mode.

✨ Best Practices

🎯 Trigger Design

  • Use descriptive names for your actions
  • Test triggers on different devices and browsers
  • Avoid conflicting triggers on the same block
  • Use 'load' triggers for automatic behaviors
  • Use 'click' triggers for user-initiated actions

💻 Code Quality

  • Keep JavaScript code simple and readable
  • Add comments to explain complex logic
  • Handle errors gracefully with try-catch blocks
  • Test code in isolation before adding to triggers
  • Use consistent naming conventions

🎨 CSS Styling

  • Use specific selectors to avoid affecting other elements
  • Add transition effects for smooth animations
  • Test colors for accessibility and contrast
  • Use relative units (em, rem, %) for responsive design
  • Provide fallbacks for older browsers

🚀 Performance

  • Minimize the number of triggers per page
  • Use efficient CSS selectors
  • Avoid heavy JavaScript operations in triggers
  • Test course performance with triggers enabled
  • Remove unused triggers from your configuration