issue with iframe embed within Rise 360

Hello, Ananth. Thanks for sharing the link to your output!

1. What is the embed code you're using?

2. Continue button blocks can require that only native Rise 360 content is completed before allowing the learner to continue in the lesson. Unfortunately, the continue button won't recognize whether external web content is completed.

Hi Crystal,

for the 1st jotform (single question, I am using:  <iframe id="JotFormIFrame-92047531215349" title="1a - Problem-solving in sport" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotformeu.com/92047531215349" frameborder="0" style=" min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe>

for the 2nd jot form (3 questions), I am using:  <iframe id="JotFormIFrame-92048672443359" title="1c - Problem you could face" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotformeu.com/92048672443359" frameborder="0" style=" min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe>

Note: I tried changing parameters such as height, etc. yet it wouldn't help as I believe the customisation is needed at the container level in Rise 360. For example, there's a particular dimension to which the container for small, medium and full-width is setup in Rise 360.

I understand that the conditional continue is for Rise 360 items and external ones wouldn't be supported. As long as I am able to make it mobile responsive (i.e.) entire form visible without scroll-within-scroll I will take it :-)

Hi, Ananth. Because the container for your embedded content will change depending on the device and orientation being used to view it, the jotform will look slightly different on different screen sizes. Adding height and width attributes overrides Rise 360's settings, and will affect how much room the content has inside the container. 

I took your embed code and pared it down a bit to just include a height attribute in this example. It previews well on mobile devices, but there is some extra space on desktop. I hope that helps give you a starting place for finding a balance for how your web content displays!

Hi Crystal,

Thanks for your response. It's not a single question one that causes problems. It's more to do with 3 questions or more.

An example as follows: https://form.jotformeu.com/92048672443359

The iframe code used within this course is:

<iframe id="JotFormIFrame-92048672443359" title="1c - Problem you could face" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotformeu.com/92048672443359" frameborder="0" style=" min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe>

The actual code spit out by jotform to be used as an iframe is as follows:

<iframe id="JotFormIFrame-92048672443359" title="1c - Problem you could face" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotformeu.com/92048672443359" frameborder="0" style=" min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-92048672443359"); if(window.location.href && window.location.href.indexOf("?") > -1) { var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } window.handleIFrameMessage = function(e) { if (typeof e.data === 'object') { return; } var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) { return; } switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; case "loadScript": var src = args[1]; if (args.length > 3) { src = args[1] + ':' + args[2]; } var script = document.createElement('script'); script.src = src; script.type = 'text/javascript'; document.body.appendChild(script); break; case "exitFullscreen": if (window.document.exitFullscreen) window.document.exitFullscreen(); else if (window.document.mozCancelFullScreen) window.document.mozCancelFullScreen(); else if (window.document.mozCancelFullscreen) window.document.mozCancelFullScreen(); else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen(); else if (window.document.msExitFullscreen) window.document.msExitFullscreen(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script>

Hi, Ananth. These are our recommendations for working with embed codes. There might be some attributes that you can eliminate. To get your content to display the way you want, you may need to experiment with the size attributes, however.