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

Enable Back Button - Javascript

  • Aug 19, 2021 7:18 PM UTC
  • 18 replies
  • 901 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 ●●●●●●●
  • Aug 19, 2021 9:56 PM UTC

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
  • Sep 3, 2021 3:28 PM UTC

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 ●●●●●●●
  • Sep 4, 2021 7:47 AM UTC

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+23
  • QPN Level 5 ●●●●●
  • Jan 25, 2023 7:05 PM UTC

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 ●●●●●●●
  • Jan 26, 2023 11:58 AM UTC

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+23
  • QPN Level 5 ●●●●●
  • Jan 27, 2023 12:50 PM UTC

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 ●●●●●●●
  • Jan 28, 2023 10:07 PM UTC

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 ●●●●●●●●
  • Jan 29, 2023 12:31 AM UTC

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+18
  • QPN Level 3 ●●●
  • Jan 30, 2023 2:53 PM UTC

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+23
  • QPN Level 5 ●●●●●
  • Feb 3, 2023 1:15 PM UTC

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 ●●●●●●●●
  • Feb 4, 2023 5:49 AM UTC

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+23
  • QPN Level 5 ●●●●●
  • Feb 6, 2023 12:22 PM UTC

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 ●●●●●●●●
  • Feb 6, 2023 3:38 PM UTC

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+23
  • QPN Level 5 ●●●●●
  • Feb 7, 2023 2:40 PM UTC

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 ●●●●●
  • Feb 7, 2023 3:51 PM UTC

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 ●●●●●●●●
  • Feb 8, 2023 10:09 AM UTC

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+23
  • QPN Level 5 ●●●●●
  • Feb 8, 2023 1:31 PM UTC

Thank you, its working.


ArunDubey
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+41
  • QPN Level 8 ●●●●●●●●
  • Feb 10, 2023 9:54 AM UTC

Great, all the best omkarkewat .