Workarounds: Manipulating a survey at runtime using Javascript

Often you want to manipulate certain elements of a survey at runtime. The only solution without touching the source code is to use JavaScript or jQuery which is shipped with LimeSurvey. Here are some examples to hide and style elements, validate user input or do calculations at runtime.

Other workarounds can be found at
 * Workarounds: Survey behaviour
 * Workarounds: Question design, layout and templating

'''Please keep in mind that these workarounds are not official LimeSurvey extensions - they are solutions that users have created for themselves. Therefore LimeSurvey can't offer guarantees or support for these solutions. If you have questions, please contact the users that, thankfully, shared their solutions with the community.'''

Note: ExpressionScript (EM) may cause some of these work-arounds to fail. Any custom javascript included as a .js file will be fine. However, if you in-line your JavaScript code, you must make sure that you have a space after every opening (left) curly brace, and a space before every closing (right) curly brace. Otherwise, ExpressionScript (EM) will think that the content between the curly braces is something it should parse and understand. I have fixed all of the work-arounds below that can be fixed (many did not follow those rules). However, some will continue to break. If a work-around contains a regular expression which contains curly braces (to indicate a range of repeats of a sub-expression), EM will try to process those curly braces, and thus break your regular expression. Strategies to continue to support that work-around functionality are discussed below.

=How to add a javascript workaround solution to this Wiki page?=

Well, this is pretty easy. Click the edit icon and create your own headline within the javascript section starting with "!". Then add a short note about the version you have used when creating your workaround, you can copy/paste this code snippet Tested with: (enter LimeSurvey version and maybe browser).

Finally it's imported to mark all your code with code tags, other wise you might break this page.
 * Start tag:  .

=How to use Script (eg. JavaScript etc.) in LimeSurvey=

Plugin addScriptToQuestion allow to use a simple textarea for easily adding javascript.

To use JavaScript within LimeSurvey, the XSS filter must be turned off and the code inserted in the source of a question or a group description.
 * Go to Global settings --> Security and set "Filter HTML for XSS" to "Off".
 * Add a new question
 * Edit the question and click the "Source" button in the editor toolbar:


 * Enter your script after the question text:


 * Save the question

A simple test to see if JavaScript is enabled is to echo an alert. Use this code:

It is a good practice to use the jQuery $(document).on('ready pjax:complete') event to prevent the code from executing until the page is fully loaded, it is especially needed when using the ajax-mode in the 3.0.0 and upper default templates:

Examples of usage of brackets
ExpressionScript will try to parse this JavaScript:

Adding line feed prevents ExpressionScript from parsing

ExpressionScript will try to parse this JavaScript:

Adding spaces inside the brackets prevents ExpressionScript from parsing

=Sum up input values using Javascript=

Tested with: 

As of version 1.92, this is easier to do using the sum function in ExpressionScript. See this HowTo example.

Starting in Version 1.92, you also do no longer need to use SGQA (e.g. 45251X1X5) identifiers. Instead the code  will automatically replaced by the current questions SGQA-codes.

This is from a survey that is a invitation to a longer party, when the user clicks to the next page, the calculated results will be shown.

If you wonder what the {INSERTANS:1X6X12} stuff is, look at SGQA identifier and Using information from previous answers.

=Multiple Question Validation=

Tested with: 

As of version 1.92, this is easier to do using the min/max/equals_num_value attributes (to validate sums), or the em_validation_q function, which lets you refer to other variables when you validate the current question ExpressionScript. Such validations also work on the current page, and properly handle array_filter and cascading relevance.

This workaround is in case you need to do some validation involving more than one question, it implies a very little JavaScript programming and the use of SGQA Identifiers; this should work on almost any version of LimeSurvey.

Is easy to explain with an example, we need to do a survey of the percentage of males and females and we want to be sure that the sum is 100, to do this follow this steps (the necessary data that is not indicated in these instructions are not important i.e. question codes, etc.):
 * 1) Create a new survey of type "group by group", set the "Show |<< Prev| button" to yes and note the SID.
 * 2) Add a new group called "Group 1" and note the GID.
 * 3) Add a new question "Percent of males" of type "numeric", make it mandatory and note the QID (we will refer to this as QID1).
 * 4) Add a new question "Percent of females" of type "numeric", make it mandatory and note the QID (we will refer to this as QID2).
 * 5) Add a new group called "Group 2"
 * 6) Add a new non mandatory question, here is the trick the question text has to be (be sure to replace the SID, GID, QID1 and QID2

But this will show shortly the question and will jump to the end page, a little weird for the survey taker but works.

This is a proof of concept, and may have some problems, please if you notice something or improve it send me an e-mail to leochaton-limesurvey at yahoo dot com.

This will work for 2 questions that you want to be the same. Works well for email and confirm email questions

=Alternate exit=

Tested with: 

Using the same idea of the previous post, you can implement an alternate exit of your survey.

This script should be in the first question to be displayed in a next page after the question that should trigger the alternate exit. In this example the question that trigger the alternate exit is a Yes/No question, if the user chooses no, he is redirected to another page.

=Custom onload function=

''Tested with: 'All browsers', LimeSurvey 1.70 and up

General
This simple workaround describes how to add a custom Javascript code that is triggered right after the page is loaded. It may have numerous applications, especially when you deal with a custom JS/HTML code. It may be used to hide form elements ( tags), make them read-only, display alert messages, etc.

To run any Javascript code right after page load use the Query ready function. It will be executed when the page is being loaded. For example when you add the following code to one of your question definitions...:

...it will display a pop-up message immediately after the page has been loaded.

Some of the applications of this trick I've explored are:

a) Hiding the form elements by calling in your Custom_On_Load:

Note: As of svn build 9755, you can now dynamically reference the questions input fields by using the {SGQ} keyword. You can rewrite the previous example like this:

this makes it a little easier when exporting surveys, so you don't have to worry about manually entering each questions SurveyGroupQuestion ID.

b) Making the elements read only:

where the "answer73166X16X54" structure has been described in one of other workarounds above.

c) For Hiding by a lot of elements by calling in your Customer_On_Load

jQuery searchs in html document for input-fields with radio type, if his answer text empty then do the display css set to none.

Advanced usage
If you want to place global Javascript code using the above jQuery(document).ready function then the best place to do this is the template javascript file template.js. You can edit this file using the template editor. Please be aware that placing it in the template javascript file will make the function available to all surveys using that template. If needed just create a new template copy for your survey.

Alternatively you can place the jQuery(document).ready function in the group description to make a Javascript function only available to a certain question group.

Language-specific Javascript code
There is an easy way to find out the current language and execute according Javascript using jQuery: The tag of any survey pages contains an 'lang' attribute which holds the current language code. You can read that language code by using the followin code

For an English survey the above code would show a messagebox with "This is the current language code: en"

=Custom onload function in multi-language survey=

Tested with: 1.85+ (7253), IE 6/7, FireFox 3.0, Safari 3.2,

To use custom onload functions, as above, in multi-language surveys you must define the functions in the question source for all languages.

While this initially seems to be a bit tedious, it actually can be useful - you can alter your onload functions depending on the language in use. For example, you can dynamically display alerts or element contents in the current language.

=Filter answers of a question with the answer of another=

Method 1
Tested with: 1.70 - 1.72

As of version 1.92, this is easier to do using the the array_filter attribute, or relevance equations in general.

If you want to filter the answer of a question with another answer, you can use this workaround.

First, use answer code like that: XX for the first question, and XXYYY for the second one.

Answer of the second question filter if the 2 first letters are the answer of the first question.

We use 1000X1X1 and 1000X1X2 for the example, question had to be on separate page (question by question for example).The second question had to be a dropdown list (we can do similar workaround, but droplis is the best). You can do this using JQuery. It leaves the answer in the select box, but disables it. You could also replace "disable" with "remove" to get rid of it altogether.

