Limesurvey offers a lot of on board features but for certain issues you can add JavaScript to your survey to extend its abilities. Particularly when it comes to on-screen data validation, data filtering, setting default values or any kind of randomization, using JavaScript is the way to go and we have collected several workarounds in the Limesurvey wiki to deal with different problems.
Since some users have problems embedding JavaScript in their surveys, we want to give some examples on the different approaches.
To avoid re-inventing the wheel, Limesurvey makes use of the JavaScript library jQuery. This library is documented very well and we recommend having a look at some tutorials and the official documentation.
If you want to embed any of the jQuery based workarounds, then there should be a
$(document).ready(function())
function in the template.js file of your template where you can add all of this code so that it is only executed after the page is fully loaded. So option 1 to add JavaScript to your survey is to simply place it in the template.js file of your template.
Pros:
- You don’t need to disable the internal Limesurvey XSS filter if you add the code directly at the template.js file.
- You can add your code ot the existing $(document).ready(function()).
- It is very easy to update/modify.
Cons:
- The file is loaded at every page call, so it might cause some overhead if you only need the script for a certain survey question(s).
- The code will be loaded for all surveys that use the template, so don’t add survey-specific JavaScript to any template which may be used for other surveys, instead create a copy of the template.
The second option is to add the JavaScript/jQuery code directly to the affected question or group. This can easily be done by embedding it in the question/group text for which you have to switch to source code view of the integrated editor:
Furthermore, you have to disable the Limesurvey XSS filter at
Global settings -> Security -> “Filter HTML for XSS” = “No”.
Once you have done this, you can use the following code snippets. Copy them to the affected question/group text in source code mode and test if the alert message appears:
1. Embedding Javascript
<script type="text/javascript" charset="utf-8">
alert("Test!");
</script>
2. Adding jQuery code
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
alert("Test!");
});
</script>
Pros:
- The code will only be loaded once (for the affected group/question).
- You can easily have several similar code snippets and just change some IDs in the code without having any overhead.
- Limesurvey placeholders and Expression Manager tags are parsed.
Cons:
- You have to disable the internal XSS filter for which requires admin access to the Limesurvey installation.
- The code will be split over several questions and gets harder to maintain if you add many different script snippets.