Description of the problem: I am trying to conduct a symmetry span task where after seeing several matrixes (4x4) with only one square being highlighted in red, participants should recall the highlighted squares in the order presented by clicking on a matrix.
However, the recall box is not displayed when running on Pavlovia.
Here is how it looks offline:
After clicking an empty square, the square will become red and with a number indicating the order it’s pressed.
Here is how it looks on Pavlovia:
The recall box is missing
Here is my code in JS
Begin Routine
clickCount = 0;
clickSquares = [];
buttonWas = "up";
squares = {};
boxes = {};
squares["matrix1"] = s1;
squares["matrix2"] = s2;
squares["matrix3"] = s3;
squares["matrix4"] = s4;
squares["matrix5"] = s5;
squares["matrix6"] = s6;
squares["matrix7"] = s7;
squares["matrix8"] = s8;
squares["matrix9"] = s9;
squares["matrix10"] = s10;
squares["matrix11"] = s11;
squares["matrix12"] = s12;
squares["matrix13"] = s13;
squares["matrix14"] = s14;
squares["matrix15"] = s15;
squares["matrix16"] = s16;
boxes["matrix1"] = b1;
boxes["matrix2"] = b2;
boxes["matrix3"] = b3;
boxes["matrix4"] = b4;
boxes["matrix5"] = b5;
boxes["matrix6"] = b6;
boxes["matrix7"] = b7;
boxes["matrix8"] = b8;
boxes["matrix9"] = b9;
boxes["matrix10"] = b10;
boxes["matrix11"] = b11;
boxes["matrix12"] = b12;
boxes["matrix13"] = b13;
boxes["matrix14"] = b14;
boxes["matrix15"] = b15;
boxes["matrix16"] = b16;
for (var squareName, _pj_c = 0, _pj_a = squares, _pj_b = _pj_a.length; (_pj_c < _pj_b); _pj_c += 1) {
squareName = _pj_a[_pj_c];
squares[squareName].image = "square.jpg";
}
for (var boxName, _pj_c = 0, _pj_a = boxes, _pj_b = _pj_a.length; (_pj_c < _pj_b); _pj_c += 1) {
boxName = _pj_a[_pj_c];
boxes[boxName].text = "";
}
Each Frame
if (mouse_recall.isPressedIn(s1)) {
if ((buttonWas === "up")) {
clickSquares.append("matrix1");
clickCount += 1;
b1.text = clickCount.toString();
s1.image = "red_square.jpg";
}
buttonWas = "down";
} else {
if (mouse_recall.isPressedIn(s2)) {
if ((buttonWas === "up")) {
clickSquares.append("matrix2");
clickCount += 1;
b2.text = clickCount.toString();
s2.image = "red_square.jpg";
}
buttonWas = "down";
} else {
if (mouse_recall.isPressedIn(s3)) {
if ((buttonWas === "up")) {
clickSquares.append("matrix3");
clickCount += 1;
b3.text = clickCount.toString();
s3.image = "red_square.jpg";
}
buttonWas = "down";
} else {
if (mouse_recall.isPressedIn(s4)) {
if ((buttonWas === "up")) {
clickSquares.append("matrix4");
clickCount += 1;
b4.text = clickCount.toString();
s4.image = "red_square.jpg";
}
buttonWas = "down";
} else {
if (mouse_recall.isPressedIn(s5)) {
if ((buttonWas === "up")) {
clickSquares.append("matrix5");
clickCount += 1;
b5.text = clickCount.toString();
s5.image = "red_square.jpg";
}
buttonWas = "down";
} else {
if (mouse_recall.isPressedIn(s6)) {
if ((buttonWas === "up")) {
clickSquares.append("matrix6");
clickCount += 1;
b6.text = clickCount.toString();
s6.image = "red_square.jpg";
}
buttonWas = "down";
} else {
if (mouse_recall.isPressedIn(s7)) {
if ((buttonWas === "up")) {
clickSquares.append("matrix7");
clickCount += 1;
b7.text = clickCount.toString();
s7.image = "red_square.jpg";
}
buttonWas = "down";
} else {
if (mouse_recall.isPressedIn(s8)) {
if ((buttonWas === "up")) {
clickSquares.append("matrix8");
clickCount += 1;
b8.text = clickCount.toString();
s8.image = "red_square.jpg";
}
buttonWas = "down";
} else {
if (mouse_recall.isPressedIn(s9)) {
if ((buttonWas === "up")) {
clickSquares.append("matrix9");
clickCount += 1;
b9.text = clickCount.toString();
s9.image = "red_square.jpg";
}
buttonWas = "down";
} else {
if (mouse_recall.isPressedIn(s10)) {
if ((buttonWas === "up")) {
clickSquares.append("matrix10");
clickCount += 1;
b10.text = clickCount.toString();
s10.image = "red_square.jpg";
}
buttonWas = "down";
} else {
if (mouse_recall.isPressedIn(s11)) {
if ((buttonWas === "up")) {
clickSquares.append("matrix11");
clickCount += 1;
b11.text = clickCount.toString();
s11.image = "red_square.jpg";
}
buttonWas = "down";
} else {
if (mouse_recall.isPressedIn(s12)) {
if ((buttonWas === "up")) {
clickSquares.append("matrix12");
clickCount += 1;
b12.text = clickCount.toString();
s12.image = "red_square.jpg";
}
buttonWas = "down";
} else {
if (mouse_recall.isPressedIn(s13)) {
if ((buttonWas === "up")) {
clickSquares.append("matrix13");
clickCount += 1;
b13.text = clickCount.toString();
s13.image = "red_square.jpg";
}
buttonWas = "down";
} else {
if (mouse_recall.isPressedIn(s14)) {
if ((buttonWas === "up")) {
clickSquares.append("matrix14");
clickCount += 1;
b14.text = clickCount.toString();
s14.image = "red_square.jpg";
}
buttonWas = "down";
} else {
if (mouse_recall.isPressedIn(s15)) {
if ((buttonWas === "up")) {
clickSquares.append("matrix15");
clickCount += 1;
b15.text = clickCount.toString();
s15.image = "red_square.jpg";
}
buttonWas = "down";
} else {
if (mouse_recall.isPressedIn(s16)) {
if ((buttonWas === "up")) {
clickSquares.append("matrix16");
clickCount += 1;
b16.text = clickCount.toString();
s16.image = "red_square.jpg";
}
buttonWas = "down";
} else {
if (mouse_recall.isPressedIn(clear_button)) {
clickCount = 0;
clickSquares = [];
for (var squareName, _pj_c = 0, _pj_a = squares, _pj_b = _pj_a.length; (_pj_c < _pj_b); _pj_c += 1) {
squareName = _pj_a[_pj_c];
squares[squareName].image = "square.jpg";
}
for (var boxName, _pj_c = 0, _pj_a = boxes, _pj_b = _pj_a.length; (_pj_c < _pj_b); _pj_c += 1) {
boxName = _pj_a[_pj_c];
boxes[boxName].text = "";
}
} else {
if (mouse_recall.isPressedIn(blank_button)) {
if ((buttonWas === "up")) {
clickSquares.append("_");
clickCount += 1;
}
buttonWas = "down";
} else {
if (mouse_recall.isPressedIn(exit_button)) {
continueRoutine = false;
thisExp.addData("Clicked squares", clickSquares);
} else {
buttonWas = "up";
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
s1-16 are image components and b1-16 are text components in the builder view.
I am new to online testing and I would appreciate any advice! Thanks a lot!