Method 2
Tested with 1.92 + Firefox 9.0

If you have a country, state, and city set of questions (or similar), you could code answer options as:

Q1 Country Single choice list (ratio, dropdown)

X country#

Q2 State Single choice list (dropdown)

XY state#

Q3 City Single choice list (dropdown)

XYZZ city#

Now you must put the following Javascript code in the source of question 2 (State):

And the following code in the source of question 3 (City):

Each question must be in different pages of survey to work, i.e. in a question by question survey, or in diferent groups in a group by group survey.

Note that if you choose a two characters answer option code in the State question, i.e. a XYY answer option code, you must change the substr(0, 2) part of code in question 3 to substr(0, 3).

=Filter answers of a multiple numeric type question=

Tested with: 1.90+

As of version 1.92, this is easier to do using the the array_filter attribute, or relevance equations in general. In 1.92, array_filter works with all questions that have subquestions (e.g. also works for multiple numeric and multiple short text).

If you want to filter a question of type "multiple numeric", you have to modify the workaround.

Note that this workaround assumes that the code for each of the subquestions are a numeric sequence 1,2,3...

=Use an answer to prefill another question (default value)=

Tested with: 1.72

And tested with: 1.91+

As of version 1.92, this is easier to do using the enhanced defaults feature, which lets you pre-fill most question types with default values. In 1.91, you could set defaults for list and multiple choice questions. In 1.92, you can set defaults for any text-entry question too. Moreover, the defaults can be ExpressionScript compatible equations or tailored text. Finally, with 1.92, defaults are properly managed even when set on the same page.

This workaround gives you the ablility to use an answer to fill the default value for another question. It's explained for free text question type but can be adapted for another question type.

We use SGQA identifier. For example, we use SGQA 1000X10X20 and 1000X10X21 to prefill 1000X11X30 and 1000X11X31. For the script to work, the question has to be on a different page.

If you want use two times the value of an integer input, you can also use this to prefill a question that you hide via CSS.

Now you can use {INSERTANS:1000X2X2} for giving you twice the value of the user input from question 1.

=Dynamic Sum=

As of version 1.92, this is easier to do with ExpressionScript using the sum function. Not only will sums be dynamic, but they wille exclude irrelevant values, so you can array_filter a multiple numeric question and get the sum of just the answers that are visible. This HowTo example demonstrates the dynamic sum feature.

Also note, as of version 1.92, the following workaround will fail, since it includes a a regular expression containing curly braces.

This script is used with a "Multiple Options" type question calculate a total price based on how which checkboxes are selected. The prices are listed as part of the answer. The answers are set up like this: "USB Mouse ($20)". The script uses the number between the "($" and the ")" as the price for that item. You can adapt the script to if you need to change the currency or need to sum something other than money.

This script works when used in a question-by-question format. It does not work when there are more than one question on a page. I think it can be adapted to work, but I haven't done the coding yet.

Put the following code into body of your question:

Put the following code in the help section (or wherever you want the sum to appear):

=Focus on the first Input field=

(Tested with: LimeSurvey 1.80 / IE6/7, Firefox 3, Safari, Opera, chrome)

As of version 1.91, there is a built-in JavaScript function called focusFirst to focus on the first visible element. It uses jQuery, so is more robust than this example.

Again an onload Function is needed for this tasks. I have done it the DOM way with compatibility to IE6/7.

Put the following code into the startpage.pstpl of your template, right before the closing tag:

Note: I am using this with version 1.80. As changes happened to the templates in the last release, you might need to add the following before the code, if your template is older than 1.80 stable and does not include this:

You will need this for the var ie to be set. Without this var, the function will not work with ie.

=Answer questions by keypress=

(Tested with: IE7, Firefox 3)

This workaround allow to answer the question on key 0-9 (0 is for the 10 answer).

Follow issues are supported at the moment:
 * Yes-No Questions
 * List Questions (radio)
 * other radio questions

In lists the answer limit is ten.

You supply the template "endpage" of your template with the following script.

=Math notation in LimeSurvey=
 * 1) download the js file from AsciiMath script
 * 2) copy it in the /scripts/ folder in your installation
 * 3) modify the startpage.psptl of the template you want to use adding the reference to the script (if you use an older version make sure that you copy the template folder first!) for example:

Use the notation where you need it!

Note: If you use internet explorer or safari you will need to download the plugin as well, but firefox does the lot for you.

Finally, if you are confident with the limesurvey structure you could add the editor which support math notation and change the reference to the editor you want to use in the configuration file. here is the link for a TinyMCE with math support.

=Filter "Array by Column" Question With "Multiple-Options"=

As of version 2.06 this workaround is not required. It can be handled with subquestion relevance.

Tested with: 2.05

This workaround applies a filter to an "Array by Column" question based on the checked boxes of a previous multiple-options question. There are two methods - one for filter and array questions being on the same page and a slightly different one for the filter question being on a page before the array question.

Implementation is as follows.

FOR BOTH METHODS:
 * Set up your survey to use JavaScript.
 * If using LimeSurvey version 2.05 or newer, place the following functions in your template.js file. These will be accessed by either method.


 * If using LimeSurvey version 2.0 or older, place the following functions in your template.js file. These will be accessed by either method.

FOR BOTH FILTER AND ARRAY QUESTIONS ON SAME PAGE:
 * Create a multiple options question and an array-by-column question on the same page (in the same group).
 * Both questions MUST have identical subquestions and subquestion codes.
 * Place the following script in the source of one of the questions.
 * Replace "MM" with the ID of the multiple options question and "AA" with the ID of the ranking question.
 * The function will hide the array question unless at least one option is selected in the multiple-options question, in which case, it will only show the corresponding array column(s).

FOR FILTER AND ARRAY QUESTIONS ON SEPARATE PAGES:
 * Create a multiple options question on page 1.
 * Create a multiple options question and an array-by-column question on page 2.
 * All three questions MUST have identical subquestions and subquestion codes.
 * Set the multiple options on page 2 to be filtered by the multiple options on page 1.
 * Place the following script in the source of one of the questions on page 2.
 * Replace "MM" with the ID of the multiple options question and "AA" with the ID of the array question. Do not modify the "1".
 * The function will hide the multiple options question. If options were selected in the multiple options on page 1, the corresponding options will be checked in the hidden multiple options question which will then be used to control the display of the array columns.

=Auto-tabbing between text input fields=

Tested with: 1.90+, IE 6/7, FireFox 3.0, Safari 3.2, Chrome 2.0

This is a workaround to facilitate auto-tabbing between text input questions in a single group using a jQuery plugin by Mathachew and the Maximum characters attribute of questions.

The behaviour will be: When the maximum number of characters has been entered into an input field, the focus (cursor) will be automatically moved to the next input field. When the backspace key is used to remove all characters from a field, the focus will be moved to the previous field. It's very useful in surveys having many text input questions to avoid having to manually tab or click between fields.

You can view a small demo survey here.

Implementation is as follows:
 * 1) Visit http://plugins.jquery.com/autotabs, download the plugin script and save it as jquery.autotab-1.1b.js in the template folder.
 * 2) Link to the script by placing   within the   tag of startpage.pstpl.
 * 3) Set up your survey to use JavaScript.
 * 4) Create the text based questions that auto-tabbing is to be applied to. (All must be in the same group if you're using group by group presentation)
 * 5) Define a Maximum characters attribute for all questions that the autotab is applied to.
 * 1) In the source of the first question of the group that contains the auto-tabbed questions, add the following code.

This example has 4 fields to be auto-tabbed between - all instances of the following must be replaced to be compatible with your survey (See image below):
 * SSSSS -> Survey ID
 * GG -> Group ID
 * AA -> First question
 * BB -> Second question
 * CC -> Third question
 * DD -> Last question



The target parameter defines where the next input is and the previous parameter defines (you guessed it) the previous input.

This plugin also has limited capability of formatting the input text - see comments in the plugin script.

=Custom response listeners=

Tested with: 1.85+ (7253), IE 6/7, FireFox 3.0, Safari 3.2, Chrome 2.0

Listeners can be used to perform functions when a change in an input is detected. There are many uses such as the Reverse array_filter but a simple one would be to warn a respondent if they enter a value that may be too high.

We can use the jQuery change event to fire a function whenever there is a change to the input. The function will look for an input value higher than 10 and, if found, will warn the respondent.
 * 1) Set up your survey to use JavaScript.
 * 2) Place the script below in the source of one of the questions on the page where:
 * 11111 is the survey ID
 * 22 is the group ID
 * 33 is the question ID

=Text input masks=

Tested with: 1.90+, IE 7, FireFox 3.0, Safari 3.2, Chrome 2.0

There may be instances where you would like to place a mask on a text input - for example only allowing respondents to enter the correct characters for a North American phone number ((###) ###-####) or a Canadian postal code (A1A 1A1) The jQuery meioMask plugin by fabiomcosta can be used to do this.

The plugin has several pre-defined masks and supports custom masks. It also allows for pasting of input, allows default values and can auto-focus the next form element when the current input is completely filled. See http://www.meiocodigo.com/projects/meiomask/ for more details on features and options.

There is a small demo here.

Implementation for this demo was as follows:
 * 1) Visit http://www.meiocodigo.com/projects/meiomask/, download the latest plugin script and save it as jquery.meiomask.js in the template folder.
 * 2) Link to the script by placing  within the tag of startpage.pstpl.
 * 3) Turn off $filterxsshtml to allow insertion of JavaScript in the questions. (See documentation here)
 * 4) Create the text input questions that the masks are to be applied to
 * 5) In the source of the help section of the first question of the group that contains the masked inputs, add the following code. (See How to use script here)

The first section defines two custom masks to be used - one for Canadian postal code with a format of A#A #A# and a second for a maximum amount of 9999.99 with reverse input (useful for cost inputs) and a default value of 0.00.

The next section sets the "alt" attributes for the text inputs. This will tell meioMask which mask we will be applying to each input. By default meioMask looks at the alt attribute to find which mask to apply however this can be changed using the mask options.

In the final section we apply the masks to the inputs.

This example has 4 inputs with masks on them - all instances of the following must be replaced to be compatible with your survey (See image below):


 * 11111 -> Survey ID
 * 22 -> Group ID
 * AA -> First question
 * BB -> Second question
 * CC -> Third question
 * DD -> Fourth question



=Text input masks - second method=

Tested with: 1.91RC6+, FireFox 4.0 ''Tested with: 2.05, Chrome 40.0.2214.115 m (64-bit)

There may be instances where you would like to place a mask on a text input - for example only allowing respondents to enter the correct characters for a North American phone number ((###) ###-####) or a US social security number (###-##-####). The jQuery meioMask plugin by fabiomcosta is no longer supported but an alternative exists. The DigitalBush Masked Input Plugin is updated and simple to implement in LimeSurvey. See http://digitalbush.com/projects/masked-input-plugin/ for more details on features and options.

Implementation as follows:


 * 1) Visit http://digitalbush.com/projects/masked-input-plugin/, download the latest plugin script and save it as jquery.maskedinput.js in the template folder.
 * 2) Link to the script by placing  within the tag of startpage.pstpl.
 * 3) Turn off $filterxsshtml to allow insertion of JavaScript in the questions. (See documentation here)
 * 4) Create the text input questions that the masks are to be applied to
 * 5) In the source of the help section of the first question of the group that contains the masked inputs, add the following code. (See How to use script here)

Replace the "#answer55431X1X5" with your survey ID, group ID, and question ID. You can change the mask format and change or eliminate the placeholder if you wish. If you have multiple questions in the same group, simply copy and paste the line that begins with "$" and change the code to what is needed for your application.

=Select a random response to a "Multiple options" question for later use=

Tested with: LimeSurvey versions 2.06 and 2.5, IE 7-11, Firefox, Chrome

This workaround allows you to randomly select one of the checked boxes in a "Multiple options" question and store it's label for later use in the survey. A possible use-case would be to have a question asking what products were purchased and then randomly selecting one of the products to ask further questions about.

The workaround puts a listener on the checkboxes that loops through all of the checked boxes and adds their labels to an array. A random item is pulled from the array and loaded into the hidden question. This hidden question can then be used in ExpressionScript equations, relevance or conditions.

DOWNLOAD:

- [[Media:Demo_Random_Option_From_Multi-Choice_v206.1.zip|Demo survey for LS 2.06]]

- [[Media:Demo_Random_Option_From_Multi-Choice_v25.1.zip|Demo survey for LS 2.5]]

IMPLEMENTATION (LimeSurvey version 2.06)


 * 1) Set up your survey to use JavaScript.
 * 2) Create a "Multiple options" question
 * 3) Immediately following that question, create a short-text question to store the label of the checked box in (we'll hide this with JavaScript)
 * 4) Place the script below in the source of the multiple options question.

IMPLEMENTATION (LimeSurvey version 2.5)


 * 1) Follow the first 3 implementation steps above
 * 2) Place the script below in the source of the multiple options question.

=Display secondary options in a "Multiple options" question=

Tested with: LimeSurvey versions 2.06, 2.5 and 3.x, IE 7-11, Firefox, Chrome

This workaround allows you to display secondary options in a "Multiple options" question if a primary option is checked as in the images below.

Primary option not selected:



Primary option selected:



DOWNLOADS:

- [[Media:Demo_Secondary_Checkboxes.zip|Demo template for LS version 2.06]]

- [[Media:Demo_Secondary_Checkboxes.lss|Demo survey for LS version 2.06]].

- [[Media:Template_Demo_Secondary_Checkboxes_For_2.5.zip|Demo template for LS version 2.5]]

- [[Media:Survey_Demo_Secondary_Multiple_Options_For_LS_25.zip|Demo survey for LS version 2.5]].

LimeSurvey version 2.06
So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.
 * 1) Set up your survey to use JavaScript.
 * 2) Create a "Multiple options" question including both the primary and secondary subquestions (in the order that you would like them displayed if all shown).
 * 3) Add the following function to the end of template.js:
 * 4) Call the function in the source of the question with the question ID (no editing necessary), the start position of the primary subquestion and the number of secondaries to follow.

LimeSurvey version 2.5
So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.
 * 1) Follow the first 2 implementation steps above
 * 2) Add the following function to the end of template.js:
 * 3) Call the function in the source of the question with the question ID (no editing necessary), the start position of the primary subquestion and the number of secondaries to follow.

LimeSurvey version 3.x
So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.
 * 1) Follow the first 2 implementation steps above
 * 2) Add the following function to the end of custom.js:
 * 3) Call the function in the source of the question with the question ID (no editing necessary), the start position of the primary subquestion and the number of secondaries to follow.

=Minimum elapsed time before moving forward in survey=

Tested with: 1.91, IE 7/8, Firefox 7.0, Safari 3.2

This workaround interrupts the Next/Submit function and checks the amount of time elapsed since the page loaded. If the time is less than the minimum dictated, the respondent is alerted and not allowed to proceed. It is useful if you want to enforce a minimum amount of time spent viewing a page.
 * 1) Set up your survey to use JavaScript.
 * 2) Place the script below in the source of one of the questions on the page, replacing "TT" with the minimum number of seconds required before advancing is allowed.

=Minimum number of characters in Long free text or Huge free text questions=

Tested with: 1.91, IE 7/8, Firefox 7.0, Safari 3.2

As of version 1.91, you can use regular expression masks (validation) to specify the minimum number of required characters. However, even if the question is mandatory, it can still be blank.

As of version 1.92, if you make the question mandatory and use a validation mask to specify the minimum number of characters, then the user will be forced to answer the question. Note that unlike 1.91, they can submit their current answers, even if partially invalid (so they are stored in the database), but they will not ber able to proceed to the next page until they have passed all mandatory and validity checks.

This workaround interrupts the Next/Submit function and checks the number of characters entered in a Long free text or Huge free text question. If the number is less than the minimum dictated, the respondent is alerted and not allowed to proceed.


 * 1) Set up your survey to use JavaScript.


 * 1) Place the script below in the source of one of the questions on the page, replace "QQ" with the question ID and "CC" with the minimum number of characters required before advancing is allowed.

=Variable Length Array (Multi Flexible Text) question=

Tested with: 1.90+, IE 6/7/8, FireFox 3.0, Safari 3.2

This workaround allows a respondent to add or remove rows of an Array (Multi Flexible Text) question. It's useful to avoid the page being cluttered with unnecessary array rows.

A function is placed in the template.js file of your template (use template editor). This function hides all of the array rows except the first and inserts two elements that when clicked show or hide rows accordingly.

There is a demo here.

It must be noted that you can not make this question Mandatory as the respondent will have no way to complete hidden fields. If you want the displayed fields to be mandatory you will need to validate them in another function or modify this function to only allow the addition of rows if all fields in the last row are completed and then disable those fields - that, however, is a little over the top for this example.

Implementation is as follows:


 * 1) Set up your survey to use JavaScript (See instructions here)


 * 1) Add the following script to your template.js file.


 * 1) Replace "QQ" in the function call at the end with the question ID.


 * 1) Create one or more Array (Multi Flexible Text) questions


 * 1) If you want to apply it to more arrays on the same page simply add more calls with the appropriate question IDs. (eg. varLengthArray(1); varLengthArray(2);...)

Tested with: Version 3.3.0+180209, Safari 11.0.3

The following code is an update of the above, tested with the latest LS3.

=Expandable Array=

Tested with: 1.90+, IE 6/7, FireFox 3.5, Safari 3.2

This workaround allows you to present an array question incrementally. That is to say that initially only the first option (row) in the array is shown. When that option is answered the next is shown and so-on.

A JavaScript function is placed in the source of the array question. This function hides all of the array rows except the first and then displays them as options are answered.

There is a demo here.

The workaround supports following question types:
 * Array (flexible labels)
 * Array (flexible labels) by column
 * Array (Yes/No/Uncertain)
 * Array (Increase, Same, Decrease)
 * Array (Flexible Labels) dual scale
 * Array (10 point choice)

Implementation is as follows:
 * 1) Set up your survey to use JavaScript. (See documentation here)
 * 2) Create one or more Array questions
 * 3) In the source of the first array question add the following script.
 * 4) Replace "QQ" in the function call at the end of the script with the question ID of the array you would like to manipulate.
 * 5) If you want to apply it to more arrays on the same page, simply add more calls with the appropriate question IDs. (eg. expandingArray(1); expandingArray(2);...)

=Partially Randomized Answers - Array questions=

Tested with: 2.05

This workaround allows the answers of Array questions to be randomized while always keeping one subquestion at the end of the list.

After the LimeSurvey randomizing has occurred a function in the source of a question moves the subquestion with a defined code to the bottom of the array.

Implementation is as follows:
 * 1) Set up your survey to use JavaScript
 * 2) Create an Array type question.
 * 3) Set the "Random order" question setting to "Randomize on each page load".
 * 4) Place the following script in the source of the question.
 * 5) Modify the "fixedCode" value as required.

Download sample survey:

[[Media:Partially_randomized_array.lss|Partially_randomized_array.lss]]

=Partially Randomized Answers - Multiple Options & List (radio) questions=

Tested with: 2.05

This workaround allows the answers of Multiple Options & List (radio) questions to be randomized while always keeping one answer at the end of the list. It's useful if you want to randomize, say, the first 4 of your answers but always have the fifth displayed last as in the image below:



After the LimeSurvey randomizing has occurred a function in the source of a question moves the answer with the highest answer code to the end of the list.

Some conditions on the use of this are:
 * The "Show No answer" survey setting must be set to "No"
 * You must use sequential numbers, starting at 1 as response codes. (See image below)



Implementation is as follows:
 * 1) Set up your survey to use JavaScript
 * 2) Create a Multiple Options or List (radio) question with sequential response codes.
 * 3) Set the "Random order" question setting to "Randomize on each page load".
 * 4) Place the following script in the source of the question

Download sample survey:

[[Media:Partially_Ranomized_Answers.lss|Partially_Ranomized_Answers.lss]]

=Partially Randomized Answers - Multiple Options & List (radio) questions (Enhanced)=

Tested with LimeSurvey versions 2.06, 2.73.0, 3.6.2

This workaround allows the answers of Multiple Options & List (radio) questions to be randomized while always keeping a specified number of answers fixed at the end of the list. It's useful if you want to randomize, say, the first 4 of your answers but always have the fifth and sixth displayed last as in the image below:



After the LimeSurvey randomizing has occurred, a function in the source of a question moves the answers with the highest answer codes to the end of the list.

Some conditions on the use of this are:
 * The "Show No answer" survey setting must be set to "No"
 * You must use sequential numbers, starting at 1 as response codes. (See image below)



LimeSurvey version 2.06

 * 1) Set up your survey to use JavaScript
 * 2) Create a Multiple Options or List (radio) question with sequential response codes.
 * 3) Set the "Random order" question setting to "Randomize on each page load".
 * 4) Place the following script in the source of the question.
 * 5) Modify the "fixedAnswers" and "otherFixed" variables as required.

LimeSurvey version 2.73.0:

 * 1) Set up your survey to use JavaScript
 * 2) Create a Multiple Options or List (radio) question with sequential response codes.
 * 3) Set the "Random order" question setting to "Randomize on each page load".
 * 4) Place the following script in the source of the question.
 * 5) Modify the "fixedAnswers" and "otherFixed" variables as required.

LimeSurvey version 3.x:

 * 1) Set up your survey to use JavaScript
 * 2) Create a Multiple Options or List (radio) question with sequential response codes.
 * 3) Set the "Random order" question setting to "Randomize on each page load".
 * 4) Place the following script in the source of the question.
 * 5) Modify the "fixedAnswers" and "otherFixed" variables as required.

=Partially Randomized Answers - List (dropdown) questions=

Tested with: 1.90+, IE 6/7, FireFox 3.0, Safari 3.2

This workaround, similar to the one above, allows the answers of List (dropdown) questions to be randomized while always keeping one answer at the end of the list. It's useful if you want to randomize, say, the first 4 of your answers but always have the fifth displayed last.

A script is placed in the source of a question. After the randomizing has occurred this script moves the answer with the highest answer code to the end of the list.

There is a demo here.

A condition is that you must use sequential numbers, starting at 1 as response codes. (See image below)



Implementation is as follows:
 * 1) Turn off $filterxsshtml to allow insertion of JavaScript in the questions. (See documentation here)
 * 2) Create one or more List (dropdown) questions with sequential response codes. Set the random_order question attribute to 1.
 * 3) In the source of the first question add the following onload function. (See How to use script here)
 * 4) Replace "SSSSS", "GG", "QQ" in the function call at the end with the survey ID, group ID and question ID respectively.
 * 5) If you want to apply it to more questions on the same page simply add more calls with the appropriate IDs. (eg. partRandDD(11111, 22, 1); partRandDD(11111, 22, 2); ...)

