you're welcome 
Follow up question: I want to change the circles (with the question marks inside) to squares. I have edited the onTop.png and thought that would take care of it, but it did not.
How are you editing it? You should just be able to select onTop.png in the Resources Library, control-click and choose "Replace…" to select a new image. Does that work?
I tried that. I replaced the circular image with a square image but I think the shape it's placed in is also circular. Here's a screen grab of another experiment I tried. The quilt image is a square PNG file.
The "memoryCard" groups inside "memorysCards" all have a 50 px border radius set. If you change that to 0px in the Element inspector, it will not be clipped to a circle.
2 Likes
Sorry guys but I need more help! I edited the file and put in our own visuals, but for some reason the "?" are not working when we load it onto our site. (The preview works fine in both Safari and Chrome.)
I tried uploading it but the file size is too large so here's a link to the files on dropbox here.
That's a fun one; the problem is due to the fact that the document starts with a number. It boils down to:
- Hype uses the document name as the ID for the main container div; in your case it is
4wk21quiltmemorytas_hype_container - querySelector as used on line 42 of memoryGame() uses this ID here:
sceneElement = document.querySelector('#'+hypeDocument.documentId()+' > .HYPE_scene[style*="block"]'), //thx @maxZieb :) - querySelector's syntax doesn't let an initial ID with a number to work as expected and needs to be escaped
In the preview environment the document name is just "index" so it doesn't affect that.
There are two possible fixes for you:
- Re-export the file and name it to start with a letter instead of a number
- Change the line 42 to reformat the document ID to work:
sceneElement = document.querySelector('#'+CSS.escape(hypeDocument.documentId())+' > .HYPE_scene[style*="block"]'), //thx @maxZieb :)
I think we had a request a while ago to make sure that generated IDs always begin with a letter. The older HTML4 spec required this. This wasn't a high priority because we didn't have a lot of practical examples of numeric-starting IDs breaking stuff, but this is a good example of it.
3 Likes
Thanks... trying that fix now. Will let you know if it works
That worked!! Thank you Jonathan Deutsch 
2 Likes
I have yet another question on this: I used the memory game at the end of multi-slide hype document, but when you click the "Try again" button after playing the memory game, it takes you all the way back to the first slide. Is there a way to change the code so it just takes you back to the memory game? Hype doc here:
the reset is a simple reload ... so embedding the game in a widget aka iFrame should do fine out of the box ...
I tried to figure this out on my own (read up on iFrame, etc) but I can't figure out where to start? For example this site gave me good instructions but how do I apply this to my situation? https://www.w3schools.com/tags/tag_iframe.ASP
Using the example on that site, I wonder what is the src and the title in my case?
you can use the hype-widget-element and enter the url of the game (just host it anywhere) as src ... that's it
Hans, I'm curious if there is a way to solve this by editing the code of the memory game? The line that I was thinking might need to change is line 114 (//hypeDocument.showSceneNamed('Restarter', hypeDocument.kSceneTransitionCrossfade, 0.5);
No ...
Confused why you say no.
The file above works fine removing the window.location.href = window.location.href ;
and using
hypeDocument.showSceneNamed('Restarter', hypeDocument.kSceneTransitionCrossfade, 0.5)
with a widget, Rectangle iframe or otherwise..?
What am I missing ?
1 Like
in fact i did not have a look at the old script ... just trusted myself when applying a reload in the past 
so it may work ... but there may also be an issue in not reloading ... though i can't see a problem too when doing a rough step thru ...
1 Like
Lol.
I trusted you also and started setting up a hash/anchor version before I realised..
