To embed a MediaBlog authentication script in a web page, you need to load:

<script src="https://workbench.mercuryanalytics.com/api/mediablog.js"></script>

Then, you need to tell it which form on the page to use.

<form data-hg-mediablog="mediablog_test_question" data-hg-mode="authenticate">
  <input type="hidden" name="rid" value="949">
  <div>
    <label for="challenge">Challenge:</label>
    <input type="text" id="challenge" name="challenge">
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

The mediablog_test_question is the id we give you to refer to the mediablog.

The data-hg-result is the css selector for the input box (input[type=text]) which will receive the authentication response from the server.

It’s safe to add the stylesheet and script to your survey’s template, since it does nothing when there’s no marker div to tell it where to put the video.

to be continued...