=Partially Randomized Answers - Multiple numerical input=

Tested with: 1.90+, Safari 5.1

This workaround, similar to the ones above, allows the answers of Multiple numerical input questions to be randomized while always keeping one answer at the end of the list. It's useful if you want to randomize, say, the first 4 of your answers but always have the fifth displayed last.

An onload function is placed in the source of a question. After the randomizing has occurred this function moves the answer with the highest answer code to the end of the list.

A condition is that you must use sequential numbers, starting at 1 as response codes. (See image below)



Implementation is as follows:
 * 1) Turn off $filterxsshtml to allow insertion of JavaScript in the questions. (See documentation here)
 * 2) Create one or more Multiple numerical input question with sequential response codes. Set the random_order question attribute to 1.
 * 3) In the source of the first question add the following onload function. (See How to use script here)
 * 4) Replace "SSSSS", "GG", "QQ" in the function call at the end with the survey ID, group ID and question ID respectively.
 * 5) If you want to apply it to more questions on the same page simply add more calls with the appropriate IDs. (eg. partRandDD(11111, 22, 1); partRandDD(11111, 22, 2); ...)

Using this solution for Multiple numerical input questions might be a bit more complicated than for other question types. All answers are organized in an unordered list (  ) structure. However, if advanced question settings like Equals sum value are used, LimeSurvey adds helping information (e.g. sum of all entries and remainder) to the same unordered list using the class multiplenumerichelp for these additional list items. The above example assumes that at least one of these list items is present and moves the last answer to the position right above the first helper item. Without such advanced settings, the code will most certainly need adaptation.

=Making one (or more) rows of an array mandatory=

Tested with: 1.90+, IE 6/7, Firefox 3.0, Safari 3.2

This workaround allows you to define one or more rows of an array question as mandatory (instead of all of them which the "Mandatory" question setting does). It is demonstrated here.

A JavaScript function interrupts the submit function and checks if the inputs in the mandatory row(s) are populated. If not, an alert is popped up, the offending inputs are turned pink and the submit is aborted. Otherwise the submit goes ahead.

Implementation is as follows:
 * 1) Turn off $filterxsshtml to allow insertion of JavaScript in the questions (see documentation here).
 * 2) Create the array question.
 * 3) In the source of the array question add the following script (see How to use script here).
 * 4) Modify the warningText (line10)as required.
 * 5) Replace "QQ" (lines 13 and 14) with the question ID and add calls as necessary for more rows - the example code renders rows 1 and 3 mandatory.

=Randomly displaying one of a few YouTube videos, and recording which was displayed=

Tested in 1.85+

Jason Cleeland has created and documented a method to randomly display one of a number of youtube videos in a single question, and save which one was displayed.

http://www.aptigence.com.au/home/archives/23-Random-display-of-videos-in-a-question-2-YouTube.html

=Randomly displaying one of a few pictures, and recording which was displayed=

Tested in 1.91+

The following steps allow you to randomly display one of a few pictures and record in the dataset which picture was displayed. We use four pictures in this example, but you can easily adapt these scripts according to your needs.

1. Create a new sub-directory pic in your LimeSurvey folder.

2. Copy four pictures (named 1.jpg, 2.jpg, 3.jpg, and 4.jpg) in this pic sub-directory.

3. Deactivate the Filter HTML for XSS function in LimeSurvey's Global Settings.

4. Create a Short free text question where you want these pictures to be displayed.

5. Figure out the SGQA Identifier of this question (e.g., 12345X67X89).

6. Paste the following code as question text after activating the editor's Source view and replace both SSSSSXGGXQQ strings with your SGQA identifier:

If you want to display the number of this picture in a later question, use the following code as question text (don't forget to replace the SSSSSXGGXQQ string acordingly):

Perhaps you want to display the same picture again in a later question, but a little bit smaller (100px width, 100px height)? Just paste the following code as question text after activating the editor's Source view, and replace the SSSSSXGGXQQ string acordingly:

=Multiple numerical input with max_num_value defined in token (personalized limit)=

Tested in 1.85+

As of version 1.92, max_num_value can be an experession, so you can simply enter the {TOKEN} or other variable in that question attribute.

To make personalized survey with multiple numerical input when max_num_value (Maximum sum value) is different for each user and is loaded from the token use following tricks:
 * Create 1st group with numerical input field (1000X10X11). "Limit"
 * Add java script into this question:

where:

TOKEN:ATTRIBUTE_1 is individual limit defined in token.

readOnly=1 // user shouldn't change it.
 * Create 2nd group with multiple numerical input and add "Max value from SGQA" with 1000X10X11 as argument.

Note: If you don't want to show first field with numerical input (and show definied limit in different way) you can add 2 lines to above script to hide whole question:

where:

question85 and display85 are field names.

Note: It's no possible to create it into one group, because all SGQA references can only refer to data on a previous page because when clicking next the answer is stored at the DB and the SGQA is replaced by querying the database.

=Default values in array questions=

Tested with: 2.05+

This workaround uses JavaScript to allow you to pre-check default answers in all subquestions of an array type question. You can select a column of the array to be checked as the page loads. The script first checks to see if a subquestion has already been answered and, if not, checks the default answer.

Implementation is as follows:
 * 1) Set up your survey to use script.
 * 2) Create the array question.
 * 3) In the source of the array question add the following script.
 * 4) Replace"QQ" with the question ID and "CC" with the column number to be checked.

=Default Values In One Scale Of A Dual-scale Array Question=

Tested with: 2.0+, IE 9/10, Firefox 24

Overview

This workaround uses JavaScript to allow you to pre-check default answers in all subquestions of one scale of a dual-scale-array type question. You can select a scale and a column of that scale to be checked. The script first checks to see if a subquestion has already been answered and, if not, checks the default answer.

Implementation:
 * 1) Set up your survey to use script.
 * 2) Create the array question.
 * 3) In the source of the array question add the following script.
 * 4) Adjust "defaultAnsweredScale" and "defaultAnsweredColumn" as necessary.

Download sample survey:

[[Media:Dual_scale_with_default_answers.lss|Dual_scale_with_default_answers.lss]]

=Record group view time=

Tested with: 1.87+ (8518), IE 6/7, Firefox 3.5, Safari 3.2

As of version 1.92, group view time is accurately recorded in the timings table if you choose the Record Timings survey option.

This workaround uses JavaScript to populate a hidden question with the total time that a respondent views a group. If used in a group with only one question, it could be used to track the amount of time required to answer the question.

Implementation is as follows:
 * 1) Set up your survey to use JavaScript.
 * 2) In the group, create a short-text question. We will hide this later with JavaScript and populate it with the elapsed time.
 * 3) Place the following script in the source of the short-text question.
 * 4) Replace "QQ" in line 6 with the ID of the short-text question.

The script populates the hidden question with the elapsed time since the group was opened. If a respondent leaves the group and then returns, the timer continues up from the elapsed time of the last visit.

=Toggle visibility of groups=

Tested with: 1.90+, IE 6/7/8, Firefox 3.6, Safari 3.2

This workaround uses JavaScript to toggle the visibility of groups in an "all in one" survey. Initially the groups are hidden and there are links inserted to display the groups. It's useful to avoid the page being cluttered with many groups and lets the respondent focus on one at a time.

It's demonstrated here.

Implementation is as follows:


 * 1) Set up your survey to use JavaScript.
 * 2) Set the survey to run in "all in one" mode.
 * 3) Add your groups and questions.
 * 4) Place the following script in the source of one of the questions in the first group.

The comments in the script are pretty self-explanatory but it does the following:


 * 1) initially hides all of the groups
 * 2) inserts a link above each one to toggle its display
 * 3) some styles are added to the clickable links but these could be done in template.css instead
 * 4) shows any groups that have an unanswered mandatory after a submit attempt

=Use jQuery Autocomplete plugin to suggest answers for text inputs=

1.91 and later versions
Tested with: 1.91+, IE 6/7/8, Firefox 3.6, Safari 3.2

This workaround uses the Autocomplete widget included with jQuery UI to provide a respondent a list of suggested answers that the they can select from as they type in a text input.

Although the plugin allows for much more complex applications, the two that I use most frequently are outlined below. The first method uses a relatively small list of suggestions that is stored in an array locally. The second is a little more complex - it uses a remote CSV file of suggestions that is accessed through AJAX an PHP.

Both methods:
 * Add the following styles to the end of your 'template.css' file

Method 1 (use local JavaScript array for data):
 * Create a text input question
 * Add the following script to the source of the text question
 * Replace "QQ" with the ID of the text input question
 * Replace the states with your list of suggestions (comma separated)

Method 2 (use remote CSV file for data):
 * Place the CSV file of suggestions in your template directory
 * Place a PHP file containing the code below in your template directory
 * Replace "countries2.csv" with your CSV filename (you could make this more universal by passing the filename in the URL)
 * This file will grab the contents of the CSV and encode them in JSON format that the JavaScript can use
 * Place the JavaScript code below in ths source of the text question
 * Replace "QQ" with the ID of the text input question
 * Replace "templates/yourTemplate/countries.php" with the path to the PHP file (from LimeSurvey root)
 * This script will grab the jsonized data from the PHP file and load it into an array that the plugin can use

PHP code:

JavaScript code:

Update for LimeSurvey 2.05+
Tested with: 2.05+, Chrome 40, FireFox 36, Opera 27, IE 11

With LimeSurvey 2.05+ it is NOT necessary to: Download the jQuery Autocomplete widget Add special autocomplete styling to the survey template (tested with the Skeletonquest template by Denis Chenu) 

This workaround builds on the previous examples, but is updated for use with newer versions of LimeSurvey. Note that the Autocomplete widget is already included in LimeSurvey, as part of jQuery UI.

Autocomplete may be configured to use different types of data input, three of which will be demonstrated in the following: Plain text, CSV-files, and MySQL databases.

1. Plain text input (the easiest, suitable for small lists or arrays).

To enable autocomplete of a list in plain text, simply add the following code to your question source. You will have to change qID to the question ID of the question you want the autocomplete to run in (this does not have to be the one you add the script to). In this case, the list has been added to the source directly, but you may also call the list as a predefined variable (see jQuery website for example):

2. Input from CSV file (a little trickier, requires several files. Suitable for larger lists and arrays).

Please note that, with this method, all processing happens browser-side. Thus, the entire contents of your CSV file will be exposed, no matter where you "hide" it (it is not possible to request files from outside the webroot on your server using javascript). If any of this concerns you, please proceed to the next paragraph, which deals with autocomplete based on database queries. To enable autocomplete based on output from a CSV file, you will need the following: A comma-separated data file (CSV) The jquery.csv.js plugin (v0.71) </ol>

First, download the jquery.csv.js script, and place it in the template folder (may require manual FTP, rather than upload through the template manager). You will need to call this script in the head section of the survey page, which you find in startpage.pstpl. Make sure you call it before {TEMPLATEJS}.

To make the CSV file, you may use Microsoft Excel and "Save as CSV". Note that Excel produces CSV files where the columns are separated by a semicolon, not a comma. To make this work with the jquery.csv.js plugin, you will have to edit the jquery.csv.js file on line 43:

Once the CSV file is in place, add the following javascript to your question source, using the correct question ID (qID) and url/filename for your CSV file:

Now, the autocomplete should work. If not, see if your CSV file shows up under "Network" or "Resources" in your browser's inspector, and if it provides any output. Adding console.log(data); to your javascript (as indicated) should output the data to the browser console (you'll see the contents of your CSV file), and may be useful for debugging. Note that only the data from the current function (the function, within which the text was placed) will be presented.

3. Input from a MySQL database (trickiest, but also the most versatile and secure).

This method requires the following: Access to a MySQL database (tested with MySQL 5.5)</li> A PHP script to connect to and query the database</li> </ol>

First, paste the following script in your question source code, replacing for the correct question ID (qID) and the url/filename of your master PHP file (which in this case is autocomplete.php, see below):

The structure of the database shouldn't matter too much, as long as you are using text fields. This example uses the UTF-8 character set. It is often a good idea to keep your login credentials in a separate file that you put outside of your webroot. In this case, I've put them in a file called constant.php:

The next file, database.php, deals with logging in to the database and performing the query that was requested through the javascript pasted above. Note that we're using the PDO convention rather than mysql_*, which has been deprecated for safety reasons (MySQLi remains a viable alternative, but is not shown here):

Finally, a PHP file (autocomplete.php) to include the previous two files and complete the query. This is the file that is called by the javascript, and the only one placed in the webroot:

This should complete your setup, but there are obviously a variety of pitfalls, at which point the previously outlined debugging techniques may be of help.

Use autocomplete to populate several fields
Tested with: 1.91+, IE 7/8/9, Firefox 18

This workaround uses the Autocomplete widget included with jQuery UI and the jquery.csv.js plugin to provide a respondent with a list of suggested answers as they type in a text input and then to automatically populate other fields depending on the selection.

For example, if you have 3 questions - "Name", "ID" and "Email" - you can use this workaround to autocomplete the "Name" question and then the "ID" and "Email" questions can be automatically populated with values associated with the selected name.
 * Download the jquery.csv.js plugin and place it in your template folder
 * If using LimeSurvey 1.9x, add the following line to your startpage.pstpl BEFORE the tag for template.js, if using 2.x, add it AFTER the {TEMPLATEJS} placeholder
 * Create your CSV file with 3 columns (name, ID, email) as in this example and place it in your template folder
 * Create your 3 questions - "Name", "ID" and "Email". They must be in the same group/page.
 * Add the following styles to the end of your 'template.css' file
 * Add the following script to the source of one of the questions
 * Replace:
 * "NN" with the "Name" question ID
 * "II" with the "ID" question ID
 * "EE" with the "Email" question ID
 * Modify the path to your CSV file

=Create MaxDiff question type=

See the Question design, layout and templating section for a workaround that uses JavaScript to convert an Array (flexible labels) by column question into a MaxDiff question type.



=In a checkbox matrix, have the 'none' option in a row disable all other columns in that row=

Tested with: LimeSurvey 1.90+

The questionId parameter is the base ID of the question matrix (multiflexible).

numColumns and numRows speak for themselves

specialColumns is an array of the columns that have the special ability that when one of them

is checked, none of the others can be checked. E.g., a 'none of these' and/or a 'do now know' option.

=Last Option In Array (Numbers) (Checkboxes) Row Excludes All Others=

Tested with LimeSurvey Versions 2.06 and 2.54

This workaround uses JavaScript/jQuery to make the last option of each Array (Numbers) (Checkboxes) row exclude all other options in the same row.

The script will uncheck all options in a row if the last option is checked and uncheck the last option in a row if any other options are checked.

Implementation LS Version 2.06:

 * 1) Set up your survey to use JavaScript.
 * 2) Place the following script in the source of the array question.

Implementation LS Version 3.x:

 * 1) Set up your survey to use JavaScript.
 * 2) Place the following script in the source of the array question.

=Add Navigation Buttons (Next and Previous) To Top Of Page=

Tested with: 1.90+, IE 7/8, Firefox 3.6, Safari 3.2

Add the following to the end of template.js. It will insert a new div after the progress bar and then insert clones of the nav buttons in the new div.

This example is for the default template in 1.90 or 1.91. The placement of the new div may need to be modified for other templates.



=How to add an opt out link to your survey=

Tested with: 1.91+, Firefox 5.0

This javascript inserts a link to opt out of the survey above the progress bar.

How to use script here

Then insert the following code into to the source of a group description or a question. I used the group description.

=Anonymously track respondents answers across multiple surveys=

Tested with: 1.91+ and 1.92+

This workaround uses JavaScript/jQuery to enable tracking of respondents across multiple surveys ensuring anonymity (it does not use tokens).

To do this you have to use this question in all the surveys you want to link respondents answers.

This workaround create an ID by asking some partial personal information (like initials, birth month ...). The ID will be encrypted using a one-way function (in this case SHA-1) and stored in a short text answer.

Implementation is as follows:
 * 1) Set up your survey to use JavaScript.
 * 2) Place the following code in the source of a short text question.
 * 3) Optional: you can also add other select field to avoid collisions (e.g. for large population sample)

<script type="text/javascript" src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/sha1.js">

<script type="text/javascript">

$(document).ready(function {

$("#answer{SGQ}").attr('readonly', 'readonly');

//$("#answer{SGQ}").css('display', 'none'); //uncomment this line for not displaying the code

});

$('#field1, #field2').bind('change keyup', function {

if ($("#field1").val== || $("#field2").val==)

$("#answer{SGQ}").val('');

else {

var sha1 = CryptoJS.algo.SHA1.create;

sha1.update($("#field1").val);

sha1.update($("#field2").val);

// sha1.update($("#otherfield").val);

var hash = sha1.finalize;

$("#answer{SGQ}").val(hash);

}

});

=Check validity of international phone number in subquestion=

Tested with: 1.91+, Firefox 8, Chrome 15

As of version 1.92, you can use the core Validation querstion option to validate multiple short text and array text questions. Any question that fails that validation check will have its background color changed to red.

Note, the below workaround will fail in version 1.92 because it contains a regular expression with curly braces. However, as described above, support for this feature is now built-in to version 1.92

This workaround uses javascript to check the validity of an international phone number in a subquestion of multiple short text.

Add the following code to the source of your question.

Replace "QQ" with the question ID and "NN" with the row number that you want to validate.

The regex is from: regexlib.com blank

=Check validity of email address in subquestion=

'Tested with: 1.91+, Firefox 8, Chrome 15''

As of version 1.92, you can use the core Validation querstion option to validate multiple short text and array text questions. Any question that fails that validation check will have its background color changed to red. Note, the below workaround will fail in version 1.92 because it contains a regular expression with curly braces. However, as described above, support for this feature is now built-in to version 1.92

This workaround uses javascript to check the validity of an email address in a subquestion of multiple short text.

Add the following code to the source of your question.

Replace "QQ" with the question ID and "NN" with the row number that you want to validate.

The regex is from: regexlib.com blank

=Hiding the help-text when it's empty=

Tested with: 1.91+

I had made a style in my template putting a border around my help-text. To avoid empty help-text to show up (and have lines instead of just 'nothing' when there was no help text, I used this piece of code in question.pstpl:

it can probably be optimized but it worked for me

=Disable or hide selected fields in a matrix question=

Tested with: 1.92+, IE 7/8/9, FireFox 12/13

TASK

Hide or disable selected fields in a Matrix, so that users cannot make any input.

(See example, where users should not make input into red framed fields)



Fig. 1: Prevent users from input into first two fields (as an example)

SOLUTION

First find the name of the fields you want to hide / disable. In my case I used Firebug with firefox to figure that out.



Fig. 2: Figure out the name(s) of the field(s)

Then put the following script-code into the HTML-source code as described above:

Note: you have to change the code to match the names of your fields!



Fig. 3: Result: first field is diabled ("greyed out"), second one is completely hidden

I think this way one can apply many other attributes to a field like color etc. But did not try that myself.

Thanks to roB2009 for the input in the forum!

=Add prefix or suffix to question type "Array (Texts)"=

TASK

Add a prefix or suffix to the text fields in questions of the "Array (Texts)" type.



Fig. 1: Suffix



Fig. 1: Prefix

SOLUTION
 * Set up your survey to use JavaScript.
 * Add the following script to the source of the array. Replace "12345" with the array question ID and modify the suffixes/prefixes as required.
 * The function call must consist of a question ID followed by the suffixes for each column. Suffixes/Prefixes must be enclosed in quotes and comma separated.
 * In this example question ID 12345 will get an "in &euro;" suffix in the first column and an "in %" in the next 3 columns.

For adding a prefix you need to substitute the following line in the code

with this

=Time question (Date question-like)=

Tested with: 1.92+

This workaround uses JavaScript/jQuery to build a Time question just like to the Date one.

Implementation is as follows:
 * 1) Download the file at trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js and upload it to your survey.
 * 2) Set up your survey to use JavaScript.
 * 3) Place the following code in the source of a short text question.

=Calculating date difference=

Tested with: 1.92+ Build 120909

This workaround explains how calculate difference between two dates (in: days, weeks, months and years) and is based on this resource external.

Requieres 2 groups and 'group by group' or 'question by question' presentation.

Group 1 (2 date questions)
 * 1st question - Question code: "DD"
 * 2nd question - Question code: "D2"

Group 2
 * 1 numerical input question.

This question retrieves the number of days between the 2 dates, and check if D2 is posterior than DD.

All the requiered code have to be added in the source of this numerical question.

=How to set minDate/maxDate based on other Datequestions=

 tested with Version 2.00+ Build 130708

QQ1 and QQ2 are the question identifiers. QQ2 gets as maxDate today and as minDate the date set in QQ1. The onClose event is needed because on document.ready the value of QQ1 is not yet known, although the value of today is.

=Remove Question Help if empty=

Version 2.00+ Build 130513

Change your question.pstpl in your Template Editor so that the line looks like below. I've added the ID tag help_{question_number}.

You can then add the following javascript at the end of question.pstpl. If the contents of the help tag is empty then hide the element.

= Implicit Association Test (IAT)=

Version 2.06
Tested with: LimeSurvey version 2.06

This workaround uses JavaScript to insert an IAT interface into an Array (Texts) question. The workaround prompts respondents to assign words or phrases using the "E" or "I" keys. In mobile devices, "E" and "I" buttons are provided.



Download a [[Media:Demo_IAT_Concept.zip|working template]] and [[Media:Demo_iat_concept.lss|working survey]].

Implementation is as follows:

1) Set up your survey to use JavaScript.

2) Create your Array (Texts) with subquestions as follows:

- Y scale - all of your "attribut" words or phrases

- X scale - "Key Pressed" and "Elapsed Time (ms)"



3) Insert your association terms and the other text elements for the interface into the Question Help section as depicted below. The text strings must be separated with "double pipes" (||) and you will need to place them in the following order:

- Left association term

- Right association term

- Instructional text

- Finished text



4) Add the following to the end of template.js:

5) Add the following to the end of template.css:

6) To apply the plugin, add one of the two scripts below to the question source:

- With hidden answer table (for normally activated survey) - With visible answer table (for testing purposes)

Version 2.50
Tested with: LimeSurvey version 2.50

This workaround uses JavaScript to insert an IAT interface into an Array (Texts) question. The workaround prompts respondents to assign words or phrases using the "E" or "I" keys. In mobile devices, "E" and "I" buttons are provided.



DOWNLOADS:
 * Template - [[Media:Demo_IAT_For_25_Template.zip|Demo_IAT_For_25_Template.zip]]
 * Survey - [[Media:Demo_IAT_For_25_Survey.zip|Demo_IAT_For_25_Survey.zip]].

