Clicking anywhere inside the grid image


Author
Message
Wasabi8888
Wasabi8888
Associate Member (128 reputation)Associate Member (128 reputation)Associate Member (128 reputation)Associate Member (128 reputation)Associate Member (128 reputation)Associate Member (128 reputation)Associate Member (128 reputation)Associate Member (128 reputation)Associate Member (128 reputation)
Group: Forum Members
Posts: 7, Visits: 216
Hi Dave,

We’d like to use the EmojiGrid, an affective self-report tool that consists of a rectangular grid labeled with smiley faces.

Participants should be able to report their affective appraisal of a given stimulus by clicking only within the image area inside the horizontal and vertical grid borders — in other words, only the grid itself should be responsive. Please see the attached image for reference.

Would it be possible to implement this in Inquisit? If so, would you mind providing an example?

Thanks very much

Dave
Dave
Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)
Group: Administrators
Posts: 13K, Visits: 108K
Wasabi8888 - 6/14/2025
Hi Dave,

We’d like to use the EmojiGrid, an affective self-report tool that consists of a rectangular grid labeled with smiley faces.

Participants should be able to report their affective appraisal of a given stimulus by clicking only within the image area inside the horizontal and vertical grid borders — in other words, only the grid itself should be responsive. Please see the attached image for reference.

Would it be possible to implement this in Inquisit? If so, would you mind providing an example?

Thanks very much

You need an object. e.g. a <shape> or another <picture> underthe area that you want to be clickable. That object you define as the valid response.
Dave
Dave
Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)
Group: Administrators
Posts: 13K, Visits: 108K
Dave - 6/14/2025
Wasabi8888 - 6/14/2025
Hi Dave,

We’d like to use the EmojiGrid, an affective self-report tool that consists of a rectangular grid labeled with smiley faces.

Participants should be able to report their affective appraisal of a given stimulus by clicking only within the image area inside the horizontal and vertical grid borders — in other words, only the grid itself should be responsive. Please see the attached image for reference.

Would it be possible to implement this in Inquisit? If so, would you mind providing an example?

Thanks very much

You need an object. e.g. a <shape> or another <picture> underthe area that you want to be clickable. That object you define as the valid response.

Here's a basic example:

<defaults>
/ canvasAspectRatio = (4,3)
</defaults>

<picture gridOuter>
/ items = ("gridouter.png")
/ height = 40%
/ position = (75%, 50%)
/ erase = false
</picture>

<picture gridInner>
/ items = ("gridinner.png")
/ height = 31.5%
/ position = (75%, 50%)
/ erase = false
</picture>

<text yourStimulus>
/ items = ("Thing you want to have rated.")
/ height = 40%
/ position = (25%, 50%)
/ txBGColor = blue
/ erase = false
</text>

<shape clickIndicator>
/ shape = circle
/ color = red
/ erase = false
/ size = (1%, 1%)
/ hPosition = values.x
/ vPosition = values.y
</shape>

<values>
/ x = -1;
/ y = -1;
/ xInGrid = -1
/ yInGrid = -1
</values>

<trial myTrial>
/ onTrialEnd = {
    values.x = this.responseX;
    values.y = this.responseY;
    values.xInGrid = round(200 * (values.x - picture.gridInner.xPx) / picture.gridInner.widthPx);
    values.yInGrid = round(200 * (values.y - picture.gridInner.yPx) / picture.gridInner.heightPx);
}
/ stimulusFrames = [1=clearScreen, yourStimulus, gridOuter, gridInner]
/ inputDevice = mouse
/ validResponse = (gridInner)
/ branch = {
    return trial.showClick
}
</trial>

<trial showClick>
/ stimulusFrames = [1=clickIndicator]
/ trialDuration = 250
/ recordData = false
</trial>

<block myBlock>
/ trials = [1-5 = myTrial]
</block>

<data>
/ columns = (date, time, subject, group, session, blockNum, blockCode, trialNum, trialCode, stimulusItem, stimulusItem,
    response, latency, values.x, values.y, values.xInGrid, values.yInGrid)
</data>


values.xInGrid and values.yInGrid are the click coordinates relative to the center of the clickable grid area. The center of the grid is the zero point (0,0), top left corner is (-100,-100), top right corner is (100, -100), bottom right corner is (100, 100), bottom left corner is (-100, 100). But you can scale and mangle these coordinates differently however you want, that's just elementary math.
Attachments
gridInner.png (17 views, 8.00 KB)
gridouter.png (17 views, 45.00 KB)
GO

Merge Selected

Merge into selected topic...



Merge into merge target...



Merge into a specific topic ID...




Reading This Topic

Explore
Messages
Mentions
Search