Adding jsPsych to Qualtrics

QualtricsQuestionJs.js

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();
            }
        });
    }

});

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?

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/