为了实验目的,我试图显示图像幻灯片。图像将从我的目录中随机显示。我使用了名为 callbackImageDisplay 的插件,实验运行良好,控制台显示在某种程度上是预期的。但是当要在屏幕上显示图像时,它会出现问号。我使用了相同类型的文本 html 插件,它工作正常,但图像插件不是我所期望的。那么有没有简单的方法来显示目录中的随机图像?如果您愿意,我有指向 github 代码的链接。
//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