Selecting multiple polygons (that change colour)

Builder
1

What are you trying to achieve?:
Participants are asked a question and are required to select (using the mouse component) their response from a series of 4 polygons (with text inside). More than one polygon can be selected. Clicking on an image of a tick in the corner of the screen will then take them to the next routine. The selections would be recorded in the output.

What did you try to make it work?:
IN BEGIN ROUTINE:

UL_distract_box.lineColor = "black";
UR_distract_box.lineColor = "black";
BL_distract_box.lineColor = "black";
BR_distract_box.lineColor = "black";

IN EACH FRAME:

polygons = [UL_distract_box, UR_distract_box, BL_distract_box, BR_distract_box];
for (var i, _pj_BL_distract_box = 0, _pj_UL_distract_box = polygons, _pj_UR_distract_box = _pj_UL_distract_box.length; (_pj_BL_distract_box < _pj_UR_distract_box); _pj_BL_distract_box += 1) {
    i = _pj_UL_distract_box[_pj_BL_distract_box];
    if (UL_distract_box.contains(distract_2_mouse) && distract_2_mouse.getPressed()[0] === 1) {
        UL_distract_box.lineColor = "red";
        UR_distract_box.lineColor = "black";
        BL_distract_box.lineColor = "black";
        BR_distract_box.lineColor = "black";
    } else {
        if (UR_distract_box.contains(distract_2_mouse) && distract_2_mouse.getPressed()[0] === 1) {
            UR_distract_box.lineColor = "red";
            UL_distract_box.lineColor = "black";
            BL_distract_box.lineColor = "black";
            BR_distract_box.lineColor = "black";
        } else {
            if (BL_distract_box.contains(distract_2_mouse) && distract_2_mouse.getPressed()[0] === 1) {
                BL_distract_box.lineColor = "red";
                UL_distract_box.lineColor = "black";
                UR_distract_box.lineColor = "black";
                BR_distract_box.lineColor = "black";
            } else {
                if (BR_distract_box.contains(distract_2_mouse) && distract_2_mouse.getPressed()[0] === 1) {
                    BR_distract_box.lineColor = "red";
                    UL_distract_box.lineColor = "black";
                    UR_distract_box.lineColor = "black";
                    BL_distract_box.lineColor = "black";
                }
            }
        }
    }
}

The mouse component is called: distract2_mouse and looks like this:

image
image1920×1080 391 KB

What specifically went wrong when you tried that?:
It will let me press the ‘tick’ to go to the next routine, but will not select/change the colour of the boxes. It simply jumps out of builder with no error message.

Any help would be greatly appreciated! :slight_smile:

2

Hi there,

This demo might be helpful. Selection of multiple images per trial with the mouse - #3 by Becca

multiple images are selected and they change in opacity when selected. The same approach would apply to polygons and color (I don’t think you need such a lengthy custo JS component you can just use if mouse.isPressedIn instead).

Becca