Image Loading Error: Blocked attempt to show a 'beforeunload' confirmation panel for a frame that never had a user gesture since its load

[ziqifu]

Hi there,

I encountered a problem while using Cognition.run for JsPsych 6.2. Essentially, it seems like image-keyboard-response variables sometimes can't be presented for "Blocked attempt to show a 'beforeunload' confirmation panel for a frame that never had a user gesture since its load". The images will be sometimes presented though after random times of refresh. This problem does not appear when I was running things locally.

Some simplfied code snippet can be find below. Any help would be appreciated!

// Preload images
let img_preload = []; 

// preload general instructions & rule instruction slides
 for(let m=0; m<rule_instrs.length; m++) {
  img_preload.push(`static/images/instructions/${rule_instrs[m]}`);
}

// General Instructions at first 
var general_inst_image = {
  type: 'image-keyboard-response',
  stimulus: function() {
    console.log(INSTIDX);
    return `static/images/instructions/Instr${INSTIDX}.png`;
  },
  choices: function(){
    if (INSTIDX == 1) {
    return ['rightarrow'];
    } else if (1 < INSTIDX && INSTIDX < 6) {
      return ['leftarrow', 'rightarrow'];
    } else if (INSTIDX == 6) {
      return ['space'];
    }
  },
  stimulus_height: INST_HEIGHT,
  stimulus_width: INST_WIDTH,
  post_trial_gap: 500,
  on_finish: function(data) {
    this_cb = CB;
    key_press = jsPsych.pluginAPI.convertKeyCodeToKeyCharacter(data.key_press);
    if (key_press == 'rightarrow' | key_press == 'space') {
      INSTIDX++;
    } else if (key_press == 'leftarrow') {
      INSTIDX = Math.max(1, INSTIDX - 1);
    }
  }
};

// general instruction slides
var general_instructions = {
  timeline: [general_inst_image],
  loop_function: function() {
    if (INSTIDX > 6) {
      return false;
    }
    return true;
  }
};

timeline = [general_instructions];
  
save_to_db = function() {
 $.ajax({
   type: "POST",
   url: "/save_data",
   data: jsPsych.data.get().json(),
   contentType: "application/json",
   dataType: 'json',
   success: function(result) {
     if(result) {
       console.log(result);
     }
   }
 })
};


// Run and preload images
jsPsych.init({
   timeline: timeline,
   show_preload_progress_bar: true,
  
   preload_images: img_preload,
   on_finish: function() {
     /*Promise.all([save_to_db()]).then(() => {
       save_to_db(); 
       //window.open('https://app.prolific.co/submissions/complete?cc=XXXXXXX', '_blank');
     }).catch(() => {
       // resubmit
       save_to_db();
       //window.open('https://app.prolific.co/submissions/complete?cc=XXXXXXX', '_blank');
     })
     */
    jsPsych.data.get().localSave('csv', 'tsm_local.csv'); // only for piloting

   }
});