Skip to main content

Visual Responses

A useful assessment changes its appearance in response to the user.

We've demonstrated interactivity, but only with text in the console. Users don't see the console -- it's for programmers! Let's add some visual responses within the scene.

How you respond to user events is limited only by the requirements of your assessment and your imagination. All the properties we've used to configure the appearance of nodes can be changed in response to user events. For example, when the user taps a shape, you could:

  • Change the shape's color or position.
  • Scale the shape bigger or smaller.
  • Show text within the shape.
  • and more!

Place code in the event handler to respond to user events​

The below example shows a simple instruction ("Click the square"). When the user taps the square, the square's event handler executes code: a hello response appears, along with the cumulative number of hellos. The hello label scale increases with each click, and the text moves up the scene. After three clicks, no more are allowed: the square is hidden, and a final message is shown.

The logic for handling the user's tap is in the onTapDown() event handler:

square.onTapDown(() => {
    if (helloCount === 3) {
      square.hidden = true;
      instructionsLabel.hidden = true;
      tooManyLabel.hidden = false;
    }

    helloCount++;
    helloLabel.text = "Hello #" + helloCount;
    helloLabel.scale = helloLabel.scale * 1.4;
    helloLabel.position.y = helloLabel.position.y - 10;
});

This example is nonsensical. It demonstrates, however, the many different ways to respond to user events, and it hints at how a real assessment could be built using the concepts shown here.

Loading...
Explore:
  • This example uses a single event handler and the event's type property to modify a label's text.