Load a java script library in captivate

Community Beginner ,
Jul 03, 2017

Copy link to clipboard

Copied

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);

Views

2.3K

Likes

Translate

Translate

Report

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

1 Correct Answer

Adobe Employee , Jul 04, 2017
nag_siva Adobe Employee , Jul 04, 2017
Hi maximilianf46353140I 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 webpage3. used my favour...

Likes

Translate

Translate
Jump to answer Jump to answer
Community Beginner ,
Jul 04, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Most Valuable Participant ,
Jul 04, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Employee ,
Jul 04, 2017

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Aug 09, 2017

Copy link to clipboard

Copied

Thanks, it worked!

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Aug 09, 2017

Copy link to clipboard

Copied

it worked!

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Contributor ,
Jul 04, 2017

Copy link to clipboard

Copied

$(‘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. 

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Aug 08, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Dec 12, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
sabre123 LATEST
Contributor ,
Dec 12, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

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