Image positions not randomly shuffling online

URL of experiment: Pavlovia

Description of the problem: I have two face images displayed on the left and right, but these image positions are randomized (i.e. a face can be either on the left or the right side). This is how I randomized them in my JS custom code:

//begin experiment tab 
// defining possible positions of face
face_pos = [[(- 0.3), 0.1], [0.3, 0.1]];
//begin routine tab 
shuffle(face_pos); //the shuffle function is already defined 
familiar_pos = face_pos[0]; //face image 1 should take on the first index 
novel_pos = face_pos[1]; //face image 2 should take on the second index 

I then set the position to $familiar_pos for face 1 position, and $novel_pos for face 2 position in the image component in builder. The face positions are randomized locally, but not online (as shown in my data file below, where familiar_face_position is the position (left = 1, right = 2) of face image 1)

Screen Shot 2021-01-08 at 10.33.22 PM

Is there something wrong with my JS code in defining the position coordinates? I’m not sure why the randomization isn’t working.

I’m not sure either but I think you can easily randomize the position using a loop instead

tandy

I think that the issue is with this code:

// storing position of familiar face: 1 for left, 2 for right
if ((familiar_pos === [(- 0.3), 0.1])) {
    fam_keyboard = 1;
} else {
    fam_keyboard = 2;
}

This equality is never true. I would recommend that you shuffle 1 and 2 and then set the position based on that, rather than shuffling lists.

Also, are you only using “both” because of random.shuffle? You can use shuffle in Python.

@wakecarter I’m not sure if I’m understanding you, but why wouldn’t the equality be true? When I shuffle face_pos, familiar_pos is assigned the first index (a coordinate), which can be [(-0.3), 0.1]. So logically, the new variable fam_keyboard could be assigned as 1. I would like to mention that fam_keyboard isn’t a necessary part of my experiment, but rather something I wanted to store in my data, where:

// storing fam face position 
thisExp.addData("familiar_face_position", fam_keyboard); 
// if the familiar face is on the left (ie -0.3, 0.1), then fam_keyboard is stored as 1

As for shuffling, I did use shuffle in Python, but had to convert it to JS for it to work online (because we can’t import packages). I defined a code_js as the first routine of my experiment and defined the shuffle function, as you suggested in your crib sheet!

I went ahead and looked at my console.log output online, and it seems like the positions are actually randomizing… but my data file says that the position is always 2. The array in the screenshot below is one familiar_pos of one trial (there are 12 trials in total):

This is truly a weird situation- either my data storing is not correct, or there is something wrong with my JS code. Any insight is much appreciated! :slight_smile:

I don’t know enough JavaScript to help out here, but you should never, in any programming language, test for equality against floating point numbers. Computers store integers precisely but floating point numbers are only approximations – you can never rely on them being identical.

e.g.

a = 3
a == 3 # always True
a = a/10
a == 0.3 # never rely on this evaluating to True

In my first Pavlovia experiment I discovered that I couldn’t compare lists but instead had to compare each element separately.

For example, see my code here:

I think your shuffle is working fine in JS but doesn’t need an import in Python.

@Michael I went ahead and did as you suggested:

//begin experiment tab

// defining possible positions of face
face_pos = [[(-3), 1], [3, 1]];
//begin routine tab

shuffle(face_pos);
fp = face_pos[0];

//set position for image 1 
familiar_pos = [(fp[0] / 10), (fp[1] / 10)]; 

np = face_pos[1];

//set image for image 2
novel_pos = [(np[0] / 10), (np[1] / 10)];

if ((fp === [(- 3), 1])) {
    fam_text_pos = [(- 0.3), (- 0.2)]; //text that goes underneath image 1. 
} else {
    fam_text_pos = [0.3, (- 0.2)];
}

if ((np === [3, 1])) {
    novel_text_pos = [0.3, (- 0.2)]; //text that goes underneath image 2
} else {
    novel_text_pos = [(- 0.3), (- 0.2)];
}

// storing position of familiar face (image 1): 1 for left, 2 for right
if ((fp === [(-3), 1])) {
    fam_keyboard = 1;
} else {
    fam_keyboard = 2;
}

// storing position of novel face (image 2): 1 for left, 2 for right
if ((np === [(-3), 1])) {
    novel_keyboard = 1;
} else {
    novel_keyboard = 2;
}

// storing fam face position 
thisExp.addData("familiar_face_position", fam_keyboard);

However, I seem to get the same results in my data file (i.e. all of the positions are stored as 2, like the screenshot of the data file I posted in my original post). I went ahead and checked my console.log, and there was only one case where fp was stored to the left (i.e. -3,1). The first array is fp, the second array is fam_text_pos, and the last number is fam_keyboard.

So it looks like it is randomizing, but its not storing the correct position number. Again, thank you for your help!

I went ahead and implemented @wakecarter’s suggestion, and it worked! Thank you everyone for the help :slight_smile:

For anyone who is experiencing similar problems, make sure you compare individual elements within your list, rather than your whole list (as seen below):

if ((fp[0] === (-3))) {
    fam_text_pos = [(- 0.3), (- 0.2)];
} else {
    fam_text_pos = [0.3, (- 0.2)];
}

if ((np[0] === 3)) {
    novel_text_pos = [0.3, (- 0.2)];
} else {
    novel_text_pos = [(- 0.3), (- 0.2)];
}