jsPsych 7.0 Migrating from 6.x to 7.x - for jsPsych.pluginAPI.preloadImages

[shaygr9]

HI,
I am trying to use jsPsych.pluginAPI.preloadImages as suggested in https://www.jspsych.org/7.0/reference/jspsych-pluginAPI/ and get an error:

[email protected]:1 Uncaught MigrationError: The global `jsPsych` variable is no longer available in jsPsych v7. Please follow the migration guide at https://www.jspsych.org/7.0/support/migration-v7/ to update your experiment.
    at get pluginAPI [as pluginAPI] ([email protected]:1:13218)
    at start?srid=1962:133:21
    at readyForOnLoad (jatos.js:538:11)
    at jatos.js:319:5
    at c (jquery-3.5.1.min.js:2:28294)
    at fireWith (jquery-3.5.1.min.js:2:29039)
    at e (jquery-3.5.1.min.js:2:30277)
    at t (jquery-3.5.1.min.js:2:30307)
    at jquery-3.5.1.min.js:2:30443
    at e (jquery-3.5.1.min.js:2:30005)

My code:

var n_loaded = 0;
var img_src = images.map(img => "/study_assets_root/Image_series_boundary_check_qs/Stimuli/" + img + "/sq_" + img + "_ST.jpg");
jsPsych.pluginAPI.preloadImages(img_src, function () {
    startExperiment();
}, function (file) {
    updateLoadedCount(file);
});

function updateLoadedCount(file) {
    n_loaded++;
    var percentcomplete = n_loaded / images.length * 100;

    // could put something fancier here, like a progress bar
    // or updating text in the DOM.
    document.getElementById("progress").style.width = (percentcomplete) + '%';
    if (percentcomplete === images.length) {
        document.getElementById("progress").style.display = "none"; // HERE - remove after all loaded
    }
    console.log('Loaded ' + percentcomplete + '% of images');
}

with the imports:

    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://unpkg.com/@jspsych/[email protected]"></script>
    <script src="https://unpkg.com/@jspsych/[email protected]"></script>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/jspsych.css" />
    <script src="/assets/javascripts/jatos.js"></script>
    <script src="/study_assets_root/Image_series_boundary_check_qs/stimuli_var.js"></script>

Does anyone have an idea for a fix?

Thanks in advance,
Shay

[jodeleeuw]

Hi Shay,

Have you considered using the preload plugin? That's generally what we recommend for preloading images unless you need something specific customized.

The reason for the error message is probably that jsPsych hasn't been initialized. In version 7 you need to run const jsPsych = initJsPsych() to create an instance of jsPsych.