Skip to main content


This tutorial introduces you to the fundamentals of m2c2kit:

  • Graphical primitives (shapes, labels, and other basic building blocks)
  • How to interact with a user
  • How to generate data from a user's behavior

JavaScript or TypeScript?

m2c2kit is written in TypeScript, but it is fully compatible with JavaScript projects. This tutorial uses JavaScript.

Live code

This tutorial contains live code examples. The code you see in the editor is the actual code used to run the example in your browser.1 The code automatically runs when the page loads. You'll learn best by playing with the code and seeing how it changes the output. Edit the code and click the "Run" button to see the results.


Click the links under Explore to load new code that shows more examples.


If you change something and it doesn't work, just reload the page to get back to the original code!

Hello, world

This example shows a simple label with the text "Hello, world." There's nothing else to it!

  • Change the background from WebColors.LightBlue to WebColors.PaleGreen.
  • Change the text to I love mobile research!


  1. To deploy real assessments, there is additional boilerplate code that is not shown, such as an HTML template, import statements, and configuration objects. That code is hidden so you can focus on learning the fundamental concepts. Later, you will learn the full code needed to create an assessment.