I am trying to run jsPsych, a JavaScript package for running psychology experiments, inside a Qualtrics survey. When doing so I can't seem to move past the first page by pressing any button, as prompted, despite this prompt being generated within jsPsych itself.
I am expecting it to register my keypresses and move on to the next screen. Here's a minimal example that can be used inside the HTML section of a Qualtrics text/graphic question:
<head>
<script src="https://unpkg.com/jspsych@7.3.4"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@2.0.0"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@2.0.0"></script>
<link href="https://unpkg.com/jspsych@7.3.4/css/jspsych.css" rel="stylesheet" type="text/css" />
</head>
<div id="blankBackground"></div>
<style>
#blankBackground {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
z-index: 999;
}
</style>
<script>
// Add blank background div under body to hide Qualtrics
const blankBackground = document.getElementById("blankBackground") // Grab reference to our container div
document.body.insertBefore(blankBackground, document.body.firstChild) // Insert it as the first element at the start of page's <body>
// hide next button - remove these to run in browser -------
const nextButton = document.getElementById('NextButton') // Qualtrics gives the next button element the id 'NextButton'
nextButton.hidden = true // Set the HTML hidden attribute, to be removed at the end of the study.
// create jsPsych and attach to display stage
var jsPsych = initJsPsych({
display_element: 'blankBackground',
on_finish: function() {
jsPsych.data.displayData();
}
});
// create timeline
var timeline = D];
// define welcome message trial
var welcome = {
type: jsPsychHtmlKeyboardResponse,
stimulus: "Welcome to the experiment. Press any key to begin."
};
timeline.push(welcome);
/* define instructions trial */
var instructions = {
type: jsPsychHtmlKeyboardResponse,
stimulus: "Another page... Press any key to begin."
};
timeline.push(instructions);
// start the experiment
jsPsych.run(timeline);
</script>
This can be adapted for the browser by deleting the two lines referencing the `NextButton`. I've posted this in a single HTML file for brevity but I do usually use the recommended Qualtrics places for content in each of these tags:
• Put \<head\> into Look and Feel
• Put CSS into Look and Feel
• Put JS into Qualtric's custom JavaScript editor attached to this question (in addOnload)
Although this doesn't change anything (nor does it appear the script tags are actually being stripped as claimed either?). I have also tried loading scripts inside the Qualtrics JavaScript editor:
function loadScripts(){
const scripts = s"https://unpkg.com/jspsych@7.3.4",
"https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.3",
"https://unpkg.com/@jspsych/plugin-image-keyboard-response@2.0.0",
"https://unpkg.com/@jspsych/plugin-preload@2.0.0"]
let script
for(let i=0; i<scripts.length; i++){
script = document.createElement('script')
script.setAttribute('src',scripts0i])
document.head.appendChild(script)
}
}
Nothing has worked so far. I can see a keydown event listener is registered, although perhaps not fully or successfully. I am aware Qualtrics use a JavaScript Form Engine (basically is a Single Page Application), and perhaps this is interrupting the context in which the jsPsych scripts are able to register event listeners?