• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Appending a new line to a Captivate variable in Javascript

Contributor ,
Jul 27, 2022 Jul 27, 2022

Copy link to clipboard

Copied

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!

Views

269

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Contributor , Aug 02, 2022 Aug 02, 2022

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 javascri

...

Likes

Translate

Translate
Contributor ,
Aug 03, 2022 Aug 03, 2022

Copy link to clipboard

Copied

Fixed! It was the playBar. I have some JS used to control the playBar functionality in my other projects. I will need to review this because I am not using the playBar for this project.

Thanks as always.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 23, 2022 Aug 23, 2022

Copy link to clipboard

Copied

I have just noticed that in SCORMCloud and Moodle that the function is not found. Here is the console error:

ReferenceError: updateTEBcharting is not defined

But it works in the CP preview.

I thought that CP would include the function in the export, but I assume it is not. I am probably missing something but not sure what!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 30, 2022 Aug 30, 2022

Copy link to clipboard

Copied

LATEST

The answer was to add the file in the same way as CPExtra to the index.html file. I should have realised that earlier!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines