Skip to main content
maximilianf46353140
maximilianf46353140
Known Participant
July 3, 2017
Answered

Load a java script library in captivate

  • July 3, 2017
  • 5 replies
  • 3924 views

Hello captivate-experts ,

I have now taught myself quite a bit about captivate and I still have one issue I cannot resolve.

I want to load a java script library (Fuse.js - JavaScript fuzzy-search library ) and call functions from this.

Unfortunately, I couldn't find any documentation online that describes how to include this .js library and call functions

from it (I want to call it after a learner clicks a button, from the regular javascript code window).

I've tried code like

import 'fuse.js';

and after that I've tried to call functions and deliver an output (see code at the end of this article).

I've also put the library into the folder: "assets\js\" of my published project. Moreover, I've tried to add it

via the Captivate GUI to my project, but the script file won't show in the gui.

I would appreciate it very much if someone could tell me whether it is possible to use java script libraries and call

their functions in captivate. And I would be even happier if someone could post me a link or give me a hint how to

tackle this challenging task.

Best regards & thank you

Max

PS: Here is the whole code I'm trying to run - please don't feel ablidged to read it, I would also be happy to get a general answer

  The code gets a value from an text entry box, creates some variables and then searches for some text in the variables which it reports with an altert (later I will change the text that was searched for by the variable from the text entry box)

# latest stable
$ npm install fuse.js
import 'fuse.js';
var v_input;
var v_input = window.cpAPIInterface.getVariableValue("Text_Entry_Box_3");
var books = [{
  'title': "Old Man's War",
  'author': 'John Scalzi',
  'tags': ['fiction']
}, {
  'title': 'The Lock Artist',
  'author': 'Steve',
  'tags': ['thriller']
}]
var options = {
  keys: ['author', 'tags']
};
var fuse = new Fuse(books, options);
fuse.search('tion');
alert(fuse);
This topic has been closed for replies.
Correct answer nag_siva

Hi maximilianf46353140

I tried the following steps and it worked for me. Let me know if it worked for you as well.

1. Created a new project (I used 1.cptx, you can use any name)

2. on slide enter action of first slide, execute javascript (in current window), typed the below script:

function addScript( src ) {

  var s = document.createElement( 'script' );

  s.setAttribute( 'src', src );

  document.body.appendChild( s );

}

addScript('test.js');//add a dynamic script node to current webpage

3. used my favourite editor to create a javscript file named test.js with below content:

(function(){

window.testModule = {};

testModule.foo = function(){

console.log('I am testModule foo method');

}

console.log('ran test.js')

})()

4. published 1.cptx to HTML5 (I publised to a folder named "1", you can use any name)

5.manually copied test.js to the same location as index.html (depending on the type of publish the name of this file can be different)

6.Served the published folder from a webserver (I used Mongoose. You may use WAMP or any webserver of your choice)

7. Tested from Chrome browser by opening the URL of my published content

ran test.js  (... I could see this console log message which I put inside test.js present in browser console)

> window.testModule.foo() (....when I typed this in the console...)

test.js:4 I am testModule foo method  (... I got this console message in response...Yay!)

All the best!

5 replies

cmtreen
cmtreen
Participating Frequently
December 12, 2018

RE first slide entry scripts: What about if the student resumes the module, which launches on a slide other than the first?

We've discovered some JS issues with this when students resume in the middle of a module; functions defined on the first slide aren't recognized if the first slide isn't loaded

sabre123
sabre123
Participating Frequently
December 12, 2018

I have not read this entire thread (and it's a year old), but here's what I do:

Set up a "js" folder in my final build structure and add my custom .js file(s) to that folder. In the CP generated index.html, modify the following line as follows:

var lJSFiles = [  'assets/js/jquery-1.11.3.min.js','../js/myCustomJSFile.js','assets/js/CPM.js','assets/playbar/playbarScript.js' ];

Your scripts are loaded when the html loads and are available in the lesson on all slides. I save this .html file off to the side as it gets overwritten on publish.

maximilianf46353140
maximilianf46353140Author
Known Participant
August 9, 2017

Hi Everyone,

nav.sigas solution worked out for me Thank you so much!
Including the librar worked under the following conditions
- I exported it as swf or html 5 (both work!) as a zipped .xapi content.
- I've uploaded it on a local moodle installation on xampp and launched it with tincanlaunch plugin,

reporting xAPI results to wax LRS

Best regards & thanks
Max

S
sdwarwick
Participating Frequently
July 5, 2017

$(‘body’).append(‘<script src=”/<path to file>/myscript.js” async=”false”></script>’);

 

Add the above code to the "execute javascript on enter" script on the first slide in your module . The script file can be anywhere on your server if you have it served by a web server.  The lesson must be published for this to work. 

Add any additional javascript after this to use the library on the first or other pages of the module. 

N
Adobe Employee
nag_sivaCorrect answer
Adobe Employee
July 4, 2017

Hi maximilianf46353140

I tried the following steps and it worked for me. Let me know if it worked for you as well.

1. Created a new project (I used 1.cptx, you can use any name)

2. on slide enter action of first slide, execute javascript (in current window), typed the below script:

function addScript( src ) {

  var s = document.createElement( 'script' );

  s.setAttribute( 'src', src );

  document.body.appendChild( s );

}

addScript('test.js');//add a dynamic script node to current webpage

3. used my favourite editor to create a javscript file named test.js with below content:

(function(){

window.testModule = {};

testModule.foo = function(){

console.log('I am testModule foo method');

}

console.log('ran test.js')

})()

4. published 1.cptx to HTML5 (I publised to a folder named "1", you can use any name)

5.manually copied test.js to the same location as index.html (depending on the type of publish the name of this file can be different)

6.Served the published folder from a webserver (I used Mongoose. You may use WAMP or any webserver of your choice)

7. Tested from Chrome browser by opening the URL of my published content

ran test.js  (... I could see this console log message which I put inside test.js present in browser console)

> window.testModule.foo() (....when I typed this in the console...)

test.js:4 I am testModule foo method  (... I got this console message in response...Yay!)

All the best!

    maximilianf46353140
    maximilianf46353140Author
    Known Participant
    August 9, 2017

    Thanks, it worked!

    maximilianf46353140
    maximilianf46353140Author
    Known Participant
    July 4, 2017

    I've found this post Re: CP9 - How can I access external Javascript?  and after reading it I edited the index.html in the folder html in order to load fuse. Moreover, I've put the library fuse in the folder \assets\ of my project. However, captivate still throws an error when I load my project

    Error Message:

    Die Zeichenkodierung eines Dokuments im Frame wurde nicht deklariert. Das Dokument kann unterschiedlich aussehen, wenn es ohne das umgebende Frame-Dokument angesehen wird. 
     wo1168654346.html
    ReferenceError: event is not defined[Weitere Informationen]  CPM.js:933:172
    ReferenceError: Fuse is not defined
    Stack-Trace:
    @file:///C:/Users/ri95bem/Documents/My%20Adobe%20Captivate%20Projects/its%20getting%20serious%202/assets/js/CPM.js line 576 > eval:15:5
    a.runJavascript@file:///C:/Users/ri95bem/Documents/My%20Adobe%20Captivate%20Projects/its%20getting%20serious%202/assets/js/CPM.js:576:17
    @file:///C:/Users/ri95bem/Documents/My%20Adobe%20Captivate%20Projects/its%20getting%20serious%202/assets/js/CPM.js line 851 > eval:1:1
    cp.Movie.prototype.executeAction@file:///C:/Users/ri95bem/Documents/My%20Adobe%20Captivate%20Projects/its%20getting%20serious%202/assets/js/CPM.js:851:413
    g/<@file:///C:/Users/ri95bem/Documents/My%20Adobe%20Captivate%20Projects/its%20getting%20serious%202/assets/js/CPM.js:944:415
      CPM.js:158:219
    ReferenceError: event is not defined[Weitere Informationen]  CPM.js:933:172
    SyntaxError: illegal character
    Stack-Trace:
    a.runJavascript@file:///C:/Users/ri95bem/Documents/My%20Adobe%20Captivate%20Projects/its%20getting%20serious%202/assets/js/CPM.js:576:17
    @file:///C:/Users/ri95bem/Documents/My%20Adobe%20Captivate%20Projects/its%20getting%20serious%202/assets/js/CPM.js line 851 > eval:1:1
    cp.Movie.prototype.executeAction@file:///C:/Users/ri95bem/Documents/My%20Adobe%20Captivate%20Projects/its%20getting%20serious%202/assets/js/CPM.js:851:413
    g/<@file:///C:/Users/ri95bem/Documents/My%20Adobe%20Captivate%20Projects/its%20getting%20serious%202/assets/js/CPM.js:944:415
      CPM.js:158:219
    Lilybiri
    Lilybiri
    Legend
    July 4, 2017

    Hi, I am not at all a JS expert, cannot help you. But I will try to reach someone who could help you out.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices