Add JavaScript

About Adding JavaScript

JavaScript is a programming language that enables you to accomplish more advanced functionality in your survey than would otherwise be available. For example, you can change the size of a question text box, create a custom question type, and much more.

Accessing the JavaScript Editor

1. Navigate to the Survey tab.
   
2. Click the gray gear to the left of the question you want to add JavaScript to and select Add JavaScript.
3. Place your JavaScript in the box, below one of the pieces of /*Place Your JavaScript Here…*/ text. The opening and closing tags are already provided (do not delete them).
   Qtip: You can place your code in one of three places: OnLoad, OnReady, and OnUnload. Choose the one that most fits your needs.

   

4. Click Save.
5. To preview the changes you have made, click Preview Survey on the main bar. Note the orange icon next to the question; this icon indicates that the question has custom JavaScript on it.
   
6. To remove your JavaScript, open the editor, click Clear, and then click Save.
   

Tips & Guidelines for Using JavaScript in Qualtrics

1. 1. 1. Qualtrics surveys are hosted on a survey engine called JavaScript Form Engine (JFE). While JFE is a single page application, it reloads the header, footer, and theme on each page of your survey.
      2. While loading a survey page, JFE calls three functions that accept callbacks. The callbacks will be executed at the following times:
         • addOnload() – Executed when the page is loaded.
         • addOnReady() – Executed when the page is fully displayed.
         • addOnUnload() – Executed when a page is unloaded (when the page is left).

           Qtip: Qualtrics does not allow the document.write() functionality.

      3. jQuery is pre-loaded in surveys but should be referenced with the literal jQuery rather than $.
      4. If you change functionality outside of a specific question (such as hijacking the keyboard for answering questions), you will need to remove that function on page submit by using the callback passed to the addOnUnload() function.
      5. As with any implementation of JavaScript, we recommend abstaining from global variable creation as it can collide with existing functionality on the page.
   1. 1. If you want to import JavaScript libraries, you can include a reference to them in the survey header within <script> tags. Remember that even once you have referenced the library in your header, you must apply Javascript directly to applicable questions for that code to be pulled into the survey.
   1. JavaScript is stripped from the question HTML. Use the JavaScript editor instead of the question HTML, as referenced in the Accessing the JavaScript Editor section above.
   2. Page Transitions can cause issues when selecting elements on load since they are also affecting page elements. If you run into difficulties, you can disable page transitions in the Look & Feel section of the Survey tab.

FAQs