Hello:
I could use some help to merge two hype projects together. I want to add the Jigsaw example onto the Hype Website Template both created by @Photics . I copied and pasted what I could to start and then worked out how to get the javascript files into the main attached resource file area. What I am finding is the added jigsaw hype program mouse click operations not active to select puzzle pieces now after my first attempt .
The two templates I started with are:
I ultimately want to learn what is the best way to merge hype files or custom hype components. Any helpful hints much appreciated! Patrick McLean
Tinkering a little more, I was able to add the puzzle to the web page using the symbol option, however, I would like to show another scene behind the puzzle after the puzzle is completed. Is there a preferred method to realize the puzzle was completed to set an action to hide the finished puzzle and show another scene? Any suggestions welcome. Thank you for reviewing this item! Patrick McLean
Hi:
I could use some help on the following. I am still stuck on how best to determine when all puzzle pieces have been dragged back to their original starting positions so that I can do another action in javascript or show a different scene. I am just learning at this point. Any helpful hints appreciated!!! PM
I have added some code at the end of the check() function that tests each piece against its starting value:
function checkSolved() {
var numberOfCorrectPieces = 0;
var totalPieces = starting.length;
for(var i = 0; i < totalPieces; i++) {
var pieceID = starting[i][0];
var pieceElement = hypeDocument.getElementById(pieceID);
var currentX = hypeDocument.getElementProperty(pieceElement, 'left');
var currentY = hypeDocument.getElementProperty(pieceElement, 'top');
var currentRotation = hypeDocument.getElementProperty(pieceElement, 'rotateZ');
console.log(currentRotation);
var startingX = starting[i][1];
var startingY = starting[i][2];
if(currentX == startingX && currentY == startingY && (currentRotation % 360 == 0)) {
numberOfCorrectPieces += 1;
}
}
console.log("solved " + numberOfCorrectPieces + " of " + totalPieces);
var isPuzzleSolved = (numberOfCorrectPieces == totalPieces);
if(isPuzzleSolved == true) {
// do something here
alert("congrats, you are a genius!");
}
}
// only check when done with the drag
if(event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd) {
window.setTimeout(checkSolved, 350); // 350 is the "d" of .25 with .1s padding
}
Where it says:
// do something here
alert("congrats, you are a genius!");
You'll want to replace that with your complete action. If it is just showing a different scene, it would be something like:
