Jspsych Image Plugin

[subashsubbu]

I was trying to display a slideshow of images for experiment purposes. Images are to be displayed randomly from my directory. I have used plugins called callbackImageDisplay and experiments runs fine and console displays are somewhat expected. But when images are to be shown in screen, it appears question mark instead. I have the used the same kind of text html plugin which is working fine but images plugin are not what I expect. So is there any easy way for displaying random images from the directory?
I have link to the github code if you would like.

//this is my timeline.js
import { jsPsych } from 'jspsych';

const post_trial_gap = function () {
  return Math.floor(Math.random() * jitter) + iti;
};
const stim_duration = 200;
const iti = 300;
const jitter = 200;
//const plugin_name = callbackImageKeyboardResponsePlugin;

export function timelineFactory(callback) {
  const start_callback = function () {
    callback('start')
  };
  const stop_callback = function () {
    callback('stop')
  };
  let targets = [];
  var imageNumber;
  var fileName;
  var toPush;
  for (var i = 0; i < 10; i++) {
    imageNumber = Math.floor(Math.random() * (901 - 1) + 1);
    fileName = 'src/static/' + String(imageNumber).padStart(6,"0") + ".jpg";
    toPush = { 'stimulus': fileName };    
    if (targets.includes(toPush)) {
        i -= 1;
        continue;
    }
    targets.push(toPush);
  }
  // Create timeline
  const timeline = [];
  const welcome_block = {
    type: 'callbackHTMLDisplay',
    stimulus: "In this exercise, you will be shown a series of quickly moving pictures. In between each picture, you will see a <strong>+</strong>. Please focus on this when there is not an image on the screen. This exercise contains imagery that some may find disturbing. User beware. Press wait 5 seconds to begin.",
    choices: jsPsych.NO_KEYS,
    trial_duration: 5000,
    on_start: start_callback
  };
  timeline.push(welcome_block);

  const test_trials = {
    stimulus: 'stimulus',
    type: 'callbackImageDisplay',
    timeline: targets,
    on_start: function () {
      console.log(this)
  },
    trial_duration: function () {
      return jsPsych.randomization.sampleWithoutReplacement([250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750], 1)[0];
    },
    stimulus_duration: stim_duration,
    post_trial_gap: post_trial_gap(),  
  };
  timeline.push(test_trials);
  const end_block = {
    type: 'callbackHTMLDisplay',
    stimulus: "Thanks for participating!",
    post_trial_gap: 500,
    on_start: stop_callback
  };
  timeline.push(end_block);
  return timeline;
}

//this is my app.js
import React from 'react'
import { Experiment } from 'jspsych-react';
import { timelineFactory } from './timeline';
import callbackHTMLDisplay from './plugins/callbackHTMLDisplay';
import callbackImageDisplay from './plugins/callbackImageDisplay';


function App() {
    const callback = (targetID) => console.log(targetID);
    const timeline = timelineFactory(callback);
    return (
        <div>
            <Experiment
                settings={{ timeline: timeline }}
                plugins={{
                    "callbackHTMLDisplay": callbackHTMLDisplay,
                    "callbackImageDisplay": callbackImageDisplay
                }}
            />

        </div>
    )
}
export default App

Github link: https://github.com/subashsubbu/React_Jspych-EXP

[jodeleeuw]

Hi @subashsubbu,

This looks like it is using a fork of jsPsych and not any of the official releases. You might have more luck if you contact the authors of the fork.