Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Adding jsPsych to Qualtrics
Qualtrics.SurveyEngine.addOnload(function() {
//Retrieve the Response ID from the hidden Qualtrics Session ID value
var responseIdFromSessionID = jq('#SessionID').val().replace("SS_", "R_");
//Retrieve Qualtrics object and save in qthis
var qthis = this;
//Hide buttons - can also (even better) be hidden in the CSS
jq('#Buttons').css("display", "none");
// Experiment parameters
var n_trials = 4;
// URL of stimuli, after they have been uploaded to the Qualtrics file library
var stimuli = ["https://uleidenss.eu.qualtrics.com/ControlPanel/File.php?F=F_1yV3v1V6T6bwVrD",
"https://uleidenss.eu.qualtrics.com/ControlPanel/File.php?F=F_0p27riC6IBX0GeF",
"https://uleidenss.eu.qualtrics.com/ControlPanel/File.php?F=F_9M4L4C2xdixRCIt",
"https://uleidenss.eu.qualtrics.com/ControlPanel/File.php?F=F_0Sq50Jt0Sf4ZZul"
];
var stimuli_types = ["congruent-left", "congruent-right", "incongruent-left", "incongruent-right"];
var instructions = "<div id='instructions' style='text-align:center;'><p>You will now see a " +
"series of images that look similar to this:</p><br/><p>" +
"<img src='https://uleidenss.eu.qualtrics.com/ControlPanel/File.php?F=F_0Sq50Jt0Sf4ZZul'></p><br/><p>Press the arrow " +
"key that corresponds to the direction that the <strong>middle</strong> arrow " +
"is pointing. <br/>For example, in this case you would press the " +
"<strong>right arrow key on your keyboard</strong>.</p><p>Please try to " +
"respond <strong>as fast as possible</strong>, even at the expense of accuracy.</p><p>Press an arrow key to start.</p></div>";
// Generating Random Order for Stimuli
var stimuli_random_order = [];
var opt_data = [];
for (var i = 0; i < n_trials; i++) {
var random_choice = Math.floor(Math.random() * stimuli.length);
stimuli_random_order.push(stimuli[random_choice]);
opt_data.push({
"stimulus_type": stimuli_types[random_choice],
"ResponseID": responseIdFromSessionID // add ResponseID to data
});
}
// Define experiment blocks
var instruction_block = {
type: "text",
text: [instructions],
timing_post_trial: 1000
};
var test_block = {
type: "single-stim",
stimuli: stimuli_random_order,
choices: [37, 39],
data: opt_data
};
// preload images
// call start() when loading is complete
jsPsych.preloadImages(stimuli, start);
function start() {
jsPsych.init({
display_element: jq('#jspsych_target'),
experiment_structure: [instruction_block, test_block],
on_finish: function(data) {
//save the CSV data to the ResultOfFlanker embedded data field - creation of the Embedded field could also be done through the Qualtrics JS API
Qualtrics.SurveyEngine.setEmbeddedData("ResultOfFlanker", jsPsych.dataAPI.dataAsCSV());
// simulate click on Qualtrics "next" button, making use of the Qualtrics JS API
qthis.clickNextButton();
}
});
}
});
@thomasschubert

This comment has been minimized.

Copy link

@thomasschubert thomasschubert commented Aug 16, 2016

very useful! have you used this recently - i.e., updated to recent jspsych versions? and what was the respective code on the html side of qualtrics?

@kywch

This comment has been minimized.

Copy link

@kywch kywch commented May 4, 2020

Here is the step-by-step tutorial to use jsPsych in Qualtrics: https://kywch.github.io/jsPsych-in-Qualtrics/. I took the jsPsych's Hello-World, Reaction Time Task, and Flanker Task and embedded these in Qualtrics.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment