Creating a withdraw button in Qualtrics

- qualtrics MTurk research withdraw ethics

When conducting survey research online using MTurk, researchers are under an ethical obligation to give participants the ability to withdraw from a study without incurring a financial penalty. In practice, however, this is often not the case. In most of the academic Qualtrics surveys I’ve seen, researchers tell participants something to the effect of: “you can withdraw at any time by exiting the survey (e.g., by closing your web browser or navigating away from the survey)”.

Most academic researchers also use “survey completion codes”, where participants must reach the end of the survey to receive a unique code that they submit to MTurk for compensation. Taken together, these two elements create a situation where, if participants withdraw by closing their browser or navigating away, then they will not receive compensation for their participation.

Arguably, this creates a financial penalty for withdrawing – the penalty of not receiving payment – and thus an ethical dilemma. This dilemma can be avoided by adding a withdraw button in the survey that, once clicked, will take participants to the end of the survey (or a custom withdraw page) where they may still obtain a completion code. Qualtrics doesn’t have this functionality baked-in, but fortunately it’s pretty easy to implement.

In this tutorial, I describe the method that I have used in the past to create a withdraw button on Qualtrics.

Step 1

It should look like this in the end:

jpg

Here’s what this element does. It says: “If someone navigates to the survey using a link that contains ‘withdraw=true’ as embedded data, then go to the end of the survey”. In this case, embedded data refers to a URL parameter. This could be done by you navigating to http://yoursurveylink.com?withdraw=true (which is exactly what we will program the withdraw button to do in a subsequent step!).

Step 2

Change the theme of your Qualtrics survey to “Qualtrics 2014” (it is one of the default themes). To do this, go to Look & Feel click Change Theme and locate Qualtrics 2014. jpg This theme must be used because the withdraw button inject code and style code is dependent on this theme’s existing style elements.

Step 3

Open Look & Feel, go to the Advanced tab, and paste the following code into the box that says Header:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var inject_me = function() {
    if (!$("#NextButton").length) {
        window.requestAnimationFrame(inject_me());
    } else {
        var element = document.getElementById('toggle');
        if (typeof(element) != 'undefined' && element != null) {
            document.getElementById('ProgressBar').style.display = "none";
        } else {
            function addParameterToURL(param) {
                _url = location.href;
                _url += (_url.split('?')[1] ? '&' : '?') + param;
                return _url;
            }
            newURL = addParameterToURL("withdraw=true");
            var withdraw = "<a href=\"" + newURL + "\" onclick=\"javascript:return confirm('Are you sure you want to withdraw?')\" class=confirm id='WithdrawLink'><span class='ButtonLeft'></span><span class='WithdrawButton Button' id='WithdrawButton'>WITHDRAW</span><span class='Button' style='float:left !important'></span></a> &nbsp; &nbsp;"
            var buttonsDiv = document.getElementById("Buttons");
            buttonsDiv.innerHTML = withdraw + buttonsDiv.innerHTML;
        }
        if (document.getElementsByClassName("EndOfSurvey").length) {
            document.getElementById('Withdraw').style.display = "none";
            document.getElementById('ProgressBar').style.display = "none";
        }
        if (document.getElementsByClassName("SurveyError").length) {
            document.getElementById('Withdraw').style.display = "none";
        }
    }
};
inject_me();
</script>

This code will inject a withdraw button into the survey. The button is programmed to navigate back to the survey with the withdraw=true as embedded data.

Step 4

Open Look & Feel, go to the Advanced tab, then click + Add Custom CSS and paste the following CSS code into the CSS Editor that appears:

 /* Place your CSS here */
.Skin #Buttons #WithdrawButton {
  border: none;
  color: #fff;
  font-size: 16px;
  padding: 8px 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
  margin: 0;
  text-align: center;
  text-decoration: none;
  -webkit-appearance: none;
  transition: background .3s;
  background-color: #900; 
  opacity: .25;
}

#WithdrawLink {
  text-decoration: none;
}

This code will style the withdraw button that gets injected so that it looks like the other survey button elements. That’s it! Note: The withdraw button does not work in survey Preview mode. In order to test that it’s working, you should use your survey’s live link (the one created through the “Distributions” page).