Appending a new line to a Captivate variable in Javascript

[iDoNotBelieveIt]

I have a responsive project that uses a text entry box for the user to make notes whilst progressing through the project. What I would like to do is append some text to this depending on the outcome of various interactions.

I am using Javascript for one interaction and can update the variable used by the TEB without an issue. However, I am having problems adding a new line from within Javascript. I have searched for previous discussions here and online. I have tried adding the following line in the Javascript to update the TEB variable using the escape sequence "\n" for a new line, as specified in the MDN docs:

v_teb_notes=v_teb_notes  + "\nMy heading\nMy text to add.";

I believe that "\n" should add the new line, but when I run this the code fails. In the browser console I see the error "SyntaxError: '' string literal contains an unescaped line break".

When I remove the "\n" the JS executes, but no line breaks are added.

v_teb_notes=v_teb_notes  + "My heading My text to add.";

I am not sure what I am doing wrong. I have tried various options based on other threads here without success, including using the Scrolling Text Widget. I wonder if Captivate is doing something odd to the JS. This post from over ten years ago says that Captivate strips "\n" in Advanced Actions. I hoped this would not happen from JS, but since the JS is executed as an action maybe it does. This would explain the browser error. If so, is there a work around?

On a similar note, I cannot find a way to add a new line to a Captivate variable either. One thread recommended using HTML e.g. adding "<br/>" to the variable value, but that doesn't work.

Hopefully someone can help!

[OH_CP_Lover_&_Hacker]

Over the years I've used any of the following to add new lines into a Captivate string using JS outside the Advanced Actions method:

Unicode method: string + '\u{000A}' + string

HTML method: string + ''&#10;'' + string

The break method has worked as well: string + '<br/> + string

I've had sucess with the following: string + '\n' + string

If you want it to work within an Advance Action....then create a new variable called anything you wish, I will call it nl for t this demo.....assign your new variable with the following text: '&#10;'

Example:

Now when you are wanting to add new lines to your strings, use the new variable you created and it will work like a charm!

Example: v_teb_notes = "Hello" + nl + "world";

[iDoNotBelieveIt]

Many thanks for your kind reply and examples.

Unfortunately none works in JS in the TEB. The browser still returns "SyntaxError: '' string literal contains an unescaped line break". I can check the JS in an online verifier e.g. Code Beautify and it passes, but fails in Captivate.

I then added the nl variable in Captivate, specifying the expression "v_teb_notes=v_teb_notes+nl" on my loading slide so that when the TEB displays the user should see the text "Initial thoughts" (the default value of v_teb_notes is "Initial thoughts") with the cursor on line 2 ready to accept input. The TEB displays "Initial thoughts'&#10;'" so CP is  appending the nl value rather than interpreting it as a new line.

I then tried using the nl variable in the JS expression in place of the escape codes and this allowed the script to run successfully. However, the line breaks where not displayed in the TEB, only the literal characters i.e. '&#10;'

This made me wonder if there is an issue with the TEB, so I added a text caption that displays v_teb_notes. With '&#10;' as the value the line breaks are added but with '' between the strings, so I changed the value to &#10;

This displays correctly in the text caption but not in the TEB. The TEB appears to ignore the escaped line break.

I have opened a ticket with Adobe, but if this is a bug it will probably take years to fix.

I hope there is a solution!

[OH_CP_Lover_&_Hacker]

Ok....sorry my bad I did not know you were trying to update an actual TEB, I missed that when reading your question earlier.  Let me take a closer look at TEB for ya...be back in a while.  I also have another idea for you that might work very well too.  What is the size of your TEB by chance, as I want to mimic the exact setup you have so that I can do some testing for you.  Hope you ar having a great day.

[iDoNotBelieveIt]

That is very kind. Thank you.

The TEB is in a responsive project. I have not specified a maximum length for it.

I have also tried the Scrolling Text widget, which does the same thing.

A usual Captivate day. All going well, making great progress and then I get stuck on something I thought would be simple. I hope yours is going well too!

[Lilybiri]

