Hi,
I am sure that one of the tumult experts will point out a better way of doing this.
But working with your project.
First, we need to move the :
<script language="JavaScript">
//--
function myCallback(hypeDocument, element, event) {
window.myhypedocument = hypeDocument;
}
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});
</script>
Out of the HTML widget and into the Hype documents <head.>
Document Inspector --> Edit Head Html.
In the jqPuzzle.js you need to setup the user defined callback:
// perform actions when the puzzle is solved sucessfully
success: {
fadeOriginal: false, // cross-fade original image [true|false]
callback: undefined, // callback a user-defined function [function]
// the function is passed an object as its argument
// which includes the fields 'moves' and 'seconds'
callbackTimeout: 300 // time in ms after which the callback is called
},
Setup like this:
// perform actions when the puzzle is solved sucessfully
success: {
fadeOriginal: true, // cross-fade original image [true|false]
callback: function myCallBack(results) {
// window.parent.window.myhypedocument.showNextScene();
window.parent.window.myhypedocument.functions().myFunction(window.parent.window.myhypedocument);} , // callback a user-defined function [function]
// the function is passed an object as its argument
// which includes the fields 'moves' and 'seconds'
callbackTimeout: 100 // time in ms after which the callback is called
},
Notice in that, a commented out:
window.parent.window.myhypedocument.showNextScene();
This if used will call the scene directly.
Notice that we call the window.parent then the window.myhypedocument…
We have to do this since the (I think) we have two window objects. The main one for the page and one for the HTML widget.
We need to get the stuff in the The main one.
We then have the line I left working:
window.parent.window.myhypedocument.functions().myFunction(window.parent.window.myhypedocument);
This calls the function in the hype documents.
An important things about the syntax of that linet.
window.parent.window.myhypedocument is basically the hypdocument
In the hype function to show the next scene we would use:
hypeDocument.showNextScene(hypeDocument.kSceneTransitionCrossfade, 1.1)
The hypeDocument.showNextScene… function needs to be told about the hypeDocument the the arguments in its parent function.
function myFunction(hypeDocument ......
The Parent Hype Function will get hypedocument * from the the first argument in the callback.
…ctions().myFunction(window.parent.window.myhypedocument);
So in the callback we must use window.parent.window.myhypedocument as the argument.
But in the hype document function we also need to change the function to.
window.myhypedocument.showNextScene(window.myhypedocument.kSceneTransitionCrossfade, 1.1)
I know, convoluted right. But once figured out not too hard.
Update:
@lriley3 correct a mistake in the project and post.
On Puzzle complete.hypetemplate.zip (2.6 MB)