jsPsych not registering keypress in Qualtrics #3347

Max-Lovell · 2024-07-17T14:30:27Z

Max-Lovell
Jul 17, 2024

I am trying to run jsPsych inside a Qualtrics survey, a survey building GUI which allows JavaScript to be placed inside their questions. 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. 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/[email protected]"></script>
    <script src="https://unpkg.com/@jspsych/[email protected]"></script>
    <script src="https://unpkg.com/@jspsych/[email protected]"></script>
    <script src="https://unpkg.com/@jspsych/[email protected]"></script>
    <link href="https://unpkg.com/[email protected]/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 = [];

    // 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 to be run directly in-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 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. I have also tried loading scripts inside the Qualtrics JavaScript editor:

function loadScripts(){
    const scripts = ["https://unpkg.com/[email protected]",
    "https://unpkg.com/@jspsych/[email protected]",
    "https://unpkg.com/@jspsych/[email protected]",
    "https://unpkg.com/@jspsych/[email protected]"]

    let script

    for(let i=0; i<scripts.length; i++){
        script = document.createElement('script')
        script.setAttribute('src',scripts[i])
        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?

Any help much appreciated! Thanks

Answered by Max-Lovell

Aug 5, 2024

Hi @becky-gilbert,

You were right in that it wasn't arrow functions and involved this.listeners, which put me on the right path. The source of the issue is quite an annoying one - Qualtrics seem to have overridden the Array.from function .....(??!)

I have replaced the relevant instance of Array.from with the spread syntax […this.listeners], which is equivalent when using a simple array, and would only cause an issue in the event of Array.from being used on an object.

You can see this change here. I have published a distribution of this from a separate branch and my jsPsych example script sources from this distribution in the header. Which can bee run locally and in Qualtrics without issue.

…

View full answer

jodeleeuw · 2024-07-17T14:34:24Z

jodeleeuw
Jul 17, 2024
Maintainer

@Max-Lovell, just double checking: if you click on the "Welcome...." text and then press the key, does it still not progress?

1 reply

Max-Lovell Jul 19, 2024
Author

Hi Josh, nope, clicking Welcome (or anywhere else) and pressing a key still doesn't work unfortunately

becky-gilbert · 2024-07-19T18:33:35Z

becky-gilbert
Jul 19, 2024
Maintainer

@Max-Lovell I'd be happy to have a look at this, if you want to share your study with me (bgilbert at mit . edu).

1 reply

Max-Lovell Aug 2, 2024
Author

Hi @becky-gilbert, sorry for the late reply, thanks so much for taking a look. I have added you to the survey. Sharing some observations incase they are useful, appologies if already aware of any of it:

Qualtrics' JS setup is a little odd, but I can register event handlers to the document object manually without issue. Sometimes it does get in the way though - e.g. $ is reserved by the Qualtrics API for accessing their embedded data (etc) fields.

Here's some minimal jsPsych scripts I'm working with. I've entered the code in the recommended places in Qualtrics (CSS: Look & Feel -> Style -> Custom CSS; HTML Header: Look & Feel -> General -> Header; HTML Body: Text/Graphic Q -> HTML tab; JS: Text/Graphic Q -> Custom JS -> AddOnLoad or AddOnReady). I can't tell doing so makes any difference to just adding it as HTML though...

The first question appends a custom display_element appended under the body, the second is just jspsych javascript (and headers), although the latter doesn't appear with the custom jsPsych styling... not sure why.

I have noticed when running the script locally (i.e. not in Qualtrics), the event handler registers like this:

but when run through Qualtrics:

The script is missing.

I'm guessing that in the Keyboard Listener API, perhaps due to use of/not use of arrow functions, this is falling out of scope inside the closed off environment Qualtrics is creating - maybe the right context could be more explicitly bound to the listener? Or maybe just registering listeners directly to the document if it fails to register? Bit out of my depth here though...

Let me know if I can be of any help - would be great if Qualtrics could serve as a hosting site for jsPsych as Qualtrics has got all the back end features that simplify that side of things. Appreciate this might not work however. Thanks for any looking into this you can do.

becky-gilbert · 2024-08-02T19:45:54Z

becky-gilbert
Aug 2, 2024
Maintainer

Hi @Max-Lovell, thanks for sharing this with me! I had a look, and apparently my Qualtrics account doesn't let me use custom JavaScript, which is too bad because I'd love to play around with hosting jsPsych studies on Qualtrics ☹️ So I can't actually see/edit the JS in your Qualtrics study, but I can run it and look at the code that way.

Based on the Qualtrics docs and what you've said, It does sound like you've set up everything correctly.

The difference you found in handler scopes between running via Qualtrics and locally is interesting, and it might be relevant. Though it could also just be a difference in the way the custom JS is loaded but not relevant to the keyboard listener problem. I'm not sure.

I'd be more convinced that it's a scope problem if nothing at all were happening in response to keydown/up events, but in fact you ARE getting a response, which is good! It's just that the events are only triggering the console.logs from inside the rootKeydownListener and rootKeyupListener and not from the listener itself (thanks for putting those console.logs in BTW!). So if I were you, I would try to focus in on what's happening inside the rootKeydownListener function, which you know is being called but is not calling the listener function itself with the event info. Can you print the value of this.listeners? Is it empty? Can you figure out if there's something wrong with the way listeners are getting added to that list (which happens at this.listeners.add(listener); inside getKeyboardResponse)?

Sorry that I can't dig into this more myself - as I said, I can't modify the JS and am reaching a limit of what I can debug just via the developer tools.

Let us know if you get anywhere!

4 replies

Max-Lovell Aug 5, 2024
Author

Hi @becky-gilbert,

You were right in that it wasn't arrow functions and involved this.listeners, which put me on the right path. The source of the issue is quite an annoying one - Qualtrics seem to have overridden the Array.from function .....(??!)

I have replaced the relevant instance of Array.from with the spread syntax […this.listeners], which is equivalent when using a simple array, and would only cause an issue in the event of Array.from being used on an object.

You can see this change here. I have published a distribution of this from a separate branch and my jsPsych example script sources from this distribution in the header. Which can bee run locally and in Qualtrics without issue.

I'd like to PR this, if you'd accept such a change? There are other occurences of Array.from() in jsPsych although not in core, only in plugins: sketchpad, maxdiff, freesort, and examples/demos only of webgazer. At least in 3 the relevant index.ts files the [...array] syntax should be equivalent to Array.from() in each case - should I include this change in the PR?

I guess there are two other options:

Tell people to use the polyfill of Array.from() in their Qualtrics survey header as suggested on the Qualtrics forum above - might cause issues in Qualtrics though.
Might be able to use a version of jsPsych compiled for an earlier version of JavaScript which does not use Array.from() when being run from Qualtrics? I believe it shouldn't be too hard to detect the Qualtrics instance.

Let me know if you'd be interested in the PR for the Keyboard Listener and/or other plugins. Thanks.

Answer selected by becky-gilbert

becky-gilbert Aug 5, 2024
Maintainer

Wow. Well done for figuring that one out!

Were you able to test the replacement of Array.from(this.listeners) with [...this.listeners], and did it fix the problem with keypresses not registering?

I'd be interested in hearing what @jodeleeuw and @bjoluc think about a PR with this change and the other options you listed. The PR seems fine to me as long as we're sure the behavior of the spread syntax is equivalent in all the cases that are being changed. So that means checking whether any of the current Array.froms could potentially be used on objects, as you mentioned, and maybe consider a few other differences?

It would be great if jsPsych could be run on Qualtrics, but there's also a risk that we'll just keep finding more weird issues like this, and that supporting Qualtrics-compatibility will become a constantly moving target (sadly this is what happened with the QRTE library ☹️ ).

becky-gilbert Aug 5, 2024
Maintainer

Oh sorry, it looks like you said the change did fix the problem! Sorry for missing that.

Max-Lovell Aug 6, 2024
Author

Sure, understandable! look forward to hearing the other's input.

Had a go at it anyway - spread operator actually didn't work in the other cases but Array.prototype.slice.call() did in free-sort and max-diff (commit), working in Qualtrics too.

I couldn't actually get sketchpad to work even with the original Array.from() code so left it as it was - not sure why...

Thanks,

Max

jodeleeuw · 2024-08-06T18:47:38Z

jodeleeuw
Aug 6, 2024
Maintainer

I'd be open to a PR that replaces Array.from() with ... syntax. There are only a handful of places where Array.from() is used in the entire repo. I think it would be important to make sure that all of those cases are covered by a test before making the swap.

4 replies

Max-Lovell Aug 6, 2024
Author

Thanks Josh, I've actually just replied to becky above. Array.prototype.slice.call() was needed instead of spread in maxdiff and free-sort.

Are these the tests automatically run on a push to main? Those are passing.

I've also published a distribution of a re-build of the whole repo to pages:

raw files e.g.: https://max-lovell.github.io/jsPsych/packages/plugin-free-sort/dist/index.browser.js
Examples e.g.: https://max-lovell.github.io/jsPsych/examples/jspsych-free-sort.html

And the same for max-diff. I've then pulled these into Qualtrics (keyboard response also shown): https://universityofsussex.eu.qualtrics.com/jfe/form/SV_9LkywyYb3mtbtgq

Everything appears to be working. I couldn't get the original version of Sketchpad to work so haven't done that, nor the demo or example for webgazer (yet) - but those would cover every instance of Array.from().

Let me know if there's other tests needed.

Max-Lovell Aug 6, 2024
Author

Oh I see npm test the website. Everything passed this including the relevant plugin-free-sort, plugin-maxdiff, and plugin-html-keyboard-response which have a green 'pass' and no comments. Only issue was this

I believe this seems unlikely to be due to my changes though?

jodeleeuw Aug 6, 2024
Maintainer

Great! Go ahead and open a PR if you'd like, and we can discuss any specific issues in that thread for better tracking.

Max-Lovell Aug 6, 2024
Author

Cheers

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

jsPsych not registering keypress in Qualtrics #3347

{{title}}

Replies: 4 comments 10 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

jsPsych not registering keypress in Qualtrics #3347

Max-Lovell Jul 17, 2024

Replies: 4 comments · 10 replies

jodeleeuw Jul 17, 2024 Maintainer

Max-Lovell Jul 19, 2024 Author

becky-gilbert Jul 19, 2024 Maintainer

Max-Lovell Aug 2, 2024 Author

becky-gilbert Aug 2, 2024 Maintainer

Max-Lovell Aug 5, 2024 Author

becky-gilbert Aug 5, 2024 Maintainer

becky-gilbert Aug 5, 2024 Maintainer

Max-Lovell Aug 6, 2024 Author

jodeleeuw Aug 6, 2024 Maintainer

Max-Lovell Aug 6, 2024 Author

Max-Lovell Aug 6, 2024 Author

jodeleeuw Aug 6, 2024 Maintainer

Max-Lovell Aug 6, 2024 Author

Max-Lovell
Jul 17, 2024

Replies: 4 comments 10 replies

jodeleeuw
Jul 17, 2024
Maintainer

Max-Lovell Jul 19, 2024
Author

becky-gilbert
Jul 19, 2024
Maintainer

Max-Lovell Aug 2, 2024
Author

becky-gilbert
Aug 2, 2024
Maintainer

Max-Lovell Aug 5, 2024
Author

becky-gilbert Aug 5, 2024
Maintainer

becky-gilbert Aug 5, 2024
Maintainer

Max-Lovell Aug 6, 2024
Author

jodeleeuw
Aug 6, 2024
Maintainer

Max-Lovell Aug 6, 2024
Author

Max-Lovell Aug 6, 2024
Author

jodeleeuw Aug 6, 2024
Maintainer

Max-Lovell Aug 6, 2024
Author