Interactive elements not displaying

Awhile back we had problems with H5P on our web server. (The old thread is here: https://h5p.org/node/13156 )

Just now we uninstalled H5P and reinstalled from scratch so that we'd be starting over with the newest version. But the problem remains the same. It works on my localhost (XAMPP) but not on the actual server so it must be a server issue, but we can't figure out what it is. (Everything else on the server is working fine, WP, plugins, etc.)

Please see screenshots:

h5p-field.png is what we see when we try to create an Interactive Video activity. There's a shortcode where the interactive editor should be.

h5p-unabletocopy.png is what happens when we try to save a new H5P activity. (This sounds like a file permissions error but the directory permissions seem fine?)

h5p-console.png shows the console error when trying to view a H5P activity (that I created on my localhost)

h5p-console2.png shows the console error when choosing "Dialog Cards" from the "Add New" drop-down menu

h5p-libraries.png shows the partial libraries list, they all seem to be there

One thing we've noticed is that the .js and .css files generated in wp-content/uploads/h5p/cachedassets are basically empty; the .css file has blank lines, the .js has lines with just a single semicolon.

Any ideas??? Thanks

For some reason the screenshots didn't get saved. Trying again ...

fnoks's picture

Hi,

You have probably found what is causing your problems, i.e. the empty JS and CSS files. I will try to help you find the root cause. There are a couple of things you should check:

  1. Is the library files present? They are located in the wp-content/uploads/h5p/libraries/ folder. You could eg verify the presence of wp-content/uploads/h5p/libraries/FontAwesome-4.5/h5p-font-awesome.min.css
  2. Are there any warnings or errors in the webserver's log?
  3. Verify the correct permissions for the wp-content/uploads/h5p/cachedassets

We are getting asimiliar issue. It pertains mainly to when adding single choice sets to interactive videos. When we try do that, the whole video disappears (there is no update).While in the local server all goes fine. Any suggestions? 

I forgot to respond to this thread, but as it turns out, our problem was with our .gitignore file. We're using git (Stash) for version control of our WordPress site. We do all modifications (including plugin updates, etc) locally, then push the changes to the server. The problem was, we had /wp-content/uploads in the .gitignore, and didn't realize that H5P stores a bunch of its files there. So when I would push from my desktop to the server, the H5P files in uploads weren't getting to the server. (Even though all of the libraries showed up normally when I checked in WordPress, many of the libraries' necessary files were missing!) So we removed /wp-content/uploads/h5p from .gitignore and everything is working fine. :)

This may or may not help you in your case, but that was the issue for us.

fnoks's picture

Thanks for sharing :)

Thanks for sharing your solution. But, from our side, we are still having this issue, it refuses to update whenever we add a new single choice answer. We tried to start the installtion again on our online server, it worked for the first time (the single choice), but then it stopped working. Any suggestions are appreciated.

fnoks's picture

Could you please check your browser's console to see if there are any JacaScript errors reported?

Hello:

These are the errors we are getting

