Hi Ed!
Sorry I’m late to the Party! 

There is another way to approach this situation - it is not better - just another technique in the toolbox - that might come in handy on some other project. This approach is very straightforward but takes a bit of text to explain. We will be adding code just to the Head HTML
and no where else.
The reason I am showing this approach is this is how the original document was designed - the preponderance of the code that runs the show is in the Head HTML
section. Sometimes when You are using a pre-existing document’s code it is advantageous to go with the flow. While utilizing Hype’s API in the Head HTML
section is not intuitive (for a non-coder like myself anyway) it is easy to set up.
Hype Demo: matchingcards-v3_JHSv1.hype.zip (26.6 KB)
Overview
The new code we are adding to the script in the “Head HTML” will track the number of sets successfully matched and when they are all matched - bingo - we go to the next scene (or what ever You want to do). This new code is commented~annotated as “NEW CODE” in the Demo.
We will leave the "init"
function as is.
The line numbers sited are the line numbers in the “Head HTML” in the Hype project. All the NEW CODE is annotated~commented in the attached Demo.
There is one major NEW CODE section in the Head HTML script that sets things up - the rest is just a few lines of code.
Details
One drawback with code in the Head HTML
is that You can not use Hype’s API straight away as the Head
loads before the rest of the document. BUT there is a work around using a callback
routine which basically says “Hey! When ‘Hype’ loads run this script”. Inside this callback
is a function that runs Hype API code e.g.
allCardsMatched = function sceneChange(){
hypeDocument.showNextScene(hypeDocument.kSceneTransitionCrossfade, 1.1);
}
This callback
routine runs lines 9-24 including lines for spacing and comments. Much of it is boilerplate code (used for setting things up). The key items are on Lines 12, 15-16:
Line 12 - find out the number of .memory-cards
& divide the number of “cards” by 2 (i.e. 2 per set).
We then store this number (4 in the Demo) in the variable “numOfSets”:
numOfSets = Number((document.querySelectorAll('.memory-card').length)/2);
Lines 15-16 - store sceneChange()
in the variable allCardsMatched
(used in line 87 below)
allCardsMatched = function sceneChange(){
hypeDocument.showNextScene(hypeDocument.kSceneTransitionCrossfade, 1.1);
}
> The rest of the NEW CODE is very basic:
Line 33: Set up a variable “cardSetMatchTotal” to track the number of sets.
Line 66: If there is a card match > add 1 to “cardSetMatchTotal”.
Lines 86-87: if “cardSetMatchTotal” == the numOfSets
variable (line 12) then run the function expression stored in the "allCardsMatched"
variable (i.e. sceneChange()
> lines 15 & 16 above).
The "callback"
routine for context:
function myCallback(hypeDocument, element, event) {
//how many sets @ 2 "cards" per set so we divide the number of cards by 2
numOfSets = Number((document.querySelectorAll('.memory-card').length)/2);
//Below is your "custom" function (placed in a variable which is then called like a function i.e. allCardsMatched();
allCardsMatched = function sceneChange(){
hypeDocument.showNextScene(hypeDocument.kSceneTransitionCrossfade, 1.1);
}
return true;
}
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});