# Image not displayed on Pavlovia

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;
} 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!

What you’re showing is custom Python code. That can only run locally on your computer, not when an experiment is presented remotely via a browser. That requires translating your custom code to JavaScript, which can run in a browser.

In your code components, select “Auto → JS” to see what happens when PsychoPy attempts an automatic translation. That will likely still need some manual tweaks to run properly.

Hi Michael, thank you for your reply. I changed the python code into JS code in the original post.

Hey Melanie,

If the box isn’t presented, that can be because of two things:

1. The code for presenting the box isn’t executed. You can test this by adding a bit of debug logging in the right spot. See this tutorial: https://gitlab.pavlovia.org/tpronk/tutorial_js_console_log
2. The code is executed, but doesn’t actually present the box. You can test this by removing all of the logic around it (if statements etc.)

Hope this helps! Thomas