Metacog Tutorial 02: Playback and Training Instrumentation
This tutorial is aimed to front-end developers who want to include the Metacog Client Library into an existent Widget, with the goal of adding support for recording, playback and scoring of Training Sessions, as appears in the following video:
Please refer to the Tutorial 01 in order to gain context about the widget and the steps required to integrate the Metacog Client Library for basic logging functionality.
In this tutorial we are going to refactor the instrumentation made for Tutorial 01, to add support for Playback functionality.
While in the first case we stick to the good practice of isolate the original code from the instrumentation code, in this case we are going to break that rule because the change required to make the widget aware of the Metacog Playback mechanism involves a deepest integration.
Playback and Training have the following dependencies:
metalogger-x.x.x.js: the metacog version of the client library includes all the functionality from the metalogger version, plus the TrainingToolbar modules required for building the UI (more details about different versions here).
D3.js: JQuery is required for the Logger Panel and the Playback and Training toolbars. D3 is used for the indicators panel, an advanced feature for Scoring mode.
This is how looks now the
Client Library Initialization
The "mode" attribute in the configuration object passed to the
Metacog.init method should be changed from "production" to "training".
Training mode enables all the functionality of the toolbar: recording, playback, and scoring. In order to enable just the playback feature, you will need to set "mode" to "playback", but as you are not going to have the recording functionality, the training session to reproduce should exist beforehand.
The Training and Playback Toolbar Guide contains a detailed explanation of both the Metacog Router mechanism and the role of the listener object: a object that works as an intermediary between the widget functionality and either the user input or the playback mechanism. In a few words, the goal of the listener is to offer an abstract interface to the event sources. Let's have a look at how it was implemented in the
Some things to notice about the listener's implementation:
- It doesn't need to be named "listener". It doesn't ever need to be a new, empty object: you can use as listener any object that you already have in your widget, as long as it make sense to add this functionality to that object according to their original design.
- The only requirement for a Listener is to implement methods with names that matches the names of the events:
- Changes to the Widget's model should happen only inside these methods (or should be triggered by them).
The last item also requires to change the original
Main module of the widget: the part where model manipulation is attached to DOM events event handlers:
Before: Model is changed directly at DOM event handlers (only UI-aware)
After: UI events are delegated to Metacog Router. (both UI and Metacog aware)
As can be seen in the compared code, what we did was to move the original DOM-event handlers implementation to our new listener object, and redirect the DOM events as Metacog events throug the Router.
The final step involves to pass the listener object to the Router and turning on the training toolbar:
Lets have a look to the final result! You will need an Authentication Token to enable the training toolbar. It can be generated by using the Metacog API Sandbox or just try with this one:
An authentication token creates an isolated working space for the users of a organization. The search functionality of the Training Toolbar will only list Training Sessions and Scores that had been created with the same Auth. Token used to activate the toolbar.
Summary and next steps
Once you have a widget instrumented with Playback support, you will be able to unlock all the power of the Metacog Platform: The usual workflow involves using the Training Toolbar to record Training Sessions, and using the Playback and Scoring toolbars to identify key behaviors and score them based on custom Rubrics.
Once the platform has a set of Scored Taining Sessions, you will be able to use the Metacog Client Library to ask the platform to score Student Sessions in real time!