Using JavaScript in Storyline

Hi everyone,

For one of my clients I need a JavaScript code to print a whole bunch of variables that are used in their course. 

I allmost figured it out, but unfortunately there is a last small issue that needs to be solved....

In the Output.png there is a sentence 'Moeheid.....SOMS'. These are two variables that are printed next to each other, but I need them to appear as a list. Like so,

Moeheidsklachten - JA
Slaapproblemen - SOMS

I really hope that you can help me out!!!

Attached you will find a screenshot of the Output, a screenshot of the JavaScript code and a pdf of the html print file.


17 Replies

Here is a snippet of code from one of my projects that I think might help. It is part of an email link where I am populating the content of the email using several variables and double spacing between the lines.  The code for the carriage return is %0d%0A and you can see I put 2 of them back to back at the end of each line to cause the double spacing.

var content="Name: "+name1+"%0d%0A%0d%0A";
content+="Badge: "+badge1+"%0d%0A%0d%0A";
content+="Certification: "+cert1;

var mailto_link='mailto:'+targetemail+'?subject='+subject+'&body='+content;

The result looks like the following (some details redacted).

Zsolt Olah

Okay, so you're passing the argument as a giant string, splitting it by ~~ and then write the document. Since the final document is written as HTML, I think all you need is a <br> tag after each variable. Now, if passing the "<" and ">" don't work because of encoding, try adding "&#60;br&#62;" after each variable. 


Zsolt Olah

I tried this and it works for me. var1 and var2 I made up, those are text variables. The end result is two variables under each other.

var p = GetPlayer();
var header = "<b>TESTING</b><br><br>"
var args = "VAR1 = "+p.GetVar("var1")+"<br>"+"VAR2 = "+p.GetVar("var2");
var url = "print.html?="+header+args;,"_blank");

Paul Alders

Hey Zsolt, many thanks for the update. i played around with your solution and the output is much better than it was. (see the attachment)

Two last questions;

Do you have any idea how to get a white space (line) between the two VARS en the second Topic?

The variables are not aligned correctly with the rest of the text. Any ideas how to solve this?

Thanks again for helping me out! 

Zsolt Olah

In your CSS style sheet h1 (the one big blue title) has a margin-top: 27px; That margin before the title makes the space.

Your Topic 1 and Topic 2 I think are h3. h3 doesn't have margin-top added in the style (print.html). To make space above the Topic, add margin-top: 20px; (you can play with the exact number) to the h3 { ... } style just like you have for the h1 {...}

That should care of the space.

The variables are not aligned because I think they don't have any tags associated with to have a margin (h1 and h3 have margin-left). You can try to modify the code to wrap each variable in <p> tag: +"<p>"+player.GetVar(whateveryouneedhere)+"</p>"

When you do this you might need <br> anymore because the <p> comes in a new line.