Add Start Over Button | XM Community
Skip to main content

Add Start Over Button

  • November 22, 2022
  • 5 replies
  • 260 views

Forum|alt.badge.img+1

Hi everyone,
I'm looking to add a start over button next to the submit button. With the code below I have a button next to the submit button, but I cannot seem to change any attributes with CSS nor can I add the hyperlink.
JS:
Qualtrics.SurveyEngine.addOnReady(function()

document.querySelector("#NextButton").value = "Submit"
jQuery("#NextButton").before("");
});

CSS:
.Skin #Buttons #NextButton {
 border: none !important;
 color: #fff !important;
 font-size: 160px !important;
 padding: 8px 20px !important;
 -webkit-border-radius: 4px !important;
 -moz-border-radius: 4px !important;
 -ms-border-radius: 4px !important;
 -o-border-radius: 4px !important;
 border-radius: 4px !important;
 cursor: pointer !important;
 margin: 0 !important;
 text-align: center !important;
 text-decoration: none !important;
 -webkit-appearance: none !important;
 background-color: #635BFF !important; 
 opacity: 100 !important;
}

Any assistance would be greatly appreciated! Thank you!

5 replies

Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • November 22, 2022

justinp
Why don't you use the survey flow (End of Survey) element and customize the options to redirect the survey to the anonymous link?
image.pngHope it helps!


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • November 22, 2022

justinp,
Add an id to the start over button, like this:
jQuery("#NextButton").before("");
Then use the id to style with CSS:
.Skin #Buttons #StartOver { /* styles go here */ }
And/or, add an event handler:
jQuery("#StartOver").click(function() { /* click logic goes here */ });


Forum|alt.badge.img+1
  • Author
  • November 23, 2022

TomG Thank you! Button and CSS worked great. I'm still trying to figure out how to get the button hyperlinked within the event handler. Below is the code. I can see that the hyperlink is being applied correctly, but when I click on the button nothing happens.

Qualtrics.SurveyEngine.addOnReady(function()

document.querySelector("#NextButton").value = "Submit →"
jQuery("#NextButton").before("");
jQuery("#StartOver").click(function() {
jQuery(StartOver).wrap('https://xyz" />');
});
jQuery("#NextButton").before("");
jQuery("#AskQuestion").click(function() {
jQuery(AskQuestion).wrap('https://xyz" />');
});
});


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • November 23, 2022

https://community.qualtrics.com/XMcommunity/discussion/comment/52478#Comment_52478Two things:

  1. You have a syntax errors. StartOver and AskQuestion are undefined. Use jQuery(this) instead.

  2. .wrap() isn't going to give the desired result. Use either
    window.location.href="https://xyz"
    or add a link instead of a button and style it to look like a button.


Forum|alt.badge.img+1
  • Author
  • November 23, 2022

TomG Thank you! Worked as expected.