Hide the next button in Slider questions with Multiple statements: | XM Community
Solved

Hide the next button in Slider questions with Multiple statements:

  • 28 February 2024
  • 4 replies
  • 77 views
D
Badge +1

Hello! I’m new to the community and am looking for a little code to help me with a survey that contains slider questions. There are 7 statements within each slider question.

I’m looking for code to hide the ‘next’ button until all 7 sliders have been interacted with. The code below shows the ‘next’ button after one slider has been clicked and it also causes the sound file to play again if participants try to advance. For my study, this is the bigger issue since I want to limit the number of times a participant hears each sound file to 1. I need to keep forced responses, so the page will not advance if all questions are not answered.

My question would be an expansion of this question and answer:

https://community.qualtrics.com/custom-code-12/show-next-button-after-slider-has-been-moved-23737

Thanks so much! 

icon

Best answer by dwaughtal 1 March 2024, 18:58

View original

4 replies

O
Rank
Userlevel 5
Badge +12

Hi @dwaughtal The below code will show the next button only when all the 7 sliders have been interacted.

 

Qualtrics.SurveyEngine.addOnload(function() {
    var that = this;
    var q = jQuery("#" + this.questionId);
    var slidersInteracted = 0;

    this.hideNextButton();

    q.find(".track").on("mousedown touchstart", function() {
        slidersInteracted++;
    });

    q.find(".track").on("mouseup touchend", function() {
        checkSlidersInteracted();
    });

    function checkSlidersInteracted() {
        setTimeout(function() {
            if (slidersInteracted === 7) {
                that.showNextButton();
            }
        }, 100); // Adding a small delay to ensure proper event handling
    }

    // If the user goes back, reset the counter
    jQuery(window).on('beforeunload', function() {
        slidersInteracted = 0;
    });
});

D
Badge +1

Hi omkarkewat, thanks so much for this code! This worked to a large extent. The ‘next’ button does appear after 7 clicks have been made. The only possible issue with the code seems to be that if a participant goes back to move a slider they’ve already interacted with, then any change counts as an additional click. I did this unintentionally in the ‘preview’ mode by clicking twice on a slider I had already clicked, so the ‘next’ button appeared when the tally of clicks was 7, but one slider still needed to be interacted with.

Participants may change their minds and move a slider more than once - and I was hoping to keep it that way, if possible. Participants won’t be able to go back to previous pages to change their ratings, however.

I really appreciate your help!! 

Deb

O
Rank
Userlevel 5
Badge +12

Hi @dwaughtal Below code should work.

 

Qualtrics.SurveyEngine.addOnload(function() {
    var that = this;
    var q = jQuery("#" + this.questionId);
    var slidersInteracted = 0;
    var interactedSliders = [];

    this.hideNextButton();

    q.find(".track").on("mousedown touchstart", function() {
        var sliderId = jQuery(this).attr('id');
        if (interactedSliders.indexOf(sliderId) === -1) {
            slidersInteracted++;
            interactedSliders.push(sliderId);
            checkSlidersInteracted();
        }
    });

    function checkSlidersInteracted() {
        if (slidersInteracted === 7) {
            that.showNextButton();
        }
    }

    // If the user goes back, reset the counter
    jQuery(window).on('beforeunload', function() {
        slidersInteracted = 0;
        interactedSliders = [];
    });
});

D
Badge +1

Hi omkarkewat, this code works perfectly! This ensures that participants will hear the sound file only once - and that they won’t have the option to omit sliders. I’m very grateful for your help!

 

Leave a Reply


Terms & Conditions