Code for custom button to start survey at top of page? | XM Community
Skip to main content
Solved

Code for custom button to start survey at top of page?

  • April 10, 2022
  • 3 replies
  • 561 views
R
Forum|alt.badge.img+1

I have a long survey preamble. Respondents have to scroll to the very bottom to click "Next" to start the survey. Is there code that I can use to insert a button within the first "Text/Graphic" question type near the top of the page (right below the survey title/not in the Header) to start the survey? I'd also like to be able to customize the wording on the button. Thanks in advance!

Best answer by Rudi

Hi researcher1
you can do this by:

  1. go to the html editor for the question text

  2. add a button on the top

  3. you might want to add two
    tags

  4. one for the button

  5. one for the text below

  6. this two divs you can use to position the button and and the text by css

  7. style the button to your liking in the css part of the style

  8. add the below java script

Qualtrics.SurveyEngine.addOnReady(function()
{

// start survey by clicking on a button
this.questionclick = function(event,element)
  {
    
    console.log(event, element);
    if (element.id == 'surveyStartButton') // insert the id of your survey start button
    {
         alert('You clicked the start button'); // for testing only remove before going live
this.clickNextButton() // clicks on the next button and thus starts the survey        
    }
  }
});
Best regards

Rudi

3 replies

Rudi
QPN Level 3 ●●●
Forum|alt.badge.img+16
  • Rudi
  • QPN Level 3 ●●●
  • Answer
  • April 11, 2022

Hi researcher1
you can do this by:

  1. go to the html editor for the question text

  2. add a button on the top

  3. you might want to add two
    tags

  4. one for the button

  5. one for the text below

  6. this two divs you can use to position the button and and the text by css

  7. style the button to your liking in the css part of the style

  8. add the below java script

Qualtrics.SurveyEngine.addOnReady(function()
{

// start survey by clicking on a button
this.questionclick = function(event,element)
  {
    
    console.log(event, element);
    if (element.id == 'surveyStartButton') // insert the id of your survey start button
    {
         alert('You clicked the start button'); // for testing only remove before going live
this.clickNextButton() // clicks on the next button and thus starts the survey        
    }
  }
});
Best regards

Rudi

R
R
Forum|alt.badge.img+1
  • researcher1
  • Author
  • April 13, 2022

Hi Rudi, Thank you so much for your step-by-step instructions and sharing your code. I had some difficulties but a kind colleague at work who is more familiar with HTML and JavaScript helped me out. It works perfectly now!

C
Forum|alt.badge.img
  • carl101
  • February 5, 2024

Hi Rudi

 

I created the button in HTML except I am not sure where I should put the javascript you have attached in your message. should i add it in the “java section” in Qualtrics or this should be just within the HTML provision in the question section?

Lastly, for the id for the start button do I use the button id used in HTML in which case it would be “myFunction31()” according to the HTML code for creating button below...

<br><br>
<button onclick="myFunction31()">Start Survey</button>
<script> function myFunction31()
</script>

Terms & ConditionsAccessibility statement