Javascript - new line in Storyline 360

Mar 13, 2018

Julie Whitehead
By Julie Whitehead

 I am trying to build a slide based on variables. The variables are based on whether the users selected it. Therefore the value or the variables are true or false.

if var9001 is true then write "9001 - mandatory course"

if var9002 is true then write "9002 - Equity and Health Systems"

it works when I 'Execute JavaScript when timeline starts'
but the text is all on one line.

The output is:

9001 - mandatory course,9002 - Equity and Health Systems

I want it to on separate lines

9001 - mandatory course,
9002 - Equity and Health Systems

------------------

I have tried '\n' and '<br/>"

neither work

here is the code:

=================================

var player = GetPlayer();
//grab a Storyline Variables
var storylineVar9001= player.GetVar("var9001");
var storylineVar9002 = player.GetVar("var9002");
var storylineVar9003 = player.GetVar("var9003");
var listString = player.GetVar("varlist");

var listString9001 = (storylineVar9001 == true) ? "9001 - mandatory course,": " ";
var listString9002 = (storylineVar9002 == true) ? "9002 - Equity and Health Systems,": " ";

var listString9003 = (storylineVar9003 == true) ? "9003 - Global Health, ": "9003 is false ";

listString = listString9001 + listString9002 + listString9003
player.SetVar("varlist",listString); //send to a Storyline Variable

==================

I have attached the storyline file

2 Replies
Richard Anciado
6 years ago03/15/18 at 10:41 pm (UTC)

Hi Julie. You can still use "\n" to add line breaks. You just need to make sure the text box containing your variable is set to Do Not Autofit and has enough space to handle multiple lines.

I've added an updated version of your .story file below. Here are some of the changes I made.

  1. Set the text box containing %varlist% to Do Not Autofit. (Right click on the text box -> select format shape -> select text box tab -> select do not autofit)
  2. Adjust the size of the text box to make sure it can accommodate all the lines. This is important. If you do not have enough space for the lines, the text will not appear.
  3. Minor adjustments to the JS code.

Here is a screenshot of what it looks like. Let me know how it works for you. Cheers!

line break JS

Walt Hamilton
6 years ago03/16/18 at 3:05 am (UTC)

Unless you have a bunch more stuff that you have to do in js, or just have a hankering to practice your js coding, you don't need the js.

Create a text box with the three result variables in it, and change them according to the other variables:

"Adjust variable - listString9001- Assignment - Value "9001 - mandatory course" if var9001 ==True

Or if you're worried about text overflow or autofit, create three textboxes, each with its own variable, or one text box with different states. OK, so that last one is not a good idea, but there are lots of ways without needing js.

Check the attached sample for a couple of them. There are two advantages of not using js if you don't absolutely have to (and you may need the one that prints.)

You don't have to have someone with coding skills to maintain the project in the future.

Without js, you don't have to publish the story to preview it. (If you are just wanting to preview changes to the js, you can do that without republishing, but any other change requires republishing.

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