Why Actions?

Actions are a powerful way to change the appearance of your nodes and control the timing of your assessment.

We've learned how to create multiple scenes, customize the appearance of nodes, allow user interaction, and respond to that interaction. After we learn how to collect data (record scientifically relevant user behavior) in a later section, we'll have all the tools we need to create a fully functional assessment. Why do we need another concept, Actions?

• Modern user interfaces (UI) are fluid. UI elements smoothly move around the screen or change size. We know how to do this with scene transitions, but what if you need to animate multiple nodes independently within a scene?
• Assessments often require precise timing. You may need to show a stimulus for a specific amount of time, change its configuration, and show it again for another specific amount of time. How can we precisely schedule this?

These are the kinds of problems that the Action solves.

Actions for animation

Animation is moving a node from one position to another. Actions make it easy to animate nodes. Simply create an action with Action.move() that describes the animation.

Where is the game loop?

Each time a device updates its screen, it draws a frame. To make it appear that a node is smoothly moving across the screen, you simply update its position a little bit when you draw the next frame.

In many video game libraries, there is a concept of a game loop, which usually executes 60 times per second because most devices update their screen 60 times per second. To move the node, you adjust its position 60 times per second. You need to keep track of the node's current position, the position it's moving to, and the amount of time it should take to get there. You also need to keep track of how much time has passed since the node started moving. This is a lot of work!

Internally, m2c2kit runs a game loop, but the library abstracts this away from the programmer through the Move Action.

Actions for timing

JavaScript in browsers has functions for timing, such as setTimeout(), but this can be problematic. Even if setTimeout() is reliable enough for your needs, it is challenging to keep track of concurrent and nested timings; it is even more difficult to coordinate with animations tied to them.

To implement reliable timing, creation an action with Action.wait().

tip

If Actions seem confusing, just focus on the action for timing: Action.wait(). This will be used in nearly every assessment because experiments require certain stimuli to be shown at specific times.

Graphical Actions, like Action.move(), give the assessment's UI a modern feel and polish, but aren't necessary.¹

The below example introduces the power of actions. A few lines of code moves the square smoothly. Click the square when it is at the top and bottom of the screen.

Run

Loading...

Footnotes

1. Rarely, you might need animation Actions if your assessment requires complex graphical movements. ↩