Triggering "next" response based on slider action | XM Community
Skip to main content
Solved

Triggering "next" response based on slider action

  • May 9, 2023
  • 3 replies
  • 79 views

Forum|alt.badge.img+2

Hi all, 

I am running a survey that involves rating different images. As there are many images I would like to minimise the responses given by each respondent, i.e. when a response is made, move to the next question without having to click “next”

Responses are made via a slider, and I have added the following code for the question:

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/
    
    this.questionclick = function(event,element){
        
        if(element.type == 'Qualtrics.SliderBar') {
            
            this.clickNextButton();
            
        }
        
    }

});

While this works with radio buttons, it doesn’t work with sliders. I have tried “slider”, “JSlider” in place of “Qualtrics.SliderBar”.

 

Does anyone have and ideas on how to solve this? 

 

Thank you

Best answer by qualtrics_nerd

Hi @JRPhillips ,

I implemented the above request using below code:
 

Qualtrics.SurveyEngine.addOnReady(function()
{



let sliderBar = document.querySelector('.handle');
sliderBar.addEventListener('click', function(event) {

if (event.target.classList.contains('handle')) {
document.getElementById("NextButton").click();
}
});

});


Hope this resolves your query😊!!

3 replies

qualtrics_nerd
Level 5 ●●●●●
Forum|alt.badge.img+19
  • Level 5 ●●●●●
  • Answer
  • May 9, 2023

Hi @JRPhillips ,

I implemented the above request using below code:
 

Qualtrics.SurveyEngine.addOnReady(function()
{



let sliderBar = document.querySelector('.handle');
sliderBar.addEventListener('click', function(event) {

if (event.target.classList.contains('handle')) {
document.getElementById("NextButton").click();
}
});

});


Hope this resolves your query😊!!


Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Level 8 ●●●●●●●●
  • May 9, 2023

I’ve used the below before:

var q = jQuery("#"+this.questionId);
var clicked = "no";

q.find(".track").on("mousedown , touchstart", function() {
clicked = "yes"
});

q.find(".QuestionBody").on("mouseup , touchend", function() {
if(clicked == "yes"){
jQuery("#NextButton").click();
}
});

 


Forum|alt.badge.img+2
  • Author
  • Level 1 ●
  • May 10, 2023

Thank you @qualtrics_nerd and @Tom_1842 for the suggestions. They both work well on a computer but @Tom_1842 also works on the mobile.