Injecting HTML through a Variable into SL3

Mar 01, 2018

Bryce Wescott
By Bryce Wescott

I have a project I am designing. In it I am passing full HTML through a variable into Storyline 3. 

However, any all links are inaccessible <a href> and any CSS Hover effects (#a:hover). 

From what I can gather, when the HTML gets injected, the HTML is formatted and then injected. This means it retains its formatting, but is not accessible in the DOM. 

I recreated my work in a test project that does not contain the actual work. There is a file for the JS (htmltest.js) and CSS (ph.css) in Story_Content.

Here is the Desired Effect:

I want a CSS tag (whether <a href> or another ID/Class) to prompt a CSS effect (such as show URL, or act as a link). 

Anyone want to help me figure out if I can get this to work?

 

And P.S. To the Staff: I know this is not a supported feature or process

3 Replies
Bryce Wescott
6 years ago03/01/18 at 9:19 pm (UTC)

I figured a way to do this. 

I stole the HTML code from the Webobject (which will not let you redirect to a non-URL) and <iframe> in a small HTML file located in my root folder. 

I can then embed the <Div class="webobject"> and <iframe> in my HTML code. This gives the tags the appropriate property assigned by CSS....

This also allows me to continue to pull variables through JS and put them in my HTML code to paste back into Storyline.

Bryce Wescott
6 years ago03/01/18 at 9:39 pm (UTC)

Its all a little complicated. I got it working in my production version but cannot share it at this moment.

Here is the long answer:

I created a textbox in Storyline and added a reference to my variable %var1%

In Javascript, I am then injecting HTML into that variable and passing it back:

var html = '<div><p>text</p></div><div><a href="http://google.com">Google</a></div>

However, this nullifies the link and overwrites the text with Storylines element.style tags.

So, to pull in a link, I wrote a simple HMTL file and hosted it in the root folder. I could not use a Webobject in Storyline because it wants a URL (www). If you redirect to a folder, the webobject does not work in Firefox. 

Thus, I stole the code that Storyline applies to webobjects and repurposed it and pointed the <iframe> to my root folder HTML file:

var htmltext = '<div class="webobject"  style="width:600px;height:40px;background:transparent;"><iframe width="600" height="40" src="htmlfiles/01.html" frameborder="0" class="shown "></iframe></div><div><p>Text of some kind</p></div>'

Then when I pass the JS variable back into Storyline, we get the link to appear as an actual link, or just add CSS effects like :hover.

I can then add custom CSS or do anything we want to that portion of HTML because Storyline does not overwrite or protect it.

This discussion is closed. You can start a new discussion or contact Articulate Support.