Qualtrics JavaScript Plugins

Before discussing JavaScript code that will add functionality to your Qualtrics survey, you should first understand where you can add scripts to it and how to find identifying tags for Qualtrics questions and choices.

Adding scripts/CSS to the entire survey:
1. Once in your survey, click on the “Look & Feel” tab. Then click “Advanced”
2. Once here, you can add CSS in either the header, the footer, linking an external CSS style sheet hosted somewhere, or by clicking on add custom CSS.

If adding CSS or JavaScript to the Header or Footer, click on edit like above and then click on Source in the text editor.

Adding scripts to particular questions:
1. If you wish to add JavaScript to a question, click on the gray gear and select Add JavaScript. Then, paste code below “Place Your JavaScript Here” line
Finding the html id, class or element for a specific question/choice:
1. Open a Chrome or Firefox browser and go to your survey. Once there, click Preview Survey.
2. Scroll to the question or choice you wish your code to target and right click on it. In Chrome you select “Inspect” and in Firefox you select “Inspect Element”.
3. In either Chrome or Firefox, the element you want will then be highlighted. Find the “part id = “ or the part “class= “
4. On some scripts this information may be needed for the script to work.

The sample code should be inserted into the first question of the page in below "/*Place your JavaScript here to run when the page loads*/":

var that = this; //Event.observe listens for any key stroke Event.observe(document, 'keydown', function keydownCallback(e) { that.clickNextButton(); })

It should work without changes on any question since it doesn’t list specific elements in the page. You can check out the next question demo to see how it works.

The sample code should be inserted into the first question of the page in below "/*Place your JavaScript here to run when the page loads*/":

var that = this; //Event.observe listens for any key stroke Event.observe(document, 'keydown', function keydownCallback(e) { // switch checks specific conditions. case 75 means that in the instance that e is equal to 75 switch (e.keyCode) { // 'k' was pressed. case 75: that.clickNextButton(); break; } })

The current example is for the letter k. You can change the letter that is checked for by changing the number after 'case'. Please use these the ascii letter codes in the decimal column that corresponds to the letter or key you want to activate the next question button. You can check out the specific key next question demo to see how it works.

Here is a tool for presenting a warning to online survey respondents who are moving too quickly. When your survey is ready, go to the point in the questionnaire where you might like the speeder warning to appear. You will insert two questions: the first is an “invisible” question that will not appear to respondents, but will determine whether the speed of the response at this point in the questionnaire is above or below a threshold amount of time. The second question is the text that will appear to the respondent if the answer to the previous question is “Yes”, meaning the respondent is moving too quickly.

On the page that you want to have the speed warning message appear, insert the “invisible” two-choice question "Are you going too fast?" with the first value as "No" and the second value as "Yes". It should look like this:

This “invisible” question should be the last question on the page, so you need to insert a page break after it. After this page break, add another question. The message in that question will remind speedy respondents to take their time while answering the survey. Following Conrad et al. (2017), it should look something like this:

“You seem to have responded very quickly. Please be sure you have given the question sufficient thought to provide an accurate answer. Do you want to go back and reconsider your answer?”

Add another page break after that question and add skip logic to the "Are you going too fast?" question. The skip logic should skip to the question after “You seem to have responded very quickly" if no is selected.

Next we want to hide the "Are you going too fast question?" so that it is not visible to your survey takers. In Look and Feel -> advanced -> edit header -> click source and paste in the following CSS inline style.

</style>

The id of the div you are looking for is likely to be different. Remember to change #QID5 to whatever the id is for that html element. You can find that id by previewing the survey and right clicking to inspect that element. After a little hunting you should find it. The format should be similar to QID and then the question number.

This will hide the "Are you going too fast question?".