Do you need the interactivity of the TEB?  Did you turn on the scrollbar for the TEB? If you don't need the interactivity (scoring) I would recommend to use the Scrolling Text interaction indeed, because it has less limitations.

[iDoNotBelieveIt]

Yes the scrollbar is on because the user will need to scroll through it. I am not scoring.

The intention is for the user to make notes in response to open questions except where there are interactions. On completion of the interactions, the notes are updated automatically by appending text to the end.

On completion of the activity the user can compare the notes with a model answer.

I tried the Scrolling Text widget after the problems with the TEB but had the same problem with the line break values being displayed rather than the linebreaks. I will try again. Maybe using the CP variable for the line break will work with the widget. If it does, great!

My brief experience of the widget was that it looked better for formatting. But then I saw that you cannot format part of the text e.g. bold headings. It is all or nothing, which limits its use.

Captivate appears to be rather limited in its text formating.

I hope the widget works and will let you know! Thanks for the continued help.

[OH_CP_Lover_&_Hacker]

First make sure you have your TEB set for scrolling al all that etc..as mentioned above....

To make updates to the current visable TEB, you could use the following:

In the examples below the TEB ID I want to update with previous vars used is Text_Entry_Box_5

You will need to add "_inputField" to the end of your TEB ID to write dirctly to the editing box.

So that means my TEB ID would be Text_Entry_Box_5_inputField as the object ID to use to update the TEB.

Pure JS example:

document.getElementById("Text_Entry_Box_5_inputField").value = Text_Entry_Box_1 + '\n' + Text_Entry_Box_2 + '\n' + Text_Entry_Box_3 + '\n' + Text_Entry_Box_4  + '\n';

jQuery example:

$('#Text_Entry_Box_5_inputField').val(Text_Entry_Box_1 + '\n' + Text_Entry_Box_2 + '\n' + Text_Entry_Box_3 + '\n' + Text_Entry_Box_4  + '\n');

[iDoNotBelieveIt]

Some progress but...

The scrollable text widget displays the line breaks correctly. So as long as the JS uses string + nl + string (where nl is the CP variable with the newline HTML value &#10;) it displays correctly e.g:

My heading

My text

The problem is that when the user advances to the next slide which also has the widget, the breaks are no longer preserved but displayed as <br/>:

My heading<br/>My text.

I then wondered if I used different variables for each slide then create a new one that concatenates the variables together on the final slide it would work. It doesn't. The problem is that when the user enters text, leaves the slide and then returns, the <br/> reappears and formatting is lost.

I noticed that this only happens for text entered by the user. For text generated by JS it is fine. The problem occurs when the user enters text.

TEBs do not work.

This appears to be a major issue with Captivate unless I am doing something wrong. It must be something to do with how Captivate parses the text in the widget on leaving the page.

[iDoNotBelieveIt]

I should add that I have just revisited an earlier version of this that had no fancy interactions with JS or updating variables via actions, and the TEB boxes work. So maybe there is some corruption somewhere, or updating the variable used by the TEB via actions or JS causes problems. I will have to check.

[OH_CP_Lover_&_Hacker]

Here is a quick and dirty example of takeing TEB data, and having it update the last TEB with all previous entries.  You can go back and make changes...then reupdate the last TEB with the new changes...

https://iti.cscc.edu/AdobeFourmHelp/tebUpdateHelp/index.html

This is very very simple...you would for sure need to manage your update routines to your needs...

[iDoNotBelieveIt]

Many thanks! I will go back to my previous version where all the TEBs were working and try this. If this works I will have to recreate the interaction I was using JS to report on (it uses objects with multiple states, and I use JS to check the states because I cannot do that with advanced actions or CPExtra).

Always learning 🙂

[OH_CP_Lover_&_Hacker]

Hey there, how did it go? Where you able to update TEB area with data using the solution I shared with you?

[iDoNotBelieveIt]

Sorry, I ran out of time last week but I hope to try your solution tomorrow. I will let you know!

[iDoNotBelieveIt]

Unfortunately I cannot get this to work. The console keeps returning the error:

SyntaxError: '' string literal contains an unescaped line break

It does not like the \n or the other options for a new line e.g. '<br/>

I have created a simple three slide project:

Slide 1 has the variable Text_Entry_Box_1

Slide 2 has the variable Text_Entry_Box_3

Slide 3 has the variable Text_Entry_Box_4 and the TEB has the object name Text_Entry_Box_4

The button on Slide 3 executes this JS:

document.getElementById("Text_Entry_Box_4_inputField").value = Text_Entry_Box_1 + '\n' + Text_Entry_Box_3 + '\n';

But I get the same error.

When I remove the '\n' it works, but of course there is no line break.

I do not understand why this is not working for me.

[OH_CP_Lover_&_Hacker]

Humm....Could you send me a message and share a link so I could download your project and take a look at it for you?  I'd be happy to see if I can tract down whats up for ya! 

[OH_CP_Lover_&_Hacker]

I sent you a message to your profile here on this system..Hope it helps ya! 

[OH_CP_Lover_&_Hacker · Accepted solution]

Ok, I would suggest putting your command that you are wanting to have update your desired TEB into a function. In the demo I posted, I'm loading an external Javascript file that has functions I made quicky to track and then update the last TEB.

I just did a quick test...and just having the button execute the command you shared above will not work...but if you create a function (which is how I update TEBs) it will work for ya!

So on the first slide I issue the following command to load my javascript file:

$('body').append('<script src="assets/Supporting_Files/workfile.js" type="text/javascript"> </script>');
});

