The introduction of interactive HTML provides authors with a powerful tool to create dynamic and immersive learning experiences, fostering learner engagement and facilitating knowledge acquisition and directly embed that into your Rise course!
First, it’s worth mentioning that we load your Interactive content within an iframe. This will be true when Authoring, as well as when you publishing your course. When Published, the iFramed content will be local to your zip to support offline and remove security issues that can arise.
So we need to dynamically set the iFrame height based on the determined content height of your document/page. The way we do this, is by firing an event onload . What we emit is the document.documentElement.offsetHeight . Sometimes that offsetHeight is inaccurate based on how the elements within are rendered.
If you are having issues with our iframe not scaling accurately, you can add the following as a test to see what your calculated offsetHeight is.
Add this at the end of your <body> . You can remove once you have resolved the issue
<script>
function initResizeObserver() {
new ResizeObserver(() => {
console.log(
"What is my offset height",
document.documentElement.offsetHeight
);
}).observe(document.documentElement);
}
if (document.readyState === "complete") {
initResizeObserver();
} else {
document.onreadystatechange = () => {
if (document.readyState === "complete") {
initResizeObserver();
}
};
}
</script>
If your offsetHeight isn’t accurate, try playing with the body and html heights. You can try adding a min-height: 100%; or height: 100% as examples that tend to resolve this issue.
Feel free to reach out to our team at [email protected] if you are stuck and need help!