Quiz plugin using Popcorn + d3

Question

I am trying to create an interactive quiz application on the top of video using mozilla popcorn and d3 javascript.

I am just figuring out the right way to do this.

My approach is like this. create a popcorn plugin called quiz , which will show the question on the top of the video when this plugin code is invoked. But my question is how to control the video inside this plugin. Is it possible to control the video using popcorn. I want the video to resume only when the user provides the answer for the quiz.

Thanks in Advance

Answer 1

A plugin can access the Popcorn instance object as this, which has pause and play methods as well as others for controlling the video.

Here's a rough example...

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);
        }
    };
});

One thing to be careful of is that you may run into some weird behavior if you have multiple quiz events at the same time. It's possible to keep a list of all currently active quiz events and only resume playing when all quizzes are answered. But that's probably overkill.