Millisecond Forums » Millisecond Forums » Inquisit 5 » non-rectangular buttons?

non-rectangular buttons?

morgan_w — Tue, 02 Jul 2019 17:33:30 GMT

Hello!

Sorry if this question has already been asked and answered, I haven't had much luck finding it.

I've been hoping to replicate a response button setup with 8 options that are symmetrically placed around the center of the screen, but the eight options are related in 4 pairs. The standard for this involves triangular buttons in shapes and orientations roughly like the attached image, so that each pair of related options forms a coloured box. At the moment I've noticed that Inquisit is treating the triangles as entire rectangles, which would make the buttons overlap.

Thanks for the help!
Best,
Morgan

RE: non-rectangular buttons?

morgan_w — Tue, 02 Jul 2019 17:33:30 GMT

[quote]

[b]Dave - 7/2/2019[/b]

[quote]

[b]morgan_w - 7/2/2019[/b]

[quote]

[b]morgan_w - 7/1/2019[/b]

[quote]

[b]Dave - 7/1/2019[/b]

[quote]

[b]morgan_w - 6/30/2019[/b]

[/quote]

I assume you're using <picture> elements for the triangles, which is why they're treated as rectangles. Even if an image displays a triangle, the image itself is still a full rectangle. You would not have that problem with <shape> elements:

<shape a>
/ shape = triangle
/ size = (500px,500px)
/ color = orangered
</shape>

<shape b>
/ shape = rectangle
/ size = (500px,500px)
/ color = orange
</shape>

<trial mytrial>
/ stimulusframes = [1=b,a]
/ inputdevice = mouse
/ validresponse = (a,b)
</trial>

The above will differentiate between a click in shape A vs shape B just fine, however, creating an array like the one you want is not possible with overlaid <shape>s. You could build an array with rectangles as a simple workaround.

<shape a>
/ shape = rectangle
/ size = (500px,250px)
/ color = orangered
/ valign = top
</shape>

<shape b>
/ shape = rectangle
/ size = (500px,250px)
/ color = orange
/ valign = bottom
</shape>

<trial mytrial>
/ stimulusframes = [1=b,a]
/ inputdevice = mouse
/ validresponse = (a,b)
</trial>

