Forum Discussion
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.
14 Replies
Hi David,
Not sure if this will fit the purpose of your course, but if you use an Essay question slide from the Survey section, the text stored in the variables will keep the line breaks.
I tested in SL2 to make sure. Not sure if it is different in 360. Hope that helps.
I just tried this in 360, it doesn't work, unfortunately :(
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.
Please do let us know when there is an update on this; having the same issue!
Thanks :)
Hi - now that Flash is on its last legs, an HTML5 fix for line breaks in text entry fields is more needed than ever.
Is this being looked at by the team?
Regards,
Morten
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.
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.
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 variablesvar player = GetPlayer();var TextEntry=player.GetVar("TextEntry");// Step 2. The HTML Section - with the Storyline variables insertedvar 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 windowvar myWindow = window.open("","Print","width=810,height=610,scrollbars=1,resizable=1");myWindow.document.write(contents);myWindow.print();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
Thank you so much Morten!
This worked!
The <pre> </pre> around the variable did give me the line breaks I was after, but then the text wasn't wrapping so I edited to<pre style='white-space: pre-wrap;'>and it works!!
I really appreciate your help. :)
Thanks again,
Rebecca
Cool, glad it helped and thanks or the extra info re line wrapping :-)
I would also like this issue fixed. We are currently doing all of our republishing of courses from flash to HTML 5 and now encountering this problem. I am not using javascript and the issue is in storyline 3 and storyline 360