SyntaxError: unterminated regular expression literal var a={};a.ABSOLUTE_PATT=/^(?:\w+:)?\/{2}/i,a.RELATIVE_PATT=/^[./]*?\   ecd933d...abd1.js (line 141, col 6473)Unable to find constructor for: H5P.InteractiveVideo 1.10 console.error(err.stack ? err.stack : err);h5p.js?ver=1.7.2 (line 865)TypeError: instance is undefined if (instance.getCopyrights !== undefined) {  
fnoks's picture

It looks to be a problem related to SoundJS (unterminated regular expression). We have never got any reports on this before. Which browser and version are you using? 

The error message we sent was on Firefox 44, but we keep getting the same issue (on and off) on chrome also. So, for example we try using chrome on one video and it seems to work on a certain machine. Then we use another machine and we can't update and all bets are off. Please note that this is only when we are dealing with single choice questions (we need these type of questions in our videos). Also, note that when we are working on a local server all behaviour is fine.

 

 

fnoks's picture

Is it possible to get access to the site? I.e, I think I need to be able to see it myself to be able to assist you further.

I am facing the above error and i checked all the above rerferences  everything is fine but i am facing the problem

icc's picture

Which platform are you on, WordPress, Drupal or Moodle?
Are you getting the same error message in the console?

I am working on word press i am not Getting erron in console 

I am working on word press i am not Getting erron in console 

icc's picture

Do you get any error messages in your web server's error_log file?

Try adding the following to your wp-config.php and then take a look at console error message again. Which file is it coming from?

define('H5P_DISABLE_AGGREGATION', true);

 

It sounds like some of the libraries failed to install. Try downloading the file attached on the Update/install all recommended content types page and upload it to your libraries page. Verify that the Interactive Video Editor library is installed.

I updated all the recomended content types now it is showing below as attaches in screen shot

Attachments: 
icc's picture

I cannot see any error messages in your browser. It seems the editor for interactive video is missing. Did you manage to find it in the libraries list?

Chrome

H5P wordpress v 4/9

 

I hav try to add 

define('H5P_DISABLE_AGGREGATION', true);

 

 

Error the edit page :

[field:group:wizard:interactiveVideo]

But still this error in the console :

 

error in the console : Uncaught TypeError: Cannot read property 'prototype' of undefined

    at h5p-true-false.js?ver=1.2.4:477

    at h5p-true-false.js?ver=1.2.4:481

(anonymous) @ h5p-true-false.js?ver=1.2.4:477

(anonymous) @ h5p-true-false.js?ver=1.2.4:481

h5p-true-false-answer-group.js?ver=1.2.4:1 Uncaught TypeError: Cannot set property 'AnswerGroup' of undefined

    at h5p-true-false-answer-group.js?ver=1.2.4:1

(anonymous) @ h5p-true-false-answer-group.js?ver=1.2.4:1

h5p-true-false-answer.js?ver=1.2.4:1 Uncaught TypeError: Cannot set property 'Answer' of undefined

    at h5p-true-false-answer.js?ver=1.2.4:1

(anonymous) @ h5p-true-false-answer.js?ver=1.2.4:1

summary.js?ver=1.8.4:127 Uncaught TypeError: Cannot read property 'prototype' of undefined

    at summary.js?ver=1.8.4:127

    at summary.js?ver=1.8.4:831

(anonymous) @ summary.js?ver=1.8.4:127

(anonymous) @ summary.js?ver=1.8.4:831

h5p-interactive-video.js?ver=1.17.5:1 Uncaught TypeError: Cannot read property 'ENDED' of undefined

I have also update my librairies.... Any help is welcome please !

Regards

icc's picture

It looks like there may be some files missing. If you open the Network tab, are there any requests marked in red? 

Hello,

Np there is not... All the request are in code 200.

TV

icc's picture

Do you have a lot of content? If not I would recommend that you try to reinstall the plugin.
If you do have a lot of content you should try to "reinstall" the content types.
This can be done by enabling the following in wp-config.php: 

define('WP_DEBUG', true);
error_reporting(E_ERROR | E_WARNING | E_PARSE);
define('H5P_DEV', true);
define('H5P_DISABLE_AGGREGATION', true);

Then the next step is to head over to the H5P Libraries page where you can upload content types. Download this .h5p file and then upload it to the Libraries page.
When you are done it's important that you remove these lines from the config file again as they may cause trouble in the future.

Hey, yes i'have try to reinstall H5P but it delete all my content. Now I have this error : 

 

VM479:5502 Uncaught TypeError: H5P.DragNDrop is not a constructor

    at new DragNBar (eval at ns.libraryRequested (h5peditor.js?ver=1.10.3:78), <anonymous>:5502:16)

    at eval (eval at ns.libraryRequested (h5peditor.js?ver=1.10.3:78), <anonymous>:46018:16)

    at Object.llc.getLibraries (h5peditor-library-list-cache.js?ver=1.10.3:45)

    at Object.llc.runQue (h5peditor-library-list-cache.js?ver=1.10.3:76)

    at Object.success (h5peditor-library-list-cache.js?ver=1.10.3:57)

    at c (VM377 jquery.js:2)

    at Object.fireWith [as resolveWith] (VM377 jquery.js:2)

    at k (VM377 jquery.js:4)

    at XMLHttpRequest.r (VM377 jquery.js:4)

DragNBar @ VM479:5502

(anonymous) @ VM479:46018

llc.getLibraries @ h5peditor-library-list-cache.js?ver=1.10.3:45

llc.runQue @ h5peditor-library-list-cache.js?ver=1.10.3:76

success @ h5peditor-library-list-cache.js?ver=1.10.3:57

c @ jquery.js?ver=1.10.3:2

fireWith @ jquery.js?ver=1.10.3:2

k @ jquery.js?ver=1.10.3:4

r @ jquery.js?ver=1.10.3:4

VM479:5502 Uncaught TypeError: H5P.DragNDrop is not a constructor

    at new DragNBar (eval at ns.libraryRequested (h5peditor.js?ver=1.10.3:78), <anonymous>:5502:16)

    at C.H5PEditor.widgets.dragQuestion.H5PEditor.DragQuestion.C.activateEditor (eval at ns.libraryRequested (h5peditor.js?ver=1.10.3:78), <anonymous>:1001:16)

    at eval (eval at ns.libraryRequested (h5peditor.js?ver=1.10.3:78), <anonymous>:942:16)

    at Object.llc.getLibraries (h5peditor-library-list-cache.js?ver=1.10.3:45)

    at C.H5PEditor.widgets.dragQuestion.H5PEditor.DragQuestion.C.setActive (eval at ns.libraryRequested (h5peditor.js?ver=1.10.3:78), <anonymous>:939:34)

    at C.H5PEditor.widgets.wizard.H5PEditor.Wizard.C.showTab (eval at ns.libraryRequested (h5peditor.js?ver=1.10.3:78), <anonymous>:34208:25)

    at HTMLAnchorElement.eval (eval at ns.libraryRequested (h5peditor.js?ver=1.10.3:78), <anonymous>:34083:12)

    at HTMLAnchorElement.dispatch (VM377 jquery.js:2)

    at HTMLAnchorElement.v.handle (VM377 jquery.js:2)

icc's picture

Strange, it seems that you're still missing files. Maybe the install is not able to write the files to your disk. Have you checked the files permission of the wp-content/uploads/h5p folder?

You could try installing H5P on another site/server using a default WordPress image and the just transfer the wp-content/uploads/h5p/libraries to the server where it's not working.

Seeing the unabletocopy message and the following error screenshot.

Have tried updating the libraries.

 

Attachments: 
tomaj's picture

@alexfurr is also having some problems with what appears to be the same issue

when i add a question , student should be  attempt & cont...video 

fnoks's picture

There is currently no possibility to hide the play/pause buttons. I did not understand what you meant by "student should be  attempt & cont...video"?

Unable to find constructor for: H5P.MultiChoice 1.10 .....this error occur when i try. Please tell me solution ?

BV52's picture

Hi tbsch,

In order to give your report the best chance of getting answered, please include the following information:

  1. Detailed steps to reproduce the bug (exactly how and when did it happen)
  2. Platform and version number. E.g. Drupal, Wordpress, Moodle.
  3. Mobile or Desktop
  4. Browser: Chrome, Firefox, Safari etc
  5. H5P plugin version
  6. H5P content type and version (if a content type was used), and a sample URL or attached H5P.
  7. Any browser console errors
  8. Any PHP errors
  9. Screenshots if it's a visual problem

The more information you provide, the quicker the community will be able to fix it and the quicker you'll have a working solution!

-BV52

1)  When i add MultiChoice question and i tried to attempt then it was not working and This erro occur Unable to find constructor for: H5P.MultiChoice 1.10 in console.

