Help me adding an API into a DialogCards

Submitted by HarmonyMandarin on Sat, 01/20/2024 - 05:34
Forums: 
Developers

Hi,

I'm using Wordpress and an API to show a Tooltip on hovered text (chinese character). 

I try to create a Dialog Card quiz with a chinese character as the answer, and I want to show the tooltip when user hover the chinese text by using this API. The API work by adding these lines before </body> tag:

<script src="//mandarinspot.com/static/mandarinspot.min.js" charset="UTF-8"></script> <script>mandarinspot.annotate('.textClassName');</script>

 

It works on my site Post, but Not working on the H5P content (DialogCards). I also trying to change the Class Name to whatever I found when I Inspect Element, but still not works.

I've searching for the solution and learn & try this H5PMods, but didn't work because I'm not good at coding, so in the end I'm looking for a solution here, and hope you guys can help me out.

Content types: 
Dialog cards
wordpress
otacke's picture

otacke

Thu, 01/25/2024 - 22:20

The H5PMods plugin (which is a template or sample only) is the right approach. You will need the h5pmods_alter_scripts hook to add a script into the H5P iframe that can call that external script once the DOM is ready to be parsed.

HarmonyMandarin

Fri, 01/26/2024 - 05:23

Hi, 

I've uploaded my JS file to /wp-content/uploads/h5p, and add this script by using Code Snippet plugin (Run in Frontend only):

function h5pmods_alter_scripts(&$scripts, $libraries, $embed_type) {
  if (isset($libraries['H5P.DialogCards'])) {
    $scripts[] = (object) array(
      // Path can be relative to wp-content/uploads/h5p or absolute.
      'path' => '/mandarinspot.min.js',
      'version' => '' // Cache buster
    );
  }
}
add_action('h5p_alter_library_scripts', 'h5pmods_alter_scripts', 10, 3);

 

Today I just noticed that the JS didn't run, I can't find the JS in Page Source (Ctrl+U). Is there something wrong with the script above?

 

otacke's picture

otacke

Fri, 01/26/2024 - 09:45

The "path" value most likely does not make sense.

As I said in my previous post: You will need to load a local custom script (just like the WPMods plugin template loads a script for scoring) and there wait for the page to be loaded and only then include the external script from the other site to be sure that the DOM it wants to interact with is loaded.

Best,

Oliver 

HarmonyMandarin

Fri, 01/26/2024 - 13:16

Thank You for your explanation.

But I'm not sure about the local custom script, since I'm not good at scripting/coding.

I thought it gonna be easy to implement it without any custom script. If so, I will stop it here, unless someone read this post and help me create the custom script :D

Thank You for your help.