Quiz Plugin

Overview

Quiz (mp4e:quiz, an official plugin) turns a video into a lesson with checkpoints. At each question's time the video pauses and a card shows the question with two to four answers. After an answer the card says Correct or Not quite, marks the right answer and shows your explanation, and Continue plays on. After the last question a summary shows the score, with every answer to review.

Quiz is a family plugin: it has the family's five themes, its common style settings, its minimum readable size and its keyboard and TV-remote navigation.

Adding a quiz to a video

1. Install Quiz from the marketplace.
2. Add one Quiz overlay covering the whole timeline. It covers the whole frame and places its own card, so do not resize it: pick Centre, Left or Right in position instead.
3. Enter the questions.
4. Pick a theme and a size. Lean-back is for a TV across the room.
5. Put the Quiz overlay in your top layer (the highest layer order), so its card sits above your other panels while it waits for an answer.

The questions

questions is a list of questions in seconds of the video. It can also be JSON text, so a single {{listVariable}} can supply the whole list, and any text in a question may use a {{variable}}.

[
  { "id": "q1", "time": 62, "question": "Why do you rest the dough?",
    "options": ["To cool it", "To relax the gluten", "To dry it out"], "correct": 1,
    "explanation": "Resting lets the gluten relax, so the dough rolls out without shrinking." },
  { "id": "q2", "time": 148, "question": "How hot should the pan be?",
    "options": ["Smoking", "Medium-high", "Barely warm", "Cold"], "correct": 1 }
]

A question without text or a time, with fewer than two or more than four answers, or whose correct does not point at one of them is left out. Give every question an id: the viewer's answers and score are kept by id when you edit the questions or a variable changes them.

Settings

Quiz's own settings, plus the family's common style settings (theme, accent, size, surface, textColor, font, radius, motion):

How it behaves

• While the video plays every click goes through to the video, your hotspots and the player's controls.
• While a question or the summary is up the quiz takes the pointer and the keys: the arrows move between the answers, Enter answers and then continues, and Escape or Back skips the question. Skip leaves a question unanswered; so does pressing play.
• Space does not answer by accident. The first answer has the focus as a question opens, and Space is the usual play and pause key, so Space answers only once the viewer has moved between the answers with an arrow key or Tab. Enter, a click and a TV remote's OK always answer.
• The card sits above everything else while it is up — other overlays and the captions alike — whatever layer you put the quiz in, so nothing covers the answers or catches a tap meant for them. The caption shows again when the card closes.
• A question comes up when playback reaches its time. Seeking past a question does not ask it; seeking back before a question that was not answered asks it again. An answered question is never asked twice.
• Seeking or opening the player's menu while a card is up keeps the card and the pause.
• At the end of the video the summary (or a question placed in the last moment) still shows, and its Continue leaves the video at its end rather than starting it again.
• With pause off the card shows over the playing video, and a bar on it runs down for answerTime seconds of playback; a viewer who pauses keeps the card.
• A screen reader hears each question and each verdict as it appears.
• On a phone-sized player the card spans the frame and the answers go two by two. The card always stays clear of the player's controls bar.

Actions and events

Actions, through pluginAction from rules, other plugins and input shortcuts:

{ "type": "pluginAction", "pluginId": "mp4e:quiz", "actionId": "start" }

Quiz emits three events:

• questionShown { id } — a question came up: playback reached its time, or start opened it. It never fires when the video loads or when the settings or a variable change.
• answered { id, correct } — the viewer gave a question its final answer (with retry on, a first wrong pick is not final).
• completed { score, total } — the quiz reached its end: after the last question, or at summaryAt. Once, until reset.

Rules hear them as plugin:mp4e:quiz:questionShown, plugin:mp4e:quiz:answered and plugin:mp4e:quiz:completed:

Trigger:    plugin:mp4e:quiz:completed
Condition:  eventData.score equals eventData.total
Action:     showOverlay  certificate-overlay

Your page hears them through onEvent (see Player Events). Quiz keeps answers in the player only; saving a score is your application's job:

<MP4EPlayer
  src="/video.mp4"
  onEvent={(event, data) => {
    if (event === 'plugin:emit' && data.event === 'completed') {
      // { score, total }
      saveScore(data.data.score, data.data.total);
    }
  }}
/>