Send variables to Captivate from HTML using Javascript and vice-versa

[ouija]

What is the easiest way of setting a variable within the .html file
and pull it into the Captivate presentation? (such as a username or
email address)

As well, how can you grab a variable from within Captivate
presentation and display it in the actual .html file using Javascript?

My Javascript skills are somewhat lacking, so any help you can provide
would be greatly appreciated! Thank you

[Philip Hutchison]

Hi Ryan

Querying a Captivate SWF is very tricky if you hand-code your JavaScript.  I created a utility to make it easier: CaptivateController (docs)

For example:

//Assuming the Captivate SWF is already embedded

//in the HTML and has the ID "Captivate"

var myMovie = CaptivateController("Captivate");

var points_scored = myMovie.query("cpQuizInfoPointsscored");

var points_possible = myMovie.query("cpQuizInfoTotalQuizPoints");

Then you could use JavaScript to act on the data, such as:

var percentage = (points_scored / points_possible) * 100;

If you want to display it on the page, you would target an HTML element like so:

HTML:

<div id="score"></div>

JavaScript:

var myMovie = CaptivateController("Captivate");

var points_scored = myMovie.query("cpQuizInfoPointsscored");

var points_possible = myMovie.query("cpQuizInfoTotalQuizPoints");

var percentage = (points_scored / points_possible) * 100;

document.getElementById("score").innerHTML = "You scored " + percentage + "%";

As far as setting the value of a Captivate variable, I have just modified CaptivateController to include a set method that allows the developer to change Captivate variables at run-time (when the SWF is already loaded and running). Been meaning to do it for a while, finally got around to it.

Example

- philip

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.
To post to this group, send email to elearning-technolo...@googlegroups.com.
To unsubscribe from this group, send email to elearning-technology-and...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/elearning-technology-and-development?hl=en.

[Ryan Manning]

Phillip,

I actually was in the process of using your utility before you sent this!  This is almost exactly what I've been looking for, except I am having a little issue with setting variables, and I'm afraid that maybe it's a limitation as to how that works.

Is there any way to set a variable using your set method PRIOR to loading the SWF?  I was trying to do just that but it doesn't appear to work, but you'd obviously be the one to ask directly.

Thanks again for your response and for making such a wonderful utility! 

[ouija]

Phillip,

You are my freakin' savior, man!

I managed to use your AWESOME utility with a little additional code to
have the variables updated on load.

I was using a version of your demo for setting variables found here:
http://lab.pipwerks.com/captivate/CaptivateController/testsuite/set.html
and basically removed the form function and set a value for:

myMovie.set("pipwerks", value);

and then tried to simply invoke the function before the swfobject
embed code by using:

changeValueOfPipwerks();

but the movie would simply not load. Then, after reading your
statement about the swf needing to be loaded and running, and
remembering that the "load-on-slide-number" script (found here:
http://captivatedev.com/2011/05/01/how-to-jump-to-a-specific-slide-in-a-separate-course/)
needed a timeout of at least 200ms for that function to work, I
decided to try using a timeout when invoking the function, such as:

setTimeout(function(){changeValueOfPipwerks();}, 200);

AND THE DAMN THING WORKS!!! You have NO IDEA how happy you have made
me! It's taken me quite some time to figure out an easy way to pull
this off, and you my friend have done just that. Huge thanks and
respect to you and your great work! Thank you so much for pointing me
in the right direction, and saving me hours of lost time and headaches
on trying to learn javascript and make this work the way I need it to!

You are the king!!! Kudos to you.

[ouija]

Alright, I may have jumped the gun a little. It seems that Firefox
is a little more stubborn to allow for this timeout to update the
variable, with it working sometime and other times it is not. I found
increasing the timeout seemed to help, but still there are times where
it makes no change. If you know a method of setting variables on load
that is better than what I've described, please let me know. Or does
your utility offer a method of using Javascript to detect if the
captivate swf is fully loaded? That might be a way to fix this "bug"
with Firefox.

I'll keep tinkering with this, but the good news is that it's at least
a start! Thanks again for your awesome utility!

[Philip Hutchison]

If you have control of the Captivate file, the best solution is to execute the JavaScript from Captivate when it loads. No messy timers, no browser conflicts.

In Captivate:

loadCPVariables();

In your HTML:

function loadCPVariables(){

   //add your CaptivateController code here

}

If you don't have control of the Captivate file, you'll need to get more creative.  The normal way to update a variable when loading the SWF is to use FlashVars.  However, I don't think it works with Captivate variables because of the architecture under the hood.  

The next best option is to load the SWF then immediately set the values of the variables. But there are gotchas there, too: ExternalInterface (the method the SWF uses to communicate with JavaScript) isn't available until some milliseconds after the SWF is embedded. 

In this case, the best solution is to use SWFObject's 'callback' function to execute JavaScript when the SWF has been embedded, but include a timer that ensures the SWF is fully loaded before trying to set any values. See this tutorial on learnswfobject.com.

- philip

[ouija]

BRILLIANT!!! Words cannot express how appreciative I am for your
expertise and help on this! Thank you so much!

[Philip Hutchison]

hi Nader

if you're referring to the Captivate file i used for the test page, sorry, no -- i created that example almost four years ago.  it's easy enough for you to recreate it, just add the variable to a slide.

i haven't tested the CaptivateController in Captivate 6. i last updated it in 2011 (for Captivate 5.5).

- philip

On Wed, Feb 20, 2013 at 3:42 PM, Nader Omidian <nader....@gmail.com> wrote:

hi Philip

Could you give us your captivate file.and also is it working on captivate cs6?

Thanks

 

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Bibi Lemtorp]

Hi,

Is there a similar solution for Captivate 8. I'm essentially trying similarly to pass from an HTML page a Student Name, and Student Email to that of a Captivate 8. Is this still feasible using such a controller?

Look forward hearing back.

[Philip Hutchison]

Hi Bibi

The CaptivateController tool has not been updated for years -- I haven't used Captivate 8 and don't know if the architecture has changed.

However, if you just want to pass a variable from HTML to your Captivate SWF, this should be possible as described earlier in this thread (Nov 4 2011).

Good luck

- philip

--

You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Bibi Lemtorp]

Hi Phillip,

Thank you for your quick reply. Are you referring to this section, it still looked like the controller was required. Do you mind clarifying, and again thanks so much for your reply.

In Captivate:

loadCPVariables();

In your HTML:

function loadCPVariables(){

   //add your CaptivateController code here

}

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and-development+unsubscribe@googlegroups.com.

[Bibi Lemtorp]

Essentially, I'm using a Captivate Widget, and instead of having the TextFields StudentName and StudentEmail as attachment shows, I want to force those variables from a HTML page.

Thanks again for your time. Any help is appreciated :-).

Bibi

[Philip Hutchison]

I see what you mean. 

Disclaimer: I haven't used Captivate for so long I am not certain I can give you the correct answer. But... it appears Captivate 8 gives you a clean method for doing what you require. https://helpx.adobe.com/captivate/using/common-js-interface.html

Here's one of their examples:

window.cpAPIInterface.setVariableValue("cpQuizInfoStudentID", "John"); 

 

Applying this example to your scenario, let's say you have the variable "learner_name" in your Captivate file, and the text field is set to display the value of the variable "learner_name". To populate the field, you can use the new JavaScript API. 

First, create a function in your HTML/JavaScript that will pass the learner's name. In HTML file:

var learner = "Bibi";

function setLearnerName(){

  window.cpAPIInterface.setVariableValue("cpQuizInfoStudentID", learner);

}

Then, in your Captivate file, when you are ready to send the name from the HTML file to your Captivate project, just invoke the JS function "setLearnerName()" from inside Captivate.

I haven't tried it, but in theory it shouldn't be too difficult to work out.

Good luck

- philip

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and...@googlegroups.com.

[Bibi Lemtorp]

Thank you!!!  I really appreciate your feedback. Looks like you have something that will solve my problem.  Really appreciate.

Bibi

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and-development+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and-development+unsubscribe@googlegroups.com.

[Philip Hutchison]

there's a typo in my example, should be

var learner = "Bibi";

function setLearnerName(){

  window.cpAPIInterface.setVariableValue("learner_name", learner);

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and...@googlegroups.com.

[Bibi L.]

Philip, thank you so much. Only if time permits on your end, I've still have some issues I wanted to see if I could run by you. Understood if not.

In my published Captivate 8 HTML file (attached), I added the following to the <head> section:

<script>

  var learner = "Bob Smith";

  function setLearnerName(){

     window.cpAPIInterface.setVariableValue("learner_name", learner);

}

</script>

In the CPTX Captive File, I created a "Text Caption" object and added $$learner_name$$" into it. On the master slide, I added the JS function call "var learner = "Bibi";" as screenshot shows.

It should be pretty simple, but I'm wondering if I need to do more javascript in the Captivate JS Editor to tell it to pull from the html file.

Any thoughts on this?

Bibi

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and-development+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and-development+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and-development+unsubscribe@googlegroups.com.

[Philip Hutchison]

I haven't tested it, but what you've shown me looks fine. Is it not working for you?

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and...@googlegroups.com.

[Bibi L.]

Yes, no matter what I try, it's not pulling the details to the variable $$learner_name$$. I looked at other examples, and should look pretty straight forward.  I added this to the published HTML in the HEAD section:

<script>

  function setName(){

 

     window.cpAPIInterface.setVariableValue("learner_name", "DisplayMe");

}

</script>

Within the CPTX, I added a Text Entry Field, created a "leaner_name" variable and added "setName();" in the javascript window. I added the CPTX file that I played with. I also added the setName(); call to the master slide to set the variable, but no luck so far. Any hints on what I'm off on?

Thanks so much for your time. I really appreciate.

Bibi

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and-development+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and-development+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and-development+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and-development+unsubscribe@googlegroups.com.

[Philip Hutchison]

I don't have Captivate, so I can't test your files, but you can break down the troubleshooting in a couple of ways.

1. Confirm that your variable is set up correctly in the Captivate file by using some internal Captivate scripting to set the value. (E.g. change the value of the text field using pure Captivate scripting.)

2. Confirm that window.cpAPIInterface works in your JavaScript by using JavaScript (not Captivate) to trigger a function call. You can create a link in your HTML that triggers it on click. I would actually use getVariableValue first, just to check if the JavaScript is correctly accessing the Captivate file.

Something like 

<a href="#" onclick="return getName()">Get username variable from Captivate</a>

<script>

function getName(){

    var value_from_captivate = window.cpAPIInterface.getVariableValue("learner_name");

    alert(value_from_captivate); //or console.log(value_from_captivate) if you're comfortable with the console

    return false; //stop the browser from trying to go to the # URL in the link

}

</script>

(Ensure your variable has a default value in Captivate, or else you'll just see an empty string when running this test)

If either of these fail, you know where to start digging. If both of these work, then perhaps your Captivate is not correctly invoking the JavaScript.

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "eLearning Technology and Development" group.

To unsubscribe from this group and stop receiving emails from it, send an email to elearning-technology-and...@googlegroups.com.