Edit an Imbed Code with Javascript?

I currently have a URL-based link for feedback on a course/quiz.  Since the LMS is able to provide the course name and the user's name, I use javascript to collect that info and create a "smartURL" text string.  This is used to open the hyperlink so when the SmartSheet feedback form appears in a separate browser window, the name and course are already prefilled.   Works fine.

The only "mildly" negative IMO is that this form appears in a separate window.

I can make the same form appear inside of Storyline using the IMBED CODE under the Insert Video option.  This also works, just not as well.

PROBLEM:

I have to put the imbed code in during story creation, so I have no way to prefill the name and course fields for the user if the form opens this way.

This is what the imbed code looks like in its initial state:

<iframe width="1000" height="700" frameborder="0" src="https://app.smartsheet.com/b/form/94b1b0fcfe814a39a805507d41700d77"></iframe>

You can see the code linking to the smartsheet under the SRC paramater.

There is a variable in the course that is storing the smartURL and it has the name and course in it.   That looks like this after javascript is done creating it:

https://app.smartsheet.com/b/form/94b1b0fcfe814a39a805507d41700d77?Name=%20Jerry%20Beaucaire&Course=QUIZ%20-%20Bloodborne%20Pathogens%20(MST%202019)

Is there a way to edit the imbed code on a slide to add the parameters for name and course?

7 Replies
Matthew Bibby

In theory, something like this should work:

var player = GetPlayer();
var name = player.GetVar("Name");
var course = player.GetVar("Course");
var iFrame = document.getElementsByTagName('iframe');
var src = "https://app.smartsheet.com/b/form/94b1b0fcfe814a39a805507d41700d77"
var newSrc = src + "?Name=" + name + "&Course=" + course;
iFrame.setAttribute('src', newSrc);

You'll need variables in Storyline called Name and Course which contain the relevant info. 

I haven't tested this but in theory...

Jerry Beaucaire

I've attached a short story testing this and it doesn't seem to work.    

Up above next to RESOURCES is a basic hyperlink that is opening the smartURL string that the javascript is creating.   When I test this in my LMS, I get the username and the coursename filled in on the popup window.

There's a green button on the second slide that does the same thing, works great.

On the second slide is a blue button to open the layer that has the imbed object on it.   WHen that layer opens, none of the fields are prefilled.

I adapted your code suggestion to use the js variables already working, not sure what else to edit.  I appreciate the second set of eye.

Russell Killips

Hello Jerry,

Here's what I came up with. I created a WebObject. It's just an index.html file.

Inside the index.html file is code that gets your smartURL variable and redirects to it.

To view or edit the code, you can open the index.html file in Notepad.

I have attached a story file and the index.html WebObject file for you to take a look at.

 

Jerry Beaucaire

That works great!  I tested it on my phone after publishing into LMS and it works perfectly.

This soooo helpful!   I appreciate your assistance very much!

 

One last hurdle,  (I know, I know, always one more thing!).... the web form has a SUBMIT button on it (which works fine as part of the original form).   

After clicking the SUBMIT button on the webform, the form feeds back the following "Thank you for your input!" message.   I'd like to trigger a "CLOSE" button to appear on that layer at that moment when this message comes in, so the user can smoothly return to the Results page.

Do you have an idea for that?

Jerry Beaucaire

Yeah, I looked into the SmartSheet options and don't see any gold in that direction, there's no such controls in the form creation tools that give us JS ability.   Hmm, I'll keep digging, I may have to just put a button onscreen and it just be there all the time on that layer.

Thanks again for your help!

Phil Mayor

This maybe out of scope here, but I would think you could set the submit button to redirect to a url (where doesn't matter). You could then set up an event listener in the iframe via javascript that detects a change in location and then send a variable change to Storyline. This variable change could show the close button.