Integrating an html page with javascript into hype project

#1

Hello,

First things first, I am not a programmer, but I have adapted a javascript hidden word game that I found and I would like to integrate it into a Hype project I am working on. It consists of an HTML page that contains the CSS, word list etc and two javascript files as well as using jQuery.
Is there a way to integrate it besides just putting a link to it in the hype project. I tried using the HTML widget but all I got was a small box and the solution button instead of the full grid. (see pictures)

Capture d’écran, le 2020-06-05 à 17.16.30
Capture d’écran, le 2020-06-05 à 17.16.301228×864 22.5 KB

Capture d’écran, le 2020-06-05 à 17.22.37
Capture d’écran, le 2020-06-05 à 17.22.372142×1356 387 KB

#2

Do you have the code somewhere? It is probably easier to advise for this particular bit of code if it is available, since it looks like it may require a bit of tinkering with to get working.

#3

Here is an example.

Note the jquery need to be first in the head then the wordfind.js and last wordfindgame.js

Add a button and two rects.
give the button the submit button id solveBTN.
Give the rects the respective puzzle-container and puzzle-words ids.
Add a on scene load JS function with the code

	   // An array with the words to show
            var words = ['cows', 'tracks', 'arrived', 'located', 'sir', 'seat',
               'division', 'effect', 'underline', 'view', 'annual',
               'anniversary', 'centennial', 'millennium', 'perennial',
               'artisan', 'apprentice', 'meteorologist', 'blizzard', 'tornado',
               'intensify','speed','count','consonant','someone',
               'sail','rolled','bear','wonder','smiled','angle', 'absent',
               'decadent', 'excellent', 'frequent', 'impatient', 'cell',
               'cytoplasm', 'organelle', 'diffusion', 'osmosis',
               'respiration'
           ];

            // Start a basic word game without customization !
            var gamePuzzle = wordfindgame.create(words, '#puzzle-container', '#puzzle-words');

            $("#solveBTN").click(function(){
                // Solve the puzzle !
                var result = wordfindgame.solve(gamePuzzle, words);
                console.log(result);
            });

Add your css to the head.

I used the css and code from.

Which I suspect is what you are using but as @jonathan says. Please always supply the relevant info, code, project example, links.

Helps us help you.

puz.hype.zip (95.0 KB)

1 Like
#4

Here is the html file and the two js files.

Thanks for your help.
TEST.zip (6.7 KB)

#5

Yes that is exactly where I got the code from. The complexity of it is way above my experience. :slight_smile:

#6

Is @MarkHunte’s answer a solution for you?

#7

Tried it but it doesn’t seem to work.

Envoyé de mon iPad

#8

. The example works.

What part is not working, can you post your example?

#9

Hello Mark,

Your example works perfectly but when I integrated it into my project and tried preview nothing happened, just a white screen. I copied the js files into resources, copied the css into the header of my project, copied the function also. I checked everything and it all seems to be the same as your example and yet it just won’t work.
Here is my project :
Maxime et Noémie - copie 2.zip (1.4 MB)
One thing that I noticed is different is that in my project in the « scene tab » it says « si charger mise en page » and in your example it says « si charger scène ». (My version of Hype is in French and I can’t change it to English) I don’t know why and I can’t seem to find the « si charger scène » anywhere. I can see that the scene change triggers the untitled function but since I don’t have that I put the trigger in the « si charger mise en page » . I’m obviously missing something but I can’t figure out what it is.
Thank you very much for your help.
Denis

#10

As I said.

In your project.

Remove the wordfindgame.js
and then add it again.

This will move it down in the order listed in the head file.

So it looks like this.

Screenshot 2020-06-08 at 23.00.06
Screenshot 2020-06-08 at 23.00.061580×160 65.5 KB

The order of which JS library loads first is sometimes essential as one library may reference code in another.
If the one that wants code from the other library is loaded first and needs that code immediately it will not find the code it requires and fail.

The wordfindgame.js needs code from the wordfind.js and the wordfind.js needs code from the jquery.

So the load order needs to be.

jquery
wordfind.js
wordfindgame.js

This order in Hype when adding to the resources can be done by the order you add them in.

Also in your answer1 function.

you have a var declaration in front of an if condition??.

var if (event.keyCode == 32) { // the space key

Remove the var.

2 Likes
#11

Thank you very much for your help @MarkHunte. It now works just fine. I should have looked more carefully, since wordfind.js was in front of wordfindgame.js in the resource list I just assumed that it would also be the same thing in the header, obviously the list is always in alphabetical order.
Thank you again for your help, it is what I like about Hype forum there is always someone willing to give people a hand.

Denis

2 Likes