About JavaScript in surveys

JavaScript changes the survey while participants take it: it can make a field read-only, react to an answer or add a widget. You add a script to the text of a question with Edit as HTML, and it runs on the page where that question is. For scripts that every page needs, use custom.js of your own theme. The survey loads jQuery, so you can use it in your scripts.

Note: Super administrators can always save scripts. For other administrators, two settings under Global settings > Security decide: Filter HTML for XSS and Restrict question script for XSS restricted user. When both are On, they can't add scripts to questions. Open Global settings with the gear icon in the sidebar or Configuration > Settings > Global in the top bar.

Add a script to a question

1. Click the text of a question on the page where the script should run. The text toolbar appears.
2. Click ⋮ and then Edit as HTML. The window Edit question using HTML opens.
3. Add your script below the text, between <script> and </script> (1). Put your code inside $(document).on("ready pjax:complete", function() { ... }); so that it runs once the page is ready.
4. Click Save (2).
5. Click the eye icon in the top bar and check the script in the preview. Scripts don't run in the editor.

The script in the picture makes the answer field of question 375 read-only. Every question sits in a container with the ID question plus its question ID, here #question375. The question ID appears in the address bar of your browser after question= when you select the question.

Keep curly brackets apart

ExpressionScript reads text in curly brackets as an expression. In a script in a question text, leave a space or a line break after every { and before every }:

• Works: if (x) { doSomething(); }
• Fails: if (x) {doSomething();}

See ExpressionScript: quick start.

Scripts for the whole survey

Put scripts that every page needs into custom.js of your own theme. The file is part of the theme, so its code runs in every survey that uses the theme. Core themes can't be edited, so extend Fruity TwentyThree first. See Create your own theme in the theme editor.

Next steps

• JavaScript examples you can copy
• Style questions with CSS
• Workarounds from the manual: what to use instead

FAQ

My script doesn't run. What do I check?

Test in the preview, not in the editor. Check the curly brackets, check that the script is on the same page as the elements it changes, and open the console of your browser for error messages.

Why can't a colleague add a script?

Their user is restricted by Filter HTML for XSS and Restrict question script for XSS restricted user under Global settings > Security. A super administrator can add the script for them or turn the restriction off. Scripts run in your participants' browsers, so allow this only for people you trust.

Is there a setting instead of a script?

Often, yes. Many tasks that used to need JavaScript are settings now, such as array filters, exclusive options, sums and minimum dates. See Workarounds from the manual: what to use instead.