Click Handling

Gorilla Tools' UI provides numerous components to select from when building your tasks or games. Components can be combined to build unique objects performing various functions - visit our Task Builder 2 Components Guide and Game Builder Components Guide to see what's currently available.

However, you might have specific research needs that require unique components. In this case, you can create your own task components and introduce new functionalities for your study. An example of a custom Task Component is a Click Handling component such as a hold/release button. See how to build one below:

Start by creating a new component with the Task Component template:

New script panel showing the Task Component template selected and the name MyNewTaskComponent in the name box

You can now implement your logic in the construct(), screenStart() and screenResponsesComplete lifecycle methods:

public construct() {
        super.construct();
        this.holdTimeBinding = this.createBinding((value) => {});
        this.responseBinding = this.createBinding((value) => {});
    }

    public apply(f: HoldReleaseFactory) {
        super.apply(f);
        this.holdTimeBinding.parseIfExists(f.holdTime);
        this.responseBinding.parseIfExists(f.response);
    }

    public screenStart() {
        super.screenStart();
        this.isComplete = false;
        this.onsetTime = 0;
    }

    public onTouch() {
        if(this.enabled && !this.isComplete) {
            this.onsetTime = this.screenManager.elapsedTime;
        }
    }

    public onTouchRelease() {
        if(this.enabled && !this.isComplete) {
            let responseTime = this.screenManager.elapsedTime - this.onsetTime;
            let holdTime = parseInt(this.holdTimeBinding.value);
            if(!isNaN(holdTime) && responseTime >= holdTime) {
                this.triggerResponse({
                    responseType: ResponseType.Response,
                    onsetTime: this.onsetTime,
                    response: this.responseBinding.value,
                    tag: this.factory.tag
                })
            }
        }
    }

    public screenResponsesComplete(promises: Promise[]) {
        this.isComplete = true;
    }

Scripting Sample

For a worked example of a new task component see our Custom Task Component Example.