PsychoJS/Pavlovia terminate the whole experiment while stop the routine

Online experiments
1

URL of experiment:

Description of the problem:

I am drafting a vocabulary test on psychopy and it is a MCQ question with sound played and participant select the correct choice. After the selection, the selected image will have border displayed, they can choose to press the replay_1 button to hear the word again or press next_1 botton for next trial.

Everything is ok on psychopy level, however, when running on browser or psychoJS, when pressing next_1 button it ends the whole experiment instead of the routine, with no error message neither in message box or browser console.

Meanwhile, the replay_1 button when being pressed give out no response at all, and when on trial 2, it plays the sound for trial 1 and continue to play sound for trial n-1 for trial n. While I have made sure that the condition file is correctly structured.

Here is my python and JS code for each frame section:
Python:

Initialize selected_image variable to None at each frame start

Check for mouse clicks on image components

for i in range(len(images)):
if click_1.isPressedIn(images[i]): # Check if the click is on image i
# Reset all borders and highlight the selected one
for border in borders:
border.opacity = 0
borders[i].opacity = 1
selected_image = images[i].name # Update the selected image

Check for ‘replay_1’ button click to replay sound

if click_1.isPressedIn(replay_1): # Check if the replay button is clicked
sound_2.stop() # Stop the current sound to avoid overlap
sound_2.play() # Play the sound again

Check for ‘next_1’ button click to end the trial

if click_1.isPressedIn(next_1): # Check if the next button is clicked
if selected_image: # Check if there is a selected image
thisExp.addData(‘selectedImage’, selected_image)
else:
thisExp.addData(‘selectedImage’, ‘’) # Add empty string if no image is selected
continueRoutine = False # End this routine, proceed to the next trial in the loop

JS:

selected_image = null;
let routineShouldContinue = true; // This will control the routine loop

// Check for mouse clicks on image components
images.forEach((image, index) => {
if (click_1.isPressedIn(image)) {
// Reset all borders’ opacity
borders.forEach(border => border.opacity = 0);

    // Highlight the selected image
    borders[index].opacity = 1;
    selected_image = image.name;
}

});

// Check for ‘replay_1’ button click to replay sound
if (click_1.isPressedIn(replay_1)) {
sound_2.stop(); // Ensure any currently playing sound is stopped
sound_2.play(); // Play the sound again
}

// Check for ‘next_1’ button click to end the trial
if (click_1.isPressedIn(next_1)) {
if (selected_image) {
psychoJS.experiment.addData(“selectedImage”, selected_image);
} else {
psychoJS.experiment.addData(“selectedImage”, “”);
}
routineShouldContinue = false; // Signal that the routine should not continue
}

// At the end of each frame, check whether to continue the routine
if (!routineShouldContinue) {
continueRoutine = false; // End this routine, proceed to the next trial in the loop
}

Could anyone enlighten me what could be the cause and solutions? Thank you so much!

Many thanks!

untitled.psyexp (42.8 KB)