In sum, there certainly is no easy way to do this, if triangles are an absolute requirement. In theory, you would build a set of custom expressions that perform a triangle test, but the math is not entirely trivial (e.g. https://stackoverflow.com/questions/2049582/how-to-determine-if-a-point-is-in-a-2d-triangle ).

[/quote]

Thanks a lot Dave, really appreciate the options. Will play around with boxes to see if I can get a satisfactory compromise before I attempt the maths!

[/quote]

Hi Dave,

Tried to do the maths in the end (thanks for the link! went with barycentric coordinates) and got it working for a single triangle pretty easily. However, my current attempt will not let me distinguish between two triangles that are placed together to form a square as in any corner of the image above, even though I have triangle tests for both triangles individually. Any ideas to tie each triangle test as the condition for each triangle as a response? I'll include what I've whipped up so far:

<picture triangle1>
/ items = ("practice_triangle.png")
/ position = (50,50)
</picture>

<picture triangle2>
/ items = ("practice_triangle2.png")
/ position = (50,50)
</picture>

<expressions triangle1>
/ x1 = picture.triangle1.left
/ y1 = picture.triangle1.bottom
/ x2 = picture.triangle1.left
/ y2 = picture.triangle1.top
/ x3 = picture.triangle1.right
/ y3 = picture.triangle1.bottom
/ a = ((expressions.y2 - expressions.y3)*(mouse.x - expressions.x3) + (expressions.x3 - expressions.x2)*(mouse.y - expressions.y3)) / ((expressions.y2 - expressions.y3)*(expressions.x1 - expressions.x3)+(expressions.x3 - expressions.x2)*(expressions.y1 - expressions.y3))
/ b = ((expressions.y3 - expressions.y1)*(mouse.x - expressions.x3) + (expressions.x1 - expressions.x3)*(mouse.y - expressions.y3)) / ((expressions.y2 - expressions.y3)*(expressions.x1 - expressions.x3)+(expressions.x3 - expressions.x2)*(expressions.y1 - expressions.y3))
/ c = 1 - expressions.a - expressions.b
</expressions>

<expressions triangle2>
/ x12 = picture.triangle2.left
/ y12 = picture.triangle2.top
/ x22 = picture.triangle2.right
/ y22 = picture.triangle2.top
/ x32 = picture.triangle2.right
/ y32 = picture.triangle2.bottom
/ a2 = ((expressions.y22 - expressions.y32)*(mouse.x - expressions.x32) + (expressions.x32 - expressions.x22)*(mouse.y - expressions.y32)) / ((expressions.y22 - expressions.y32)*(expressions.x12 - expressions.x32)+(expressions.x32 - expressions.x22)*(expressions.y12 - expressions.y32))
/ b2 = ((expressions.y32 - expressions.y12)*(mouse.x - expressions.x32) + (expressions.x12 - expressions.x32)*(mouse.y - expressions.y32)) / ((expressions.y22 - expressions.y32)*(expressions.x12 - expressions.x32)+(expressions.x32 - expressions.x22)*(expressions.y12 - expressions.y32))
/ c2 = 1 - expressions.a2 - expressions.b2
</expressions>

<text report>
/ items = ("<%mouse.x%>, <%mouse.y%>, <%expressions.a%>, <%expressions.b%>, <%expressions.c%>", <%expressions.a2%>, <%expressions.b2%>, <%expressions.c2%>)
/ position = (50, 15)
</text>

<trial mytrial>
/ stimulusframes = [1 = triangle1, triangle2, report]
/ validresponse = (picture.triangle1, picture.triangle2)
/ inputdevice = mouse
/ isvalidresponse = [
0<=expressions.a && expressions.a <= 1 && 0 <= expressions.b && expressions.b <= 1 && 0 <= expressions.c && expressions.c <= 1 || 0<=expressions.a2 && expressions.a2 <= 1 && 0 <= expressions.b2 && expressions.b2 <= 1 && 0 <= expressions.c2 && expressions.c2 <= 1
]
</trial>

<block myblock>
/ trials = [1-3 = mytrial]
</block>

Yellow triangle is practice_triangle1.png and green is practice_triangle2.png

At the moment, as I understand it, the || condition in the / isvalidresponse is making the triangle test effectively useless, and I can click on either 'triangle' but the response registered is the first image. Does anyone have any ideas to tie the mouse location to a specific triangle, even though they overlap?

Cheers,
Morgan

[/quote]

You'll want to do something like this:

<picture triangle1>
/ items = ("practice_triangle1.png")
/ position = (50,50)
</picture>

<picture triangle2>
/ items = ("practice_triangle2.png")
/ position = (50,50)
</picture>

<expressions triangle1>
/ x1 = picture.triangle1.left
/ y1 = picture.triangle1.bottom
/ x2 = picture.triangle1.left
/ y2 = picture.triangle1.top
/ x3 = picture.triangle1.right
/ y3 = picture.triangle1.bottom
/ a = ((expressions.y2 - expressions.y3)*(mouse.x - expressions.x3) + (expressions.x3 - expressions.x2)*(mouse.y - expressions.y3)) / ((expressions.y2 - expressions.y3)*(expressions.x1 - expressions.x3)+(expressions.x3 - expressions.x2)*(expressions.y1 - expressions.y3))
/ b = ((expressions.y3 - expressions.y1)*(mouse.x - expressions.x3) + (expressions.x1 - expressions.x3)*(mouse.y - expressions.y3)) / ((expressions.y2 - expressions.y3)*(expressions.x1 - expressions.x3)+(expressions.x3 - expressions.x2)*(expressions.y1 - expressions.y3))
/ c = 1 - expressions.a - expressions.b
</expressions>

<expressions triangle2>
/ x12 = picture.triangle2.left
/ y12 = picture.triangle2.top
/ x22 = picture.triangle2.right
/ y22 = picture.triangle2.top
/ x32 = picture.triangle2.right
/ y32 = picture.triangle2.bottom
/ a2 = ((expressions.y22 - expressions.y32)*(mouse.x - expressions.x32) + (expressions.x32 - expressions.x22)*(mouse.y - expressions.y32)) / ((expressions.y22 - expressions.y32)*(expressions.x12 - expressions.x32)+(expressions.x32 - expressions.x22)*(expressions.y12 - expressions.y32))
/ b2 = ((expressions.y32 - expressions.y12)*(mouse.x - expressions.x32) + (expressions.x12 - expressions.x32)*(mouse.y - expressions.y32)) / ((expressions.y22 - expressions.y32)*(expressions.x12 - expressions.x32)+(expressions.x32 - expressions.x22)*(expressions.y12 - expressions.y32))
/ c2 = 1 - expressions.a2 - expressions.b2
</expressions>

<text report>
/ items = ("<%mouse.x%>, <%mouse.y%>, <%expressions.a%>, <%expressions.b%>, <%expressions.c%>, <%expressions.a2%>, <%expressions.b2%>, <%expressions.c2%>")
/ position = (50, 15)
</text>

<trial mytrial>
/ ontrialbegin = [
values.response = "";
]
/ stimulusframes = [1 = triangle1, triangle2, report]
/ validresponse = (lbuttondown)
/ inputdevice = mouse
/ isvalidresponse = [
if(0<=expressions.a && expressions.a <= 1 && 0 <= expressions.b && expressions.b <= 1 && 0 <= expressions.c && expressions.c <= 1){
values.response = "triangle1"; true;
}
else if(0<=expressions.a2 && expressions.a2 <= 1 && 0 <= expressions.b2 && expressions.b2 <= 1 && 0 <= expressions.c2 && expressions.c2 <= 1){
values.response = "triangle2"; true;
}
]
</trial>

<block myblock>
/ trials = [1-3 = mytrial]
</block>

<values>
/ response = ""
</values>

<data>
/ columns = (date time subject group blocknum blockcode trialnum trialcode values.response latency)
/ separatefiles = true
</data>

[/quote]

Legend!

RE: non-rectangular buttons?

Dave — Tue, 02 Jul 2019 05:39:38 GMT

[quote]

[b]morgan_w - 7/2/2019[/b]

[quote]

[b]morgan_w - 7/1/2019[/b]

[quote]

[b]Dave - 7/1/2019[/b]

[quote]

[b]morgan_w - 6/30/2019[/b]

[/quote]

Thanks a lot Dave, really appreciate the options. Will play around with boxes to see if I can get a satisfactory compromise before I attempt the maths!

[/quote]

RE: non-rectangular buttons?

morgan_w — Tue, 02 Jul 2019 02:25:18 GMT

[quote]

[b]morgan_w - 7/1/2019[/b]

[quote]

[b]Dave - 7/1/2019[/b]

[quote]

[b]morgan_w - 6/30/2019[/b]

[/quote]

Thanks a lot Dave, really appreciate the options. Will play around with boxes to see if I can get a satisfactory compromise before I attempt the maths!

[/quote]

RE: non-rectangular buttons?

morgan_w — Mon, 01 Jul 2019 19:00:48 GMT

[quote]

[b]Dave - 7/1/2019[/b]

[quote]

[b]morgan_w - 6/30/2019[/b]

[/quote]

Thanks a lot Dave, really appreciate the options. Will play around with boxes to see if I can get a satisfactory compromise before I attempt the maths!

RE: non-rectangular buttons?

Dave — Mon, 01 Jul 2019 05:13:56 GMT

[quote]

[b]morgan_w - 6/30/2019[/b]

[/quote]