使用爆米花+ d3的测验插件

Quiz plugin using Popcorn + d3

本文关键字：插件 d3 爆米花      更新时间：2023-09-26

我正在尝试使用Mozilla爆米花和d3 javascript在视频顶部创建一个交互式测验应用程序。

我只是在想出正确的方法来做到这一点。

我的做法是这样的。 创建一个名为 测验 ，当调用此插件代码时，它将在视频顶部显示问题。但我的问题是如何控制此插件中的视频。是否可以使用爆米花控制视频。我希望视频仅在用户提供测验答案时恢复。

提前致谢

插件

可以作为this访问Popcorn实例对象，它具有pause和play方法以及其他用于控制视频的方法。

这是一个粗略的例子...

Popcorn.plugin('quiz', function( options ) {
    var popcorn = this;
    //todo: set up your quiz DOM elements and event listeners here
    //to keep this brief, let's just set up the submit button
    var submit = document.createElement('button');
    submit.innerHTML = 'Submit';
    submit.addEventListener('click', function submitClick() {
        //todo: save and/or display the results wherever you want
        //resume playing
        popcorn.play();
    }, false);
    //todo: attach the submit button to the DOM
    return {
        start: function () {
            //todo: make your DOM elements visible here
            //you may also choose to pause the video to allow the viewer
            //some time to answer the question.
            popcorn.pause();
        },
        end: function () {
            //todo: make your DOM elements invisible here
        },
        _teardown: function () {
            //todo: remove/delete all your DOM elements and all event listeners
            submit.removeEventListener('click', submitClick, false);
        }
    };
});

需要注意的一件事是，如果您同时有多个测验事件，您可能会遇到一些奇怪的行为。可以保留所有当前活动的测验事件的列表，并且仅在回答所有测验后才恢复播放。但这可能有点矫枉过正。

相关文章：