issue with iframe embed within Rise 360

Dear Community,

First of all, massive thanks for being so supportive and continuing to deliver a wonderful product. My issue is most likely to be a bespoke one but I am hopeful I can get a solution.


Background: I am building an e-learning module using Rise 360 (Articulate). This e-Learning course has bunch of "free text" questions which are to be mandatorily answered by the students.

Now, Rise 360 doesn't support free-text yet. Hence, I am creating those questions in Jotform and I am using the "embed Iframe" feature of Rise 360 to include them within the course.


Problem:

When the course is accessed on Mobile (we have taken a mobile 1st approach) we are unable to have all questions clearly shown to users as it appears to be a scroll within the scroll (due to container height most likely).

There isn't any option for me to modify the css or js to increase the height of the container. I have tried the different width options (small, medium, full-width) options and yet nothing works.

The Ask:

1. I would like to have all questions clearly visible to the users so that they may answer the questions. 

2. Ability to use this in tandem with the "continue" block which gets activated only after the free text questions are answered.

I am hoping I could get an answer, else I will be hitting a dead-end I suppose.

URL to the course: https://cloud.scorm.com/sc/InvitationConfirmEmail?publicInvitationId=bb38a4fe-98ae-4c6b-8726-a485211c7347

Username: tester32189@gmail.com

 

5 Replies
Crystal Horn

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.

Ananth Sankaran

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 :-)

Crystal Horn

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!

Ananth Sankaran

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>