0

I'm developing with h5p standalone plugin in react (nextjs), passing the path as prop to a Modal Component which render the h5p activity.

useEffect(() => {
    const initH5p = async (contentLocation) => {
    const { H5P: H5PStandalone } = require('h5p-standalone')
    const h5pPath = `https://cdn.thinkeyschool.com/h5p/${contentLocation}`

    const options = {
      id: 'THINKeyLesson',
      h5pJsonPath: h5pPath,
      frameJs: '/h5p/dist/frame.bundle.js',
      frameCss: '/h5p/dist/styles/h5p.css',
    }
    let element = document.getElementById('h5p_container')
    removeAllChildNodes(element)
    await new H5PStandalone(element, options)

    fireCompleteH5PTopic(H5P)
    setIsLoaderVisible(false)
    }
    initH5p(location)
  }, [location, session.data.user.id, course.slug, topic])

With that code, I get two h5p rendered in screen. So I'm using removeAllChildren() to eliminate them from the render.

 function removeAllChildNodes(parent) {
    console.log(parent)
    while (parent.firstChild) {
      parent.removeChild(parent.firstChild)
    }
  }

That hack is working fine, but when I try to send the xAPI statement to my database, it fires twice

const fireCompleteH5PTopic = async (H5P) => {
    H5P.externalDispatcher.on("xAPI", (event) => {
      // console.log('event fired')
      if (event?.data?.statement?.result?.completion) {
        setCounter(counter + 1)
        completeH5PTopic(event, session.data.user.id, course.slug, topic)
        return true
      }
    })
  }

Any help regarding why it fires twice? I think it may be related to h5p rendering twice too.

Thanks in advance.

I tried using a state to render only once, but it is not working.

Diego González Cruz
  • 133
  • 1
  • 9
  • The `useEffect` hook seems to be run twice. H5P Standalone will create two instances and attach them both, even though you're deleting the first instance's DOM. Also, you're attaching two listeners for xAPI statements that will both fire. The best solution would to make sure that `useEffect` is run only once, or you should simply keep track that the H5P instance has already been created and not do that again - and there is no need for your workaround then. – Oliver Tacke Jan 04 '23 at 22:55

0 Answers0