Add JavaScript
What's on This Page:
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
- Navigate to the Survey tab.
- Click the gray gear to the left of the question you want to add JavaScript to and select Add JavaScript.
- 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.
- Click Save.
- 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.
- To remove your JavaScript, open the editor, click Clear, and then click Save.
Tips & Guidelines for Using JavaScript in Qualtrics
-
-
- 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.
- 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.
- jQuery is pre-loaded in surveys but should be referenced with the literal jQuery rather than $.
- 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.
- As with any implementation of JavaScript, we recommend abstaining from global variable creation as it can collide with existing functionality on the page.
-
- 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.
- 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.
- 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.
-