Use the Interactive HTML block to embed your own HTML package into your Rise course. It's a flexible way to add interactive or custom-coded content that fits your unique learning experience.

👇 Check out this quick demo to see the block in action and get a tour of its main settings

https://youtu.be/1eYqAZuXcIU

Preparing and Uploading Your Zip file

• Include all HTML, JavaScript, CSS, and image files your interactive uses.
• Ensure index.html is at the root level of the ZIP (not inside a subfolder).
• When creating the ZIP, select all files inside your project folder — do not zip the folder itself.

This setup ensures your content loads correctly in the block.

Embed options

• Content Width: Use this setting to control the width of your interactive HTML container. Choose from Small, Medium, or Full — each one aligns with standard Rise block widths.
• Show border: Toggle this option to show or hide a light gray border around your interactive HTML content.
• Autocomplete interaction: Use this setting to control how the block is marked complete in the course.

  • On: The block will automatically be marked complete when it loads. This is ideal if you want to gate progress with continue buttons but don’t need the learner to fully interact with the content.

  • Off: Completion must be triggered manually by the interactive content itself. This gives developers control over when the block is marked complete — for example, after a quiz is passed or an interaction is finished. To manually trigger completion, send the following message from your HTML package when the learner finishes the interaction:

    window.parent.postMessage({
        type: 'MIGHTY_INTERACTIVE_COMPLETE'
    })
    

Inject additional CSS and JavaScript