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

Jan 24, 2017

david lieberman
By david lieberman

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. 

14 Replies
Alyssa Gomez
over 7 years ago01/25/17 at 7:43 pm (UTC)

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-Pollard
5 years ago03/05/19 at 9:16 pm (UTC)

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
4 years ago04/01/20 at 11:45 pm (UTC)

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
4 years ago04/02/20 at 4:07 am (UTC)

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
4 years ago04/02/20 at 2:32 pm (UTC)

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

 

Ren Gomez
over 3 years ago11/09/20 at 7:02 pm (UTC)

Hi Cyndy,

Thanks for checking in. I'm sorry that you ran into these issues with text-entry boxes.
 
They're both currently in the early stages of review based on our How We Tackle Bugs article. To help you plan, they're unlikely to be fixed in the next couple of updates.
 
For now, we recommend using the solutions mentioned above, if applicable. We'll be sure to jump in when there's any news to share on a fix.
Maria Costa-Stienstra
2 years ago02/21/22 at 3:48 pm (UTC)

Hi, everyone!

I just wanted to share that we no longer see the bug reported where Text Entry loses line breaks when the reference box is on a different slide, using the latest build of Storyline (3.61.27106.0).

If you're using the latest version and you're still experiencing this issue, please reach out to our support team through a case. 

Sign In to Reply