Introduction
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": "mailto:brian.rogers@scorm.com",
"objectType": "Agent"
},
"verb": {
"id": "http://scorm.com/verbs/drew",
"display": {
"en-US": "drew"
}
},
"result": {
"completion": true,
"extensions": {
"http://scorm.com/extensions/tcdraw-data": {
"base64data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADICAYAAABS39xVAAAIZ0lEQVR4nO3dPW4kxxkG4C/1KXwPAcoVONVtJECJASeObMAncO7UguCFAx9BdmZFi5UMyIK1P+KKS66D3jHH5FR3zUzPVH9VzwN0tCS3un7eqaquJiMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACCh+4h4/+i6b1oigAKBBaQhsIA0BBaQhsAC0hBYQBoCC0hDYAFpCCwgDYEFpCGwgDQEFpCGwALSEFhAGgILSENgAWkILCANgQWkIbA27FVE3MXUIHPX3Yevhd4JrA16FQ9h9LhxSpcAYwQCa0NexvFBtRRggoueCKyNuIl1gqoUXC+vdytwMQJrAy4VVo8b9eZaNwQXIrAaex3zYbW04X7MElJokZ3AauijKIfNMXtQh54mCi16JLAamgurt2f83KWnjEJrPL0M9F7uI513Ua78tcLkbeH/EFrjaTnQ71a8SvdR+/3vPlw/P7refLj+vXf9MyL+coH6SGVu9nMfU2WuaW5DX2iNo2VgXfJh0jWuIdWcsbq70P8ttBBYAqva3NJsv/N8dMEyLIXWpcKSbRBYAmtR7cn1a51IXzrv5YBpvwSWwJpVcxi0xeszNaFlttUfm+423YtqQqHle361YWq2NdnVV4vrLtZph16OA/RyH5uxWwbOBcE5Z6zWsntauRRao862HodUyyXJGu3Qy0Dv5T42Y+nk+tZmLaVp9sizrWu823lqcJ3aDr0M9F7uYxPuYtuzqpKa2dYogbXVsNrvS6ccQ+lloPdyH82VOnqmc05zs60RbD2szulTvQz0Xu6jqbl9q2x7QKXZVu9q9/Sufa0VWr0M9F7uo6m5fausHs+2ere099hqpjw36z2mTL0M9F7uo5m5favs+z4v42HA9Grp3c4tLOfXeEuhl4Hey300UVoKbqWjM29uGbi1ByXnvqXQy0Dv5T6a6GXfalRLAbA1NaF1W/je0vd9d9kir05gnaj06azycigt5XdtuNW/NnTqq1Wl71n71xldmjF3olLFbbWj82DuwyZDG9Y+0fx673t6WQ0IrBOYXeXWy+BdekvhPqY/chIzX5etzxp3JzC7ymvuqW5Gb6LuvJbAGpTZVV5zT3UzH0H5OpZDS2AN6tAntNlVDqXZVbalYMnSIdNSoL1oUdgTCawjqbC8Rmi723h6n0uv+WR6UjhCG65KheV0E4cHa48HfPf3rHZ9cy6wMs0wjb8jqbCcSkv5Xt3E/wdRtkOyJcbfEXrfA+nZoY4+UrsJrMH0+oRpBJ/H4bYrvcbSI4E1GLOrvG7jcCf/vGWhrkxgDUZF5TXa/tUhAmswKiqv0fevIgTWcFRUTp+F/asIgTUcFZVTaf/qs5aFakBgDUZF5WT/aiKwBmMfJCcdfCKwBvJp2AfJSgefCKyBlPZBPm1ZKKro4BOBNRD7IHnp4JO5wHofEb9tV7SjaM8KKikvbTdZCqxv2xXtKNqzgkrKS9tNlgLr53ZFO4r2rKCS8tJ2k6XAyvJL/LRnBZWUl7abLAVWliM62rOCSspL200E1kBUUl7abrIUWFnqRHtWUEl5abuJwBqISspL200E1kBUUl7abiKwBqKS8tJ2E4E1EJWUl7abCKyBqKS8tN1EYA1EJeWl7SYCayAqKS9tNxFYA1FJeZXaLsu7c2sRWANRSXmVBur9h+uTdkW7qprA+mWz0tUzFiuopLxuYn6w3kfE62alu56lwHofEa+ala6esVhBJeVWE1r3EfGyVQGvoCawMrwAbSxWUEn5vY66ZdFNqwJeWE1gZejTxmIFldSHT+JhNjVaaAmsgaikvryL5dB626x067uJ5bDK0qeNxQqlv5ozwmZtr17G/Gxr928ZNqKXHOq/Aqtj30e5or5oVyxW8DbqNuQzB1ep7x663380KmMtgVVp7pOY3JaeIu4HV7YniaXlYOmet/6kUGBV+leUO/XWG3ltf42ndfCsaYnOVxNau8GRqb3n/ghwxsF/6H4ytcdV3Ua5kW8bluva3sTTOvimaYnWsbSv9bjNMywT52ZRAmsApQ3MXh+HP/arONzR/96yUCt7FXXBtfX9rbnlYITAGsbcflbvofVtHL7vHt/JOza4ttb2S4GUMbBu42mZR1rdnOSLmA+tnhP/bTy95yx/5vxUu+BaWibut3/r8CqVeb9vCqyB/CeWH4ffRsTHrQp4Ab+Jw/c8Soe5i/rg2g+v25iOxlxTKYz2l6+lDfnfXbWkx/kpnpb5p6YlSuSYx+Fb+NQ9xy+ifK+jBFbEcRvzh/rBNfpC6WzZ49nT7wtft+UVgsA6U+3j8Mefus9bFPYMc0vgPzQsVyu1+1u1Ibb2tTS72sm2LBRYK5g7o7XUWTME14sod+w/NizXFryK45eKLa5SCAmsgZ3ScXfBtdWN66+i3KlfNCzXFt3ENsNr7oS+wBrcd/HQaU8Nr3cR8eW1C37A38Lp/lPth9e5S8dzw2puv0xg8T8fx7Qhfc7M6y6u/1sh3sT8ILuPaROeet/H6X3h1KCam1ntZAusH+JpeX9oWqKO7TboT+mwu/C6xqnqpeMav75CGXp3aAa21nVMP8l2clxgNfA8zlsm1HTYH88o39zM6qszfi7bI7Co9jxO3+9aI9iOeSy+9aUCpxFYnOTLePjVvVt7yiSw+pXtVZdv4ml5v2laIiJiOuawlUfktRu45JPtqZvASuBNtAuv+9AhepZtiSWwknkddU+X1ppV/ek6t0Uj2QLgWTwt77OmJWIVP8bpj83vIuLP1y8yDWQLLGBgZiwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJzpv9oaxHIqoGPpAAAAAElFTkSuQmCC",
"width": 300,
"height": 200
}
}
},
"timestamp": "2012-10-30T18:35:50.333Z",
"stored": "2012-10-30T18:35:50.408Z",
"authority": {
"name": "TC Draw",
"mbox": "mailto:brian.rogers+tcdraw@scorm.com",
"objectType": "Agent"
},
"object": {
"id": "http://scorm.com/tcdraw-87dab09b-7c33-49a2-9080-06fbe54f1560",
"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!
[box size=”third” title=”View the Example” url=”http://dev.rusticisoftware.com/tcdraw/index.html”]
[button url=”http://dev.rusticisoftware.com/tcdraw/index.html”]Example[/button]
[/box]
[box size=”third” title=”Scan to View the Mobile Version”]
[/box]
[box size=”third” title=”See the Code” url=”https://github.com/RusticiSoftware/TinCanDraw”]
[button url=”https://github.com/RusticiSoftware/TinCanDraw”]See the Code[/button]
[/box]
[clear /]