For quick testing and etc. I modified my applications Adobe Captivate 2019->HTML ->assets folder by adding a new folder called Supporting_Files....and in that folder I placed my "workfile.js" (as seen in the loading line above) so that when I go to preview the project it will load the needed JS file automaticly so things will work without having to play the folder add/shuffle/publish to weberver routine for each test run...

[OH_CP_Lover_&_Hacker]

Here would be a very very simple function that when saved to your external javascript file that would update the TEB with the string you posted above...

function updateTEB(){
    document.getElementById("Text_Entry_Box_5_inputField").value = Text_Entry_Box_1 + '\n' + Text_Entry_Box_3 + '\n';
}

Yes I know that is so crazy simple..but I just wanted to show how to convert your update string into a javasript function.  Functions will for sure allow you to do many things when updating TEBs.

After making your function and saving it to your external js file, you would then update your button (on slide 3) to exectue javascript by just issuing your desired update function - updateTEB();

Boom the magic should happen for ya - at least I hope so!!! It works I promise ya!!

[iDoNotBelieveIt]

Bingo! That works. Interesting how it needs to be put in a function to work.

You deserve a hero award as far as I am concerned!

I have learnt a lot. I need to devote some quality time to learning JS.

Many, many thanks. It was getting so frustrating trying to complete something I thought would be simple.

[iDoNotBelieveIt]

And I have now updated my project and it works. So the answer to adding line breaks to TEBs programmatically is to use JS in a function stored in an external file and then call that from CP.

Many thanks to @OH_CP_Lover_&_Hacker for kindly holding my hand and showing the way!

[OH_CP_Lover_&_Hacker]

Awesome NEWS!!! I'm so happy that it finally go working for you! Thank you so very much for your kind words, I greatly appricated your feedback! I was honored to help you! Hope you have an awesome rest of your day!! 

[iDoNotBelieveIt]

My pleasure!

I am just testing on the LMS (Moodle) but it is sticks on the first slide (spinning circle...). I can preview from within CP, but not from SCORM Cloud or the LMS. I wonder if this is related to the external JS file but am not sure. I assume it is looking for a file. Any idea what I am missing?

[OH_CP_Lover_&_Hacker]

Hey there! It should not be the external JS file causing issues...I use external JS files with many SCORM projects.  Did you check your browser's console log by chance?  I'd suggest checking there to see what it might be saying that could help point you in the dirction of figuring out what is going on?  We are a Blackboard LMS here...we came close to converting over to Moodle before the pandemic struck...

[iDoNotBelieveIt]

Thanks. I did have a quick look. The only error is

Uncaught TypeError: _extra.w.cp.PB is undefined

Which looks like the playBar. I have just disabled it so will go throught the actions/