Then add the following javascript to the "Are you going to fast?" question inside of Qualtrics.SurveyEngine.addOnload(function(){ :

/*Place Your JavaScript Here*/ var that = this; that.setChoiceValue(2, 'yes'); setTimeout(function(){that.setChoiceValue(1, 'no');} , 10000);

Inside of setTimeout, the last number 10000 refers to how long the timer waits in miliseconds. 10000 is 10 seconds. If you want the user to spend a different amount of time on the page, change the value. The time refers to the amount of time taken to respond to all of the questions on the page where the speed warning is embedded.

Finally, if you wish for survey takers to have the option to go back upon reading the warning message or at any other time, while in the survey editing page, select "Survey Options" and check off "Back Button" and click save.

Now test out your survey and make sure that it works.

Here is a tool for presenting a warning to online survey respondents who are moving too quickly. Unlike the previous example, this warning can keep track of time across multiple pages. When your survey is ready, go to the point in the questionnaire where you might like the speeder warning to appear. You will insert two questions: the first is an “invisible” question that will not appear to respondents, but will determine whether the speed of the response at this point in the questionnaire is above or below a threshold amount of time. The second question is the text that will appear to the respondent if the answer to the previous question is “Yes”, meaning the respondent is moving too quickly.

On the page that you want to have the speed warning message appear, insert the “invisible” two-choice question "Are you going too fast?" with the first value as "No" and the second value as "Yes". It should look like this:

This “invisible” question should be the last question on the page, so you need to insert a page break after it. After this page break, add another question. The message in that question will remind speedy respondents to take their time while answering the survey. Following Conrad et al. (2017), it should look something like this:

“You seem to have responded very quickly. Please be sure you have given the question sufficient thought to provide an accurate answer. Do you want to go back and reconsider your answer?”

Add another page break after that question and add skip logic to the "Are you going too fast?" question. The skip logic should skip to the question after “You seem to have responded very quickly" if no is selected.

Next we want to hide the "Are you going too fast question?" so that it is not visible to your survey takers. In Look and Feel -> advanced -> edit header -> click source and paste in the following CSS inline style.

</style>

The id of the div you are looking for is likely to be different. Remember to change #QID5 to whatever the id is for that html element. You can find that id by previewing the survey and right clicking to inspect that element. After a little hunting you should find it. The format should be similar to QID and then the question number.

This will hide the "Are you going too fast question?".

Then add the following javascript to the "Are you going to fast?" question inside of Qualtrics.SurveyEngine.addOnload(function(){ :

/*Place your JavaScript here to run when the page loads*/

/*Place your JavaScript here to run when the page loads*/ 

    function getCookie(cname){ 

    var name = cname + "="; 

    var decodedCookie = decodeURIComponent(document.cookie); 

    var ca = decodedCookie.split(';'); 

    for(var i = 0; i 
        var c = ca[i]; 

        while (c.charAt(0) == ' ') { 

            c = c.substring(1); 

        } 

        if (c.indexOf(name) == 0) { 

            return c.substring(name.length, c.length); 

        } 

    } 

    return ""; 

} 


    
    function getTimeDif(cname){ 

        var d = new Date(); 

        var timeDif = d.getTime() - getCookie(cname); 

        return timeDif; 

    } 
 

    
var that = this; 

    that.setChoiceValue(2, 'yes');  
  
    //minTime is the minimum number of seconds the survey taker should spend in order to avoid warning. 

    var mTime = 10; 
 
    
    var minTime = mTime * 1000; 

            
    if(getTimeDif("time") > minTime){ 

            
            this.setChoiceValue(1, 'no');    

        }

Inside of the example code above, the value of mTime is set to 10. Keep in mind that mTime's value is in seconds. This means that the minimum time spent on the on the survey must be at least 10 seconds in order to avoid receiving the warning. If you want the user to spend a different amount of time(in seconds) on the survey, change the value.

Although we have determined where to put our warning page, we have not yet decided where to start counting time spent on the survey. If you want to count time spent from the start of the survey, then we can add the following javascript to the first question of the survey. This will create a cookie with the time when the survey started.

Add the following javascript to the question inside of Qualtrics.SurveyEngine.addOnload(function(){ :

/*Place your JavaScript here to run when the page loads*/ 

var d = new Date(); 


document.cookie="time="+d.getTime();

If you wish to start the timer after the first page, just add the previous JavaScript to a question on a later page that is before the "Are you going too fast?" question's page.

Finally, if you wish for survey takers to have the option to go back upon reading the warning message or at any other time, while in the survey editing page, select "Survey Options" and check off "Back Button" and click save.