Skip to main content

Actions and Interactivity

Display the stimuli properly​

We use Actions to display the stimuli in the correct order with specified delays. Instead of showing all the nodes at once, a Sequence Action runs additional Actions to achieve the following when the presentation scene appears:

  • A delay of 1000 milliseconds.
  • Showing the fixation cross.
  • A delay of 1000 milliseconds.
  • Hiding the fixation cross.
  • A delay of 1000 milliseconds.
  • Showing the word and the response buttons and enabling the response buttons.
presentationScene.onAppear(() => {            
    fixationCross.run(Action.sequence([
        Action.wait({duration: 1000}),
        Action.custom( {callback: () => {
            fixationCross.hidden = false;
        }}),
        Action.wait({duration: 1000}),
        Action.custom( {callback: () => {
            fixationCross.hidden = true;
        }}),
        Action.wait({duration: 1000}),                
        Action.custom( {callback: () => {
            redButton.hidden = false;
            greenButton.hidden = false;
            blueButton.hidden = false;
            wordLabel.hidden = false;
            redButton.isUserInteractionEnabled = true;
            greenButton.isUserInteractionEnabled = true;
            blueButton.isUserInteractionEnabled = true;
        }}),
    ]));
});

Respond to user input​

The response buttons were enabled in the onAppear event handler. Aside from the fact that each button represents a different color, the buttons have identical behavior. Rather than writing duplicated event handler code for each button, we write one event handler function, called handleResponse(), and assign it to the onTap event handler of each button.

The event handler prints to the console the button that is clicked and hides the buttons and the word. The isUserInteractionEnabled property of the buttons is set to false to prevent the user from clicking the buttons again. Finally, the event handler presents the scene again so another trial can happen.

function handleResponse(buttonColor) {
    console.log("You clicked " + buttonColor);
    redButton.hidden = true;
    greenButton.hidden = true;
    blueButton.hidden = true;
    wordLabel.hidden = true;
    redButton.isUserInteractionEnabled = false;
    greenButton.isUserInteractionEnabled = false;
    blueButton.isUserInteractionEnabled = false;
    game.presentScene(presentationScene);
}

redButton.onTapDown(()=> {
    handleResponse("Red");
});
greenButton.onTapDown(()=> {
    handleResponse("Green");
});
blueButton.onTapDown(()=> {
    handleResponse("Blue");
});

Progress so far​

The assessment now properly shows the stimuli and response buttons. The buttons can be clicked, and the assessment runs multiple trials.

However, the assessment presents the same word and color every time. Also, the trials will continue forever, and the user can never advance to the end scene.

Loading...