Moving Next Button to the Top of Survey - New Survey Experience | XM Community
Skip to main content

Hello all,

We are trying to clone our Next/Previous buttons to the top and bottom of our survey but are running into issues with the New Survey Experience.

We are referencing this post and this post to clone those buttons but the present code does not apply when using the NSE.

We switched the existing survey back to the older style and the CSS/script for the header worked instantly so we assume it is how the NSE is interpreting the script.

Has anyone been able to do this with the New Survey Experience?

We appreciate any and all help!
Thanks all!

Hi ​@igrathen , the below is working for me to clone the navigation buttons and put them at the top of the survey. It clones the navigation div, assigns it a new class, and uses that class to distinguish the cloned navigation buttons from the original ones in the selectors. clickNextButton() and clickPreviousButton() are used when the cloned buttons are clicked. I also made it so the cloned navigation buttons get removed on page submit because the buttons were piling up without it. This still happens in the mobile view of the Preview link, so I recommend testing with a live link. Try using the HTML/Source view "<>" to add the below to the survey's Header:

<script>
Qualtrics.SurveyEngine.addOnReady(function() {
    var that = this;

    // Hide the header-container
    document.getElementById('header-container').style.display = 'none';

    // Clone the navigation div
    var buttons = document.getElementById('navigation').cloneNode(true);

    // Add a class to the cloned navigation div
    buttons.classList.add('cloned-navigation');

    // Place the cloned navigation div under survey-canvas
    var surveyCanvas = document.getElementById('survey-canvas');
    surveyCanvas.insertBefore(buttons, surveyCanvas.firstChild);

    // Click Next Button
    document.querySelector('.cloned-navigation #next-button').addEventListener('click', function() {
        that.clickNextButton();
        document.querySelector('.cloned-navigation #next-button').style.opacity = 0.5;
    });

    // Check if the previous button exists before clicking Previous Button
    var clonedPreviousButton = document.querySelector('.cloned-navigation #previous-button');
    if (clonedPreviousButton) {
        clonedPreviousButton.addEventListener('click', function() {
            that.clickPreviousButton();
            document.querySelector('.cloned-navigation #previous-button').style.opacity = 0.5;
        });
    }
});

// Clear away the cloned navigation on page submit
Qualtrics.SurveyEngine.addOnPageSubmit(function() {
        var clonedButtons = document.querySelector('.cloned-navigation');
        if (clonedButtons) {
            clonedButtons.remove();
        }
});
</script>

 

Hi ​@igrathen , the below is working for me to clone the navigation buttons and put them at the top of the survey. It clones the navigation div, assigns it a new class, and uses that class to distinguish the cloned navigation buttons from the original ones in the selectors. clickNextButton() and clickPreviousButton() are used when the cloned buttons are clicked. I also made it so the cloned navigation buttons get removed on page submit because the buttons were piling up without it. This still happens in the mobile view of the Preview link, so I recommend testing with a live link. Try using the HTML/Source view "<>" to add the below to the survey's Header:

<script>
Qualtrics.SurveyEngine.addOnReady(function() {
    var that = this;

    // Hide the header-container
    document.getElementById('header-container').style.display = 'none';

    // Clone the navigation div
    var buttons = document.getElementById('navigation').cloneNode(true);

    // Add a class to the cloned navigation div
    buttons.classList.add('cloned-navigation');

    // Place the cloned navigation div under survey-canvas
    var surveyCanvas = document.getElementById('survey-canvas');
    surveyCanvas.insertBefore(buttons, surveyCanvas.firstChild);

    // Click Next Button
    document.querySelector('.cloned-navigation #next-button').addEventListener('click', function() {
        that.clickNextButton();
        document.querySelector('.cloned-navigation #next-button').style.opacity = 0.5;
    });

    // Check if the previous button exists before clicking Previous Button
    var clonedPreviousButton = document.querySelector('.cloned-navigation #previous-button');
    if (clonedPreviousButton) {
        clonedPreviousButton.addEventListener('click', function() {
            that.clickPreviousButton();
            document.querySelector('.cloned-navigation #previous-button').style.opacity = 0.5;
        });
    }
});

// Clear away the cloned navigation on page submit
Qualtrics.SurveyEngine.addOnPageSubmit(function() {
        var clonedButtons = document.querySelector('.cloned-navigation');
        if (clonedButtons) {
            clonedButtons.remove();
        }
});
</script>

 


Your script worked like a charm!

Thank you so much, Tom!

Leave a Reply


Terms & Conditions