Animations and timeline variables #2125
-
|
Hi everyone—I'm new to jsPsych/JavaScript, and wrangling with animations. I have 50 sequences (with up to 40 frames each), which need to be randomised in order. I've managed to "manually" code up a couple of trial blocks and shuffle them, but with so many sequences that's getting tedious very quickly. I've tried to use timeline variables, but get a <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My experiment</title>
<script type="text/javascript" src="lib/vendors/jspsych-6.1.0/jspsych.js"></script>
<script type="text/javascript" src="lib/vendors/jspsych-6.1.0/plugins/jspsych-html-keyboard-response.js"></script>
<script type="text/javascript" src="lib/vendors/jspsych-6.1.0/plugins/jspsych-image-keyboard-response.js"></script>
<script type="text/javascript" src="lib/vendors/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="lib/jspsych-pavlovia-3.2.5.js"></script>
<script type="text/javascript" src="lib/vendors/jspsych-6.1.0/plugins/jspsych-animation.js"></script>
<link rel="stylesheet" type="text/css" href="lib/vendors/jspsych-6.1.0/css/jspsych.css">
</head>
<body></body>
<script>
/* Create timeline */
var timeline = [];
/* init connection with pavlovia.org */
var pavlovia_init = {
type: "pavlovia",
command: "init"
};
timeline.push(pavlovia_init);
/* Define welcome message trial */
var welcome = {
type: "html-keyboard-response",
stimulus: "Welcome to the experiment :) Press any key to begin."
};
timeline.push(welcome);
/* Define fixation trial */
var fixation = {
type: 'html-keyboard-response',
stimulus: '<p style="font-size: 48px; font-family: monospace;">+</p>',
choices: jsPsych.NO_KEYS,
trial_duration: 500
}
/* Define stimulus sequences and test_trial */
var stim_list = [
{
"name": "F01",
"i_neutral": "resources/stim/F01-anger_n.jpg",
"i_mid": "resources/stim/F01-anger_m.jpg",
"i_apex": "resources/stim/F01-anger_a.jpg",
},
{
"name": "F02",
"i_neutral": "resources/stim/F02-anger_n.jpg",
"i_mid": "resources/stim/F02-anger_m.jpg",
"i_apex": "resources/stim/F02-anger_a.jpg",
}
]
var test_trial = {
type: 'animation',
stimuli: [jsPsych.timelineVariable('i_neutral'), jsPsych.timelineVariable('i_mid'), jsPsych.timelineVariable('i_apex')],
frame_time: 1500
}
/* Define procedure */
var procedure = {
timeline: [fixation, test_trial],
timeline_variables: stim_list
}
timeline.push(procedure);
/* Finish connection with pavlovia.org */
var pavlovia_finish = {
type: "pavlovia",
command: "finish"
};
timeline.push(pavlovia_finish);
/* Start the experiment */
jsPsych.init({
timeline: timeline,
show_progress_bar: true,
on_finish: function () {
jsPsych.data.displayData();
}
});
</script>
</html>*[EDITED: my initial error was indeed something obvious—there was a typo in the animation trial, which led to a |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
Never mind me :) I figured it out—I had misspecified my stimulus list: var stim_list = [
{stimulus: ['resources/stim/F01-anger_n.jpg', 'resources/stim/F01-anger_m.jpg', 'resources/stim/F01-anger_a.jpg']},
{stimulus: ['resources/stim/F02-anger_n.jpg', 'resources/stim/F02-anger_m.jpg', 'resources/stim/F02-anger_a.jpg']}
]
var test_trial = {
type: 'animation',
stimuli: jsPsych.timelineVariable('stimulus'),
frame_time: 1500
} |
Beta Was this translation helpful? Give feedback.
-
|
Glad you figured it out, and thanks for the update! |
Beta Was this translation helpful? Give feedback.
-
|
I'll probably be back with more questions 🙃 jsPsych is a really great tool, and I very much appreciate how responsive you guys are to queries—the archived questions have been immensely helpful already! |
Beta Was this translation helpful? Give feedback.
Never mind me :) I figured it out—I had misspecified my stimulus list: