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);
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 favour
...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
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.
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!
Copy link to clipboard
Copied
Thanks, it worked!
Copy link to clipboard
Copied
it worked!
Copy link to clipboard
Copied
it Works, thanks a lot
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.
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
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
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.