2) Wordpress ans h5p plugin Version 1.10.1.

3) Dekstop.

4) Browser: Chrome.

5) Console Error :  Unable to find constructor for: H5P.MultiChoice 1.10

 

tim's picture

Have you tried updating to the latest version of multiple choice?

Uncaught TypeError: H5P.error is not a function

I have posted two time didn't get any single reply from you.

otacke's picture

Hi tschb!

I am sorry that you feel you're having to wait long, but we cannot divert an infinite amount of development time into free support. This forum is intended to be(come) a community forum.

You're describing two different errors. The first one (Unable to find constructor for: H5P.MultiChoice 1.10) indicates that version H5P.MultiChoice in version 1.10 cannot be loaded, e.g. because the libraries are missing. Have you tried updating contents to version 1.11 which is the latest version? You can do that in the H5P library settings of Wordpress.

The second error (H5P.error is not a function) seems to indicate a problem with the very core of H5P. What have you done in between your posts?

Best,
Oliver

Hi

I didn't any thing with post. Any other solution do you have. Please suggest me solution to resolve this error.

otacke's picture

Hi tbsch!

What did you do before the problem occurred first?

Best,
Oliver

Hi 

I didn't anything only Fill in the Blanks is working proper and other is not woorking in console i am getting this error "Uncaught TypeError: H5P.error is not a function" finally.
How can i resolve this. Please help.

I put all js ,css and iframe of h5p in my html and stored content data in my database and show in i frame using js.  BUt after putting that Only Fill in the blanks is working fine but other is not. Pesae have look on given screen shot beloow so you can get better.

1) https://prnt.sc/jjd574
2)https://prnt.sc/jjd5wo

otacke's picture

Hi tbsch!

Thanks for providing some additional information. I'm actually not sure what you mean with "I put all js ,css and iframe of h5p in my html". If you're using WordPress as you mentioned before, you should only have to add the shortcode usign the button on top of the editor field to include H5P content.

It's very strange that some content type is working and another one is causing a problem in the core. Without having access to your system, I guess I could only advise you to make a backup of your old content, and after that to delete the plugin and reinstall it.

Best,
Oliver

Actually i integrated this plugin in CI . there it is occuring this error.

otacke's picture

Hi tbsch!

If I understand correctly, you have created your own custom environment that's not based on WordPress, moodle or Drupal. I have no knowledge about CI, so I fear there's nothing I can do. Maybe there's someone in the community who can help out.

Best,
Oliver