Keep "Text Entry Field" Line Breaks When Displaying the Variable in a Text Box?

We have users entering a list in text entry field. They press enter after every item in the list. 

When we show them their list later in a text field, the line breaks are replaced with spaces.

item 1

item 2

item 3

becomes

item 1 item 2 item 3

Is there a way we can keep the line breaks when the variable is displayed in a text box?

Thanks! Using 360, if it makes a difference. 

12 Replies
Alyssa Gomez

Hi there David,

Thanks so much for sharing your experience with us. I am also seeing this behavior on my end in the HTML5 output, but not in the Flash output. Keep in mind that Previews in Storyline 360 display HTML5 content. It looks like this holds true for any kind of text entry interaction, including Essay questions. You can use the links I included above to test on your end. 

I am going to share this information with our Quality Assurance team, and although I can't give a timeframe for a solution, I'll be sure to share updates here in this thread when they are available. In the meantime, the only workaround I can offer is to use the Flash output instead of the HTML5 output. 

Ashley Terwilliger

Hi Morten,

Yup - our team is looking into two issues:

  • When the Text Entry loses line breaks when the variable reference box is on a different slide.
  • When the Text Entry doesn't keep line spacing while a user enters in text.

This discussion is linked to both of those open issues so we can update you here once there is more detail to share. 

Rebecca Fellows

Hi,

Does anyone have a work-around for this issue in the meantime?

I have an Execute JavaScript trigger in my .story file that is accessed via a Rise course.

I need to have TextEntry boxes where the learner can type and print their text as they progress through the course. The Text variables do not recognise line breaks when it goes to print/ new window and I need it to, as the learner could be typing up to 5 paragraphs worth of text - as you could imagine, this does not look nice, nor is it professional. 

I have attempted to add  TextEntry = TextEntry.replace(/\r\n?/g, '</br>'); to my JavaScript but it doesn't work (the script still works, just no line breaks).

The Essay text variables suggested above don't work either in 360, unfortunately. 

Does anyone have any workarounds or suggestions? 

Thanks, 

Rebecca

Note: Exporting to HTML is not an option at this time, as the .story files are accessed via Rise and could become problematic as I have several instances of these files throughout the course.

Rebecca Fellows

Hi Matthew, 

Yes, there is more code, and the variable is called TextEntry. 

Here is the (basic) code that I'm using (without the TextEntry.replace string mentioned above).

// Step 1. Connect JavaScript to the Storyline variables

var player = GetPlayer();

var TextEntry=player.GetVar("TextEntry");

// Step 2. The HTML Section - with the Storyline variables inserted
var contents = "<html><head></head><body style='font-family: sans-serif; padding: 10px; margin: 0px;'><div style='margin-bottom: 10px; padding-left: 5px'><img style='width: 50%; max-width: 550px;' '></div><div><div style='font-size: 14px; background-color: #efefef; padding: 15px; margin-bottom: 10px; border-radius: 3px;'><h3 style='margin-top: 0px; padding-top: 0px;'>TITLE TEXT</h3><div style='background-color: #ffffff; border-radius: 3px; padding: 15px;'><h3 style='padding-top: 0px; margin-top: 0px;'>Line one text<br>Line 2 text<br>You answered:</h3><p style='padding-left: 0px; margin-top: 1em;'>"+TextEntry+"</p></div></div></div></body></html>";

// Step 3. Open the document window, write the HTML contents, and open the print window

var myWindow = window.open("","Print","width=810,height=610,scrollbars=1,resizable=1");
myWindow.document.write(contents);

myWindow.print();

Morten Billcliff

Hi Matthew and Rebecca,

I actually found a workaround for my particular issue. I found that inserting the <pre> (and </pre>) tags in the html code before and after the text variable had the effect of keeping the line breaks in the html output.

Here is an excerpt from the code. 'res' is used as part of the html code, 'mine_noter' (my notes) is the Storyline variable saved from the text input field.  

res = res + "<br><pre><i>Mine noter<br>" + mine_noter + "</pre></i><br>";

Hope this helps :-)

Morten