Changing line colour with mouseover [Javascript]

Online experiments
1

Hello,

I want the border of a rect. stimulus to change colour upon mouseover. I have used the following Python code which works well in the builder:

if Male.contains(mouse):
    Male.lineColor = 'red'
else:
    Male.lineColor = 'black'

And the following for Javascript:

if (Male.contains(mouse)) {
    Male.lineColor = "red";
} else {
    Male.lineColor = "black";
}

However, this code does not work online, so my assumption is that there is some problem with the JS syntax. I’m sure there’s probably a very small mistake somewhere, but I’m not quite sure what it is. Thanks in advance.

2

Hi

Are you using the auto translate.

Your Javascript is missing a bracket } at the end but maybe that’s just your copy and paste.

Do you get an error?

Best wishes,

Wakefield

3

Hi,

Thanks for the reply. Yes, I used the auto-translate to help.

The Javascript bracket was a mistake in my copy and paste, I’ve amedned the original message to include the bracket.

I don’t get any errors with this code, but the line color of the rect stimulus remains black.

4

Ah – I’ve spotted the issue. I had a problem with colours which I’ve solved by defining them at the start of the experiment.

e.g. Begin Experiment
Python - red=[1,-1,-1]
Javascript - red = new util.Color([1, -1, -1]);

Then use red without quotes in your code.

This is in my crib sheet.

Best wishes,

Wakefield

5

That has worked perfectly, thank you so much! I’ve also looked at the crib sheet and it looks like a lifesaver, so thank you for that too :slight_smile:

6

Hello,

I’m having a similar issue. I have 4 condition files that define my stimuli structures using 0 or 1 values. My stimuli is divided into 4 sections. Each section is assigned 2 colors, it is one color if the value on that trial according to the condition file is a 0, and the other color if there’s a 1.
I have a list of my colors (ColorChoices), which is reshuffled for each condition. I have variable names $Slice1, $Slice2, $Slice3, $Slice4 in my image files. In my Begin Routine tab I have the code below.

Then in my next routine I have the code (copied to the very bottom) in the Begin Routine tab that tells the part of the stimulus what color to be. If the condition file shows 0, the first part of the stimulus is the first item in the color list, if it’s 1 then it’s the second item in the list, etc. This works well in the builder. But when I put it online the error says “We encountered the following error: when defining a color, unknown named color”. So I added the the colors and defined them like you’ve suggested here. However, I still get the same error message. I am not sure what I am doing wrong here. Any advice?

yellow = [1,1,-1]
darkgrey = [.3255,.3255,.3255]
magenta = [1,-1,1]
sienna = [.2549,-.3569,-.6471]
blue = [-1,-1,1]
white = [1,1,1]
green = [-1,.0039,-1]
red = [1,-1,-1]
ColorChoices = [yellow,darkgrey,magenta,sienna,blue,white,green,red]
shuffle(ColorChoices)

javascript:

yellow = new util.Color([1, 1, 0]);
darkgrey = new util.Color([0.3255, 0.3255, 0.3255]);
magenta = new util.Color([1, (- 1), 1]);
sienna = new util.Color([0.2549, (- 0.3569), (- 0.6471)]);
blue = new util.Color[(- 1), (- 1), 1]);
white = new util.Color[1, 1, 1]);
green = new util.Color[(- 1), 0.0039, (- 1)]);
red = new util.Color[1, (- 1), (- 1)]);
ColorChoices = [yellow, darkgrey, magenta, sienna, blue, white, green, red];
util.shuffle(ColorChoices);

if Slice1 == 0:
    Slice1Color = ColorChoices[0]
    S1.append(Slice1Color)
if Slice1 == 1:
    Slice1Color = ColorChoices[1]
    S1.append(Slice1Color)
if Slice2 == 0:
    Slice2Color = ColorChoices[2]
    S2.append(Slice2Color)
if Slice2 == 1:
    Slice2Color = ColorChoices[3]
    S2.append(Slice2Color)
if Slice3 == 0:
    Slice3Color = ColorChoices[4]
    S3.append(Slice3Color)
if Slice3 == 1:
    Slice3Color = ColorChoices[5]
    S3.append(Slice3Color)
if Slice4 == 0:
    Slice4Color = ColorChoices[6]
    S4.append(Slice4Color)
if Slice4 == 1:
    Slice4Color = ColorChoices[7]
    S4.append(Slice4Color)
7

Did you mean to say $Slice1Color, etc since Slice1 seems to contain an integer?

My method of defining colours in code is for when you then set the colours in code. If you set them in the visual component, then try using the named colours (i.e. put quotes around your colour names in your ColorChoices list)

8

Yes my apologies the variables are $Slicer1Color etc.

I actually originally had it set up with out defining colors and having the colors in quotes in the list. But that’s what gave me the error message originally. So I came to the forum and saw this post and tried this message and still get the same error.