无法自定义交互式javascript内容

我们正在使用Moodle版本3.5和H5P插件进行交互式视频。我们需要在提交按钮上添加另一个操作

请检查链接。回答问题后，将显示一个摘要屏幕，如下所示：

函数checkclick（）
{
$（文档）.ready（函数（）{
$（“.h5p交互式视频终端屏幕提交按钮”）。单击（函数（）{
警报（“已提交”）；
});
});
}
$（文档）.ready（函数（）{
iframe=H5P.$body.contents（）；
iframe.find（“.h5p交互式视频结束屏幕提交按钮”）。单击（函数（）{
警惕（“你好”）；
});
});
//H5P.$body.contents（）.find（“.H5P交互式视频结束屏幕提交按钮”）
//$（文档）.ready（函数（）{
//var button=H5P.$body.contents（）.find（“.H5P交互式视频终端屏幕提交按钮”）；
//属性（“id”、“myclass”）；
//控制台日志（按钮）；
// });

尝试了上述技术以在单击按钮时获取警报，但未成功。

更改此选项：

$(document).ready(function(){
    iframe=H5P.$body.contents();
    iframe.find(".h5p-interactive-video-endscreen-submit-button").click(function(){
      alert("hello");
    });
});

为此：

$(document).ready(function(){
    iframe=H5P.$body.contents();
    $(document).on('click',function(){
        if(iframe.find(".h5p-interactive-video-endscreen-submit-button").is(":hover")){
          alert('hello');
        }
    });
});

我通常在元素点击无法检测到且有效时执行此操作。

更改此选项：

$(document).ready(function(){
    iframe=H5P.$body.contents();
    iframe.find(".h5p-interactive-video-endscreen-submit-button").click(function(){
      alert("hello");
    });
});

为此：

$(document).ready(function(){
    iframe=H5P.$body.contents();
    $(document).on('click',function(){
        if(iframe.find(".h5p-interactive-video-endscreen-submit-button").is(":hover")){
          alert('hello');
        }
    });
});

---

我通常在元素点击无法检测到且正常工作的情况下执行此操作。

H5P使用由不同用户操作触发的xAPI语句。点击submit按钮时，您可以收听H5P.InteractiveVideo触发的完整语句。这样，您就不必依赖DOM

document.addEventListener('readystatechange', function() {
  // Run when document ready state is complete
  if (document.readyState !== 'complete') {
    return;
  }

  // H5P emits xAPI statements that can be tracked using H5P.externalDispatcher
  if (!H5P || !H5P.externalDispatcher) {
    console.warn('Cannot use H5P.externalDispatcher');
    return;
  }

  H5P.externalDispatcher.on('xAPI', function(event) {
    const xAPI = event.data.statement;

    /*
     * The submit button og H5P.InteractiveVideo triggers an xAPI event with the
     * verb 'completed' for the context of IV, so we can check for xAPI+
     * statements for that.
     *
     * verb.id is a mandatory property of xAPI statements, context is optional,
     * hence the checks.
     */
    const verbIsAnswered = xAPI.verb.id === 'http://adlnet.gov/expapi/verbs/completed';
    const contextIsIV = xAPI.context && xAPI.context.contextActivities && xAPI.context.contextActivities.category &&
        xAPI.context.contextActivities.category.length > 0 &&
        xAPI.context.contextActivities.category[0].id &&
        xAPI.context.contextActivities.category[0].id.indexOf('H5P.InteractiveVideo') !== -1;

    if (!verbIsAnswered || !contextIsIV) {
      return
    }

    // Your function
  });
});

---

您应该使用H5P提供的alter_scripts钩子，而不是将其硬编码到官方源代码中（我假设您这样做是因为您的示例中的script标记）。它允许您在需要时向特定H5P内容添加自定义脚本，例如仅向H5P.InteractiveVideo添加自定义脚本。请比较一下。使用钩子，每当有IV的更新时，您将不需要一次又一次地添加更改。

H5P使用由不同用户操作触发的xAPI语句。点击submit按钮时，您可以收听H5P.InteractiveVideo触发的完整语句。这样，您就不必依赖DOM

document.addEventListener('readystatechange', function() {
  // Run when document ready state is complete
  if (document.readyState !== 'complete') {
    return;
  }

  // H5P emits xAPI statements that can be tracked using H5P.externalDispatcher
  if (!H5P || !H5P.externalDispatcher) {
    console.warn('Cannot use H5P.externalDispatcher');
    return;
  }

  H5P.externalDispatcher.on('xAPI', function(event) {
    const xAPI = event.data.statement;

    /*
     * The submit button og H5P.InteractiveVideo triggers an xAPI event with the
     * verb 'completed' for the context of IV, so we can check for xAPI+
     * statements for that.
     *
     * verb.id is a mandatory property of xAPI statements, context is optional,
     * hence the checks.
     */
    const verbIsAnswered = xAPI.verb.id === 'http://adlnet.gov/expapi/verbs/completed';
    const contextIsIV = xAPI.context && xAPI.context.contextActivities && xAPI.context.contextActivities.category &&
        xAPI.context.contextActivities.category.length > 0 &&
        xAPI.context.contextActivities.category[0].id &&
        xAPI.context.contextActivities.category[0].id.indexOf('H5P.InteractiveVideo') !== -1;

    if (!verbIsAnswered || !contextIsIV) {
      return
    }

    // Your function
  });
});

---

您应该使用H5P提供的alter_scripts钩子，而不是将其硬编码到官方源代码中（我假设您这样做是因为您的示例中的script标记）。它允许您在需要时向特定H5P内容添加自定义脚本，例如仅向H5P.InteractiveVideo添加自定义脚本。请比较一下。使用钩子，当IV更新时，您无需一次又一次地添加更改。

不，它不起作用。基本上，它是一个动态变化的iframe内容，javascript并没有像我想的那样进行挑选。您可以添加H5P变量吗。我不明白它是什么。iframe=H5P.$body.contents（）；iframe.find（“.h5p交互式视频结束屏幕提交按钮”）；通过这段代码，您可以找到嵌套在子节点中的我想要的目标元素。不，它不起作用。基本上，它是一个动态变化的iframe内容，javascript并没有像我想的那样进行挑选。您可以添加H5P变量吗。我不明白它是什么。iframe=H5P.$body.contents（）；iframe.find（“.h5p交互式视频结束屏幕提交按钮”）；通过这段代码，您可以找到嵌套在子节点中的元素。