IMPLEMENTATION:  Set up your survey to use JavaScript.</li> Create your Array (Texts) with subquestions as follows: <ul> Y scale - all of your "attribute" words or phrases</li> X scale - "Key Pressed" and "Elapsed Time (ms)" </li> </ul> </li> Insert your association terms and the other text elements for the interface into the Question Help section as depicted below. The text strings must be separated with "double pipes" (||) and you will need to place them in the following order: <ul> Left association term</li> Right association term</li> Instructional text</li> Finished text </li> </ul> </li> Add the following to the end of template.js: </li> Add the following to the end of template.css: </li> To apply the plugin, add one of the two scripts below to the question source: <ul> <li>With hidden answer table (for normally activated survey) </li> <li>With visible answer table (for testing purposes) </li> </ul> </li> </ol>

=Make multiple choice easier=

Tested with Version 2.00 in Chrome, FF, Safar, IE

The problem: We often have multiple choice question, where the user has to select 4 elements out of 78 possible answers or 3 out of 25 and so on. If we use pen and paper version for this questions, we noticed that the participants go through the whole list and if an answer doesn't suit on the first sight, they cross it out.

The solution: The script gives the participant the possibility to cross out this answers in a digital way. The script adds a small "X" before the checkbox. When it is clicked, the label text of the checkbox turns grey. (see the attached screenshot for an example)

Here is the script, just add it to help text

=Prevent the survey from being submitted when users press enter=

By default HTML forms are submitted when the user presses enter in any text field. This can be annoying with long survey pages or if your users are inexperienced with keyboard shortcuts.

To disable this behavior, add the following code snippet to template.js:

= Card Sorting=

Version 2.06
Tested with: 2.06,

This workaround uses JavaScript to allow dragging items into "buckets" to "card sort" them. A multiple-short-text question is used with subquestions being the draggable items. The data recorded for each item is the "bucket" number that it was dropped in. "Buckets" are pre-defined in a list in the "Help" section of the question.



DOWNLOADS:

- [[Media:Card_Sort.zip|Demo template]]

- [[Media:Card_Sort.lss|Demo survey]].

IMPLEMENTATION:

1) Set up your survey to use JavaScript.

2) Create your multiple-short-text with subquestions.

3) Insert the "bucket" labels into an unordered list in the Question Help section.

4) Add the following to the end of template.js:

5) Add the following to the end of template.css:

6) Add this to the source of the question to apply the function.

Version 3.x
Here is a custom question theme for card Sorting in 3.x. (note that this interface is not optimal for small screen sizes)

Implementation:

1) Extract the custom question theme linked below and upload it to /limesurvey/upload/themes/question/.

2) Create a multiple-short-text question, click Save.

3) Set the question setting "Question theme" to "cardSort", click Save.



4) In the question setting "Sorting area names" field, enter a comma-separated list of the names for the sorting "buckets", click Save.



5) Create subquestions as required.

6) The styles for the theme can be modified in /limesurvey/upload/themes/question/cardSort/survey/questions/answer/multipleshorttext/assets/css/cardsort.css.



Downloads:

Custom question theme - [[Media:CardSort.zip]]

Sample survey - [[Media:Card_sort_test_survey.zip]]

= Q Sorting=

Version 3.x
Tested with: 3.08

This workaround is heavily based on the Card Sorting above. It uses JavaScript to allow dragging items into "buckets" to "card sort" them with the additional twist to limit the cards per bucket. A multiple-short-text question is used with subquestions being the draggable items. The data recorded for each item is the "bucket" number that it was dropped in. "Buckets" and their limits are pre-defined in a list in the "Display" section of the question.

Downloads:

Custom question theme - [[Media:QSort.zip]]

=Text Input (e.g. "short free text", "huge free text"): Force UpperCase + onBlur Trim=

Add this to the source of your target question to apply the function.

Here is the primary JavaScript/jQuery coding:

For Text-type question (e.g. 'short free text', 'huge free text'), set the 'this_self' variable as below:

For 'Multiple Choice'-type question enabled with the 'Other' option which provides a textbox, set the 'this_self' variable as below:

For 'List (radio)'-type question enabled with the 'Other' option which provides a textbox, set the 'this_self' variable as below:

= Convert arrays to dropdowns on smaller screens =

Tested with: 2.05, IE 8-11, Firefox, Chrome

Here's a little jQuery plugin that converts arrays to drop-downs on smaller screens.

IMPLEMENTATION:

1) Add the following to the end of template.js:

2) Add something like this to template.css (I have it set to switch at 640px but adjust that as you see fit):

Note that the "Please choose" text is an optional setting. To change it, apply the plugin like this:

= Van Westendorp Pricing Sliders=

Version 2.06
Tested with: LimeSurvey version 2.06

This workaround uses JavaScript to dynamically control sliders to facilitate the Van Westendorp pricing research methodology. When a slider is manipulated, all of the "higher" sliders are dynamically pushed to higher levels and "lower" sliders are pushed to lower levels. This ensures that the data will always be valid.



Download a [[Media:Test_Van_Westendorp_Pricing_206.zip|working template and survey]] (un-zip the package and install the template before the survey).

Implementation:

There are two options to adjust -order - this is the order that your subquestions will be displayed (default, 1, 2, 3, 4) -randomOrder - if set to true, the order option will be overridden and the subquestion order will be randomized (default, false)
 * 1) Set up your survey to use JavaScript.
 * 2) Create your Multiple Numeric question with subquestions as seen in the image above.
 * 3) Add the following to the end of template.js:
 * 4) Add the following to the end of template.css (this is for a copy of Denis Chenu's SkeletonQuest template):
 * 5) To apply the plugin, add this script the multiple-numeric question source.

Version 2.5x
Tested with: LimeSurvey version 2.54.5

This workaround uses JavaScript to dynamically control sliders to facilitate the Van Westendorp pricing research methodology. When a slider is manipulated, all of the "higher" sliders are dynamically pushed to higher levels and "lower" sliders are pushed to lower levels. This ensures that the data will always be valid.



Download a [[Media:Test_Van_Westendorp_Pricing_25x.zip|working template and survey]] (un-zip the package and install the template before the survey).

Implementation:

There are two options to adjust -order - this is the order that your subquestions will be displayed (default, 1, 2, 3, 4) -randomOrder - if set to true, the order option will be overridden and the subquestion order will be randomized (default, false)
 * 1) Set up your survey to use JavaScript.
 * 2) Create your Multiple Numeric question with subquestions as seen in the image above.
 * 3) Add the following to the end of template.js:
 * 4) Add the following to the end of template.css (this is for a copy of the default template):
 * 5) To apply the plugin, add this script the multiple-numeric question source.

Version 3.x
A custom question theme for Pricing Sliders can be found here - https://github.com/tpartner/LimeSurvey-Pricing-Sliders-3.x

= Multiple Choice - Select "All of the above" =

Version 2.67.x
Tested with: LimeSurvey version 2.67.3

This script will render the last item of a multiple-choice question as "Select all".

Download a [[Media:All_of_the_above.zip|sample survey]].

Implementation:


 * 1) Set up your survey to use JavaScript.
 * 2) Create your Multiple Choice question with the last subquestions as "Select all".
 * 3) Add the following script to the source of the question text:

= Pay Off Matrix Interface =

LimeSurvey Version 2.67.x
This workaround converts a list-radio type question into a Pay Off Matrix interface.





Download a [[Media:Demo_Pay_Off_Matrix.zip|working template and survey]] (un-zip the package and install the template before the survey).

Implementation:


 * 1) Create your List Radio question with with the upper and lower values for each answer separated by "pipe" characters.
 * 1) Assign a class "pay-off-matrix" to that question.
 * 1) Add the following to the end of template.js:
 * 2) Add the following to the end of template.css: