Double page-advance (page skipping) after New Survey-Taking Experience — jQuery + header code conflict? | Experience Community
Skip to main content
MichaelC
Administrator
1 year ago
Question

Double page-advance (page skipping) after New Survey-Taking Experience — jQuery + header code conflict?

  • July 5, 2026
  • 2 replies
  • 31 views
D
Forum|alt.badge.img+2

Hi all,

I run memory-research surveys with heavy custom JavaScript, both in question-level code and in the survey header. After the New Survey-Taking Experience was enforced, they broke, and I've been fighting a navigation problem I can't fully explain. Hoping someone here has seen this.

Background

My question-level code advances pages with jQuery, e.g.:

javascript

jQuery('input[type="radio"]').on('click', function(){ jQuery('#NextButton').click(); });

After the update, this silently stopped working for many respondents — my hypothesis is that jQuery is no longer preloaded. To compensate, I added header JavaScript that advances 1-radio "continue" pages itself. This is the current header:

javascript

Qualtrics.SurveyEngine.addOnload(function() {
    var radios = document.querySelectorAll('input[type="radio"]');
    if (radios.length === 2) return;                 // coding item — keyboard only, leave alone
    if (window.Event && Event.stopObserving) {
        Event.stopObserving(document, 'keydown');    // clear a keydown listener that survives between pages
    }
});

Qualtrics.SurveyEngine.addOnReady(function() {
    var that = this;
    var radios = document.querySelectorAll('input[type="radio"]');
    if (radios.length !== 1) return;                 // only "continue" pages (single radio)
    if (radios[0].dataset.bound) return;
    radios[0].dataset.bound = '1';
    var r = radios[0];
    function handler(e){
        if(!document.contains(r)){ document.removeEventListener('click',handler,true); return; }
        if(e.target.closest('input[type="radio"], label, td, .q-radio')){
            document.removeEventListener('click',handler,true);
            r.checked = true;
            try { that.setChoiceValue(parseInt(r.value, 10), true); } catch(err){}
            requestAnimationFrame(function(){
                requestAnimationFrame(function(){ that.clickNextButton(); });
            });
        }
    }
    document.addEventListener('click', handler, true);
});

The problem

For a portion of respondents, pages now advance twice on a single click — a page flashes and is skipped automatically. It corrupts data, including on critical response-time pages. My working theory: for respondents where jQuery IS still active, both the header code above and the legacy question code fire on one click → double advance.

What I can't explain

I compared affected and unaffected survey versions directly — header, question code, and page structure are all identical — yet skip rates differ dramatically: from ~0.1% of pages up to ~36% of pages, measured from exported Page Submit timings (near-zero = skipped). Same code, wildly different skip rates. This is the part that baffles me.

My questions

  1. Has anyone confirmed under exactly what conditions jQuery is / isn't available in the new experience? Could it vary per respondent (e.g. gradual rollout, browser, cache)?
  2. Is the "header advances + legacy code advances" double-fire the likely cause, and what's the cleanest fix — remove the header advance and rely on local code, or load jQuery explicitly and remove the header advance?
  3. Any idea what could make identical survey versions skip at 0.1% vs 36%?

I can share more code and the timing data. Any insight appreciated — thanks!

    2 replies

    O
    QPN Level 5 ●●●●●
    Forum|alt.badge.img+21
    • omkarkewat
    • QPN Level 5 ●●●●●
    • July 11, 2026

    hey ​@daniel1234 , there is a some official documentation on how to use JS in new survey taking exp.
    https://api.qualtrics.com/82bd4d5c331f1-qualtrics-java-script-question-api-class


    Problem (per Qualtrics official docs)

    "The new experience no longer preloads jQuery by default, to improve survey loading speeds." This causes your code to behave inconsistently:

    • Some respondents: jQuery is cached → both header code + question code fire → double advance (36% skip rate)

    • Other respondents: jQuery not cached → only header code fires → single advance (0.1% skip rate)

    Official Recommendation

    "If your custom scripts rely on jQuery, you will need to explicitly load the library yourself, or rewrite your code in standard JavaScript."

    So maybe, try removing Header code and use Vanilla JavaScript.

    hope it helps!

     

    nikamshubham73
    Level 3 ●●●
    Forum|alt.badge.img+4

    Hi ​@daniel1234,

    You can try the below code. The New Survey Taking Experience runs on completely different set of Class and IDs.

    Qualtrics.SurveyEngine.addOnReady(function() {

        // 1. Create a timer that checks the page every 100 milliseconds
        var waitForPage = setInterval(function() {

            // 2. Look for the "page-ready" container
            var pageReady = document.getElementById("page");

            // 3. If the page is ready AND the radio buttons have loaded on the screen...
            if (pageReady && document.querySelectorAll(".choice input[type='radio']").length > 0) {

                // Stop the timer, the page is successfully loaded!
                clearInterval(waitForPage);

                // 4. Run your logic: Check if there is exactly 1 radio button
                if (document.querySelectorAll(".choice input[type='radio']").length === 1) {  

                    // 5. Apply the click listener specifically to the answer choice
                    var answerChoice = document.querySelector(".choice");

                    answerChoice.addEventListener("click", function () {  

                        // Add a tiny delay so the bubble visually fills in before advancing
                        setTimeout(function() {
                            document.querySelector(".navigation-button").click();  
                        }, 150);

                    }, { once: true });  
                }
            }
        }, 100); // Repeats every 100 milliseconds until the page is found

    });

     

     

      Terms & ConditionsAccessibility statement