Works in Preview but won't upload to Wordpress website

1

When I try to upload the file, the Hype plugin says [hypeanimations_anim id="Erreur"]

It's a from a trivia game tutorial from Darrens Corner:
Part9.zip (827.9 KB)

2

Are you able to upload a blank Hype document with a single rectangle, or is this the only document that fails?

3

Uploaded many Hypes before and after. Darren's is the only one that fails. The strange thing is that it works fine in preview mode.

4

Could you try changing your Wordpress default language to English and see if that changes anything? I can't reproduce the issue unfortunately.

5

Thanks for responding Daniel. Were you able to upload a .oam to an online Wordpress site and successfully run the game? BTW, my Wordpress default language is English. The error message in a foreign language is part of the mystery.

6

Yeah, I tested it on our blog and it's all working as expected (though too large for our layout)

Screenshot 2023-06-14 at 8.49.41 AM
Screenshot 2023-06-14 at 8.49.41 AM1554×1660 98.9 KB

Do you see anything when you enable debug logs for Wordpress?

7

Since you did not get the error message, I started over again with the original download and successfully uploaded an OAM and got the same results as you.

The text "Trivia Title Here" instead of the actual title "US PRESIDENT TRIVIA" tells me that neither of us uploaded a working version of the game, which you can see in preview mode.

The OAM did not load the data required to play the game. When you press START, it should show the first question about Harrison, but I assume your uploaded version like mine just displayed "QUESTION QUESTION QUESTION"

In other words, the problem now is how to get the app to load the data from the included triviainfo.js file.

Any ideas?

Thank you very much for your help!

8

make sure that the triaInfo.js is within you wordpress-embed.

loading it in the head within hype would require an iframe-embed in wordpress (or adding the js manually to wp or load the js in Hype via (prepare)sceneload).

9

Unfortunately I don't know how to do any of what you suggest. What would be the easiest procedure?

I will look up how to do it, unless it's a simple procedure that you can describe in a reply.

Thank you so much for your help!

10

Just use an iFrame in WordPress. Simple setting in the Tumult Hype WordPress plugin.

11

Thanks for the suggestion. I tried setting the container in the Hype plugin to iframe, but it didn't help. Any other ideas?

12

If you can direct message me Wordpress login credentials I'd be happy to take a closer look.

13

The initial problem of getting [hypeanimations_anim id="Erreur"]

Is because the .oam file is larger than 2M. ( there abouts)

It seems that an oam export produces a default image of the first scene which in this case will be sized at 1.9M
( @Daniel, is this a poster image?, is it needed ?. )

All the other files including your own image takes this over 2M

@Daniel its may be possible you were able to load the file because your blog may be set to allow larger sizes?. afaik wordpress sites are limited to about 2M upload max set by the web server.

Issues:
1, The oam file is too large to upload.

--

2, Don't use window. as a global, use this.

3, wordpress, as far as I can see is not including the head file so the triviainfo.js is never loading.
This may be just how the plugin works?.

--

in issue 1,

Because of the scene size, when exported as an oam. the oam default image will be large, in this case 1.9M

You can either make the scene size smaller or reduce you own image size.

In my tests, I just reduced your image size. Because of your image content you do not notice the reduction visually.

You can of cause do both reduce scene size and your image size.

(If you want to see what the oam contents are, just right click the file and open with Archive Utility.app. )

in issue 2

Change the global definition from window. to this.

in issue 3
You will need to load the js data by other means.

You can just place the data in a hype function

i.e

function initializeSplash(hypeDocument, element, event) {
  this.numberOfQuestions = 	5;
  this.currentSlide = 		0;
  this.currentScore = 		0;
  this.title = 				"US PRESIDENT TRIVIA";	
.....		
	hypeDocument.getElementById("title1").innerHTML = this.title;
}

or if the actual intent is to load the data from some external file you can load the file via creating and appending it as script link after hype has loaded.

The call function to do this would be placed in a hype function.

I have been lazy and just tested this example,

Changing file1_url in the line loadScript("file1_url")
to the url of the file on my server;

https://markosx.com/hypeTests/triviaInfo.js

And also added your line hypeDocument.getElementById("title1").innerHTML = this.title;

to the inside of the loadScript("file1_url") function

