Contact Us Support Forum Get Email Updates

Thanks! Someone will be in touch with you shortly.

Rather just email us? Email us here.
Rather speak with someone in person?
Call any time with Experience API questions:


New Experiment: xAPI Draw

Posted by

Categories: Experiments, Ideas, Use Cases, xAPI

Posted 12 November 2012



This is the first of several examples that we’ll be sharing in the near future that show how to use the Experience API to do things you couldn’t easily do before. The interoperability of the emerging standard makes this all possible.

The Idea

Handwriting is a big part of a child’s education, and the new wave of touchscreen devices makes ‘handwriting’ digitally possible. Many children learn how to spell and write words using the classic letter outline and guide lines. This example takes that classic worksheet theme of a picture and word exercise and digitizes it with xAPI reporting.


The Tech

Html5 introduces the canvas upon which you can draw lines and objects using JavaScript code. Coupled with touch events, you can easily create a basic line drawing program with just JavaScript and HTML. Once you have your drawing, canvas gives you the base64 encoded string for the canvas as a PNG image. This example saves that resulting base64/png data as part of a statement’s context. The reporting app simply has to set the contents of the string a the src of an image tag. This takes away the need for a lot of custom code in the report to show the image to the instructor.

The Code

The magic of this example is in simply saving the canvas data as base64 using the built in canvas method ‘toDataURL()’.

     var drawing = {}
     drawing.base64data = canvas.toDataURL();
     drawing.width = canvasWidth;
     drawing.height = canvasHeight;


For this example, I created a basic extension format for my statements that includes this data. This extension format could be extended to hold much more information about the scenario to help the instructor viewing the data determine the best results. UPDATE: I changed this to save the extension data in the more appropriate result object as suggested in the comments.

     "id": "e620f85f-d708-4f5a-a1f3-78279c676aee",
     "actor": {
          "name": "Brian Rogers",
          "mbox": "",
          "objectType": "Agent"
     "verb": {
          "id": "",
          "display": {
               "en-US": "drew"
     "result": {
          "completion": true,
          "extensions": {
               "": {
                    "base64data": "data:image/png;base64,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",
                    "width": 300,
                    "height": 200
     "timestamp": "2012-10-30T18:35:50.333Z",
     "stored": "2012-10-30T18:35:50.408Z",
     "authority": {
          "name": "TC Draw",
          "mbox": "",
          "objectType": "Agent"
     "object": {
          "id": "",
          "definition": {
               "name": {
                    "en-US": "tcdraw"
          "objectType": "Activity"


The Future

This example could easily be extended with more worksheets to help a teacher assess and track handwriting over time. The same concept could be used for gathering a signature or for showing your work on a math problem. The ability for a student with an inexpensive stylus and a touchscreen device to draw or write and have it show exactly the same way digitally for an instructor is wide open for many uses.

xAPI makes it easy to record and report on those results with a standard way of storing the data in an LRS. This kind of next generation training/learning will push organizations to adopt an LRS and begin to build out custom views to best use the data that can be collected. You can get started with your own test LRS by signing up for a free account at SCORM Cloud today.


See it in Action!


Scan to View the Mobile Version

  • Yes! This is a fantastic example for the power of xAPI. And as extensions like base64 images become standardized, reporting tools will be able to detect and display/process them automatically.

    One very minor nitpick: since the image is something the child produces when drawing in this activity, it should probably be in the result extensions, not the context extensions.

  • What I love about this solution is not how awesome it is, but how simple. It is awesome though too!

  • Brian Rogers

    That’s a great point Russell. I totally agree with storing that extension under the result. I’ll update the example to reflect that soon. Thanks for the feedback!

  • very neat, especially using png-base64 overlays from multiple learners to create a crowdsourced “polling” utility… I’ll share an example/library soon.

  • Pingback: When Data Flows to Teachers in Realtime - Experience API()