无法自定义交互式 JavaScript 内容

Question

我们使用 Moodle 3.5 版并使用 H5P 插件制作交互式视频。我们需要在提交按钮上添加另一个动作请查看链接https://h5p.org/interactive-video。回答问题后，将出现如下摘要屏幕：<script>function checkclick(){    $(document).ready(function(){        $(".h5p-interactive-video-endscreen-submit-button").click(function(){            alert("submitted");        });     });}$(document).ready(function(){    iframe=H5P.$body.contents();    iframe.find(".h5p-interactive-video-endscreen-submit-button").click(function(){          alert("hello");    });});// H5P.$body.contents().find(".h5p-interactive-video-endscreen-submit-button")// $(document).ready(function(){//        var button= H5P.$body.contents().find(".h5p-interactive-video-endscreen-submit-button");//     button.attr("id","myclass");//        console.log(button);// });</script>已尝试上述技术以在单击按钮时获得警报，但没有成功。

Answer 1

H5P 使用由不同用户操作触发的 xAPI 语句。您可以在点击提交按钮时收听由 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挂钩，而不是将其硬编码到官方资源中（我假设您这样做是因为您的示例中的脚本标签）。它允许您在需要时将自定义脚本添加到特定的 H5P 内容，例如仅添加到 H5P.InteractiveVideo。请比较https://h5p.org/moodle-customization。只要有 IV 的更新，使用钩子就不需要一次又一次地添加您的更改。

Answer 2

改变这个：

$(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');

        }

    });

});

如果元素点击不可检测并且它有效，我通常会这样做。