const loadScript = (FILE_URL, async = true, type = "text/javascript") => {
    return new Promise((resolve, reject) => {
        try {
            const scriptEle = document.createElement("script");
            scriptEle.type = type;
            scriptEle.async = async;
            scriptEle.src =FILE_URL;

            scriptEle.addEventListener("load", (ev) => {
                resolve({ status: true });
            });

            scriptEle.addEventListener("error", (ev) => {
                reject({
                    status: false,
                    message: `Failed to load the script ＄{FILE_URL}`
                });
            });

            document.body.appendChild(scriptEle);
        } catch (error) {
            reject(error);
        }
    });
};

loadScript("https://markosx.com/hypeTests/triviaInfo.js")
    .then( data  => {
        console.log("Script loaded successfully", data);
hypeDocument.getElementById("title1").innerHTML = this.title;
    })
    .catch( err => {
        console.error(err);
    });

there are plenty of other ways to fetch data into hype examples on the forum.

in both cases you do not need th wrap the data in a function itself.
I.e you do not need to put the data inside of

function getinfo(){
....
}

see
https://markosx.com/hypeTests/triviaInfo.js

2 Likes
14

Here is what Chat GPT has to say about increasing the upload maximum:

There are several ways to increase the upload_max_filesize in WordPress. Here are a few common methods:

  1. Edit php.ini File: If you have access to your server's php.ini file, you can increase the upload_max_filesize directive. Here's how:

    • Locate the php.ini file (often found in the etc or public_html folder).
    • Open the file in a text editor.
    • Find the upload_max_filesize line and increase the value (for example, to 64M).
    • Save and close the file.
    • Restart your server so the changes take effect.

  2. Edit .htaccess File: If you can't access php.ini, you might be able to edit the .htaccess file instead. Here's how:

    • Locate the .htaccess file (usually in the root directory of your WordPress installation).

    • Open the file in a text editor.

    • Add these lines to the bottom:

      php_value upload_max_filesize 64M
php_value post_max_size 64M
php_value max_execution_time 300

    • Save and close the file.

  3. Edit wp-config.php File: Another option is to increase the memory limit in your wp-config.php file. Here's how:

    • Locate the wp-config.php file (usually in the root directory of your WordPress installation).

    • Open the file in a text editor.

    • Add this line to the bottom:

      define('WP_MEMORY_LIMIT', '64M');

    • Save and close the file.

  4. Contact Your Hosting Provider: If you're uncomfortable editing these files or don't have the necessary permissions, you can contact your hosting provider and ask them to increase the upload_max_filesize for you.

  5. Use a Plugin: There are also WordPress plugins that can increase the upload_max_filesize. Just be cautious, as plugins can sometimes cause conflicts or security issues.

Please note that these instructions assume a typical LAMP (Linux, Apache, MySQL, PHP) stack. If you're using a different server stack, the exact steps might vary.

Lastly, remember to back up your site before making any changes. If something goes wrong, you'll be able to restore your site to its previous state.

15

Thank you MaxZieb, I already increased the upload max and uploaded my version of the quiz, which still doesn't work.

So thank you MarkHunte for the extensive code explanation. I will now attempt javascripting.

You can see if I have any success by clicking on the quiz button on the website I'm building, FineDay Time Travel

Thanks!

1 Like
16

Sidenote: About .oam … they are only .zip … so you can just rename them to .zip, unpack and remove the big image. Then pack them again, rename back and upload. The poster image feature has unfortunately still no option to disable in OAM.

1 Like
17

Good idea.

18

Hmm,
Have you got that to work?. Even when I make changes and just recompress it does not work.
The animation block code shows as [hypeanimations_anim id=""] and does not upload.
Did try and edit the.xml file also with no joy.

19

@dsantamonica

By the way here is my test oam which links to the data externally.

oam

pine.oam.zip (1.9 MB)

project

pine.hype.zip (339.1 KB)

1 Like
20

Thanks to MarkHunte's code switching "this" for "window" and MaxZieb's suggestion to use iFrame, the quiz now works olnline!

Thank you everyone for your suggestions!

However, I'm not done because using "shrink to fit" leaves a big blank area above the top of the quiz on a vertical iphone.

I tried adding layouts, but the quiz stopped working.

1 Like