Conditional colour change code for online experiment

Online experiments
1

URL of experiment: showCoin [PsychoPy]

Description of the problem:
My conditional colour change works exactly as I want it to locally (see code screen shot below). When the error is under a certain value the feedback (net_shape_feedback) turns green.

Screenshot 2021-04-08 at 10.51.39
Screenshot 2021-04-08 at 10.51.392180×996 224 KB

When I commit the changes online the colour change does not happen?
Is my code incorrect for javascript (see screen shot and typed code) or do I need to draw a new polygon in the code component rather than relying on the polygon I created in builder?

net_shape_feedback.pos = mouse_2.getPos();
difference = (target_coin_posx2 - mouse_2.getPos()[0]);

rmdiff = Math.sqrt(Math.pow(difference, 2));
if ((rmdiff < 0.05)) {
    net_shape_feedback.fillColor = green;
} else {
    net_shape_feedback.fillColor = white;
}
2

You seem to be redefining green as the same value every frame in Python and then not as all in JavaScript.

Hare a look at my crib sheet for how to define colours as variables in a Both code component.

3

Thank you I see how that is possible now. I just need to make it work for my shape- do I just draw another shape over the shape created in builder?

4

Perhaps you could show your code as you have it now.

5

In begin experiment I have:

net_posx = 0;
net_posy = 0; //for defining the builder component position at the start then code takes over
white = new util.Color([1, 1, 1]);
green = new util.Color([-1, 0, -1]);

net_shape_feedback = new visual.Polygon({"win": psychoJS.window, "name": "target", "fillColor": white, "lineColor": white, "edges": 36, "pos": [0, 0.1], "size": (10,100)});

Begin routine

net_shape_feedback.setAutoDraw(true)

Each frame

net_shape_feedback.pos = mouse_2.getPos();
difference = (target_coin_posx2 - mouse_2.getPos()[0]);

rmdiff = Math.sqrt(Math.pow(difference, 2));
if ((rmdiff < 0.05)) {
    green = [(- 1), (- 1), (- 1)];
    net_shape_feedback.color = green;

} else {
    net_shape_feedback.color = white;

}
```

End routine

```
net_shape_feedback.setAutoDraw(false)
trials_1.addData("rmdiff", rmdiff);

What I am unsure about is whether creating an entirely new polygon with different name to the builder component (but with the same size and position) is a good idea- could that work? At the moment I have the builder component (net_shape_feedback) and a polygon of the same name in the code so I think I am confusing javascript with it.

6

Try deleting this line

1 Like
7

That almost works now. The colour change according to the if statement is still having no effect.
Can javascript execute if statements according to variables created during the experiment- ‘rmdiff’ in my case. Is there a particular way to do it considering that python executes line by line where javascript does not.

8

Yes

I do as much coding as I can in Python using Auto translate components. This helps to avoid syntax errors.

It might, however, be that you either need to use net_shape_feedback.setColor(green) or use a variable like feedbackColor set every frame.

1 Like
9

Using the variable feedback_color in my code made it work. Thanks for all of your help!

For anyone who is interested:
In begin experiment I added feedback_color = green (making sure to use new color util as above/in crib sheet to define green).

I set my builder component fill color to feedback_color (variable name) and selected set every frame.

Then in each frame of my code component I used the if statement as above that was produced using autotranslate