Created
November 3, 2014 18:07
-
-
Save robinvanemden/2c35cb6b66bfe3ceb0cd to your computer and use it in GitHub Desktop.
Adding jsPsych to Qualtrics
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
} | |
}); | |
} | |
}); |
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.
- Putting the Hello-World into Qualtrics: https://kywch.github.io/jsPsych-in-Qualtrics/hello-world/
- Putting the Reaction Time Task into Qualtrics: https://kywch.github.io/jsPsych-in-Qualtrics/rt-task/
- Putting the Flanker Task into Qualtrics: https://kywch.github.io/jsPsych-in-Qualtrics/flanker/
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?