Trigger HTML5 Animation via JavaScript

ActivePresenter Support Questions
1

Problem:
Hey there :slight_smile:
I just wanted to know if it is possible to start a HTML5 Animation via Java Script.
The idea is that I Drag a dragsource on a droptarget. When this happens, the HTML5 Animation should be played. So I imagined the trigger like this:
image

But I can’t find anything on the internet that helps me to fill out the JavaScript with the right function. The animation is inserted as a Web Object via HTML package and the Entry Point is displayed, too.

Any help would be highly appreciated.

Kind reagards
Sarah

2

Hi,

It’s possible both conditions below are met:

  1. ActivePresenter HTML5 is allowed to access your HTML5 animation: You should host both ActivePresenter HTML5 and your HTML5 animation on the same domain.
    Otherwise, you need to enable cross-origin resource sharing for your HTML5 animation page so that it can be accessed by ActivePresenter HTML5.

  2. Your HTML5 animation provides a public function to play it.

// get HTML5 animation window and document from the web object name
var animationIframe =  prez.object('Web Object name').frameNode;
var animationWindow = animationIframe.contentWindow;
var animationDocument = animationIframe .contentDocument;
// call HTML5 animation public function to start it
// suppose the function is startAnimation(), attached to the window object
animationWindow.startAnimation();

Regards

3

Hi，
What if I want to trigger the ActivePresenter function in my HTML5 animation? How do I get the function I created in ActivePresenter from HTML？
Such as:

var doc = AtomiAP.presentations[0];
var myFunction = doc.getFunction('myFunction');
if (myFunction)
  myFunction(doc);

The above code is just scribbled by me, I hope you can provide the correct code. Thank you!

4

Hi @wei_xie,

In your ActivePresenter project, you need to assign your function as a property of an object that you can access from outside (e.g. the presentation prez object, window, AtomiAP):

// in ActivePresenter
prez.myFunction = function() { /* your function body */ };

// outside ActivePresenter (you may need to get AtomiAP object from the frame which it's embedded into)
var prez = AtomiAP.presentations[0];
if (prez.myFunction)
    prez.myFunction();

Regards

5

Hi ToanLS.

// in ActivePresenter
prez.myFunction = function() { /* your function body */ };

// outside ActivePresenter (you may need to get AtomiAP object from the frame which it’s embedded into)
var prez = AtomiAP.presentations[0];
if (prez.myFunction)
prez.myFunction();

Can you provide a sample project how to apply this code…

6

Hi Michae,

Please describe your problem in detail so that we can help.

Regards

7

Hi @ToanLS

I need to pass the value of variable in other presentation when button is click befor it open.

on first Presentaion:
var SecondPresentation= AtomiAP.presentations(“SecondPresentation.html”);
SecondPresentation.MyFunctions(string variableToPass);
SecondPresentation.activate;

on secondPresenation On load events:

var variableSend=MyFunctions();

8

Hi Michae,

Do you want to open the second presentation in a new browser tab and pass a parameter to it when the viewer clicks a button in the first presentation?
If so, you should pass the variable as a URL parameter when opening the 2nd presentation:

  1. Add an Execute JavaScript action to On Click event of the button in the first presentation
    var newPresentationUrl = new URL('path/to/your/presentation.html');
var variableName = 'name of your ActivePresenter variable';
var variableValue = prez.variable(variableName);
newPresentationUrl.searchParams.append(variableName , variableValue );
window.open(newPresentationUrl.toString(), '_blank');
  2. Get the URL parameter in On Load event of the second presentation:
    var variableName = 'URL parameter name, also variable name in 1st presentation';
var params = new URLSearchParams(location.search);
var paramValue = params.get(variableName);

Regards

9

Hi @ToanLS ,

Thank you this is what i need… It is also possible for presentation second to send back variable (Quiz Results) to presentation First? I need this to evaluate if capable to proceed to level 2 of my quiz…

10

Yes, it’s possible.
In the second presentation, you can use window.opener to get the window object of the first presentation to send variables back.
Below is the sample script in case two presentations are hosted on the same server:

// in 2nd presentation
var presentation1;
if (window.opener && window.opener.AtomiAP)
  presentation1 =  window.opener.AtomiAP.presentations[0];
if (presentation1) {
  // do something with 1st presentation, e.g set a variable
  var presentation2Score = prez.score(); // score of 2nd presentation
  presentation1.variable('variable name', presentation2Score )
}

Regards