Multiple selection task - lineColor not working properly

Online experiments
1

URL of experiment:

Description of the problem:
Hi everyone,

I have a multiple selection task where the participant reads an essay and then has to answer to a question with multiple options. They can only give one answer but they can change their mind as many time as they want before pressing return and submitting their final answer.

In PsychoPy3 (v2020.1.2) I created multiple text components (one question and 4 possible answers) and one polygon component for each (of the 4) possible answer (they are transparent rectangles, with a white border matching the background). I have a mouse component enabling selection by clicking (clicking does not end routine) and a keyboard component to submit the final answer (pressing return ends routine).
I then added the following code component to enable visual feedback of the selection of an answer:

begin routine:

essay.alignText='left'

A.lineColor = "white"
B.lineColor = "white"
C.lineColor = "white"
D.lineColor = "white"

each frame:

polygons = [A, B, C, D]

for i in polygons:
    if mouse.isPressedIn(A):
        A.lineColor = "black"
        B.lineColor = "white"
        C.lineColor = "white"
        D.lineColor = "white"
    elif mouse.isPressedIn(B):
        B.lineColor = "black"
        A.lineColor = "white"
        C.lineColor = "white"
        D.lineColor = "white"
    elif mouse.isPressedIn(C):
        C.lineColor = "black"
        A.lineColor = "white"
        B.lineColor = "white"
        D.lineColor = "white"
    elif mouse.isPressedIn(D):
        D.lineColor = "black"
        A.lineColor = "white"
        B.lineColor = "white"
        C.lineColor = "white"

This way, when one possible answer is selected, the border becomes black and the borders of all the other rectangles are white (matching the background).
Since isPressedIn doesn’t function in JS, I changed it to:

polygons = [A, B, C, D];
for (var i, _pj_c = 0, _pj_a = polygons, _pj_b = _pj_a.length; (_pj_c < _pj_b); _pj_c += 1) {
    i = _pj_a[_pj_c];
    if (A.contains(mouse) && mouse.getPressed()[0] === 1) {
        A.lineColor = "black";
        B.lineColor = "white";
        C.lineColor = "white";
        D.lineColor = "white";
    } else {
        if (B.contains(mouse) && mouse.getPressed()[0] === 1) {
            B.lineColor = "black";
            A.lineColor = "white";
            C.lineColor = "white";
            D.lineColor = "white";
        } else {
            if (C.contains(mouse) && mouse.getPressed()[0] === 1) {
                C.lineColor = "black";
                A.lineColor = "white";
                B.lineColor = "white";
                D.lineColor = "white";
            } else {
                if (D.contains(mouse) && mouse.getPressed()[0] === 1) {
                    D.lineColor = "black";
                    A.lineColor = "white";
                    B.lineColor = "white";
                    C.lineColor = "white";
                }
            }
        }
    }
}

The problem:
when I run the pilot online (through Pavlovia), the polygon components become completely black.

  1. I first thought the problem was transparency and changed the fill color of the polygons to white to match the background.
    By running the pilot online, the polygon components are permanently (and from the very beginning) white with a black border (instead of white with a white border that becomes black on click).
  2. Furthermore, the text components shows up for a fraction of second and then is obscured by its polygon component.

My best guess is that the problem lays in the each frame section of the code component, but I cannot figure out how to solve it.

Has anyone had a similar issue and found a solution I could use?

Thank you,
Martina

1 Like
2

I would recommend using .setLineColor(black) and defining colours as per my crib sheet.

1 Like
3

Thank you, @wakecarter, it solved the line color problem!

I’m still trying to figure out a way to leave the text permanently on top (the rectangles move on top after a fraction of a second obscuring the text).

edit:
I found a way to make the Color Fill transparent by following this thread: Place a rectangle (polygon) on top of an image online

4

Try resetting the text of the text object straight after you reset a polygon that might overlap. I think that the last thing changed ends up on top.