Creating a dynamically-built HTML form from Storyline

I needed to come up with a way to create and print a form in a Storyline module without adding any external HTML or graphic files to the SCO. Printing directly from Storyline using the traditional Javascript method ("window.print()") was not an option for me.

I did consider creating an HTML file that could accept key/value pairs on the URL line that could be parsed and written to the page, but again, that really wasn't an option. I couldn't add files. I suppose I could have created the HTML page and landed it somewhere else, but that might turn complicated fairly quickly.

Some of my considerations:

• I had to include 24 variables from SL and show them in a table
• I had to include a branding graphic, but not link to it (again, because I could not add files to the SCO)

So my solution was to create a complete HTML file that is written by Javascript to a newly-created HTML window. Then the user can print the window using the browser controls. My solution is in the attached text file below. 

Setting up the page and including the variables wasn't hard. But the branding graphic was going to take a little bit of thought. What I ended up doing was this:

1) Convert my original *.png graphic to an *.svg graphic

2) Copied the SVG code from the *.svg graphic to the appropriate place in my new dynamic page

[When you open up the text file and look at it, the SVG image is that large string of characters in the middle.]

The entire string variable that gets written is created line-by-line. Each line has to be wrapped in double-quotes, and added to the string down the page before the write command. Also, any HTML markup that has quotes within in it needs  to be changed to single-quotes - like in my in-line CSS (I know, sloppy coding.)

Hooking this code to a trigger that will execute this Javascript, which will pop-up a new custom window in any browser, then allow you to print using the browser controls. And this does it without adding files to a published SCO.

This is my over-thought solution. Have fun!