Passing HTML to Text Variable

Currently, I'm converting an old E-Learning course into Storyline/HTML5 and to save some time, I've created a custom JS solution to read in XML and send it to a text variable to be displayed on screen.

My solution works fine with the exception of one problem: Storyline doesn't work well with a lot of HTML tags. The biggest issue is that my two Storyline files (one for testing and one for production) act inconsistently. If I pass the players "<p>Here's a list</p><br><li>item 1</li><li>item 2</li>" the output is completely different and I have no idea why. In my published test file, the text displays on 2 lines of text with the p and li tags seemingly doing nothing. In the production file, the <li> items appear bulleted, however the text size shrinks a considerable amount.

Both text boxes have the exact same settings (Do not autofit & don't wrap text in shape) and as far as I can tell, when Storyline reads in the formatted text, it looses its HTML tags. When I try to change the CSS associated with P and LI elements it seems to do nothing. I've even tested with no HTML and the plain text is displayed fine.

If anyone can help me either get this working or even just understand why my two files may be acting inconsistently, please let me know. Thanks!

2 Replies
Alex MacLeod

I'm not 100% sure, but after some black box testing I think the inconsistency stems from whether or not I'm using the default SL player. The test file uses the default player which I believe is taking priority over the HTML/CSS that I pass the text variable. 

The production file uses a  custom player and displays the HTML elements with no issues. Any text that was located in an HTML element automatically shrank to an unreadable size, but with the custom player I actually was able to manipulate the CSS with some JavaScript. 

To summarize, if you want to input styled HTML to a text variable, make sure you aren't using the basic Storyline player. I hope this helps someone else dealing with this issue!