无法自定义交互式 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() {&nbsp; // Run when document ready state is complete&nbsp; if (document.readyState !== 'complete') {&nbsp; &nbsp; return;&nbsp; }&nbsp; // H5P emits xAPI statements that can be tracked using H5P.externalDispatcher&nbsp; if (!H5P || !H5P.externalDispatcher) {&nbsp; &nbsp; console.warn('Cannot use H5P.externalDispatcher');&nbsp; &nbsp; return;&nbsp; }&nbsp; H5P.externalDispatcher.on('xAPI', function(event) {&nbsp; &nbsp; const xAPI = event.data.statement;&nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp;* The submit button og H5P.InteractiveVideo triggers an xAPI event with the&nbsp; &nbsp; &nbsp;* verb 'completed' for the context of IV, so we can check for xAPI+&nbsp; &nbsp; &nbsp;* statements for that.&nbsp; &nbsp; &nbsp;*&nbsp; &nbsp; &nbsp;* verb.id is a mandatory property of xAPI statements, context is optional,&nbsp; &nbsp; &nbsp;* hence the checks.&nbsp; &nbsp; &nbsp;*/&nbsp; &nbsp; const verbIsAnswered = xAPI.verb.id === 'http://adlnet.gov/expapi/verbs/completed';&nbsp; &nbsp; const contextIsIV = xAPI.context && xAPI.context.contextActivities && xAPI.context.contextActivities.category &&&nbsp; &nbsp; &nbsp; &nbsp; xAPI.context.contextActivities.category.length > 0 &&&nbsp; &nbsp; &nbsp; &nbsp; xAPI.context.contextActivities.category[0].id &&&nbsp; &nbsp; &nbsp; &nbsp; xAPI.context.contextActivities.category[0].id.indexOf('H5P.InteractiveVideo') !== -1;&nbsp; &nbsp; if (!verbIsAnswered || !contextIsIV) {&nbsp; &nbsp; &nbsp; return&nbsp; &nbsp; }&nbsp; &nbsp; // Your function&nbsp; });});您应该使用H5P 提供的alter_scripts挂钩，而不是将其硬编码到官方资源中（我假设您这样做是因为您的示例中的脚本标签）。它允许您在需要时将自定义脚本添加到特定的 H5P 内容，例如仅添加到 H5P.InteractiveVideo。请比较https://h5p.org/moodle-customization。只要有 IV 的更新，使用钩子就不需要一次又一次地添加您的更改。

Answer 2

改变这个：$(document).ready(function(){&nbsp; &nbsp; iframe=H5P.$body.contents();&nbsp; &nbsp; iframe.find(".h5p-interactive-video-endscreen-submit-button").click(function(){&nbsp; &nbsp; &nbsp; alert("hello");&nbsp; &nbsp; });});对此：$(document).ready(function(){&nbsp; &nbsp; iframe=H5P.$body.contents();&nbsp; &nbsp; $(document).on('click',function(){&nbsp; &nbsp; &nbsp; &nbsp; if(iframe.find(".h5p-interactive-video-endscreen-submit-button").is(":hover")){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('hello');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});如果元素点击不可检测并且它有效，我通常会这样做。