Example
Think About It!! Quiz, with Quiz Builder
💡My take on the challenge:
I looked at this from a slightly different perspective. Building a quiz is easy! so I wanted to create something useful for the entire community. I didn't just create a quiz, I built an app right inside Rise that allows users to craft, preview, and export their own high-impact, standalone quiz right inside Rise for use in their own courses. Everything in the quiz is customisable! Use it along with the native rise style and format block controls to create something amazing!
🖥️ The tech bit!
The tool is a dynamic, client-side web application built using standard web technologies (HTML5, CSS3, and Vanilla JavaScript). It allows you to build, configure, and export self-contained, interactive quiz blocks engineered specifically for iframe integration within Rise.
⚙️The really techy bit!
The system relies on a centralized State Management Pattern (const S). Every interaction, from a slider adjustment to an input keypress or color hex alteration, fires a non-blocking UI update sequence:
- Mutates the values directly inside the global state object.
- Formats strings safely using contextual HTML/JS escaping helpers (esc() / escJs()) to prevent injection or rendering errors in the exported markup.
- Automatically serialises the state to compile a completely isolated, valid HTML document inside a data URI stream (srcdoc).
😤Problems encountered!
Because the live preview runs inside an iframe wrapper to preserve strict CSS sandboxing and style isolation, standard DOM access is blocked. To solve this, a robust cross-document messaging pipeline was implemented:
- The Frame: Houses an active ResizeObserver API loop monitoring its own document height.
- The Message: The child window securely transmits payload data (window.parent.postMessage({type:'frameHeight', ...})) upward to the host application window upon asset load.
- The Host: Automatically catches the event listener and dynamically resizes the frame height down to the exact pixel, eliminating double scrollbars and layout shifting entirely.
🔎LMS/Rise Compatibility & Performance
The exported codebase is mathematically pure Vanilla JavaScript (ES5 standard for runtime compatibility). It relies on no external dependencies, CDNs, or UI libraries, ensuring lightning-fast load times. It also features a programmatic native browser hook that fires standard completion messages ({type: 'complete'}) across to the parent window automatically upon a user hitting the customisable passing threshold.
I hope you enjoy it 😊
Getting Started with the E-Learning Challenges
Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.