Add Start Over Button | Experience Community
Skip to main content

Add Start Over Button

  • Nov 22, 2022 2:53 PM UTC
  • 5 replies
  • 316 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+48
  • Nov 22, 2022 7:34 PM UTC

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 ●●●●●●●●
  • Nov 22, 2022 10:33 PM UTC

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
  • Nov 23, 2022 12:12 AM UTC

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 ●●●●●●●●
  • Nov 23, 2022 1:14 PM UTC

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
  • Nov 23, 2022 6:52 PM UTC

TomG Thank you! Worked as expected.