Accessing DOM Elements of Captivate SCORM Export in Java-Script

[Steffen Moser]

Hi all,

we use Captivate 2017 (with fluid boxes) in order to create web-based trainings. We typically export the Captivate projects to SCORM 2004 and integrate them into our Moodle 3.1. For one of our current projects, there is the need to have a global glossary. I would like to implement it using a mouse-over jQuery-based tooltip library like Tipso [1], so whenever a word with an glossary record occurs in the SCORMs, it should be highlighted. By moving the mouse over it, it should present the explanatory text.

As I have all of the glossary records for all my SCORM WBTs in a list, my (maybe too simplistic) idea was to post-process Captivate's SCORM export. I thought that I could add the necessary CSS and JS parts for the tooltip lib and would then be able to use a little Bash or Perl script which parses through Captivate's text output. Whenever a word, which should be explained in the glossary, would be found, the Bash script would add a link to the tooltip and would deposit the explanation text. After then, I would repackage the SCORM and upload it to Moodle.

Modifying the output text doesn't seem to be an easy task, as everything is put into a single hard-to-read and even harder-to-edit CPM.js file. The second problem is that we haven't found out, yet, how I could get access to the DOM elements of Captivate slides' contents.

My questions therefore are:

1. Has anyone done anything similar, yet? Maybe my approach is suboptimal and a completely different idea helps to solve my problem. What I don't want to do is to treat each glossary record manually in Captivate. One of the reason is that I need a maintainable solution. As it is a large multi-site academic and especially ongoing project, I know that there will be more words defined which should be integrated into the glossary at a later point in time. I don't want to touch all my Captivate projects manually again and again. Thus, an automatic solution is required, e.g. a Bash, Perl or Python script which runs through the export. Programming the script is not the problem. For simple HTML-based outputs, it works.
2. Is there any possibility to force Captivate to produce the a more human-readable and human-understandable JavaScript and and slide-text output when publishing to a SCORM package?
3. What is the event which notifies a user-defined JavaScript that a slide's contents are rendered completely and that the elements could be accessed in the DOM by using a self-defined JavaScript? At least, it doesn't work by adding the tags as described in [1] to the output text in CPM.js.

Thank you very much in advance for any helpful tips!

Kind Regards,

Steffen

[1] https://tipso.object505.com/

[thisguy4xapi]

For the unreadable .cpm file, I copy and paste it to Unminify JS, CSS and HTML Code  and then copy and paste it back into my editor in order to use it.  I am not aware of any way to make captivate publish it this way natively.

The rest sounds like an interesting challenge.  I think you have it right using a script to scan the entire .cpm for occurrences of the glossary word and then perhaps adding a <span class='glossary'> </span> tag to that particular word.  You could then isolate it with Jquery and manipulate. 

[dan561]

As far as I know, the actual output of all text blocks from Captivate is in the form of .png images, which might make it difficult to insert tooltips unless you can get them in before the .pngs are created, then overlay them in the right spot. Good luck!

Here's a snip from a CPM.js file listing the image containing a text caption, which is actually buried in one of the JSON collections:

Text_Caption_229:{type:19,from:376,to:465,rp:0,rpa:0,mdi:'Text_Caption_229c',retainState:false,immo:false,apsn:'Slide16119',trin:0,trout:0,stl:[{stn:'Normal',stt:0,stsi:[43032]}],stis:0,bstiid:-1,sipst:0,sicbs:false,sihhs:false,sihds:false,isDD:false},Text_Caption_229c:{b:[51,97,265,127],uid:43032,sr:cp.fd,ip:'dr/Text_Caption_229.png',dn:'Text_Caption_229',visible:1,effectiveVi:1,JSONEffectData:false,accstr:'Psoriasis facts ',traccstr:'',ti:-1,vbwr:[51,97,265,127],vb:[51,97,265,127]}