Skip to main content

Introduction

This tutorial is aimed at programmers with intermediate-level familiarity with JavaScript.

info

Not a programmer?

Not creating new assessments?

If you only want to use existing m2c2kit assessments in your research, learn about m2c2kit deployment.

This tutorial introduces you to the fundamentals of creating assessments using 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.

info

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

tip

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!

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

Footnotes​

  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. ↩