Search code examples
javascriptjqueryhtmlcssqualtrics

Use JavaScript / CSS to edit Qualtrics Look and Feel

I am working with Qualtrics and want to edit the look and feel of specific screens in a survey by adding JavaScript or HTML. Is there a way to do this? It won't let me add to question-level HTML and the JavaScript seems finicky. Has anyone had luck tweaking these parameters with JavaScript?

Solution

  • You can add a style tag with CSS to question text to change the look and feel of specific pages.

    This is question text.
<style>
/* CSS placed here will impact the entire page */
</style>

    JavaScript works fine for modifying styles of specific elements. The trick is learning how to find the correct elements (hint: make use of prototypejs). Here is a simple example of changing the width and alignment of a multiple choice button:

    Qualtrics.SurveyEngine.addOnload(function()
{
    var el = $(this.questionId).select('label.SingleAnswer').first();
    el.style.width = "50%";
    el.style.textAlign = "center";
});