Enable Back Button - Javascript | XM Community
Skip to main content
Question

Enable Back Button - Javascript

  • August 19, 2021
  • 18 replies
  • 818 views

Hi all,
I need to enable the back button only to few specific questions of my survey. Do you have any javascript that may work?
Thank you

18 replies

Forum|alt.badge.img+22
  • Level 7 ●●●●●●●
  • August 19, 2021

Enable the previous button globally and then add this JS to the questions you don't want it:
Qualtrics.SurveyEngine.addOnload(function () {
    this.hidePreviousButton();
});


Forum|alt.badge.img+1
  • September 3, 2021

ahmedA
Is there any way to accomplish this without turning on the previous button globally? I have a survey already built with about 100 Qs and I only want the previous button to appear for the first 5 pages. I don't want to have to go into 95 Qs to turn the previous button OFF.


Forum|alt.badge.img+22
  • Level 7 ●●●●●●●
  • September 4, 2021

I don't think so, because the back button appears to be a global option.
What you can do is this, hide the back button via CSS:
.Skin #Buttons #PreviousButton {
    display: none;
}
Then, for the question you want it to appear, show it using JS:
Qualtrics.SurveyEngine.addOnReady(function () {
    document.querySelector("#PreviousButton").style.display = "block";
});


Forum|alt.badge.img+21
  • QPN Level 5 ●●●●●
  • January 25, 2023

Hi ahmedA
I tried the above JS to display back button on the particular question but still it's not working.
PS:- there is a display logic in the survey flow before that block, maybe that's what preventing the back button.


Forum|alt.badge.img+22
  • Level 7 ●●●●●●●
  • January 26, 2023

The back button will need to be enabled at the survey level. The CSS will hide it. The JS should be applied to those questions where you want to display the back button.


Forum|alt.badge.img+21
  • QPN Level 5 ●●●●●
  • January 27, 2023

Yes I tried the whole set up but due to some logics in the survey flow , it is preventing the back button to appear. So I want to enable it through JS (which i tried too but it's not happening.


Forum|alt.badge.img+22
  • Level 7 ●●●●●●●
  • January 28, 2023

Back buttons don't work on some blocks like those inside a randomizer, branch logic etc.. So if it's the first page of a new block, you may not be seeing it.


ArunDubey
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+41
  • QPN Level 8 ●●●●●●●●
  • January 29, 2023

In the addition of ahmedA's response. You can add text and graphics at first page block where you want to show back button and can click auto forward in that page. So your question will not be the first page of block and then above JS will work for you.

You can try below trick.
1) create Text/Graphics question element as a first page of block where you want to show back button
2) replace question text of text page in html view and inseart " ";
3) add below JS under addOnload() for auto forward in text page.
setTimeout(function(){
jQuery("#NextButton").trigger("click");
},50);


grahulp5
QPN Level 3 ●●●
Forum|alt.badge.img+13
  • QPN Level 3 ●●●
  • January 30, 2023

You can just set the buttons to be visible from settings and hide them using js and show only where needed.
like, jQuery('#NextButton').css('display','block')
jQuery('#PreviousButton').css('display','block')


Forum|alt.badge.img+21
  • QPN Level 5 ●●●●●
  • February 3, 2023

Hi ArunDubey
I tried your solution and its working, thank you so much.
I wanted to ask that can we not speed up the small delay time that it takes to auto forward the text/graphic question. I agree that it hardly takes less than a second for the whole process but still it is visible to the naked eye.
If it is possible it would be great for the user experience.


ArunDubey
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+41
  • QPN Level 8 ●●●●●●●●
  • February 4, 2023

Hi omkarkewat , you can try to replace it with 10 or 5. Either you can do one thing. You can add one loading gif inside of that page. So it will look like loading and will not be weird.

image.png


Forum|alt.badge.img+21
  • QPN Level 5 ●●●●●
  • February 6, 2023

ArunDubey I got your gif related part but didn't understand the '10 or 5' thing. What does it mean?


ArunDubey
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+41
  • QPN Level 8 ●●●●●●●●
  • February 6, 2023

It's milisecond. 1 second =1000 milisecond. In setTimeout function you are using 50 after button click trigger, which is basically .05 second. Which means your button will be clicked after .05 second. If you will reduce it to 5. Then your button will be clicked after .005 second which is quicker then earlier time. You can try this. But I will suggest you to use GIF instead.


Forum|alt.badge.img+21
  • QPN Level 5 ●●●●●
  • February 7, 2023

Where can I access this setTimeout function, Is it a javascript code or a function in qualtrics itself?


qualtrics_nerd
Level 5 ●●●●●
Forum|alt.badge.img+19
  • Level 5 ●●●●●
  • February 7, 2023

Hi omkarkewat ,
setTimeout function is a standard JavaScript function.
You can read about it further on below links-
https://developer.mozilla.org/en-US/docs/Web/API/setTimeout
https://www.w3schools.com/jsref/met_win_settimeout.asp


ArunDubey
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+41
  • QPN Level 8 ●●●●●●●●
  • February 8, 2023

It’s a javascript function which was already defined in my code. I’m pasting same code again for your quick reference. You can paste same code in javascript module under default addOnload() function in Qualtrics. You can replace 50 with 5 in below code to reduce click time.


setTimeout(function(){
jQuery("#NextButton").trigger("click");
},50);


Forum|alt.badge.img+21
  • QPN Level 5 ●●●●●
  • February 8, 2023

Thank you, its working.


ArunDubey
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+41
  • QPN Level 8 ●●●●●●●●
  • February 10, 2023

Great, all the best omkarkewat .