Millisecond Forums

Clicking anywhere inside the grid image

https://forums.millisecond.com/Topic40842.aspx

By 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
By 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.
By Dave - 6/14/2025

 
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.