LimeSurvey Manual - User contributions [en]

Workarounds: Manipulating a survey at runtime using Javascript

2023-07-13T14:23:17Z

Tpartner: /* LimeSurvey version 6.x */

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]]

<div class="simplebox"><center><br />'''Please keep in mind that these workarounds are not official LimeSurvey extensions - they are solutions that users have created for themselves.<br /><span style='color:#EE0000,#FFFFFF'>Therefore LimeSurvey can't offer guarantees or support for these solutions.</span><br />If you have questions, please contact the users that, thankfully, shared their solutions with the community.'''<br /><br /></center></div>

<div class="simplebox">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.<br /><br /></div>

__TOC__

=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 <nowiki>''Tested with: (enter LimeSurvey version and maybe browser)''</nowiki>.

Finally it's imported to mark all your code with code tags, other wise you might break this page.
*Start tag: '''<nowiki><syntaxhighlight lang="php"></nowiki>'''
*End tag: '''<nowiki></syntaxhighlight></nowiki>'''.

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

Plugin [https://extensions.sondages.pro/questions-updating-and-managing/addscripttoquestion-easily-add-javascript/ 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".
* [http://docs.limesurvey.org/tiki-index.php?page=Adding+A+Question Add a new question]
* Edit the question and click the "Source" button in the editor toolbar:

[[File:Editor_1.png]]
* Enter your script after the question text:

[[File:Editor_2.png]]
* Save the question

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

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
alert("Test!");
</script></syntaxhighlight>

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:

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:complete',function() {
alert("Test!");
});
</script></syntaxhighlight>

===Usage of brackets (<nowiki>{ and }</nowiki>)===
{{Alert|title=Caution when using brackets (<nowiki>{ and }</nowiki>) in scripts|text=[[ExpressionScript#Syntax|Expression manager]] uses brackets (<nowiki>{ and }</nowiki>) to enclose expressions. If you have to use brackets in your JavaScript, you must add a space or line feed after the opening bracket (<nowiki>{</nowiki>) and before the closing bracket (<nowiki>}</nowiki>) }}

===Examples of usage of brackets===

ExpressionScript will try to parse this JavaScript:
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(function() {console.log('broken javascript');});
</script>
</syntaxhighlight>

Adding line feed prevents ExpressionScript from parsing
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(function() {
console.log('Adding a line feed for javascript');
});
</script>
</syntaxhighlight>

ExpressionScript will try to parse this JavaScript:
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
if(myvar==1) {console.log('broken javascript');};
</script>
</syntaxhighlight>

Adding spaces inside the brackets prevents ExpressionScript from parsing
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
if(myvar==1) { console.log('Adding a space for javascript'); };
</script>
</syntaxhighlight>

=Sum up input values using Javascript=

''Tested with: ''

<div class="simplebox">As of version 1.92, this is easier to do using the sum() function in [[ExpressionScript|ExpressionScript]]. See this [[ExpressionScript how-tos#Calculate assessment values at runtime and store the results in the survey data|HowTo example]].</div>

<div class="simplebox">Starting in Version 1.92, you also do no longer need to use SGQA (e.g. 45251X1X5) identifiers. Instead the code <code>{SGQ}</code> will automatically replaced by the current questions SGQA-codes.</div>

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 [http://docs.limesurvey.org/tiki-index.php?page=SGQA+Identifier SGQA identifier] and [[Adding a question#Information from previous answers|Using information from previous answers]].

<syntaxhighlight lang="html4strict">

<div style="text-align: left">These are your answers:<br />

<u></u><u></u><u></u><u></u><u>=

<p><script LANGUAGE="JavaScript">

partyprice = 3;

beadclothprice = 3;

breakfastprice = 7;

lunchprice = 8;

dinnerprice = 10;

foodtotal = 0;

var isreallytrue = "Yes";

var noanswer = "No answer";

document.write( "Can you come? = {INSERTANS:45251X1X1}<BR>" );

if ("{INSERTANS:45251X1X1}" == isreallytrue )

{

if ("{INSERTANS:45251X1X3}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X3}"; }

partypeople = parseInt(answer);

partytotal = partyprice * partypeople;

document.write( "It's {INSERTANS:45251X1X3} persons who will come = " + partytotal + "€<BR>" );

if ("{INSERTANS:45251X1X4}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X4}";}

beadcloths = parseInt(answer);

beadclothtotal = beadclothprice * beadcloths;

document.write( "You want to borrow {INSERTANS:45251X1X4} beadcloths = " + beadclothtotal + "€<BR>" );

document.write( "Will you be there thursday? = {INSERTANS:45251X1X5}<BR>" );

document.write( "On friday you will have these meals: <BR>" );

if ("{INSERTANS:45251X1X71}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X71}";}

breakfastfriday = parseInt(answer) * breakfastprice;

document.write( "'''_ " + answer + " breakfeasts = " + breakfastfriday + "€<BR>" );

if ("{INSERTANS:45251X1X72}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X72}";}

lunchfriday = parseInt(answer) * lunchprice ;

document.write( "'''_ " + answer + " lunches = " + lunchfriday + "€<BR>" );

if ("{INSERTANS:45251X1X73}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X73}";}

dinnerfriday = parseInt(answer)* dinnerprice ;

document.write( "'''_ " + answer + " dinners = " + dinnerfriday + "€<BR>" );

foodtotal = breakfastfriday + lunchfriday + dinnerfriday;

document.write( "Will you be there saturday? = {INSERTANS:45251X1X8}<BR>" );

if ("{INSERTANS:45251X1X8}" == isreallytrue )

{

document.write( "On saturday you will have these meals: <BR>" );

if ("{INSERTANS:45251X1X91}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X91}"; }

breakfastsaturday = parseInt(answer) * breakfastprice ;

document.write("'''_ " + answer + " breakfeasts = " + breakfastsaturday + "€<BR>" );

if ("{INSERTANS:45251X1X92}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X92}"; }

lunchsaturday = parseInt(answer) * lunchprice ;

document.write( "'''_ " + answer + " lunches = " + lunchsaturday + "€<BR>" );

if ("{INSERTANS:45251X1X93}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X93}"; }

dinnersaturday = parseInt(answer) * dinnerprice ;

document.write( "'''_ " + answer + " dinners = " + dinnersaturday + "€<BR>" );

foodtotal = foodtotal + breakfastsaturday + lunchsaturday + dinnersaturday;

}

document.write( "Will you be there sunday? = {INSERTANS:45251X1X10}<BR>" );

if ("{INSERTANS:45251X1X10}" == isreallytrue )

{

document.write( "On sunday you will have these meals: <br>" );

if ("{INSERTANS:45251X1X111}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X111}"; }

breakfastsunday = parseInt(answer) * breakfastprice ;

document.write( "'''_ " + answer + " breakfeasts = " + breakfastsunday + "€<BR>" );

if ("{INSERTANS:45251X1X112}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X112}"; }

lunchsunday = parseInt(answer) * lunchprice ;

document.write( "'''_ " + answer + " lunches = " + lunchsunday + "€<BR>" );

if ("{INSERTANS:45251X1X113}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X113}"; }

dinnersunday = parseInt(answer) * dinnerprice ;

document.write( "'''_ " + answer + " dinners = " + dinnersunday + "€<p>" );

foodtotal = foodtotal + breakfastsunday + lunchsunday + dinnersunday;

}

total = partytotal + beadclothtotal + foodtotal;

document.write( "<h3>In total it will cost you " + total + "€</h3><BR>

Put that sum in this bank account 1234 5678 9012" );

}

</SCRIPT></p>

</div></syntaxhighlight>

=Multiple Question Validation=

''Tested with: ''

<div class="simplebox">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|ExpressionScript]]. Such validations also work on the current page, and properly handle array_filter and cascading relevance.</div>

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.):
#Create a new survey of type "group by group", set the "Show |<< Prev| button" to yes and note the SID.
#Add a new group called "Group 1" and note the GID.
#Add a new question "Percent of males" of type "numeric", make it mandatory and note the QID (we will refer to this as QID1).
#Add a new question "Percent of females" of type "numeric", make it mandatory and note the QID (we will refer to this as QID2).
#Add a new group called "Group 2"
#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

<syntaxhighlight lang="javascript">

<script>

function validation()

{

if [[{INSERTANS:SIDXGIDXQID1}+{INSERTANS:SIDXGIDXQID2}) != 100)

{

alert("Your responses don't sum 100! Check them");

document.limesurvey.move.value = 'moveprev';

document.limesurvey.submit();

}

else

{

document.limesurvey.move.value = 'movelast';

document.limesurvey.submit();

}

}

setTimeout("validation()",250);

</script>

</syntaxhighlight>

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

<syntaxhighlight lang="php">

function validation() {

if ("{INSERTANS:SIDXGIDXQID}" != "{INSERTANS:SIDXGIDXQID}") {

alert("Your responses don't match Check them"); document.limesurvey.move.value = 'moveprev';

document.limesurvey.submit();

}

}

setTimeout("validation()",250);

</syntaxhighlight>

=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.

<syntaxhighlight lang="php">

<script>

if ("{INSERTANS:SIDXGIDXQID}" == "No")

{

window.location="http://www.limesurvey.org";

}

</script>

</syntaxhighlight>

=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 (<input> 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...:

<syntaxhighlight lang="php">

<script>

jQuery(document).ready(

function(){

alert('onload alert!');

}

);

</script>

</syntaxhighlight>

...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:

<syntaxhighlight lang="php">document.getElementById("answer73166X16X54").style.display='none';</syntaxhighlight>

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:

<syntaxhighlight lang="php">document.getElementById("answer{SGQ}").style.display='none';</syntaxhighlight>

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:

<syntaxhighlight lang="php">document.getElementById("answer73166X16X54").readOnly=true;</syntaxhighlight> 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.

<syntaxhighlight lang="php">

jQuery(document).ready(

function() {

jQuery('input:radio').each(

function() {

var s = jQuery(this);

var c = s.parent().children('.answertext');

for(var i=0; i < c.length; i++) {

var a = jQuery(c[i]]);

if(this.id </u> a.attr('for') && a.text() == '') {

s.css({ 'display' : 'none' });

a.css({ 'display' : 'none' });

break;

}

}

}

)

}

);

</syntaxhighlight>

==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 <html> 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

<syntaxhighlight lang="javascript">

jQuery(document).ready(

function(){

languagecode=$('html').attr('lang');

alert('This is the current language code: '+languagecode);

}

);

</syntaxhighlight>

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''

<div class="simplebox">As of version 1.92, this is easier to do using the the array_filter attribute, or relevance equations in general.</div>

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.

<syntaxhighlight lang="php">

var previousQuestionAnswer = "{INSERTANS:1000X1X1}";

var currentQuestionID = "#answer1000X1X1"

$(document).ready(function() {

// See if the answer for the previous question matches an answer in the current question

// (other than 'No Answer')

// If so, disable it.

if (previousQuestionAnswer!='No Answer') {

$(currentQuestionID).children().each(function(index, Element)

{

if ($(this).attr('text') == previousQuestionAnswer)

{ $(this).attr('disabled', true); }

}

);}

}); // End of JQuery ready function

</syntaxhighlight>

===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):

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Get the countryCode (first character of the country)
var countryCode = '{INSERTANS:1000X1X1}'.substr(0, 1).toUpperCase();

// Loop through all dropdown options and remove those with codes not starting with the countryCode
$('select[id^="answer"] option').each(function(i){

if($(this).attr('value') && $(this).attr('value').substr(0, 1).toUpperCase() != countryCode) {
$(this).remove();
}
});
});

</script></syntaxhighlight>

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

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Get the stateCode (two first characters of the state)

var stateCode = '{INSERTANS:1000X1X2}'.substr(0, 2).toUpperCase();

// Loop through all dropdown options and remove those with codes not starting with the stateCode

$('select[id^="answer"] option').each(function(i){

if($(this).attr('value') && $(this).attr('value').substr(0, 2).toUpperCase() != stateCode) {

$(this).remove();

}

});

});

</script></syntaxhighlight>

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+''

<div class="simplebox">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).</div>

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...

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

// Match elements with labels using htmlFor and a loop

var labels = document.getElementsByTagName('LABEL');

for (var i = 0; i < labels.length; i++) {

if (labels[i].htmlFor != '') {

var elem = document.getElementById(labels[i].htmlFor);

if (elem)

elem.label = labels[i];

}

}

var answerFilter="{INSERTANS:96553X63X759}";

for (i=0; i<30; i++){

var iLabel = document.getElementById('answer96553X63X760'+(i+1]].label.innerHTML;

if (answerFilter.search(iLabel) == -1){

// Hide element

$('#question760').find('li').eq(i).hide();

// Set value of hidden elements to zero

document.getElementById('answer96553X63X760'+(i+1)).value = 0;

}

}

});</script>

</syntaxhighlight>

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

''Tested with: 1.72''

''And tested with: 1.91+''

<div class="simplebox">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|ExpressionScript]] compatible equations or tailored text. Finally, with 1.92, defaults are properly managed even when set on the same page.</div>

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.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answer1000X11X30').val('{INSERTANS:1000X10X20}');

$('#answer1000X11X31').val('{INSERTANS:1000X10X21}');

});

</script></syntaxhighlight>

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.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answer1000X2X2').val(parseInt('{INSERTANS:1000X1X1}')*2);

$("#question2").hide();

});

</script>

</syntaxhighlight>

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

=Dynamic Sum=

<div class="simplebox">As of version 1.92, this is easier to do with [[ExpressionScript|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 [[ExpressionScript how-tos#Calculate assessment values at runtime and store the results in the survey data|HowTo example]] demonstrates the dynamic sum feature.</div>

<div class="simplebox">Also note, as of version 1.92, the following workaround will fail, since it includes a a regular expression containing curly braces.</div>

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:

<syntaxhighlight lang="php">

<script language=Javascript>

// General definitions

// Define a regular expression to match the labels containing information about an answer

// In LimeSurvey, these labels start with "answer..."

var answerRegex = /^answer/;

// Find all answer checkboxes in the document and set their

// onchange events to updatePrice

function Custom_On_Load()

{

// Find all input elements

var inputList=document.getElementsByTagName("input");

// Loop through each, looking for checkboxes

var i;

for( i=0; i< inputList.length;i++ )

{

// If input item does not have an ID, skip

if (! (inputList[i].id)) { continue; }

// Skip to next if ID doesn't start with "answer"

if (!answerRegex.test(inputList[i].id)) { continue; }

// Skip to next if not a checkbox

if (inputList[i].type.toUpperCase()!='CHECKBOX') { continue; }

// This is an answer checkbox!

// Setup onchange event

inputList[i].onclick = updatePrice;

}

// Load initial sum

updatePrice();

}

function updatePrice()

{

var labels=document.getElementsByTagName("LABEL");

// Define a regular expression to match a price inside parenthesis

// For example: ($29) or ($29.54).

// Set up

priceRegex = /$\$(\d*\.{0,1}\d+)$/;

// Loop through all the labels, looking for labels corresponding to

// answers that have a price in them.

var i;

var total = 0;

for( i=0; i<labels.length;i++ )

{

var myArray; // Define array used for regex matching

var inputID; // Define field element

// Get the ID of the field corresponding to the label using the

// "htmlFor" attribute

// (FYI, there are some labels that will have to be screened out

// because they don't correspond to an answer)

// Does the label start with "answer"?

// If not: exit.

if (!answerRegex.test(labels[i].htmlFor)) { continue; }

// First make sure this element exists

// If it doesn't, go to the next element

// If it does, it will be defined in inputID

if (! (inputID = document.getElementById(labels[i].htmlFor)) ) { continue; }

// See if the corresponding answer is a checkbox that is checked.

// If not, go to next label

if (inputID.type.toUpperCase()!='CHECKBOX') { continue; }

if (!inputID.checked) { continue; }

// This is label for an answer.

// The innerHTML will give us the text of the label

// The price information will be in the form ($XX.XX)

// which in contained in the label text.

// Find a match for a decimal number inside the pattern "($" and ")"

if [[myArray = priceRegex.exec(labels[i].innerHTML]] != null)

{

// Keep a running tally

total += parseFloat(myArray[1]);

}

}

// Update total price on form

document.getElementById("totalPrice").value = "$" + formatCurrency(total);

}

function formatCurrency(num) {

num = isNaN(num) || num <u> '' || num </u> null ? 0.00 : num;

return parseFloat(num).toFixed(2);

}

</script>

</syntaxhighlight>

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

<syntaxhighlight lang="php">Total Cost for selected accessories: <input type="readonly" value="" id="totalPrice" /></syntaxhighlight>

=Focus on the first Input field=

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

<div class="simplebox">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.</div>

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 </head> closing tag:

<syntaxhighlight lang="php">

<script type="text/javascript">

function focusFirst(Event)

{

var i=0;

while(document.forms[0].elements[i].type == "hidden")

{

i++;

}

document.forms[0].elements[i].focus();

return;

}

if(ie)

{ window.attachEvent("onload", focusFirst); }

else

{ document.addEventListener("load", focusFirst, true); }

</script>

</syntaxhighlight>

'''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:

<syntaxhighlight lang="php">

<script type="text/javascript">

var ie = false;

</script>

</syntaxhighlight>

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.

<syntaxhighlight lang="php">

<script type="text/javascript">

jQuery(document).ready(function() {

jQuery(document).bind('keypress', function(e){

if (48 <= e.which && e.which <= 57) {

jQuery('input:radio').each(function() {

var v = jQuery(this).val();

var c = (e.which <u> 48) ? 10 : e.which - 48;

if(v </u> 'Y' || v <u> 'N') {

v = (v </u> 'Y') ? 1 : 2;

}

if(v == c) {

jQuery(this).click();

jQuery('#limesurvey input:submit').click();

}

});

}

})

});

</script>

</syntaxhighlight>

=Math notation in LimeSurvey=
#download the js file from [http://mathcs.chapman.edu/~jipsen/mathml/asciimathdownload.html AsciiMath script]
#copy it in the /scripts/ folder in your installation
#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:

<syntaxhighlight lang="php">

<script type="text/javascript" src="ASCIIMathML.js">

</syntaxhighlight>

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 [http://www.imathas.com/editordemo/demo.html link for a TinyMCE with math support].

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

<div class="simplebox">As of version 2.06 this workaround is not required. It can be handled with subquestion relevance.</div>

''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:'''
*[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|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.<syntaxhighlight lang="javascript">function filterArrByCol(qMultiOpt, qArray, prevPage) {

// If filter question is on a previous page, hide Q1 and check all "visible" boxes
if(prevPage == 1) {
$('#question'+qMultiOpt+' li[id^="javatbd"]:visible input.checkbox').attr('checked', true);
$('#question'+qMultiOpt+'').hide();
}

// Assign classes to the answer cells
$('#question'+qArray+' td.answer-item').each(function(i){
var classArr = $(this).attr('class').split('answer_cell_00');
classArr = classArr[1].split(' ');
var ansCode = classArr[0];
$(this).addClass('ans-'+ansCode+' filtered');
});

// Assign classes to the answer label cells
$('#question'+qArray+' table.subquestions-list tbody tr:eq(0) td.answer-item').each(function(i){
var classArr2 = $(this).attr('class').split(' ans-');
var ansCode2 = classArr2[1];
$('#question'+qArray+' table.subquestions-list thead tr:eq(0) th:eq('+i+')').addClass('ans-'+ansCode2+'');
});

// Fire the filter function on page load
filterArr(qMultiOpt, qArray);

// Listener on multi-opt checkboxes to fire the filter function
$('#question'+qMultiOpt+' input.checkbox').click(function(){
filterArr(qMultiOpt, qArray);
});

// On submit, clear all hidden radios of array
$('#movenextbtn, #movesubmitbtn').click(function(){
$('#question'+qArray+' td.filtered:hidden').each(function(i){
$('input.radio', this).prop('checked', false);
});
return true;
});
}

function filterArr(qMultiOpt, qArray) {

if($('#question'+qMultiOpt+' input.checkbox:checked').length < 1) {
// Hide the array if no multi-opt options are checked
$('#question'+qArray+'').hide();
}
else {
$('#question'+qArray+'').show();

// Hide all columns of array
$('#question'+qArray+' table.subquestions-list tbody td.answer-item, #question'+qArray+' table.question thead th').hide();

// Loop through multi-opt checkboxes and, if checked, show corresponding column of array
$('#question'+qMultiOpt+' input.checkbox').each(function(i){
if($(this).prop('checked') == true) {
var classArr3 = $(this).attr('id').split('X'+qMultiOpt);
var ansCode3 = classArr3[1];
$('#question'+qArray+' .ans-'+ansCode3+'').show();
}
});
}
}</syntaxhighlight>

*If using LimeSurvey version 2.0 or older, place the following functions in your template.js file. These will be accessed by either method.<syntaxhighlight lang="javascript">
$(document).ready(function() {

function filterArrByCol(qMultiOpt, qArray, prevPage) {

// If filter question is on a previous page, hide Q1 and check all "visible" boxes
if(prevPage == 1) {
$('#question'+qMultiOpt+' li[id^="javatbd"]:visible input.checkbox').attr('checked', true);
$('#question'+qMultiOpt+'').hide();
}

// Assign classes to the answer cells
$('#question'+qArray+' table.question tbody td').each(function(i){
var classArr = $(this).attr('class').split('answer_cell_00');
var ansCode = classArr[1];
$(this).addClass('ans-'+ansCode+' filtered');
});

// Assign classes to the answer label cells
$('#question'+qArray+' table.question tbody tr:eq(0) td').each(function(i){
var classArr2 = $(this).attr('class').split(' ans-');
var ansCode2 = classArr2[1];
$('#question'+qArray+' table.question thead tr:eq(0) th:eq('+i+')').addClass('ans-'+ansCode2+'');
});

// Fire the filter function on page load
filterArr(qMultiOpt, qArray);

// Listener on multi-opt checkboxes to fire the filter function
$('#question'+qMultiOpt+' input.checkbox').click(function(){
filterArr(qMultiOpt, qArray);
});

// On submit, clear all hidden radios of array
$('#movenextbtn, #movesubmitbtn').click(function(){
$('#question'+qArray+' td.filtered:hidden').each(function(i){
$('input.radio', this).attr('checked', false);
});
return true;
});
}

function filterArr(qMultiOpt, qArray) {

if($('#question'+qMultiOpt+' input.checkbox:checked').length < 1) {
// Hide the array if no multi-opt options are checked
$('#question'+qArray+'').hide();
}
else {
$('#question'+qArray+'').show();

// Hide all columns of array
$('#question'+qArray+' table.question tbody td, #question'+qArray+' table.question thead th').hide();

// Loop through multi-opt checkboxes and, if checked, show corresponding column of array
$('#question'+qMultiOpt+' input.checkbox').each(function(i){
if($(this).attr('checked') == true) {
var classArr3 = $(this).attr('id').split('X'+qMultiOpt);
var ansCode3 = classArr3[1];
$('#question'+qArray+' .ans-'+ansCode3+'').show();
}
});
}
}
});</syntaxhighlight>

'''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).<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
filterArrByCol(MM, AA);
});
</script></syntaxhighlight>

'''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.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
filterArrByCol(MM, AA, 1);
});
</script></syntaxhighlight>

=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 [http://plugins.jquery.com/project/autotab 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.

Implementation is as follows:
#Visit [http://plugins.jquery.com/autotabs http://plugins.jquery.com/autotabs], download the plugin script and save it as ''jquery.autotab-1.1b.js'' in the template folder.
#Link to the script by placing ''<script type="text/javascript" src="{TEMPLATEURL}jquery.autotab-1.1b.js"></script>'' within the ''<head>'' tag of startpage.pstpl.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#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)
#Define a Maximum characters attribute for all questions that the autotab is applied to.
{{QS:maximum_chars}}
#In the source of the first question of the group that contains the auto-tabbed questions, add the following code.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answerSSSSSXGGXAA').focus(); //initially focus on the first input

$('#answerSSSSSXGGXAA').autotab({ target: 'answerSSSSSXGGXBB' });

$('#answerSSSSSXGGXBB').autotab({ previous: 'answerSSSSSXGGXAA', target: 'answerSSSSSXGGXCC' });

$('#answerSSSSSXGGXCC').autotab({ previous: 'answerSSSSSXGGXBB', target: 'answerSSSSSXGGXDD' });

$('#answerSSSSSXGGXDD').autotab({ previous: 'answerSSSSSXGGXCC' });

});

</script></syntaxhighlight>

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

[[File:ids_343x252.gif]]

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 [[Workarounds#Reverse_array_filter|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 [http://docs.jquery.com/Events/change 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.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#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

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answer11111X22X33').change(function() {

if ( $('#answer11111X22X33').val() > 10 ) {
alert ("That's an awful lot. Are you sure?");
}
});
});
</script></syntaxhighlight>

=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 [http://plugins.jquery.com/project/meioMask 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/ http://www.meiocodigo.com/projects/meiomask/] for more details on features and options.

Implementation for this demo was as follows:
#Visit [http://www.meiocodigo.com/projects/meiomask/ http://www.meiocodigo.com/projects/meiomask/], download the latest plugin script and save it as jquery.meiomask.js in the template folder.
#Link to the script by placing <script type="text/javascript" src="{TEMPLATEURL}jquery.meiomask.js" charset="utf-8"></script> within the <head> tag of startpage.pstpl.
#Turn off $filterxsshtml to allow insertion of JavaScript in the questions. ([http://docs.limesurvey.org/tiki-index.php?page=Optional+settings&structure=English+Instructions+for+LimeSurvey#Filtering_dangerous_HTML_tags_in_survey_objects See documentation here])
#Create the text input questions that the masks are to be applied to
#In the source of the help section of the first question of the group that contains the masked inputs, add the following code. ([http://docs.limesurvey.org/tiki-index.php?page=Workarounds&structure=English+Instructions+for+LimeSurvey#How_to_use_Script_eg._JavaScript_etc._ See How to use script here])

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Define custom masks
$.mask.masks = $.extend($.mask.masks,{
customMask1:{ mask: 'a9a 9a9' }, // Canadian postal code
// Maximum input of 9,999.99, reverse input, default value of 0.00
customMask2:{ mask: '99.999,9', type : 'reverse', defaultValue : '000' }
});

// Set the 'alt' attributes of the inputs
$('#answer111111X22XAA').attr('alt', 'phone-us'); // a pre-defined mask
$('#answer111111X22XBB').attr('alt', 'customMask1'); // a custom mask
$('#answer111111X22XCC').attr('alt', 'customMask2'); // a custom mask
$('#answer111111X22XDD').attr('alt', 'cc'); // a pre-defined mask for credit card

// Tell the plugin to apply masks to these inputs
$('input:#answer111111X22XAA').setMask();
$('input:#answer111111X22XBB').setMask();
$('input:#answer111111X22XCC').setMask();
$('input:#answer111111X22XDD').setMask();
});
</script>
</syntaxhighlight>

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 [http://www.meiocodigo.com/projects/meiomask/#mm_options 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

[[File:Ids 343x252.gif]]

=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/ http://digitalbush.com/projects/masked-input-plugin/] for more details on features and options.

Implementation as follows:

#Visit [http://digitalbush.com/projects/masked-input-plugin/ http://digitalbush.com/projects/masked-input-plugin/], download the latest plugin script and save it as jquery.maskedinput.js in the template folder.
#Link to the script by placing <script type="text/javascript" src="{TEMPLATEURL}jquery.maskedinput.js" charset="utf-8"></script> within the <head> tag of startpage.pstpl.
#Turn off $filterxsshtml to allow insertion of JavaScript in the questions. ([http://docs.limesurvey.org/tiki-index.php?page=Optional+settings&structure=English+Instructions+for+LimeSurvey#Filtering_dangerous_HTML_tags_in_survey_objects See documentation here])
#Create the text input questions that the masks are to be applied to
#In the source of the help section of the first question of the group that contains the masked inputs, add the following code. ([http://docs.limesurvey.org/tiki-index.php?page=Workarounds&structure=English+Instructions+for+LimeSurvey#How_to_use_Script_eg._JavaScript_etc._ See How to use script here])

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function($) {
$("#answer55431X1X5").mask("999-99-9999",{ placeholder:"#" });
});
</script>
</syntaxhighlight>

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.
<br /><br />
'''DOWNLOAD:'''<br />
- [[Media:Demo_Random_Option_From_Multi-Choice_v206.1.zip|Demo survey for LS 2.06]]<br />
- [[Media:Demo_Random_Option_From_Multi-Choice_v25.1.zip|Demo survey for LS 2.5]]<br />
<br />
'''IMPLEMENTATION''' (LimeSurvey version 2.06)<br />

#[https://manual.limesurvey.org/Workarounds:_Manipulating_a_survey_at_runtime_using_Javascript#How_to_use_Script_.28eg._JavaScript_etc..29_in_LimeSurvey.3F Set up your survey to use JavaScript].
#Create a "Multiple options" question
#Immediately following that question, create a short-text question to store the label of the checked box in (we'll hide this with JavaScript)
#Place the script below in the source of the multiple options question. <syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// Identify the questions
var thisQuestion = $('#question{QID}');
var qHidden = thisQuestion.nextAll('.text-short:eq(0)');
var hiddenInput = $('input.text', qHidden);

// Hide qHidden
qHidden.hide();

// Listener on the checkboxes
$('input.checkbox', thisQuestion).on('change', function(e) {
handleChecked();
});

// Listener on the "Other" input
$('input.text', thisQuestion).on('keyup change', function(e) {
setTimeout(function() {
handleChecked();
}, 250);
});

function handleChecked() {
// Build an array of checked answers
var checkedAnswers = [];
$('input.checkbox:checked', thisQuestion).each(function(i) {
if($(this).closest('.answer-item').hasClass('other-item')) {
checkedAnswers.push($(this).closest('.other-item').find('input.text').val());
}
else {
checkedAnswers.push($(this).nextAll('label:eq(0)').text());
}
});

// Load the hidden question with a random item from the array
var checkedLength = checkedAnswers.length;
$(hiddenInput).val(checkedAnswers[Math.floor(Math.random()*checkedLength)]);

// Fire ExpressionScript
checkconditions(hiddenInput.value, hiddenInput.name, hiddenInput.type);
}
});
</script></syntaxhighlight>
<br />
'''IMPLEMENTATION''' (LimeSurvey version 2.5)

#Follow the first 3 implementation steps above
#Place the script below in the source of the multiple options question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// Identify the questions
var thisQuestion = $('#question{QID}');
var qHidden = thisQuestion.nextAll('.text-short:eq(0)');
var hiddenInput = $('input.text', qHidden);

// Hide qHidden
qHidden.hide();

// Class for "Other
$('input.text', thisQuestion).closest('.answer-item').addClass('other-item');

// Listener on the checkboxes
$('input.checkbox', thisQuestion).on('change', function(e) {
handleChecked();
});

// Listener on the "Other" input
$('input.text', thisQuestion).on('keyup change', function(e) {
setTimeout(function() {
handleChecked();
}, 250);
});

function handleChecked() {
// Build an array of checked answers
var checkedAnswers = [];
$('input.checkbox:checked', thisQuestion).each(function(i) {
if($(this).closest('.answer-item').hasClass('other-item')) {
checkedAnswers.push($(this).closest('.answer-item').find('input.text').val());
}
else {
checkedAnswers.push($.trim($(this).nextAll('.label-text:eq(0)').text()));
}
});

// Load the hidden question with a random item from the array
var checkedLength = checkedAnswers.length;
$(hiddenInput).val(checkedAnswers[Math.floor(Math.random()*checkedLength)]);

// Fire ExpressionScript
checkconditions(hiddenInput.value, hiddenInput.name, hiddenInput.type);
}
});
</script></syntaxhighlight>

=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:<br />
[[File:Secondary_options_1.png]]

Primary option selected:<br />
[[File:Secondary_options_2.png]]<br /><br />

'''DOWNLOADS:'''<br />
- [[Media:Demo_Secondary_Checkboxes.zip|Demo template for LS version 2.06]]<br />
- [[Media:Demo_Secondary_Checkboxes.lss|Demo survey for LS version 2.06]].<br />
- [[Media:Template_Demo_Secondary_Checkboxes_For_2.5.zip|Demo template for LS version 2.5]]<br />
- [[Media:Survey_Demo_Secondary_Multiple_Options_For_LS_25.zip|Demo survey for LS version 2.5]].<br /><br />

==LimeSurvey version 2.06==

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create a "Multiple options" question including both the primary and secondary subquestions (in the order that you would like them displayed if all shown).
#Add the following function to the end of template.js:<syntaxhighlight lang="javascript">
// A function to handle "secondary" checkboxes
function secondaryCheckboxes(qID, primaryPosition, secondaryCount) {
// Identify the elements
var thisQuestion = $('#question'+qID);
var primaryRow = $('li.question-item:eq('+(primaryPosition-1)+')', thisQuestion);
var primaryInput = $('input.checkbox', primaryRow);
var secondaryRows = primaryRow.nextAll('li.question-item:lt('+(secondaryCount)+')');
var secondaryInputs = $('input.checkbox', secondaryRows);

// Indent the secondaries
secondaryRows.css({ 'margin-left':'2.5em' });

// Initial states of the secondary answers
if (primaryInput.prop('checked') == false ) {
secondaryRows.hide();
}

// A listener on the primary answer to show or hide secondary answers
primaryInput.click(function (event) {

// Hide/show the secondary answers accordingly
if (!$(this).is(':checked')) {
secondaryRows.hide();
secondaryInputs.prop('checked', false);
secondaryInputs.each(function(i) {
checkconditions(this.value, this.name, this.type);
});
}
else {
secondaryRows.show();
}
});
}</syntaxhighlight>
#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. <br />So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Sub-question 1 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 1, 2);
// Sub-question 6 is primary followed by 3 secondaries
secondaryCheckboxes({QID}, 6, 3);
});
</script></syntaxhighlight>

==LimeSurvey version 2.5==

#Follow the first 2 implementation steps above
#Add the following function to the end of template.js:<syntaxhighlight lang="javascript">
// A function to handle "secondary" checkboxes
function secondaryCheckboxes(qID, primaryPosition, secondaryCount) {
// Identify the elements
var thisQuestion = $('#question'+qID);
$('div.question-item', thisQuestion).parent().addClass('answer-row');
var primaryRow = $('div.question-item:eq('+(primaryPosition-1)+')', thisQuestion).closest('.answer-row');
var primaryInput = $('input.checkbox', primaryRow);
var secondaryRows = primaryRow.nextAll('div.answer-row:lt('+(secondaryCount)+')');
var secondaryInputs = $('input.checkbox', secondaryRows);

// Indent the secondaries
secondaryRows.css({ 'margin-left':'2.5em' });

// Initial states of the secondary answers
if (primaryInput.prop('checked') == false ) {
secondaryRows.hide();
}

// A listener on the primary answer to show or hide secondary answers
primaryInput.click(function (event) {

// Hide/show the secondary answers accordingly
if (!$(this).is(':checked')) {
secondaryRows.hide();
secondaryInputs.prop('checked', false);
secondaryInputs.each(function(i) {
checkconditions(this.value, this.name, this.type);
});
}
else {
secondaryRows.show();
}
});
}</syntaxhighlight>
#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. <br />So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Sub-question 1 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 1, 2);
// Sub-question 6 is primary followed by 3 secondaries
secondaryCheckboxes({QID}, 6, 3);
});
</script></syntaxhighlight>

==LimeSurvey version 3.x==

#Follow the first 2 implementation steps above
#Add the following function to the end of custom.js:<syntaxhighlight lang="javascript">
// A function to handle "secondary" checkboxes
function secondaryCheckboxes(qID, primaryPosition, secondaryCount) {
// Identify the elements
var thisQuestion = $('#question'+qID);
var primaryRow = $('li.question-item:eq('+(primaryPosition-1)+')', thisQuestion).closest('li.question-item');
var primaryInput = $('input:checkbox', primaryRow);
var secondaryRows = primaryRow.nextAll('li.question-item:lt('+(secondaryCount)+')');
var secondaryInputs = $('input:checkbox', secondaryRows);

// Indent the secondaries
secondaryRows.css({ 'margin-left':'2.5em' });

// Initial states of the secondary answers
if (primaryInput.prop('checked') == false ) {
secondaryRows.hide();
}

// A listener on the primary answer to show or hide secondary answers
primaryInput.on('change', function (event) {

// Hide/show the secondary answers accordingly
if (!$(this).is(':checked')) {
secondaryRows.hide();
secondaryInputs.prop('checked', false).trigger('change');
}
else {
secondaryRows.show();
}
});
}</syntaxhighlight>
#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. <br />So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Sub-question 1 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 1, 2);
// Sub-question 6 is primary followed by 3 secondaries
secondaryCheckboxes({QID}, 6, 3);
});
</script></syntaxhighlight>

=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.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#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.

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

minTime(TT);

function minTime(minTime) {

var startTime = new Date();

$('#movenextbtn, #movesubmitbtn').click(function(){

var endTime = new Date();

if((endTime - startTime)/1000 <= minTime) {
alert ('You must spend at least '+minTime+' seconds on the question.');
return false;
}
else {
return true;
}
});
}
});
</script>
</syntaxhighlight>

=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''

<div class="simplebox">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.</div>

<div class="simplebox">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.</div>

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.

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].

#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.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

minChar(QQ, CC);

function minChar(qID, minChars) {

$('#movenextbtn, #movesubmitbtn').click(function(){

if($('#question'+qID+' textarea').val().replace(/ /g,'').length < minChars) {

alert ('You must enter at least '+minChars+' characters.');

return false;

}

else {

return true;

}

});

}

});

</script></syntaxhighlight>

=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.

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:

#Set up your survey to use JavaScript (See instructions [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|here]])

#Add the following script to your ''template.js'' file.

#Replace "QQ" in the function call at the end with the question ID.

#Create one or more Array (Multi Flexible Text) questions

#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);...)

<syntaxhighlight lang="javascript">$(document).ready(function() {

// A function to add or remove rows of an Array (Multi Flexible)(Text) question
function varLengthArray(qID) {

if ($('#question'+qID+'').length > 0) {

// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+]';
var removeContent = '[-]';

// Create the Add and Remove elements & insert them
var el1 = document.createElement('div');
el1.setAttribute('id','addButton'+qID);
document.body.appendChild(el1);
var el2 = document.createElement('div');
el2.setAttribute('id','removeButton'+qID);
document.body.appendChild(el2);

// Move them to after the array
$( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.question' ).parent());
$( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.question' ).parent());

// Insert their HTML
$( 'div#addButton'+qID ).html( addContent );
$( 'div#removeButton'+qID ).html( removeContent );

// Style the elements - you can modify here if you wish
$( 'div#addButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

$( 'div#removeButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

// Initially hide the Remove element
$( 'div#removeButton'+qID ).hide();

// Call the functions below when clicked
$( 'div#addButton'+qID ).click(function (event) {
addRow(qID);
});
$( 'div#removeButton'+qID ).click(function (event) {
removeRow(qID);
});

// Function to add a row, also shows the Remove element and hides the
//Add element if all rows are shown
function addRow(qID) {
var arrayRow = '#question' + qID + ' table.question tbody';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' ) {
$( 'div#addButton'+qID ).hide();
}
}

// Function to remove a row, also clears the contents of the removed row,
// shows the Add element if the last row is hidden and hides the Remove
// element if only the first row is shown
function removeRow(qID) {
var arrayRow = '#question' + qID + ' table.question tbody';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
$( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
$( 'div#addButton'+qID ).show();
if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' ) {
$( 'div#removeButton'+qID ).hide();
}
}

// Just some initialization stuff
var arrayRow = '#question' + qID + ' table.question tbody';
var rowCount = '';

// Initially hide all except first row or any rows with populated inputs
$( arrayRow ).each(function(i) {
if ( i > 0 ) {
// We also need to give the hidden rows a name cause IE doesn't
// recognize jQuery :visible selector consistently
$( this ).attr('name', 'hidden').hide();

$('input[type=text]', this).each(function(i) {
if ($(this).attr('value') != '') {
$(this).parents('tbody:eq(0)').attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
}
});
rowCount = i;
}
});
}
}

// Call the function with a question ID
varLengthArray(QQ);

});</syntaxhighlight>

''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.

<syntaxhighlight lang="javascript">$(document).ready(function() {

// A function to add or remove rows of an Array (Multi Flexible)(Text) question
function varLengthArray(qID) {

if ($('#question'+qID+'').length > 0) {

// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+]';
var removeContent = '[-]';

// Create the Add and Remove elements & insert them
var el1 = document.createElement('div');
el1.setAttribute('id','addButton'+qID);
document.body.appendChild(el1);
var el2 = document.createElement('div');
el2.setAttribute('id','removeButton'+qID);
document.body.appendChild(el2);

// Move them to after the array
$( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());
$( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());

// Insert their HTML
$( 'div#addButton'+qID ).html( addContent );
$( 'div#removeButton'+qID ).html( removeContent );

// Style the elements - you can modify here if you wish
$( 'div#addButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

$( 'div#removeButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

// Initially hide the Remove element
$( 'div#removeButton'+qID ).hide();

// Call the functions below when clicked
$( 'div#addButton'+qID ).click(function (event) {
addRow(qID);
});
$( 'div#removeButton'+qID ).click(function (event) {
removeRow(qID);
});

// Function to add a row, also shows the Remove element and hides the
//Add element if all rows are shown
function addRow(qID) {
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' ) {
$( 'div#addButton'+qID ).hide();
}
}

// Function to remove a row, also clears the contents of the removed row,
// shows the Add element if the last row is hidden and hides the Remove
// element if only the first row is shown
function removeRow(qID) {
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
$( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
$( 'div#addButton'+qID ).show();
if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' ) {
$( 'div#removeButton'+qID ).hide();
}
}

// Just some initialization stuff
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = '';

// Initially hide all except first row or any rows with populated inputs
$( arrayRow ).each(function(i) {
if ( i > 0 ) {
// We also need to give the hidden rows a name cause IE doesn't
// recognize jQuery :visible selector consistently
$( this ).attr('name', 'hidden').hide();

$('input[type=text]', this).each(function(i) {
if ($(this).attr('value') != '') {
$(this).parents('tbody:eq(0)').attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
}
});
rowCount = i;
}
});
}
}

// Call the function with a question ID
varLengthArray(QQ);

});</syntaxhighlight>

==LimeSurvey version 6.x==

This is an updated script for version 6.x which also handles sub-question relevance:

<syntaxhighlight lang="javascript">
$(document).ready(function() {

// A function to add or remove rows of an Array (Multi Flexible)(Text) question
function varLengthArray(qID) {

if ($('#question'+qID+'').length > 0) {

var thisQuestion = $('#question'+qID);

// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+] Add row';
var removeContent = '[-] Remove row';

// The classes for the Add/Remove elements - modify as you wish
// See https://getbootstrap.com/docs/5.0/getting-started/introduction/
var addClasses = 'inserted-button add btn btn-success';
var removeClasses = 'inserted-button remove btn btn-danger';

// The styles for the Add/Remove elements - modify as you wish
// These could be placed in your custom.css file.
var addStyles = 'margin:10px 0 10px 10px; padding:1px 5px; text-align:center; width:auto; cursor:pointer; float:left;';
var removeStyles = 'margin:10px 0 10px 10px; padding:1px 5px; text-align:center; width:auto; cursor:pointer; float:left;';

// Insert the buttons
$( 'table.ls-answers', thisQuestion).after('<div class="button-wrapper">\
<button type="button" class="'+addClasses+'" style="'+addStyles+'">'+addContent+'</button>\
<button type="button" class="'+removeClasses+'" style="display: none; '+removeStyles+'">'+removeContent+'</button>\
</div>');

// Listeners on the buttons
$('.inserted-button.add', thisQuestion).on('click', function (event) {
addRow();
});
$('.inserted-button.remove', thisQuestion).on('click', function (event) {
removeRow();
});

// Define the relevant rows
var relevantRows = $('tr.subquestion-list:not(.ls-irrelevant)', thisQuestion);

// Function to add a row, show the "Remove" element and hide the "Add" element if all rows are shown
function addRow() {
$('[data-visible="false"]:first', thisQuestion).attr('data-visible', 'true').show();
$('.inserted-button.remove', thisQuestion).show();
console.log($('[data-visible="true"]', thisQuestion).length+' == '+$(relevantRows).length - 1);
if ($('[data-visible="false"]', thisQuestion).length == 0) {
$('.inserted-button.add', thisQuestion).hide();
}
$('.inserted-button.add', thisQuestion).blur();
}

// Function to remove a row, clear the contents of the removed row,
// show the "Add" element if the last row is hidden and hide the "Remove" element if only the first row is shown
function removeRow() {
$('[data-visible="true"]:last input:text', thisQuestion).val('').trigger('keyup');
$('[data-visible="true"]:last', thisQuestion).attr('data-visible', 'false').hide();
$('.inserted-button.add', thisQuestion).show();
if ($('[data-visible="true"]', thisQuestion).length == 0) {
$('.inserted-button.remove', thisQuestion).hide();
}
$('.inserted-button.remove', thisQuestion).blur();
}

// Initially hide all except first row or any rows with populated inputs
$(relevantRows).slice(1).each(function(i) {
$( this ).attr('data-visible', 'false').hide();

$('input[type=text]', this).each(function(i) {
if ($.trim($(this).val()) != '') {
$(this).closest('tr').attr('data-visible', 'true').show();
$('.inserted-button.remove', thisQuestion).show();
}
});
});
}
}
// Call the function with a question ID
varLengthArray(QQ);
});
</syntaxhighlight>

=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.

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:
#Set up your survey to use JavaScript. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|documentation here]])
#Create one or more Array questions
#In the source of the first array question add the following script.
#Replace "QQ" in the function call at the end of the script with the question ID of the array you would like to manipulate.
#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);...)

<syntaxhighlight lang="javascript">
<script type="text/javascript">

$(document).ready(function() {

// A function to show subsequent rows of an array as options are checked
function expandingArray(qID) {

// Build an array of the question rows
var arrayRow = '#question' + qID + ' table.question tbody tr';

// Initially hide all rows unless an input was previously checked
$( arrayRow ).each(function(i) {

if ( $( arrayRow + ':eq(' + i + ') input.radio:checked' ).length != 0 ) {
$(this).attr('name', 'clickedRow');
}
else {
$(this).attr('name', 'hidden').hide();
}
});

// Now show the first hidden row
addRow();

// Add another row when an option is checked for the first time
$( '#question' + qID + ' td.answer input.radio' ).click(function (event) {

if ($(this).parents('tr:eq(0)').attr('name') != 'clickedRow') {
addRow();
$(this).parents('tr:eq(0)').attr('name', 'clickedRow');
}

// The original function of the click event
checkconditions(this.value, this.name, this.type);
});

// Add another row when an table cell is clicked for the first time
$( '#question' + qID + ' table.question tbody td' ).click(function (event) {

if ($(this).parents('tr:eq(0)').attr('name') != 'clickedRow') {
addRow();
$(this).parents('tr:eq(0)').attr('name', 'clickedRow');
}
});

// Function to add a row
function addRow() {
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
// Now, scroll down
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
}
}

// Call the function with a question ID
expandingArray(QQ);

});
</script></syntaxhighlight>

=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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create an Array type question.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedCode" value as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// The subquestion code to place in the last position
var fixedCode = 'A1';

// Identify this question
var q1ID = {QID};
var thisQuestion = $('#question'+q1ID);

// Move the "fixed" row to the end
$('table.subquestion-list tbody', thisQuestion).append($('tr[id$="X'+q1ID+fixedCode+'"]'));

// Fix up the array row background colours
$('tr.answers-list', thisQuestion).each(function(i){
$(this).removeClass('array1 array2').addClass('array'+(2-(i%2)));
});

});
</script></syntaxhighlight>

'''Download sample survey:'''<br />
[[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:

[[File:random_336x179gif.gif]]

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)

[[File:Partially_Randomized_Answers_1.png]]

Implementation is as follows:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' li.answer-item').length;

// Place the last answer created at the end of the list
var answer = $( 'input[id$="X'+qID+ansCount+'"]');
var answerItem = $(answer).closest('li');
var answersList = $(answer).closest('ul');
$(answersList).append(answerItem);

});
</script></syntaxhighlight>

'''Download sample survey:'''<br />
[[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:

[[File:Random v2.50.png]]

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)

[[File:Random answers v2.50.png]]

==LimeSurvey version 2.06==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedAnswers" and "otherFixed" variables as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// The number of answers to be fixed at the end of the list
var fixedAnswers = 2;

// Set this to "true" if you want "Other" to be fixed in the last position
var otherFixed = false;

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' li.answer-item').length;
if($('#question'+qID+' input[type="text"]').length > 0) {
ansCount = ansCount -1
}

// Place the last n answers created at the end of the list
var fixedIndex = fixedAnswers - 1;
for (var i=0; i<fixedAnswers; i++) {
var answer = $( 'input[id$="X'+qID+(ansCount-fixedIndex)+'"]');
var answerItem = $(answer).closest('li');
var answersList = $(answer).closest('ul');
$(answersList).append(answerItem);
fixedIndex--;
}

// Handle "Other"
if(otherFixed == true && $('#question'+qID+' input[type="text"]').length > 0) {
var otherAnswer = $('#question'+qID+' input[type="text"]');
var otherAnswerItem = $(otherAnswer ).closest('li');
var otherAnswersList = $(otherAnswer ).closest('ul');
$(otherAnswersList).append(otherAnswerItem);
}
});
</script></syntaxhighlight>

<br /><br />
==LimeSurvey version 2.73.0:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedAnswers" and "otherFixed" variables as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// The number of answers to be fixed at the end of the list
var fixedAnswers = 2;

// Set this to "true" if you want "Other" to be fixed in the last position
var otherFixed = false;

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' .answer-item').length;
if($('#question'+qID+' input[type="text"]').length > 0) {
ansCount = ansCount -1
}

// Place the last n answers created at the end of the list
var fixedIndex = fixedAnswers - 1;
for (var i=0; i<fixedAnswers; i++) {
var answer = $('input[id^="answer"][id$="X'+qID+'s'+(ansCount-fixedIndex)+'"]');
var answerItem = $(answer).closest('.answer-item');
var answersList = $(answer).closest('.answers-list');
if($('#question'+qID).hasClass('multiple-opt')) {
answer = $('input[id^="answer"][id$="X'+qID+(ansCount-fixedIndex)+'"]');
answerItem = $(answer).closest('.answer-item').parent();
answersList = $(answer).closest('.subquestion-list');
}
$(answersList).append(answerItem);
fixedIndex--;
}

// Handle "Other"
if(otherFixed == true && $('#question'+qID+' input[type="text"]').length > 0) {
var otherAnswer = $('#question'+qID+' input[type="text"]');
var otherAnswerItem = $(otherAnswer ).closest('.answer-item');
var otherAnswersList = $(otherAnswer ).closest('.answers-list');
if($('#question'+qID).hasClass('multiple-opt')) {
otherAnswerItem = $(otherAnswer ).closest('.answer-item').parent();
otherAnswersList = $(otherAnswer ).closest('.subquestion-list');
}
$(otherAnswersList).append(otherAnswerItem);
}
});
</script></syntaxhighlight>

<br /><br />
==LimeSurvey version 3.x:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedAnswers" and "otherFixed" variables as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).on('ready pjax:scriptcomplete',function(){

// The number of answers to be fixed at the end of the list
var fixedAnswers = 2;

// Set this to "true" if you want "Other" to be fixed in the last position
var otherFixed = false;

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' .answer-item').length;
if($('#question'+qID+' input[type="text"]').length > 0) {
ansCount = ansCount -1
}
console.log(ansCount);

// Place the last n answers created at the end of the list
var fixedIndex = fixedAnswers - 1;
for (var i=0; i<fixedAnswers; i++) {
var answer = $('input[id^="answer"][id$="X'+qID+(ansCount-fixedIndex)+'"]');
var answerItem = $(answer).closest('.answer-item');
var answersList = $(answer).closest('ul');
$(answersList).append(answerItem);
fixedIndex--;
}

// Handle "Other"
if(otherFixed == true && $('#question'+qID+' input[type="text"]').length > 0) {
var otherAnswer = $('#question'+qID+' input[type="text"]');
var otherAnswerItem = $(otherAnswer ).closest('.answer-item');
var otherAnswersList = $(otherAnswer ).closest('ul');
$(otherAnswersList).append(otherAnswerItem);
}
});
</script></syntaxhighlight>

=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.

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

[[File:random_700x154.png]]

Implementation is as follows:
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])
#Create one or more List (dropdown) questions with sequential response codes. Set the [[Advanced question settings#random order|random_order question attribute]] to 1.
#In the source of the first question add the following onload function. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]])
#Replace the ID question at the end of the function call.

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Function to allow randomization of all answers
//except the last one in List/dropdown questions
function partRandDD(qID) {

// Find the last answer option
var ansCount = $( 'div#question' + qID + ' select option' ).length - 1;

// Place the last answer option at the end of the list
$( 'div#question' + qID + ' select option[value="' + ansCount + '"]' )
.appendTo($( 'div#question' + qID + ' select' ));
}

// Call the function with the qID (replace the qID eg. partRandDD(244))
partRandDD(qID);
//If you want to apply it to more questions on the same page simply add more calls with the appropriate IDs.
partRandDD(qID);
});
</script></syntaxhighlight>

=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)

[[File:random_700x154.png]]

Implementation is as follows:
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])
#Create one or more Multiple numerical input question with sequential response codes. Set the [[Advanced question settings#random order|random_order question attribute]] to 1.
#In the source of the first question add the following onload function. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]])
#Replace "SSSSS", "GG", "QQ" in the function call at the end with the survey ID, group ID and question ID respectively.
#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); ...)

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Function to allow randomization of all answers except the last one in multiple numeric input questions
function partRand(sID, gID, qID) {

// Find the number of answers
var ansCount = ''
$( 'div#question' + qID + ' div.answers li' ).each(function(i) {
ansCount = (i - 1);
});

// Place the last answer created at the end of the list - but before the first helping sum
$( 'li#javatbd' + sID + 'X' + gID + 'X' + qID + ansCount + '' ).insertBefore($( 'div#question' + qID + ' div.answers li.multiplenumerichelp' ).first());

}

// Call the function with the SID, GID and QID
partRand(SID, GID, QID);

});

</script></syntaxhighlight>

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 (<nowiki><ul></nowiki>) 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=

{{Hint|Text=With Expression manager, you can use [[Expression_Manager_Examples#Using_em_validation_q_in_array|Using em_validation_q in array]] system.}}

''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 [http://www.partnersinc.biz/surveys//index.php?sid=26842&newtest=Y&lang=en 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:
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions (see [[Optional settings#Security|documentation here]]).
#Create the array question.
#In the source of the array question add the following script (see [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]]).
#Modify the warningText (line10)as required.
#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.

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function () {

// Interrupt the submit function
$('form#limesurvey').submit(function () {

// Override the built-in "disable navigation buttons" feature
$('#moveprevbtn, #movenextbtn, #movesubmitbtn').attr('disabled', '');

var empty = 0;
var warningText = 'Please complete the highlighted inputs.';

// Call the mandatory row function with question IDs and row numbers
mandatoryRow(QQ, 1);
mandatoryRow(QQ, 3);

// A function to render rows of an array mandatory
function mandatoryRow(qID, rowNum) {

$('div#question' + qID + ' table.question tbody[id^="javatbd"]:eq(' + Number(rowNum - 1) + ') input[type="text"]').each(function (i) {

if ($(this).val() == '') {
$(this).css('background-color', 'pink');
empty = 1;
}
else {
$(this).css('background-color', '#FFFFFF');
}
});
}

if (empty == 1) {
alert(warningText);
return false;
}
else {
return true;
}
});

});

</script></syntaxhighlight>

=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|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:

<syntaxhighlight lang="javascript">

Please have a look at this picture:

<br />

<script>

$(document).ready(

function(){

// Find a random number (here between 1 and 4)

var randNumber = Math.floor(Math.random()*4 + 1);

// Save the number as answer of this question

$('input#answerSSSSSXGGXQQ').val(randNumber);

// Hide this answer field

document.getElementById("answerSSSSSXGGXQQ").style.display='none';

// Show the picture

picString = '<img src="pic/' + String(randNumber) + '.jpg">';

document.getElementById('pic').innerHTML = picString;

}

);</script>

<p>

</p>

<div id="pic">

</div>

</syntaxhighlight>

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):

<syntaxhighlight lang="javascript">

You saw picture number {INSERTANS:SSSSSXGGXQQ}.

</syntaxhighlight>

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:

<syntaxhighlight lang="javascript">

Here you see the picture again: <br>

<script>

$(document).ready(

function(){

// Get the picture number from previous question

var randNumber = "{INSERTANS:SSSSSXGGXQQ}";

// Show picture

picString = '<img width="100" height="100" src="pic/' + String(randNumber) + '.jpg">';

document.getElementById('pic').innerHTML = picString;

}

);</script>

<div id="pic">

</div>

</syntaxhighlight>

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

''Tested in 1.85+''

<div class="simplebox">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.</div>

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:

<syntaxhighlight lang="javascript">

<script type="text/javascript" charset="utf-8">

function Custom_On_Load(){

document.getElementById('answer1000X10X11').value='{TOKEN:ATTRIBUTE_1}';

document.getElementById('answer1000X10X11').readOnly=1;

}

</script>

</syntaxhighlight>

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:

<syntaxhighlight lang="javascript">

document.getElementById('question85').style.display='none';

document.getElementById('display85').value='';

</syntaxhighlight>

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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use script]].
#Create the array question.
#In the source of the array question add the following script.
#Replace"QQ" with the question ID and "CC" with the column number to be checked.

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// A function to pre-check a column of an array
function checkedDefault(qID, column) {
var checkedCol = column - 1;
$('#question'+qID+' tr.subquestions-list').each(function(i) {
if ($('input.checkbox:checked', this).length == 0) {
$('input.checkbox:eq('+checkedCol+')', this).prop('checked', true);
$('input.checkbox:eq('+checkedCol+')', this).parent().find('input[type="hidden"]').val(1);
}
});
}
// Call the function with a question ID and column number
checkedDefault(QQ, CC);
});

</script></syntaxhighlight>

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

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

'''Overview'''<br />
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:'''
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use script]].
#Create the array question.
#In the source of the array question add the following script.
#Adjust "''defaultAnsweredScale''" and "''defaultAnsweredColumn''" as necessary.

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Scale to set the default answer on
var defaultAnsweredScale = 2;
// Column of that scale to set as default answer
var defaultAnsweredColumn = 3;

// Identify this question
var thisQuestion = $('#question{self.qid}');

// Identify the scales and columns
$('.answer-item[class^="answer_cell_1"]', thisQuestion).addClass('scale-1-item');
$('.answer-item[class^="answer_cell_2"]', thisQuestion).addClass('scale-2-item');
$('tr.answers-list', thisQuestion).each(function(i) {
$('.scale-1-item', this).each(function(i) {
$(this).addClass('scale-1-column-'+(i+1)+'-item');
});
$('.scale-2-item', this).each(function(i) {
$(this).addClass('scale-2-column-'+(i+1)+'-item');
});
});

// Click the default answers
$('tr.answers-list', thisQuestion).each(function(i) {
if($('.scale-'+defaultAnsweredScale+'-item input[type="radio"]:checked', this).length == 0) {
$('.scale-'+defaultAnsweredScale+'-column-'+defaultAnsweredColumn+'-item input[type="radio"]:last', this).click();
}
});
});
</script></syntaxhighlight>

'''Download sample survey:'''<br />
[[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''

<div class="simplebox">As of version 1.92, group view time is accurately recorded in the timings table if you choose the Record Timings survey option.</div>

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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#In the group, create a short-text question. We will hide this later with JavaScript and populate it with the elapsed time.
#Place the following script in the source of the short-text question.
#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.

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

// call the functions with the hidden timer question ID

runTimer(QQ);

function runTimer(timeQID) {

$('#question'+timeQID).hide();

var initSec = '0';

// Check for elapsed time from previous visits

if ($('#question'+timeQID+' input.text').val()) {

var initTime = $('#question'+timeQID+' input.text').val();

initTimeArr = initTime.split(':');

initSec = Number[[initTimeArr[0]*3600]]+Number[[initTimeArr[1]*60]]+Number(initTimeArr[2]);

}

// Run the timer update function

recordTime(initSec, timeQID);

}

});

// Timer update function

function recordTime(elapsedSec, timeQID){

elapsedSec++;

var h = Math.floor(elapsedSec / 3600);

var m = Math.floor(elapsedSec % 3600 / 60);

var s = Math.floor(elapsedSec % 3600 % 60);

var elapsedTime = [[h > 0 ? h + ":" : "00:") + (m > 0 ? (m < 10 ? "0" : "") + m + ":" : "00:") + (s < 10 ? "0" : "") + s);

$('#question'+timeQID+' input.text').val(elapsedTime);

// Run the timer update function every second

setTimeout('recordTime('+elapsedSec+', '+timeQID+')',1000);

}

</script>

</syntaxhighlight>

=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 [http://www.partnersinc.biz/surveys//index.php?sid=33613&newtest=Y&lang=en demonstrated here].

Implementation is as follows:

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Set the survey to run in "all in one" mode.
#Add your groups and questions.
#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:

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

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

// Insert show/hide divs before all group wrapper divs
$('<div class="groupToggler"><span></span></div>').insertBefore('div[id^="group-"]');

// Add some text to the show/hide divs
$('.groupToggler span').each(function(i) {
($( this ).text('Show/Hide Group '+(i+1)+''));
});

// Add some styles to the show/hide divs
$('.groupToggler').css({
'padding':'5px 0 10px 0',
'text-align':'center'
});
$('.groupToggler span').css({
'text-decoration':'underline',
'cursor':'pointer'
});

// Add some hover effects to the show/hide divs
$(".groupToggler span").hover(
function () {
$(this).css({
'text-decoration':'none',
'font-weight':'bold'
});
},
function () {
$(this).css({
'text-decoration':'underline',
'font-weight':'normal'
});
}
);

// Initially hide all of the groups
// Toggle their visibility when the show/hide is clicked
$('.groupToggler span').click(function() {
$(this).parent().next().toggle();
return false;
}).parent().next().hide();

// Display any groups that have unanswered mandatories
$('.errormandatory').parents('div[id^="group-"]').show();

// Some tidying up
$('h1').next().next().hide();
$('.surveywelcome').css({
'margin-bottom':'10px'
});
$('.surveywelcome').next().hide();
$('.surveywelcome').next().next().hide();

});

</script></syntaxhighlight>

=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 [http://jqueryui.com/demos/autocomplete/ 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

<syntaxhighlight lang="css">/* Autocomplete styles */

ul.ui-autocomplete {
width: 250px !important;
padding: 5px 10px;
list-style: none;
}</syntaxhighlight>

'''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)

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var q1ID = 'QQ';

var states = "Alabama,Alaska,Arizona,Arkansas,California,Colorado,Connecticut,Delaware, District of Columbia,Florida,Georgia,Hawaii,Idaho,Illinois,Indiana,Iowa,Kansas,Kentucky, Louisiana,Maine,Montana,Nebraska,Nevada,New Hampshire,New Jersey,New Mexico,New York, North Carolina,North Dakota,Ohio,Oklahoma,Oregon,Maryland,Massachusetts,Michigan, Minnesota,Mississippi,Missouri,Pennsylvania,Rhode Island,South Carolina,South Dakota, Tennessee,Texas,Utah,Vermont,Virginia,Washington,West Virginia,Wisconsin,Wyoming".split(',');

$('#question'+q1ID+' input.text').autocomplete({
source: states
});

});

</script></syntaxhighlight>

'''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:

<syntaxhighlight lang="php"><?php

$countriesArr = array();

$file_handle = fopen("countries2.csv", "r");

while (!feof($file_handle) ) {
$line_of_text = fgetcsv($file_handle);
array_push($countriesArr, $line_of_text[0]);
}

fclose($file_handle);

echo json_encode($countriesArr);

?></syntaxhighlight>

JavaScript code:

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;
var url = "templates/yourTemplate/countries.php";
var dataArr = [];

$.getJSON(url,function(data){

$.each(data,function(i, item){
dataArr.push(item);
});

$('#question'+qID+' input.text').autocomplete({
source: dataArr
});

});

});

</script></syntaxhighlight>

<br />
== 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:'''
<ol><li>Download the jQuery Autocomplete widget</li>
<li>Add special autocomplete styling to the survey template (tested with the Skeletonquest template by Denis Chenu)</li>
</ol>

This workaround builds on the previous examples, but is updated for use with newer versions of LimeSurvey. Note that the [http://jqueryui.com/demos/autocomplete/ Autocomplete widget] is already included in LimeSurvey, as part of jQuery UI.

<br />
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.

<br />
'''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 [http://jqueryui.com/demos/autocomplete/ jQuery website] for example):

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 1;

$('#question'+qID+' input[type="text"]').autocomplete({
minLength: 2, // This line is optional, signifies number of keystrokes before autocomplete is initiated
source: ["Test1","Test2","Test3"]
});

});

</script>
</syntaxhighlight>

<br />
'''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:
<ol><li>A comma-separated data file (CSV)</li>
<li>The [https://code.google.com/p/jquery-csv/ jquery.csv.js plugin] (v0.71)</li>
</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 <strong>before</strong> {TEMPLATEJS}.

<syntaxhighlight lang="html5">
<script type="text/javascript" src="{TEMPLATEURL}jquery.csv.js"></script>
</syntaxhighlight>

<br />
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 <strong>semicolon</strong>, 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:

<syntaxhighlight lang="javascript">
41 $.csv = {
42 defaults: {
43 separator:',', // Change this to: separator:';',
44 delimiter:'"',
45 headers:true
46 },
</syntaxhighlight>

<br />
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:

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 1;

var surveyRoot = location.pathname.split('index.php')[0];
var url = surveyRoot+'datafile.csv';

// Create an array to hold the data
var testArr = new Array();

// Grab the CSV contents
$.get(url,function(data){

// Convert CSV contents to an array of arrays
fullArray = $.csv.toArrays(data);

// Load the data array
$(fullArray).each(function(i, item){
testArr.push(item[0]);
});

// Initialise the autocomplete plugin
$('#question'+qID+' input.text').autocomplete({
source: testArr
});

// console.log(data); This would be a gould place to put your debugging script. Remember to comment out or remove before going into production, to economize on server workload
});
});

</script>
</syntaxhighlight>

<br />
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 <strong>console.log(data);</strong> 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.

<br />
'''3. Input from a MySQL database (trickiest, but also the most versatile and secure).'''
<br />This method requires the following:
<ol><li>Access to a MySQL database (tested with MySQL 5.5)</li>
<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):
<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 1;

$('#question'+qID+' input[type="text"]').autocomplete({
minLength: 2, // This line is optional, signifies number of keystrokes before autocomplete is initiated
source: 'autocomplete.php'
});

});

</script>
</syntaxhighlight>

<br />
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:

<syntaxhighlight lang="php">
<?php
// Login credentials
define('DB_SERVER', "localhost");
define('DB_USER', "username");
define('DB_PASSWORD', "password");
define('DB_DATABASE', "database_name");
define('DB_DRIVER', "mysql");
?>
</syntaxhighlight>

<br />
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):

<syntaxhighlight lang="php">
<?php

// Connect and query MySQL database, using PDO
try {
$db = new PDO(DB_DRIVER . ":dbname=" . DB_DATABASE . ";host=" . DB_SERVER . ";charset=utf8", DB_USER, DB_PASSWORD);
}

catch(PDOException $e) {
echo $e->getMessage();
}

$return_arr = array();

if ($db)
{
$ac_term = "%".$_GET['term']."%";
$query = "SELECT * FROM table_name WHERE column_name LIKE :term";
$result = $db->prepare($query);
$result->bindValue(":term",$ac_term);
$result->execute();

// Fetch data and store in array
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
$row_array['label'] = $row['column_name'];
$row_array['value'] = $row['column_name'];

array_push($return_arr,$row_array);
}
}
</syntaxhighlight>

<br />
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:

<syntaxhighlight lang="php">
<?php

// Include files outside of webroot
set_include_path('/var/www/surveys/test-survey');

// Fetch database credentials
require_once ('constant.php');

// Connect to database and perform query
require_once ('database.php');

// Clear query
$db = null;

// Encode results in JSON. This is required for jquery autocomplete
echo json_encode($return_arr);

?>
</syntaxhighlight>

<br />
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.
<br />

== Use autocomplete to populate several fields==

''Tested with: 1.91+, IE 7/8/9, Firefox 18''

This workaround uses the [http://jqueryui.com/demos/autocomplete/ Autocomplete widget] included with jQuery UI and the [https://code.google.com/p/jquery-csv/downloads/list 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 [https://code.google.com/p/jquery-csv/downloads/list 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<syntaxhighlight lang="php"><script type="text/javascript" src="{TEMPLATEURL}jquery.csv.js"></script></syntaxhighlight>
*Create your CSV file with 3 columns (name, ID, email) as in this example and place it in your template folder<syntaxhighlight lang="php">Bob, Bob's ID, Bob's email

Andy, Andy's ID, Andy's email

Sam, Sam's ID, Sam's email

Tony, Tony's ID, Tony's email

Fred, Fred's ID, Fred's email</syntaxhighlight>
*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<syntaxhighlight lang="php">/* Autocomplete styles */

ul.ui-autocomplete {

width: 250px !important;

padding: 5px 10px;

list-style: none;

}</syntaxhighlight>
*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<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qNameID = NN;

var qIDID = II;

var qEmailID = EE;

var url = "upload/templates/yourTemplate/yourCsvFile.csv";

// Create an array to hold the names
var namesArr = new Array();

// Grab the CSV contents
$.get(url,function(data){

// Convert CSV contents to an array of arrays
fullArray = $.csv.toArrays(data);

// Load the names array
$(fullArray).each(function(i, item){
namesArr.push(item[0]);
});

// Initialise the autocomplete plugin
$('#question'+qNameID+' input.text').autocomplete({
source: namesArr,
// Event fired when a selection is made (ui.item.value refers to the selected item)
select: function(event, ui) {
// Find the "ID" and "Email" values associated with the selected name value and load those questions
$(fullArray).each(function(i, item){
if(item[0] == ui.item.value) {
// The value from column 2 of the CSV
$('#question'+qIDID+' input.text').val(item[1]);
// The value from column 3 of the CSV
$('#question'+qEmailID+' input.text').val(item[2]);
}
});
}
});
});
});

</script></syntaxhighlight>

=Create MaxDiff question type=

See the [[Workarounds: Question design, layout and templating|Question design, layout and templating]] section for a workaround that uses JavaScript to convert an '''''Array (flexible labels) by column''''' question into a [http://en.wikipedia.org/wiki/MaxDiff MaxDiff] question type.

[[File:max_diff_596x253.gif]]

=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.

<syntaxhighlight lang="php">

<script>

numColumns=13;

numRows=18;

questionId='28417X2X24';

specialColumns=[1,12,13];

function action(obj){

locator=obj.id.replace('cbox_'+questionId, '').split('_');

row=locator[0];

column=locator[1];

//alert('Action for row,column='+row+','+column);

my_id='#cbox_'+questionId+row+'_'+column+''

if($(my_id).attr('checked') == false) {

for( var i=1; i<=numColumns; i++ ) {

if(i==column) continue;

id='#cbox_'+questionId+row+'_'+i

$(id).attr('disabled',false);

}

} else {

for( var i=1; i<=numColumns; i++ ) {

if(i==column) continue;

id='#cbox_'+questionId+row+'_'+i

aid='#answer'+questionId+row+'_'+i

$(aid).val(0);

$(id).attr('checked',false);

$(id).attr('disabled',true);

}

}

}

function customOnLoad(){

for( var row=1; row<=numRows; row++ ) {

for( var k=0; k<specialColumns.length; k++ )

{

column=specialColumns[k];

$('#cbox_'+questionId+row+'_'+column).change(function() {

action(this);

});

}

}

}

jQuery(document).ready(

function(){

customOnLoad();

}

);

</script>

</syntaxhighlight>

=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:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following script in the source of the array question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Call the exclude function using question ID
excludeOpt({QID});
});

// A function to make the last option in each array row exclusive
function excludeOpt (qID) {

var thisQuestion = $('#question'+qID)

// Add some classes to the checkbox cells
$('td.checkbox-item', thisQuestion).addClass('normalOpt');
$('tr.subquestions-list', thisQuestion).each(function(i) {
$('.normalOpt:last', this).removeClass('normalOpt').addClass('exlusiveOpt')
});

// A listener on the checkbox cells
$('td.checkbox-item', thisQuestion).click(function (event) {
handleExclusive($(this));
});

// A listener on the checkboxes
$('td.checkbox-item input[type="checkbox"]', thisQuestion).click(function (event) {
handleExclusive($(this).closest('td'));
});

function handleExclusive(thisCell) {

var thisRow = $(thisCell).closest('tr');

// Uncheck the appropriate boxes in a row
if ($(thisCell).hasClass('normalOpt')) {
$('.exlusiveOpt input[type="checkbox"]', thisRow).attr('checked', false);
}
else {
$('.normalOpt input[type="checkbox"]', thisRow).attr('checked', false);
}

// Check conditions (relevance)
$('td.checkbox-item', thisRow).each(function(i) {
var thisValue = '';
if($('input[type="checkbox"]', this).is(':checked')) {
thisValue = 1;
}
var thisSGQA = $('input[type="checkbox"]', this).attr('id').replace(/cbox_/, '');

$('input[type="hidden"]', this).attr('value', thisValue);
fixnum_checkconditions(thisValue, thisSGQA, 'hidden');
});
}
}
</script></syntaxhighlight>

==Implementation LS Version 3.x:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following script in the source of the array question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){

var thisQuestion = $('#question{QID}')

// Add some classes to the checkbox cells
$('td.checkbox-item:last-child', thisQuestion).addClass('exclusive-item');

// A function to un-check boxes
function resetCheckbox(thisItem) {
$(':hidden', thisItem).val('');
$(':checkbox', thisItem).prop('checked', false).trigger('change');
}

// A listener on the checkboxes
$(':checkbox', thisQuestion).on('change', function(e) {
if($(this).is(':checked')) {
var thisItem = $(this).closest('.answer-item');
var thisRow = $(this).closest('tr');
var items = $('td.answer-item.exclusive-item', thisRow);
if($(thisItem).hasClass('exclusive-item')) {
items = $('td.answer-item:not(.exclusive-item)', thisRow);
}
$.each(items, function(i, el) {
resetCheckbox(el);
});
}
});
});
</script></syntaxhighlight>

=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.

<syntaxhighlight lang="javascript">
$(document).ready(function() {

// Insert a new div after the progress bar
$('<div id="navigator2" />').insertAfter('#progress-wrapper');

// Style the new div
$('#navigator2').css({
'text-align':'center'
});

// Insert clones of the nav buttons in the new div
$('input.submit:eq(0)').clone().appendTo('#navigator2');
$('input.submit:eq(2)').clone().appendTo('#navigator2');

// Give the new buttons some new IDs
$('#navigator2 input.submit').each(function(i) {
var oldID = $(this).attr('id');
var newID = oldID + '2';
$(this).attr('id', newID)
});
});</syntaxhighlight>

[[File:extra_buttons.png]]

=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.

[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|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.

<syntaxhighlight lang="php"> <script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Find the survey ID
if($('input#fieldnames').length != 0) {
var fieldNames = $('input#fieldnames').attr('value');
var tmp = fieldNames.split('X');
var sID = tmp[0];
}

// Insert a new div after the progress bar
$('<div id="optOutLink" />').insertBefore('#progress-wrapper');

// Style the new div
$('#optOutLink').css({
'text-align':'center'
});

// Insert opt out url in the new div
$('#optOutLink').html('<p><a href="optout.php?lang=en&sid;='+sID+'&token;={TOKEN}">Click here to opt out of this survey.</a></p><br>');

});

</script></syntaxhighlight>

=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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following code in the source of a short text question.
#Optional: you can also add other select field to avoid collisions (e.g. for large population sample)

<syntaxhighlight lang="php">

<p>This answers are used to generate your ID. These information will be encrypted, it will not be possible in any case to identify you neither from your answers nor from your ID.</p>

<table>

<tr>

<td>Initial of your name</td>

<td>

<select id="field1">

<option value=""></option>

<option value="A">A</option>

<option value="B">B</option>

<option value="C">C</option>

<option value="D">D</option>

<option value="E">E</option>

<option value="F">F</option>

<option value="G">G</option>

<option value="H">H</option>

<option value="I">I</option>

<option value="J">J</option>

<option value="K">K</option>

<option value="L">L</option>

<option value="M">M</option>

<option value="N">N</option>

<option value="O">O</option>

<option value="P">P</option>

<option value="Q">Q</option>

<option value="R">R</option>

<option value="S">S</option>

<option value="T">T</option>

<option value="U">U</option>

<option value="V">V</option>

<option value="W">W</option>

<option value="X">X</option>

<option value="Y">Y</option>

<option value="Z">Z</option>

</select>

</td>

</tr>

<tr>

<td>Your birth month</td>

<td>

<select id="field2">

<option value=""></option>

<option value="01">January</option>

<option value="02">February</option>

<option value="03">March</option>

<option value="04">April</option>

<option value="05">May</option>

<option value="06">June</option>

<option value="07">July</option>

<option value="08">August</option>

<option value="09">September</option>

<option value="10">October</option>

<option value="11">November</option>

<option value="12">December</option>

</select>

<td>

</tr>

</table>

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

<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);

}

});

</script>

</syntaxhighlight>

=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.

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Call the phone function with the question ID and the row number

phoneTest(QQ, NN);

function phoneTest(qID, inputNum) {

// Interrupt next/submit function

$('#movenextbtn, #movesubmitbtn').click(function(){

// Some vars - modify as required

var phoneMatch = /^[0-9,+,(), ,]{1,}(,[0-9]+){0,}$/;

var msg1 = 'Please enter a valid phone number.';

// Test the input

var phoneInput = $('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val();

if(phoneInput != '' && !phoneMatch.test(phoneInput)) {

alert(msg1);

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'pink' });

return false;

}

else {

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'' });

return true;

}

});

}

});

</script>

</syntaxhighlight>

The regex is from: [http://www.regexlib.com/REDetails.aspx?regexp_id=1136 regexlib.com blank]

=Check validity of email address in subquestion=

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

<div class="simplebox">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.<br />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</div>

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.

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Call the email function with the question ID and the row number

emailTest(QQ, NN);

function emailTest(qID, inputNum) {

// Interrupt next/submit function

$('#movenextbtn, #movesubmitbtn').click(function(){

// Some vars - modify as required

var emailMatch = /^[a-zA-Z0-9\_\-]+[a-zA-Z0-9\.\_\-]*@([a-zA-Z0-9\_\-]+\.)+([a-zA-Z]{2,4}|travel|museum)$/;

var msg1 = 'Please enter a valid email address.';

// Test the input

var emailInput = $('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val();

if(emailInput != '' && !emailMatch.test(emailInput)) {

alert(msg1);

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'pink' });

return false;

}

else {

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'' });

return true;

}

});

}

});

</script>

</syntaxhighlight>

The regex is from: [http://www.regexlib.com/REDetails.aspx?regexp_id=1653 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:

<syntaxhighlight lang="php">

<script type="text/javascript">

var questionhelp="{QUESTIONHELP}";

if (questionhelp=="") {

document.write("");}

else {

document.write('<tr><td class="survey-question-help">'+ questionhelp +'</td></tr>');}

</script>

</syntaxhighlight>

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)

[[File:snap035.gif]]

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.

[[File:snap037.gif]]

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!

<syntaxhighlight lang="javascript">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('input[name="69965X2X10SQ001_SQ001"]').attr('disabled', 'disabled');

$('input[name="69965X2X10SQ001_SQ002"]').attr('hidden', 'hidden');

});

</script>

</syntaxhighlight>

[[File:snap039.gif]]

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.

[[File:suffix.png]]

Fig. 1: Suffix

[[File:prefix.png]]

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 €" suffix in the first column and an "in %" in the next 3 columns.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Call the function with the question ID followed by a comma-separated list of suffixes

addSuffix(12345, 'in €', 'in %', 'in %', 'in %');

function addSuffix() {

var qID = $(arguments)[0];

// Assign some column-specific classes

$('#question'+qID+' table.question tbody tr').each(function(i){

$('td', this).each(function(i){

$(this).addClass('answerCol-'+(i+1)+'');

});

});

// Some styling

$('#question'+qID+' table.question tbody input[type="text"]').css({

'width': '50%'

});

// Insert the suffixes

$(arguments).each(function(i, val){

if(i > 0) {

$('#question'+qID+' td.answerCol-'+i+' label').append(val);

}

});

}

});

</script></syntaxhighlight>

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

<syntaxhighlight lang="php">$('#question'+qID+' td.answerCol-'+i+' label').append(val);</syntaxhighlight>

with this

<syntaxhighlight lang="php">$('#question'+qID+' td.answerCol-'+i+' label').prepend(val);</syntaxhighlight>

=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:
#Download the file at [http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js] and upload it to your survey.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following code in the source of a short text question.

<syntaxhighlight lang="javascript">
<script src="/upload/surveys/{SID}/jquery-ui-timepicker-addon.js"></script>

<script>

$(document).ready(function(){

$('#answer{SGQ}').timepicker({
timeText: 'Time', //here translation
hourText: 'hour', //here translation
minuteText: 'minute', //here translation
closeText: 'Done' //here translation
});

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

$( "<style>"
+".ui-widget-header, .ui-datepicker-current { display:none; }"
+".ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }"
+".ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }"
+" }"
+"</style>").appendTo( "head" );

});

</script></syntaxhighlight>

=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 [http://ditio.net/2010/05/02/javascript-date-difference-calculation/ 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.

<syntaxhighlight lang="php">

<script type="text/javascript">

/*

Adapted from http://ditio.net/2010/05/02/javascript-date-difference-calculation/
*/

var DateDiff = {

inDays: function(d1, d2) {

var t2 = d2.getTime();

var t1 = d1.getTime();

return parseInt[[t2-t1)/(24*3600*1000]];

},

inWeeks: function(d1, d2) {

var t2 = d2.getTime();

var t1 = d1.getTime();

return parseInt[[t2-t1)/(24*3600*1000*7]];

},

inMonths: function(d1, d2) {

var d1Y = d1.getFullYear();

var d2Y = d2.getFullYear();

var d1M = d1.getMonth();

var d2M = d2.getMonth();

return (d2M+12*d2Y)-(d1M+12*d1Y);

},

inYears: function(d1, d2) {

return d2.getFullYear()-d1.getFullYear();

}

}

d1 = new Date({substr(DD,0,4)}, {substr(DD,5,2)}, {substr(DD,8,2)});

d2 = new Date({substr(D2,0,4)}, {substr(D2,5,2)}, {substr(D2,8,2)});

// Displays result

document.write("<br />Number of <b>days</b>: "+DateDiff.inDays(d1, d2));

document.write("<br />Number of <b>weeks</b>: "+DateDiff.inWeeks(d1, d2));

document.write("<br />Number of <b>months</b>: "+DateDiff.inMonths(d1, d2));

document.write("<br />Number of <b>years</b>: "+DateDiff.inYears(d1, d2));

// filled the numerical input with number of days (or nights)

var nDays = +DateDiff.inDays(d1, d2);

jQuery(document).ready(function() {

$(".numeric:eq(0) input.text").val(nDays);

$(".numeric:eq(0) input.text").attr('readonly','readonly');

// check if d2 > d1

$('#movenextbtn').hide();

$('#movesubmitbtn').hide();

if(nDays >= 0){

// automatic submit (uncomment if needed)

// document.limesurvey.submit();

// $('body').hide();

}

else alert("Check out date must be posterior than Check in\nPlease return to the previous page and edit your answers");

});

</script>

</syntaxhighlight>

=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.

<syntaxhighlight lang="php">
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
'use strict';
var qID1 = QQ1,
qID2 = QQ2,
q1 = $('#question' + 'QQ1' + ' .popupdate'),
q2 = $('#question' + 'QQ2' + ' .popupdate');

//if q1 loses focus, its value is taken and used as minDate in q2
q1.datepicker("option", "onClose", function (datum){
q2.datepicker( "option", "minDate", datum );
});
//q2 gets today as its maxDate
q2.datepicker( 'option', 'maxDate', new Date() );
});
</script>
</syntaxhighlight>

=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}.

<syntaxhighlight lang="javascript">
<tr><td class="survey-question-help" id=help_{QUESTION_NUMBER}>{QUESTIONHELP}</td></tr>
</syntaxhighlight>

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.

<syntaxhighlight lang="javascript">
<script>
$(document).ready(function(){
if($('#help_{QUESTION_NUMBER}').is(':empty')){
$('#help_{QUESTION_NUMBER}').hide();
}
});
</script>
</syntaxhighlight>

= 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.<br /><br />

[[File:Iat_1.png]]<br /><br />

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

Implementation is as follows:

1) [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].

2) Create your Array (Texts) with subquestions as follows:<br />
- Y scale - all of your "attribut" words or phrases<br />
- X scale - "Key Pressed" and "Elapsed Time (ms)"<br />
[[File:Iat_2.jpg]]

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:<br />
- Left association term<br />
- Right association term<br />
- Instructional text<br />
- Finished text<br />
[[File:Iat_3.png]]

4) Add the following to the end of template.js:<syntaxhighlight lang="javascript">
// A plugin to insert an IAT interface
function implicitAssociation(el, showAnswers) {

$(el).each(function() {

var thisQuestion = $(this);
var thisQuestionHelp = $('img[src$="help.gif"]', thisQuestion).parent();
var thisQuestionAnswers = $('table.question', thisQuestion).parent();
var startTime = '';
var endTime = '';
var agent = navigator.userAgent.toLowerCase();
var mobile = false;
if( /android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent) ) { // Mobile devices
mobile = true;
}

// Some classes
$(thisQuestion).addClass('iatQuestion');
$('.subquestion-list').addClass('unanswered');

// Hide the question help element
$(thisQuestionHelp).hide();

// Hide the answers
if(showAnswers != true) {
$('table.question', thisQuestion).hide();
}

// Insert IAT display
var iatTexts = $(thisQuestionHelp).text().split('||');
var iatDisplayHTML = '<div class="iatWrapper">\
<div class="iatLeftLabel">'+iatTexts[0]+'</div>\
<div class="iatRightLabel">'+iatTexts[1]+'</div>\
<div class="iatWord"></div>\
<div class="iatInstructions">'+iatTexts[2]+'</div>\
</div>\
<div class="iatMobileButtonWrapper">\
<div class="iatButton iatLeftButton">E</div>\
<div class="iatButton iatRightButton">I</div>\
<div style="width:100%; clear:both;"></div>\
</div>';
$(thisQuestionAnswers).prepend(iatDisplayHTML);

// Show a word
function iatShowWord() {
$('div.iatWord', thisQuestion).text($('.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$(document).bind('keypress.iatKeypress', function(e) {
if(e.which == 101 || e.which == 105) {
var thisRow = $('.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
if(e.which == 101) {
$('input[type="text"]:eq(0)', thisRow).val('E');
}
else {
$('input[type="text"]:eq(0)', thisRow).val('I');
}
$(document).unbind('keypress.iatKeypress');
if($('.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWord();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
}
});
}
function iatShowWordMobile() {
$('div.iatWord', thisQuestion).text($('.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$('.iatButton', thisQuestion).bind('click.iatButtonClick', function(e) {
var thisRow = $('.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
$('input[type="text"]:eq(0)', thisRow).val($(this).text());
$('.iatButton', thisQuestion).unbind('click.iatButtonClick');
if($('.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWordMobile();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions, .iatMobileButtonWrapper', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
});
}

// Start the IAT display
if(mobile == true) { // Mobile devices
$('.iatMobileButtonWrapper', thisQuestion).show();
$('.iatButton', thisQuestion).bind('click.iatStartMobile', function(e) {
$('.iatButton', thisQuestion).unbind('click.iatStartMobile');
iatShowWordMobile();
});
}
else {
$(document).bind('keypress.iatStart', function(e) { // Non-mobile devices
if(e.which == 101 || e.which == 105) {
$(document).unbind('keypress.iatStart');
iatShowWord();
}
});
}
});
} </syntaxhighlight>

<br />5) Add the following to the end of template.css:<syntaxhighlight lang="css">
/* IAT questions */

.iatWrapper {
position: relative;
width: 600px;
height: 300px;
color: #FFFFFF;
background-color: #000000;
font-size: 21px;
}

.iatLeftLabel {
float: left;
padding: 10px;
}

.iatRightLabel {
float: right;
padding: 10px;
}

.iatWord {
position: absolute;
width: 100%;
top: 35%;
text-align: center;
font-size: 36px;
color:#0F0;
}

.iatWord.done {
color:#FFFFFF;
}

.iatInstructions {
position: absolute;
width: 100%;
bottom: 0px;
padding-bottom: 10px;
text-align: center;
}

.iatMobileButtonWrapper {
display: none;
position: relative;
width: 600px;
font-size: 36px;
}

.iatButton {
float: left;
margin: 20px;
width: 100px;
padding: 2px 0 5px 0;
border: 5px solid #999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
text-align: center;
line-height: normal;
cursor: pointer;
}

.iatLeftButton {
float: left;
}

.iatRightButton {
float: right;
}</syntaxhighlight>

<br />6) To apply the plugin, add one of the two scripts below to the question source:<br />
- With hidden answer table (for normally activated survey)
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}');
});
</script></syntaxhighlight>
- With visible answer table (for testing purposes)
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}', true);
});
</script></syntaxhighlight>

== 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.<br /><br />

[[File:Demo_iat_v250.png]]<br /><br />

'''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''':
<ol>
<li>[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].</li>
<li>Create your Array (Texts) with subquestions as follows:
<ul>
<li>Y scale - all of your "attribute" words or phrases</li>
<li>X scale - "Key Pressed" and "Elapsed Time (ms)"<br />[[File:Demo_iat_v250_2.png]]</li>
</ul>
</li>
<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>
<li>Left association term</li>
<li>Right association term</li>
<li>Instructional text</li>
<li>Finished text<br />[[File:Demo_iat_v250_3.png]]</li>
</ul>
</li>
<li>Add the following to the end of template.js:<syntaxhighlight lang="javascript">// A plugin to insert an IAT interface
function implicitAssociation(el, showAnswers) {

$(el).each(function() {

var thisQuestion = $(this);
var thisQuestionHelp = $('div.question-help', thisQuestion);
var thisQuestionAnswers = $('table.subquestion-list', thisQuestion).parent();
var startTime = '';
var endTime = '';
var agent = navigator.userAgent.toLowerCase();
var mobile = false;
if( /android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent) ) { // Mobile devices
mobile = true;
}

// Some classes
$(thisQuestion).addClass('iat-question');
$('tr.subquestion-list', thisQuestion).addClass('unanswered');

// Hide the question help element
$(thisQuestionHelp).hide();
$(thisQuestionHelp).closest('.question-help-container').hide();

// Hide the answers
if(showAnswers != true) {
$('table.subquestion-list', thisQuestion).hide();
}

// Insert IAT display
var iatTexts = $(thisQuestionHelp).text().split('||');
var iatDisplayHTML = '<div class="iatWrapper">\
<div class="iatLeftLabel">'+iatTexts[0]+'</div>\
<div class="iatRightLabel">'+iatTexts[1]+'</div>\
<div class="iatWord"></div>\
<div class="iatInstructions">'+iatTexts[2]+'</div>\
</div>\
<div class="iatMobileButtonWrapper">\
<div class="iatButton iatLeftButton">E</div>\
<div class="iatButton iatRightButton">I</div>\
<div style="width:100%; clear:both;"></div>\
</div>';
$(thisQuestionAnswers).prepend(iatDisplayHTML);

// Show a word
function iatShowWord() {
$('div.iatWord', thisQuestion).text($('tr.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$(document).bind('keypress.iatKeypress', function(e) {
if(e.which == 101 || e.which == 105) {
var thisRow = $('tr.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
if(e.which == 101) {
$('input[type="text"]:eq(0)', thisRow).val('E');
}
else {
$('input[type="text"]:eq(0)', thisRow).val('I');
}
$(document).unbind('keypress.iatKeypress');
if($('tr.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWord();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
}
});
}
function iatShowWordMobile() {
$('div.iatWord', thisQuestion).text($('tr.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$('.iatButton', thisQuestion).bind('click.iatButtonClick', function(e) {
var thisRow = $('tr.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
$('input[type="text"]:eq(0)', thisRow).val($(this).text());
$('.iatButton', thisQuestion).unbind('click.iatButtonClick');
if($('tr.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWordMobile();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions, .iatMobileButtonWrapper', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
});
}

// Start the IAT display
if(mobile == true) { // Mobile devices
$('.iatMobileButtonWrapper', thisQuestion).show();
$('.iatButton', thisQuestion).bind('click.iatStartMobile', function(e) {
$('.iatButton', thisQuestion).unbind('click.iatStartMobile');
iatShowWordMobile();
});
}
else {
$(document).bind('keypress.iatStart', function(e) { // Non-mobile devices
if(e.which == 101 || e.which == 105) {
$(document).unbind('keypress.iatStart');
iatShowWord();
}
});
}
});
}</syntaxhighlight>
</li>
<li>Add the following to the end of template.css:<syntaxhighlight lang="css">/* IAT questions */

.iatWrapper {
position: relative;
width: 100%;
max-width: 600px;
height: 300px;
margin: 0 auto;
color: #D0DBE5;
background-color: #2C3E50;
font-size: 21px;
}

.iatLeftLabel {
float: left;
padding: 10px;
}

.iatRightLabel {
float: right;
padding: 10px;
}

.iatWord {
position: absolute;
width: 100%;
top: 35%;
text-align: center;
font-size: 36px;
color: #C4D1DE;
}

.iatWord.done {
color: #C4D1DE;
}

.iatInstructions {
position: absolute;
width: 100%;
bottom: 0px;
padding-bottom: 10px;
text-align: center;
}

.iatMobileButtonWrapper {
display: none;
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
font-size: 36px;
}

.iatButton {
float: left;
margin: 20px;
width: 100px;
padding: 2px 0 5px 0;
border: 5px solid #233140;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
text-align: center;
line-height: normal;
cursor: pointer;
}

.iatLeftButton {
float: left;
}

.iatRightButton {
float: right;
}</syntaxhighlight>
</li>
<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)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}');
});
</script></syntaxhighlight>
</li>
<li>With visible answer table (for testing purposes)
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}', true);
});
</script></syntaxhighlight>
</li>
</ul>
</li>
</ol>

== Version 3.x ==

Here is a custom question theme for an Implicit Association Test (IAT) in version 3.x - https://github.com/tpartner/LimeSurvey-Implicit-Association-Test

=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

<syntaxhighlight lang="javascript">
<script type="text/javascript">

/**
* Small script that adds a "X" before a checkbox.
* On click the text color of the label of the checkbox turns grey
* If the user has to choose some answers from many options, he can "delete" answers, that on first sight looks wrong
* Add the script to the question in Limesurvey (for example within the source code of the help text)
*/

//Define the X (standard is a X in capitals)
var x = "X";
css_class = "x";

/*
* Define the style of the X
* Of course you can define the style in the stylesheet - if so, the script ignores the following settings
* If there is a style, than set style var to 1
*/
var style = 0;
var size = "12px";
var weight = "bold";
var color = "red";
var cursor = "pointer";

//element type - standard is a span element
var type = "span";

//Define the new font color of the checkbox label
label_color = "#bfbfbf";

//End of configuration - start of the function

//Define the element that is added
if(style == 1) {
ele = "<"+type+" class='"+css_class+"'>"+x+"</"+type+">";
}
else {
ele = "<"+type+" class='"+css_class+"' style='font-size:"+size+"; font-weight:"+weight+"; color:"+color+"; cursor:"+cursor+";'>"+x+"</"+type+">";
}

//Get the standard font-color of the used style
st_color = $("label").css("color");

//insert the X before the checkboxes
$(document).ready(function() {
$("li").each(function(){
$(this).prepend(ele);
});
});

//bind an eventhandler on the X (delegate is used, because Limesurvey uses an old jQuery version)
var css_class_c = "."+css_class;
$(document).delegate(css_class_c,"click",function() {
var color_check = $(this).siblings("label").data("color");
if(color_check != "true") {
$(this).siblings("label").css("color",label_color).data("color","true");
$(this).siblings('input').attr('checked', false);

}
else {
$(this).siblings("label").css("color",st_color).data("color","false");

}
});

$(".checkbox").click(function () {
$(this).siblings("label").css("color",st_color).data("color","false");
});

</script>
</syntaxhighlight>

=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:

<syntaxhighlight lang="javascript">$(document).ready(function(){
$('input').keypress(
function(event){
if (event.which == '13') {
event.preventDefault();
}
});
});</syntaxhighlight>

= 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.<br /><br />

[[File:Card_sort_1.png]]<br /><br />

'''DOWNLOADS:'''<br />
- [[Media:Card_Sort.zip|Demo template]]<br />
- [[Media:Card_Sort.lss|Demo survey]].

'''IMPLEMENTATION:'''

1) [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|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:<syntaxhighlight lang="javascript">
function cardSort(qID) {

// Define some stuff...
var thisQuestion = $('#question'+qID);
var thisQuestionHelp = $('img[alt="Help"]', thisQuestion).parent();
thisQuestion.addClass('card-sort-question');

// Hide the "Help" section
thisQuestionHelp.hide();

//Insert the "card sort" elements
$('ul.questions-list', thisQuestion).parent().prepend('<div class="droppable items-start"></div><div class="items-end-wrapper" />');
$('ul:eq(0) li', thisQuestionHelp).each(function(i) {
$('.items-end-wrapper', thisQuestion).append('<div class="items-end-inner">\
<div class="items-end-text">'+$(this).html()+'</div>\
<div class="droppable items-end items-end-'+(i+1)+'" data-items-end="'+(i+1)+'"></div>\
</div>')});

// Insert the "cards"
$('li.answer-item', thisQuestion).each(function(i) {
var thisSGQA = $(this).attr('id').replace(/javatbd/, '');
var thisCode = $(this).attr('id').split('X'+qID)[1];
var thisHTML = $('label', this).html();
$('div.items-start').append('<div class="card draggable" data-sgqa="'+thisSGQA+'" data-code="'+thisCode+'">\
'+thisHTML+'\
</div>');
});

// Make the "cards" draggable
$('.draggable').draggable({
revert: "invalid",
zIndex: 2700,
helper: 'original',
start: function( event, ui ) {
$(ui.helper).addClass('ui-draggable-helper');
},
stop: function( event, ui ) {
}
});

// Set the targets for the draggables
$('.droppable.items-start').droppable({
hoverClass: 'target-hover',
accept: '.draggable.moved'
});
$('.droppable.items-end').droppable({
hoverClass: 'target-hover',
accept: '.draggable'
});

// After dropped
$('.droppable').bind('drop', function(event, ui) {

// Physically move the draggable to the target
// (the plugin just visually moves it)
// (need to use a clone here to fake out iPad)
var newDraggable = $(ui.draggable).clone();
$(newDraggable).appendTo(this);
$(ui.draggable).remove();
if($(this).hasClass('items-end')) {
$(newDraggable).addClass('moved');
}
else {
$(newDraggable).removeClass('moved');
}
$(newDraggable).removeClass('ui-draggable-helper ui-draggable-dragging').css({
'z-index':'',
'top':'auto',
'left':'auto'
});

// Now, make this new clone draggable
$(newDraggable).draggable({
revert: "invalid",
zIndex: 2700,
helper: 'original',
start: function( event, ui ) {
$(ui.helper).addClass('ui-draggable-helper');
},
stop: function( event, ui ) {
}
});
});

// Initial "card" positions
$('li.question-item input.text', thisQuestion).each(function(i) {
if($(this).val() > 0) {
$('.items-end[data-items-end="'+$(this).val()+'"]').append($('.card[data-sgqa="'+$(this).attr('name')+'"]'));
$('.card[data-sgqa="'+$(this).attr('name')+'"]').appendTo($('.items-end[data-items-end="'+$(this).val()+'"]')).addClass('moved');
}
});

// Interrupt the Next/Submit function and load the inputs
$('form#limesurvey').submit(function(){
$('.question-item input.text', thisQuestion).val(0);
$('.droppable.items-end .card', thisQuestion).each(function(i) {
var thisItemsEnd = $(this).closest('.droppable.items-end').attr('data-items-end');
var thisID = $(this).attr('data-sgqa');
$('#answer'+thisID+'').val(thisItemsEnd);
});
});
}</syntaxhighlight>

<br />5) Add the following to the end of template.css:<syntaxhighlight lang="css">
/* Card Sort */

.card-sort-question ul.subquestions-list {
/*display: none;
clear: both;*/
}

.card-sort-question .items-start {
float: left;
width: 340px;
height: 317px;
margin-top: 8px;
border: 1px solid #666;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}

.card-sort-question .items-start.target-hover {
background:#C9C9C9;
}

.card-sort-question .items-end-wrapper {
float: left;
margin-left: 20px;
width: 340px;
}

.card-sort-question .items-end {
width: 338px;
min-height: 73px;
margin-bottom: 10px;
padding-bottom: 5px;
border: 1px solid #666;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
background: #EBEBEB;
}

.card-sort-question .items-end.target-hover {
background: #C9C9C9;
}

.card-sort-question .items-end.ui-state-disabled {
opacity: 1;
filter:alpha(opacity=100);
}

.card-sort-question .items-end-text {
width: 338px;
padding-bottom: 5px;
background: #FFFFFF;
font-size: 110%;
font-weight: bold;
}

.card-sort-question .card {
display: inline-block;
width: 140px;
height: auto;
margin: 5px 8px;
padding: 3px;
border: 2px solid #2F4354;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
background-color: #43b3d1;
color: #2f4354;
font-weight: bold;
text-align: center;
line-height: normal;
}

.card-sort-question .items-end .card {
margin: 5px 7px;
}

.card-sort-question div.answer {
clear: both;
padding-top: 1px;
margin-top: 0;
}</syntaxhighlight>

<br />6) Add this to the source of the question to apply the function.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
cardSort({QID});
});
</script></syntaxhighlight>

== Version 3.x ==
Here is a custom question theme for card Sorting in version 3.x. - https://github.com/tpartner/LimeSurvey-Card-Sorting-3.x

== Version 4.x ==
Here is a custom question theme for card Sorting in version 4.x. - https://github.com/tpartner/LimeSurvey-Card-Sorting-4.x

= Q Sorting=
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.<br /><br />

== Version 3.x==
''Tested with: 3.08 - 3.15''
Custom question theme - [[Media:QSort.zip]]<br />

== Version 4.x==
''Tested with: 4.5.1''
Custom question theme - [[Media:qSort-4.x.zip]]<br />

=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:
<syntaxhighlight lang="javascript">
<script type='text/javascript' charset='utf-8'>
$( document ).ready( function() {
var this_surveyId='{SID}';
var this_groupId='{self.gid}';
var this_quesitonId='{self.qid}';
var this_self='{self.sgqa}';

// Remark for the variable 'my_targetTextBox':
// ------------------------------------
// For Text-type question (e.g. 'short free text', 'huge free text'), use : '#answer' + this_self;
// For 'Multiple Choice'-type question enabled with the 'Other' option which provides a textbox, use : '#answer' + this_self;
// For 'List (radio)'-type question enabled with the 'Other' option which provides a textbox, use : '#answer' + this_self + 'text'.
var my_targetTextBox='#answer' + this_self;

// Trim:
// -----
$( my_targetTextBox ).blur( function(){
$( this ).val( $.trim( $( this ).val() ) );
});

// Uppercase:
// ----------
// Operate for its appearance only (but have no effect to modify its intrinsic value) - display as UpperCase:
$( my_targetTextBox ).css( 'text-transform', 'uppercase' );
// Operate for its intrinsic value:
$( my_targetTextBox ).blur( function() {
$( this ).val( $( this ).val().toUpperCase() );
});
});
</script>
</syntaxhighlight>

For Text-type question (e.g. 'short free text', 'huge free text'), set the 'this_self' variable as below:
<syntaxhighlight lang="javascript">
var my_targetTextBox='#answer' + this_self;
</syntaxhighlight>

For 'Multiple Choice'-type question enabled with the 'Other' option which provides a textbox, set the 'this_self' variable as below:
<syntaxhighlight lang="javascript">
var my_targetTextBox='#answer' + this_self;
</syntaxhighlight>

For 'List (radio)'-type question enabled with the 'Other' option which provides a textbox, set the 'this_self' variable as below:
<syntaxhighlight lang="javascript">
var my_targetTextBox='#answer' + this_self + 'text';
</syntaxhighlight>

= 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.<br /><br />

'''IMPLEMENTATION:'''

1) Add the following to the end of template.js:<syntaxhighlight lang="javascript">
$(document).ready(function(){
// Apply the responsiveArray plugin with default settings
$('.array-10-pt, .array-flexible-row, .array-5-pt, .array-increase-same-decrease, .array-yes-uncertain-no').responsiveArray();
});

/*****
A plugin to insert drop-downs into arrays for small screens
Copyright (C) 2015 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 09/04/15
*****/
(function( $ ){
$.fn.responsiveArray = function(options) {

var opts = $.extend( {
chooseText: 'Please choose...'
}, options);

return this.each(function() {

var thisQuestion = $(this);
var thisQID = $(thisQuestion).attr('id').split('question')[1];

// Some classes
$(thisQuestion).addClass('responsive-array');
$('table.questions-list tr', thisQuestion).each(function(i){
$('> *', this).each(function(i){
$(this).addClass('col-'+i);
if(i != 0) {
$(this).addClass('expanded');
}
});
});

// Insert a column
$('.col-0', thisQuestion).after('<td class="dropdown-cell" />');

// Insert dropdowns
$('body').append('<select style="display:none;" class="responsive-select responsive-select-'+thisQID+'" />');
$('table.questions-list thead th.expanded', thisQuestion).each(function(i){
$('.responsive-select-'+thisQID).append('<option value="">'+$(this).text()+'</option>');
});
$('table.questions-list tbody .dropdown-cell', thisQuestion).append($('.responsive-select-'+thisQID+'').clone());
$('tr.radio-list', thisQuestion).each(function(i){
var thisRow = $(this);
$('input.radio', this).each(function(i){
$('.responsive-select-'+thisQID+' option:eq('+i+')', thisRow).attr('value', $(this).attr('id'));
});
if($('input.radio:checked', thisRow).length > 0) {
$('.responsive-select-'+thisQID+'', thisRow).val($('input.radio:checked', thisRow).attr('id'));
}
else {
$('.responsive-select-'+thisQID+'', thisRow).prepend('<option value="" selected="selected">'+opts.chooseText+'</option>');
}
});
$('.responsive-select-'+thisQID+'', thisQuestion).show();

// Listeners on radios
$('input.radio', thisQuestion).click(function(event) {
var thisRow = $(this).closest('tr');
var thisID = $(this).attr('id');
//$('option[value="'+thisID+'"]').attr('selected', 'selected');
$('.responsive-select', thisRow).val(thisID);
$('.responsive-select option[value=""]', thisRow).remove();
});

// Listeners on dropdowns
$('.responsive-select-'+thisQID+'').change(function() {
$('#'+$(this).val()+'').click();
});

});
};
})( jQuery );</syntaxhighlight>

<br />2) Add something like this to template.css (I have it set to switch at 640px but adjust that as you see fit):<syntaxhighlight lang="css">
/*****
Styles for the responsiveArray plugin
Copyright (C) 2015 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 09/04/15
*****/

.responsive-array .dropdown-cell {
display: none;
text-align: left;
padding-left: 8px;
}

.responsive-array .dropdown-cell select {
max-width: none;
}

@media screen and (max-width: 640px) {
.responsive-array table.question {
table-layout: auto;
}
.responsive-array table.question .col-0,
.responsive-array table.question .dropdown-cell {
width: 50%;
}
.responsive-array .dropdown-cell {
display: table-cell;
}
.responsive-array th.expanded,
.responsive-array td.expanded {
display: none;
}
}</syntaxhighlight>

<br />Note that the "Please choose" text is an optional setting. To change it, apply the plugin like this:<syntaxhighlight lang="javascript">
$(document).ready(function(){
// Apply the responsiveArray plugin with default settings
$('.array-10-pt, .array-flexible-row, .array-5-pt, .array-increase-same-decrease, .array-yes-uncertain-no').responsiveArray({
chooseText: 'Select one...'
});
});</syntaxhighlight>

= Van Westendorp Pricing Sliders=
== Version 2.06==

''Tested with: LimeSurvey version 2.06''

This workaround uses JavaScript to dynamically control sliders to facilitate the [http://www.5circles.com/van-westendorp-pricing-the-price-sensitivity-meter/ 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.<br /><br />

[[File:Test_Van_Westendorp_Pricing_206_v2.png]]<br /><br />

'''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''':

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your Multiple Numeric question with subquestions as seen in the image above.
#Add the following to the end of template.js:<syntaxhighlight lang="javascript">function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}

/*****
A jQuery plugin to facilitate the Van Westendorp pricing research methodology
Copyright (C) 2016 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 19/10/16
*****/
(function( $ ){

$.fn.vWPricing = function(options) {

var opts = $.extend( {
order: [1, 2, 3, 4],
randomOrder: false
}, options);

return this.each(function() {

var thisQuestion = $(this);

thisQuestion.addClass('vwp-question');

// Add some attributes and set the slider max/min values
var itemsLength = $('li.question-item', thisQuestion).length;
$('li.question-item', thisQuestion).each(function(i) {
$(this).attr('data-item', (i+1));
$('.ui-slider', this).attr('data-slider', (i+1));

var thisSliderMin = $('.ui-slider', this).slider('option', 'min');
$('.ui-slider', this).slider('option', 'min', thisSliderMin+(i));
var thisSliderMax = $('.ui-slider', this).slider('option', 'max');
$('.ui-slider', this).slider('option', 'max', thisSliderMax-((itemsLength-1)-i));
});

// Slider order
if(opts.randomOrder == true) {
shuffleArray(opts.order);
}
$(opts.order).each(function(i, val) {
$('ul.subquestions-list', thisQuestion).append($('li.question-item[data-item="'+val+'"]', thisQuestion));
});

// Listeners on the sliders
$('.ui-slider', thisQuestion).on('slide', function(event, ui) {
handleVwpSliders(this, ui.value);
});
$('.ui-slider', thisQuestion).on('slidestop', function(event, ui) {
handleVwpSliders(this, ui.value);
});

// A function to handle the siders
function handleVwpSliders(el, sliderVal) {
var thisRow = $(el).closest('li');
var movedIndexNum = $(el).attr('data-slider');

$('input.text', thisRow).val(sliderVal);
$('.slider-callout', thisRow).html($('input.text', thisRow).val());

var lowerSliders = $('.ui-slider', thisQuestion).filter(function() {
return $(this).attr('data-slider') < movedIndexNum;
});
var higherSliders = $('.ui-slider', thisQuestion).filter(function() {
return $(this).attr('data-slider') > movedIndexNum;
});

$(lowerSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider');
var newSliderVal = sliderVal-(movedIndexNum-thisIndexNum);
if($(this).slider('option', 'value') > newSliderVal) {
var thisRow = $(this).closest('li');
$(this).slider('option', 'value', newSliderVal);
$('input.text', thisRow).val(newSliderVal);
$('.slider-callout', thisRow).html($('input.text', thisRow).val());
}
});
$(higherSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider');
var newSliderVal = sliderVal+(thisIndexNum-movedIndexNum);
if($(this).slider('option', 'value') < newSliderVal) {
var thisRow = $(this).closest('li');
$(this).slider('option', 'value', newSliderVal);
$('input.text', thisRow).val(newSliderVal);
$('.slider-callout', thisRow).html($('input.text', thisRow).val());
}
});
}
});

};
})( jQuery );</syntaxhighlight>
#Add the following to the end of template.css (this is for a copy of [http://extensions.sondages.pro/skeletonquest-rwd-for-limesurvey/ Denis Chenu's SkeletonQuest template]):<syntaxhighlight lang="css">/**** Van Westendorp Pricing ****/

.vwp-question ul.subquestions-list,
.vwp-question ul.subquestions-list li {
display:block;
}

.vwp-question ul.subquestions-list li {
margin-bottom: 15px;
}

.vwp-question ul.subquestions-list .slider-label {
display:block;
padding: 0.3em 0.5em 0.7em;
width: auto;
max-width: 100%;
text-align: left;
}

.vwp-question .slider-element {
display: block;
margin-left: 2%;
width:90%;
max-width: 32em;
}</syntaxhighlight>
#To apply the plugin, add this script the multiple-numeric question source.
There are two options to adjust<br /> -'''order''' - this is the order that your subquestions will be displayed (default, 1, 2, 3, 4)<br /> -'''randomOrder''' - if set to true, the '''order''' option will be overridden and the subquestion order will be randomized (default, false)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').vWPricing({
order: [1, 2, 3, 4],
randomOrder: false
});

});
</script></syntaxhighlight>
== Version 2.5x==

''Tested with: LimeSurvey version 2.54.5''

This workaround uses JavaScript to dynamically control sliders to facilitate the [http://www.5circles.com/van-westendorp-pricing-the-price-sensitivity-meter/ 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.<br /><br />

[[File:Test_Van_Westendorp_Pricing_25x.png]]<br /><br />

'''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''':

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your Multiple Numeric question with subquestions as seen in the image above.
#Add the following to the end of template.js:<syntaxhighlight lang="javascript">function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}

/*****
A jQuery plugin to facilitate the Van Westendorp pricing research methodology
Copyright (C) 2016 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 19/10/16
*****/
(function( $ ){

$.fn.vWPricing25 = function(options) {

var opts = $.extend( {
order: [1, 2, 3, 4],
randomOrder: false
}, options);

return this.each(function() {

var thisQuestion = $(this);

thisQuestion.addClass('vwp-question');

// Add some attributes and set the slider max/min values
var itemsLength = $('.question-item', thisQuestion).length;
$('.question-item', thisQuestion).each(function(i) {
var thisInput = $('input[type=text]', this);
var thisVal = $(thisInput).val();

$(this).attr('data-item', (i+1));
$(thisInput).attr('data-slider-index', (i+1));

// Slider initial settings
setTimeout(function() {
var thisSliderMin = $(thisInput).bootstrapSlider('getAttribute', 'min');
$(thisInput).bootstrapSlider('setAttribute', 'min', thisSliderMin+(i));
var thisSliderMax = $(thisInput).bootstrapSlider('getAttribute', 'max');
$(thisInput).bootstrapSlider('setAttribute', 'max', thisSliderMax-((itemsLength-1)-i));

if(thisVal == '') {
$(thisInput).val('');
}
}, 200);

});

// Slider order
if(opts.randomOrder == true) {
shuffleArray(opts.order);
}
$(opts.order).each(function(i, val) {
$('.subquestion-list.questions-list', thisQuestion).append($('.question-item[data-item="'+val+'"]', thisQuestion));
});

// Listeners on the sliders
$('input[type=text]', thisQuestion).on('slide', function(event) {
handleVwpSliders(this, $(this).bootstrapSlider('getValue'));
});
$('input[type=text]', thisQuestion).on('slideStop', function(event) {
handleVwpSliders(this, $(this).bootstrapSlider('getValue'));
});

// A function to handle the siders
function handleVwpSliders(el, sliderVal) {
var movedIndexNum = $(el).attr('data-slider-index');

var lowerSliders = $('input[type=text]', thisQuestion).filter(function() {
return $(this).attr('data-slider-index') < movedIndexNum;
});
var higherSliders = $('input[type=text]', thisQuestion).filter(function() {
return $(this).attr('data-slider-index') > movedIndexNum;
});

$(lowerSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider-index');
var newSliderVal = sliderVal-(movedIndexNum-thisIndexNum);
if($(this).bootstrapSlider('getValue') > newSliderVal) {
var thisRow = $(this).closest('.question-item');
var thisTooltip = $('.tooltip', thisRow);
$(this).bootstrapSlider('setValue', newSliderVal);
$('.tooltip-inner', thisTooltip).text($('input.text', thisRow).val());
thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');

var validationInput = $('input.em_sq_validation', thisRow);
$(validationInput).val($('input.text', thisRow).val())
fixnum_checkconditions($(validationInput).attr('value'), $(validationInput).attr('name'), $(validationInput).attr('type'));
}
});
$(higherSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider-index');
var newSliderVal = sliderVal+(thisIndexNum-movedIndexNum);
if($(this).bootstrapSlider('getValue') < newSliderVal) {
var thisRow = $(this).closest('.question-item');
var thisTooltip = $('.tooltip', thisRow);
$(this).bootstrapSlider('setValue', newSliderVal);
$('.tooltip-inner', thisTooltip).text($('input.text', thisRow).val());
thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');

var validationInput = $('input.em_sq_validation', thisRow);
$(validationInput).val($('input.text', thisRow).val())
fixnum_checkconditions($(validationInput).attr('value'), $(validationInput).attr('name'), $(validationInput).attr('type'));
}
});
}

// Listener on resizing (override the bootstrap callout behaviour)
$(window).resize(function() {
setTimeout(function() {
$('input[type=text]', thisQuestion).each(function(i) {
if($(this).val() != '') {
var thisRow = $(this).closest('.question-item');
var thisTooltip = $('.tooltip', thisRow);
$('.tooltip-inner', thisTooltip).text($.trim($(this).val()));
console.log($('.tooltip-inner', thisTooltip).text());
thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');
}
});
}, 1);
});
});
};
})( jQuery );</syntaxhighlight>
#Add the following to the end of template.css (this is for a copy of the default template):<syntaxhighlight lang="css">/*********** Van Westendorp Pricing ***********/

.vwp-question .control-label {
margin-bottom: 35px;
}

.vwp-question .withslider {
margin-bottom: 0px;
}

.vwp-question .slider-container {
margin-bottom: 2.5em;
margin-top: 3.5em;
}

.vwp-question .slider.slider-horizontal .slider-handle {
margin-top: -5px;
}

@media (max-width: 600px){

.vwp-question .withslider {
padding-left: 0;
padding-right: 0;
}
}

@media (max-width: 480px){

#outerframeContainer,
.vwp-question .control-label,
.vwp-question .slider-container > div {
padding-left: 0;
padding-right: 0;
}

.vwp-question .slider-container > div > div {
padding-left: 5px;
padding-right: 5px;
}
}</syntaxhighlight>
#To apply the plugin, add this script the multiple-numeric question source.
There are two options to adjust<br /> -'''order''' - this is the order that your subquestions will be displayed (default, 1, 2, 3, 4)<br /> -'''randomOrder''' - if set to true, the '''order''' option will be overridden and the subquestion order will be randomized (default, false)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').vWPricing25({
order: [1, 2, 3, 4],
randomOrder: false
});

});
</script></syntaxhighlight>
== 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".<br />

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

'''Implementation''':

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your Multiple Choice question with the last subquestions as "Select all".
#Add the following script to the source of the question text:<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:complete',function() {

// Identify this question
var thisQuestion = $('#question{QID}');

// Initial states
if($('input[type="checkbox"]:last', thisQuestion).is(':checked')) {
$('input[type="checkbox"]', thisQuestion).not(':last').prop('checked', true).prop('disabled', true);
}

// Listener on the last checkbox
$('input[type="checkbox"]:last', thisQuestion).on('change', function(e) {
if($(this).is(':checked')) {
$('input[type="checkbox"]', thisQuestion).not(this).prop('checked', true).prop('disabled', true);
}
else {
$('input[type="checkbox"]', thisQuestion).not(this).prop('checked', false).prop('disabled', false);
}

// Fire ExpressionScript
$('input[type="checkbox"]', thisQuestion).not(this).each(function(i) {
checkconditions(this.value, this.name, this.type);
});
});

// Re-enable checkboxes so data gets stored
$('#moveprevbtn, #movenextbtn, #movesubmitbtn').on('click', function(){
$('input[type="checkbox"]', thisQuestion).prop('disabled', false);
});
});
</script></syntaxhighlight>

= Pay Off Matrix Interface =
== LimeSurvey Version 2.67.x==

This workaround converts a list-radio type question into a Pay Off Matrix interface.<br /><br />

[[File:Pay_off_matrix_1.png]]<br />
[[File:Pay_off_matrix_2.png]]<br /><br />

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

'''Implementation''':

#Create your List Radio question with with the upper and lower values for each answer separated by "pipe" characters.<br />[[File:Pay_off_matrix_3.png]]
#Assign a class "pay-off-matrix" to that question.<br />[[File:Pay_off_matrix_4.png]]
#Add the following to the end of template.js:<syntaxhighlight lang="javascript">$(document).on('ready pjax:complete',function() {
// Apply the payOffMatrix plugin
$('.pay-off-matrix').payOffMatrix({
topText: 'You receive',
bottomText: 'Others receive'
});
});

/*****
A jQuery plugin to convert a list-radio question to a Pay Off Matrix
Copyright (C) 2017 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 1.0
Create date - 25/09/2017
*****/

(function($){

$.fn.payOffMatrix = function(options) {

var opts = $.extend( {
topText: '',
bottomText: ''
}, options);

return this.each(function() {

var thisQuestion = $(this);

// Insert the matrix elements
$('div.answer', thisQuestion).prepend('<div class="pom-outer-wrapper"><div class="pom-wrapper">\
<div class="pom-row-label top">'+opts.topText+'</div>\
<div class="pom-items-wrapper">\
</div>\
<div class="pom-row-label bottom">'+opts.bottomText+'</div>\
<div style="clear:both;" />\
</div></div>');

$('.answer-item', thisQuestion).each(function(i) {
var thisValue = $('input.radio', this).attr('value');
var itemTop = $.trim($('.label-text', this).text()).split('|')[0];
var itemBottom = $.trim($('.label-text', this).text()).split('|')[1];
$('.pom-items-wrapper', thisQuestion).append('<div class="pom-item">\
<div class="pom-item-label-wrapper top">\
<div class="pom-item-label">'+itemTop+'</div>\
</div>\
<div class="pom-item-button-wrapper">\
<div class="pom-item-button" data-value="'+thisValue+'"></div>\
</div>\
<div class="pom-item-label-wrapper bottom">\
<div class="pom-item-label">'+itemBottom+'</div>\
</div>\
<div class="under-480" style="clear:both;" />\
</div>');
});
$('.pom-item:first', thisQuestion).addClass('first');
$('.pom-item:last', thisQuestion).addClass('last');

// Listeners on the matrix events
$('.pom-item-button, .pom-item-label', thisQuestion).on('click', function(e) {
$('.pom-item', thisQuestion).removeClass('active-item');
$(this).closest('.pom-item').addClass('active-item');
var thisValue = $(this).closest('.pom-item').find('.pom-item-button').attr('data-value');
$('input.radio[value="'+thisValue+'"]', thisQuestion).trigger('click');
}).hover(
function() {
$(this).closest('.pom-item').addClass('hover');
}, function() {
$( this ).closest('.pom-item').removeClass('hover');
}
);
});

};
})(jQuery);</syntaxhighlight>
#Add the following to the end of template.css:<syntaxhighlight lang="css">/*****
Styles for the payOffMatrix plugin
Copyright (C) 2017 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 1.0
Create date - 25/09/2017
*****/

.pay-off-matrix .answers-list {
position: absolute;
left: -9999em;
}

.pom-wrapper {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 648px;
}

.pom-item {
float: left;
}

.pom-row-label {
clear: both;
text-align: center;
font-size: 16px;
}

.pom-row-label.top {
padding-top: 5px;
}

.pom-row-label.bottom {
padding-bottom: 5px;
}

.pom-item-label-wrapper {
padding: 5px 8px;
}

.pom-item-label-wrapper.top {
margin-bottom: 3px;
}

.pom-item-label-wrapper.bottom {
margin-top: 3px;
}

.pom-item {
width: 11.11111111111111%;
}

.pom-item-label {
border: 1px solid #233140;
background: #EBEBEB;
-moz-transition: background-color 300ms ease;
-o-transition: background-color 300ms ease;
-webkit-transition: background-color 300ms ease;
transition: background-color 300ms ease;
text-align:center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
font-size: 16px;
line-height: 30px;
}

.pom-item.hover .pom-item-label,
.pom-item.active-item .pom-item-label {
font-weight: bold;
cursor: pointer;
}

.pom-item.active-item .pom-item-label {
background: #233140;
color: #FFFFFF;
}

.pom-item-button-wrapper {
padding: 5px 15.27777777777778%;
background: #CCD5DD;
width: 69.44444444444444%;
width: auto;
}

.pom-item.first .pom-item-button-wrapper {
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-khtml-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}

.pom-item.last .pom-item-button-wrapper {
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-khtml-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}

.pom-item-button {
height: 0;
width: 100%;
padding-top: 100%;
background: #FFFFFF;
-moz-transition: background-color 300ms ease;
-o-transition: background-color 300ms ease;
-webkit-transition: background-color 300ms ease;
transition: background-color 300ms ease;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
}

.pom-item.hover .pom-item-button {
background-color: #5b7fa5;
}

.pom-item.active-item .pom-item-button,
.pom-item.active-item .pom-item-button:hover {
background-color: #233140;
cursor:default;
}

@media only screen and (max-width: 480px) {
.pom-outer-wrapper {
margin: 0 auto;
padding-top: 50px;
width: 256px;
}
.pom-wrapper {
display:block;
position: relative;
}

.pom-row-label {
bottom: 100%;
left: 0;
margin-left: -25px;
position: absolute;
text-align: center;
width: 150px;
background-color: transparent !important;
}

.pom-row-label.bottom {
left: auto;
right: 0;
margin-right: -25px;
padding: 5px 0 0 0;
}

pom-items-wrapper {
vertical-align: middle;
}

.pom-item {
float: none;
width: auto;
}

.pom-item-label-wrapper {
float: left;
margin: 0 !important;
padding: 7px 24px;
}

.pom-item-label {
width: 50px;
}

.pom-item-button-wrapper {
float: left;
margin: 0 5px;
padding: 5px;
width: 46px;
}

.pom-item.first .pom-item-button-wrapper {
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-khtml-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}

.pom-item.last .pom-item-button-wrapper {
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-khtml-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

.pom-item .under-480 {
display: block !important;
}
}</syntaxhighlight>

== LimeSurvey Version 3.x==
Here is a custom question theme for LS 3.x - https://github.com/tpartner/LimeSurvey-Social-Value-Orientation

Workarounds: Manipulating a survey at runtime using Javascript

2023-07-13T14:21:55Z

Tpartner: /* Variable Length Array (Multi Flexible Text) question */

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]]

<div class="simplebox"><center><br />'''Please keep in mind that these workarounds are not official LimeSurvey extensions - they are solutions that users have created for themselves.<br /><span style='color:#EE0000,#FFFFFF'>Therefore LimeSurvey can't offer guarantees or support for these solutions.</span><br />If you have questions, please contact the users that, thankfully, shared their solutions with the community.'''<br /><br /></center></div>

<div class="simplebox">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.<br /><br /></div>

__TOC__

=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 <nowiki>''Tested with: (enter LimeSurvey version and maybe browser)''</nowiki>.

Finally it's imported to mark all your code with code tags, other wise you might break this page.
*Start tag: '''<nowiki><syntaxhighlight lang="php"></nowiki>'''
*End tag: '''<nowiki></syntaxhighlight></nowiki>'''.

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

Plugin [https://extensions.sondages.pro/questions-updating-and-managing/addscripttoquestion-easily-add-javascript/ 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".
* [http://docs.limesurvey.org/tiki-index.php?page=Adding+A+Question Add a new question]
* Edit the question and click the "Source" button in the editor toolbar:

[[File:Editor_1.png]]
* Enter your script after the question text:

[[File:Editor_2.png]]
* Save the question

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

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
alert("Test!");
</script></syntaxhighlight>

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:

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:complete',function() {
alert("Test!");
});
</script></syntaxhighlight>

===Usage of brackets (<nowiki>{ and }</nowiki>)===
{{Alert|title=Caution when using brackets (<nowiki>{ and }</nowiki>) in scripts|text=[[ExpressionScript#Syntax|Expression manager]] uses brackets (<nowiki>{ and }</nowiki>) to enclose expressions. If you have to use brackets in your JavaScript, you must add a space or line feed after the opening bracket (<nowiki>{</nowiki>) and before the closing bracket (<nowiki>}</nowiki>) }}

===Examples of usage of brackets===

ExpressionScript will try to parse this JavaScript:
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(function() {console.log('broken javascript');});
</script>
</syntaxhighlight>

Adding line feed prevents ExpressionScript from parsing
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(function() {
console.log('Adding a line feed for javascript');
});
</script>
</syntaxhighlight>

ExpressionScript will try to parse this JavaScript:
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
if(myvar==1) {console.log('broken javascript');};
</script>
</syntaxhighlight>

Adding spaces inside the brackets prevents ExpressionScript from parsing
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
if(myvar==1) { console.log('Adding a space for javascript'); };
</script>
</syntaxhighlight>

=Sum up input values using Javascript=

''Tested with: ''

<div class="simplebox">As of version 1.92, this is easier to do using the sum() function in [[ExpressionScript|ExpressionScript]]. See this [[ExpressionScript how-tos#Calculate assessment values at runtime and store the results in the survey data|HowTo example]].</div>

<div class="simplebox">Starting in Version 1.92, you also do no longer need to use SGQA (e.g. 45251X1X5) identifiers. Instead the code <code>{SGQ}</code> will automatically replaced by the current questions SGQA-codes.</div>

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 [http://docs.limesurvey.org/tiki-index.php?page=SGQA+Identifier SGQA identifier] and [[Adding a question#Information from previous answers|Using information from previous answers]].

<syntaxhighlight lang="html4strict">

<div style="text-align: left">These are your answers:<br />

<u></u><u></u><u></u><u></u><u>=

<p><script LANGUAGE="JavaScript">

partyprice = 3;

beadclothprice = 3;

breakfastprice = 7;

lunchprice = 8;

dinnerprice = 10;

foodtotal = 0;

var isreallytrue = "Yes";

var noanswer = "No answer";

document.write( "Can you come? = {INSERTANS:45251X1X1}<BR>" );

if ("{INSERTANS:45251X1X1}" == isreallytrue )

{

if ("{INSERTANS:45251X1X3}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X3}"; }

partypeople = parseInt(answer);

partytotal = partyprice * partypeople;

document.write( "It's {INSERTANS:45251X1X3} persons who will come = " + partytotal + "€<BR>" );

if ("{INSERTANS:45251X1X4}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X4}";}

beadcloths = parseInt(answer);

beadclothtotal = beadclothprice * beadcloths;

document.write( "You want to borrow {INSERTANS:45251X1X4} beadcloths = " + beadclothtotal + "€<BR>" );

document.write( "Will you be there thursday? = {INSERTANS:45251X1X5}<BR>" );

document.write( "On friday you will have these meals: <BR>" );

if ("{INSERTANS:45251X1X71}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X71}";}

breakfastfriday = parseInt(answer) * breakfastprice;

document.write( "'''_ " + answer + " breakfeasts = " + breakfastfriday + "€<BR>" );

if ("{INSERTANS:45251X1X72}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X72}";}

lunchfriday = parseInt(answer) * lunchprice ;

document.write( "'''_ " + answer + " lunches = " + lunchfriday + "€<BR>" );

if ("{INSERTANS:45251X1X73}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X73}";}

dinnerfriday = parseInt(answer)* dinnerprice ;

document.write( "'''_ " + answer + " dinners = " + dinnerfriday + "€<BR>" );

foodtotal = breakfastfriday + lunchfriday + dinnerfriday;

document.write( "Will you be there saturday? = {INSERTANS:45251X1X8}<BR>" );

if ("{INSERTANS:45251X1X8}" == isreallytrue )

{

document.write( "On saturday you will have these meals: <BR>" );

if ("{INSERTANS:45251X1X91}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X91}"; }

breakfastsaturday = parseInt(answer) * breakfastprice ;

document.write("'''_ " + answer + " breakfeasts = " + breakfastsaturday + "€<BR>" );

if ("{INSERTANS:45251X1X92}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X92}"; }

lunchsaturday = parseInt(answer) * lunchprice ;

document.write( "'''_ " + answer + " lunches = " + lunchsaturday + "€<BR>" );

if ("{INSERTANS:45251X1X93}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X93}"; }

dinnersaturday = parseInt(answer) * dinnerprice ;

document.write( "'''_ " + answer + " dinners = " + dinnersaturday + "€<BR>" );

foodtotal = foodtotal + breakfastsaturday + lunchsaturday + dinnersaturday;

}

document.write( "Will you be there sunday? = {INSERTANS:45251X1X10}<BR>" );

if ("{INSERTANS:45251X1X10}" == isreallytrue )

{

document.write( "On sunday you will have these meals: <br>" );

if ("{INSERTANS:45251X1X111}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X111}"; }

breakfastsunday = parseInt(answer) * breakfastprice ;

document.write( "'''_ " + answer + " breakfeasts = " + breakfastsunday + "€<BR>" );

if ("{INSERTANS:45251X1X112}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X112}"; }

lunchsunday = parseInt(answer) * lunchprice ;

document.write( "'''_ " + answer + " lunches = " + lunchsunday + "€<BR>" );

if ("{INSERTANS:45251X1X113}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X113}"; }

dinnersunday = parseInt(answer) * dinnerprice ;

document.write( "'''_ " + answer + " dinners = " + dinnersunday + "€<p>" );

foodtotal = foodtotal + breakfastsunday + lunchsunday + dinnersunday;

}

total = partytotal + beadclothtotal + foodtotal;

document.write( "<h3>In total it will cost you " + total + "€</h3><BR>

Put that sum in this bank account 1234 5678 9012" );

}

</SCRIPT></p>

</div></syntaxhighlight>

=Multiple Question Validation=

''Tested with: ''

<div class="simplebox">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|ExpressionScript]]. Such validations also work on the current page, and properly handle array_filter and cascading relevance.</div>

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.):
#Create a new survey of type "group by group", set the "Show |<< Prev| button" to yes and note the SID.
#Add a new group called "Group 1" and note the GID.
#Add a new question "Percent of males" of type "numeric", make it mandatory and note the QID (we will refer to this as QID1).
#Add a new question "Percent of females" of type "numeric", make it mandatory and note the QID (we will refer to this as QID2).
#Add a new group called "Group 2"
#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

<syntaxhighlight lang="javascript">

<script>

function validation()

{

if [[{INSERTANS:SIDXGIDXQID1}+{INSERTANS:SIDXGIDXQID2}) != 100)

{

alert("Your responses don't sum 100! Check them");

document.limesurvey.move.value = 'moveprev';

document.limesurvey.submit();

}

else

{

document.limesurvey.move.value = 'movelast';

document.limesurvey.submit();

}

}

setTimeout("validation()",250);

</script>

</syntaxhighlight>

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

<syntaxhighlight lang="php">

function validation() {

if ("{INSERTANS:SIDXGIDXQID}" != "{INSERTANS:SIDXGIDXQID}") {

alert("Your responses don't match Check them"); document.limesurvey.move.value = 'moveprev';

document.limesurvey.submit();

}

}

setTimeout("validation()",250);

</syntaxhighlight>

=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.

<syntaxhighlight lang="php">

<script>

if ("{INSERTANS:SIDXGIDXQID}" == "No")

{

window.location="http://www.limesurvey.org";

}

</script>

</syntaxhighlight>

=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 (<input> 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...:

<syntaxhighlight lang="php">

<script>

jQuery(document).ready(

function(){

alert('onload alert!');

}

);

</script>

</syntaxhighlight>

...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:

<syntaxhighlight lang="php">document.getElementById("answer73166X16X54").style.display='none';</syntaxhighlight>

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:

<syntaxhighlight lang="php">document.getElementById("answer{SGQ}").style.display='none';</syntaxhighlight>

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:

<syntaxhighlight lang="php">document.getElementById("answer73166X16X54").readOnly=true;</syntaxhighlight> 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.

<syntaxhighlight lang="php">

jQuery(document).ready(

function() {

jQuery('input:radio').each(

function() {

var s = jQuery(this);

var c = s.parent().children('.answertext');

for(var i=0; i < c.length; i++) {

var a = jQuery(c[i]]);

if(this.id </u> a.attr('for') && a.text() == '') {

s.css({ 'display' : 'none' });

a.css({ 'display' : 'none' });

break;

}

}

}

)

}

);

</syntaxhighlight>

==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 <html> 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

<syntaxhighlight lang="javascript">

jQuery(document).ready(

function(){

languagecode=$('html').attr('lang');

alert('This is the current language code: '+languagecode);

}

);

</syntaxhighlight>

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''

<div class="simplebox">As of version 1.92, this is easier to do using the the array_filter attribute, or relevance equations in general.</div>

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.

<syntaxhighlight lang="php">

var previousQuestionAnswer = "{INSERTANS:1000X1X1}";

var currentQuestionID = "#answer1000X1X1"

$(document).ready(function() {

// See if the answer for the previous question matches an answer in the current question

// (other than 'No Answer')

// If so, disable it.

if (previousQuestionAnswer!='No Answer') {

$(currentQuestionID).children().each(function(index, Element)

{

if ($(this).attr('text') == previousQuestionAnswer)

{ $(this).attr('disabled', true); }

}

);}

}); // End of JQuery ready function

</syntaxhighlight>

===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):

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Get the countryCode (first character of the country)
var countryCode = '{INSERTANS:1000X1X1}'.substr(0, 1).toUpperCase();

// Loop through all dropdown options and remove those with codes not starting with the countryCode
$('select[id^="answer"] option').each(function(i){

if($(this).attr('value') && $(this).attr('value').substr(0, 1).toUpperCase() != countryCode) {
$(this).remove();
}
});
});

</script></syntaxhighlight>

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

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Get the stateCode (two first characters of the state)

var stateCode = '{INSERTANS:1000X1X2}'.substr(0, 2).toUpperCase();

// Loop through all dropdown options and remove those with codes not starting with the stateCode

$('select[id^="answer"] option').each(function(i){

if($(this).attr('value') && $(this).attr('value').substr(0, 2).toUpperCase() != stateCode) {

$(this).remove();

}

});

});

</script></syntaxhighlight>

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+''

<div class="simplebox">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).</div>

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...

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

// Match elements with labels using htmlFor and a loop

var labels = document.getElementsByTagName('LABEL');

for (var i = 0; i < labels.length; i++) {

if (labels[i].htmlFor != '') {

var elem = document.getElementById(labels[i].htmlFor);

if (elem)

elem.label = labels[i];

}

}

var answerFilter="{INSERTANS:96553X63X759}";

for (i=0; i<30; i++){

var iLabel = document.getElementById('answer96553X63X760'+(i+1]].label.innerHTML;

if (answerFilter.search(iLabel) == -1){

// Hide element

$('#question760').find('li').eq(i).hide();

// Set value of hidden elements to zero

document.getElementById('answer96553X63X760'+(i+1)).value = 0;

}

}

});</script>

</syntaxhighlight>

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

''Tested with: 1.72''

''And tested with: 1.91+''

<div class="simplebox">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|ExpressionScript]] compatible equations or tailored text. Finally, with 1.92, defaults are properly managed even when set on the same page.</div>

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.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answer1000X11X30').val('{INSERTANS:1000X10X20}');

$('#answer1000X11X31').val('{INSERTANS:1000X10X21}');

});

</script></syntaxhighlight>

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.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answer1000X2X2').val(parseInt('{INSERTANS:1000X1X1}')*2);

$("#question2").hide();

});

</script>

</syntaxhighlight>

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

=Dynamic Sum=

<div class="simplebox">As of version 1.92, this is easier to do with [[ExpressionScript|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 [[ExpressionScript how-tos#Calculate assessment values at runtime and store the results in the survey data|HowTo example]] demonstrates the dynamic sum feature.</div>

<div class="simplebox">Also note, as of version 1.92, the following workaround will fail, since it includes a a regular expression containing curly braces.</div>

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:

<syntaxhighlight lang="php">

<script language=Javascript>

// General definitions

// Define a regular expression to match the labels containing information about an answer

// In LimeSurvey, these labels start with "answer..."

var answerRegex = /^answer/;

// Find all answer checkboxes in the document and set their

// onchange events to updatePrice

function Custom_On_Load()

{

// Find all input elements

var inputList=document.getElementsByTagName("input");

// Loop through each, looking for checkboxes

var i;

for( i=0; i< inputList.length;i++ )

{

// If input item does not have an ID, skip

if (! (inputList[i].id)) { continue; }

// Skip to next if ID doesn't start with "answer"

if (!answerRegex.test(inputList[i].id)) { continue; }

// Skip to next if not a checkbox

if (inputList[i].type.toUpperCase()!='CHECKBOX') { continue; }

// This is an answer checkbox!

// Setup onchange event

inputList[i].onclick = updatePrice;

}

// Load initial sum

updatePrice();

}

function updatePrice()

{

var labels=document.getElementsByTagName("LABEL");

// Define a regular expression to match a price inside parenthesis

// For example: ($29) or ($29.54).

// Set up

priceRegex = /$\$(\d*\.{0,1}\d+)$/;

// Loop through all the labels, looking for labels corresponding to

// answers that have a price in them.

var i;

var total = 0;

for( i=0; i<labels.length;i++ )

{

var myArray; // Define array used for regex matching

var inputID; // Define field element

// Get the ID of the field corresponding to the label using the

// "htmlFor" attribute

// (FYI, there are some labels that will have to be screened out

// because they don't correspond to an answer)

// Does the label start with "answer"?

// If not: exit.

if (!answerRegex.test(labels[i].htmlFor)) { continue; }

// First make sure this element exists

// If it doesn't, go to the next element

// If it does, it will be defined in inputID

if (! (inputID = document.getElementById(labels[i].htmlFor)) ) { continue; }

// See if the corresponding answer is a checkbox that is checked.

// If not, go to next label

if (inputID.type.toUpperCase()!='CHECKBOX') { continue; }

if (!inputID.checked) { continue; }

// This is label for an answer.

// The innerHTML will give us the text of the label

// The price information will be in the form ($XX.XX)

// which in contained in the label text.

// Find a match for a decimal number inside the pattern "($" and ")"

if [[myArray = priceRegex.exec(labels[i].innerHTML]] != null)

{

// Keep a running tally

total += parseFloat(myArray[1]);

}

}

// Update total price on form

document.getElementById("totalPrice").value = "$" + formatCurrency(total);

}

function formatCurrency(num) {

num = isNaN(num) || num <u> '' || num </u> null ? 0.00 : num;

return parseFloat(num).toFixed(2);

}

</script>

</syntaxhighlight>

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

<syntaxhighlight lang="php">Total Cost for selected accessories: <input type="readonly" value="" id="totalPrice" /></syntaxhighlight>

=Focus on the first Input field=

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

<div class="simplebox">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.</div>

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 </head> closing tag:

<syntaxhighlight lang="php">

<script type="text/javascript">

function focusFirst(Event)

{

var i=0;

while(document.forms[0].elements[i].type == "hidden")

{

i++;

}

document.forms[0].elements[i].focus();

return;

}

if(ie)

{ window.attachEvent("onload", focusFirst); }

else

{ document.addEventListener("load", focusFirst, true); }

</script>

</syntaxhighlight>

'''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:

<syntaxhighlight lang="php">

<script type="text/javascript">

var ie = false;

</script>

</syntaxhighlight>

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.

<syntaxhighlight lang="php">

<script type="text/javascript">

jQuery(document).ready(function() {

jQuery(document).bind('keypress', function(e){

if (48 <= e.which && e.which <= 57) {

jQuery('input:radio').each(function() {

var v = jQuery(this).val();

var c = (e.which <u> 48) ? 10 : e.which - 48;

if(v </u> 'Y' || v <u> 'N') {

v = (v </u> 'Y') ? 1 : 2;

}

if(v == c) {

jQuery(this).click();

jQuery('#limesurvey input:submit').click();

}

});

}

})

});

</script>

</syntaxhighlight>

=Math notation in LimeSurvey=
#download the js file from [http://mathcs.chapman.edu/~jipsen/mathml/asciimathdownload.html AsciiMath script]
#copy it in the /scripts/ folder in your installation
#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:

<syntaxhighlight lang="php">

<script type="text/javascript" src="ASCIIMathML.js">

</syntaxhighlight>

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 [http://www.imathas.com/editordemo/demo.html link for a TinyMCE with math support].

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

<div class="simplebox">As of version 2.06 this workaround is not required. It can be handled with subquestion relevance.</div>

''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:'''
*[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|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.<syntaxhighlight lang="javascript">function filterArrByCol(qMultiOpt, qArray, prevPage) {

// If filter question is on a previous page, hide Q1 and check all "visible" boxes
if(prevPage == 1) {
$('#question'+qMultiOpt+' li[id^="javatbd"]:visible input.checkbox').attr('checked', true);
$('#question'+qMultiOpt+'').hide();
}

// Assign classes to the answer cells
$('#question'+qArray+' td.answer-item').each(function(i){
var classArr = $(this).attr('class').split('answer_cell_00');
classArr = classArr[1].split(' ');
var ansCode = classArr[0];
$(this).addClass('ans-'+ansCode+' filtered');
});

// Assign classes to the answer label cells
$('#question'+qArray+' table.subquestions-list tbody tr:eq(0) td.answer-item').each(function(i){
var classArr2 = $(this).attr('class').split(' ans-');
var ansCode2 = classArr2[1];
$('#question'+qArray+' table.subquestions-list thead tr:eq(0) th:eq('+i+')').addClass('ans-'+ansCode2+'');
});

// Fire the filter function on page load
filterArr(qMultiOpt, qArray);

// Listener on multi-opt checkboxes to fire the filter function
$('#question'+qMultiOpt+' input.checkbox').click(function(){
filterArr(qMultiOpt, qArray);
});

// On submit, clear all hidden radios of array
$('#movenextbtn, #movesubmitbtn').click(function(){
$('#question'+qArray+' td.filtered:hidden').each(function(i){
$('input.radio', this).prop('checked', false);
});
return true;
});
}

function filterArr(qMultiOpt, qArray) {

if($('#question'+qMultiOpt+' input.checkbox:checked').length < 1) {
// Hide the array if no multi-opt options are checked
$('#question'+qArray+'').hide();
}
else {
$('#question'+qArray+'').show();

// Hide all columns of array
$('#question'+qArray+' table.subquestions-list tbody td.answer-item, #question'+qArray+' table.question thead th').hide();

// Loop through multi-opt checkboxes and, if checked, show corresponding column of array
$('#question'+qMultiOpt+' input.checkbox').each(function(i){
if($(this).prop('checked') == true) {
var classArr3 = $(this).attr('id').split('X'+qMultiOpt);
var ansCode3 = classArr3[1];
$('#question'+qArray+' .ans-'+ansCode3+'').show();
}
});
}
}</syntaxhighlight>

*If using LimeSurvey version 2.0 or older, place the following functions in your template.js file. These will be accessed by either method.<syntaxhighlight lang="javascript">
$(document).ready(function() {

function filterArrByCol(qMultiOpt, qArray, prevPage) {

// If filter question is on a previous page, hide Q1 and check all "visible" boxes
if(prevPage == 1) {
$('#question'+qMultiOpt+' li[id^="javatbd"]:visible input.checkbox').attr('checked', true);
$('#question'+qMultiOpt+'').hide();
}

// Assign classes to the answer cells
$('#question'+qArray+' table.question tbody td').each(function(i){
var classArr = $(this).attr('class').split('answer_cell_00');
var ansCode = classArr[1];
$(this).addClass('ans-'+ansCode+' filtered');
});

// Assign classes to the answer label cells
$('#question'+qArray+' table.question tbody tr:eq(0) td').each(function(i){
var classArr2 = $(this).attr('class').split(' ans-');
var ansCode2 = classArr2[1];
$('#question'+qArray+' table.question thead tr:eq(0) th:eq('+i+')').addClass('ans-'+ansCode2+'');
});

// Fire the filter function on page load
filterArr(qMultiOpt, qArray);

// Listener on multi-opt checkboxes to fire the filter function
$('#question'+qMultiOpt+' input.checkbox').click(function(){
filterArr(qMultiOpt, qArray);
});

// On submit, clear all hidden radios of array
$('#movenextbtn, #movesubmitbtn').click(function(){
$('#question'+qArray+' td.filtered:hidden').each(function(i){
$('input.radio', this).attr('checked', false);
});
return true;
});
}

function filterArr(qMultiOpt, qArray) {

if($('#question'+qMultiOpt+' input.checkbox:checked').length < 1) {
// Hide the array if no multi-opt options are checked
$('#question'+qArray+'').hide();
}
else {
$('#question'+qArray+'').show();

// Hide all columns of array
$('#question'+qArray+' table.question tbody td, #question'+qArray+' table.question thead th').hide();

// Loop through multi-opt checkboxes and, if checked, show corresponding column of array
$('#question'+qMultiOpt+' input.checkbox').each(function(i){
if($(this).attr('checked') == true) {
var classArr3 = $(this).attr('id').split('X'+qMultiOpt);
var ansCode3 = classArr3[1];
$('#question'+qArray+' .ans-'+ansCode3+'').show();
}
});
}
}
});</syntaxhighlight>

'''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).<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
filterArrByCol(MM, AA);
});
</script></syntaxhighlight>

'''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.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
filterArrByCol(MM, AA, 1);
});
</script></syntaxhighlight>

=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 [http://plugins.jquery.com/project/autotab 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.

Implementation is as follows:
#Visit [http://plugins.jquery.com/autotabs http://plugins.jquery.com/autotabs], download the plugin script and save it as ''jquery.autotab-1.1b.js'' in the template folder.
#Link to the script by placing ''<script type="text/javascript" src="{TEMPLATEURL}jquery.autotab-1.1b.js"></script>'' within the ''<head>'' tag of startpage.pstpl.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#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)
#Define a Maximum characters attribute for all questions that the autotab is applied to.
{{QS:maximum_chars}}
#In the source of the first question of the group that contains the auto-tabbed questions, add the following code.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answerSSSSSXGGXAA').focus(); //initially focus on the first input

$('#answerSSSSSXGGXAA').autotab({ target: 'answerSSSSSXGGXBB' });

$('#answerSSSSSXGGXBB').autotab({ previous: 'answerSSSSSXGGXAA', target: 'answerSSSSSXGGXCC' });

$('#answerSSSSSXGGXCC').autotab({ previous: 'answerSSSSSXGGXBB', target: 'answerSSSSSXGGXDD' });

$('#answerSSSSSXGGXDD').autotab({ previous: 'answerSSSSSXGGXCC' });

});

</script></syntaxhighlight>

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

[[File:ids_343x252.gif]]

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 [[Workarounds#Reverse_array_filter|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 [http://docs.jquery.com/Events/change 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.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#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

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answer11111X22X33').change(function() {

if ( $('#answer11111X22X33').val() > 10 ) {
alert ("That's an awful lot. Are you sure?");
}
});
});
</script></syntaxhighlight>

=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 [http://plugins.jquery.com/project/meioMask 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/ http://www.meiocodigo.com/projects/meiomask/] for more details on features and options.

Implementation for this demo was as follows:
#Visit [http://www.meiocodigo.com/projects/meiomask/ http://www.meiocodigo.com/projects/meiomask/], download the latest plugin script and save it as jquery.meiomask.js in the template folder.
#Link to the script by placing <script type="text/javascript" src="{TEMPLATEURL}jquery.meiomask.js" charset="utf-8"></script> within the <head> tag of startpage.pstpl.
#Turn off $filterxsshtml to allow insertion of JavaScript in the questions. ([http://docs.limesurvey.org/tiki-index.php?page=Optional+settings&structure=English+Instructions+for+LimeSurvey#Filtering_dangerous_HTML_tags_in_survey_objects See documentation here])
#Create the text input questions that the masks are to be applied to
#In the source of the help section of the first question of the group that contains the masked inputs, add the following code. ([http://docs.limesurvey.org/tiki-index.php?page=Workarounds&structure=English+Instructions+for+LimeSurvey#How_to_use_Script_eg._JavaScript_etc._ See How to use script here])

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Define custom masks
$.mask.masks = $.extend($.mask.masks,{
customMask1:{ mask: 'a9a 9a9' }, // Canadian postal code
// Maximum input of 9,999.99, reverse input, default value of 0.00
customMask2:{ mask: '99.999,9', type : 'reverse', defaultValue : '000' }
});

// Set the 'alt' attributes of the inputs
$('#answer111111X22XAA').attr('alt', 'phone-us'); // a pre-defined mask
$('#answer111111X22XBB').attr('alt', 'customMask1'); // a custom mask
$('#answer111111X22XCC').attr('alt', 'customMask2'); // a custom mask
$('#answer111111X22XDD').attr('alt', 'cc'); // a pre-defined mask for credit card

// Tell the plugin to apply masks to these inputs
$('input:#answer111111X22XAA').setMask();
$('input:#answer111111X22XBB').setMask();
$('input:#answer111111X22XCC').setMask();
$('input:#answer111111X22XDD').setMask();
});
</script>
</syntaxhighlight>

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 [http://www.meiocodigo.com/projects/meiomask/#mm_options 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

[[File:Ids 343x252.gif]]

=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/ http://digitalbush.com/projects/masked-input-plugin/] for more details on features and options.

Implementation as follows:

#Visit [http://digitalbush.com/projects/masked-input-plugin/ http://digitalbush.com/projects/masked-input-plugin/], download the latest plugin script and save it as jquery.maskedinput.js in the template folder.
#Link to the script by placing <script type="text/javascript" src="{TEMPLATEURL}jquery.maskedinput.js" charset="utf-8"></script> within the <head> tag of startpage.pstpl.
#Turn off $filterxsshtml to allow insertion of JavaScript in the questions. ([http://docs.limesurvey.org/tiki-index.php?page=Optional+settings&structure=English+Instructions+for+LimeSurvey#Filtering_dangerous_HTML_tags_in_survey_objects See documentation here])
#Create the text input questions that the masks are to be applied to
#In the source of the help section of the first question of the group that contains the masked inputs, add the following code. ([http://docs.limesurvey.org/tiki-index.php?page=Workarounds&structure=English+Instructions+for+LimeSurvey#How_to_use_Script_eg._JavaScript_etc._ See How to use script here])

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function($) {
$("#answer55431X1X5").mask("999-99-9999",{ placeholder:"#" });
});
</script>
</syntaxhighlight>

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.
<br /><br />
'''DOWNLOAD:'''<br />
- [[Media:Demo_Random_Option_From_Multi-Choice_v206.1.zip|Demo survey for LS 2.06]]<br />
- [[Media:Demo_Random_Option_From_Multi-Choice_v25.1.zip|Demo survey for LS 2.5]]<br />
<br />
'''IMPLEMENTATION''' (LimeSurvey version 2.06)<br />

#[https://manual.limesurvey.org/Workarounds:_Manipulating_a_survey_at_runtime_using_Javascript#How_to_use_Script_.28eg._JavaScript_etc..29_in_LimeSurvey.3F Set up your survey to use JavaScript].
#Create a "Multiple options" question
#Immediately following that question, create a short-text question to store the label of the checked box in (we'll hide this with JavaScript)
#Place the script below in the source of the multiple options question. <syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// Identify the questions
var thisQuestion = $('#question{QID}');
var qHidden = thisQuestion.nextAll('.text-short:eq(0)');
var hiddenInput = $('input.text', qHidden);

// Hide qHidden
qHidden.hide();

// Listener on the checkboxes
$('input.checkbox', thisQuestion).on('change', function(e) {
handleChecked();
});

// Listener on the "Other" input
$('input.text', thisQuestion).on('keyup change', function(e) {
setTimeout(function() {
handleChecked();
}, 250);
});

function handleChecked() {
// Build an array of checked answers
var checkedAnswers = [];
$('input.checkbox:checked', thisQuestion).each(function(i) {
if($(this).closest('.answer-item').hasClass('other-item')) {
checkedAnswers.push($(this).closest('.other-item').find('input.text').val());
}
else {
checkedAnswers.push($(this).nextAll('label:eq(0)').text());
}
});

// Load the hidden question with a random item from the array
var checkedLength = checkedAnswers.length;
$(hiddenInput).val(checkedAnswers[Math.floor(Math.random()*checkedLength)]);

// Fire ExpressionScript
checkconditions(hiddenInput.value, hiddenInput.name, hiddenInput.type);
}
});
</script></syntaxhighlight>
<br />
'''IMPLEMENTATION''' (LimeSurvey version 2.5)

#Follow the first 3 implementation steps above
#Place the script below in the source of the multiple options question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// Identify the questions
var thisQuestion = $('#question{QID}');
var qHidden = thisQuestion.nextAll('.text-short:eq(0)');
var hiddenInput = $('input.text', qHidden);

// Hide qHidden
qHidden.hide();

// Class for "Other
$('input.text', thisQuestion).closest('.answer-item').addClass('other-item');

// Listener on the checkboxes
$('input.checkbox', thisQuestion).on('change', function(e) {
handleChecked();
});

// Listener on the "Other" input
$('input.text', thisQuestion).on('keyup change', function(e) {
setTimeout(function() {
handleChecked();
}, 250);
});

function handleChecked() {
// Build an array of checked answers
var checkedAnswers = [];
$('input.checkbox:checked', thisQuestion).each(function(i) {
if($(this).closest('.answer-item').hasClass('other-item')) {
checkedAnswers.push($(this).closest('.answer-item').find('input.text').val());
}
else {
checkedAnswers.push($.trim($(this).nextAll('.label-text:eq(0)').text()));
}
});

// Load the hidden question with a random item from the array
var checkedLength = checkedAnswers.length;
$(hiddenInput).val(checkedAnswers[Math.floor(Math.random()*checkedLength)]);

// Fire ExpressionScript
checkconditions(hiddenInput.value, hiddenInput.name, hiddenInput.type);
}
});
</script></syntaxhighlight>

=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:<br />
[[File:Secondary_options_1.png]]

Primary option selected:<br />
[[File:Secondary_options_2.png]]<br /><br />

'''DOWNLOADS:'''<br />
- [[Media:Demo_Secondary_Checkboxes.zip|Demo template for LS version 2.06]]<br />
- [[Media:Demo_Secondary_Checkboxes.lss|Demo survey for LS version 2.06]].<br />
- [[Media:Template_Demo_Secondary_Checkboxes_For_2.5.zip|Demo template for LS version 2.5]]<br />
- [[Media:Survey_Demo_Secondary_Multiple_Options_For_LS_25.zip|Demo survey for LS version 2.5]].<br /><br />

==LimeSurvey version 2.06==

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create a "Multiple options" question including both the primary and secondary subquestions (in the order that you would like them displayed if all shown).
#Add the following function to the end of template.js:<syntaxhighlight lang="javascript">
// A function to handle "secondary" checkboxes
function secondaryCheckboxes(qID, primaryPosition, secondaryCount) {
// Identify the elements
var thisQuestion = $('#question'+qID);
var primaryRow = $('li.question-item:eq('+(primaryPosition-1)+')', thisQuestion);
var primaryInput = $('input.checkbox', primaryRow);
var secondaryRows = primaryRow.nextAll('li.question-item:lt('+(secondaryCount)+')');
var secondaryInputs = $('input.checkbox', secondaryRows);

// Indent the secondaries
secondaryRows.css({ 'margin-left':'2.5em' });

// Initial states of the secondary answers
if (primaryInput.prop('checked') == false ) {
secondaryRows.hide();
}

// A listener on the primary answer to show or hide secondary answers
primaryInput.click(function (event) {

// Hide/show the secondary answers accordingly
if (!$(this).is(':checked')) {
secondaryRows.hide();
secondaryInputs.prop('checked', false);
secondaryInputs.each(function(i) {
checkconditions(this.value, this.name, this.type);
});
}
else {
secondaryRows.show();
}
});
}</syntaxhighlight>
#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. <br />So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Sub-question 1 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 1, 2);
// Sub-question 6 is primary followed by 3 secondaries
secondaryCheckboxes({QID}, 6, 3);
});
</script></syntaxhighlight>

==LimeSurvey version 2.5==

#Follow the first 2 implementation steps above
#Add the following function to the end of template.js:<syntaxhighlight lang="javascript">
// A function to handle "secondary" checkboxes
function secondaryCheckboxes(qID, primaryPosition, secondaryCount) {
// Identify the elements
var thisQuestion = $('#question'+qID);
$('div.question-item', thisQuestion).parent().addClass('answer-row');
var primaryRow = $('div.question-item:eq('+(primaryPosition-1)+')', thisQuestion).closest('.answer-row');
var primaryInput = $('input.checkbox', primaryRow);
var secondaryRows = primaryRow.nextAll('div.answer-row:lt('+(secondaryCount)+')');
var secondaryInputs = $('input.checkbox', secondaryRows);

// Indent the secondaries
secondaryRows.css({ 'margin-left':'2.5em' });

// Initial states of the secondary answers
if (primaryInput.prop('checked') == false ) {
secondaryRows.hide();
}

// A listener on the primary answer to show or hide secondary answers
primaryInput.click(function (event) {

// Hide/show the secondary answers accordingly
if (!$(this).is(':checked')) {
secondaryRows.hide();
secondaryInputs.prop('checked', false);
secondaryInputs.each(function(i) {
checkconditions(this.value, this.name, this.type);
});
}
else {
secondaryRows.show();
}
});
}</syntaxhighlight>
#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. <br />So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Sub-question 1 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 1, 2);
// Sub-question 6 is primary followed by 3 secondaries
secondaryCheckboxes({QID}, 6, 3);
});
</script></syntaxhighlight>

==LimeSurvey version 3.x==

#Follow the first 2 implementation steps above
#Add the following function to the end of custom.js:<syntaxhighlight lang="javascript">
// A function to handle "secondary" checkboxes
function secondaryCheckboxes(qID, primaryPosition, secondaryCount) {
// Identify the elements
var thisQuestion = $('#question'+qID);
var primaryRow = $('li.question-item:eq('+(primaryPosition-1)+')', thisQuestion).closest('li.question-item');
var primaryInput = $('input:checkbox', primaryRow);
var secondaryRows = primaryRow.nextAll('li.question-item:lt('+(secondaryCount)+')');
var secondaryInputs = $('input:checkbox', secondaryRows);

// Indent the secondaries
secondaryRows.css({ 'margin-left':'2.5em' });

// Initial states of the secondary answers
if (primaryInput.prop('checked') == false ) {
secondaryRows.hide();
}

// A listener on the primary answer to show or hide secondary answers
primaryInput.on('change', function (event) {

// Hide/show the secondary answers accordingly
if (!$(this).is(':checked')) {
secondaryRows.hide();
secondaryInputs.prop('checked', false).trigger('change');
}
else {
secondaryRows.show();
}
});
}</syntaxhighlight>
#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. <br />So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Sub-question 1 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 1, 2);
// Sub-question 6 is primary followed by 3 secondaries
secondaryCheckboxes({QID}, 6, 3);
});
</script></syntaxhighlight>

=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.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#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.

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

minTime(TT);

function minTime(minTime) {

var startTime = new Date();

$('#movenextbtn, #movesubmitbtn').click(function(){

var endTime = new Date();

if((endTime - startTime)/1000 <= minTime) {
alert ('You must spend at least '+minTime+' seconds on the question.');
return false;
}
else {
return true;
}
});
}
});
</script>
</syntaxhighlight>

=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''

<div class="simplebox">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.</div>

<div class="simplebox">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.</div>

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.

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].

#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.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

minChar(QQ, CC);

function minChar(qID, minChars) {

$('#movenextbtn, #movesubmitbtn').click(function(){

if($('#question'+qID+' textarea').val().replace(/ /g,'').length < minChars) {

alert ('You must enter at least '+minChars+' characters.');

return false;

}

else {

return true;

}

});

}

});

</script></syntaxhighlight>

=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.

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:

#Set up your survey to use JavaScript (See instructions [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|here]])

#Add the following script to your ''template.js'' file.

#Replace "QQ" in the function call at the end with the question ID.

#Create one or more Array (Multi Flexible Text) questions

#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);...)

<syntaxhighlight lang="javascript">$(document).ready(function() {

// A function to add or remove rows of an Array (Multi Flexible)(Text) question
function varLengthArray(qID) {

if ($('#question'+qID+'').length > 0) {

// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+]';
var removeContent = '[-]';

// Create the Add and Remove elements & insert them
var el1 = document.createElement('div');
el1.setAttribute('id','addButton'+qID);
document.body.appendChild(el1);
var el2 = document.createElement('div');
el2.setAttribute('id','removeButton'+qID);
document.body.appendChild(el2);

// Move them to after the array
$( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.question' ).parent());
$( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.question' ).parent());

// Insert their HTML
$( 'div#addButton'+qID ).html( addContent );
$( 'div#removeButton'+qID ).html( removeContent );

// Style the elements - you can modify here if you wish
$( 'div#addButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

$( 'div#removeButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

// Initially hide the Remove element
$( 'div#removeButton'+qID ).hide();

// Call the functions below when clicked
$( 'div#addButton'+qID ).click(function (event) {
addRow(qID);
});
$( 'div#removeButton'+qID ).click(function (event) {
removeRow(qID);
});

// Function to add a row, also shows the Remove element and hides the
//Add element if all rows are shown
function addRow(qID) {
var arrayRow = '#question' + qID + ' table.question tbody';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' ) {
$( 'div#addButton'+qID ).hide();
}
}

// Function to remove a row, also clears the contents of the removed row,
// shows the Add element if the last row is hidden and hides the Remove
// element if only the first row is shown
function removeRow(qID) {
var arrayRow = '#question' + qID + ' table.question tbody';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
$( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
$( 'div#addButton'+qID ).show();
if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' ) {
$( 'div#removeButton'+qID ).hide();
}
}

// Just some initialization stuff
var arrayRow = '#question' + qID + ' table.question tbody';
var rowCount = '';

// Initially hide all except first row or any rows with populated inputs
$( arrayRow ).each(function(i) {
if ( i > 0 ) {
// We also need to give the hidden rows a name cause IE doesn't
// recognize jQuery :visible selector consistently
$( this ).attr('name', 'hidden').hide();

$('input[type=text]', this).each(function(i) {
if ($(this).attr('value') != '') {
$(this).parents('tbody:eq(0)').attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
}
});
rowCount = i;
}
});
}
}

// Call the function with a question ID
varLengthArray(QQ);

});</syntaxhighlight>

''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.

<syntaxhighlight lang="javascript">$(document).ready(function() {

// A function to add or remove rows of an Array (Multi Flexible)(Text) question
function varLengthArray(qID) {

if ($('#question'+qID+'').length > 0) {

// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+]';
var removeContent = '[-]';

// Create the Add and Remove elements & insert them
var el1 = document.createElement('div');
el1.setAttribute('id','addButton'+qID);
document.body.appendChild(el1);
var el2 = document.createElement('div');
el2.setAttribute('id','removeButton'+qID);
document.body.appendChild(el2);

// Move them to after the array
$( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());
$( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());

// Insert their HTML
$( 'div#addButton'+qID ).html( addContent );
$( 'div#removeButton'+qID ).html( removeContent );

// Style the elements - you can modify here if you wish
$( 'div#addButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

$( 'div#removeButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

// Initially hide the Remove element
$( 'div#removeButton'+qID ).hide();

// Call the functions below when clicked
$( 'div#addButton'+qID ).click(function (event) {
addRow(qID);
});
$( 'div#removeButton'+qID ).click(function (event) {
removeRow(qID);
});

// Function to add a row, also shows the Remove element and hides the
//Add element if all rows are shown
function addRow(qID) {
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' ) {
$( 'div#addButton'+qID ).hide();
}
}

// Function to remove a row, also clears the contents of the removed row,
// shows the Add element if the last row is hidden and hides the Remove
// element if only the first row is shown
function removeRow(qID) {
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
$( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
$( 'div#addButton'+qID ).show();
if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' ) {
$( 'div#removeButton'+qID ).hide();
}
}

// Just some initialization stuff
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = '';

// Initially hide all except first row or any rows with populated inputs
$( arrayRow ).each(function(i) {
if ( i > 0 ) {
// We also need to give the hidden rows a name cause IE doesn't
// recognize jQuery :visible selector consistently
$( this ).attr('name', 'hidden').hide();

$('input[type=text]', this).each(function(i) {
if ($(this).attr('value') != '') {
$(this).parents('tbody:eq(0)').attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
}
});
rowCount = i;
}
});
}
}

// Call the function with a question ID
varLengthArray(QQ);

});</syntaxhighlight>

==LimeSurvey version 6.x==

This is an updated script for version 6.x:

<syntaxhighlight lang="javascript">
$(document).ready(function() {

// A function to add or remove rows of an Array (Multi Flexible)(Text) question
function varLengthArray(qID) {

if ($('#question'+qID+'').length > 0) {

var thisQuestion = $('#question'+qID);

// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+] Add row';
var removeContent = '[-] Remove row';

// The classes for the Add/Remove elements - modify as you wish
// See https://getbootstrap.com/docs/5.0/getting-started/introduction/
var addClasses = 'inserted-button add btn btn-success';
var removeClasses = 'inserted-button remove btn btn-danger';

// The styles for the Add/Remove elements - modify as you wish
// These could be placed in your custom.css file.
var addStyles = 'margin:10px 0 10px 10px; padding:1px 5px; text-align:center; width:auto; cursor:pointer; float:left;';
var removeStyles = 'margin:10px 0 10px 10px; padding:1px 5px; text-align:center; width:auto; cursor:pointer; float:left;';

// Insert the buttons
$( 'table.ls-answers', thisQuestion).after('<div class="button-wrapper">\
<button type="button" class="'+addClasses+'" style="'+addStyles+'">'+addContent+'</button>\
<button type="button" class="'+removeClasses+'" style="display: none; '+removeStyles+'">'+removeContent+'</button>\
</div>');

// Listeners on the buttons
$('.inserted-button.add', thisQuestion).on('click', function (event) {
addRow();
});
$('.inserted-button.remove', thisQuestion).on('click', function (event) {
removeRow();
});

// Define the relevant rows
var relevantRows = $('tr.subquestion-list:not(.ls-irrelevant)', thisQuestion);

// Function to add a row, show the "Remove" element and hide the "Add" element if all rows are shown
function addRow() {
$('[data-visible="false"]:first', thisQuestion).attr('data-visible', 'true').show();
$('.inserted-button.remove', thisQuestion).show();
console.log($('[data-visible="true"]', thisQuestion).length+' == '+$(relevantRows).length - 1);
if ($('[data-visible="false"]', thisQuestion).length == 0) {
$('.inserted-button.add', thisQuestion).hide();
}
$('.inserted-button.add', thisQuestion).blur();
}

// Function to remove a row, clear the contents of the removed row,
// show the "Add" element if the last row is hidden and hide the "Remove" element if only the first row is shown
function removeRow() {
$('[data-visible="true"]:last input:text', thisQuestion).val('').trigger('keyup');
$('[data-visible="true"]:last', thisQuestion).attr('data-visible', 'false').hide();
$('.inserted-button.add', thisQuestion).show();
if ($('[data-visible="true"]', thisQuestion).length == 0) {
$('.inserted-button.remove', thisQuestion).hide();
}
$('.inserted-button.remove', thisQuestion).blur();
}

// Initially hide all except first row or any rows with populated inputs
$(relevantRows).slice(1).each(function(i) {
$( this ).attr('data-visible', 'false').hide();

$('input[type=text]', this).each(function(i) {
if ($.trim($(this).val()) != '') {
$(this).closest('tr').attr('data-visible', 'true').show();
$('.inserted-button.remove', thisQuestion).show();
}
});
});
}
}
// Call the function with a question ID
varLengthArray(QQ);
});
</syntaxhighlight>

=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.

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:
#Set up your survey to use JavaScript. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|documentation here]])
#Create one or more Array questions
#In the source of the first array question add the following script.
#Replace "QQ" in the function call at the end of the script with the question ID of the array you would like to manipulate.
#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);...)

<syntaxhighlight lang="javascript">
<script type="text/javascript">

$(document).ready(function() {

// A function to show subsequent rows of an array as options are checked
function expandingArray(qID) {

// Build an array of the question rows
var arrayRow = '#question' + qID + ' table.question tbody tr';

// Initially hide all rows unless an input was previously checked
$( arrayRow ).each(function(i) {

if ( $( arrayRow + ':eq(' + i + ') input.radio:checked' ).length != 0 ) {
$(this).attr('name', 'clickedRow');
}
else {
$(this).attr('name', 'hidden').hide();
}
});

// Now show the first hidden row
addRow();

// Add another row when an option is checked for the first time
$( '#question' + qID + ' td.answer input.radio' ).click(function (event) {

if ($(this).parents('tr:eq(0)').attr('name') != 'clickedRow') {
addRow();
$(this).parents('tr:eq(0)').attr('name', 'clickedRow');
}

// The original function of the click event
checkconditions(this.value, this.name, this.type);
});

// Add another row when an table cell is clicked for the first time
$( '#question' + qID + ' table.question tbody td' ).click(function (event) {

if ($(this).parents('tr:eq(0)').attr('name') != 'clickedRow') {
addRow();
$(this).parents('tr:eq(0)').attr('name', 'clickedRow');
}
});

// Function to add a row
function addRow() {
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
// Now, scroll down
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
}
}

// Call the function with a question ID
expandingArray(QQ);

});
</script></syntaxhighlight>

=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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create an Array type question.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedCode" value as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// The subquestion code to place in the last position
var fixedCode = 'A1';

// Identify this question
var q1ID = {QID};
var thisQuestion = $('#question'+q1ID);

// Move the "fixed" row to the end
$('table.subquestion-list tbody', thisQuestion).append($('tr[id$="X'+q1ID+fixedCode+'"]'));

// Fix up the array row background colours
$('tr.answers-list', thisQuestion).each(function(i){
$(this).removeClass('array1 array2').addClass('array'+(2-(i%2)));
});

});
</script></syntaxhighlight>

'''Download sample survey:'''<br />
[[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:

[[File:random_336x179gif.gif]]

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)

[[File:Partially_Randomized_Answers_1.png]]

Implementation is as follows:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' li.answer-item').length;

// Place the last answer created at the end of the list
var answer = $( 'input[id$="X'+qID+ansCount+'"]');
var answerItem = $(answer).closest('li');
var answersList = $(answer).closest('ul');
$(answersList).append(answerItem);

});
</script></syntaxhighlight>

'''Download sample survey:'''<br />
[[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:

[[File:Random v2.50.png]]

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)

[[File:Random answers v2.50.png]]

==LimeSurvey version 2.06==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedAnswers" and "otherFixed" variables as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// The number of answers to be fixed at the end of the list
var fixedAnswers = 2;

// Set this to "true" if you want "Other" to be fixed in the last position
var otherFixed = false;

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' li.answer-item').length;
if($('#question'+qID+' input[type="text"]').length > 0) {
ansCount = ansCount -1
}

// Place the last n answers created at the end of the list
var fixedIndex = fixedAnswers - 1;
for (var i=0; i<fixedAnswers; i++) {
var answer = $( 'input[id$="X'+qID+(ansCount-fixedIndex)+'"]');
var answerItem = $(answer).closest('li');
var answersList = $(answer).closest('ul');
$(answersList).append(answerItem);
fixedIndex--;
}

// Handle "Other"
if(otherFixed == true && $('#question'+qID+' input[type="text"]').length > 0) {
var otherAnswer = $('#question'+qID+' input[type="text"]');
var otherAnswerItem = $(otherAnswer ).closest('li');
var otherAnswersList = $(otherAnswer ).closest('ul');
$(otherAnswersList).append(otherAnswerItem);
}
});
</script></syntaxhighlight>

<br /><br />
==LimeSurvey version 2.73.0:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedAnswers" and "otherFixed" variables as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// The number of answers to be fixed at the end of the list
var fixedAnswers = 2;

// Set this to "true" if you want "Other" to be fixed in the last position
var otherFixed = false;

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' .answer-item').length;
if($('#question'+qID+' input[type="text"]').length > 0) {
ansCount = ansCount -1
}

// Place the last n answers created at the end of the list
var fixedIndex = fixedAnswers - 1;
for (var i=0; i<fixedAnswers; i++) {
var answer = $('input[id^="answer"][id$="X'+qID+'s'+(ansCount-fixedIndex)+'"]');
var answerItem = $(answer).closest('.answer-item');
var answersList = $(answer).closest('.answers-list');
if($('#question'+qID).hasClass('multiple-opt')) {
answer = $('input[id^="answer"][id$="X'+qID+(ansCount-fixedIndex)+'"]');
answerItem = $(answer).closest('.answer-item').parent();
answersList = $(answer).closest('.subquestion-list');
}
$(answersList).append(answerItem);
fixedIndex--;
}

// Handle "Other"
if(otherFixed == true && $('#question'+qID+' input[type="text"]').length > 0) {
var otherAnswer = $('#question'+qID+' input[type="text"]');
var otherAnswerItem = $(otherAnswer ).closest('.answer-item');
var otherAnswersList = $(otherAnswer ).closest('.answers-list');
if($('#question'+qID).hasClass('multiple-opt')) {
otherAnswerItem = $(otherAnswer ).closest('.answer-item').parent();
otherAnswersList = $(otherAnswer ).closest('.subquestion-list');
}
$(otherAnswersList).append(otherAnswerItem);
}
});
</script></syntaxhighlight>

<br /><br />
==LimeSurvey version 3.x:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedAnswers" and "otherFixed" variables as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).on('ready pjax:scriptcomplete',function(){

// The number of answers to be fixed at the end of the list
var fixedAnswers = 2;

// Set this to "true" if you want "Other" to be fixed in the last position
var otherFixed = false;

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' .answer-item').length;
if($('#question'+qID+' input[type="text"]').length > 0) {
ansCount = ansCount -1
}
console.log(ansCount);

// Place the last n answers created at the end of the list
var fixedIndex = fixedAnswers - 1;
for (var i=0; i<fixedAnswers; i++) {
var answer = $('input[id^="answer"][id$="X'+qID+(ansCount-fixedIndex)+'"]');
var answerItem = $(answer).closest('.answer-item');
var answersList = $(answer).closest('ul');
$(answersList).append(answerItem);
fixedIndex--;
}

// Handle "Other"
if(otherFixed == true && $('#question'+qID+' input[type="text"]').length > 0) {
var otherAnswer = $('#question'+qID+' input[type="text"]');
var otherAnswerItem = $(otherAnswer ).closest('.answer-item');
var otherAnswersList = $(otherAnswer ).closest('ul');
$(otherAnswersList).append(otherAnswerItem);
}
});
</script></syntaxhighlight>

=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.

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

[[File:random_700x154.png]]

Implementation is as follows:
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])
#Create one or more List (dropdown) questions with sequential response codes. Set the [[Advanced question settings#random order|random_order question attribute]] to 1.
#In the source of the first question add the following onload function. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]])
#Replace the ID question at the end of the function call.

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Function to allow randomization of all answers
//except the last one in List/dropdown questions
function partRandDD(qID) {

// Find the last answer option
var ansCount = $( 'div#question' + qID + ' select option' ).length - 1;

// Place the last answer option at the end of the list
$( 'div#question' + qID + ' select option[value="' + ansCount + '"]' )
.appendTo($( 'div#question' + qID + ' select' ));
}

// Call the function with the qID (replace the qID eg. partRandDD(244))
partRandDD(qID);
//If you want to apply it to more questions on the same page simply add more calls with the appropriate IDs.
partRandDD(qID);
});
</script></syntaxhighlight>

=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)

[[File:random_700x154.png]]

Implementation is as follows:
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])
#Create one or more Multiple numerical input question with sequential response codes. Set the [[Advanced question settings#random order|random_order question attribute]] to 1.
#In the source of the first question add the following onload function. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]])
#Replace "SSSSS", "GG", "QQ" in the function call at the end with the survey ID, group ID and question ID respectively.
#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); ...)

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Function to allow randomization of all answers except the last one in multiple numeric input questions
function partRand(sID, gID, qID) {

// Find the number of answers
var ansCount = ''
$( 'div#question' + qID + ' div.answers li' ).each(function(i) {
ansCount = (i - 1);
});

// Place the last answer created at the end of the list - but before the first helping sum
$( 'li#javatbd' + sID + 'X' + gID + 'X' + qID + ansCount + '' ).insertBefore($( 'div#question' + qID + ' div.answers li.multiplenumerichelp' ).first());

}

// Call the function with the SID, GID and QID
partRand(SID, GID, QID);

});

</script></syntaxhighlight>

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 (<nowiki><ul></nowiki>) 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=

{{Hint|Text=With Expression manager, you can use [[Expression_Manager_Examples#Using_em_validation_q_in_array|Using em_validation_q in array]] system.}}

''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 [http://www.partnersinc.biz/surveys//index.php?sid=26842&newtest=Y&lang=en 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:
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions (see [[Optional settings#Security|documentation here]]).
#Create the array question.
#In the source of the array question add the following script (see [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]]).
#Modify the warningText (line10)as required.
#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.

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function () {

// Interrupt the submit function
$('form#limesurvey').submit(function () {

// Override the built-in "disable navigation buttons" feature
$('#moveprevbtn, #movenextbtn, #movesubmitbtn').attr('disabled', '');

var empty = 0;
var warningText = 'Please complete the highlighted inputs.';

// Call the mandatory row function with question IDs and row numbers
mandatoryRow(QQ, 1);
mandatoryRow(QQ, 3);

// A function to render rows of an array mandatory
function mandatoryRow(qID, rowNum) {

$('div#question' + qID + ' table.question tbody[id^="javatbd"]:eq(' + Number(rowNum - 1) + ') input[type="text"]').each(function (i) {

if ($(this).val() == '') {
$(this).css('background-color', 'pink');
empty = 1;
}
else {
$(this).css('background-color', '#FFFFFF');
}
});
}

if (empty == 1) {
alert(warningText);
return false;
}
else {
return true;
}
});

});

</script></syntaxhighlight>

=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|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:

<syntaxhighlight lang="javascript">

Please have a look at this picture:

<br />

<script>

$(document).ready(

function(){

// Find a random number (here between 1 and 4)

var randNumber = Math.floor(Math.random()*4 + 1);

// Save the number as answer of this question

$('input#answerSSSSSXGGXQQ').val(randNumber);

// Hide this answer field

document.getElementById("answerSSSSSXGGXQQ").style.display='none';

// Show the picture

picString = '<img src="pic/' + String(randNumber) + '.jpg">';

document.getElementById('pic').innerHTML = picString;

}

);</script>

<p>

</p>

<div id="pic">

</div>

</syntaxhighlight>

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):

<syntaxhighlight lang="javascript">

You saw picture number {INSERTANS:SSSSSXGGXQQ}.

</syntaxhighlight>

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:

<syntaxhighlight lang="javascript">

Here you see the picture again: <br>

<script>

$(document).ready(

function(){

// Get the picture number from previous question

var randNumber = "{INSERTANS:SSSSSXGGXQQ}";

// Show picture

picString = '<img width="100" height="100" src="pic/' + String(randNumber) + '.jpg">';

document.getElementById('pic').innerHTML = picString;

}

);</script>

<div id="pic">

</div>

</syntaxhighlight>

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

''Tested in 1.85+''

<div class="simplebox">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.</div>

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:

<syntaxhighlight lang="javascript">

<script type="text/javascript" charset="utf-8">

function Custom_On_Load(){

document.getElementById('answer1000X10X11').value='{TOKEN:ATTRIBUTE_1}';

document.getElementById('answer1000X10X11').readOnly=1;

}

</script>

</syntaxhighlight>

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:

<syntaxhighlight lang="javascript">

document.getElementById('question85').style.display='none';

document.getElementById('display85').value='';

</syntaxhighlight>

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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use script]].
#Create the array question.
#In the source of the array question add the following script.
#Replace"QQ" with the question ID and "CC" with the column number to be checked.

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// A function to pre-check a column of an array
function checkedDefault(qID, column) {
var checkedCol = column - 1;
$('#question'+qID+' tr.subquestions-list').each(function(i) {
if ($('input.checkbox:checked', this).length == 0) {
$('input.checkbox:eq('+checkedCol+')', this).prop('checked', true);
$('input.checkbox:eq('+checkedCol+')', this).parent().find('input[type="hidden"]').val(1);
}
});
}
// Call the function with a question ID and column number
checkedDefault(QQ, CC);
});

</script></syntaxhighlight>

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

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

'''Overview'''<br />
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:'''
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use script]].
#Create the array question.
#In the source of the array question add the following script.
#Adjust "''defaultAnsweredScale''" and "''defaultAnsweredColumn''" as necessary.

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Scale to set the default answer on
var defaultAnsweredScale = 2;
// Column of that scale to set as default answer
var defaultAnsweredColumn = 3;

// Identify this question
var thisQuestion = $('#question{self.qid}');

// Identify the scales and columns
$('.answer-item[class^="answer_cell_1"]', thisQuestion).addClass('scale-1-item');
$('.answer-item[class^="answer_cell_2"]', thisQuestion).addClass('scale-2-item');
$('tr.answers-list', thisQuestion).each(function(i) {
$('.scale-1-item', this).each(function(i) {
$(this).addClass('scale-1-column-'+(i+1)+'-item');
});
$('.scale-2-item', this).each(function(i) {
$(this).addClass('scale-2-column-'+(i+1)+'-item');
});
});

// Click the default answers
$('tr.answers-list', thisQuestion).each(function(i) {
if($('.scale-'+defaultAnsweredScale+'-item input[type="radio"]:checked', this).length == 0) {
$('.scale-'+defaultAnsweredScale+'-column-'+defaultAnsweredColumn+'-item input[type="radio"]:last', this).click();
}
});
});
</script></syntaxhighlight>

'''Download sample survey:'''<br />
[[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''

<div class="simplebox">As of version 1.92, group view time is accurately recorded in the timings table if you choose the Record Timings survey option.</div>

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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#In the group, create a short-text question. We will hide this later with JavaScript and populate it with the elapsed time.
#Place the following script in the source of the short-text question.
#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.

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

// call the functions with the hidden timer question ID

runTimer(QQ);

function runTimer(timeQID) {

$('#question'+timeQID).hide();

var initSec = '0';

// Check for elapsed time from previous visits

if ($('#question'+timeQID+' input.text').val()) {

var initTime = $('#question'+timeQID+' input.text').val();

initTimeArr = initTime.split(':');

initSec = Number[[initTimeArr[0]*3600]]+Number[[initTimeArr[1]*60]]+Number(initTimeArr[2]);

}

// Run the timer update function

recordTime(initSec, timeQID);

}

});

// Timer update function

function recordTime(elapsedSec, timeQID){

elapsedSec++;

var h = Math.floor(elapsedSec / 3600);

var m = Math.floor(elapsedSec % 3600 / 60);

var s = Math.floor(elapsedSec % 3600 % 60);

var elapsedTime = [[h > 0 ? h + ":" : "00:") + (m > 0 ? (m < 10 ? "0" : "") + m + ":" : "00:") + (s < 10 ? "0" : "") + s);

$('#question'+timeQID+' input.text').val(elapsedTime);

// Run the timer update function every second

setTimeout('recordTime('+elapsedSec+', '+timeQID+')',1000);

}

</script>

</syntaxhighlight>

=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 [http://www.partnersinc.biz/surveys//index.php?sid=33613&newtest=Y&lang=en demonstrated here].

Implementation is as follows:

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Set the survey to run in "all in one" mode.
#Add your groups and questions.
#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:

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

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

// Insert show/hide divs before all group wrapper divs
$('<div class="groupToggler"><span></span></div>').insertBefore('div[id^="group-"]');

// Add some text to the show/hide divs
$('.groupToggler span').each(function(i) {
($( this ).text('Show/Hide Group '+(i+1)+''));
});

// Add some styles to the show/hide divs
$('.groupToggler').css({
'padding':'5px 0 10px 0',
'text-align':'center'
});
$('.groupToggler span').css({
'text-decoration':'underline',
'cursor':'pointer'
});

// Add some hover effects to the show/hide divs
$(".groupToggler span").hover(
function () {
$(this).css({
'text-decoration':'none',
'font-weight':'bold'
});
},
function () {
$(this).css({
'text-decoration':'underline',
'font-weight':'normal'
});
}
);

// Initially hide all of the groups
// Toggle their visibility when the show/hide is clicked
$('.groupToggler span').click(function() {
$(this).parent().next().toggle();
return false;
}).parent().next().hide();

// Display any groups that have unanswered mandatories
$('.errormandatory').parents('div[id^="group-"]').show();

// Some tidying up
$('h1').next().next().hide();
$('.surveywelcome').css({
'margin-bottom':'10px'
});
$('.surveywelcome').next().hide();
$('.surveywelcome').next().next().hide();

});

</script></syntaxhighlight>

=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 [http://jqueryui.com/demos/autocomplete/ 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

<syntaxhighlight lang="css">/* Autocomplete styles */

ul.ui-autocomplete {
width: 250px !important;
padding: 5px 10px;
list-style: none;
}</syntaxhighlight>

'''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)

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var q1ID = 'QQ';

var states = "Alabama,Alaska,Arizona,Arkansas,California,Colorado,Connecticut,Delaware, District of Columbia,Florida,Georgia,Hawaii,Idaho,Illinois,Indiana,Iowa,Kansas,Kentucky, Louisiana,Maine,Montana,Nebraska,Nevada,New Hampshire,New Jersey,New Mexico,New York, North Carolina,North Dakota,Ohio,Oklahoma,Oregon,Maryland,Massachusetts,Michigan, Minnesota,Mississippi,Missouri,Pennsylvania,Rhode Island,South Carolina,South Dakota, Tennessee,Texas,Utah,Vermont,Virginia,Washington,West Virginia,Wisconsin,Wyoming".split(',');

$('#question'+q1ID+' input.text').autocomplete({
source: states
});

});

</script></syntaxhighlight>

'''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:

<syntaxhighlight lang="php"><?php

$countriesArr = array();

$file_handle = fopen("countries2.csv", "r");

while (!feof($file_handle) ) {
$line_of_text = fgetcsv($file_handle);
array_push($countriesArr, $line_of_text[0]);
}

fclose($file_handle);

echo json_encode($countriesArr);

?></syntaxhighlight>

JavaScript code:

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;
var url = "templates/yourTemplate/countries.php";
var dataArr = [];

$.getJSON(url,function(data){

$.each(data,function(i, item){
dataArr.push(item);
});

$('#question'+qID+' input.text').autocomplete({
source: dataArr
});

});

});

</script></syntaxhighlight>

<br />
== 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:'''
<ol><li>Download the jQuery Autocomplete widget</li>
<li>Add special autocomplete styling to the survey template (tested with the Skeletonquest template by Denis Chenu)</li>
</ol>

This workaround builds on the previous examples, but is updated for use with newer versions of LimeSurvey. Note that the [http://jqueryui.com/demos/autocomplete/ Autocomplete widget] is already included in LimeSurvey, as part of jQuery UI.

<br />
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.

<br />
'''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 [http://jqueryui.com/demos/autocomplete/ jQuery website] for example):

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 1;

$('#question'+qID+' input[type="text"]').autocomplete({
minLength: 2, // This line is optional, signifies number of keystrokes before autocomplete is initiated
source: ["Test1","Test2","Test3"]
});

});

</script>
</syntaxhighlight>

<br />
'''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:
<ol><li>A comma-separated data file (CSV)</li>
<li>The [https://code.google.com/p/jquery-csv/ jquery.csv.js plugin] (v0.71)</li>
</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 <strong>before</strong> {TEMPLATEJS}.

<syntaxhighlight lang="html5">
<script type="text/javascript" src="{TEMPLATEURL}jquery.csv.js"></script>
</syntaxhighlight>

<br />
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 <strong>semicolon</strong>, 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:

<syntaxhighlight lang="javascript">
41 $.csv = {
42 defaults: {
43 separator:',', // Change this to: separator:';',
44 delimiter:'"',
45 headers:true
46 },
</syntaxhighlight>

<br />
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:

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 1;

var surveyRoot = location.pathname.split('index.php')[0];
var url = surveyRoot+'datafile.csv';

// Create an array to hold the data
var testArr = new Array();

// Grab the CSV contents
$.get(url,function(data){

// Convert CSV contents to an array of arrays
fullArray = $.csv.toArrays(data);

// Load the data array
$(fullArray).each(function(i, item){
testArr.push(item[0]);
});

// Initialise the autocomplete plugin
$('#question'+qID+' input.text').autocomplete({
source: testArr
});

// console.log(data); This would be a gould place to put your debugging script. Remember to comment out or remove before going into production, to economize on server workload
});
});

</script>
</syntaxhighlight>

<br />
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 <strong>console.log(data);</strong> 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.

<br />
'''3. Input from a MySQL database (trickiest, but also the most versatile and secure).'''
<br />This method requires the following:
<ol><li>Access to a MySQL database (tested with MySQL 5.5)</li>
<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):
<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 1;

$('#question'+qID+' input[type="text"]').autocomplete({
minLength: 2, // This line is optional, signifies number of keystrokes before autocomplete is initiated
source: 'autocomplete.php'
});

});

</script>
</syntaxhighlight>

<br />
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:

<syntaxhighlight lang="php">
<?php
// Login credentials
define('DB_SERVER', "localhost");
define('DB_USER', "username");
define('DB_PASSWORD', "password");
define('DB_DATABASE', "database_name");
define('DB_DRIVER', "mysql");
?>
</syntaxhighlight>

<br />
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):

<syntaxhighlight lang="php">
<?php

// Connect and query MySQL database, using PDO
try {
$db = new PDO(DB_DRIVER . ":dbname=" . DB_DATABASE . ";host=" . DB_SERVER . ";charset=utf8", DB_USER, DB_PASSWORD);
}

catch(PDOException $e) {
echo $e->getMessage();
}

$return_arr = array();

if ($db)
{
$ac_term = "%".$_GET['term']."%";
$query = "SELECT * FROM table_name WHERE column_name LIKE :term";
$result = $db->prepare($query);
$result->bindValue(":term",$ac_term);
$result->execute();

// Fetch data and store in array
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
$row_array['label'] = $row['column_name'];
$row_array['value'] = $row['column_name'];

array_push($return_arr,$row_array);
}
}
</syntaxhighlight>

<br />
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:

<syntaxhighlight lang="php">
<?php

// Include files outside of webroot
set_include_path('/var/www/surveys/test-survey');

// Fetch database credentials
require_once ('constant.php');

// Connect to database and perform query
require_once ('database.php');

// Clear query
$db = null;

// Encode results in JSON. This is required for jquery autocomplete
echo json_encode($return_arr);

?>
</syntaxhighlight>

<br />
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.
<br />

== Use autocomplete to populate several fields==

''Tested with: 1.91+, IE 7/8/9, Firefox 18''

This workaround uses the [http://jqueryui.com/demos/autocomplete/ Autocomplete widget] included with jQuery UI and the [https://code.google.com/p/jquery-csv/downloads/list 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 [https://code.google.com/p/jquery-csv/downloads/list 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<syntaxhighlight lang="php"><script type="text/javascript" src="{TEMPLATEURL}jquery.csv.js"></script></syntaxhighlight>
*Create your CSV file with 3 columns (name, ID, email) as in this example and place it in your template folder<syntaxhighlight lang="php">Bob, Bob's ID, Bob's email

Andy, Andy's ID, Andy's email

Sam, Sam's ID, Sam's email

Tony, Tony's ID, Tony's email

Fred, Fred's ID, Fred's email</syntaxhighlight>
*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<syntaxhighlight lang="php">/* Autocomplete styles */

ul.ui-autocomplete {

width: 250px !important;

padding: 5px 10px;

list-style: none;

}</syntaxhighlight>
*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<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qNameID = NN;

var qIDID = II;

var qEmailID = EE;

var url = "upload/templates/yourTemplate/yourCsvFile.csv";

// Create an array to hold the names
var namesArr = new Array();

// Grab the CSV contents
$.get(url,function(data){

// Convert CSV contents to an array of arrays
fullArray = $.csv.toArrays(data);

// Load the names array
$(fullArray).each(function(i, item){
namesArr.push(item[0]);
});

// Initialise the autocomplete plugin
$('#question'+qNameID+' input.text').autocomplete({
source: namesArr,
// Event fired when a selection is made (ui.item.value refers to the selected item)
select: function(event, ui) {
// Find the "ID" and "Email" values associated with the selected name value and load those questions
$(fullArray).each(function(i, item){
if(item[0] == ui.item.value) {
// The value from column 2 of the CSV
$('#question'+qIDID+' input.text').val(item[1]);
// The value from column 3 of the CSV
$('#question'+qEmailID+' input.text').val(item[2]);
}
});
}
});
});
});

</script></syntaxhighlight>

=Create MaxDiff question type=

See the [[Workarounds: Question design, layout and templating|Question design, layout and templating]] section for a workaround that uses JavaScript to convert an '''''Array (flexible labels) by column''''' question into a [http://en.wikipedia.org/wiki/MaxDiff MaxDiff] question type.

[[File:max_diff_596x253.gif]]

=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.

<syntaxhighlight lang="php">

<script>

numColumns=13;

numRows=18;

questionId='28417X2X24';

specialColumns=[1,12,13];

function action(obj){

locator=obj.id.replace('cbox_'+questionId, '').split('_');

row=locator[0];

column=locator[1];

//alert('Action for row,column='+row+','+column);

my_id='#cbox_'+questionId+row+'_'+column+''

if($(my_id).attr('checked') == false) {

for( var i=1; i<=numColumns; i++ ) {

if(i==column) continue;

id='#cbox_'+questionId+row+'_'+i

$(id).attr('disabled',false);

}

} else {

for( var i=1; i<=numColumns; i++ ) {

if(i==column) continue;

id='#cbox_'+questionId+row+'_'+i

aid='#answer'+questionId+row+'_'+i

$(aid).val(0);

$(id).attr('checked',false);

$(id).attr('disabled',true);

}

}

}

function customOnLoad(){

for( var row=1; row<=numRows; row++ ) {

for( var k=0; k<specialColumns.length; k++ )

{

column=specialColumns[k];

$('#cbox_'+questionId+row+'_'+column).change(function() {

action(this);

});

}

}

}

jQuery(document).ready(

function(){

customOnLoad();

}

);

</script>

</syntaxhighlight>

=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:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following script in the source of the array question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Call the exclude function using question ID
excludeOpt({QID});
});

// A function to make the last option in each array row exclusive
function excludeOpt (qID) {

var thisQuestion = $('#question'+qID)

// Add some classes to the checkbox cells
$('td.checkbox-item', thisQuestion).addClass('normalOpt');
$('tr.subquestions-list', thisQuestion).each(function(i) {
$('.normalOpt:last', this).removeClass('normalOpt').addClass('exlusiveOpt')
});

// A listener on the checkbox cells
$('td.checkbox-item', thisQuestion).click(function (event) {
handleExclusive($(this));
});

// A listener on the checkboxes
$('td.checkbox-item input[type="checkbox"]', thisQuestion).click(function (event) {
handleExclusive($(this).closest('td'));
});

function handleExclusive(thisCell) {

var thisRow = $(thisCell).closest('tr');

// Uncheck the appropriate boxes in a row
if ($(thisCell).hasClass('normalOpt')) {
$('.exlusiveOpt input[type="checkbox"]', thisRow).attr('checked', false);
}
else {
$('.normalOpt input[type="checkbox"]', thisRow).attr('checked', false);
}

// Check conditions (relevance)
$('td.checkbox-item', thisRow).each(function(i) {
var thisValue = '';
if($('input[type="checkbox"]', this).is(':checked')) {
thisValue = 1;
}
var thisSGQA = $('input[type="checkbox"]', this).attr('id').replace(/cbox_/, '');

$('input[type="hidden"]', this).attr('value', thisValue);
fixnum_checkconditions(thisValue, thisSGQA, 'hidden');
});
}
}
</script></syntaxhighlight>

==Implementation LS Version 3.x:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following script in the source of the array question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){

var thisQuestion = $('#question{QID}')

// Add some classes to the checkbox cells
$('td.checkbox-item:last-child', thisQuestion).addClass('exclusive-item');

// A function to un-check boxes
function resetCheckbox(thisItem) {
$(':hidden', thisItem).val('');
$(':checkbox', thisItem).prop('checked', false).trigger('change');
}

// A listener on the checkboxes
$(':checkbox', thisQuestion).on('change', function(e) {
if($(this).is(':checked')) {
var thisItem = $(this).closest('.answer-item');
var thisRow = $(this).closest('tr');
var items = $('td.answer-item.exclusive-item', thisRow);
if($(thisItem).hasClass('exclusive-item')) {
items = $('td.answer-item:not(.exclusive-item)', thisRow);
}
$.each(items, function(i, el) {
resetCheckbox(el);
});
}
});
});
</script></syntaxhighlight>

=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.

<syntaxhighlight lang="javascript">
$(document).ready(function() {

// Insert a new div after the progress bar
$('<div id="navigator2" />').insertAfter('#progress-wrapper');

// Style the new div
$('#navigator2').css({
'text-align':'center'
});

// Insert clones of the nav buttons in the new div
$('input.submit:eq(0)').clone().appendTo('#navigator2');
$('input.submit:eq(2)').clone().appendTo('#navigator2');

// Give the new buttons some new IDs
$('#navigator2 input.submit').each(function(i) {
var oldID = $(this).attr('id');
var newID = oldID + '2';
$(this).attr('id', newID)
});
});</syntaxhighlight>

[[File:extra_buttons.png]]

=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.

[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|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.

<syntaxhighlight lang="php"> <script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Find the survey ID
if($('input#fieldnames').length != 0) {
var fieldNames = $('input#fieldnames').attr('value');
var tmp = fieldNames.split('X');
var sID = tmp[0];
}

// Insert a new div after the progress bar
$('<div id="optOutLink" />').insertBefore('#progress-wrapper');

// Style the new div
$('#optOutLink').css({
'text-align':'center'
});

// Insert opt out url in the new div
$('#optOutLink').html('<p><a href="optout.php?lang=en&sid;='+sID+'&token;={TOKEN}">Click here to opt out of this survey.</a></p><br>');

});

</script></syntaxhighlight>

=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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following code in the source of a short text question.
#Optional: you can also add other select field to avoid collisions (e.g. for large population sample)

<syntaxhighlight lang="php">

<p>This answers are used to generate your ID. These information will be encrypted, it will not be possible in any case to identify you neither from your answers nor from your ID.</p>

<table>

<tr>

<td>Initial of your name</td>

<td>

<select id="field1">

<option value=""></option>

<option value="A">A</option>

<option value="B">B</option>

<option value="C">C</option>

<option value="D">D</option>

<option value="E">E</option>

<option value="F">F</option>

<option value="G">G</option>

<option value="H">H</option>

<option value="I">I</option>

<option value="J">J</option>

<option value="K">K</option>

<option value="L">L</option>

<option value="M">M</option>

<option value="N">N</option>

<option value="O">O</option>

<option value="P">P</option>

<option value="Q">Q</option>

<option value="R">R</option>

<option value="S">S</option>

<option value="T">T</option>

<option value="U">U</option>

<option value="V">V</option>

<option value="W">W</option>

<option value="X">X</option>

<option value="Y">Y</option>

<option value="Z">Z</option>

</select>

</td>

</tr>

<tr>

<td>Your birth month</td>

<td>

<select id="field2">

<option value=""></option>

<option value="01">January</option>

<option value="02">February</option>

<option value="03">March</option>

<option value="04">April</option>

<option value="05">May</option>

<option value="06">June</option>

<option value="07">July</option>

<option value="08">August</option>

<option value="09">September</option>

<option value="10">October</option>

<option value="11">November</option>

<option value="12">December</option>

</select>

<td>

</tr>

</table>

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

<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);

}

});

</script>

</syntaxhighlight>

=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.

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Call the phone function with the question ID and the row number

phoneTest(QQ, NN);

function phoneTest(qID, inputNum) {

// Interrupt next/submit function

$('#movenextbtn, #movesubmitbtn').click(function(){

// Some vars - modify as required

var phoneMatch = /^[0-9,+,(), ,]{1,}(,[0-9]+){0,}$/;

var msg1 = 'Please enter a valid phone number.';

// Test the input

var phoneInput = $('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val();

if(phoneInput != '' && !phoneMatch.test(phoneInput)) {

alert(msg1);

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'pink' });

return false;

}

else {

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'' });

return true;

}

});

}

});

</script>

</syntaxhighlight>

The regex is from: [http://www.regexlib.com/REDetails.aspx?regexp_id=1136 regexlib.com blank]

=Check validity of email address in subquestion=

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

<div class="simplebox">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.<br />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</div>

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.

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Call the email function with the question ID and the row number

emailTest(QQ, NN);

function emailTest(qID, inputNum) {

// Interrupt next/submit function

$('#movenextbtn, #movesubmitbtn').click(function(){

// Some vars - modify as required

var emailMatch = /^[a-zA-Z0-9\_\-]+[a-zA-Z0-9\.\_\-]*@([a-zA-Z0-9\_\-]+\.)+([a-zA-Z]{2,4}|travel|museum)$/;

var msg1 = 'Please enter a valid email address.';

// Test the input

var emailInput = $('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val();

if(emailInput != '' && !emailMatch.test(emailInput)) {

alert(msg1);

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'pink' });

return false;

}

else {

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'' });

return true;

}

});

}

});

</script>

</syntaxhighlight>

The regex is from: [http://www.regexlib.com/REDetails.aspx?regexp_id=1653 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:

<syntaxhighlight lang="php">

<script type="text/javascript">

var questionhelp="{QUESTIONHELP}";

if (questionhelp=="") {

document.write("");}

else {

document.write('<tr><td class="survey-question-help">'+ questionhelp +'</td></tr>');}

</script>

</syntaxhighlight>

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)

[[File:snap035.gif]]

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.

[[File:snap037.gif]]

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!

<syntaxhighlight lang="javascript">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('input[name="69965X2X10SQ001_SQ001"]').attr('disabled', 'disabled');

$('input[name="69965X2X10SQ001_SQ002"]').attr('hidden', 'hidden');

});

</script>

</syntaxhighlight>

[[File:snap039.gif]]

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.

[[File:suffix.png]]

Fig. 1: Suffix

[[File:prefix.png]]

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 €" suffix in the first column and an "in %" in the next 3 columns.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Call the function with the question ID followed by a comma-separated list of suffixes

addSuffix(12345, 'in €', 'in %', 'in %', 'in %');

function addSuffix() {

var qID = $(arguments)[0];

// Assign some column-specific classes

$('#question'+qID+' table.question tbody tr').each(function(i){

$('td', this).each(function(i){

$(this).addClass('answerCol-'+(i+1)+'');

});

});

// Some styling

$('#question'+qID+' table.question tbody input[type="text"]').css({

'width': '50%'

});

// Insert the suffixes

$(arguments).each(function(i, val){

if(i > 0) {

$('#question'+qID+' td.answerCol-'+i+' label').append(val);

}

});

}

});

</script></syntaxhighlight>

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

<syntaxhighlight lang="php">$('#question'+qID+' td.answerCol-'+i+' label').append(val);</syntaxhighlight>

with this

<syntaxhighlight lang="php">$('#question'+qID+' td.answerCol-'+i+' label').prepend(val);</syntaxhighlight>

=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:
#Download the file at [http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js] and upload it to your survey.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following code in the source of a short text question.

<syntaxhighlight lang="javascript">
<script src="/upload/surveys/{SID}/jquery-ui-timepicker-addon.js"></script>

<script>

$(document).ready(function(){

$('#answer{SGQ}').timepicker({
timeText: 'Time', //here translation
hourText: 'hour', //here translation
minuteText: 'minute', //here translation
closeText: 'Done' //here translation
});

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

$( "<style>"
+".ui-widget-header, .ui-datepicker-current { display:none; }"
+".ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }"
+".ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }"
+" }"
+"</style>").appendTo( "head" );

});

</script></syntaxhighlight>

=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 [http://ditio.net/2010/05/02/javascript-date-difference-calculation/ 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.

<syntaxhighlight lang="php">

<script type="text/javascript">

/*

Adapted from http://ditio.net/2010/05/02/javascript-date-difference-calculation/
*/

var DateDiff = {

inDays: function(d1, d2) {

var t2 = d2.getTime();

var t1 = d1.getTime();

return parseInt[[t2-t1)/(24*3600*1000]];

},

inWeeks: function(d1, d2) {

var t2 = d2.getTime();

var t1 = d1.getTime();

return parseInt[[t2-t1)/(24*3600*1000*7]];

},

inMonths: function(d1, d2) {

var d1Y = d1.getFullYear();

var d2Y = d2.getFullYear();

var d1M = d1.getMonth();

var d2M = d2.getMonth();

return (d2M+12*d2Y)-(d1M+12*d1Y);

},

inYears: function(d1, d2) {

return d2.getFullYear()-d1.getFullYear();

}

}

d1 = new Date({substr(DD,0,4)}, {substr(DD,5,2)}, {substr(DD,8,2)});

d2 = new Date({substr(D2,0,4)}, {substr(D2,5,2)}, {substr(D2,8,2)});

// Displays result

document.write("<br />Number of <b>days</b>: "+DateDiff.inDays(d1, d2));

document.write("<br />Number of <b>weeks</b>: "+DateDiff.inWeeks(d1, d2));

document.write("<br />Number of <b>months</b>: "+DateDiff.inMonths(d1, d2));

document.write("<br />Number of <b>years</b>: "+DateDiff.inYears(d1, d2));

// filled the numerical input with number of days (or nights)

var nDays = +DateDiff.inDays(d1, d2);

jQuery(document).ready(function() {

$(".numeric:eq(0) input.text").val(nDays);

$(".numeric:eq(0) input.text").attr('readonly','readonly');

// check if d2 > d1

$('#movenextbtn').hide();

$('#movesubmitbtn').hide();

if(nDays >= 0){

// automatic submit (uncomment if needed)

// document.limesurvey.submit();

// $('body').hide();

}

else alert("Check out date must be posterior than Check in\nPlease return to the previous page and edit your answers");

});

</script>

</syntaxhighlight>

=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.

<syntaxhighlight lang="php">
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
'use strict';
var qID1 = QQ1,
qID2 = QQ2,
q1 = $('#question' + 'QQ1' + ' .popupdate'),
q2 = $('#question' + 'QQ2' + ' .popupdate');

//if q1 loses focus, its value is taken and used as minDate in q2
q1.datepicker("option", "onClose", function (datum){
q2.datepicker( "option", "minDate", datum );
});
//q2 gets today as its maxDate
q2.datepicker( 'option', 'maxDate', new Date() );
});
</script>
</syntaxhighlight>

=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}.

<syntaxhighlight lang="javascript">
<tr><td class="survey-question-help" id=help_{QUESTION_NUMBER}>{QUESTIONHELP}</td></tr>
</syntaxhighlight>

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.

<syntaxhighlight lang="javascript">
<script>
$(document).ready(function(){
if($('#help_{QUESTION_NUMBER}').is(':empty')){
$('#help_{QUESTION_NUMBER}').hide();
}
});
</script>
</syntaxhighlight>

= 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.<br /><br />

[[File:Iat_1.png]]<br /><br />

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

Implementation is as follows:

1) [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].

2) Create your Array (Texts) with subquestions as follows:<br />
- Y scale - all of your "attribut" words or phrases<br />
- X scale - "Key Pressed" and "Elapsed Time (ms)"<br />
[[File:Iat_2.jpg]]

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:<br />
- Left association term<br />
- Right association term<br />
- Instructional text<br />
- Finished text<br />
[[File:Iat_3.png]]

4) Add the following to the end of template.js:<syntaxhighlight lang="javascript">
// A plugin to insert an IAT interface
function implicitAssociation(el, showAnswers) {

$(el).each(function() {

var thisQuestion = $(this);
var thisQuestionHelp = $('img[src$="help.gif"]', thisQuestion).parent();
var thisQuestionAnswers = $('table.question', thisQuestion).parent();
var startTime = '';
var endTime = '';
var agent = navigator.userAgent.toLowerCase();
var mobile = false;
if( /android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent) ) { // Mobile devices
mobile = true;
}

// Some classes
$(thisQuestion).addClass('iatQuestion');
$('.subquestion-list').addClass('unanswered');

// Hide the question help element
$(thisQuestionHelp).hide();

// Hide the answers
if(showAnswers != true) {
$('table.question', thisQuestion).hide();
}

// Insert IAT display
var iatTexts = $(thisQuestionHelp).text().split('||');
var iatDisplayHTML = '<div class="iatWrapper">\
<div class="iatLeftLabel">'+iatTexts[0]+'</div>\
<div class="iatRightLabel">'+iatTexts[1]+'</div>\
<div class="iatWord"></div>\
<div class="iatInstructions">'+iatTexts[2]+'</div>\
</div>\
<div class="iatMobileButtonWrapper">\
<div class="iatButton iatLeftButton">E</div>\
<div class="iatButton iatRightButton">I</div>\
<div style="width:100%; clear:both;"></div>\
</div>';
$(thisQuestionAnswers).prepend(iatDisplayHTML);

// Show a word
function iatShowWord() {
$('div.iatWord', thisQuestion).text($('.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$(document).bind('keypress.iatKeypress', function(e) {
if(e.which == 101 || e.which == 105) {
var thisRow = $('.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
if(e.which == 101) {
$('input[type="text"]:eq(0)', thisRow).val('E');
}
else {
$('input[type="text"]:eq(0)', thisRow).val('I');
}
$(document).unbind('keypress.iatKeypress');
if($('.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWord();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
}
});
}
function iatShowWordMobile() {
$('div.iatWord', thisQuestion).text($('.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$('.iatButton', thisQuestion).bind('click.iatButtonClick', function(e) {
var thisRow = $('.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
$('input[type="text"]:eq(0)', thisRow).val($(this).text());
$('.iatButton', thisQuestion).unbind('click.iatButtonClick');
if($('.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWordMobile();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions, .iatMobileButtonWrapper', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
});
}

// Start the IAT display
if(mobile == true) { // Mobile devices
$('.iatMobileButtonWrapper', thisQuestion).show();
$('.iatButton', thisQuestion).bind('click.iatStartMobile', function(e) {
$('.iatButton', thisQuestion).unbind('click.iatStartMobile');
iatShowWordMobile();
});
}
else {
$(document).bind('keypress.iatStart', function(e) { // Non-mobile devices
if(e.which == 101 || e.which == 105) {
$(document).unbind('keypress.iatStart');
iatShowWord();
}
});
}
});
} </syntaxhighlight>

<br />5) Add the following to the end of template.css:<syntaxhighlight lang="css">
/* IAT questions */

.iatWrapper {
position: relative;
width: 600px;
height: 300px;
color: #FFFFFF;
background-color: #000000;
font-size: 21px;
}

.iatLeftLabel {
float: left;
padding: 10px;
}

.iatRightLabel {
float: right;
padding: 10px;
}

.iatWord {
position: absolute;
width: 100%;
top: 35%;
text-align: center;
font-size: 36px;
color:#0F0;
}

.iatWord.done {
color:#FFFFFF;
}

.iatInstructions {
position: absolute;
width: 100%;
bottom: 0px;
padding-bottom: 10px;
text-align: center;
}

.iatMobileButtonWrapper {
display: none;
position: relative;
width: 600px;
font-size: 36px;
}

.iatButton {
float: left;
margin: 20px;
width: 100px;
padding: 2px 0 5px 0;
border: 5px solid #999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
text-align: center;
line-height: normal;
cursor: pointer;
}

.iatLeftButton {
float: left;
}

.iatRightButton {
float: right;
}</syntaxhighlight>

<br />6) To apply the plugin, add one of the two scripts below to the question source:<br />
- With hidden answer table (for normally activated survey)
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}');
});
</script></syntaxhighlight>
- With visible answer table (for testing purposes)
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}', true);
});
</script></syntaxhighlight>

== 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.<br /><br />

[[File:Demo_iat_v250.png]]<br /><br />

'''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''':
<ol>
<li>[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].</li>
<li>Create your Array (Texts) with subquestions as follows:
<ul>
<li>Y scale - all of your "attribute" words or phrases</li>
<li>X scale - "Key Pressed" and "Elapsed Time (ms)"<br />[[File:Demo_iat_v250_2.png]]</li>
</ul>
</li>
<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>
<li>Left association term</li>
<li>Right association term</li>
<li>Instructional text</li>
<li>Finished text<br />[[File:Demo_iat_v250_3.png]]</li>
</ul>
</li>
<li>Add the following to the end of template.js:<syntaxhighlight lang="javascript">// A plugin to insert an IAT interface
function implicitAssociation(el, showAnswers) {

$(el).each(function() {

var thisQuestion = $(this);
var thisQuestionHelp = $('div.question-help', thisQuestion);
var thisQuestionAnswers = $('table.subquestion-list', thisQuestion).parent();
var startTime = '';
var endTime = '';
var agent = navigator.userAgent.toLowerCase();
var mobile = false;
if( /android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent) ) { // Mobile devices
mobile = true;
}

// Some classes
$(thisQuestion).addClass('iat-question');
$('tr.subquestion-list', thisQuestion).addClass('unanswered');

// Hide the question help element
$(thisQuestionHelp).hide();
$(thisQuestionHelp).closest('.question-help-container').hide();

// Hide the answers
if(showAnswers != true) {
$('table.subquestion-list', thisQuestion).hide();
}

// Insert IAT display
var iatTexts = $(thisQuestionHelp).text().split('||');
var iatDisplayHTML = '<div class="iatWrapper">\
<div class="iatLeftLabel">'+iatTexts[0]+'</div>\
<div class="iatRightLabel">'+iatTexts[1]+'</div>\
<div class="iatWord"></div>\
<div class="iatInstructions">'+iatTexts[2]+'</div>\
</div>\
<div class="iatMobileButtonWrapper">\
<div class="iatButton iatLeftButton">E</div>\
<div class="iatButton iatRightButton">I</div>\
<div style="width:100%; clear:both;"></div>\
</div>';
$(thisQuestionAnswers).prepend(iatDisplayHTML);

// Show a word
function iatShowWord() {
$('div.iatWord', thisQuestion).text($('tr.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$(document).bind('keypress.iatKeypress', function(e) {
if(e.which == 101 || e.which == 105) {
var thisRow = $('tr.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
if(e.which == 101) {
$('input[type="text"]:eq(0)', thisRow).val('E');
}
else {
$('input[type="text"]:eq(0)', thisRow).val('I');
}
$(document).unbind('keypress.iatKeypress');
if($('tr.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWord();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
}
});
}
function iatShowWordMobile() {
$('div.iatWord', thisQuestion).text($('tr.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$('.iatButton', thisQuestion).bind('click.iatButtonClick', function(e) {
var thisRow = $('tr.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
$('input[type="text"]:eq(0)', thisRow).val($(this).text());
$('.iatButton', thisQuestion).unbind('click.iatButtonClick');
if($('tr.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWordMobile();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions, .iatMobileButtonWrapper', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
});
}

// Start the IAT display
if(mobile == true) { // Mobile devices
$('.iatMobileButtonWrapper', thisQuestion).show();
$('.iatButton', thisQuestion).bind('click.iatStartMobile', function(e) {
$('.iatButton', thisQuestion).unbind('click.iatStartMobile');
iatShowWordMobile();
});
}
else {
$(document).bind('keypress.iatStart', function(e) { // Non-mobile devices
if(e.which == 101 || e.which == 105) {
$(document).unbind('keypress.iatStart');
iatShowWord();
}
});
}
});
}</syntaxhighlight>
</li>
<li>Add the following to the end of template.css:<syntaxhighlight lang="css">/* IAT questions */

.iatWrapper {
position: relative;
width: 100%;
max-width: 600px;
height: 300px;
margin: 0 auto;
color: #D0DBE5;
background-color: #2C3E50;
font-size: 21px;
}

.iatLeftLabel {
float: left;
padding: 10px;
}

.iatRightLabel {
float: right;
padding: 10px;
}

.iatWord {
position: absolute;
width: 100%;
top: 35%;
text-align: center;
font-size: 36px;
color: #C4D1DE;
}

.iatWord.done {
color: #C4D1DE;
}

.iatInstructions {
position: absolute;
width: 100%;
bottom: 0px;
padding-bottom: 10px;
text-align: center;
}

.iatMobileButtonWrapper {
display: none;
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
font-size: 36px;
}

.iatButton {
float: left;
margin: 20px;
width: 100px;
padding: 2px 0 5px 0;
border: 5px solid #233140;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
text-align: center;
line-height: normal;
cursor: pointer;
}

.iatLeftButton {
float: left;
}

.iatRightButton {
float: right;
}</syntaxhighlight>
</li>
<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)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}');
});
</script></syntaxhighlight>
</li>
<li>With visible answer table (for testing purposes)
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}', true);
});
</script></syntaxhighlight>
</li>
</ul>
</li>
</ol>

== Version 3.x ==

Here is a custom question theme for an Implicit Association Test (IAT) in version 3.x - https://github.com/tpartner/LimeSurvey-Implicit-Association-Test

=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

<syntaxhighlight lang="javascript">
<script type="text/javascript">

/**
* Small script that adds a "X" before a checkbox.
* On click the text color of the label of the checkbox turns grey
* If the user has to choose some answers from many options, he can "delete" answers, that on first sight looks wrong
* Add the script to the question in Limesurvey (for example within the source code of the help text)
*/

//Define the X (standard is a X in capitals)
var x = "X";
css_class = "x";

/*
* Define the style of the X
* Of course you can define the style in the stylesheet - if so, the script ignores the following settings
* If there is a style, than set style var to 1
*/
var style = 0;
var size = "12px";
var weight = "bold";
var color = "red";
var cursor = "pointer";

//element type - standard is a span element
var type = "span";

//Define the new font color of the checkbox label
label_color = "#bfbfbf";

//End of configuration - start of the function

//Define the element that is added
if(style == 1) {
ele = "<"+type+" class='"+css_class+"'>"+x+"</"+type+">";
}
else {
ele = "<"+type+" class='"+css_class+"' style='font-size:"+size+"; font-weight:"+weight+"; color:"+color+"; cursor:"+cursor+";'>"+x+"</"+type+">";
}

//Get the standard font-color of the used style
st_color = $("label").css("color");

//insert the X before the checkboxes
$(document).ready(function() {
$("li").each(function(){
$(this).prepend(ele);
});
});

//bind an eventhandler on the X (delegate is used, because Limesurvey uses an old jQuery version)
var css_class_c = "."+css_class;
$(document).delegate(css_class_c,"click",function() {
var color_check = $(this).siblings("label").data("color");
if(color_check != "true") {
$(this).siblings("label").css("color",label_color).data("color","true");
$(this).siblings('input').attr('checked', false);

}
else {
$(this).siblings("label").css("color",st_color).data("color","false");

}
});

$(".checkbox").click(function () {
$(this).siblings("label").css("color",st_color).data("color","false");
});

</script>
</syntaxhighlight>

=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:

<syntaxhighlight lang="javascript">$(document).ready(function(){
$('input').keypress(
function(event){
if (event.which == '13') {
event.preventDefault();
}
});
});</syntaxhighlight>

= 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.<br /><br />

[[File:Card_sort_1.png]]<br /><br />

'''DOWNLOADS:'''<br />
- [[Media:Card_Sort.zip|Demo template]]<br />
- [[Media:Card_Sort.lss|Demo survey]].

'''IMPLEMENTATION:'''

1) [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|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:<syntaxhighlight lang="javascript">
function cardSort(qID) {

// Define some stuff...
var thisQuestion = $('#question'+qID);
var thisQuestionHelp = $('img[alt="Help"]', thisQuestion).parent();
thisQuestion.addClass('card-sort-question');

// Hide the "Help" section
thisQuestionHelp.hide();

//Insert the "card sort" elements
$('ul.questions-list', thisQuestion).parent().prepend('<div class="droppable items-start"></div><div class="items-end-wrapper" />');
$('ul:eq(0) li', thisQuestionHelp).each(function(i) {
$('.items-end-wrapper', thisQuestion).append('<div class="items-end-inner">\
<div class="items-end-text">'+$(this).html()+'</div>\
<div class="droppable items-end items-end-'+(i+1)+'" data-items-end="'+(i+1)+'"></div>\
</div>')});

// Insert the "cards"
$('li.answer-item', thisQuestion).each(function(i) {
var thisSGQA = $(this).attr('id').replace(/javatbd/, '');
var thisCode = $(this).attr('id').split('X'+qID)[1];
var thisHTML = $('label', this).html();
$('div.items-start').append('<div class="card draggable" data-sgqa="'+thisSGQA+'" data-code="'+thisCode+'">\
'+thisHTML+'\
</div>');
});

// Make the "cards" draggable
$('.draggable').draggable({
revert: "invalid",
zIndex: 2700,
helper: 'original',
start: function( event, ui ) {
$(ui.helper).addClass('ui-draggable-helper');
},
stop: function( event, ui ) {
}
});

// Set the targets for the draggables
$('.droppable.items-start').droppable({
hoverClass: 'target-hover',
accept: '.draggable.moved'
});
$('.droppable.items-end').droppable({
hoverClass: 'target-hover',
accept: '.draggable'
});

// After dropped
$('.droppable').bind('drop', function(event, ui) {

// Physically move the draggable to the target
// (the plugin just visually moves it)
// (need to use a clone here to fake out iPad)
var newDraggable = $(ui.draggable).clone();
$(newDraggable).appendTo(this);
$(ui.draggable).remove();
if($(this).hasClass('items-end')) {
$(newDraggable).addClass('moved');
}
else {
$(newDraggable).removeClass('moved');
}
$(newDraggable).removeClass('ui-draggable-helper ui-draggable-dragging').css({
'z-index':'',
'top':'auto',
'left':'auto'
});

// Now, make this new clone draggable
$(newDraggable).draggable({
revert: "invalid",
zIndex: 2700,
helper: 'original',
start: function( event, ui ) {
$(ui.helper).addClass('ui-draggable-helper');
},
stop: function( event, ui ) {
}
});
});

// Initial "card" positions
$('li.question-item input.text', thisQuestion).each(function(i) {
if($(this).val() > 0) {
$('.items-end[data-items-end="'+$(this).val()+'"]').append($('.card[data-sgqa="'+$(this).attr('name')+'"]'));
$('.card[data-sgqa="'+$(this).attr('name')+'"]').appendTo($('.items-end[data-items-end="'+$(this).val()+'"]')).addClass('moved');
}
});

// Interrupt the Next/Submit function and load the inputs
$('form#limesurvey').submit(function(){
$('.question-item input.text', thisQuestion).val(0);
$('.droppable.items-end .card', thisQuestion).each(function(i) {
var thisItemsEnd = $(this).closest('.droppable.items-end').attr('data-items-end');
var thisID = $(this).attr('data-sgqa');
$('#answer'+thisID+'').val(thisItemsEnd);
});
});
}</syntaxhighlight>

<br />5) Add the following to the end of template.css:<syntaxhighlight lang="css">
/* Card Sort */

.card-sort-question ul.subquestions-list {
/*display: none;
clear: both;*/
}

.card-sort-question .items-start {
float: left;
width: 340px;
height: 317px;
margin-top: 8px;
border: 1px solid #666;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}

.card-sort-question .items-start.target-hover {
background:#C9C9C9;
}

.card-sort-question .items-end-wrapper {
float: left;
margin-left: 20px;
width: 340px;
}

.card-sort-question .items-end {
width: 338px;
min-height: 73px;
margin-bottom: 10px;
padding-bottom: 5px;
border: 1px solid #666;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
background: #EBEBEB;
}

.card-sort-question .items-end.target-hover {
background: #C9C9C9;
}

.card-sort-question .items-end.ui-state-disabled {
opacity: 1;
filter:alpha(opacity=100);
}

.card-sort-question .items-end-text {
width: 338px;
padding-bottom: 5px;
background: #FFFFFF;
font-size: 110%;
font-weight: bold;
}

.card-sort-question .card {
display: inline-block;
width: 140px;
height: auto;
margin: 5px 8px;
padding: 3px;
border: 2px solid #2F4354;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
background-color: #43b3d1;
color: #2f4354;
font-weight: bold;
text-align: center;
line-height: normal;
}

.card-sort-question .items-end .card {
margin: 5px 7px;
}

.card-sort-question div.answer {
clear: both;
padding-top: 1px;
margin-top: 0;
}</syntaxhighlight>

<br />6) Add this to the source of the question to apply the function.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
cardSort({QID});
});
</script></syntaxhighlight>

== Version 3.x ==
Here is a custom question theme for card Sorting in version 3.x. - https://github.com/tpartner/LimeSurvey-Card-Sorting-3.x

== Version 4.x ==
Here is a custom question theme for card Sorting in version 4.x. - https://github.com/tpartner/LimeSurvey-Card-Sorting-4.x

= Q Sorting=
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.<br /><br />

== Version 3.x==
''Tested with: 3.08 - 3.15''
Custom question theme - [[Media:QSort.zip]]<br />

== Version 4.x==
''Tested with: 4.5.1''
Custom question theme - [[Media:qSort-4.x.zip]]<br />

=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:
<syntaxhighlight lang="javascript">
<script type='text/javascript' charset='utf-8'>
$( document ).ready( function() {
var this_surveyId='{SID}';
var this_groupId='{self.gid}';
var this_quesitonId='{self.qid}';
var this_self='{self.sgqa}';

// Remark for the variable 'my_targetTextBox':
// ------------------------------------
// For Text-type question (e.g. 'short free text', 'huge free text'), use : '#answer' + this_self;
// For 'Multiple Choice'-type question enabled with the 'Other' option which provides a textbox, use : '#answer' + this_self;
// For 'List (radio)'-type question enabled with the 'Other' option which provides a textbox, use : '#answer' + this_self + 'text'.
var my_targetTextBox='#answer' + this_self;

// Trim:
// -----
$( my_targetTextBox ).blur( function(){
$( this ).val( $.trim( $( this ).val() ) );
});

// Uppercase:
// ----------
// Operate for its appearance only (but have no effect to modify its intrinsic value) - display as UpperCase:
$( my_targetTextBox ).css( 'text-transform', 'uppercase' );
// Operate for its intrinsic value:
$( my_targetTextBox ).blur( function() {
$( this ).val( $( this ).val().toUpperCase() );
});
});
</script>
</syntaxhighlight>

For Text-type question (e.g. 'short free text', 'huge free text'), set the 'this_self' variable as below:
<syntaxhighlight lang="javascript">
var my_targetTextBox='#answer' + this_self;
</syntaxhighlight>

For 'Multiple Choice'-type question enabled with the 'Other' option which provides a textbox, set the 'this_self' variable as below:
<syntaxhighlight lang="javascript">
var my_targetTextBox='#answer' + this_self;
</syntaxhighlight>

For 'List (radio)'-type question enabled with the 'Other' option which provides a textbox, set the 'this_self' variable as below:
<syntaxhighlight lang="javascript">
var my_targetTextBox='#answer' + this_self + 'text';
</syntaxhighlight>

= 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.<br /><br />

'''IMPLEMENTATION:'''

1) Add the following to the end of template.js:<syntaxhighlight lang="javascript">
$(document).ready(function(){
// Apply the responsiveArray plugin with default settings
$('.array-10-pt, .array-flexible-row, .array-5-pt, .array-increase-same-decrease, .array-yes-uncertain-no').responsiveArray();
});

/*****
A plugin to insert drop-downs into arrays for small screens
Copyright (C) 2015 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 09/04/15
*****/
(function( $ ){
$.fn.responsiveArray = function(options) {

var opts = $.extend( {
chooseText: 'Please choose...'
}, options);

return this.each(function() {

var thisQuestion = $(this);
var thisQID = $(thisQuestion).attr('id').split('question')[1];

// Some classes
$(thisQuestion).addClass('responsive-array');
$('table.questions-list tr', thisQuestion).each(function(i){
$('> *', this).each(function(i){
$(this).addClass('col-'+i);
if(i != 0) {
$(this).addClass('expanded');
}
});
});

// Insert a column
$('.col-0', thisQuestion).after('<td class="dropdown-cell" />');

// Insert dropdowns
$('body').append('<select style="display:none;" class="responsive-select responsive-select-'+thisQID+'" />');
$('table.questions-list thead th.expanded', thisQuestion).each(function(i){
$('.responsive-select-'+thisQID).append('<option value="">'+$(this).text()+'</option>');
});
$('table.questions-list tbody .dropdown-cell', thisQuestion).append($('.responsive-select-'+thisQID+'').clone());
$('tr.radio-list', thisQuestion).each(function(i){
var thisRow = $(this);
$('input.radio', this).each(function(i){
$('.responsive-select-'+thisQID+' option:eq('+i+')', thisRow).attr('value', $(this).attr('id'));
});
if($('input.radio:checked', thisRow).length > 0) {
$('.responsive-select-'+thisQID+'', thisRow).val($('input.radio:checked', thisRow).attr('id'));
}
else {
$('.responsive-select-'+thisQID+'', thisRow).prepend('<option value="" selected="selected">'+opts.chooseText+'</option>');
}
});
$('.responsive-select-'+thisQID+'', thisQuestion).show();

// Listeners on radios
$('input.radio', thisQuestion).click(function(event) {
var thisRow = $(this).closest('tr');
var thisID = $(this).attr('id');
//$('option[value="'+thisID+'"]').attr('selected', 'selected');
$('.responsive-select', thisRow).val(thisID);
$('.responsive-select option[value=""]', thisRow).remove();
});

// Listeners on dropdowns
$('.responsive-select-'+thisQID+'').change(function() {
$('#'+$(this).val()+'').click();
});

});
};
})( jQuery );</syntaxhighlight>

<br />2) Add something like this to template.css (I have it set to switch at 640px but adjust that as you see fit):<syntaxhighlight lang="css">
/*****
Styles for the responsiveArray plugin
Copyright (C) 2015 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 09/04/15
*****/

.responsive-array .dropdown-cell {
display: none;
text-align: left;
padding-left: 8px;
}

.responsive-array .dropdown-cell select {
max-width: none;
}

@media screen and (max-width: 640px) {
.responsive-array table.question {
table-layout: auto;
}
.responsive-array table.question .col-0,
.responsive-array table.question .dropdown-cell {
width: 50%;
}
.responsive-array .dropdown-cell {
display: table-cell;
}
.responsive-array th.expanded,
.responsive-array td.expanded {
display: none;
}
}</syntaxhighlight>

<br />Note that the "Please choose" text is an optional setting. To change it, apply the plugin like this:<syntaxhighlight lang="javascript">
$(document).ready(function(){
// Apply the responsiveArray plugin with default settings
$('.array-10-pt, .array-flexible-row, .array-5-pt, .array-increase-same-decrease, .array-yes-uncertain-no').responsiveArray({
chooseText: 'Select one...'
});
});</syntaxhighlight>

= Van Westendorp Pricing Sliders=
== Version 2.06==

''Tested with: LimeSurvey version 2.06''

This workaround uses JavaScript to dynamically control sliders to facilitate the [http://www.5circles.com/van-westendorp-pricing-the-price-sensitivity-meter/ 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.<br /><br />

[[File:Test_Van_Westendorp_Pricing_206_v2.png]]<br /><br />

'''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''':

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your Multiple Numeric question with subquestions as seen in the image above.
#Add the following to the end of template.js:<syntaxhighlight lang="javascript">function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}

/*****
A jQuery plugin to facilitate the Van Westendorp pricing research methodology
Copyright (C) 2016 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 19/10/16
*****/
(function( $ ){

$.fn.vWPricing = function(options) {

var opts = $.extend( {
order: [1, 2, 3, 4],
randomOrder: false
}, options);

return this.each(function() {

var thisQuestion = $(this);

thisQuestion.addClass('vwp-question');

// Add some attributes and set the slider max/min values
var itemsLength = $('li.question-item', thisQuestion).length;
$('li.question-item', thisQuestion).each(function(i) {
$(this).attr('data-item', (i+1));
$('.ui-slider', this).attr('data-slider', (i+1));

var thisSliderMin = $('.ui-slider', this).slider('option', 'min');
$('.ui-slider', this).slider('option', 'min', thisSliderMin+(i));
var thisSliderMax = $('.ui-slider', this).slider('option', 'max');
$('.ui-slider', this).slider('option', 'max', thisSliderMax-((itemsLength-1)-i));
});

// Slider order
if(opts.randomOrder == true) {
shuffleArray(opts.order);
}
$(opts.order).each(function(i, val) {
$('ul.subquestions-list', thisQuestion).append($('li.question-item[data-item="'+val+'"]', thisQuestion));
});

// Listeners on the sliders
$('.ui-slider', thisQuestion).on('slide', function(event, ui) {
handleVwpSliders(this, ui.value);
});
$('.ui-slider', thisQuestion).on('slidestop', function(event, ui) {
handleVwpSliders(this, ui.value);
});

// A function to handle the siders
function handleVwpSliders(el, sliderVal) {
var thisRow = $(el).closest('li');
var movedIndexNum = $(el).attr('data-slider');

$('input.text', thisRow).val(sliderVal);
$('.slider-callout', thisRow).html($('input.text', thisRow).val());

var lowerSliders = $('.ui-slider', thisQuestion).filter(function() {
return $(this).attr('data-slider') < movedIndexNum;
});
var higherSliders = $('.ui-slider', thisQuestion).filter(function() {
return $(this).attr('data-slider') > movedIndexNum;
});

$(lowerSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider');
var newSliderVal = sliderVal-(movedIndexNum-thisIndexNum);
if($(this).slider('option', 'value') > newSliderVal) {
var thisRow = $(this).closest('li');
$(this).slider('option', 'value', newSliderVal);
$('input.text', thisRow).val(newSliderVal);
$('.slider-callout', thisRow).html($('input.text', thisRow).val());
}
});
$(higherSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider');
var newSliderVal = sliderVal+(thisIndexNum-movedIndexNum);
if($(this).slider('option', 'value') < newSliderVal) {
var thisRow = $(this).closest('li');
$(this).slider('option', 'value', newSliderVal);
$('input.text', thisRow).val(newSliderVal);
$('.slider-callout', thisRow).html($('input.text', thisRow).val());
}
});
}
});

};
})( jQuery );</syntaxhighlight>
#Add the following to the end of template.css (this is for a copy of [http://extensions.sondages.pro/skeletonquest-rwd-for-limesurvey/ Denis Chenu's SkeletonQuest template]):<syntaxhighlight lang="css">/**** Van Westendorp Pricing ****/

.vwp-question ul.subquestions-list,
.vwp-question ul.subquestions-list li {
display:block;
}

.vwp-question ul.subquestions-list li {
margin-bottom: 15px;
}

.vwp-question ul.subquestions-list .slider-label {
display:block;
padding: 0.3em 0.5em 0.7em;
width: auto;
max-width: 100%;
text-align: left;
}

.vwp-question .slider-element {
display: block;
margin-left: 2%;
width:90%;
max-width: 32em;
}</syntaxhighlight>
#To apply the plugin, add this script the multiple-numeric question source.
There are two options to adjust<br /> -'''order''' - this is the order that your subquestions will be displayed (default, 1, 2, 3, 4)<br /> -'''randomOrder''' - if set to true, the '''order''' option will be overridden and the subquestion order will be randomized (default, false)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').vWPricing({
order: [1, 2, 3, 4],
randomOrder: false
});

});
</script></syntaxhighlight>
== Version 2.5x==

''Tested with: LimeSurvey version 2.54.5''

This workaround uses JavaScript to dynamically control sliders to facilitate the [http://www.5circles.com/van-westendorp-pricing-the-price-sensitivity-meter/ 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.<br /><br />

[[File:Test_Van_Westendorp_Pricing_25x.png]]<br /><br />

'''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''':

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your Multiple Numeric question with subquestions as seen in the image above.
#Add the following to the end of template.js:<syntaxhighlight lang="javascript">function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}

/*****
A jQuery plugin to facilitate the Van Westendorp pricing research methodology
Copyright (C) 2016 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 19/10/16
*****/
(function( $ ){

$.fn.vWPricing25 = function(options) {

var opts = $.extend( {
order: [1, 2, 3, 4],
randomOrder: false
}, options);

return this.each(function() {

var thisQuestion = $(this);

thisQuestion.addClass('vwp-question');

// Add some attributes and set the slider max/min values
var itemsLength = $('.question-item', thisQuestion).length;
$('.question-item', thisQuestion).each(function(i) {
var thisInput = $('input[type=text]', this);
var thisVal = $(thisInput).val();

$(this).attr('data-item', (i+1));
$(thisInput).attr('data-slider-index', (i+1));

// Slider initial settings
setTimeout(function() {
var thisSliderMin = $(thisInput).bootstrapSlider('getAttribute', 'min');
$(thisInput).bootstrapSlider('setAttribute', 'min', thisSliderMin+(i));
var thisSliderMax = $(thisInput).bootstrapSlider('getAttribute', 'max');
$(thisInput).bootstrapSlider('setAttribute', 'max', thisSliderMax-((itemsLength-1)-i));

if(thisVal == '') {
$(thisInput).val('');
}
}, 200);

});

// Slider order
if(opts.randomOrder == true) {
shuffleArray(opts.order);
}
$(opts.order).each(function(i, val) {
$('.subquestion-list.questions-list', thisQuestion).append($('.question-item[data-item="'+val+'"]', thisQuestion));
});

// Listeners on the sliders
$('input[type=text]', thisQuestion).on('slide', function(event) {
handleVwpSliders(this, $(this).bootstrapSlider('getValue'));
});
$('input[type=text]', thisQuestion).on('slideStop', function(event) {
handleVwpSliders(this, $(this).bootstrapSlider('getValue'));
});

// A function to handle the siders
function handleVwpSliders(el, sliderVal) {
var movedIndexNum = $(el).attr('data-slider-index');

var lowerSliders = $('input[type=text]', thisQuestion).filter(function() {
return $(this).attr('data-slider-index') < movedIndexNum;
});
var higherSliders = $('input[type=text]', thisQuestion).filter(function() {
return $(this).attr('data-slider-index') > movedIndexNum;
});

$(lowerSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider-index');
var newSliderVal = sliderVal-(movedIndexNum-thisIndexNum);
if($(this).bootstrapSlider('getValue') > newSliderVal) {
var thisRow = $(this).closest('.question-item');
var thisTooltip = $('.tooltip', thisRow);
$(this).bootstrapSlider('setValue', newSliderVal);
$('.tooltip-inner', thisTooltip).text($('input.text', thisRow).val());
thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');

var validationInput = $('input.em_sq_validation', thisRow);
$(validationInput).val($('input.text', thisRow).val())
fixnum_checkconditions($(validationInput).attr('value'), $(validationInput).attr('name'), $(validationInput).attr('type'));
}
});
$(higherSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider-index');
var newSliderVal = sliderVal+(thisIndexNum-movedIndexNum);
if($(this).bootstrapSlider('getValue') < newSliderVal) {
var thisRow = $(this).closest('.question-item');
var thisTooltip = $('.tooltip', thisRow);
$(this).bootstrapSlider('setValue', newSliderVal);
$('.tooltip-inner', thisTooltip).text($('input.text', thisRow).val());
thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');

var validationInput = $('input.em_sq_validation', thisRow);
$(validationInput).val($('input.text', thisRow).val())
fixnum_checkconditions($(validationInput).attr('value'), $(validationInput).attr('name'), $(validationInput).attr('type'));
}
});
}

// Listener on resizing (override the bootstrap callout behaviour)
$(window).resize(function() {
setTimeout(function() {
$('input[type=text]', thisQuestion).each(function(i) {
if($(this).val() != '') {
var thisRow = $(this).closest('.question-item');
var thisTooltip = $('.tooltip', thisRow);
$('.tooltip-inner', thisTooltip).text($.trim($(this).val()));
console.log($('.tooltip-inner', thisTooltip).text());
thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');
}
});
}, 1);
});
});
};
})( jQuery );</syntaxhighlight>
#Add the following to the end of template.css (this is for a copy of the default template):<syntaxhighlight lang="css">/*********** Van Westendorp Pricing ***********/

.vwp-question .control-label {
margin-bottom: 35px;
}

.vwp-question .withslider {
margin-bottom: 0px;
}

.vwp-question .slider-container {
margin-bottom: 2.5em;
margin-top: 3.5em;
}

.vwp-question .slider.slider-horizontal .slider-handle {
margin-top: -5px;
}

@media (max-width: 600px){

.vwp-question .withslider {
padding-left: 0;
padding-right: 0;
}
}

@media (max-width: 480px){

#outerframeContainer,
.vwp-question .control-label,
.vwp-question .slider-container > div {
padding-left: 0;
padding-right: 0;
}

.vwp-question .slider-container > div > div {
padding-left: 5px;
padding-right: 5px;
}
}</syntaxhighlight>
#To apply the plugin, add this script the multiple-numeric question source.
There are two options to adjust<br /> -'''order''' - this is the order that your subquestions will be displayed (default, 1, 2, 3, 4)<br /> -'''randomOrder''' - if set to true, the '''order''' option will be overridden and the subquestion order will be randomized (default, false)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').vWPricing25({
order: [1, 2, 3, 4],
randomOrder: false
});

});
</script></syntaxhighlight>
== 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".<br />

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

'''Implementation''':

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your Multiple Choice question with the last subquestions as "Select all".
#Add the following script to the source of the question text:<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:complete',function() {

// Identify this question
var thisQuestion = $('#question{QID}');

// Initial states
if($('input[type="checkbox"]:last', thisQuestion).is(':checked')) {
$('input[type="checkbox"]', thisQuestion).not(':last').prop('checked', true).prop('disabled', true);
}

// Listener on the last checkbox
$('input[type="checkbox"]:last', thisQuestion).on('change', function(e) {
if($(this).is(':checked')) {
$('input[type="checkbox"]', thisQuestion).not(this).prop('checked', true).prop('disabled', true);
}
else {
$('input[type="checkbox"]', thisQuestion).not(this).prop('checked', false).prop('disabled', false);
}

// Fire ExpressionScript
$('input[type="checkbox"]', thisQuestion).not(this).each(function(i) {
checkconditions(this.value, this.name, this.type);
});
});

// Re-enable checkboxes so data gets stored
$('#moveprevbtn, #movenextbtn, #movesubmitbtn').on('click', function(){
$('input[type="checkbox"]', thisQuestion).prop('disabled', false);
});
});
</script></syntaxhighlight>

= Pay Off Matrix Interface =
== LimeSurvey Version 2.67.x==

This workaround converts a list-radio type question into a Pay Off Matrix interface.<br /><br />

[[File:Pay_off_matrix_1.png]]<br />
[[File:Pay_off_matrix_2.png]]<br /><br />

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

'''Implementation''':

#Create your List Radio question with with the upper and lower values for each answer separated by "pipe" characters.<br />[[File:Pay_off_matrix_3.png]]
#Assign a class "pay-off-matrix" to that question.<br />[[File:Pay_off_matrix_4.png]]
#Add the following to the end of template.js:<syntaxhighlight lang="javascript">$(document).on('ready pjax:complete',function() {
// Apply the payOffMatrix plugin
$('.pay-off-matrix').payOffMatrix({
topText: 'You receive',
bottomText: 'Others receive'
});
});

/*****
A jQuery plugin to convert a list-radio question to a Pay Off Matrix
Copyright (C) 2017 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 1.0
Create date - 25/09/2017
*****/

(function($){

$.fn.payOffMatrix = function(options) {

var opts = $.extend( {
topText: '',
bottomText: ''
}, options);

return this.each(function() {

var thisQuestion = $(this);

// Insert the matrix elements
$('div.answer', thisQuestion).prepend('<div class="pom-outer-wrapper"><div class="pom-wrapper">\
<div class="pom-row-label top">'+opts.topText+'</div>\
<div class="pom-items-wrapper">\
</div>\
<div class="pom-row-label bottom">'+opts.bottomText+'</div>\
<div style="clear:both;" />\
</div></div>');

$('.answer-item', thisQuestion).each(function(i) {
var thisValue = $('input.radio', this).attr('value');
var itemTop = $.trim($('.label-text', this).text()).split('|')[0];
var itemBottom = $.trim($('.label-text', this).text()).split('|')[1];
$('.pom-items-wrapper', thisQuestion).append('<div class="pom-item">\
<div class="pom-item-label-wrapper top">\
<div class="pom-item-label">'+itemTop+'</div>\
</div>\
<div class="pom-item-button-wrapper">\
<div class="pom-item-button" data-value="'+thisValue+'"></div>\
</div>\
<div class="pom-item-label-wrapper bottom">\
<div class="pom-item-label">'+itemBottom+'</div>\
</div>\
<div class="under-480" style="clear:both;" />\
</div>');
});
$('.pom-item:first', thisQuestion).addClass('first');
$('.pom-item:last', thisQuestion).addClass('last');

// Listeners on the matrix events
$('.pom-item-button, .pom-item-label', thisQuestion).on('click', function(e) {
$('.pom-item', thisQuestion).removeClass('active-item');
$(this).closest('.pom-item').addClass('active-item');
var thisValue = $(this).closest('.pom-item').find('.pom-item-button').attr('data-value');
$('input.radio[value="'+thisValue+'"]', thisQuestion).trigger('click');
}).hover(
function() {
$(this).closest('.pom-item').addClass('hover');
}, function() {
$( this ).closest('.pom-item').removeClass('hover');
}
);
});

};
})(jQuery);</syntaxhighlight>
#Add the following to the end of template.css:<syntaxhighlight lang="css">/*****
Styles for the payOffMatrix plugin
Copyright (C) 2017 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 1.0
Create date - 25/09/2017
*****/

.pay-off-matrix .answers-list {
position: absolute;
left: -9999em;
}

.pom-wrapper {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 648px;
}

.pom-item {
float: left;
}

.pom-row-label {
clear: both;
text-align: center;
font-size: 16px;
}

.pom-row-label.top {
padding-top: 5px;
}

.pom-row-label.bottom {
padding-bottom: 5px;
}

.pom-item-label-wrapper {
padding: 5px 8px;
}

.pom-item-label-wrapper.top {
margin-bottom: 3px;
}

.pom-item-label-wrapper.bottom {
margin-top: 3px;
}

.pom-item {
width: 11.11111111111111%;
}

.pom-item-label {
border: 1px solid #233140;
background: #EBEBEB;
-moz-transition: background-color 300ms ease;
-o-transition: background-color 300ms ease;
-webkit-transition: background-color 300ms ease;
transition: background-color 300ms ease;
text-align:center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
font-size: 16px;
line-height: 30px;
}

.pom-item.hover .pom-item-label,
.pom-item.active-item .pom-item-label {
font-weight: bold;
cursor: pointer;
}

.pom-item.active-item .pom-item-label {
background: #233140;
color: #FFFFFF;
}

.pom-item-button-wrapper {
padding: 5px 15.27777777777778%;
background: #CCD5DD;
width: 69.44444444444444%;
width: auto;
}

.pom-item.first .pom-item-button-wrapper {
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-khtml-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}

.pom-item.last .pom-item-button-wrapper {
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-khtml-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}

.pom-item-button {
height: 0;
width: 100%;
padding-top: 100%;
background: #FFFFFF;
-moz-transition: background-color 300ms ease;
-o-transition: background-color 300ms ease;
-webkit-transition: background-color 300ms ease;
transition: background-color 300ms ease;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
}

.pom-item.hover .pom-item-button {
background-color: #5b7fa5;
}

.pom-item.active-item .pom-item-button,
.pom-item.active-item .pom-item-button:hover {
background-color: #233140;
cursor:default;
}

@media only screen and (max-width: 480px) {
.pom-outer-wrapper {
margin: 0 auto;
padding-top: 50px;
width: 256px;
}
.pom-wrapper {
display:block;
position: relative;
}

.pom-row-label {
bottom: 100%;
left: 0;
margin-left: -25px;
position: absolute;
text-align: center;
width: 150px;
background-color: transparent !important;
}

.pom-row-label.bottom {
left: auto;
right: 0;
margin-right: -25px;
padding: 5px 0 0 0;
}

pom-items-wrapper {
vertical-align: middle;
}

.pom-item {
float: none;
width: auto;
}

.pom-item-label-wrapper {
float: left;
margin: 0 !important;
padding: 7px 24px;
}

.pom-item-label {
width: 50px;
}

.pom-item-button-wrapper {
float: left;
margin: 0 5px;
padding: 5px;
width: 46px;
}

.pom-item.first .pom-item-button-wrapper {
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-khtml-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}

.pom-item.last .pom-item-button-wrapper {
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-khtml-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

.pom-item .under-480 {
display: block !important;
}
}</syntaxhighlight>

== LimeSurvey Version 3.x==
Here is a custom question theme for LS 3.x - https://github.com/tpartner/LimeSurvey-Social-Value-Orientation

Workarounds: Survey behaviour

2023-05-11T17:31:34Z

Tpartner: /* Random question sets */

LimeSurvey users have been very creative in finding out how to change the behavior of a survey. All their workarounds are listed here. You can find some '''similar approaches''' at:
* [[Workarounds: Manipulating a survey at runtime using Javascript]]
* [[Workarounds: Question design, layout and templating]]

<div class="simplebox"><center><br />'''Please keep in mind that these workarounds are not official LimeSurvey extensions - they are solutions that users have created for themselves.<br /><span style='color:#EE0000,#FFFFFF'>Therefore LimeSurvey can't offer guarantees or support for these solutions.</span><br />If you have questions, please contact the users that, thankfully, shared their solutions with the community.'''<br /><br /></center></div>

__TOC__

=Respond multiple times using the same computer=

''Tested with: ''

With this workaround it will be possible to respond multiple times to the same survey. Normally there will be a message saying that the computer already received the answers. To prevent this you have to add the following code to the URL that leads to the survey ''"&newtest;=Y"''.

Example of the "new" url:

<syntaxhighlight lang="php">

http://www.yourdomain.org/limesurvey/index.php?sid=12345&newtest;=Y

</syntaxhighlight>

=Allow Multiple Survey Invitations to the same Email Address to be completed in the Same Browser Session=

''Tested with: ''

'''Problem:''' When Multiple Surveys Invitations are activated during the same browser session, the second and subsequent survey activation results in a system message stating that the survey has already been completed. A user would have to close the browser and reopen in order to complete the next survey inviation.

'''Workaround:''' Edit the Survey Invitation Email (also the reminder) Template. Append "&newtest;=Y" to the {SURVEYURL} line so it looks like this {SURVEYURL}&newtest;=Y

Save the edited templates.

Note: The save of this template edit does not seem to work when using HTML invitations, only text based invitations.

=Add a data field to manually add data=

''Tested with: ''

If you want to add some additional data after a user has finished a survey you can use the dataentry screen of the admin panel. You have to set up the survey as follows:
# Create a question that can store the needed data at the end of the survey.
# Use [[Setting conditions|conditions]] on the previous question so that whatever is answered at the previous question the following question '''doesn't appear'''.
# To enter several questions repeat steps 1-2. Don't forget to adapt the conditions.
# Go to the admin panel, chose the survey from the list and go to ''Dataentry screen for survey''.
# Enter the additional data

=Randomization=

{{Alert|All these workarounds can be replaced using the[[Question_type_-_Short_free_text#Randomization_group_name_.28random_group.29|randomization group name attribute]] (located in the question settings) or [[Question_groups_-_introduction#Create_question_group||randomization group]] at group level.}}

==Totally random survey order==

''Tested with:''

If you want to use random order globally for all questions in your survey, you can do it like this, depending on what type of question routine you use.
# If you use Group by Group add "shuffle($_SESSION<nowiki>[</nowiki>'grouplist']);" at the end of UpdateSessionGroupList($language) function in index.php
# If you use Question by Question or All-in-one put "shuffle($_SESSION<nowiki>[</nowiki>'fieldarray'])" at the end of buildsurveysession() function in index.php

'''Important:''' This modifications affect all surveys in application, you may want to use an if statement with surveyid to make this work with specific surveys e.g.

<syntaxhighlight lang="php">

if ($surveyid==12345)

{

do_some_shuffling()

}

</syntaxhighlight>
*Saving survey is not possible because this workaround doesn't save random order for specyfic tokens.
*Solution doesn't care about language changes so if you have on in your survey this will not work.
*Using conditions is not possible because conditions rely on a fixed and pre-determined order of questions.

==Randomize the order of ''sequences of groups'' in a survey==

''Tested with: 1.86''

You can randomize the order of subsequences of groups in a survey. E.g., you may have a survey comprising the below group structure
*demographics
*itemgroup1
*itemgroup2
*itemgroup3
*interlude
*itemgroup4
*itemgroup5
*itemgroup6
*closingcomments

and want to separately randomize the presentation order of itemgroup1...3 and itemgroup4...6 while maintaining the position of the other three groups. A working code modification is described in the PDF file [http://bugs.limesurvey.org/file_download.php?file_id=1228&type;=bug randomize_groups] which is downloadable from the Bugtracker at [http://bugs.limesurvey.org/view.php?id=557].
* '''Note:''' The code will randomize the order of subsequent groups in isolation, not across different sequences. Hence in the above example, you might get ''itemgroup1, 3, 2'' but never ''itemgroup1, 4, 2''
* '''Note:''' The survey presentation format must be ''Group by Group'' not ''Question by Question''
* '''Note:''' If you wish to select only a limited number of groups from a larger set, replace

<syntaxhighlight lang="php">$scratcharr = array_merge($scratcharr, $randarr);</syntaxhighlight>with

<syntaxhighlight lang="php">$scratcharr = array_merge($scratcharr, array_slice($randarr,0,x));</syntaxhighlight>

where x is the number of elements/groups that you wish to include. In the example above '''$scratcharr = array_merge($scratcharr, array_slice($randarr,0,2));''' would select two out of the possible three groups in each group set.
* '''Warning:''' The code is compatible with conditions operating on items within a group but most possibly produces erroneous behavior with conditions between groups
* '''Warning:''' In a multi-language survey, the groups get randomized each time the language is changed. A simple workaround is to remove the language changer from the question pages of the survey leaving it on the welcome page only. (Though not totally foolproof this does lower the risk of unnecessary language changes.)

==Randomly show X out of Y question groups==
This workaround allows you to randomly show X out of Y question groups

Tested with: Version 2.06+ Build 150612 Default template

Workaround created by user "OMdev"

*Set up your survey to use JavaScript.
*Create a multi question with y number of answer options. Randomize this question from question settings.
*Select top X number of check boxes by add the following script to the source of this question.
<syntaxhighlight lang="javascript">
<script>
$(function(){
$('body').hide() //Hiding multi select question using JavaScript . You can also hide it with CSS.
var showNumberOfGroups = 2; //enter number of check box to select from top ie number of groups to show randomly.
var $cboxs = $('input:checkbox');
for(var i=0;i<showNumberOfGroups;i++){
$cboxs.eq(i).prop('checked',true);
}
document.getElementById('movenextbtn').click();//auto submitting page.
})
</script>
</syntaxhighlight>
*Add group relevance from the multi select question.

*You can download lss from below link.
https://www.limesurvey.org/en/forum/can-i-do-this-with-limesurvey/102176-show-x-out-of-y-question-groups#126288

==Selective Question Randomization==

''Tested with: 1.82''

With this workaround you are able to select which groups within a survey should have their questions randomized and not kept in order. This workaround also adds a tab in the question ordering page. The extra tab allows you to enable / disable question randomization for the selected group.

A working code and database modification is described in the PDF file [http://bugs.limesurvey.org/file_download.php?file_id=1939&type;=bug selective_random_questions] which is downloadable from the Bugtracker at [http://bugs.limesurvey.org/view.php?id=3107].

'''Note:''' This might not work when adding conditions or assessments to the survey.

==Randomize the order of questions within individual groups - JavaScript solution==

''Tested with: 1.85+ (7557), IE 6/7, Firefox 3.0, Safari 3.2''

This workaround allows you to randomize the order of questions in individual groups. It uses JavaScript/jQuery to apply this randomization to only those groups that you wish and requires no modification of the core files when updating the installation.

The script uses a cookie to "remember" the shuffled order of the questions for the duration of the session so if a respondent navigates away from the group and returns, they will see the same question order. However if the survey is submitted or the session expires the questions will be re-shuffled.

A couple of cautions about the script are:
#If the survey is saved, the questions will be re-shuffled when it is accessed again (as with the PHP solution).
#The question shuffling may play havoc with conditions within a group (as with the PHP solution).
#The script has been tested with all templates shipped with 1.85+ but if you have a custom template with "question" in the ID of division(s) (ie <div id="<span style='color:red'>question</span>Holder">) it may fail - the script looks for all divs with IDs starting with "question" and adds them to an array to be shuffled.

There is a small demonstration [http://www.partnersinc.biz/surveys//index.php?sid=84767&newtest=Y&lang=en here].

Put simply, the script:
#Checks cookies to see if the questions have already been shuffled for this group and session.
#If so - displays the questions in that order.
#If not - creates an array of all of the questions in the group, shuffles the array, sets a cookie with the shuffled array contents, displays the questions in the shuffled order.

Implementation is as follows:
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript (see [[Optional settings#Security|documentation here]])..
#Create your group and questions.
#In the source of the group description add the following onload function (see [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script]]).

Onload code:

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

function shuffleQuestions() {

// Create an array to hold question IDs

var qArray = new Array();

// Find the group ID of the page

var fieldNames = $( 'input#fieldnames' ).attr('value');

var tmp = fieldNames.split('X');

var sID = tmp[0];

var gID = tmp[1];

// A function to get the value of a cookie by name

function getCookie ( cookieName ) {

var results = document.cookie.match ( '(<div class="simplebox">|;) ?' + cookieName + '=([</div>;]*)(;|$)' );

if ( results ) {

return ( unescape ( results[2] ) );

}

else {

return null;

}

}

// Get the session name

var sessionName = getCookie ( 'PHPSESSID' );

// Check to see if the question order has already been shuffled in this session

var cookieArray = getCookie ( 'sArray' + gID + '_' + sessionName );

// If already shuffled, use that question order

if ( cookieArray ) {

//qArray = $.trim(cookieArray);

qArray = cookieArray.split(',');

}

// If not, go ahead and shuffle

else {

// Load the IDs of all questions on the page into the array

$( 'div[id<div class="simplebox">="question"]' ).each(function(i) {

qArray.push($( this ).attr('id'));

});

// Shuffle the questions array

function shuffle(o){

for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);

return o;

}

shuffle(qArray);

// Set a cookie with the value of the shuffled array

var today = new Date();

today.setTime( today.getTime() );

var expires = 2 * 1000 * 60 * 60 * 24; // Expire the cookie in 2 days

var expiresDate = new Date( today.getTime() + (expires) );

document.cookie = 'sArray' + gID + '_' + sessionName + '=' + qArray + ';expires=' + expiresDate.toGMTString();

}

// Wrap the questions in a div

$( 'div[id</div>="question"]' ).wrapAll( document.createElement('div') );

$( 'div[id<div class="simplebox">="question"]:eq(0)' ).parent().attr('id', 'qWrapper');

$( 'div#qWrapper' ).css({

'padding':0,

'margin':0

});

// Insert the questions into the wrapper in the shuffled order

$.each(qArray, function(i, val){

$( 'div#' + val + '' ).appendTo( $( '#qWrapper' ) );

});

}

shuffleQuestions();

});

</script>

</syntaxhighlight>

==Randomise the order of questions ''within'' groups==

''Tested with: ''

You can randomize the order questions of within groups (i.e. without interleaving questions from different groups) like this:

1 Call a custom function from the last line of buildsurveysession() before the return statement in index.php:

<syntaxhighlight lang="php">

$_SESSION['fieldarray'] = withinGroupsShuffle();

</syntaxhighlight>

2. Add these custom functions at the end of the same file:

<syntaxhighlight lang="php">

$currentGid;

function withinGroupsShuffle() {

global $currentGid;

$groupArray = array();

$shuffledArray = array();

foreach ($_SESSION['grouplist'] as $group) {

$currentGid = $group[0];

$groupArray = array_filter($_SESSION['fieldarray'], "questionInGroup");

shuffle($groupArray);

$tmp = $shuffledArray;

$shuffledArray = array_merge($tmp, $groupArray);

$groupArray = array();

}

return $shuffledArray;

}

function questionInGroup($question) {

global $currentGid;

return ($question[5] == $currentGid) ? 1 : 0;

}

</syntaxhighlight>

(''I'm new to PHP, so please make changes if you can make the code shorter or more elegant'')

This could be combined with the method mentioned above for shuffling the order of groups:

<syntaxhighlight lang="php">

shuffle($_SESSION['grouplist']);

</syntaxhighlight>

I don't know how this code affects or is affected by conditions or tokens! This code has the same limitations as the global randomisation above: it applies to all groups in all surveys. It would be nice to add a group-level parameter like randomise_questions = [0|1], but I can't find a mechanism for doing that.

==Randomize all questions in "All In One" mode - even if they are place in groups.==

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

This workaround will randomize all questions when using "All In One" mode, even if they are place in groups. This may be useful if you want to use group assessments and display all questions on a single page in a random order.

Notes:
*The workaround is tested in the default template and may need slight tweaks for others.
*It is NOT tested with conditions.

Implementation is as follows:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Add the following script to the source of one of the questions.

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

shuffleQuestions();

function shuffleQuestions() {

// Hide the group wrappers

$('div[id</div>="group-"]').hide();

// Create and insert a new question wrapper

var qWrapper = '<div id="qWrapper">\

<table class="group"> \

<tbody> \

<tr> \

<td> \

</td> \

</tr> \

</tbody> \

</table>\

</div>';

$('div[id<div class="simplebox">="group-"]:last').after(qWrapper);

$( 'div#qWrapper td' ).css({'padding-top':'10px'});

// Create an array to hold question IDs

var qArray = new Array();

// Load the IDs of all questions on the page into the array

$('div[id</div>="question"]').each(function(i) {

qArray.push($(this).attr('id'));

});

// Shuffle the questions array

function shuffle(o){

for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);

return o;

}

shuffle(qArray);

// Insert the questions into the new question wrapper in the shuffled order

$.each(qArray, function(i, val){

$('div#' + val + '').appendTo($('#qWrapper td:first'));

});

}

});

</script></syntaxhighlight>

==Random question sets==
===Pre 2.0===
''Tested with: 1.85+ (7557), IE 6/7, Firefox 3.0, Safari 3.2''

This workaround, in conjunction with the [[Workarounds: Survey behaviour#Randomize the order of questions within individual groups - JavaScript solution|randomizing questions script]], allows you to display a random set of questions in a group.

JavaScript is used to first shuffle the question order and then hide the number of questions that you stipulate, effectively giving respondents a random question set. So if you have 5 questions in your group and choose to hide 2, the respondents will be presented with a random 3 questions.

A brief explanation of the script is:
*The questions are shuffled (see [[Workarounds: Survey behaviour#Randomize the order of questions within individual groups - JavaScript solution|randomizing questions]]) and their IDs placed in an array.
*The number of questions to be shown is calculated and their IDs are moved to a new array.
*All questions in the first array are hidden - this effectively hides the first '''''n''''' questions on the page so you'll get a random set of questions displayed.
*An asterisk is prepended to the remaining questions (remove this if your questions are not mandatory).
*When the next/submit button is clicked, all remaining questions are checked for an answer. If any are unanswered, their text is turned red, an alert is popped up and the next/submit is aborted (remove this if your questions are not mandatory).

A cookie is used to "remember" the shuffled order of the questions for the duration of the session so if a respondent navigates away from the group and returns, they will see the same question set. However if the survey is submitted or the session expires, the questions will be re-shuffled and a new set will be displayed. Therefor this workaround should not be used with surveys that can be saved.

A couple of cautions about the script are:
#If the survey is saved, the questions will be re-shuffled when it is accessed again and a new question set will be displayed.
#The question shuffling may play havoc with conditions within a group.
#The script has been tested with all templates shipped with 1.85+ but if you have a custom template with "question" in the ID of division(s) (ie <div id="<span style='color:red'>question</span>Holder">) it may fail - the script looks for all divs with IDs starting with "question" and adds them to an array to be shuffled.
#The script may need to be modified to display the "Mandatory" asterisk in templates other than the default - see below.

Implementation is as follows:
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript (see [[Optional settings#Security|documentation here]]).
#Create your group with all questions non-mandatory (we'll make them mandatory later with JavaScript).
#In the source of the group description add the following script (see [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]]).
#Modify the function call at the end of the script for the number of questions to be hidden and the mandatory error text.

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

function shuffleQuestions() {
// Create an array to hold question IDs
var qArray = new Array();

// Find the group ID of the page
var fieldNames = $( 'input#fieldnames' ).attr('value');
var tmp = fieldNames.split('X');
var sID = tmp[0];
var gID = tmp[1];

// A function to get the value of a cookie by name
function getCookie ( cookieName ) {
var results = document.cookie.match ( '(<div class="simplebox">|;) ?' + cookieName + '=([</div>;]*)(;|$)' );
if ( results ) {
return ( unescape ( results[2] ) );
}
else {
return null;
}
}

// Get the session name
var sessionName = getCookie ( 'PHPSESSID' );
// Check to see if the question order has already been shuffled in this session
var cookieArray = getCookie ( 'sArray' + gID + '_' + sessionName );
// If already shuffled, use that question order
if ( cookieArray ) {
//qArray = $.trim(cookieArray);
qArray = cookieArray.split(',');
}
// If not, go ahead and shuffle
else {
// Load the IDs of all questions on the page into the array
$( 'div[id<div class="simplebox">="question"]' ).each(function(i) {
qArray.push($( this ).attr('id'));
});
// Shuffle the questions array
function shuffle(o){
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
}

shuffle(qArray);

// Set a cookie with the value of the shuffled array
var today = new Date();
today.setTime( today.getTime() );
var expires = 2 * 1000 * 60 * 60 * 24; // Expire the cookie in 2 days
var expiresDate = new Date( today.getTime() + (expires) );
document.cookie = 'sArray' + gID + '_' + sessionName + '=' + qArray + ';expires=' + expiresDate.toGMTString();
}

// Wrap the questions in a div
$( 'div[id</div>="question"]' ).wrapAll( document.createElement('div') );
$( 'div[id<div class="simplebox">="question"]:eq(0)' ).parent().attr('id', 'qWrapper');
$( 'div#qWrapper' ).css({
'padding':0,
'margin':0
});

// Insert the questions into the wrapper in the shuffled order
$.each(qArray, function(i, val){
$( 'div#' + val + '' ).appendTo( $( '#qWrapper' ) );
});
}

shuffleQuestions();

function hideQuestions(numberToHide, mandatoryMsg) {
// Create an array of the IDs of all questions on the page
var questions = new Array();
$( 'div[id</div>="question"]' ).each(function(i) {
questions.push($( this ).attr('id'));
});

// Remove the "shown" questions and place them in a new array
var questionsLength = questions.length;
var shownQuestions = questions.splice(numberToHide,questionsLength-numberToHide);

// Hide the remaining questions
$.each(questions, function(i, val){
$( 'div#' + val + '' ).hide();
});

// Add an asterisk to the "shown" questions
// NOTE: Comment this section out if questions are not mandatory
$( 'td.questiontext' ).prepend( '<span class="asterisk">*</span>');

// Interrupt the submit function and validate mandatory questions
// NOTE: Comment this section out if questions are not mandatory
$('form#limesurvey').submit(function(){
// Override the built-in "disable navigation buttons" feature
$('#moveprevbtn, #movenextbtn, #movesubmitbtn').attr('disabled', '');

// Loop through all "shown" questions and check for answer
var answered = 0;
$.each(shownQuestions, function(i, val){
if ( $( 'div#' + val + ' input.radio:checked' ).length == 0 ) {
$( 'div#' + val + '' ).css('color', 'red');
answered = 1;
}
else {
$( 'div#' + val + '' ).css('color', '');
}
});

if ( answered == 1 ) {
alert ( mandatoryMsg );
return false;
}
else {
return true;
}
});
}

// Call the hide function
// Edit here for number of question to hide and mandatory message
hideQuestions(2, 'Please complete all questions');
});
</script>

</syntaxhighlight>

To add the asterisk to non default templates, replace ''$( 'td.questiontext' ).prepend( '<span class="asterisk">*</span>');'''' with:

- basic - ''$( 'td.be' ).prepend( '<span class="asterisk">*</span>');''

- bluengrey - Not possible to insert asterisk in correct location

- business_grey - ''$( 'div.questiontext' ).prepend( '<span class="asterisk">*</span>');''

- clear_logo - ''$( 'td.be' ).prepend( '<span class="asterisk">*</span>');''

- default - ''$( 'td.questiontext' ).prepend( '<span class="asterisk">*</span>');''

- eirenicon - Not possible to insert asterisk in correct location

- limespired - ''$( 'div.survey-question-text' ).prepend( '<span class="asterisk">*</span>');''

- mint_idea - ''$( 'div.survey-question-text' ).prepend( '<span class="asterisk">*</span>');''

- sherpa - ''$( 'div.survey-question-text' ).prepend( '<span class="asterisk">*</span>');''

- vallendar - Not possible to insert asterisk in correct location

===Version 2.0 And Newer===
Here is a link to a sample survey showing how to do this with Relevance - [[ExpressionScript sample surveys#Randomly Ask A Specific Number Of Questions In A Group (a subset of the questions)|Randomly Ask A Specific Number Of Questions In A Group (a subset of the questions)]]

==Randomization - ''Assign People Randomly'' To Surveys==

''Tested with: ''

This is a very easy way to assign people randomly to surveys, I think experts do it in other ways, but it works for me.

''LINK.PHP:''
<syntaxhighlight lang="php"><?php
$db = @file("link.txt"); // path to .txt file
$anz = @count($db);
srand((double)microtime()*1000000); // random numbers
$random = rand(1,$anz);
print $db[$random-1];
?>
</syntaxhighlight>

''LINK.TXT:''
<syntaxhighlight lang="php">
<meta http-equiv="refresh" content="1;url=http://www.survey1.com">
<meta http-equiv="refresh" content="1;url=http://www.survey2.com">
</syntaxhighlight>
''Only one link per line!''

''INDEX.PHP:''
<syntaxhighlight lang="php">
<html>
<head><title>title</title>

<?php
include("link.php");
?>

</head>
<body>

<table width=100% height=100%>
<tr>
<td valign=middle>
<center><font size=5>loading ... </font></center>
</td>
</tr>
</table>

</body>
</html>
</syntaxhighlight>

==Random Redirect responders to surveys==
''Tested with: ''

As the workaround above, this one assign randomly (uniform distribution) people to multiple surveys in easier way, but with the same outcome: every survey has the same probability to be accessed by a responder.

1. Copy and paste the code below in a text editor.
2. Replace the URLs with those of your surveys, and save it as index.php
3. Create a new directory in your server.
4. Upload the file in that directory and give the link (http://www.yourdomain.com/newdirectory) to the responders.

<syntaxhighlight lang="php">
<?php
$urls = array("www.site1.com",
"www.site2.com",
"www.site3.com");
$url = $urls[array_rand($urls)];
header("Location: http://$url");
?>
</syntaxhighlight>

=Prefilling survey elements=

There are some ways to pre-fill elements in a survey. The data to prefill an answer can be passed by URL if it matches a certain format.

==Prefilling survey answers using the survey URL==
''Tested with: 1.80 and later''

You can prefill answers to questions in your survey by passing the [[SGQA identifier]], and the answer, as a parameter of your survey URL. This feature will only work where the survey is commenced immediately upon entering the URL (so it won't work if you use CAPTCHA's to restrict access, or the registration page).

You'll need to ensure that the answer you pass is the correct format for the question you are attempting to prefill - for example - multiple option questions should contain a "Y" to check a box. List type questions need the correct answer code. To be certain which codes to pass, complete a survey manually with the prefilled answer(s) you want, and then export the results as question codes and answer codes(not full text). This will give you both the correct SGQA identifier (the name of the column), and the correct format for the answer.

<div class="simplebox">Starting with version 1.92+, you can use [[ExpressionScript#Access to Variables|qcode naming]] for the variables in addition to, or instead of, using SGQA naming.</div>

<div class="simplebox">In '''version 2.x''' the link for a prefill have to look like that: http://www.example.com/index.php/survey/index/sid/712544/newtest/Y?712544X99X2151=gelb&712544X99X2152=12345 <br> And if your question code is QCODE and CODE2, you can use it like that : http://www.example.com/index.php/survey/index/sid/712544/newtest/Y?QCODE=gelb&CODE2=12345
It's important to add "newtest/Y" to the link.</div>

'''Example:'''

<div class="simplebox">http://www.example.../index.php?sid=1234&1234X43X123=Y</div>

With 2.0, if your url is like this /survey/sid/1234, you have to use:
<div class="simplebox">http://www.example.../survey/sid/1234/1234X43X123/Y</div>

When the user gets to that question, the "Y" will be prefilled as the answer to question 123 in group 43 in survey 1234.

'''Example Single-Choice:'''

<div class="simplebox">http://www.example.../index.php?sid=1234&1234X43X123=A2</div>

With 2.0, if your url is like this /survey/sid/1234, you have to use:
<div class="simplebox">http://www.example.../survey/sid/1234/1234X43X123/A2</div>

If you like to prefill a single choice question (answer-code A1 - X ), you have to write this. If you export the results of this question, you will see, that this kind of question save the answer code as result in table. Use in any case the capital "X" in the link!

===Prefilling survey answers using the survey URL and hiding the Answer===

Starting with version 1.87 every question has a property 'Always hide this question' which can be used for this purpose.

==Prefilling a date question with the current date==

''Tested with: 1.80RC3''

Workaround created by user "Mazi"

Using the [[Workarounds: Survey behaviour#Prefilling survey answers using the survey URL|workaround mentioned above]] you can prefill the current date for a date question. Instead of using the common link to a survey which looks like this

<div class="simplebox">http://www.yourdomain.org/limesurvey/index.php?sid=53298&newtest;=Y&lang;=de</div>

you create an additional script, let's call it date.php. This script contains the following code:

<syntaxhighlight lang="php">

<?php

$date = date("Y-m-d");

header("Location: http://www.yourdomain.org/limesurvey/index.php?sid=53298&newtest;=Y&lang;=de&53298X15X102=$date");

?>

</syntaxhighlight>

The script determines the current date and calls the survey with a certain URL. The current date is attached as the answer for a certain date question using [http://docs.limesurvey.org/tiki-index.php?page=SGQA+identifier SGQA identifier]. Don't forget to '''adjust the SID and SGQA identifier''' according to your survey/group/question ID!

Upload the new ''date.php'' file into your limesurvey directory. You can then call the survey using this link:

<div class="simplebox">http://www.yourdomain.org/limesurvey/date.php</div>

Things to watch out for:
* Date questions always use the internal date data format of the database which has to be YYYY-MM-DD!
* You have to adjust the SID at the URl.
* Also adjust the SGQA identifier (SIDXGIDXQID) according to your survey.
* This solution doesn't work if you use tokens at your survey.

=Offer option to change answers later=

''Tested with: ''

When having a closed access survey using a token table it is possible to offer the opportunity to change answers later. Normally after having submitted the answers a token is marked as "used". To prevent this do as follows:
* set your survey to question-by-question mode (or group-by-group mode)
* set the survey to Non anonymous + Allow persistence for token answers
* activate survey and create your token table
* add at least one question of type boilerplate (which contains just some text). This is necessaray to give some instructions to the user like "''Your answers have been recorded to the DB, if you're sure you won't modify them, you can submit your response. If unsure, please quit your browser now and get back later with the private URL you've received''.

By not submitting the survey the user is still able to change the answers later.

=Use general password for accessing a survey=

If you don't want to use tokens but a general password to access a survey you can set your survey to "allow public access". Don't create a token table but use the following workaround:
# Create a short text question first
# Create the other questions
# Use conditions on all the other questions. You can use regular expressions to validate the string entered at the short text question. Just validate a certain password. If the password is correct the following questions are shown.
# Create a boilerplate question which just says "invalid password" which is shown if the user entered a wrong password.

=Create token on the fly and Edit completed survey=

Warning: The link for the code link is wrong (June 2013)

When having a close token survey you can create a token on the fly by giving as parameters sid and token.

In addition if someone has already completed a survey he can review his answers and correct them.

[http://bugs.limesurvey.org/view.php?id=2982 Just put this script attached at the bugtracker ticket into limesurveys root directory]

'''Prerequisites''':
# Anonymous answers? No (This survey is NOT anonymous.)
# Enable Token-based answers persistence? Yes
# Switch to closed-acces mode

'''Example''':

<div class="simplebox">http://www.example.com/limesurvey180/newtoken.php?sid=98761&token;=12345</div>

where Survey id = 98761 your survey's id and token=12345 a token (any token actually)
# The first time the token will be created and you you will redirect to anwser the surrvey
# If you wont complete the survey and call the script with the same parameters you will be redirect to the same case in order to finish the survey
# If you finish the survey and call the script with the same parameters you will see restart the survey with your previews answers prefiled so you can change them
# Back to 3

this is valid for all survey in the installation but you can make a filter so it wont be valid for every survey.

'''Reference'''
*You can find the code provided by user "janokary" and a short explanation at the LimeSurvey Bug & Feature Tracker: [http://bugs.limesurvey.org/view.php?id=2982]

=multiple 'completed' with only one token=

''Tested with: 1.71''

Whit a closed survey, each token work only one time. Sometime we need the possibility to complete a particular survey several time with the same token. This works only if you survey is set to non-anonymous answers and to use datestamps.

Here is an example for the survey id '71314'. Don't forget to adapt your own sid.

Edit ''index.php '' to in the function submittokens() replace lines ~ 1312 :

<syntaxhighlight lang="php">

if (bIsTokenCompletedDatestamped($thissurvey))

{

$utquery .= "SET completed='$today'\n";

}

}

else

{

$utquery .= "SET completed='Y'\n";

</syntaxhighlight>with lines :

<syntaxhighlight lang="php">

if (bIsTokenCompletedDatestamped($thissurvey))

{

//multiple token only for survey 71314

if ($surveyid == '71314') {

$utquery .= "SET completed='N'\n";

}else {

$utquery .= "SET completed='$today'\n";

}

}

else

{

//$utquery .= "SET completed='Y'\n";

</syntaxhighlight>

We never update the database with the completed date and time for this survey.

'''Warning''' : a limitation of this code is that you never recieve a confirmation mail for the completed.

=Loop question(s)=

''Tested with: 1.85''

There is no real loop option within LimeSurvey 1.x. To loop a question an initial question to determine the number of loops is needed. Looping is then done using a condition workaround:

1. Create a single choice question asking "How many X do you want to rate", possible answers 1, 2, 3, 4, 5.

2. Create up to 5 following questions asking "Please rate item 1/2/3/...".

3. Check manual -> conditions and read it carefully.

4. Set conditions like

a) "Only show Q3 (Rate item 2) IF Q1 (How many...) was answered 2

OR Q1 (How many...) was answered 3

OR Q1 (How many...) was answered 4

OR Q1 (How many...) was answered 5"

b) "Only show Q4 (Rate item 3) IF Q1 (How many...) was answered 3

OR Q1 (How many...) was answered 4

OR Q1 (How many...) was answered 5"

c) Q5... see above

d) Q6...

Of course Q2 is always shown, the following question will be added by conditions depending on what the user answered at Q1.

=Prevent accidentially closing the survey=

Sometimes you want to ask the user to confirm that they want to close an incomplete survey and/or use the back/reload buttons (which might break LimeSurvey).

A solution can be done in javascript, as discussed in the forum: https://www.limesurvey.org/en/community-services/forums/can-i-do-this-with-limesurvey/96384-prevent-accidentially-closing-the-survey

You can add this functionality in the template.js file:
<syntaxhighlight lang="javascript">

//FEATURES: (2015-03-27) Now with fix for iframes (e.g. file uploader) and the template editor
function goodbye(e) {
if(!$('body', top.document).hasClass('submitted') && !$('#completed').length && !$('.templateeditor', top.document).length) { //check if a button was used to navigate OR the survey is completed OR the template is displayed in the template editor

if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = 'Are you sure you want to quit this survey?'; //This is displayed on the dialog for IE

//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}

return 'Are you sure you want to quit this survey?'; // For chrome
}
}

window.onbeforeunload = goodbye;

$(document).on('click', '.button, .changelang, [name="move"]', function(event){ //added .changelang here, please add other classes if you know which should be allowed to navigate
$('body', top.document).addClass('submitted');
});
</syntaxhighlight>

=Alternate system for Ranking=

Sometimes default ranking are not usable for your survey. But Expression manager unique function can easily be used for other question type.

* With an 'Array' question where answer are number from 1 to X (X is the max number of choice to rank).
** 'Question validation equation': <code>unique(self)</code>
* With a 'Multiple numerical input' question :
** 'Question validation equation': <code>unique(self) and count(self)==max(self) </code>
** 'Sub-question validation equation': <code>(is_empty(NUMBER_SQ001) or is_int(NUMBER_SQ001)) and (is_empty(NUMBER_SQ002) or is_int(NUMBER_SQ002)) ...</code> to have only integer value set
* With a 'Array (Numbers) ' question :
** 'Question validation equation': <code>unique(self) and count(self)==max(self) </code>

Demonstration can be found here : [http://limesurvey.sondages.pro/714997.html Demonstration of alternate ranking solution] , lss file : [[media:Limesurvey_survey_lotofranking.lss]]

Workarounds: Question design, layout and templating

2023-05-11T17:30:38Z

Tpartner: /* Star Rating System Using List (Radio) Question */

This section more or less deals with styling your survey, adjusting the layout and setting up special question types. You can find '''similar information''' at these pages:
* [[The template editor]]
* [[Workarounds: Manipulating a survey at runtime using Javascript]]
* [[Workarounds: Survey behaviour]].

<div class="simplebox"><center><br />'''Please keep in mind that these workarounds are not official LimeSurvey extensions - they are solutions that users have created for themselves. <span style='color:#EE0000'>Therefore LimeSurvey can't offer guarantees or support for these solutions.</span><br />If you have questions, please contact the users that, thankfully, shared their solutions with the community.'''<br /><br /></center></div>

__TOC__

=Different progress indicator=

==Version 1.87 and later:==

Add the following to the end of template.js. It will find the progress value and insert it into the element following the progress bar.

It should be pointed out that I had to introduce a delay in firing the function because the progress value is not calculated until after template.js is called. The delay is set at 1/10 of a second but you may be able to reduce that.

<syntaxhighlight lang="php">

// Display progress value

function setProgValue() {

var progress = $('#progressbar').attr('aria-valuenow');

$('#progress-post').text(progress+'%').show();

}

$(document).ready(function(){

$('#progress-post').hide();

setTimeout('setProgValue()',100);

});

</syntaxhighlight>

If you want to hide the "0%" before the progress bar, add the following to the end of template.css:

<syntaxhighlight lang="php">
#progress-pre {

display: none;

}

</syntaxhighlight>

=Delete unwanted gaps in question title=

''Tested with: ''

When copying data (questions, answers, ...) from MS Word or other applications into the editor there might occur some gaps in the question title.

There are two solutions to this:
# Use popup mode and manually delete unwanting extra html tags (requires html knowledge).
# Disable paste word feature: Tweak your limesurvey-config.js file in limesurvey/admin/scripts/fckeditor.26 and set the following option to true:

<syntaxhighlight lang="php">FCKConfig.ForcePasteAsPlainText = true ;</syntaxhighlight>

After that clear you browser cache and try again.

=How to change the <font-size> tags using CSS=

''This workaround was deleted because it is outdated. Such changes can be done by [[The template editor#Styling questions with CSS|adjusting template.css]] of your template.

=Question type variation: Scale with bars (one and two sided)=

''Tested with: ''

Some methodogical issues to think about: Very often a common scale as 1 to 5 or -2 to +2 fits all needs, as the shown subject is clearly defined as positive or negative. As soon as you would reduce the influence from the question and scale on the respondent, you will need something neutral to determine tendences, emphases and so on.

So I put up a new variation of the one and two sided array question:

ttp://www.limesurvey.org/images/fbfiles/images/example_bar_scale.jpg

In my example the left side reads "strategical planning" and the right side "operative business". None of these are purely negative or positive, so the bars only show in which direction the balancing point moves.

To realize a question as shown above just do as follows:

Set up as many bars as you will need (in my example there are four different bars in total) with a graphic program like PAINT .NET, GIMP or similar ones (yes, you may also use commercial software like Photoshop). To prevent the bars from looking twitchy, designate the size in advance. I did one bar 60x15 px, one 45x15px, one 30x15px and at last 15x15px. Save them as PNG, JPG or GIF.
# Create a new label set within Lime. Call it whatever you like.
# Enter a code number at first, then press the pencil symbol to enter the editor.
#Press the "Insert / edit image" button and upload the bar you want to insert with the FCK upload tool. Then choose the uploaded picture, save and leave the FCK editor.
#The row in the lable editor now shows an <img>-tag which refers to your bar picture.
#Repeat the above described steps as often as needed to build up your bar scale.

=Doing a Likert Scale=

''Tested with: ''

A Likert Scale is a special type of the Semantic Differential question where several item shall be rated on different scales, each marked at the beginning and at the end with opposite statements.

To do this in LimeSurvey just follow these steps:
#Create a label set with values from 0 to 7 (for the classic Likert Scale - feel free to choose other ranges).
#Create a new question and choose Array (Flexible Labels) as question type.
#Assign the Likert Scale label set to this question.
#Enter your answers as follows:

<syntaxhighlight lang="php"><DIV style="white-space: nowrap;">ITEM statement1|statement2</div></syntaxhighlight>

The white-space style is to avoid line breaks which would ruin the whole scale. feel free to insert non-breakable spaces between the ITEM and statement1 to define the margin between these to strings.

=Alternate background colour of questions=

''Tested with: 1.85+ (7191)''

To alternate the background colour of questions, open the ''template.css'' of your template with the Template Editor or a text editor and modify the ''Question styles'' section to include the following style.

<syntaxhighlight lang="php">

div#question2 td.questiontext,

div#question4 td.questiontext,

div#question6 td.questiontext {

background-color: #E0EBF8;

}

</syntaxhighlight>

Be sure to apply the style to all of the questions you would like modified using their question IDs (''question2, question4, question6'' in this case). Question IDs are displayed when creating or editing questions - see below:

[[File:qid_1_493x173.gif]]

Here the question ID is #question80 .

=Embedding audio in questions=

''Tested with: 1.85+ (7191), IE 7, FireFox 3''

Audio clips can be embedded in most question text or answer text. In this example, using the default template, I've embedded clips into the answers of an '''''Array (Yes/No/Uncertain)''''' question to ask respondents how they feel about some sounds. The resulting question will look like this.

[[File:audioTest_595x202.gif]]

It's accomplished by placing the following code in each of the answers.

<syntaxhighlight lang="php">

<embed height="20" width="128" autostart="false" controls="console"

loop="true" volume="50" src="{TEMPLATEURL}audio_1.mp3"></embed>

</syntaxhighlight>

Some notes about the code:
*The ''audio_1.mp3'' part will be different for each answer (it's the audio file name).
*In this case the audio files are residing in the template folder being used for this survey (that's where ''{TEMPLATEURL}'' points to) but they can be placed anywhere if you use an absolute URL in the ''src'' parameter - something like ''src="http://mysite.com/audio/audio_1.mp3"''
*If the audio file doesn't exist where the ''src'' parameter indicates, the player will not appear.
*You'll need to insert the code into the answers using the source screen - click on "Edit answers", click the pencil beside the text box, click "Source" in the pop-up, enter the code and save it with the little diskette icon.
*You may need to turn off the XSS filter - see the documentation for [http://docs.limesurvey.org/tiki-index.php?page=Global+settings&structure;=English+Instructions+for+LimeSurvey#Security Global settings].

Although the above example places the audio in the answer text of the question, the same principles can be used to place it in the question text itself. Something like this perhaps.

[[File:audioTest_595x154.gif]]

=Hiding inputs of a "Multiple options with comments" question=

There may be times when you want to hide some of the input boxes of a '''''Multiple choice question type with comments''''' question as in the image below:

[[File:hidden_inputs_541x168.gif]]

This can be accomplished with CSS (see [[The template editor#Styling questions with CSS|Styling questions in LimeSurvey 1.8]]). For each input that you want to hide, add the following style to your template.css file:

<syntaxhighlight lang="css">
#answer11111X22X33Acomment {
display: none;
}
</syntaxhighlight>

Where 11111 is your survey ID, 22 is your group ID, 33 is your question ID and A is the answer code.

Note that you will still see columns for the hidden inputs in your data but they will be empty.

=Multiple question types in array=

''Tested with: 1.90 - 1.92+, IE 7/8/9, Firefox 13, Safari 5, Chrome 10''

[[Media:limesurvey_survey_62584.lss|Download the sample survey]]

This workaround allows you to present multiple question types in what appears to be an array - as depicted in the image below and [http://www.partnersinc.biz/surveys//index.php?sid=62584&newtest=Y&lang=en demonstrated here] (download the sample survey - [[Media:limesurvey_survey_62584.lss|limesurvey_survey_62584.lss]]). This example uses the default template but should be adaptable to any template using divisions for question containers.

[[File:inline_questions_700x228.png]]

Basically what we do is take groups of questions (5 in this case), wrap them in a division and make them line up nicely horizontally and vertically. The width of the survey is also fixed to prevent wrapping issues. We do this with a JavaScript/jQuery function that inserts the necessary wrappers and then modifies styles so everything behaves properly. The top row is 5 boilerplate questions with the "column headers" as question text (the first just has a blank space). The following rows are a boilerplate with the "row headers" followed by 4 assorted questions.

It should be noted that using conditions on these questions may result in unexpected behavior. If a question is hidden by conditions, the question(s) to the right of it will move over to take its place.

Implementation is as follows:
#Create your questions keeping in mind how they will lay out when grouped into rows (in this example - boilerplate, yes/no, short text, numeric, dropdown, and repeat).
#In the source of the first boilerplate question add the function below (see [http://manual.limesurvey.org/wiki/Workarounds:_Manipulating_a_survey_at_runtime_using_Javascript#How_to_use_Script_.28eg._JavaScript_etc..29_in_LimeSurvey.3F How to use script]).
#Modify the number of rows, number of columns and the start placement in the function call (line 6) as required (the example uses 4 rows and 5 columns and the "array" starts with the third question on the page).

The code may look intimidating at first but it's actually fairly simple. I've laid it out as sequentially as possible and purposely used few shortcuts and many comments to make it easier to follow.

Notes:
*If you use question types other than boilerplate, short text, list dropdown, numeric or yes-no, you'll need to add to the last section of code, where it hides the question text and formats the inputs for display this way.
*Any extra questions on the page should follow this grid of questions, not precede them.
* If you use boilerplate as question type you should add after:
<syntaxhighlight lang="javascript">
// Hide the question text elements in non-boilerplate questions
$('div.questionCell td.questiontext').parent().hide();
</syntaxhighlight>
the following 2 lines
<syntaxhighlight lang="javascript">
//repair boilerplate questioncells
$('div.boilerplate td.questiontext').parent().show();
</syntaxhighlight>

Javascript code:
<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {
// Call the "sideBySide" function with number of rows, columns and start position
sideBySide(4, 5, 3);
});

function sideBySide(rows, columns, startQuestion) {

/*********** Display multiple questions side by side ***********/

if ($('div.qRow1').length == 0) {

var rowNum = 0;
var colNum = 1;
var rowList = new Array();

//////// Add question classes for later use ////////

// Loop through all questions and add row and column specific classes
$('div[id^="question"]').each(function(i) {
if(i >= (startQuestion-1) && rowNum < rows) { // This IF condition only needed if there are questions before or following the "inline" questions
$(this).addClass('qRow'+rowNum+'').addClass('qCol'+colNum+'').addClass('inlineQuestion');
if(rowNum == 0 && colNum > 1) {
$(this).addClass('columnLabel');
}
if(rowNum > 0 && colNum == 1) {
$(this).addClass('rowLabel');
}
else if(rowNum > 0 && colNum > 1) {
$(this).addClass('questionCell');
}
if(colNum == columns) {
rowList.push('qRow'+rowNum+'');
rowNum++;
colNum = 1;
}
else {
colNum++;
}
}
else {
$(this).addClass('normalQuestion');
}
});

//////// Survey layout manipulation ////////

// Fix the width of the survey
$('table.outerframe').css({
'width': '900px'
});

// Wrap each "row" in a wrapper div
$(rowList).each(function(i) {
$('.'+this+'').wrapAll('<div id="inlineWrapper'+i+'" class="inlineRow" />');
});

// Style the wrapper divs
$('.inlineRow').css({
'width': '850px',
'margin': '0 auto 0 auto',
'clear': 'both'
});

$( '.inlineRow:first' ).css({
'margin-top': '10px'
});

// Get all the questions to sit politely side by side
$( '.inlineQuestion' ).css({
'float': 'left',
'height':'41px',
'overflow':'hidden',
'margin-bottom': '-8px'
});
$( '.inlineQuestion .questionhelp' ).hide();
$( '.inlineQuestion .survey-question-help' ).parent().hide();

// A little space under the last row
$( '.inlineRow:last .inlineQuestion' ).css({
'margin-bottom': '10px'
});

// Any questions not displayed inline (this is only needed if there are questions following the "inline" questions)
$( '.normalQuestion' ).css({
'clear': 'both'
});

//////// Column manipulation ////////

// Set the column widths - can be set individually if necessary
// Must add up to less than 100%
$( '.qCol1' ).css({
'width': '12%'
});

$( '.qCol2, .qCol3, .qCol4, .qCol5' ).css({
'width': '22%'
});

//////// Question manipulation ////////

// Hide the answer element in boilerplate questions
$( 'div.boilerplate td.answer' ).parent().hide();

// Hide the question text elements in non-boilerplate questions
$('div.questionCell td.questiontext').parent().hide();

// Push the question tables to 100%
$( 'div.inlineRow table' ).css({
'width': '100%'
});

// Get everything to line up nicely vertically
$( '.inlineQuestion td.questiontext, .inlineQuestion td.answer p' ).css({
'text-align': 'center'
});

// Adjust cell heights so everything lines up nicely horizontally
$( '.inlineQuestion td.answer, .inlineQuestion td.questiontext' ).css({
'height':'35px',
'overflow':'hidden',
'padding':'0.5em'
});
$( '#inlineWrapper0 .inlineQuestion' ).css({ 'height':'50px' });
$( '#inlineWrapper0 td.questiontext' ).css({
'height':'50px'
});

// Yes-no question styles
$( 'div.yes-no ul' ).css({
'text-align': 'center',
'font-size': '90%',
'margin': '0',
'padding-bottom': '5px'
});
$( 'div.yes-no li' ).css({
'padding-right': '1.5em'
});
$( 'div.yes-no td.answer' ).css({
'padding-bottom': '0'
});

// Short-text question styles
$( 'div.text-short input' ).css({
'width': '125px',
'margin-left': '0'
});

// Numeric question styles
$( 'div.numeric input' ).css({
'width': '125px',
'margin-left': '0'
});
$( 'div.numeric p.tip' ).css({
'display': 'none'
});

// Get rid of the margins around select boxes
$( 'p.question' ).css({ 'margin':'0' });
}
}
</script>
</syntaxhighlight>
<br /><br />

=Star Rating System=

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

This workaround uses the [http://www.fyneworks.com/jquery/star-rating/ jQuery Star Rating Plugin] to display a series of stars that are used to generate a rating value. This value is then passed to either a hidden numeric input question or a hidden list radio question. Both methods are outlined below - use one or both depending on whether you want to use [Assessments|assessments].

The plugin uses a series of radio inputs to generate the stars (more about these below). It allows the use of whole or partial stars as shown in the image below.

[[File:star_rating_700x324.png]]

==Star Rating System Using Numeric Input Question==

Use this method if you would like your rating data to be collected as a numeric value and don't want to use [[Assessments|LimeSurvey assessments]] - it's a little easier to implement.

'''Implementation is as follows:'''
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])
#[http://www.fyneworks.com/jquery/star-rating/ Download the plugin] and place the following included files in your template folder:
##jquery.MetaData.js
##jquery.rating.css
##jquery.rating.js
##delete.gif
##star.gif
#In the <head> section of your startpage.pstpl, add the following code to link to the files.

<syntaxhighlight lang="php">

<script type="text/javascript" src="{TEMPLATEURL}jquery.rating.js" charset="utf-8"></script>

<script type="text/javascript" src="{TEMPLATEURL}jquery.MetaData.js" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}jquery.rating.css" />

</syntaxhighlight>

5. Create a numeric input question and then in the source of the question add as many radio inputs as star segments. For example, if you would like 5 stars, each with half-segments, you would need 10 radio inputs and that would give rating values from 1-10.

Don't confuse these inputs with the actual question, they are just for the plugin's use.

At this point your question source code should look something like below. Make sure that all inputs have the same name. Each input must have the same title as value and these must be sequential. Don't worry about how all of this looks in the WSYSWYG editor - the plugin is going to hide these inputs and replace them with stars.

<syntaxhighlight lang="php">

Q1 - Some question text here.<br /><br />

<div id="starContainer">

<input type="radio" class="star { split:2 }" title="1" value="1" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="2" value="2" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="3" value="3" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="4" value="4" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="5" value="5" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="6" value="6" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="7" value="7" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="8" value="8" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="9" value="9" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="10" value="10" name="q1Rate" />

</div>

</syntaxhighlight>

6. A note on split stars. The stars in the above example are split in half by the ''{ split:2 }'' metadata. So if you don't want split stars, your inputs would look like:

'''<input type="radio" class="star" title="1" value="1" name="q1Rate" />'''

And stars split into third-segments would look like:

'''<input type="radio" class="star { split:3 }" title="1" value="1" name="q1Rate" />'''

7. Finally, in the source of the question add the following function after your inputs. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]])

Some notes on the code:
*Replace "SSSSS", "GG", "QQ" in the function call at the end with the survey ID, group ID and question ID respectively.
*The code will hide the numeric input and pass the rating values into it as they are changed. If the rating is canceled the numeric input is nullified. If a respondent navigates away from the page then returns the code "remembers" the previous rating and displays the stars accordingly.
*If you want to apply it to more numeric questions on the same page simply add more calls with the appropriate IDs. (eg. handleRatingNumeric(11111, 22, 1); handleRatingNumeric(11111, 22, 2); ...) .

Code:

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

function handleRatingNumeric (sID, gID, qID) {

// Hide the numeric input

$('#question' + qID + ' td.answer').parent().hide();

// Get a previous rating (if any) and use it to initialize the star display

var rating = $('#answer' + sID + 'X' + gID + 'X' + qID + '').val();

if ( rating != '' ) {

$('#question' + qID + ' input.star').rating('select', rating);

}

// Listener on the star rating cancel element

$('#question' + qID + ' div.rating-cancel').click(function(event) {

// Nullify the rating if the Cancel element is clicked

rating = '';

$('#answer' + sID + 'X' + gID + 'X' + qID + '').val(rating);

});

// Listener on the star rating elements

$('#question' + qID + ' div.star-rating').click(function(event) {

// Find the value of the highest clicked star and pass it into the text input

$('#question' + qID + ' div.star-rating-on').each(function(i) {

rating = $(this).children('a').html( );

});

$('#answer' + sID + 'X' + gID + 'X' + qID + '').val(rating);

});

}

// Call the function for the numeric question

handleRatingNumeric (SSSSS, GG, QQ);

});

</script>

</syntaxhighlight>

==Star Rating System Using List (Radio) Question==

Use this method if you would like to use [[Assessments|assessments]].

'''Implementation is as follows:'''

1. Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])

2. Set up the template to use custom onload functions. (See the [[Workarounds: Manipulating a survey at runtime using Javascript#Custom onload function|workaround here]])

3. [http://www.fyneworks.com/jquery/star-rating/ Download the plugin] and place the following included files in your template folder:
*jquery.MetaData.js
*jquery.rating.css
*jquery.rating.js
*delete.gif
*star.gif

4. In the <head> section of your startpage.pstpl, add the following code to link to the files.

<syntaxhighlight lang="php">

<script type="text/javascript" src="{TEMPLATEURL}jquery.rating.js" charset="utf-8"></script>

<script type="text/javascript" src="{TEMPLATEURL}jquery.MetaData.js" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}jquery.rating.css" />

</syntaxhighlight>

5. Create a list (radio) question with the same amount of sequentially numbered answers as star ratings. For example, if you want 5 whole-stars, you would create 5 answers, as in the image below, and this would give you ratings from 1-5. Note that the "Codes" and "Answers" must be sequential numbers.

[[File:star_rating_700x156_v2.png]]

6. In the list (radio) question, set the [[Advanced question settings|hide_tip]] question attribute to 1

7. In the source of the question add as many radio inputs as star segments. So 5 whole-stars, would need 5 radio inputs.

Don't confuse these inputs with the actual question, they are just for the plugin's use.

At this point your question source code should look something like below. Make sure that all inputs have the same name. Each input must have the same title as value and these must be sequential. Don't worry about how all of this looks in the WSYSWYG editor - the plugin is going to hide these inputs and replace them with stars.

<syntaxhighlight lang="php">

Q2 - Some question text here.<br /><br />

<div id="starContainer">

<input type="radio" class="star" title="1" value="1" name="q2Rate" />

<input type="radio" class="star" title="2" value="2" name="q2Rate" />

<input type="radio" class="star" title="3" value="3" name="q2Rate" />

<input type="radio" class="star" title="4" value="4" name="q2Rate" />

<input type="radio" class="star" title="5" value="5" name="q2Rate" />

</div>

</syntaxhighlight>

8. A note on split stars. The stars in the above example are whole-stars. If you want them split you need to add metadata to the class - something like ''{ split:2 }''. So if you want half-stars your inputs would look like:

'''<input type="radio" class="star { split:2 }" title="1" value="1" name="q1Rate" />'''

And stars split into third-segments would look like:

'''<input type="radio" class="star { split:3 }" title="1" value="1" name="q1Rate" />'''

9. Finally, in the source of the question add the following function after your inputs. (See [http://docs.limesurvey.org/tiki-index.php?page=Workarounds&structure;=English+Instructions+for+LimeSurvey#How_to_use_Script_eg._JavaScript_etc._ How to use script here])

Some notes on the code:
*Replace "SSSSS", "GG", "QQ" in the function call at the end with the survey ID, group ID and question ID respectively.
*The code will hide the question radio buttons and toggle them as the rating values are changed. If the rating is canceled all question inputs are unchecked. If a respondent navigates away from the page then returns the code "remembers" the previous rating and displays the stars accordingly.
*If you want to apply it to more numeric questions on the same page simply add more calls with the appropriate IDs. (eg. handleRatingRadio(11111, 22, 1); handleRatingRadio(11111, 22, 2); ...) .

Onload code:

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

function handleRatingRadio (sID, gID, qID) {

// Hide the radio input

$('#question' + qID + ' td.answer').parent().hide();

// Get a previous rating (if any) and use it to initialize the star display

var rating = $('#question' + qID + ' input.radio[checked=true]').attr('value');

//if ( rating != '' ) {

if ( rating ) {

$('#question' + qID + ' input.star').rating('select', rating);

}

// Listener on the star rating cancel element

$('#question' + qID + ' div.rating-cancel').click(function(event) {

// Nullify the rating if the Cancel element is clicked

rating = '';

$('#question' + qID + ' input.radio').attr('checked', false);

});

// Listener on the star rating elements

$('#question' + qID + ' div.star-rating').click(function(event) {

// Find the value of the highest clicked star and pass it into the text input

$('#question' + qID + ' div.star-rating-on').each(function(i) {

rating = $(this).children('a').html( );

});

$('#question' + qID + ' input.radio[value=' + rating + ']').attr('checked', true);

});

}

// Call the function for the radio question

handleRatingRadio (SSSSS, GG, QQ);

});

</script></syntaxhighlight>

=Variable column widths in array=

''Tested with: 1.85+ (7557), IE 6/7, Firefox 3.0, Safari 3.2''

This workaround allows you to define all column widths of an array question - as shown in the image below and [http://www.partnersinc.biz/surveys//index.php?sid=26842&newtest=Y&lang=en demonstrated here]. This example uses the default template shipped with 7557 but should be adaptable to any template.

[[File:array_widths_701x226.gif]]

We use a function to remove all of the widths imposed by the core code and then insert our own.

'''Implementation is as follows:'''
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions (see [http://docs.limesurvey.org/tiki-index.php?page=Optional+settings&structure;=English+Instructions+for+LimeSurvey#Filtering_dangerous_HTML_tags_in_survey_objects documentation here]).
#Create the array question.
#In the source of the array question add the following script (see [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]]).
#Replace all instances of QQ with the question ID.
#In the third section of code, adjust the widths and add/remove columns as necessary. This example is for an array with a question text column followed by 3 answer columns as shown above.
#In the final section adjust the question text alignment to your liking

Onload code

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Get rid of all the widths that the API imposes

$( 'div#questionQQ table.question col' ).attr('width', '');

$( 'div#questionQQ table.question thead td' ).attr('width', '');

// Define a width for the question table so we can do so for its children

// NOTE: Keep this to 95% or less so IE will behave

$( 'div#questionQQ table.question' ).attr('width', '95%');

// Define the column widths

// Add or remove columns and adjust widths as necessary but widths should add up to 100%

// NOTE: Columns must be sequentially numbered starting at 0 - eg, td:eq(0), td:eq(1), td:eq(2).....

$( 'div#questionQQ table.question tbody th:eq(0)' ).css({ 'width':'10%' }); // Answer text column

$( 'div#questionQQ table.question tbody td:eq(0)' ).css({ 'width':'50%' }); // First answer column

$( 'div#questionQQ table.question tbody td:eq(1)' ).css({ 'width':'20%' }); // Second answer column

$( 'div#questionQQ table.question tbody td:eq(2)' ).css({ 'width':'20%' }); // Third answer column

// Push the text input widths to 95% of their parent containers

$( 'div#questionQQ table.question input[type="text"]' ).css({ 'width':'95%' });

// Align the answer text - feel free to experiment

$( 'div#questionQQ table.question tbody th' ).css({'text-align':'center'});

});

</script></syntaxhighlight>

=Use images for radio buttons and checkboxes=

''Tested with: LimeSurvey 1.92/2.0, using IE 9, FireFox 13, Chrome 16, Safari 5''

This workaround uses an adaptation of the jQuery imagetick.js plugin to replace the default radio buttons and checkboxes with images as pictured below:

[[File:images.png]]

This adaptation will work in the following question types:
*Array
*Array by column
*Array dual scale
*Array (5 point choice)
*Array (10 point choice)
*Array (Increase-Same-Decrease)
*Array (Yes-No-Uncertain)
*Gender
*Yes-No
*Multiple choice
*Multiple choice with comments
*5 point choice
*List (Radio)
*List with comment

==LimeSurvey 2.0 and later implementation==

Follow the instructions above with these changes:
#Download [[Media:Imagetick_lime_v2.1.zip|this modified version of the plugin for 2.0 and up]] instead of the one mentioned above and add all contained files to your template directory.
#Add these lines to the <head> element in your startpage.pstpl instead of the one above:<syntaxhighlight lang="php"><script type="text/javascript" src="{TEMPLATEURL}imagetick_lime_2.js"></script>

<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}imagetick_lime_2.css" /></syntaxhighlight>

Thanks to Jordan Boesch for the original plugin.

=Changing the position and layout of an individual question using "question code"=

''Tested with: 1.87+ (6536)''

To use this very flexible workaround you first have to apply a minor change to the question.pstpl of the used template.

<syntaxhighlight lang="php">

<div class="survey-question">

<div class="survey-question-text">

</syntaxhighlight>

needs to be changed to

<syntaxhighlight lang="php">

<div class="survey-question" id="{QUESTION_CODE}">

<div class="survey-question-text" id="{QUESTION_CODE}" >

</syntaxhighlight>

this change won't change anything in the layout and can be left in the template even if you don't need this workaround. It's just a means to have a handle to actually change individual questions.

You can then use a code such as the following in the question text to make question specific format changes. "SAMPLE" needs to be replaced with the concerning question code and javascript has to be allowed ([[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|older versions of limesurvey]], under global settings for newer versions).

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

document.getElementById('SAMPLE').style.borderTop= "0px";

document.getElementById('SAMPLE').style.marginTop= "-62px";

document.getElementById('SAMPLE').style.marginLeft= "30px";

</script>

</syntaxhighlight>

This sample code will hide the border at the top of the question, will move the whole question up by 62px and to the right by 30px. Using this workaround you can change a whole a lot of things concerning format and positions of a specific question without changing all the questions. A (German) list of all the allowed options can be found [http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften here].

=Create MaxDiff question type=
==Version 2.06==

''Tested with: LimeSurvey version 2.06''

This workaround uses JavaScript to convert an '''''Array (flexible labels) by column''''' question into a [http://en.wikipedia.org/wiki/MaxDiff MaxDiff] question type.
<br /><br />
[[File:max_diff_596x253.gif]]
<br /><br />
Implementation is as follows.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create an '''''Array (flexible labels) by column''''' question with 2 "answers" - these will be the left and right columns.
#Assign a label set to the question - these will be the labels in the center column.
#Set the second parameter of the function call to true for randomized rows.
#Adjust the styles in lines 21-24 as required.
<br />
The script moves the question columns into the MaxDiff configuration and disables the opposing radio element when a selection is made.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

// Call the maxDiff() function
// Set the second parameter to true for randomized rows
maxDiff({QID}, false);
});

function maxDiff(qID, randomize) {

// Random number between 1 and 2
// Math.floor(Math.random() * (max - min + 1)) + min;
var randomNum = Math.floor(Math.random() * ((2-1)+1) + 1);

// Move the columns
$('#question'+qID+' table.subquestions-list col:eq(1)').prependTo('colgroup.col-responses');
$('#question'+qID+' table.subquestions-list thead tr:eq(0) th:eq(0)').prependTo('#question'+qID+' table.question thead tr:eq(0)');
$('#question'+qID+' table.subquestions-list tbody tr').each(function(i){
$('td.answer-item:eq(0)', this).prependTo(this);
});
$('#question'+qID+' table.subquestions-list tbody tr').each(function(i){
$('td.answer-item:eq(0)', this).prependTo(this);
});

// Random rows
if(randomize) {
var rowsArr = [];
$('#question'+qID+' table.subquestions-list tbody tr').each(function(i){
$(this).attr('data-index', i);
rowsArr.push(i);
});
shuffleArray(rowsArr);
$(rowsArr).each(function(i){
$('#question'+qID+' table.subquestions-list tbody').append($('#question'+qID+' tr[data-index="'+this+'"]'));
});
}

// Style stuff
$('#question'+qID+' table.subquestions-list col.odd').css({ 'background-color':'transparent' });
$('#question'+qID+' table.subquestions-list tbody th').css({ 'text-align':'center' });
$('#question'+qID+' table.subquestions-list tbody tr:even td, #question'+qID+' table.question tbody tr:even th').css({ 'background-color':'#F1F1F1' });
$('#question'+qID+' table.subquestions-list tbody tr:odd td, #question'+qID+' table.question tbody tr:odd th').css({ 'background-color':'#FCFCFC' });

// Prevent clicking twice in the same row
$('#question'+qID+' input.radio').on('click', function () {

$('#question'+qID+' input.radio').prop('disabled', false);
$('#question'+qID+' input.radio:checked').each(function(i) {
var thisRow = $(this).closest('tr');
$('input.radio', thisRow).not(this).prop('disabled', true);
});
});
}

function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
</script></syntaxhighlight>
==Versions 2.5 and 3.x==

''Tested with: LimeSurvey version 2.5''

This workaround uses JavaScript to convert an '''''Array (flexible labels) by column''''' question into a [http://en.wikipedia.org/wiki/MaxDiff MaxDiff] question type.
<br /><br />
[[File:MaxDiff_2.5.png]]
<br /><br />
'''DOWNLOADS'''<br />
* [[Media:Demo_MaxDiff_For_25_Template.zip|Demo template]]
* [[Media:Demo_MaxDiff_For_25_Survey.zip|Demo survey]]

'''IMPLEMENTATION'''
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create an '''''Array (flexible labels) by column''''' question with 2 "answers" - these will be the left and right columns.
#Add 2 subquestions to the array - these will be the left and right columns.
#Add answers to the array - these will be the rows.
#Create a copy the default template.
#Add the following to the end of '''''template.js''''' in your new template:<syntaxhighlight lang="javascript">function maxDiff(qID, randomize) {

// Identify some elements
var thisQuestion = $('#question'+qID);
var thisTable = $('table.subquestion-list:eq(0)', thisQuestion);

// Assign a new question class
$(thisQuestion).addClass('max-diff-array');

// Move the columns
$('thead tr:eq(0)', thisTable).prepend($('thead tr:eq(0) th:eq(1)', thisTable));
$('tr.answers-list', thisTable).each(function(i){
$('td.answer-item:eq(0)', this).prependTo(this);
});

// Random rows
if(randomize) {
var rowsArr = [];
$('tr.answers-list', thisTable).each(function(i){
$(this).attr('data-index', i);
rowsArr.push(i);
});
shuffleArray(rowsArr);
$(rowsArr).each(function(i){
$('tbody', thisTable).append($('tr[data-index="'+this+'"]', thisTable));
});
}

// Prevent clicking twice in the same row
$('input:radio', thisQuestion).on('click', function () {

$('input:radio', thisQuestion).prop('disabled', false);
$('input:radio:checked', thisQuestion).each(function(i) {
var thisRow = $(this).closest('tr.answers-list');
$('input:radio', thisRow).not(this).prop('disabled', true);
});
});

// Fix up the row classes
var rowClass = 1;
$('tr.answers-list', thisTable).each(function(i) {
$(this).addClass('array'+(2-(i%2)));
});
}

function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}</syntaxhighlight>
#Add the following to the end of '''''template.css''''' in your new template:<syntaxhighlight lang="css">.max-diff-array th.answertext {
text-align: center;
border-right: 3px solid #FFFFFF;
border-left: 3px solid #FFFFFF;
}

/* Override the responsive "no-more-tables" stuff */
@media only screen and (max-width: 801px) {

.max-diff-array .no-more-tables table {
display: table;
border-collapse: inherit;
}

.max-diff-array .no-more-tables thead,
.max-diff-array .no-more-tables tbody {
display: table-row-group;
}

.max-diff-array .no-more-tables tr {
left: auto;
position: relative;
top: auto;
display: table-row;
border: 0 none;
}

.max-diff-array .no-more-tables th,
.max-diff-array .no-more-tables td {
display: table-cell;
text-align: center !important;
color: #2c3e50;
font-size: 15px;
}

.max-diff-array th.answertext {
border-right: 3px solid #FFFFFF;
border-left: 3px solid #FFFFFF;
}

.max-diff-array .answer-item label span {
display: none !important;
}
}</syntaxhighlight>
#Add a script like this to the question source of the Array (flexible labels) question:<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Call the maxDiff() function
// Set the second parameter to true for randomized rows
maxDiff({QID}, true);
});
</script></syntaxhighlight>

=Load SVG Code From Drawing Tool=

This workaround uses JavaScript/jQuery to load a drawing tool and store the results in a huge-text question. The details are outlined in the [[Workarounds: Manipulating a survey at runtime using Javascript#Load SVG Code From Drawing Tool|JavaScript section of the workarounds]].

=Minimum or Maximum Date in Datepicker=

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

'''Please note: From version 2.05 beta6, you MUST set the minimum and maximum date for the date picker directly in the advanced question attributes of the date/time question. This workaround will seize to work.'''

You can set the minimum or maximum selectible date in a datepicker as follows

[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]] and add the following to the source of the date question text or help. Replace "QQ" with the date question ID.

For a minimum date of April 15, 2010:<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;

$('#question'+qID+' .popupdate').datepicker( 'option', 'minDate', new Date(2010, 4-1, 15) );

});

</script>

</syntaxhighlight>

For a minimum date of the current date (today):<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;

$('#question'+qID+' .popupdate').datepicker( 'option', 'minDate', new Date() );

});

</script>

</syntaxhighlight>

For a maximum date of May 10, 2015:<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;

$('#question'+qID+' .popupdate').datepicker( 'option', 'maxDate', new Date(2015, 5-1, 10) );

});

</script>

</syntaxhighlight>

More details here - http://jqueryui.com/demos/datepicker/#option-minDate

=Evaluative Space Grid (ESG)=

''Tested with LimeSurvey versions 2.06 & 2.5''

The evaluative space grid (ESG) is a two-dimensional grid that provides a single-item measure of positivity and negativity (Larsen et al, 2009). See [http://leeds-faculty.colorado.edu/mcgrawp/pdf/larsen.norris.mcgraw.hawkley.cacioppo.2009.pdf page 4 of this PDF].

This can be accomplished using a multiple-numeric question, some simple HTML and a little JavaScript.

A table can be shown in the question. When a respondent clicks a grid cell in the table JavaScript loads the coordinates of the cell into the multiple-numeric question inputs.

[[File:Space_grid_2.png]]<br /><br />
#Create a Multiple Numeric question with two subquestions labelled "X" and "Y".
#Add the following HTML to the source of the question to create the table:<syntaxhighlight lang="html4strict">
<table class="spaceGrid">
<tr>
<td rowspan="5" class="yAxisLabel">How NEGATIVE<br>
do you feel about<br>
the stimulus?</td>
<td class="yLabel">Extremely</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="yLabel">Quite a bit</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="yLabel">Moderately</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="yLabel">Slightly</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="yLabel">Not at all</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="blankCell"></td>
<td class="blankCell"></td>
<td class="xLabel">Not at all</td>
<td class="xLabel"><span class="yLabel">Slightly</span></td>
<td class="xLabel"><span class="yLabel">Moderately</span></td>
<td class="xLabel"><span class="yLabel">Quite a bit</span></td>
<td class="xLabel"><span class="yLabel">Extremely</span></td>
</tr>
<tr>
<td class="blankCell"></td>
<td class="blankCell"></td>
<td colspan="5" class="xAxisLabel">How POSITIVE do you feel about the stimulus?</td>
</tr>
</table>
</syntaxhighlight><br /><br />
#Add the following styles to the end of your template.css file:<syntaxhighlight lang="css">
.spaceGrid {
width: auto;
border: 0 none;
border-collapse: collapse;
}

.spaceGrid td {
padding: 0 3px;
text-align: center !important;
border: 0 none;
}

td.xAxisLabel {
padding-top: 10px;
}

td.yAxisLabel {
padding-right: 10px;
width: 125px;
}

td.xLabel {
height: 20px;
font-weight: normal;
font-size: 13px;
}

td.yLabel {
text-align: right !important;
font-weight: normal;
font-size: 13px;
}

td.gridCell {
width: 70px;
height: 70px;
border: 1px solid #666666;
background-color: #FFFFFF;
cursor: pointer;
}

td.checkedCell {
background-color: #66FF00;
}</syntaxhighlight><br /><br />
#Add the following to the end of your template.js file:<syntaxhighlight lang="javascript">
$(document).ready(function() {

$('.spaceGrid').each(function(i){

// Define some vars
var thisQuestion = $(this).closest('.numeric-multi');
var thisTable = $(this).closest('table.spaceGrid');
var numGridCell = $('.gridCell', thisTable).length;
var numCols = $('tr:eq(0) .gridCell', thisTable).length;
var numRows = numGridCell/numCols;

// Hide the answers list
$('.subquestion-list, .questions-list', thisQuestion).hide();

// Initial state
var xCoord = $('input.text:eq(0)', thisQuestion).val() - 1;
var yCoord = numRows - $('input.text:eq(1)', thisQuestion).val();
$('tr:eq('+yCoord+') .gridCell:eq('+xCoord+')', thisTable).addClass('checkedCell');

// Listener on the grid cells
$('.gridCell').click(function(){
var thisRow = $(this).closest('tr');

// Add class to checked cell
$('.checkedCell', thisQuestion).removeClass('checkedCell');
$(this).addClass('checkedCell');

// Find the cell coordinates
var reverseRowIndex = (numRows - $('tr', thisTable).index($(thisRow)));
var colIndex = $('.gridCell', thisRow).index($(this)) + 1;

// Load coordinates into inputs
$('input.text:eq(0)', thisQuestion).val(colIndex);
$('input.text:eq(1)', thisQuestion).val(reverseRowIndex);
});
});

});</syntaxhighlight><br /><br />
The script should automatically handle different grid sizes.

=Slider Highlighting=

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

You may want to highlight a slider after it has been moved/changed to allow respondents to easily see which slider subquestions have been answered.

[[File:Capture.PNG]]<br /><br />
#Add the following to the end of '''template.js''':<syntaxhighlight lang="javascript">
$('html').bind('slidecreate', function(event, ui) {
$('.slider_callout').each(function(i){
if($(this).text().length > 0) {
$(this).parents('li:eq(0)').addClass('changedSlider');
}
});
});

$(document).ready(function() {
$('.ui-slider-horizontal').bind('slidechange', function(event, ui) {
$(this).parents('li:eq(0)').addClass('changedSlider');
});
});
</syntaxhighlight><br /><br />
#Add something like the following to the end of '''template.css''' (these styles are for the default template and would need to be modified for other templates):<syntaxhighlight lang="css">
.numeric-multi .answer li {
border-bottom: 5px solid #FFFFFF;
}

.numeric-multi .answer li label {
background-color: #FFFFFF;
}

.numeric-multi .answer li div.multinum-slider {
margin: 1.5em 0.5em 0.2em 0;
padding-left: 0.5em;
}

.ui-slider-1 {
margin-bottom: 10px;
}

.changedSlider {
background-color: #99FFFF;
}
</syntaxhighlight>
<br /><br />

=Dynamic Slider Call-Out Styles=

''Tested with: 2.05, IE 9-11, Firefox, Chrome''

This is an example of how to insert a custom '''''slide()''''' function to control the appearance of the slider call-out as the slider is manipulated. In this example the call-out text colour changes as the slider is moved. Sample survey here - [[Media:Dynamic_slider_call_out.lss|dynamic call-out slider survey]].
<br /><br />
[[File:Dynamic_slider_call_out.png]]<br /><br />
Requirements:
*LimeSurvey 2.05 or newer
*A multiple-numeric question with slider enabled<br /><br />
# Create your multi-numeric question with the slider enabled<br /><br />
#Add the following to the source of the question
<br /><br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// Identify this question
var thisQuestion = $('#question{QID}');

// Slide function
$('.ui-slider', thisQuestion).on('slide', function( event, ui ) {
handleCallout($(this).closest('li.answer-item'), ui.value);
});

// Initial callout states
$('input.text', thisQuestion).each(function(i) {
handleCallout($(this).closest('li.answer-item'), $(this).val());
});

// Handle the callout style
function handleCallout(thisRow, sliderVal) {
if(sliderVal < 20) {
$('.slider_callout', thisRow).css('color', '#D90000');
}
else if(sliderVal < 40) {
$('.slider_callout', thisRow).css('color', '#D96D00');
}
else if(sliderVal < 60) {
$('.slider_callout', thisRow).css('color', '#D9D900');
}
else {
$('.slider_callout', thisRow).css('color', '#00B22D');
}
}

});
</script>
</syntaxhighlight>
<br /><br />

=Sliders in Array-Numbers or Array-Dual-Scale-Numbers=

This workaround will replace the dropdowns in '''''array-numbers''''' or '''''array-dual-scale-numbers''''' questions with sliders. The sliders will automatically have the same minimum, maximum and steps that you set in the advanced question settings.

==LimeSurvey Version 2.06==
[[File:custom_sliders_1.png]]<br /><br />
''Tested with: LimeSurvey version 2.06''<br /><br />
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your array-numbers or array-dual-scale-numbers question.
#Add the following to the source of the question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

insertSlider ({QID});

function insertSlider (qID) {

$('#question'+qID+' select').each(function(i, el){

// Hide the dropdown
$(el).hide();

var id = $(el).attr('id').replace(/#/g,'-');

// Some dropdown values
var currentVal = Number($('option:selected', el).val());
var firstVal = Number($('option[value!=""]:first', el).val());
var secondVal = Number($('option[value!=""]:first', el).next('option').val());
var lastVal = Number($('option[value!=""]:last', el).val());

// Insert a container for the slider
var container = $('<div class="customSliderWrapper"></div>').insertAfter(el);

// Initiate the slider
var slider = $('<div id="slider-'+id+'" class="customSlider"></div>').appendTo(container).slider({
min: firstVal,
max: lastVal,
range: 'min',
value: currentVal,
step: secondVal - firstVal,
slide: function( event, ui ) {
$(el).val(ui.value);
$('#callOut-'+id).text($(el).val());
}
});

// Insert a callout
var callout = $('<div id="callOut-'+id+'" class="slider_callout slider-callout"></div>').appendTo($('#slider-'+id+' .ui-slider-handle')).text($('option:selected', el).val());

// Set a value as soon as the slider handle is clicked
$('#slider-'+id+' .ui-slider-handle').mousedown(function() {
$(el).val(slider.slider('value'));
$('#callOut-'+id).text($(el).val());
});
});
}
});
</script></syntaxhighlight><br /><br />
#Add something like the following to the end of '''template.css''' (these styles are for the default template and may need to be modified for other templates):<syntaxhighlight lang="css">
.customSliderWrapper {
position: relative;
margin: 0 10px;
padding-top: 1.75em;
}
</syntaxhighlight>
<br /><br />
==LimeSurvey Version 2.6x==
[[File:Dropdown-sliders.png]]<br /><br />
''Tested with: LimeSurvey version 2.64.7 ''<br /><br />
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your array-numbers or array-dual-scale-numbers question.
#Add the following to the source of the question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

insertSlider ({QID});

function insertSlider (qID) {

// Identify this question
var thisQuestion = $('#question'+qID);
thisQuestion.addClass('with-dropdown-sliders');

// Loop through all array drop-downs
$('select.multiflexiselect', thisQuestion).each(function(i, el){
var thisCell = $(el).closest('td');

// Hide the dropdown
$(el).hide();

// Some dropdown values
var currentVal = $(el).val();
var firstVal = Number($('option[value!=""]:first', el).attr('value'));
var secondVal = Number($('option[value!=""]:eq(1)', el).attr('value'));
var lastVal = Number($('option[value!=""]:last', el).attr('value'));

// Insert an input for the slider
var thisInput = $('<input class="inserted-input" type="text" />').insertAfter(el);

// Initiate the slider
thisInput.val(currentVal).bootstrapSlider({
'min': firstVal,
'max': lastVal,
'step': secondVal - firstVal,
'value': Number(currentVal),
'tooltip': 'always'
});

// Listener on the slider
$(thisInput).on('slideStop', function () {
if($('.tooltip', thisCell).is(':hidden')) {
$('.tooltip', thisCell).show();
$('.tooltip', thisCell).css('margin-left', '-'+($('.tooltip', thisCell).width()/2)+'px');
}
$(el).val($(thisInput).val());
});

// Hide the slider call-out if no value selected yet
if(currentVal == '') {
$('.tooltip', thisCell).hide();
}
});
}
});
</script></syntaxhighlight><br /><br />
#Add something like the following to the end of '''template.css''' (these styles are for the default template and may need to be modified for other templates):<syntaxhighlight lang="css">
.with-dropdown-sliders .slider.slider-horizontal {
margin: 1.5em auto 1em auto;
width: 90%;
}

.with-dropdown-sliders .slider.slider-horizontal .slider-handle {
margin-top: -5px;
}
</syntaxhighlight><br />
Sample survey for version 2.6x: [[Media:Demo_Sliders_in_Array_Survey.zip|Demo_Sliders_in_Array_Survey.zip]]

=Vertical Sliders=

''Tested with: 1.92+, 2.00+, IE 9, Firefox 13, Chrome 19''

This workaround uses a custom jQuery plugin to apply vertical sliders to multiple-numeric questions. You can download a sample template here (with the plugin in template.js) - [[Media:default_vertical_sliders.zip|vertical slider template]] - and a sample survey here - [[Media:demo_vertical_sliders.lss|vertical slider survey]].

[[File:verticalsliders_1.jpg]]<br /><br />
# Create your multi-numeric question(s). Do NOT use any of the slider advanced settings.<br /><br />
#Add the following to the end of template.js. Replace "QQ" (line 5) with the question ID and adjust the options in the function call as desired. Repeat the call as many times as you need for more questions<syntaxhighlight lang="javascript">$(document).ready(function(){

// Call the vertical slider plugin with the question ID
// Edit options here as desired
$('#questionQQ').lsVerticalSlider({
minValue :0, // Minimum value (default 0)
maxValue :200, // Maximum value (default 100)
startValue :100, // Start value (default null)
step :10, // Slider increments (default 1)
height :100, // Height of slider in pixels (default 200)
recordStart :true, // Record the start value? (default no)
showMin :true, // Show minimum value? (default no)
showMax :true // Show maximum value? (default no)
});
});

// NO EDITING REQUIRED BELOW HERE
// A jQuery plugin to convert multiple-numeric questions to vertical sliders
(function( $ ){
$.fn.lsVerticalSlider = function(options) {

// The defaults, extended and modified with any passed in the function call
var opts = $.extend( {
minValue :0,
maxValue :100,
startValue :'',
step :1,
height :150,
recordStart :false,
showMin :false,
showMax :false
}, options);

return this.each(function() {

var $this = $(this);

// Some classes for the question and subquestions
$this.addClass('vertical-slider-question');
$('li:[id<div class="simplebox">="javatbd"]', $this).addClass('vertical-slider-subquestion');

// Loop through the subquestions
$('li:[id</div>="javatbd"]', $this).each(function(i){
var itemID = $(this).attr('id').replace(/javatbd/, '');

// Check for pre-existing answer
if($('#answer'+itemID).val() != '') {
opts.startValue = $('#answer'+itemID).val();
}

// Insert the slider elements
$('#answer'+itemID).after(
'<div class="vertical-slider-max-min" style="height:'+(opts.height+2)+'px;"> \
<div class="vertical-slider-max"></div> \
<div class="vertical-slider-min"></div> \
</div> \
<div id="vertical-slider-'+itemID+'" class="vertical-slider" style="height:'+opts.height+'px;"></div> \
<div class="vertical-slider-callout-wrapper" style="height:'+(opts.height+2)+'px;"> \
<div class="vertical-slider-callout" id="slider-callout-'+itemID+'"></div> \
</div>'
);

// Show min/max if option is set
if(opts.showMax) {
$('.vertical-slider-max', $this).text(opts.maxValue);
}

if(opts.showMin) {
$('.vertical-slider-min', $this).text(opts.minValue);
}

// Initiate the slider
$('#vertical-slider-'+itemID).slider({
orientation: 'vertical',
range: 'min',
min: opts.minValue,
max: opts.maxValue,
value: opts.startValue,
step: opts.step,
slide: function(event, ui) {
$('#answer'+itemID).val(ui.value);
$('#slider-callout-'+itemID).text(ui.value);
setTimeout(function() {
$('#slider-callout-'+itemID).css({ 'bottom':$('#vertical-slider-'+itemID+' .ui-slider-handle').css('bottom') }).show();
}, 10);
},
create: function(event, ui) {
// Initial values and positions
if($('#answer'+itemID).val() != '') { // Pre-existing answer
$('#slider-callout-'+itemID).text(opts.startValue);
}
else if(opts.recordStart) { // Record the start value (if option is set)
$('#answer'+itemID).val(opts.startValue);
$('#slider-callout-'+itemID).text(opts.startValue);
}
else {
$('#slider-callout-'+itemID).hide();
}
$('#slider-callout-'+itemID).css({ 'bottom':$('#vertical-slider-'+itemID+' .ui-slider-handle').css('bottom') });
}
});
});
});
};
})( jQuery );</syntaxhighlight><br /><br />
#Add the following to the end of template.css (these styles are for the default template):<syntaxhighlight lang="css">/* Vertical slider styles and overrides */
.vertical-slider-question p.tip {
display: none;
}

.vertical-slider-subquestion {
float: left;
margin: 0 3em 0 0 !important;
}

.vertical-slider-question label {
display: block;
padding: 0 0 0.75em 0 !important;
}

.vertical-slider-question span.input {
padding: 0.3em 0 0 0;
display: block;
}

.vertical-slider-question input.text {
display: none;
}

.vertical-slider {
float: left;
border-radius: 4px;
}

.vertical-slider-question .ui-slider-handle {
top: auto;
border-radius: 4px;
}

.vertical-slider-max-min,
.vertical-slider-callout-wrapper {
float: left;
position: relative;
}

.vertical-slider-callout-wrapper {
min-width: 3em;
}

.vertical-slider-max-min {
margin-right: 0.5em;
}

.vertical-slider-max,
.vertical-slider-min {
font-size: 0.8em;
color:#666666;
line-height: 1;
}

.vertical-slider-max {
margin-top: -0.5em;
}

.vertical-slider-min {
position: absolute;
right: 0;
bottom: 0;
margin-bottom: -0.5em;
}

.vertical-slider-callout {
position: absolute;
top: auto;
margin: 0 0 -0.6em 0.5em;
padding: 0.1em;
font-size: 0.9em;
color:#000000;
line-height: 1;
background: #F8F8FF;
border: 1px solid #D2E0F2;
border-radius: 4px;
}</syntaxhighlight>
<br /><br />

=Range Slider=

==LimeSurvey Version 2.5x==

This workaround uses a custom jQuery plugin to insert a jQuery UI range slider into a multi-numeric question and automatically populate that question's inputs with the range min and max values.

'''Download''': [[Media:Demo_Range_Slider_2.5x.zip|Sample Template and Survey.]]

[[File:Demo_Range_Slider_2.5x.png]]<br /><br />
The plugin handles:
*previous answers
*slider max/min
*range min start
*range max start
*range span min
*slider step
*record the start values
*show slider max and min<br /><br />
Requirements:
<ul><li>LimeSurvey 2.5x</li>
<li>A multiple-numeric question with two subquestions</li></ul><br /><br />
#Create your multi-numeric question. Do NOT use any of the slider advanced settings.
#Add the following to the end of template.js.<syntaxhighlight lang="javascript">// A jQuery plugin to display a range slider in LimeSurvey
// Author - Tony Partner - partnersurveys.com
(function( $ ){

$.fn.lsRangeSlider = function(options) {

// The defaults, extended and modified with any passed in the function call
var opts = $.extend( {
sliderMin :0, // Minimum slider value (default 0)
sliderMax :100, // Maximum slider value (default 100)
rangeStartMin :'', // Minimum range handle start value (default sliderMin)
rangeStartMax :'', // Maximum range handle start value (default sliderMax)
minRangeSpan :0, // Minimum allowed range span (default 0)
step :1, // Slider increments (default 1)
recordStart :false, // Record the start value? (default no)
showMin :false, // Show slider minimum value? (default no)
showMax :false // Show slider maximum value? (default no)
}, options);

return this.each(function() {

if($(this).hasClass('numeric-multi') && $('input.text', this).length == 2) {

// Define some vars
var thisQuestion = $(this);
var rangeMinInput = $('input.text.form-control:eq(0)', thisQuestion);
var rangeMaxInput = $('input.text.form-control:eq(1)', thisQuestion);
thisQuestion.addClass('range-slider-question');

// Check for pre-existing answer
if($(rangeMinInput).val() != '' && $(rangeMinInput).val() != '') {
opts.rangeStartMin = $(rangeMinInput).val();
opts.rangeStartMax = $(rangeMaxInput).val();
}
else {
if(opts.rangeStartMin == '') {
opts.rangeStartMin = opts.sliderMin;
}
if(opts.rangeStartMax == '') {
opts.rangeStartMax = opts.sliderMax;
}
}

// Insert the slider
var insertedEls = '<div class="col-xs-12 col-sm-12 withslider">\
<input class="inserted-slider" type="text" name="rangeSlider" />\
<div class="pull-left">\
<span class="help-block inserted-slider-min"></span>\
</div>\
<div class="pull-right">\
<span class="help-block inserted-slider-max"></span>\
</div>\
</div>';
$('input[type="text"].form-control:eq(0)', thisQuestion).closest('.subquestion-list').hide().before(insertedEls);

var sliderValues = [Number(opts.rangeStartMin), Number(opts.rangeStartMax)];

$('input.inserted-slider', thisQuestion).bootstrapSlider({
'min': Number(opts.sliderMin),
'max': Number(opts.sliderMax),
'step': Number(opts.step),
'range': true,
'value': sliderValues,
'tooltip': 'always'
});
if($(rangeMinInput).val() == '' && $(rangeMinInput).val() == '') {
$('.slider .tooltip', thisQuestion).hide();
}

// Listener on the range slider
$('input.inserted-slider', thisQuestion).on('slideStart', function(event, ui) {
});
$('input.inserted-slider', thisQuestion).on('slide slideStop', function(event, ui) {
var thisLowerVal = Number($.trim($(this).val().split(',')[0]));
var thisUpperVal = Number($.trim($(this).val().split(',')[1]));
if(opts.minRangeSpan > 0 && (thisUpperVal-thisLowerVal) < opts.minRangeSpan) {
$('input.inserted-slider', thisQuestion).bootstrapSlider('setValue', sliderValues);
}
else {
// Load the LS inputs
$(rangeMinInput).val(thisLowerVal);
$(rangeMaxInput).val(thisUpperVal);
// Fire Expression manager
checkconditions($(rangeMinInput).attr('value'), $(rangeMinInput).attr('name'), $(rangeMinInput).attr('type'));
checkconditions($(rangeMaxInput).attr('value'), $(rangeMaxInput).attr('name'), $(rangeMaxInput).attr('type'));
// Show the tooltip
$('.slider .tooltip', thisQuestion).show();
sliderValues = [thisLowerVal, thisUpperVal];
}
});

// Show min/max if option is set
if(opts.showMin) {
$('.inserted-slider-min', thisQuestion).text(opts.sliderMin);
}
if(opts.showMax) {
$('.inserted-slider-max', thisQuestion).text(opts.sliderMax);
}

// Handle recordStart
if(opts.recordStart) {
if($(rangeMinInput).val() == '' && $(rangeMinInput).val() == '') {
// Load the LS inputs
$(rangeMinInput).val(Number($.trim($('input.inserted-slider', thisQuestion).val().split(',')[0])));
$(rangeMaxInput).val(Number($.trim($('input.inserted-slider', thisQuestion).val().split(',')[1])));
// Fire Expression manager
checkconditions($(rangeMinInput).attr('value'), $(rangeMinInput).attr('name'), $(rangeMinInput).attr('type'));
checkconditions($(rangeMaxInput).attr('value'), $(rangeMaxInput).attr('name'), $(rangeMaxInput).attr('type'));
// Show the tooltip
$('.slider .tooltip', thisQuestion).show();
}
}
}
});

};
})( jQuery );</syntaxhighlight>
#Then, add something like this to the source of your question to apply the plugin with some custom option settings (I think the comments explain the options adequately)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').lsRangeSlider({
sliderMin :0, // Minimum slider value (default 0)
sliderMax :10, // Maximum slider value (default 100)
rangeStartMin :2, // Minimum range handle start value (default sliderMin)
rangeStartMax :8, // Maximum range handle start value (default sliderMax)
minRangeSpan :0, // Minimum allowed range span (default 0)
step :1, // Slider increments (default 1)
recordStart :true, // Record the start value? (default no)
showMin :true, // Show slider minimum value? (default no)
showMax :true // Show slider maximum value? (default no)
});
});
</script></syntaxhighlight>
#Or, to apply the plugin with the default option settings<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').lsRangeSlider();
});
</script></syntaxhighlight>
<br /><br />

=Reverse Slider=

{{Box|The reverse slider feature can be used in any (multiple) numerical input question type. For more details, please check the [[Question_type_-_Multiple_numerical_input#Slider|slider wiki subsection]].}}

=Sliders With Control Buttons=
== Version 2.05 ==

''Tested with: 2.05, IE 7-10, Firefox, Chrome''

This workaround uses a custom jQuery plugin to insert "up" and "down" buttons to control sliders. You can download a sample template here - [[Media:Demo_Slider_Buttons.zip|slider with buttons template]] - and a sample survey here - [[Media:Limesurvey_survey_button_slider.lss|button slider survey]].

[[File:Button_slider.jpg]]<br /><br />
The plugin allows the following options:
*Down Text: Text for the "down" button
*Up Text: Text for the "up" button
*Scrolling: Continuous slider movement if the left mouse button is held down
*Scroll Interval: Interval (in milliseconds) between slider movement when button is held down (do not make this too short or it will be difficult to stop the slider accurately)
*Value Prefix: Prefix for call-out
*Value Suffix: Suffix for call-out<br /><br />
Requirements:
*LimeSurvey 2.05 or newer
*A multiple-numeric question with slider enabled<br /><br />
# Create your multi-numeric question with the slider advanced settings.<br /><br />
#Add the following to the end of template.js.<syntaxhighlight lang="javascript">// A custom plugin to add control buttons to LimeSurvey sliders
// Author - Tony Partner - partnersurveys.com
(function( $ ){

$.fn.sliderButtons = function(options) {

// The defaults, extended and modified with any passed in the function call
var opts = $.extend( {
downText: '-', // Text for the "down" button
upText: '+', // Text for the "up" button
scrolling: true, // Continuous slider movement if left mouse button held down
scrollInterval: 150,// Interval (in ms) between slider movement when button is held down
valuePrefix: '', // Prefix for callout
valueSuffix: '' // Suffix for callout
}, options);

return this.each(function(i) {

var thisQuestion = $(this);

// Add some classes
$(thisQuestion).addClass('slider-button-question');

// Insert the buttons
$('li.question-item', thisQuestion).append('<div class="slider-button-wrapper">\
<button type="button" class="slider-button down">'+opts.downText+'</button>\
<button type="button" class="slider-button up">'+opts.upText+'</button>\
</div>');

// Initial button states
function handleButtonState(slider) {
var thisRow = $(slider).closest('li.question-item');
var thisSliderVal = $(slider).slider('option', 'value');
var thisSliderStep = $(slider).slider('option', 'step');
var thisSliderMin = $(slider).slider('option', 'min');
var thisSliderMax = $(slider).slider('option', 'max');
$('button.slider-button', thisRow).prop('disabled', false);
if ($(slider).slider('option', 'value') == thisSliderMin) {
$('button.slider-button.down', thisRow).prop('disabled', true);
}
if ($(slider).slider('option', 'value') == thisSliderMax) {
$('button.slider-button.up', thisRow).prop('disabled', true);
}
}
$('.multinum-slider', thisQuestion).each(function(i) {
handleButtonState(this);
if($(this).closest('li.question-item').find('input.text').val() != '') {
$('.slider-callout', this).text(opts.valuePrefix+$(this).closest('li.question-item').find('input.text').val()+opts.valueSuffix);
}
});

// Function to handle button actions
function handleButtons(thisButton) {
var thisRow = $(thisButton).closest('li.question-item');
var thisSlider = $('.multinum-slider', thisRow);
var thisSliderStep = $(thisSlider).slider('option', 'step');
var stepDecimals = 0;
if(thisSliderStep.toString().indexOf('.') >= 0) {
stepDecimals = thisSliderStep.toString().split('.')[1].length;
}
var thisSliderVal = Number($(thisSlider).slider('option', 'value')).toFixed(stepDecimals);
var thisSliderMin = $(thisSlider).slider('option', 'min');
var thisSliderMax = $(thisSlider).slider('option', 'max');
if ($(thisButton).hasClass('down') && thisSliderVal > thisSliderMin) {
$(thisSlider).slider('option', 'value', Number(thisSliderVal)-Number(thisSliderStep));
}
if ($(thisButton).hasClass('up') && thisSliderVal < thisSliderMax) {
$(thisSlider).slider('option', 'value', Number(thisSliderVal)+Number(thisSliderStep));
}
var newValue = $(thisSlider).slider('option', 'value').toFixed(stepDecimals).replace(/\./, LSvar.sLEMradix);
$('input.text', thisRow).val(newValue).triggerHandler('keyup');
$('.slider-callout', thisSlider).text(opts.valuePrefix+newValue+opts.valueSuffix);
}

// Scrolling
if(opts.scrolling == true) {

var sliderTimeout;
var clicker = $('button.slider-button', thisQuestion);
var count = 0;

$('button.slider-button', thisQuestion).mousedown(function(){
var thisButton = $(this);
sliderTimeout = setInterval(function(){
handleButtons(thisButton);
}, opts.scrollInterval);
return false;
});

$(document).mouseup(function(){
clearInterval(sliderTimeout);
return false;
});
$('button.slider-button', thisQuestion).mouseout(function(){
handleButtonState($(this).closest('li.question-item').find('.multinum-slider'));
});
}

// Listener on the buttons
$('button.slider-button', thisQuestion).click(function(e) {
handleButtons(this) ;
handleButtonState($(this).closest('li.question-item').find('.multinum-slider'));
});

// Listener on sliders
$('.multinum-slider', thisQuestion).on('slidestop', function( event, ui ) {
handleButtonState(this);
});

// Listener on reset buttons
$('.slider-reset', thisQuestion).on( "click", function( event, ui ) {
var thisReset = $(this);
setTimeout(function() {
handleButtonState($(thisReset).closest('li.question-item').find('.multinum-slider'));
}, 150);
});
});
};
})( jQuery );
</syntaxhighlight><br /><br />
#Add the following to the end of template.css (these styles are for the default template but easily modified for others):<syntaxhighlight lang="css">.slider-button-question label.slider-label {
margin-top: 0;
padding: 40px 1em 0 0;
*padding: 25px 1em 0 0;
}

.slider-button-question div.multinum-slider {
margin-top: 45px;
}

.slider-button-question .ui-slider-horizontal .ui-slider-handle {
width: 18px;
margin-left: -9px;
top: -4px;
}

.slider-button-question .slider_callout {
margin-left: -41px;
text-align: center;
width: 100px;
}

.slider-button-question .slider-button-wrapper {
float: left;
margin: 40px 0 0 25px;
}

.slider-button-question .slider-button-wrapper button {
padding: 0 10px;
margin: 0 0 0 5px;
}

.slider-button-question .slider-button-wrapper button:disabled {
opacity:0.65;
filter:alpha(opacity=65);
cursor: default;
}

.slider-button-question .slider-reset {
margin-top: 42px;
}
</syntaxhighlight><br /><br />
#Then, add something like this to the source of your question to apply the plugin with some custom option settings (I think the comments explain the options adequately)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#question{QID}').sliderButtons({
downText: 'Down', // Text for the "down" button
upText: 'Up', // Text for the "up" button
scrolling: true, // Continuous slider movement if left mouse button held down
scrollInterval: 250, // Interval (in ms) between slider movement when button is held down
valueSuffix: "%" // Suffix for callout
});
});
</script>
</syntaxhighlight><br /><br />
#Or, simply to apply the plugin with the default option settings<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#question{QID}').sliderButtons();
});
</script>
</syntaxhighlight>

== Version 3.x ==

A custom question theme for Slider Control Buttons for LimeSurvey 3.x can be found here - https://github.com/tpartner/LimeSurvey-Slider-Controls-3x

Workarounds: Question design, layout and templating

2023-05-11T17:30:12Z

Tpartner: /* Star Rating System Using List (Radio) Question */

This section more or less deals with styling your survey, adjusting the layout and setting up special question types. You can find '''similar information''' at these pages:
* [[The template editor]]
* [[Workarounds: Manipulating a survey at runtime using Javascript]]
* [[Workarounds: Survey behaviour]].

<div class="simplebox"><center><br />'''Please keep in mind that these workarounds are not official LimeSurvey extensions - they are solutions that users have created for themselves. <span style='color:#EE0000'>Therefore LimeSurvey can't offer guarantees or support for these solutions.</span><br />If you have questions, please contact the users that, thankfully, shared their solutions with the community.'''<br /><br /></center></div>

__TOC__

=Different progress indicator=

==Version 1.87 and later:==

Add the following to the end of template.js. It will find the progress value and insert it into the element following the progress bar.

It should be pointed out that I had to introduce a delay in firing the function because the progress value is not calculated until after template.js is called. The delay is set at 1/10 of a second but you may be able to reduce that.

<syntaxhighlight lang="php">

// Display progress value

function setProgValue() {

var progress = $('#progressbar').attr('aria-valuenow');

$('#progress-post').text(progress+'%').show();

}

$(document).ready(function(){

$('#progress-post').hide();

setTimeout('setProgValue()',100);

});

</syntaxhighlight>

If you want to hide the "0%" before the progress bar, add the following to the end of template.css:

<syntaxhighlight lang="php">
#progress-pre {

display: none;

}

</syntaxhighlight>

=Delete unwanted gaps in question title=

''Tested with: ''

When copying data (questions, answers, ...) from MS Word or other applications into the editor there might occur some gaps in the question title.

There are two solutions to this:
# Use popup mode and manually delete unwanting extra html tags (requires html knowledge).
# Disable paste word feature: Tweak your limesurvey-config.js file in limesurvey/admin/scripts/fckeditor.26 and set the following option to true:

<syntaxhighlight lang="php">FCKConfig.ForcePasteAsPlainText = true ;</syntaxhighlight>

After that clear you browser cache and try again.

=How to change the <font-size> tags using CSS=

''This workaround was deleted because it is outdated. Such changes can be done by [[The template editor#Styling questions with CSS|adjusting template.css]] of your template.

=Question type variation: Scale with bars (one and two sided)=

''Tested with: ''

Some methodogical issues to think about: Very often a common scale as 1 to 5 or -2 to +2 fits all needs, as the shown subject is clearly defined as positive or negative. As soon as you would reduce the influence from the question and scale on the respondent, you will need something neutral to determine tendences, emphases and so on.

So I put up a new variation of the one and two sided array question:

ttp://www.limesurvey.org/images/fbfiles/images/example_bar_scale.jpg

In my example the left side reads "strategical planning" and the right side "operative business". None of these are purely negative or positive, so the bars only show in which direction the balancing point moves.

To realize a question as shown above just do as follows:

Set up as many bars as you will need (in my example there are four different bars in total) with a graphic program like PAINT .NET, GIMP or similar ones (yes, you may also use commercial software like Photoshop). To prevent the bars from looking twitchy, designate the size in advance. I did one bar 60x15 px, one 45x15px, one 30x15px and at last 15x15px. Save them as PNG, JPG or GIF.
# Create a new label set within Lime. Call it whatever you like.
# Enter a code number at first, then press the pencil symbol to enter the editor.
#Press the "Insert / edit image" button and upload the bar you want to insert with the FCK upload tool. Then choose the uploaded picture, save and leave the FCK editor.
#The row in the lable editor now shows an <img>-tag which refers to your bar picture.
#Repeat the above described steps as often as needed to build up your bar scale.

=Doing a Likert Scale=

''Tested with: ''

A Likert Scale is a special type of the Semantic Differential question where several item shall be rated on different scales, each marked at the beginning and at the end with opposite statements.

To do this in LimeSurvey just follow these steps:
#Create a label set with values from 0 to 7 (for the classic Likert Scale - feel free to choose other ranges).
#Create a new question and choose Array (Flexible Labels) as question type.
#Assign the Likert Scale label set to this question.
#Enter your answers as follows:

<syntaxhighlight lang="php"><DIV style="white-space: nowrap;">ITEM statement1|statement2</div></syntaxhighlight>

The white-space style is to avoid line breaks which would ruin the whole scale. feel free to insert non-breakable spaces between the ITEM and statement1 to define the margin between these to strings.

=Alternate background colour of questions=

''Tested with: 1.85+ (7191)''

To alternate the background colour of questions, open the ''template.css'' of your template with the Template Editor or a text editor and modify the ''Question styles'' section to include the following style.

<syntaxhighlight lang="php">

div#question2 td.questiontext,

div#question4 td.questiontext,

div#question6 td.questiontext {

background-color: #E0EBF8;

}

</syntaxhighlight>

Be sure to apply the style to all of the questions you would like modified using their question IDs (''question2, question4, question6'' in this case). Question IDs are displayed when creating or editing questions - see below:

[[File:qid_1_493x173.gif]]

Here the question ID is #question80 .

=Embedding audio in questions=

''Tested with: 1.85+ (7191), IE 7, FireFox 3''

Audio clips can be embedded in most question text or answer text. In this example, using the default template, I've embedded clips into the answers of an '''''Array (Yes/No/Uncertain)''''' question to ask respondents how they feel about some sounds. The resulting question will look like this.

[[File:audioTest_595x202.gif]]

It's accomplished by placing the following code in each of the answers.

<syntaxhighlight lang="php">

<embed height="20" width="128" autostart="false" controls="console"

loop="true" volume="50" src="{TEMPLATEURL}audio_1.mp3"></embed>

</syntaxhighlight>

Some notes about the code:
*The ''audio_1.mp3'' part will be different for each answer (it's the audio file name).
*In this case the audio files are residing in the template folder being used for this survey (that's where ''{TEMPLATEURL}'' points to) but they can be placed anywhere if you use an absolute URL in the ''src'' parameter - something like ''src="http://mysite.com/audio/audio_1.mp3"''
*If the audio file doesn't exist where the ''src'' parameter indicates, the player will not appear.
*You'll need to insert the code into the answers using the source screen - click on "Edit answers", click the pencil beside the text box, click "Source" in the pop-up, enter the code and save it with the little diskette icon.
*You may need to turn off the XSS filter - see the documentation for [http://docs.limesurvey.org/tiki-index.php?page=Global+settings&structure;=English+Instructions+for+LimeSurvey#Security Global settings].

Although the above example places the audio in the answer text of the question, the same principles can be used to place it in the question text itself. Something like this perhaps.

[[File:audioTest_595x154.gif]]

=Hiding inputs of a "Multiple options with comments" question=

There may be times when you want to hide some of the input boxes of a '''''Multiple choice question type with comments''''' question as in the image below:

[[File:hidden_inputs_541x168.gif]]

This can be accomplished with CSS (see [[The template editor#Styling questions with CSS|Styling questions in LimeSurvey 1.8]]). For each input that you want to hide, add the following style to your template.css file:

<syntaxhighlight lang="css">
#answer11111X22X33Acomment {
display: none;
}
</syntaxhighlight>

Where 11111 is your survey ID, 22 is your group ID, 33 is your question ID and A is the answer code.

Note that you will still see columns for the hidden inputs in your data but they will be empty.

=Multiple question types in array=

''Tested with: 1.90 - 1.92+, IE 7/8/9, Firefox 13, Safari 5, Chrome 10''

[[Media:limesurvey_survey_62584.lss|Download the sample survey]]

This workaround allows you to present multiple question types in what appears to be an array - as depicted in the image below and [http://www.partnersinc.biz/surveys//index.php?sid=62584&newtest=Y&lang=en demonstrated here] (download the sample survey - [[Media:limesurvey_survey_62584.lss|limesurvey_survey_62584.lss]]). This example uses the default template but should be adaptable to any template using divisions for question containers.

[[File:inline_questions_700x228.png]]

Basically what we do is take groups of questions (5 in this case), wrap them in a division and make them line up nicely horizontally and vertically. The width of the survey is also fixed to prevent wrapping issues. We do this with a JavaScript/jQuery function that inserts the necessary wrappers and then modifies styles so everything behaves properly. The top row is 5 boilerplate questions with the "column headers" as question text (the first just has a blank space). The following rows are a boilerplate with the "row headers" followed by 4 assorted questions.

It should be noted that using conditions on these questions may result in unexpected behavior. If a question is hidden by conditions, the question(s) to the right of it will move over to take its place.

Implementation is as follows:
#Create your questions keeping in mind how they will lay out when grouped into rows (in this example - boilerplate, yes/no, short text, numeric, dropdown, and repeat).
#In the source of the first boilerplate question add the function below (see [http://manual.limesurvey.org/wiki/Workarounds:_Manipulating_a_survey_at_runtime_using_Javascript#How_to_use_Script_.28eg._JavaScript_etc..29_in_LimeSurvey.3F How to use script]).
#Modify the number of rows, number of columns and the start placement in the function call (line 6) as required (the example uses 4 rows and 5 columns and the "array" starts with the third question on the page).

The code may look intimidating at first but it's actually fairly simple. I've laid it out as sequentially as possible and purposely used few shortcuts and many comments to make it easier to follow.

Notes:
*If you use question types other than boilerplate, short text, list dropdown, numeric or yes-no, you'll need to add to the last section of code, where it hides the question text and formats the inputs for display this way.
*Any extra questions on the page should follow this grid of questions, not precede them.
* If you use boilerplate as question type you should add after:
<syntaxhighlight lang="javascript">
// Hide the question text elements in non-boilerplate questions
$('div.questionCell td.questiontext').parent().hide();
</syntaxhighlight>
the following 2 lines
<syntaxhighlight lang="javascript">
//repair boilerplate questioncells
$('div.boilerplate td.questiontext').parent().show();
</syntaxhighlight>

Javascript code:
<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {
// Call the "sideBySide" function with number of rows, columns and start position
sideBySide(4, 5, 3);
});

function sideBySide(rows, columns, startQuestion) {

/*********** Display multiple questions side by side ***********/

if ($('div.qRow1').length == 0) {

var rowNum = 0;
var colNum = 1;
var rowList = new Array();

//////// Add question classes for later use ////////

// Loop through all questions and add row and column specific classes
$('div[id^="question"]').each(function(i) {
if(i >= (startQuestion-1) && rowNum < rows) { // This IF condition only needed if there are questions before or following the "inline" questions
$(this).addClass('qRow'+rowNum+'').addClass('qCol'+colNum+'').addClass('inlineQuestion');
if(rowNum == 0 && colNum > 1) {
$(this).addClass('columnLabel');
}
if(rowNum > 0 && colNum == 1) {
$(this).addClass('rowLabel');
}
else if(rowNum > 0 && colNum > 1) {
$(this).addClass('questionCell');
}
if(colNum == columns) {
rowList.push('qRow'+rowNum+'');
rowNum++;
colNum = 1;
}
else {
colNum++;
}
}
else {
$(this).addClass('normalQuestion');
}
});

//////// Survey layout manipulation ////////

// Fix the width of the survey
$('table.outerframe').css({
'width': '900px'
});

// Wrap each "row" in a wrapper div
$(rowList).each(function(i) {
$('.'+this+'').wrapAll('<div id="inlineWrapper'+i+'" class="inlineRow" />');
});

// Style the wrapper divs
$('.inlineRow').css({
'width': '850px',
'margin': '0 auto 0 auto',
'clear': 'both'
});

$( '.inlineRow:first' ).css({
'margin-top': '10px'
});

// Get all the questions to sit politely side by side
$( '.inlineQuestion' ).css({
'float': 'left',
'height':'41px',
'overflow':'hidden',
'margin-bottom': '-8px'
});
$( '.inlineQuestion .questionhelp' ).hide();
$( '.inlineQuestion .survey-question-help' ).parent().hide();

// A little space under the last row
$( '.inlineRow:last .inlineQuestion' ).css({
'margin-bottom': '10px'
});

// Any questions not displayed inline (this is only needed if there are questions following the "inline" questions)
$( '.normalQuestion' ).css({
'clear': 'both'
});

//////// Column manipulation ////////

// Set the column widths - can be set individually if necessary
// Must add up to less than 100%
$( '.qCol1' ).css({
'width': '12%'
});

$( '.qCol2, .qCol3, .qCol4, .qCol5' ).css({
'width': '22%'
});

//////// Question manipulation ////////

// Hide the answer element in boilerplate questions
$( 'div.boilerplate td.answer' ).parent().hide();

// Hide the question text elements in non-boilerplate questions
$('div.questionCell td.questiontext').parent().hide();

// Push the question tables to 100%
$( 'div.inlineRow table' ).css({
'width': '100%'
});

// Get everything to line up nicely vertically
$( '.inlineQuestion td.questiontext, .inlineQuestion td.answer p' ).css({
'text-align': 'center'
});

// Adjust cell heights so everything lines up nicely horizontally
$( '.inlineQuestion td.answer, .inlineQuestion td.questiontext' ).css({
'height':'35px',
'overflow':'hidden',
'padding':'0.5em'
});
$( '#inlineWrapper0 .inlineQuestion' ).css({ 'height':'50px' });
$( '#inlineWrapper0 td.questiontext' ).css({
'height':'50px'
});

// Yes-no question styles
$( 'div.yes-no ul' ).css({
'text-align': 'center',
'font-size': '90%',
'margin': '0',
'padding-bottom': '5px'
});
$( 'div.yes-no li' ).css({
'padding-right': '1.5em'
});
$( 'div.yes-no td.answer' ).css({
'padding-bottom': '0'
});

// Short-text question styles
$( 'div.text-short input' ).css({
'width': '125px',
'margin-left': '0'
});

// Numeric question styles
$( 'div.numeric input' ).css({
'width': '125px',
'margin-left': '0'
});
$( 'div.numeric p.tip' ).css({
'display': 'none'
});

// Get rid of the margins around select boxes
$( 'p.question' ).css({ 'margin':'0' });
}
}
</script>
</syntaxhighlight>
<br /><br />

=Star Rating System=

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

This workaround uses the [http://www.fyneworks.com/jquery/star-rating/ jQuery Star Rating Plugin] to display a series of stars that are used to generate a rating value. This value is then passed to either a hidden numeric input question or a hidden list radio question. Both methods are outlined below - use one or both depending on whether you want to use [Assessments|assessments].

The plugin uses a series of radio inputs to generate the stars (more about these below). It allows the use of whole or partial stars as shown in the image below.

[[File:star_rating_700x324.png]]

==Star Rating System Using Numeric Input Question==

Use this method if you would like your rating data to be collected as a numeric value and don't want to use [[Assessments|LimeSurvey assessments]] - it's a little easier to implement.

'''Implementation is as follows:'''
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])
#[http://www.fyneworks.com/jquery/star-rating/ Download the plugin] and place the following included files in your template folder:
##jquery.MetaData.js
##jquery.rating.css
##jquery.rating.js
##delete.gif
##star.gif
#In the <head> section of your startpage.pstpl, add the following code to link to the files.

<syntaxhighlight lang="php">

<script type="text/javascript" src="{TEMPLATEURL}jquery.rating.js" charset="utf-8"></script>

<script type="text/javascript" src="{TEMPLATEURL}jquery.MetaData.js" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}jquery.rating.css" />

</syntaxhighlight>

5. Create a numeric input question and then in the source of the question add as many radio inputs as star segments. For example, if you would like 5 stars, each with half-segments, you would need 10 radio inputs and that would give rating values from 1-10.

Don't confuse these inputs with the actual question, they are just for the plugin's use.

At this point your question source code should look something like below. Make sure that all inputs have the same name. Each input must have the same title as value and these must be sequential. Don't worry about how all of this looks in the WSYSWYG editor - the plugin is going to hide these inputs and replace them with stars.

<syntaxhighlight lang="php">

Q1 - Some question text here.<br /><br />

<div id="starContainer">

<input type="radio" class="star { split:2 }" title="1" value="1" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="2" value="2" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="3" value="3" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="4" value="4" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="5" value="5" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="6" value="6" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="7" value="7" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="8" value="8" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="9" value="9" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="10" value="10" name="q1Rate" />

</div>

</syntaxhighlight>

6. A note on split stars. The stars in the above example are split in half by the ''{ split:2 }'' metadata. So if you don't want split stars, your inputs would look like:

'''<input type="radio" class="star" title="1" value="1" name="q1Rate" />'''

And stars split into third-segments would look like:

'''<input type="radio" class="star { split:3 }" title="1" value="1" name="q1Rate" />'''

7. Finally, in the source of the question add the following function after your inputs. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]])

Some notes on the code:
*Replace "SSSSS", "GG", "QQ" in the function call at the end with the survey ID, group ID and question ID respectively.
*The code will hide the numeric input and pass the rating values into it as they are changed. If the rating is canceled the numeric input is nullified. If a respondent navigates away from the page then returns the code "remembers" the previous rating and displays the stars accordingly.
*If you want to apply it to more numeric questions on the same page simply add more calls with the appropriate IDs. (eg. handleRatingNumeric(11111, 22, 1); handleRatingNumeric(11111, 22, 2); ...) .

Code:

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

function handleRatingNumeric (sID, gID, qID) {

// Hide the numeric input

$('#question' + qID + ' td.answer').parent().hide();

// Get a previous rating (if any) and use it to initialize the star display

var rating = $('#answer' + sID + 'X' + gID + 'X' + qID + '').val();

if ( rating != '' ) {

$('#question' + qID + ' input.star').rating('select', rating);

}

// Listener on the star rating cancel element

$('#question' + qID + ' div.rating-cancel').click(function(event) {

// Nullify the rating if the Cancel element is clicked

rating = '';

$('#answer' + sID + 'X' + gID + 'X' + qID + '').val(rating);

});

// Listener on the star rating elements

$('#question' + qID + ' div.star-rating').click(function(event) {

// Find the value of the highest clicked star and pass it into the text input

$('#question' + qID + ' div.star-rating-on').each(function(i) {

rating = $(this).children('a').html( );

});

$('#answer' + sID + 'X' + gID + 'X' + qID + '').val(rating);

});

}

// Call the function for the numeric question

handleRatingNumeric (SSSSS, GG, QQ);

});

</script>

</syntaxhighlight>

==Star Rating System Using List (Radio) Question==

Use this method if you would like to use [[Assessments|assessments]].

'''Implementation is as follows:'''

1. Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])

2. Set up the template to use custom onload functions. (See the [[Workarounds: Manipulating a survey at runtime using Javascript#Custom onload function|workaround here]])

3. [http://www.fyneworks.com/jquery/star-rating/ Download the plugin] and place the following included files in your template folder:
*jquery.MetaData.js
*jquery.rating.css
*jquery.rating.js
*delete.gif
*star.gif

4. In the <head> section of your startpage.pstpl, add the following code to link to the files.

<syntaxhighlight lang="php">

<script type="text/javascript" src="{TEMPLATEURL}jquery.rating.js" charset="utf-8"></script>

<script type="text/javascript" src="{TEMPLATEURL}jquery.MetaData.js" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}jquery.rating.css" />

</syntaxhighlight>

5. Create a list (radio) question with the same amount of sequentially numbered answers as star ratings. For example, if you want 5 whole-stars, you would create 5 answers, as in the image below, and this would give you ratings from 1-5. Note that the "Codes" and "Answers" must be sequential numbers.

[[File:star_rating_700x156_v2.png]]

6. In the list (radio) question, set the [[Advanced question settings|hide_tip]] question attribute to 1

7. In the source of the question add as many radio inputs as star segments. So 5 whole-stars (as in the demo Q2), would need 5 radio inputs.

Don't confuse these inputs with the actual question, they are just for the plugin's use.

At this point your question source code should look something like below. Make sure that all inputs have the same name. Each input must have the same title as value and these must be sequential. Don't worry about how all of this looks in the WSYSWYG editor - the plugin is going to hide these inputs and replace them with stars.

<syntaxhighlight lang="php">

Q2 - Some question text here.<br /><br />

<div id="starContainer">

<input type="radio" class="star" title="1" value="1" name="q2Rate" />

<input type="radio" class="star" title="2" value="2" name="q2Rate" />

<input type="radio" class="star" title="3" value="3" name="q2Rate" />

<input type="radio" class="star" title="4" value="4" name="q2Rate" />

<input type="radio" class="star" title="5" value="5" name="q2Rate" />

</div>

</syntaxhighlight>

8. A note on split stars. The stars in the above example are whole-stars. If you want them split you need to add metadata to the class - something like ''{ split:2 }''. So if you want half-stars your inputs would look like:

'''<input type="radio" class="star { split:2 }" title="1" value="1" name="q1Rate" />'''

And stars split into third-segments would look like:

'''<input type="radio" class="star { split:3 }" title="1" value="1" name="q1Rate" />'''

9. Finally, in the source of the question add the following function after your inputs. (See [http://docs.limesurvey.org/tiki-index.php?page=Workarounds&structure;=English+Instructions+for+LimeSurvey#How_to_use_Script_eg._JavaScript_etc._ How to use script here])

Some notes on the code:
*Replace "SSSSS", "GG", "QQ" in the function call at the end with the survey ID, group ID and question ID respectively.
*The code will hide the question radio buttons and toggle them as the rating values are changed. If the rating is canceled all question inputs are unchecked. If a respondent navigates away from the page then returns the code "remembers" the previous rating and displays the stars accordingly.
*If you want to apply it to more numeric questions on the same page simply add more calls with the appropriate IDs. (eg. handleRatingRadio(11111, 22, 1); handleRatingRadio(11111, 22, 2); ...) .

Onload code:

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

function handleRatingRadio (sID, gID, qID) {

// Hide the radio input

$('#question' + qID + ' td.answer').parent().hide();

// Get a previous rating (if any) and use it to initialize the star display

var rating = $('#question' + qID + ' input.radio[checked=true]').attr('value');

//if ( rating != '' ) {

if ( rating ) {

$('#question' + qID + ' input.star').rating('select', rating);

}

// Listener on the star rating cancel element

$('#question' + qID + ' div.rating-cancel').click(function(event) {

// Nullify the rating if the Cancel element is clicked

rating = '';

$('#question' + qID + ' input.radio').attr('checked', false);

});

// Listener on the star rating elements

$('#question' + qID + ' div.star-rating').click(function(event) {

// Find the value of the highest clicked star and pass it into the text input

$('#question' + qID + ' div.star-rating-on').each(function(i) {

rating = $(this).children('a').html( );

});

$('#question' + qID + ' input.radio[value=' + rating + ']').attr('checked', true);

});

}

// Call the function for the radio question

handleRatingRadio (SSSSS, GG, QQ);

});

</script></syntaxhighlight>

=Variable column widths in array=

''Tested with: 1.85+ (7557), IE 6/7, Firefox 3.0, Safari 3.2''

This workaround allows you to define all column widths of an array question - as shown in the image below and [http://www.partnersinc.biz/surveys//index.php?sid=26842&newtest=Y&lang=en demonstrated here]. This example uses the default template shipped with 7557 but should be adaptable to any template.

[[File:array_widths_701x226.gif]]

We use a function to remove all of the widths imposed by the core code and then insert our own.

'''Implementation is as follows:'''
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions (see [http://docs.limesurvey.org/tiki-index.php?page=Optional+settings&structure;=English+Instructions+for+LimeSurvey#Filtering_dangerous_HTML_tags_in_survey_objects documentation here]).
#Create the array question.
#In the source of the array question add the following script (see [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]]).
#Replace all instances of QQ with the question ID.
#In the third section of code, adjust the widths and add/remove columns as necessary. This example is for an array with a question text column followed by 3 answer columns as shown above.
#In the final section adjust the question text alignment to your liking

Onload code

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Get rid of all the widths that the API imposes

$( 'div#questionQQ table.question col' ).attr('width', '');

$( 'div#questionQQ table.question thead td' ).attr('width', '');

// Define a width for the question table so we can do so for its children

// NOTE: Keep this to 95% or less so IE will behave

$( 'div#questionQQ table.question' ).attr('width', '95%');

// Define the column widths

// Add or remove columns and adjust widths as necessary but widths should add up to 100%

// NOTE: Columns must be sequentially numbered starting at 0 - eg, td:eq(0), td:eq(1), td:eq(2).....

$( 'div#questionQQ table.question tbody th:eq(0)' ).css({ 'width':'10%' }); // Answer text column

$( 'div#questionQQ table.question tbody td:eq(0)' ).css({ 'width':'50%' }); // First answer column

$( 'div#questionQQ table.question tbody td:eq(1)' ).css({ 'width':'20%' }); // Second answer column

$( 'div#questionQQ table.question tbody td:eq(2)' ).css({ 'width':'20%' }); // Third answer column

// Push the text input widths to 95% of their parent containers

$( 'div#questionQQ table.question input[type="text"]' ).css({ 'width':'95%' });

// Align the answer text - feel free to experiment

$( 'div#questionQQ table.question tbody th' ).css({'text-align':'center'});

});

</script></syntaxhighlight>

=Use images for radio buttons and checkboxes=

''Tested with: LimeSurvey 1.92/2.0, using IE 9, FireFox 13, Chrome 16, Safari 5''

This workaround uses an adaptation of the jQuery imagetick.js plugin to replace the default radio buttons and checkboxes with images as pictured below:

[[File:images.png]]

This adaptation will work in the following question types:
*Array
*Array by column
*Array dual scale
*Array (5 point choice)
*Array (10 point choice)
*Array (Increase-Same-Decrease)
*Array (Yes-No-Uncertain)
*Gender
*Yes-No
*Multiple choice
*Multiple choice with comments
*5 point choice
*List (Radio)
*List with comment

==LimeSurvey 2.0 and later implementation==

Follow the instructions above with these changes:
#Download [[Media:Imagetick_lime_v2.1.zip|this modified version of the plugin for 2.0 and up]] instead of the one mentioned above and add all contained files to your template directory.
#Add these lines to the <head> element in your startpage.pstpl instead of the one above:<syntaxhighlight lang="php"><script type="text/javascript" src="{TEMPLATEURL}imagetick_lime_2.js"></script>

<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}imagetick_lime_2.css" /></syntaxhighlight>

Thanks to Jordan Boesch for the original plugin.

=Changing the position and layout of an individual question using "question code"=

''Tested with: 1.87+ (6536)''

To use this very flexible workaround you first have to apply a minor change to the question.pstpl of the used template.

<syntaxhighlight lang="php">

<div class="survey-question">

<div class="survey-question-text">

</syntaxhighlight>

needs to be changed to

<syntaxhighlight lang="php">

<div class="survey-question" id="{QUESTION_CODE}">

<div class="survey-question-text" id="{QUESTION_CODE}" >

</syntaxhighlight>

this change won't change anything in the layout and can be left in the template even if you don't need this workaround. It's just a means to have a handle to actually change individual questions.

You can then use a code such as the following in the question text to make question specific format changes. "SAMPLE" needs to be replaced with the concerning question code and javascript has to be allowed ([[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|older versions of limesurvey]], under global settings for newer versions).

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

document.getElementById('SAMPLE').style.borderTop= "0px";

document.getElementById('SAMPLE').style.marginTop= "-62px";

document.getElementById('SAMPLE').style.marginLeft= "30px";

</script>

</syntaxhighlight>

This sample code will hide the border at the top of the question, will move the whole question up by 62px and to the right by 30px. Using this workaround you can change a whole a lot of things concerning format and positions of a specific question without changing all the questions. A (German) list of all the allowed options can be found [http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften here].

=Create MaxDiff question type=
==Version 2.06==

''Tested with: LimeSurvey version 2.06''

This workaround uses JavaScript to convert an '''''Array (flexible labels) by column''''' question into a [http://en.wikipedia.org/wiki/MaxDiff MaxDiff] question type.
<br /><br />
[[File:max_diff_596x253.gif]]
<br /><br />
Implementation is as follows.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create an '''''Array (flexible labels) by column''''' question with 2 "answers" - these will be the left and right columns.
#Assign a label set to the question - these will be the labels in the center column.
#Set the second parameter of the function call to true for randomized rows.
#Adjust the styles in lines 21-24 as required.
<br />
The script moves the question columns into the MaxDiff configuration and disables the opposing radio element when a selection is made.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

// Call the maxDiff() function
// Set the second parameter to true for randomized rows
maxDiff({QID}, false);
});

function maxDiff(qID, randomize) {

// Random number between 1 and 2
// Math.floor(Math.random() * (max - min + 1)) + min;
var randomNum = Math.floor(Math.random() * ((2-1)+1) + 1);

// Move the columns
$('#question'+qID+' table.subquestions-list col:eq(1)').prependTo('colgroup.col-responses');
$('#question'+qID+' table.subquestions-list thead tr:eq(0) th:eq(0)').prependTo('#question'+qID+' table.question thead tr:eq(0)');
$('#question'+qID+' table.subquestions-list tbody tr').each(function(i){
$('td.answer-item:eq(0)', this).prependTo(this);
});
$('#question'+qID+' table.subquestions-list tbody tr').each(function(i){
$('td.answer-item:eq(0)', this).prependTo(this);
});

// Random rows
if(randomize) {
var rowsArr = [];
$('#question'+qID+' table.subquestions-list tbody tr').each(function(i){
$(this).attr('data-index', i);
rowsArr.push(i);
});
shuffleArray(rowsArr);
$(rowsArr).each(function(i){
$('#question'+qID+' table.subquestions-list tbody').append($('#question'+qID+' tr[data-index="'+this+'"]'));
});
}

// Style stuff
$('#question'+qID+' table.subquestions-list col.odd').css({ 'background-color':'transparent' });
$('#question'+qID+' table.subquestions-list tbody th').css({ 'text-align':'center' });
$('#question'+qID+' table.subquestions-list tbody tr:even td, #question'+qID+' table.question tbody tr:even th').css({ 'background-color':'#F1F1F1' });
$('#question'+qID+' table.subquestions-list tbody tr:odd td, #question'+qID+' table.question tbody tr:odd th').css({ 'background-color':'#FCFCFC' });

// Prevent clicking twice in the same row
$('#question'+qID+' input.radio').on('click', function () {

$('#question'+qID+' input.radio').prop('disabled', false);
$('#question'+qID+' input.radio:checked').each(function(i) {
var thisRow = $(this).closest('tr');
$('input.radio', thisRow).not(this).prop('disabled', true);
});
});
}

function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
</script></syntaxhighlight>
==Versions 2.5 and 3.x==

''Tested with: LimeSurvey version 2.5''

This workaround uses JavaScript to convert an '''''Array (flexible labels) by column''''' question into a [http://en.wikipedia.org/wiki/MaxDiff MaxDiff] question type.
<br /><br />
[[File:MaxDiff_2.5.png]]
<br /><br />
'''DOWNLOADS'''<br />
* [[Media:Demo_MaxDiff_For_25_Template.zip|Demo template]]
* [[Media:Demo_MaxDiff_For_25_Survey.zip|Demo survey]]

'''IMPLEMENTATION'''
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create an '''''Array (flexible labels) by column''''' question with 2 "answers" - these will be the left and right columns.
#Add 2 subquestions to the array - these will be the left and right columns.
#Add answers to the array - these will be the rows.
#Create a copy the default template.
#Add the following to the end of '''''template.js''''' in your new template:<syntaxhighlight lang="javascript">function maxDiff(qID, randomize) {

// Identify some elements
var thisQuestion = $('#question'+qID);
var thisTable = $('table.subquestion-list:eq(0)', thisQuestion);

// Assign a new question class
$(thisQuestion).addClass('max-diff-array');

// Move the columns
$('thead tr:eq(0)', thisTable).prepend($('thead tr:eq(0) th:eq(1)', thisTable));
$('tr.answers-list', thisTable).each(function(i){
$('td.answer-item:eq(0)', this).prependTo(this);
});

// Random rows
if(randomize) {
var rowsArr = [];
$('tr.answers-list', thisTable).each(function(i){
$(this).attr('data-index', i);
rowsArr.push(i);
});
shuffleArray(rowsArr);
$(rowsArr).each(function(i){
$('tbody', thisTable).append($('tr[data-index="'+this+'"]', thisTable));
});
}

// Prevent clicking twice in the same row
$('input:radio', thisQuestion).on('click', function () {

$('input:radio', thisQuestion).prop('disabled', false);
$('input:radio:checked', thisQuestion).each(function(i) {
var thisRow = $(this).closest('tr.answers-list');
$('input:radio', thisRow).not(this).prop('disabled', true);
});
});

// Fix up the row classes
var rowClass = 1;
$('tr.answers-list', thisTable).each(function(i) {
$(this).addClass('array'+(2-(i%2)));
});
}

function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}</syntaxhighlight>
#Add the following to the end of '''''template.css''''' in your new template:<syntaxhighlight lang="css">.max-diff-array th.answertext {
text-align: center;
border-right: 3px solid #FFFFFF;
border-left: 3px solid #FFFFFF;
}

/* Override the responsive "no-more-tables" stuff */
@media only screen and (max-width: 801px) {

.max-diff-array .no-more-tables table {
display: table;
border-collapse: inherit;
}

.max-diff-array .no-more-tables thead,
.max-diff-array .no-more-tables tbody {
display: table-row-group;
}

.max-diff-array .no-more-tables tr {
left: auto;
position: relative;
top: auto;
display: table-row;
border: 0 none;
}

.max-diff-array .no-more-tables th,
.max-diff-array .no-more-tables td {
display: table-cell;
text-align: center !important;
color: #2c3e50;
font-size: 15px;
}

.max-diff-array th.answertext {
border-right: 3px solid #FFFFFF;
border-left: 3px solid #FFFFFF;
}

.max-diff-array .answer-item label span {
display: none !important;
}
}</syntaxhighlight>
#Add a script like this to the question source of the Array (flexible labels) question:<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Call the maxDiff() function
// Set the second parameter to true for randomized rows
maxDiff({QID}, true);
});
</script></syntaxhighlight>

=Load SVG Code From Drawing Tool=

This workaround uses JavaScript/jQuery to load a drawing tool and store the results in a huge-text question. The details are outlined in the [[Workarounds: Manipulating a survey at runtime using Javascript#Load SVG Code From Drawing Tool|JavaScript section of the workarounds]].

=Minimum or Maximum Date in Datepicker=

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

'''Please note: From version 2.05 beta6, you MUST set the minimum and maximum date for the date picker directly in the advanced question attributes of the date/time question. This workaround will seize to work.'''

You can set the minimum or maximum selectible date in a datepicker as follows

[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]] and add the following to the source of the date question text or help. Replace "QQ" with the date question ID.

For a minimum date of April 15, 2010:<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;

$('#question'+qID+' .popupdate').datepicker( 'option', 'minDate', new Date(2010, 4-1, 15) );

});

</script>

</syntaxhighlight>

For a minimum date of the current date (today):<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;

$('#question'+qID+' .popupdate').datepicker( 'option', 'minDate', new Date() );

});

</script>

</syntaxhighlight>

For a maximum date of May 10, 2015:<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;

$('#question'+qID+' .popupdate').datepicker( 'option', 'maxDate', new Date(2015, 5-1, 10) );

});

</script>

</syntaxhighlight>

More details here - http://jqueryui.com/demos/datepicker/#option-minDate

=Evaluative Space Grid (ESG)=

''Tested with LimeSurvey versions 2.06 & 2.5''

The evaluative space grid (ESG) is a two-dimensional grid that provides a single-item measure of positivity and negativity (Larsen et al, 2009). See [http://leeds-faculty.colorado.edu/mcgrawp/pdf/larsen.norris.mcgraw.hawkley.cacioppo.2009.pdf page 4 of this PDF].

This can be accomplished using a multiple-numeric question, some simple HTML and a little JavaScript.

A table can be shown in the question. When a respondent clicks a grid cell in the table JavaScript loads the coordinates of the cell into the multiple-numeric question inputs.

[[File:Space_grid_2.png]]<br /><br />
#Create a Multiple Numeric question with two subquestions labelled "X" and "Y".
#Add the following HTML to the source of the question to create the table:<syntaxhighlight lang="html4strict">
<table class="spaceGrid">
<tr>
<td rowspan="5" class="yAxisLabel">How NEGATIVE<br>
do you feel about<br>
the stimulus?</td>
<td class="yLabel">Extremely</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="yLabel">Quite a bit</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="yLabel">Moderately</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="yLabel">Slightly</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="yLabel">Not at all</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="blankCell"></td>
<td class="blankCell"></td>
<td class="xLabel">Not at all</td>
<td class="xLabel"><span class="yLabel">Slightly</span></td>
<td class="xLabel"><span class="yLabel">Moderately</span></td>
<td class="xLabel"><span class="yLabel">Quite a bit</span></td>
<td class="xLabel"><span class="yLabel">Extremely</span></td>
</tr>
<tr>
<td class="blankCell"></td>
<td class="blankCell"></td>
<td colspan="5" class="xAxisLabel">How POSITIVE do you feel about the stimulus?</td>
</tr>
</table>
</syntaxhighlight><br /><br />
#Add the following styles to the end of your template.css file:<syntaxhighlight lang="css">
.spaceGrid {
width: auto;
border: 0 none;
border-collapse: collapse;
}

.spaceGrid td {
padding: 0 3px;
text-align: center !important;
border: 0 none;
}

td.xAxisLabel {
padding-top: 10px;
}

td.yAxisLabel {
padding-right: 10px;
width: 125px;
}

td.xLabel {
height: 20px;
font-weight: normal;
font-size: 13px;
}

td.yLabel {
text-align: right !important;
font-weight: normal;
font-size: 13px;
}

td.gridCell {
width: 70px;
height: 70px;
border: 1px solid #666666;
background-color: #FFFFFF;
cursor: pointer;
}

td.checkedCell {
background-color: #66FF00;
}</syntaxhighlight><br /><br />
#Add the following to the end of your template.js file:<syntaxhighlight lang="javascript">
$(document).ready(function() {

$('.spaceGrid').each(function(i){

// Define some vars
var thisQuestion = $(this).closest('.numeric-multi');
var thisTable = $(this).closest('table.spaceGrid');
var numGridCell = $('.gridCell', thisTable).length;
var numCols = $('tr:eq(0) .gridCell', thisTable).length;
var numRows = numGridCell/numCols;

// Hide the answers list
$('.subquestion-list, .questions-list', thisQuestion).hide();

// Initial state
var xCoord = $('input.text:eq(0)', thisQuestion).val() - 1;
var yCoord = numRows - $('input.text:eq(1)', thisQuestion).val();
$('tr:eq('+yCoord+') .gridCell:eq('+xCoord+')', thisTable).addClass('checkedCell');

// Listener on the grid cells
$('.gridCell').click(function(){
var thisRow = $(this).closest('tr');

// Add class to checked cell
$('.checkedCell', thisQuestion).removeClass('checkedCell');
$(this).addClass('checkedCell');

// Find the cell coordinates
var reverseRowIndex = (numRows - $('tr', thisTable).index($(thisRow)));
var colIndex = $('.gridCell', thisRow).index($(this)) + 1;

// Load coordinates into inputs
$('input.text:eq(0)', thisQuestion).val(colIndex);
$('input.text:eq(1)', thisQuestion).val(reverseRowIndex);
});
});

});</syntaxhighlight><br /><br />
The script should automatically handle different grid sizes.

=Slider Highlighting=

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

You may want to highlight a slider after it has been moved/changed to allow respondents to easily see which slider subquestions have been answered.

[[File:Capture.PNG]]<br /><br />
#Add the following to the end of '''template.js''':<syntaxhighlight lang="javascript">
$('html').bind('slidecreate', function(event, ui) {
$('.slider_callout').each(function(i){
if($(this).text().length > 0) {
$(this).parents('li:eq(0)').addClass('changedSlider');
}
});
});

$(document).ready(function() {
$('.ui-slider-horizontal').bind('slidechange', function(event, ui) {
$(this).parents('li:eq(0)').addClass('changedSlider');
});
});
</syntaxhighlight><br /><br />
#Add something like the following to the end of '''template.css''' (these styles are for the default template and would need to be modified for other templates):<syntaxhighlight lang="css">
.numeric-multi .answer li {
border-bottom: 5px solid #FFFFFF;
}

.numeric-multi .answer li label {
background-color: #FFFFFF;
}

.numeric-multi .answer li div.multinum-slider {
margin: 1.5em 0.5em 0.2em 0;
padding-left: 0.5em;
}

.ui-slider-1 {
margin-bottom: 10px;
}

.changedSlider {
background-color: #99FFFF;
}
</syntaxhighlight>
<br /><br />

=Dynamic Slider Call-Out Styles=

''Tested with: 2.05, IE 9-11, Firefox, Chrome''

This is an example of how to insert a custom '''''slide()''''' function to control the appearance of the slider call-out as the slider is manipulated. In this example the call-out text colour changes as the slider is moved. Sample survey here - [[Media:Dynamic_slider_call_out.lss|dynamic call-out slider survey]].
<br /><br />
[[File:Dynamic_slider_call_out.png]]<br /><br />
Requirements:
*LimeSurvey 2.05 or newer
*A multiple-numeric question with slider enabled<br /><br />
# Create your multi-numeric question with the slider enabled<br /><br />
#Add the following to the source of the question
<br /><br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// Identify this question
var thisQuestion = $('#question{QID}');

// Slide function
$('.ui-slider', thisQuestion).on('slide', function( event, ui ) {
handleCallout($(this).closest('li.answer-item'), ui.value);
});

// Initial callout states
$('input.text', thisQuestion).each(function(i) {
handleCallout($(this).closest('li.answer-item'), $(this).val());
});

// Handle the callout style
function handleCallout(thisRow, sliderVal) {
if(sliderVal < 20) {
$('.slider_callout', thisRow).css('color', '#D90000');
}
else if(sliderVal < 40) {
$('.slider_callout', thisRow).css('color', '#D96D00');
}
else if(sliderVal < 60) {
$('.slider_callout', thisRow).css('color', '#D9D900');
}
else {
$('.slider_callout', thisRow).css('color', '#00B22D');
}
}

});
</script>
</syntaxhighlight>
<br /><br />

=Sliders in Array-Numbers or Array-Dual-Scale-Numbers=

This workaround will replace the dropdowns in '''''array-numbers''''' or '''''array-dual-scale-numbers''''' questions with sliders. The sliders will automatically have the same minimum, maximum and steps that you set in the advanced question settings.

==LimeSurvey Version 2.06==
[[File:custom_sliders_1.png]]<br /><br />
''Tested with: LimeSurvey version 2.06''<br /><br />
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your array-numbers or array-dual-scale-numbers question.
#Add the following to the source of the question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

insertSlider ({QID});

function insertSlider (qID) {

$('#question'+qID+' select').each(function(i, el){

// Hide the dropdown
$(el).hide();

var id = $(el).attr('id').replace(/#/g,'-');

// Some dropdown values
var currentVal = Number($('option:selected', el).val());
var firstVal = Number($('option[value!=""]:first', el).val());
var secondVal = Number($('option[value!=""]:first', el).next('option').val());
var lastVal = Number($('option[value!=""]:last', el).val());

// Insert a container for the slider
var container = $('<div class="customSliderWrapper"></div>').insertAfter(el);

// Initiate the slider
var slider = $('<div id="slider-'+id+'" class="customSlider"></div>').appendTo(container).slider({
min: firstVal,
max: lastVal,
range: 'min',
value: currentVal,
step: secondVal - firstVal,
slide: function( event, ui ) {
$(el).val(ui.value);
$('#callOut-'+id).text($(el).val());
}
});

// Insert a callout
var callout = $('<div id="callOut-'+id+'" class="slider_callout slider-callout"></div>').appendTo($('#slider-'+id+' .ui-slider-handle')).text($('option:selected', el).val());

// Set a value as soon as the slider handle is clicked
$('#slider-'+id+' .ui-slider-handle').mousedown(function() {
$(el).val(slider.slider('value'));
$('#callOut-'+id).text($(el).val());
});
});
}
});
</script></syntaxhighlight><br /><br />
#Add something like the following to the end of '''template.css''' (these styles are for the default template and may need to be modified for other templates):<syntaxhighlight lang="css">
.customSliderWrapper {
position: relative;
margin: 0 10px;
padding-top: 1.75em;
}
</syntaxhighlight>
<br /><br />
==LimeSurvey Version 2.6x==
[[File:Dropdown-sliders.png]]<br /><br />
''Tested with: LimeSurvey version 2.64.7 ''<br /><br />
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your array-numbers or array-dual-scale-numbers question.
#Add the following to the source of the question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

insertSlider ({QID});

function insertSlider (qID) {

// Identify this question
var thisQuestion = $('#question'+qID);
thisQuestion.addClass('with-dropdown-sliders');

// Loop through all array drop-downs
$('select.multiflexiselect', thisQuestion).each(function(i, el){
var thisCell = $(el).closest('td');

// Hide the dropdown
$(el).hide();

// Some dropdown values
var currentVal = $(el).val();
var firstVal = Number($('option[value!=""]:first', el).attr('value'));
var secondVal = Number($('option[value!=""]:eq(1)', el).attr('value'));
var lastVal = Number($('option[value!=""]:last', el).attr('value'));

// Insert an input for the slider
var thisInput = $('<input class="inserted-input" type="text" />').insertAfter(el);

// Initiate the slider
thisInput.val(currentVal).bootstrapSlider({
'min': firstVal,
'max': lastVal,
'step': secondVal - firstVal,
'value': Number(currentVal),
'tooltip': 'always'
});

// Listener on the slider
$(thisInput).on('slideStop', function () {
if($('.tooltip', thisCell).is(':hidden')) {
$('.tooltip', thisCell).show();
$('.tooltip', thisCell).css('margin-left', '-'+($('.tooltip', thisCell).width()/2)+'px');
}
$(el).val($(thisInput).val());
});

// Hide the slider call-out if no value selected yet
if(currentVal == '') {
$('.tooltip', thisCell).hide();
}
});
}
});
</script></syntaxhighlight><br /><br />
#Add something like the following to the end of '''template.css''' (these styles are for the default template and may need to be modified for other templates):<syntaxhighlight lang="css">
.with-dropdown-sliders .slider.slider-horizontal {
margin: 1.5em auto 1em auto;
width: 90%;
}

.with-dropdown-sliders .slider.slider-horizontal .slider-handle {
margin-top: -5px;
}
</syntaxhighlight><br />
Sample survey for version 2.6x: [[Media:Demo_Sliders_in_Array_Survey.zip|Demo_Sliders_in_Array_Survey.zip]]

=Vertical Sliders=

''Tested with: 1.92+, 2.00+, IE 9, Firefox 13, Chrome 19''

This workaround uses a custom jQuery plugin to apply vertical sliders to multiple-numeric questions. You can download a sample template here (with the plugin in template.js) - [[Media:default_vertical_sliders.zip|vertical slider template]] - and a sample survey here - [[Media:demo_vertical_sliders.lss|vertical slider survey]].

[[File:verticalsliders_1.jpg]]<br /><br />
# Create your multi-numeric question(s). Do NOT use any of the slider advanced settings.<br /><br />
#Add the following to the end of template.js. Replace "QQ" (line 5) with the question ID and adjust the options in the function call as desired. Repeat the call as many times as you need for more questions<syntaxhighlight lang="javascript">$(document).ready(function(){

// Call the vertical slider plugin with the question ID
// Edit options here as desired
$('#questionQQ').lsVerticalSlider({
minValue :0, // Minimum value (default 0)
maxValue :200, // Maximum value (default 100)
startValue :100, // Start value (default null)
step :10, // Slider increments (default 1)
height :100, // Height of slider in pixels (default 200)
recordStart :true, // Record the start value? (default no)
showMin :true, // Show minimum value? (default no)
showMax :true // Show maximum value? (default no)
});
});

// NO EDITING REQUIRED BELOW HERE
// A jQuery plugin to convert multiple-numeric questions to vertical sliders
(function( $ ){
$.fn.lsVerticalSlider = function(options) {

// The defaults, extended and modified with any passed in the function call
var opts = $.extend( {
minValue :0,
maxValue :100,
startValue :'',
step :1,
height :150,
recordStart :false,
showMin :false,
showMax :false
}, options);

return this.each(function() {

var $this = $(this);

// Some classes for the question and subquestions
$this.addClass('vertical-slider-question');
$('li:[id<div class="simplebox">="javatbd"]', $this).addClass('vertical-slider-subquestion');

// Loop through the subquestions
$('li:[id</div>="javatbd"]', $this).each(function(i){
var itemID = $(this).attr('id').replace(/javatbd/, '');

// Check for pre-existing answer
if($('#answer'+itemID).val() != '') {
opts.startValue = $('#answer'+itemID).val();
}

// Insert the slider elements
$('#answer'+itemID).after(
'<div class="vertical-slider-max-min" style="height:'+(opts.height+2)+'px;"> \
<div class="vertical-slider-max"></div> \
<div class="vertical-slider-min"></div> \
</div> \
<div id="vertical-slider-'+itemID+'" class="vertical-slider" style="height:'+opts.height+'px;"></div> \
<div class="vertical-slider-callout-wrapper" style="height:'+(opts.height+2)+'px;"> \
<div class="vertical-slider-callout" id="slider-callout-'+itemID+'"></div> \
</div>'
);

// Show min/max if option is set
if(opts.showMax) {
$('.vertical-slider-max', $this).text(opts.maxValue);
}

if(opts.showMin) {
$('.vertical-slider-min', $this).text(opts.minValue);
}

// Initiate the slider
$('#vertical-slider-'+itemID).slider({
orientation: 'vertical',
range: 'min',
min: opts.minValue,
max: opts.maxValue,
value: opts.startValue,
step: opts.step,
slide: function(event, ui) {
$('#answer'+itemID).val(ui.value);
$('#slider-callout-'+itemID).text(ui.value);
setTimeout(function() {
$('#slider-callout-'+itemID).css({ 'bottom':$('#vertical-slider-'+itemID+' .ui-slider-handle').css('bottom') }).show();
}, 10);
},
create: function(event, ui) {
// Initial values and positions
if($('#answer'+itemID).val() != '') { // Pre-existing answer
$('#slider-callout-'+itemID).text(opts.startValue);
}
else if(opts.recordStart) { // Record the start value (if option is set)
$('#answer'+itemID).val(opts.startValue);
$('#slider-callout-'+itemID).text(opts.startValue);
}
else {
$('#slider-callout-'+itemID).hide();
}
$('#slider-callout-'+itemID).css({ 'bottom':$('#vertical-slider-'+itemID+' .ui-slider-handle').css('bottom') });
}
});
});
});
};
})( jQuery );</syntaxhighlight><br /><br />
#Add the following to the end of template.css (these styles are for the default template):<syntaxhighlight lang="css">/* Vertical slider styles and overrides */
.vertical-slider-question p.tip {
display: none;
}

.vertical-slider-subquestion {
float: left;
margin: 0 3em 0 0 !important;
}

.vertical-slider-question label {
display: block;
padding: 0 0 0.75em 0 !important;
}

.vertical-slider-question span.input {
padding: 0.3em 0 0 0;
display: block;
}

.vertical-slider-question input.text {
display: none;
}

.vertical-slider {
float: left;
border-radius: 4px;
}

.vertical-slider-question .ui-slider-handle {
top: auto;
border-radius: 4px;
}

.vertical-slider-max-min,
.vertical-slider-callout-wrapper {
float: left;
position: relative;
}

.vertical-slider-callout-wrapper {
min-width: 3em;
}

.vertical-slider-max-min {
margin-right: 0.5em;
}

.vertical-slider-max,
.vertical-slider-min {
font-size: 0.8em;
color:#666666;
line-height: 1;
}

.vertical-slider-max {
margin-top: -0.5em;
}

.vertical-slider-min {
position: absolute;
right: 0;
bottom: 0;
margin-bottom: -0.5em;
}

.vertical-slider-callout {
position: absolute;
top: auto;
margin: 0 0 -0.6em 0.5em;
padding: 0.1em;
font-size: 0.9em;
color:#000000;
line-height: 1;
background: #F8F8FF;
border: 1px solid #D2E0F2;
border-radius: 4px;
}</syntaxhighlight>
<br /><br />

=Range Slider=

==LimeSurvey Version 2.5x==

This workaround uses a custom jQuery plugin to insert a jQuery UI range slider into a multi-numeric question and automatically populate that question's inputs with the range min and max values.

'''Download''': [[Media:Demo_Range_Slider_2.5x.zip|Sample Template and Survey.]]

[[File:Demo_Range_Slider_2.5x.png]]<br /><br />
The plugin handles:
*previous answers
*slider max/min
*range min start
*range max start
*range span min
*slider step
*record the start values
*show slider max and min<br /><br />
Requirements:
<ul><li>LimeSurvey 2.5x</li>
<li>A multiple-numeric question with two subquestions</li></ul><br /><br />
#Create your multi-numeric question. Do NOT use any of the slider advanced settings.
#Add the following to the end of template.js.<syntaxhighlight lang="javascript">// A jQuery plugin to display a range slider in LimeSurvey
// Author - Tony Partner - partnersurveys.com
(function( $ ){

$.fn.lsRangeSlider = function(options) {

// The defaults, extended and modified with any passed in the function call
var opts = $.extend( {
sliderMin :0, // Minimum slider value (default 0)
sliderMax :100, // Maximum slider value (default 100)
rangeStartMin :'', // Minimum range handle start value (default sliderMin)
rangeStartMax :'', // Maximum range handle start value (default sliderMax)
minRangeSpan :0, // Minimum allowed range span (default 0)
step :1, // Slider increments (default 1)
recordStart :false, // Record the start value? (default no)
showMin :false, // Show slider minimum value? (default no)
showMax :false // Show slider maximum value? (default no)
}, options);

return this.each(function() {

if($(this).hasClass('numeric-multi') && $('input.text', this).length == 2) {

// Define some vars
var thisQuestion = $(this);
var rangeMinInput = $('input.text.form-control:eq(0)', thisQuestion);
var rangeMaxInput = $('input.text.form-control:eq(1)', thisQuestion);
thisQuestion.addClass('range-slider-question');

// Check for pre-existing answer
if($(rangeMinInput).val() != '' && $(rangeMinInput).val() != '') {
opts.rangeStartMin = $(rangeMinInput).val();
opts.rangeStartMax = $(rangeMaxInput).val();
}
else {
if(opts.rangeStartMin == '') {
opts.rangeStartMin = opts.sliderMin;
}
if(opts.rangeStartMax == '') {
opts.rangeStartMax = opts.sliderMax;
}
}

// Insert the slider
var insertedEls = '<div class="col-xs-12 col-sm-12 withslider">\
<input class="inserted-slider" type="text" name="rangeSlider" />\
<div class="pull-left">\
<span class="help-block inserted-slider-min"></span>\
</div>\
<div class="pull-right">\
<span class="help-block inserted-slider-max"></span>\
</div>\
</div>';
$('input[type="text"].form-control:eq(0)', thisQuestion).closest('.subquestion-list').hide().before(insertedEls);

var sliderValues = [Number(opts.rangeStartMin), Number(opts.rangeStartMax)];

$('input.inserted-slider', thisQuestion).bootstrapSlider({
'min': Number(opts.sliderMin),
'max': Number(opts.sliderMax),
'step': Number(opts.step),
'range': true,
'value': sliderValues,
'tooltip': 'always'
});
if($(rangeMinInput).val() == '' && $(rangeMinInput).val() == '') {
$('.slider .tooltip', thisQuestion).hide();
}

// Listener on the range slider
$('input.inserted-slider', thisQuestion).on('slideStart', function(event, ui) {
});
$('input.inserted-slider', thisQuestion).on('slide slideStop', function(event, ui) {
var thisLowerVal = Number($.trim($(this).val().split(',')[0]));
var thisUpperVal = Number($.trim($(this).val().split(',')[1]));
if(opts.minRangeSpan > 0 && (thisUpperVal-thisLowerVal) < opts.minRangeSpan) {
$('input.inserted-slider', thisQuestion).bootstrapSlider('setValue', sliderValues);
}
else {
// Load the LS inputs
$(rangeMinInput).val(thisLowerVal);
$(rangeMaxInput).val(thisUpperVal);
// Fire Expression manager
checkconditions($(rangeMinInput).attr('value'), $(rangeMinInput).attr('name'), $(rangeMinInput).attr('type'));
checkconditions($(rangeMaxInput).attr('value'), $(rangeMaxInput).attr('name'), $(rangeMaxInput).attr('type'));
// Show the tooltip
$('.slider .tooltip', thisQuestion).show();
sliderValues = [thisLowerVal, thisUpperVal];
}
});

// Show min/max if option is set
if(opts.showMin) {
$('.inserted-slider-min', thisQuestion).text(opts.sliderMin);
}
if(opts.showMax) {
$('.inserted-slider-max', thisQuestion).text(opts.sliderMax);
}

// Handle recordStart
if(opts.recordStart) {
if($(rangeMinInput).val() == '' && $(rangeMinInput).val() == '') {
// Load the LS inputs
$(rangeMinInput).val(Number($.trim($('input.inserted-slider', thisQuestion).val().split(',')[0])));
$(rangeMaxInput).val(Number($.trim($('input.inserted-slider', thisQuestion).val().split(',')[1])));
// Fire Expression manager
checkconditions($(rangeMinInput).attr('value'), $(rangeMinInput).attr('name'), $(rangeMinInput).attr('type'));
checkconditions($(rangeMaxInput).attr('value'), $(rangeMaxInput).attr('name'), $(rangeMaxInput).attr('type'));
// Show the tooltip
$('.slider .tooltip', thisQuestion).show();
}
}
}
});

};
})( jQuery );</syntaxhighlight>
#Then, add something like this to the source of your question to apply the plugin with some custom option settings (I think the comments explain the options adequately)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').lsRangeSlider({
sliderMin :0, // Minimum slider value (default 0)
sliderMax :10, // Maximum slider value (default 100)
rangeStartMin :2, // Minimum range handle start value (default sliderMin)
rangeStartMax :8, // Maximum range handle start value (default sliderMax)
minRangeSpan :0, // Minimum allowed range span (default 0)
step :1, // Slider increments (default 1)
recordStart :true, // Record the start value? (default no)
showMin :true, // Show slider minimum value? (default no)
showMax :true // Show slider maximum value? (default no)
});
});
</script></syntaxhighlight>
#Or, to apply the plugin with the default option settings<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').lsRangeSlider();
});
</script></syntaxhighlight>
<br /><br />

=Reverse Slider=

{{Box|The reverse slider feature can be used in any (multiple) numerical input question type. For more details, please check the [[Question_type_-_Multiple_numerical_input#Slider|slider wiki subsection]].}}

=Sliders With Control Buttons=
== Version 2.05 ==

''Tested with: 2.05, IE 7-10, Firefox, Chrome''

This workaround uses a custom jQuery plugin to insert "up" and "down" buttons to control sliders. You can download a sample template here - [[Media:Demo_Slider_Buttons.zip|slider with buttons template]] - and a sample survey here - [[Media:Limesurvey_survey_button_slider.lss|button slider survey]].

[[File:Button_slider.jpg]]<br /><br />
The plugin allows the following options:
*Down Text: Text for the "down" button
*Up Text: Text for the "up" button
*Scrolling: Continuous slider movement if the left mouse button is held down
*Scroll Interval: Interval (in milliseconds) between slider movement when button is held down (do not make this too short or it will be difficult to stop the slider accurately)
*Value Prefix: Prefix for call-out
*Value Suffix: Suffix for call-out<br /><br />
Requirements:
*LimeSurvey 2.05 or newer
*A multiple-numeric question with slider enabled<br /><br />
# Create your multi-numeric question with the slider advanced settings.<br /><br />
#Add the following to the end of template.js.<syntaxhighlight lang="javascript">// A custom plugin to add control buttons to LimeSurvey sliders
// Author - Tony Partner - partnersurveys.com
(function( $ ){

$.fn.sliderButtons = function(options) {

// The defaults, extended and modified with any passed in the function call
var opts = $.extend( {
downText: '-', // Text for the "down" button
upText: '+', // Text for the "up" button
scrolling: true, // Continuous slider movement if left mouse button held down
scrollInterval: 150,// Interval (in ms) between slider movement when button is held down
valuePrefix: '', // Prefix for callout
valueSuffix: '' // Suffix for callout
}, options);

return this.each(function(i) {

var thisQuestion = $(this);

// Add some classes
$(thisQuestion).addClass('slider-button-question');

// Insert the buttons
$('li.question-item', thisQuestion).append('<div class="slider-button-wrapper">\
<button type="button" class="slider-button down">'+opts.downText+'</button>\
<button type="button" class="slider-button up">'+opts.upText+'</button>\
</div>');

// Initial button states
function handleButtonState(slider) {
var thisRow = $(slider).closest('li.question-item');
var thisSliderVal = $(slider).slider('option', 'value');
var thisSliderStep = $(slider).slider('option', 'step');
var thisSliderMin = $(slider).slider('option', 'min');
var thisSliderMax = $(slider).slider('option', 'max');
$('button.slider-button', thisRow).prop('disabled', false);
if ($(slider).slider('option', 'value') == thisSliderMin) {
$('button.slider-button.down', thisRow).prop('disabled', true);
}
if ($(slider).slider('option', 'value') == thisSliderMax) {
$('button.slider-button.up', thisRow).prop('disabled', true);
}
}
$('.multinum-slider', thisQuestion).each(function(i) {
handleButtonState(this);
if($(this).closest('li.question-item').find('input.text').val() != '') {
$('.slider-callout', this).text(opts.valuePrefix+$(this).closest('li.question-item').find('input.text').val()+opts.valueSuffix);
}
});

// Function to handle button actions
function handleButtons(thisButton) {
var thisRow = $(thisButton).closest('li.question-item');
var thisSlider = $('.multinum-slider', thisRow);
var thisSliderStep = $(thisSlider).slider('option', 'step');
var stepDecimals = 0;
if(thisSliderStep.toString().indexOf('.') >= 0) {
stepDecimals = thisSliderStep.toString().split('.')[1].length;
}
var thisSliderVal = Number($(thisSlider).slider('option', 'value')).toFixed(stepDecimals);
var thisSliderMin = $(thisSlider).slider('option', 'min');
var thisSliderMax = $(thisSlider).slider('option', 'max');
if ($(thisButton).hasClass('down') && thisSliderVal > thisSliderMin) {
$(thisSlider).slider('option', 'value', Number(thisSliderVal)-Number(thisSliderStep));
}
if ($(thisButton).hasClass('up') && thisSliderVal < thisSliderMax) {
$(thisSlider).slider('option', 'value', Number(thisSliderVal)+Number(thisSliderStep));
}
var newValue = $(thisSlider).slider('option', 'value').toFixed(stepDecimals).replace(/\./, LSvar.sLEMradix);
$('input.text', thisRow).val(newValue).triggerHandler('keyup');
$('.slider-callout', thisSlider).text(opts.valuePrefix+newValue+opts.valueSuffix);
}

// Scrolling
if(opts.scrolling == true) {

var sliderTimeout;
var clicker = $('button.slider-button', thisQuestion);
var count = 0;

$('button.slider-button', thisQuestion).mousedown(function(){
var thisButton = $(this);
sliderTimeout = setInterval(function(){
handleButtons(thisButton);
}, opts.scrollInterval);
return false;
});

$(document).mouseup(function(){
clearInterval(sliderTimeout);
return false;
});
$('button.slider-button', thisQuestion).mouseout(function(){
handleButtonState($(this).closest('li.question-item').find('.multinum-slider'));
});
}

// Listener on the buttons
$('button.slider-button', thisQuestion).click(function(e) {
handleButtons(this) ;
handleButtonState($(this).closest('li.question-item').find('.multinum-slider'));
});

// Listener on sliders
$('.multinum-slider', thisQuestion).on('slidestop', function( event, ui ) {
handleButtonState(this);
});

// Listener on reset buttons
$('.slider-reset', thisQuestion).on( "click", function( event, ui ) {
var thisReset = $(this);
setTimeout(function() {
handleButtonState($(thisReset).closest('li.question-item').find('.multinum-slider'));
}, 150);
});
});
};
})( jQuery );
</syntaxhighlight><br /><br />
#Add the following to the end of template.css (these styles are for the default template but easily modified for others):<syntaxhighlight lang="css">.slider-button-question label.slider-label {
margin-top: 0;
padding: 40px 1em 0 0;
*padding: 25px 1em 0 0;
}

.slider-button-question div.multinum-slider {
margin-top: 45px;
}

.slider-button-question .ui-slider-horizontal .ui-slider-handle {
width: 18px;
margin-left: -9px;
top: -4px;
}

.slider-button-question .slider_callout {
margin-left: -41px;
text-align: center;
width: 100px;
}

.slider-button-question .slider-button-wrapper {
float: left;
margin: 40px 0 0 25px;
}

.slider-button-question .slider-button-wrapper button {
padding: 0 10px;
margin: 0 0 0 5px;
}

.slider-button-question .slider-button-wrapper button:disabled {
opacity:0.65;
filter:alpha(opacity=65);
cursor: default;
}

.slider-button-question .slider-reset {
margin-top: 42px;
}
</syntaxhighlight><br /><br />
#Then, add something like this to the source of your question to apply the plugin with some custom option settings (I think the comments explain the options adequately)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#question{QID}').sliderButtons({
downText: 'Down', // Text for the "down" button
upText: 'Up', // Text for the "up" button
scrolling: true, // Continuous slider movement if left mouse button held down
scrollInterval: 250, // Interval (in ms) between slider movement when button is held down
valueSuffix: "%" // Suffix for callout
});
});
</script>
</syntaxhighlight><br /><br />
#Or, simply to apply the plugin with the default option settings<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#question{QID}').sliderButtons();
});
</script>
</syntaxhighlight>

== Version 3.x ==

A custom question theme for Slider Control Buttons for LimeSurvey 3.x can be found here - https://github.com/tpartner/LimeSurvey-Slider-Controls-3x

Workarounds: Question design, layout and templating

2023-05-11T17:29:36Z

Tpartner: /* Star Rating System Using Numeric Input Question */

This section more or less deals with styling your survey, adjusting the layout and setting up special question types. You can find '''similar information''' at these pages:
* [[The template editor]]
* [[Workarounds: Manipulating a survey at runtime using Javascript]]
* [[Workarounds: Survey behaviour]].

<div class="simplebox"><center><br />'''Please keep in mind that these workarounds are not official LimeSurvey extensions - they are solutions that users have created for themselves. <span style='color:#EE0000'>Therefore LimeSurvey can't offer guarantees or support for these solutions.</span><br />If you have questions, please contact the users that, thankfully, shared their solutions with the community.'''<br /><br /></center></div>

__TOC__

=Different progress indicator=

==Version 1.87 and later:==

Add the following to the end of template.js. It will find the progress value and insert it into the element following the progress bar.

It should be pointed out that I had to introduce a delay in firing the function because the progress value is not calculated until after template.js is called. The delay is set at 1/10 of a second but you may be able to reduce that.

<syntaxhighlight lang="php">

// Display progress value

function setProgValue() {

var progress = $('#progressbar').attr('aria-valuenow');

$('#progress-post').text(progress+'%').show();

}

$(document).ready(function(){

$('#progress-post').hide();

setTimeout('setProgValue()',100);

});

</syntaxhighlight>

If you want to hide the "0%" before the progress bar, add the following to the end of template.css:

<syntaxhighlight lang="php">
#progress-pre {

display: none;

}

</syntaxhighlight>

=Delete unwanted gaps in question title=

''Tested with: ''

When copying data (questions, answers, ...) from MS Word or other applications into the editor there might occur some gaps in the question title.

There are two solutions to this:
# Use popup mode and manually delete unwanting extra html tags (requires html knowledge).
# Disable paste word feature: Tweak your limesurvey-config.js file in limesurvey/admin/scripts/fckeditor.26 and set the following option to true:

<syntaxhighlight lang="php">FCKConfig.ForcePasteAsPlainText = true ;</syntaxhighlight>

After that clear you browser cache and try again.

=How to change the <font-size> tags using CSS=

''This workaround was deleted because it is outdated. Such changes can be done by [[The template editor#Styling questions with CSS|adjusting template.css]] of your template.

=Question type variation: Scale with bars (one and two sided)=

''Tested with: ''

Some methodogical issues to think about: Very often a common scale as 1 to 5 or -2 to +2 fits all needs, as the shown subject is clearly defined as positive or negative. As soon as you would reduce the influence from the question and scale on the respondent, you will need something neutral to determine tendences, emphases and so on.

So I put up a new variation of the one and two sided array question:

ttp://www.limesurvey.org/images/fbfiles/images/example_bar_scale.jpg

In my example the left side reads "strategical planning" and the right side "operative business". None of these are purely negative or positive, so the bars only show in which direction the balancing point moves.

To realize a question as shown above just do as follows:

Set up as many bars as you will need (in my example there are four different bars in total) with a graphic program like PAINT .NET, GIMP or similar ones (yes, you may also use commercial software like Photoshop). To prevent the bars from looking twitchy, designate the size in advance. I did one bar 60x15 px, one 45x15px, one 30x15px and at last 15x15px. Save them as PNG, JPG or GIF.
# Create a new label set within Lime. Call it whatever you like.
# Enter a code number at first, then press the pencil symbol to enter the editor.
#Press the "Insert / edit image" button and upload the bar you want to insert with the FCK upload tool. Then choose the uploaded picture, save and leave the FCK editor.
#The row in the lable editor now shows an <img>-tag which refers to your bar picture.
#Repeat the above described steps as often as needed to build up your bar scale.

=Doing a Likert Scale=

''Tested with: ''

A Likert Scale is a special type of the Semantic Differential question where several item shall be rated on different scales, each marked at the beginning and at the end with opposite statements.

To do this in LimeSurvey just follow these steps:
#Create a label set with values from 0 to 7 (for the classic Likert Scale - feel free to choose other ranges).
#Create a new question and choose Array (Flexible Labels) as question type.
#Assign the Likert Scale label set to this question.
#Enter your answers as follows:

<syntaxhighlight lang="php"><DIV style="white-space: nowrap;">ITEM statement1|statement2</div></syntaxhighlight>

The white-space style is to avoid line breaks which would ruin the whole scale. feel free to insert non-breakable spaces between the ITEM and statement1 to define the margin between these to strings.

=Alternate background colour of questions=

''Tested with: 1.85+ (7191)''

To alternate the background colour of questions, open the ''template.css'' of your template with the Template Editor or a text editor and modify the ''Question styles'' section to include the following style.

<syntaxhighlight lang="php">

div#question2 td.questiontext,

div#question4 td.questiontext,

div#question6 td.questiontext {

background-color: #E0EBF8;

}

</syntaxhighlight>

Be sure to apply the style to all of the questions you would like modified using their question IDs (''question2, question4, question6'' in this case). Question IDs are displayed when creating or editing questions - see below:

[[File:qid_1_493x173.gif]]

Here the question ID is #question80 .

=Embedding audio in questions=

''Tested with: 1.85+ (7191), IE 7, FireFox 3''

Audio clips can be embedded in most question text or answer text. In this example, using the default template, I've embedded clips into the answers of an '''''Array (Yes/No/Uncertain)''''' question to ask respondents how they feel about some sounds. The resulting question will look like this.

[[File:audioTest_595x202.gif]]

It's accomplished by placing the following code in each of the answers.

<syntaxhighlight lang="php">

<embed height="20" width="128" autostart="false" controls="console"

loop="true" volume="50" src="{TEMPLATEURL}audio_1.mp3"></embed>

</syntaxhighlight>

Some notes about the code:
*The ''audio_1.mp3'' part will be different for each answer (it's the audio file name).
*In this case the audio files are residing in the template folder being used for this survey (that's where ''{TEMPLATEURL}'' points to) but they can be placed anywhere if you use an absolute URL in the ''src'' parameter - something like ''src="http://mysite.com/audio/audio_1.mp3"''
*If the audio file doesn't exist where the ''src'' parameter indicates, the player will not appear.
*You'll need to insert the code into the answers using the source screen - click on "Edit answers", click the pencil beside the text box, click "Source" in the pop-up, enter the code and save it with the little diskette icon.
*You may need to turn off the XSS filter - see the documentation for [http://docs.limesurvey.org/tiki-index.php?page=Global+settings&structure;=English+Instructions+for+LimeSurvey#Security Global settings].

Although the above example places the audio in the answer text of the question, the same principles can be used to place it in the question text itself. Something like this perhaps.

[[File:audioTest_595x154.gif]]

=Hiding inputs of a "Multiple options with comments" question=

There may be times when you want to hide some of the input boxes of a '''''Multiple choice question type with comments''''' question as in the image below:

[[File:hidden_inputs_541x168.gif]]

This can be accomplished with CSS (see [[The template editor#Styling questions with CSS|Styling questions in LimeSurvey 1.8]]). For each input that you want to hide, add the following style to your template.css file:

<syntaxhighlight lang="css">
#answer11111X22X33Acomment {
display: none;
}
</syntaxhighlight>

Where 11111 is your survey ID, 22 is your group ID, 33 is your question ID and A is the answer code.

Note that you will still see columns for the hidden inputs in your data but they will be empty.

=Multiple question types in array=

''Tested with: 1.90 - 1.92+, IE 7/8/9, Firefox 13, Safari 5, Chrome 10''

[[Media:limesurvey_survey_62584.lss|Download the sample survey]]

This workaround allows you to present multiple question types in what appears to be an array - as depicted in the image below and [http://www.partnersinc.biz/surveys//index.php?sid=62584&newtest=Y&lang=en demonstrated here] (download the sample survey - [[Media:limesurvey_survey_62584.lss|limesurvey_survey_62584.lss]]). This example uses the default template but should be adaptable to any template using divisions for question containers.

[[File:inline_questions_700x228.png]]

Basically what we do is take groups of questions (5 in this case), wrap them in a division and make them line up nicely horizontally and vertically. The width of the survey is also fixed to prevent wrapping issues. We do this with a JavaScript/jQuery function that inserts the necessary wrappers and then modifies styles so everything behaves properly. The top row is 5 boilerplate questions with the "column headers" as question text (the first just has a blank space). The following rows are a boilerplate with the "row headers" followed by 4 assorted questions.

It should be noted that using conditions on these questions may result in unexpected behavior. If a question is hidden by conditions, the question(s) to the right of it will move over to take its place.

Implementation is as follows:
#Create your questions keeping in mind how they will lay out when grouped into rows (in this example - boilerplate, yes/no, short text, numeric, dropdown, and repeat).
#In the source of the first boilerplate question add the function below (see [http://manual.limesurvey.org/wiki/Workarounds:_Manipulating_a_survey_at_runtime_using_Javascript#How_to_use_Script_.28eg._JavaScript_etc..29_in_LimeSurvey.3F How to use script]).
#Modify the number of rows, number of columns and the start placement in the function call (line 6) as required (the example uses 4 rows and 5 columns and the "array" starts with the third question on the page).

The code may look intimidating at first but it's actually fairly simple. I've laid it out as sequentially as possible and purposely used few shortcuts and many comments to make it easier to follow.

Notes:
*If you use question types other than boilerplate, short text, list dropdown, numeric or yes-no, you'll need to add to the last section of code, where it hides the question text and formats the inputs for display this way.
*Any extra questions on the page should follow this grid of questions, not precede them.
* If you use boilerplate as question type you should add after:
<syntaxhighlight lang="javascript">
// Hide the question text elements in non-boilerplate questions
$('div.questionCell td.questiontext').parent().hide();
</syntaxhighlight>
the following 2 lines
<syntaxhighlight lang="javascript">
//repair boilerplate questioncells
$('div.boilerplate td.questiontext').parent().show();
</syntaxhighlight>

Javascript code:
<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {
// Call the "sideBySide" function with number of rows, columns and start position
sideBySide(4, 5, 3);
});

function sideBySide(rows, columns, startQuestion) {

/*********** Display multiple questions side by side ***********/

if ($('div.qRow1').length == 0) {

var rowNum = 0;
var colNum = 1;
var rowList = new Array();

//////// Add question classes for later use ////////

// Loop through all questions and add row and column specific classes
$('div[id^="question"]').each(function(i) {
if(i >= (startQuestion-1) && rowNum < rows) { // This IF condition only needed if there are questions before or following the "inline" questions
$(this).addClass('qRow'+rowNum+'').addClass('qCol'+colNum+'').addClass('inlineQuestion');
if(rowNum == 0 && colNum > 1) {
$(this).addClass('columnLabel');
}
if(rowNum > 0 && colNum == 1) {
$(this).addClass('rowLabel');
}
else if(rowNum > 0 && colNum > 1) {
$(this).addClass('questionCell');
}
if(colNum == columns) {
rowList.push('qRow'+rowNum+'');
rowNum++;
colNum = 1;
}
else {
colNum++;
}
}
else {
$(this).addClass('normalQuestion');
}
});

//////// Survey layout manipulation ////////

// Fix the width of the survey
$('table.outerframe').css({
'width': '900px'
});

// Wrap each "row" in a wrapper div
$(rowList).each(function(i) {
$('.'+this+'').wrapAll('<div id="inlineWrapper'+i+'" class="inlineRow" />');
});

// Style the wrapper divs
$('.inlineRow').css({
'width': '850px',
'margin': '0 auto 0 auto',
'clear': 'both'
});

$( '.inlineRow:first' ).css({
'margin-top': '10px'
});

// Get all the questions to sit politely side by side
$( '.inlineQuestion' ).css({
'float': 'left',
'height':'41px',
'overflow':'hidden',
'margin-bottom': '-8px'
});
$( '.inlineQuestion .questionhelp' ).hide();
$( '.inlineQuestion .survey-question-help' ).parent().hide();

// A little space under the last row
$( '.inlineRow:last .inlineQuestion' ).css({
'margin-bottom': '10px'
});

// Any questions not displayed inline (this is only needed if there are questions following the "inline" questions)
$( '.normalQuestion' ).css({
'clear': 'both'
});

//////// Column manipulation ////////

// Set the column widths - can be set individually if necessary
// Must add up to less than 100%
$( '.qCol1' ).css({
'width': '12%'
});

$( '.qCol2, .qCol3, .qCol4, .qCol5' ).css({
'width': '22%'
});

//////// Question manipulation ////////

// Hide the answer element in boilerplate questions
$( 'div.boilerplate td.answer' ).parent().hide();

// Hide the question text elements in non-boilerplate questions
$('div.questionCell td.questiontext').parent().hide();

// Push the question tables to 100%
$( 'div.inlineRow table' ).css({
'width': '100%'
});

// Get everything to line up nicely vertically
$( '.inlineQuestion td.questiontext, .inlineQuestion td.answer p' ).css({
'text-align': 'center'
});

// Adjust cell heights so everything lines up nicely horizontally
$( '.inlineQuestion td.answer, .inlineQuestion td.questiontext' ).css({
'height':'35px',
'overflow':'hidden',
'padding':'0.5em'
});
$( '#inlineWrapper0 .inlineQuestion' ).css({ 'height':'50px' });
$( '#inlineWrapper0 td.questiontext' ).css({
'height':'50px'
});

// Yes-no question styles
$( 'div.yes-no ul' ).css({
'text-align': 'center',
'font-size': '90%',
'margin': '0',
'padding-bottom': '5px'
});
$( 'div.yes-no li' ).css({
'padding-right': '1.5em'
});
$( 'div.yes-no td.answer' ).css({
'padding-bottom': '0'
});

// Short-text question styles
$( 'div.text-short input' ).css({
'width': '125px',
'margin-left': '0'
});

// Numeric question styles
$( 'div.numeric input' ).css({
'width': '125px',
'margin-left': '0'
});
$( 'div.numeric p.tip' ).css({
'display': 'none'
});

// Get rid of the margins around select boxes
$( 'p.question' ).css({ 'margin':'0' });
}
}
</script>
</syntaxhighlight>
<br /><br />

=Star Rating System=

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

This workaround uses the [http://www.fyneworks.com/jquery/star-rating/ jQuery Star Rating Plugin] to display a series of stars that are used to generate a rating value. This value is then passed to either a hidden numeric input question or a hidden list radio question. Both methods are outlined below - use one or both depending on whether you want to use [Assessments|assessments].

The plugin uses a series of radio inputs to generate the stars (more about these below). It allows the use of whole or partial stars as shown in the image below.

[[File:star_rating_700x324.png]]

==Star Rating System Using Numeric Input Question==

Use this method if you would like your rating data to be collected as a numeric value and don't want to use [[Assessments|LimeSurvey assessments]] - it's a little easier to implement.

'''Implementation is as follows:'''
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])
#[http://www.fyneworks.com/jquery/star-rating/ Download the plugin] and place the following included files in your template folder:
##jquery.MetaData.js
##jquery.rating.css
##jquery.rating.js
##delete.gif
##star.gif
#In the <head> section of your startpage.pstpl, add the following code to link to the files.

<syntaxhighlight lang="php">

<script type="text/javascript" src="{TEMPLATEURL}jquery.rating.js" charset="utf-8"></script>

<script type="text/javascript" src="{TEMPLATEURL}jquery.MetaData.js" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}jquery.rating.css" />

</syntaxhighlight>

5. Create a numeric input question and then in the source of the question add as many radio inputs as star segments. For example, if you would like 5 stars, each with half-segments, you would need 10 radio inputs and that would give rating values from 1-10.

Don't confuse these inputs with the actual question, they are just for the plugin's use.

At this point your question source code should look something like below. Make sure that all inputs have the same name. Each input must have the same title as value and these must be sequential. Don't worry about how all of this looks in the WSYSWYG editor - the plugin is going to hide these inputs and replace them with stars.

<syntaxhighlight lang="php">

Q1 - Some question text here.<br /><br />

<div id="starContainer">

<input type="radio" class="star { split:2 }" title="1" value="1" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="2" value="2" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="3" value="3" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="4" value="4" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="5" value="5" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="6" value="6" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="7" value="7" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="8" value="8" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="9" value="9" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="10" value="10" name="q1Rate" />

</div>

</syntaxhighlight>

6. A note on split stars. The stars in the above example are split in half by the ''{ split:2 }'' metadata. So if you don't want split stars, your inputs would look like:

'''<input type="radio" class="star" title="1" value="1" name="q1Rate" />'''

And stars split into third-segments would look like:

'''<input type="radio" class="star { split:3 }" title="1" value="1" name="q1Rate" />'''

7. Finally, in the source of the question add the following function after your inputs. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]])

Some notes on the code:
*Replace "SSSSS", "GG", "QQ" in the function call at the end with the survey ID, group ID and question ID respectively.
*The code will hide the numeric input and pass the rating values into it as they are changed. If the rating is canceled the numeric input is nullified. If a respondent navigates away from the page then returns the code "remembers" the previous rating and displays the stars accordingly.
*If you want to apply it to more numeric questions on the same page simply add more calls with the appropriate IDs. (eg. handleRatingNumeric(11111, 22, 1); handleRatingNumeric(11111, 22, 2); ...) .

Code:

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

function handleRatingNumeric (sID, gID, qID) {

// Hide the numeric input

$('#question' + qID + ' td.answer').parent().hide();

// Get a previous rating (if any) and use it to initialize the star display

var rating = $('#answer' + sID + 'X' + gID + 'X' + qID + '').val();

if ( rating != '' ) {

$('#question' + qID + ' input.star').rating('select', rating);

}

// Listener on the star rating cancel element

$('#question' + qID + ' div.rating-cancel').click(function(event) {

// Nullify the rating if the Cancel element is clicked

rating = '';

$('#answer' + sID + 'X' + gID + 'X' + qID + '').val(rating);

});

// Listener on the star rating elements

$('#question' + qID + ' div.star-rating').click(function(event) {

// Find the value of the highest clicked star and pass it into the text input

$('#question' + qID + ' div.star-rating-on').each(function(i) {

rating = $(this).children('a').html( );

});

$('#answer' + sID + 'X' + gID + 'X' + qID + '').val(rating);

});

}

// Call the function for the numeric question

handleRatingNumeric (SSSSS, GG, QQ);

});

</script>

</syntaxhighlight>

==Star Rating System Using List (Radio) Question==

Use this method if you would like to use [[Assessments|assessments]]. There is a demo [http://www.partnersinc.biz/surveys//index.php?sid=47586&newtest=Y&lang=en here] (second question).

'''Implementation is as follows:'''

1. Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])

2. Set up the template to use custom onload functions. (See the [[Workarounds: Manipulating a survey at runtime using Javascript#Custom onload function|workaround here]])

3. [http://www.fyneworks.com/jquery/star-rating/ Download the plugin] and place the following included files in your template folder:
*jquery.MetaData.js
*jquery.rating.css
*jquery.rating.js
*delete.gif
*star.gif

4. In the <head> section of your startpage.pstpl, add the following code to link to the files.

<syntaxhighlight lang="php">

<script type="text/javascript" src="{TEMPLATEURL}jquery.rating.js" charset="utf-8"></script>

<script type="text/javascript" src="{TEMPLATEURL}jquery.MetaData.js" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}jquery.rating.css" />

</syntaxhighlight>

5. Create a list (radio) question with the same amount of sequentially numbered answers as star ratings. For example, if you want 5 whole-stars, you would create 5 answers, as in the image below, and this would give you ratings from 1-5. Note that the "Codes" and "Answers" must be sequential numbers.

[[File:star_rating_700x156_v2.png]]

6. In the list (radio) question, set the [[Advanced question settings|hide_tip]] question attribute to 1

7. In the source of the question add as many radio inputs as star segments. So 5 whole-stars (as in the demo Q2), would need 5 radio inputs.

Don't confuse these inputs with the actual question, they are just for the plugin's use.

At this point your question source code should look something like below. Make sure that all inputs have the same name. Each input must have the same title as value and these must be sequential. Don't worry about how all of this looks in the WSYSWYG editor - the plugin is going to hide these inputs and replace them with stars.

<syntaxhighlight lang="php">

Q2 - Some question text here.<br /><br />

<div id="starContainer">

<input type="radio" class="star" title="1" value="1" name="q2Rate" />

<input type="radio" class="star" title="2" value="2" name="q2Rate" />

<input type="radio" class="star" title="3" value="3" name="q2Rate" />

<input type="radio" class="star" title="4" value="4" name="q2Rate" />

<input type="radio" class="star" title="5" value="5" name="q2Rate" />

</div>

</syntaxhighlight>

8. A note on split stars. The stars in the above example are whole-stars. If you want them split you need to add metadata to the class - something like ''{ split:2 }''. So if you want half-stars your inputs would look like:

'''<input type="radio" class="star { split:2 }" title="1" value="1" name="q1Rate" />'''

And stars split into third-segments would look like:

'''<input type="radio" class="star { split:3 }" title="1" value="1" name="q1Rate" />'''

9. Finally, in the source of the question add the following function after your inputs. (See [http://docs.limesurvey.org/tiki-index.php?page=Workarounds&structure;=English+Instructions+for+LimeSurvey#How_to_use_Script_eg._JavaScript_etc._ How to use script here])

Some notes on the code:
*Replace "SSSSS", "GG", "QQ" in the function call at the end with the survey ID, group ID and question ID respectively.
*The code will hide the question radio buttons and toggle them as the rating values are changed. If the rating is canceled all question inputs are unchecked. If a respondent navigates away from the page then returns the code "remembers" the previous rating and displays the stars accordingly.
*If you want to apply it to more numeric questions on the same page simply add more calls with the appropriate IDs. (eg. handleRatingRadio(11111, 22, 1); handleRatingRadio(11111, 22, 2); ...) .

Onload code:

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

function handleRatingRadio (sID, gID, qID) {

// Hide the radio input

$('#question' + qID + ' td.answer').parent().hide();

// Get a previous rating (if any) and use it to initialize the star display

var rating = $('#question' + qID + ' input.radio[checked=true]').attr('value');

//if ( rating != '' ) {

if ( rating ) {

$('#question' + qID + ' input.star').rating('select', rating);

}

// Listener on the star rating cancel element

$('#question' + qID + ' div.rating-cancel').click(function(event) {

// Nullify the rating if the Cancel element is clicked

rating = '';

$('#question' + qID + ' input.radio').attr('checked', false);

});

// Listener on the star rating elements

$('#question' + qID + ' div.star-rating').click(function(event) {

// Find the value of the highest clicked star and pass it into the text input

$('#question' + qID + ' div.star-rating-on').each(function(i) {

rating = $(this).children('a').html( );

});

$('#question' + qID + ' input.radio[value=' + rating + ']').attr('checked', true);

});

}

// Call the function for the radio question

handleRatingRadio (SSSSS, GG, QQ);

});

</script></syntaxhighlight>

=Variable column widths in array=

''Tested with: 1.85+ (7557), IE 6/7, Firefox 3.0, Safari 3.2''

This workaround allows you to define all column widths of an array question - as shown in the image below and [http://www.partnersinc.biz/surveys//index.php?sid=26842&newtest=Y&lang=en demonstrated here]. This example uses the default template shipped with 7557 but should be adaptable to any template.

[[File:array_widths_701x226.gif]]

We use a function to remove all of the widths imposed by the core code and then insert our own.

'''Implementation is as follows:'''
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions (see [http://docs.limesurvey.org/tiki-index.php?page=Optional+settings&structure;=English+Instructions+for+LimeSurvey#Filtering_dangerous_HTML_tags_in_survey_objects documentation here]).
#Create the array question.
#In the source of the array question add the following script (see [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]]).
#Replace all instances of QQ with the question ID.
#In the third section of code, adjust the widths and add/remove columns as necessary. This example is for an array with a question text column followed by 3 answer columns as shown above.
#In the final section adjust the question text alignment to your liking

Onload code

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Get rid of all the widths that the API imposes

$( 'div#questionQQ table.question col' ).attr('width', '');

$( 'div#questionQQ table.question thead td' ).attr('width', '');

// Define a width for the question table so we can do so for its children

// NOTE: Keep this to 95% or less so IE will behave

$( 'div#questionQQ table.question' ).attr('width', '95%');

// Define the column widths

// Add or remove columns and adjust widths as necessary but widths should add up to 100%

// NOTE: Columns must be sequentially numbered starting at 0 - eg, td:eq(0), td:eq(1), td:eq(2).....

$( 'div#questionQQ table.question tbody th:eq(0)' ).css({ 'width':'10%' }); // Answer text column

$( 'div#questionQQ table.question tbody td:eq(0)' ).css({ 'width':'50%' }); // First answer column

$( 'div#questionQQ table.question tbody td:eq(1)' ).css({ 'width':'20%' }); // Second answer column

$( 'div#questionQQ table.question tbody td:eq(2)' ).css({ 'width':'20%' }); // Third answer column

// Push the text input widths to 95% of their parent containers

$( 'div#questionQQ table.question input[type="text"]' ).css({ 'width':'95%' });

// Align the answer text - feel free to experiment

$( 'div#questionQQ table.question tbody th' ).css({'text-align':'center'});

});

</script></syntaxhighlight>

=Use images for radio buttons and checkboxes=

''Tested with: LimeSurvey 1.92/2.0, using IE 9, FireFox 13, Chrome 16, Safari 5''

This workaround uses an adaptation of the jQuery imagetick.js plugin to replace the default radio buttons and checkboxes with images as pictured below:

[[File:images.png]]

This adaptation will work in the following question types:
*Array
*Array by column
*Array dual scale
*Array (5 point choice)
*Array (10 point choice)
*Array (Increase-Same-Decrease)
*Array (Yes-No-Uncertain)
*Gender
*Yes-No
*Multiple choice
*Multiple choice with comments
*5 point choice
*List (Radio)
*List with comment

==LimeSurvey 2.0 and later implementation==

Follow the instructions above with these changes:
#Download [[Media:Imagetick_lime_v2.1.zip|this modified version of the plugin for 2.0 and up]] instead of the one mentioned above and add all contained files to your template directory.
#Add these lines to the <head> element in your startpage.pstpl instead of the one above:<syntaxhighlight lang="php"><script type="text/javascript" src="{TEMPLATEURL}imagetick_lime_2.js"></script>

<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}imagetick_lime_2.css" /></syntaxhighlight>

Thanks to Jordan Boesch for the original plugin.

=Changing the position and layout of an individual question using "question code"=

''Tested with: 1.87+ (6536)''

To use this very flexible workaround you first have to apply a minor change to the question.pstpl of the used template.

<syntaxhighlight lang="php">

<div class="survey-question">

<div class="survey-question-text">

</syntaxhighlight>

needs to be changed to

<syntaxhighlight lang="php">

<div class="survey-question" id="{QUESTION_CODE}">

<div class="survey-question-text" id="{QUESTION_CODE}" >

</syntaxhighlight>

this change won't change anything in the layout and can be left in the template even if you don't need this workaround. It's just a means to have a handle to actually change individual questions.

You can then use a code such as the following in the question text to make question specific format changes. "SAMPLE" needs to be replaced with the concerning question code and javascript has to be allowed ([[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|older versions of limesurvey]], under global settings for newer versions).

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

document.getElementById('SAMPLE').style.borderTop= "0px";

document.getElementById('SAMPLE').style.marginTop= "-62px";

document.getElementById('SAMPLE').style.marginLeft= "30px";

</script>

</syntaxhighlight>

This sample code will hide the border at the top of the question, will move the whole question up by 62px and to the right by 30px. Using this workaround you can change a whole a lot of things concerning format and positions of a specific question without changing all the questions. A (German) list of all the allowed options can be found [http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften here].

=Create MaxDiff question type=
==Version 2.06==

''Tested with: LimeSurvey version 2.06''

This workaround uses JavaScript to convert an '''''Array (flexible labels) by column''''' question into a [http://en.wikipedia.org/wiki/MaxDiff MaxDiff] question type.
<br /><br />
[[File:max_diff_596x253.gif]]
<br /><br />
Implementation is as follows.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create an '''''Array (flexible labels) by column''''' question with 2 "answers" - these will be the left and right columns.
#Assign a label set to the question - these will be the labels in the center column.
#Set the second parameter of the function call to true for randomized rows.
#Adjust the styles in lines 21-24 as required.
<br />
The script moves the question columns into the MaxDiff configuration and disables the opposing radio element when a selection is made.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

// Call the maxDiff() function
// Set the second parameter to true for randomized rows
maxDiff({QID}, false);
});

function maxDiff(qID, randomize) {

// Random number between 1 and 2
// Math.floor(Math.random() * (max - min + 1)) + min;
var randomNum = Math.floor(Math.random() * ((2-1)+1) + 1);

// Move the columns
$('#question'+qID+' table.subquestions-list col:eq(1)').prependTo('colgroup.col-responses');
$('#question'+qID+' table.subquestions-list thead tr:eq(0) th:eq(0)').prependTo('#question'+qID+' table.question thead tr:eq(0)');
$('#question'+qID+' table.subquestions-list tbody tr').each(function(i){
$('td.answer-item:eq(0)', this).prependTo(this);
});
$('#question'+qID+' table.subquestions-list tbody tr').each(function(i){
$('td.answer-item:eq(0)', this).prependTo(this);
});

// Random rows
if(randomize) {
var rowsArr = [];
$('#question'+qID+' table.subquestions-list tbody tr').each(function(i){
$(this).attr('data-index', i);
rowsArr.push(i);
});
shuffleArray(rowsArr);
$(rowsArr).each(function(i){
$('#question'+qID+' table.subquestions-list tbody').append($('#question'+qID+' tr[data-index="'+this+'"]'));
});
}

// Style stuff
$('#question'+qID+' table.subquestions-list col.odd').css({ 'background-color':'transparent' });
$('#question'+qID+' table.subquestions-list tbody th').css({ 'text-align':'center' });
$('#question'+qID+' table.subquestions-list tbody tr:even td, #question'+qID+' table.question tbody tr:even th').css({ 'background-color':'#F1F1F1' });
$('#question'+qID+' table.subquestions-list tbody tr:odd td, #question'+qID+' table.question tbody tr:odd th').css({ 'background-color':'#FCFCFC' });

// Prevent clicking twice in the same row
$('#question'+qID+' input.radio').on('click', function () {

$('#question'+qID+' input.radio').prop('disabled', false);
$('#question'+qID+' input.radio:checked').each(function(i) {
var thisRow = $(this).closest('tr');
$('input.radio', thisRow).not(this).prop('disabled', true);
});
});
}

function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
</script></syntaxhighlight>
==Versions 2.5 and 3.x==

''Tested with: LimeSurvey version 2.5''

This workaround uses JavaScript to convert an '''''Array (flexible labels) by column''''' question into a [http://en.wikipedia.org/wiki/MaxDiff MaxDiff] question type.
<br /><br />
[[File:MaxDiff_2.5.png]]
<br /><br />
'''DOWNLOADS'''<br />
* [[Media:Demo_MaxDiff_For_25_Template.zip|Demo template]]
* [[Media:Demo_MaxDiff_For_25_Survey.zip|Demo survey]]

'''IMPLEMENTATION'''
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create an '''''Array (flexible labels) by column''''' question with 2 "answers" - these will be the left and right columns.
#Add 2 subquestions to the array - these will be the left and right columns.
#Add answers to the array - these will be the rows.
#Create a copy the default template.
#Add the following to the end of '''''template.js''''' in your new template:<syntaxhighlight lang="javascript">function maxDiff(qID, randomize) {

// Identify some elements
var thisQuestion = $('#question'+qID);
var thisTable = $('table.subquestion-list:eq(0)', thisQuestion);

// Assign a new question class
$(thisQuestion).addClass('max-diff-array');

// Move the columns
$('thead tr:eq(0)', thisTable).prepend($('thead tr:eq(0) th:eq(1)', thisTable));
$('tr.answers-list', thisTable).each(function(i){
$('td.answer-item:eq(0)', this).prependTo(this);
});

// Random rows
if(randomize) {
var rowsArr = [];
$('tr.answers-list', thisTable).each(function(i){
$(this).attr('data-index', i);
rowsArr.push(i);
});
shuffleArray(rowsArr);
$(rowsArr).each(function(i){
$('tbody', thisTable).append($('tr[data-index="'+this+'"]', thisTable));
});
}

// Prevent clicking twice in the same row
$('input:radio', thisQuestion).on('click', function () {

$('input:radio', thisQuestion).prop('disabled', false);
$('input:radio:checked', thisQuestion).each(function(i) {
var thisRow = $(this).closest('tr.answers-list');
$('input:radio', thisRow).not(this).prop('disabled', true);
});
});

// Fix up the row classes
var rowClass = 1;
$('tr.answers-list', thisTable).each(function(i) {
$(this).addClass('array'+(2-(i%2)));
});
}

function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}</syntaxhighlight>
#Add the following to the end of '''''template.css''''' in your new template:<syntaxhighlight lang="css">.max-diff-array th.answertext {
text-align: center;
border-right: 3px solid #FFFFFF;
border-left: 3px solid #FFFFFF;
}

/* Override the responsive "no-more-tables" stuff */
@media only screen and (max-width: 801px) {

.max-diff-array .no-more-tables table {
display: table;
border-collapse: inherit;
}

.max-diff-array .no-more-tables thead,
.max-diff-array .no-more-tables tbody {
display: table-row-group;
}

.max-diff-array .no-more-tables tr {
left: auto;
position: relative;
top: auto;
display: table-row;
border: 0 none;
}

.max-diff-array .no-more-tables th,
.max-diff-array .no-more-tables td {
display: table-cell;
text-align: center !important;
color: #2c3e50;
font-size: 15px;
}

.max-diff-array th.answertext {
border-right: 3px solid #FFFFFF;
border-left: 3px solid #FFFFFF;
}

.max-diff-array .answer-item label span {
display: none !important;
}
}</syntaxhighlight>
#Add a script like this to the question source of the Array (flexible labels) question:<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Call the maxDiff() function
// Set the second parameter to true for randomized rows
maxDiff({QID}, true);
});
</script></syntaxhighlight>

=Load SVG Code From Drawing Tool=

This workaround uses JavaScript/jQuery to load a drawing tool and store the results in a huge-text question. The details are outlined in the [[Workarounds: Manipulating a survey at runtime using Javascript#Load SVG Code From Drawing Tool|JavaScript section of the workarounds]].

=Minimum or Maximum Date in Datepicker=

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

'''Please note: From version 2.05 beta6, you MUST set the minimum and maximum date for the date picker directly in the advanced question attributes of the date/time question. This workaround will seize to work.'''

You can set the minimum or maximum selectible date in a datepicker as follows

[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]] and add the following to the source of the date question text or help. Replace "QQ" with the date question ID.

For a minimum date of April 15, 2010:<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;

$('#question'+qID+' .popupdate').datepicker( 'option', 'minDate', new Date(2010, 4-1, 15) );

});

</script>

</syntaxhighlight>

For a minimum date of the current date (today):<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;

$('#question'+qID+' .popupdate').datepicker( 'option', 'minDate', new Date() );

});

</script>

</syntaxhighlight>

For a maximum date of May 10, 2015:<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;

$('#question'+qID+' .popupdate').datepicker( 'option', 'maxDate', new Date(2015, 5-1, 10) );

});

</script>

</syntaxhighlight>

More details here - http://jqueryui.com/demos/datepicker/#option-minDate

=Evaluative Space Grid (ESG)=

''Tested with LimeSurvey versions 2.06 & 2.5''

The evaluative space grid (ESG) is a two-dimensional grid that provides a single-item measure of positivity and negativity (Larsen et al, 2009). See [http://leeds-faculty.colorado.edu/mcgrawp/pdf/larsen.norris.mcgraw.hawkley.cacioppo.2009.pdf page 4 of this PDF].

This can be accomplished using a multiple-numeric question, some simple HTML and a little JavaScript.

A table can be shown in the question. When a respondent clicks a grid cell in the table JavaScript loads the coordinates of the cell into the multiple-numeric question inputs.

[[File:Space_grid_2.png]]<br /><br />
#Create a Multiple Numeric question with two subquestions labelled "X" and "Y".
#Add the following HTML to the source of the question to create the table:<syntaxhighlight lang="html4strict">
<table class="spaceGrid">
<tr>
<td rowspan="5" class="yAxisLabel">How NEGATIVE<br>
do you feel about<br>
the stimulus?</td>
<td class="yLabel">Extremely</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="yLabel">Quite a bit</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="yLabel">Moderately</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="yLabel">Slightly</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="yLabel">Not at all</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="blankCell"></td>
<td class="blankCell"></td>
<td class="xLabel">Not at all</td>
<td class="xLabel"><span class="yLabel">Slightly</span></td>
<td class="xLabel"><span class="yLabel">Moderately</span></td>
<td class="xLabel"><span class="yLabel">Quite a bit</span></td>
<td class="xLabel"><span class="yLabel">Extremely</span></td>
</tr>
<tr>
<td class="blankCell"></td>
<td class="blankCell"></td>
<td colspan="5" class="xAxisLabel">How POSITIVE do you feel about the stimulus?</td>
</tr>
</table>
</syntaxhighlight><br /><br />
#Add the following styles to the end of your template.css file:<syntaxhighlight lang="css">
.spaceGrid {
width: auto;
border: 0 none;
border-collapse: collapse;
}

.spaceGrid td {
padding: 0 3px;
text-align: center !important;
border: 0 none;
}

td.xAxisLabel {
padding-top: 10px;
}

td.yAxisLabel {
padding-right: 10px;
width: 125px;
}

td.xLabel {
height: 20px;
font-weight: normal;
font-size: 13px;
}

td.yLabel {
text-align: right !important;
font-weight: normal;
font-size: 13px;
}

td.gridCell {
width: 70px;
height: 70px;
border: 1px solid #666666;
background-color: #FFFFFF;
cursor: pointer;
}

td.checkedCell {
background-color: #66FF00;
}</syntaxhighlight><br /><br />
#Add the following to the end of your template.js file:<syntaxhighlight lang="javascript">
$(document).ready(function() {

$('.spaceGrid').each(function(i){

// Define some vars
var thisQuestion = $(this).closest('.numeric-multi');
var thisTable = $(this).closest('table.spaceGrid');
var numGridCell = $('.gridCell', thisTable).length;
var numCols = $('tr:eq(0) .gridCell', thisTable).length;
var numRows = numGridCell/numCols;

// Hide the answers list
$('.subquestion-list, .questions-list', thisQuestion).hide();

// Initial state
var xCoord = $('input.text:eq(0)', thisQuestion).val() - 1;
var yCoord = numRows - $('input.text:eq(1)', thisQuestion).val();
$('tr:eq('+yCoord+') .gridCell:eq('+xCoord+')', thisTable).addClass('checkedCell');

// Listener on the grid cells
$('.gridCell').click(function(){
var thisRow = $(this).closest('tr');

// Add class to checked cell
$('.checkedCell', thisQuestion).removeClass('checkedCell');
$(this).addClass('checkedCell');

// Find the cell coordinates
var reverseRowIndex = (numRows - $('tr', thisTable).index($(thisRow)));
var colIndex = $('.gridCell', thisRow).index($(this)) + 1;

// Load coordinates into inputs
$('input.text:eq(0)', thisQuestion).val(colIndex);
$('input.text:eq(1)', thisQuestion).val(reverseRowIndex);
});
});

});</syntaxhighlight><br /><br />
The script should automatically handle different grid sizes.

=Slider Highlighting=

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

You may want to highlight a slider after it has been moved/changed to allow respondents to easily see which slider subquestions have been answered.

[[File:Capture.PNG]]<br /><br />
#Add the following to the end of '''template.js''':<syntaxhighlight lang="javascript">
$('html').bind('slidecreate', function(event, ui) {
$('.slider_callout').each(function(i){
if($(this).text().length > 0) {
$(this).parents('li:eq(0)').addClass('changedSlider');
}
});
});

$(document).ready(function() {
$('.ui-slider-horizontal').bind('slidechange', function(event, ui) {
$(this).parents('li:eq(0)').addClass('changedSlider');
});
});
</syntaxhighlight><br /><br />
#Add something like the following to the end of '''template.css''' (these styles are for the default template and would need to be modified for other templates):<syntaxhighlight lang="css">
.numeric-multi .answer li {
border-bottom: 5px solid #FFFFFF;
}

.numeric-multi .answer li label {
background-color: #FFFFFF;
}

.numeric-multi .answer li div.multinum-slider {
margin: 1.5em 0.5em 0.2em 0;
padding-left: 0.5em;
}

.ui-slider-1 {
margin-bottom: 10px;
}

.changedSlider {
background-color: #99FFFF;
}
</syntaxhighlight>
<br /><br />

=Dynamic Slider Call-Out Styles=

''Tested with: 2.05, IE 9-11, Firefox, Chrome''

This is an example of how to insert a custom '''''slide()''''' function to control the appearance of the slider call-out as the slider is manipulated. In this example the call-out text colour changes as the slider is moved. Sample survey here - [[Media:Dynamic_slider_call_out.lss|dynamic call-out slider survey]].
<br /><br />
[[File:Dynamic_slider_call_out.png]]<br /><br />
Requirements:
*LimeSurvey 2.05 or newer
*A multiple-numeric question with slider enabled<br /><br />
# Create your multi-numeric question with the slider enabled<br /><br />
#Add the following to the source of the question
<br /><br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// Identify this question
var thisQuestion = $('#question{QID}');

// Slide function
$('.ui-slider', thisQuestion).on('slide', function( event, ui ) {
handleCallout($(this).closest('li.answer-item'), ui.value);
});

// Initial callout states
$('input.text', thisQuestion).each(function(i) {
handleCallout($(this).closest('li.answer-item'), $(this).val());
});

// Handle the callout style
function handleCallout(thisRow, sliderVal) {
if(sliderVal < 20) {
$('.slider_callout', thisRow).css('color', '#D90000');
}
else if(sliderVal < 40) {
$('.slider_callout', thisRow).css('color', '#D96D00');
}
else if(sliderVal < 60) {
$('.slider_callout', thisRow).css('color', '#D9D900');
}
else {
$('.slider_callout', thisRow).css('color', '#00B22D');
}
}

});
</script>
</syntaxhighlight>
<br /><br />

=Sliders in Array-Numbers or Array-Dual-Scale-Numbers=

This workaround will replace the dropdowns in '''''array-numbers''''' or '''''array-dual-scale-numbers''''' questions with sliders. The sliders will automatically have the same minimum, maximum and steps that you set in the advanced question settings.

==LimeSurvey Version 2.06==
[[File:custom_sliders_1.png]]<br /><br />
''Tested with: LimeSurvey version 2.06''<br /><br />
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your array-numbers or array-dual-scale-numbers question.
#Add the following to the source of the question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

insertSlider ({QID});

function insertSlider (qID) {

$('#question'+qID+' select').each(function(i, el){

// Hide the dropdown
$(el).hide();

var id = $(el).attr('id').replace(/#/g,'-');

// Some dropdown values
var currentVal = Number($('option:selected', el).val());
var firstVal = Number($('option[value!=""]:first', el).val());
var secondVal = Number($('option[value!=""]:first', el).next('option').val());
var lastVal = Number($('option[value!=""]:last', el).val());

// Insert a container for the slider
var container = $('<div class="customSliderWrapper"></div>').insertAfter(el);

// Initiate the slider
var slider = $('<div id="slider-'+id+'" class="customSlider"></div>').appendTo(container).slider({
min: firstVal,
max: lastVal,
range: 'min',
value: currentVal,
step: secondVal - firstVal,
slide: function( event, ui ) {
$(el).val(ui.value);
$('#callOut-'+id).text($(el).val());
}
});

// Insert a callout
var callout = $('<div id="callOut-'+id+'" class="slider_callout slider-callout"></div>').appendTo($('#slider-'+id+' .ui-slider-handle')).text($('option:selected', el).val());

// Set a value as soon as the slider handle is clicked
$('#slider-'+id+' .ui-slider-handle').mousedown(function() {
$(el).val(slider.slider('value'));
$('#callOut-'+id).text($(el).val());
});
});
}
});
</script></syntaxhighlight><br /><br />
#Add something like the following to the end of '''template.css''' (these styles are for the default template and may need to be modified for other templates):<syntaxhighlight lang="css">
.customSliderWrapper {
position: relative;
margin: 0 10px;
padding-top: 1.75em;
}
</syntaxhighlight>
<br /><br />
==LimeSurvey Version 2.6x==
[[File:Dropdown-sliders.png]]<br /><br />
''Tested with: LimeSurvey version 2.64.7 ''<br /><br />
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your array-numbers or array-dual-scale-numbers question.
#Add the following to the source of the question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

insertSlider ({QID});

function insertSlider (qID) {

// Identify this question
var thisQuestion = $('#question'+qID);
thisQuestion.addClass('with-dropdown-sliders');

// Loop through all array drop-downs
$('select.multiflexiselect', thisQuestion).each(function(i, el){
var thisCell = $(el).closest('td');

// Hide the dropdown
$(el).hide();

// Some dropdown values
var currentVal = $(el).val();
var firstVal = Number($('option[value!=""]:first', el).attr('value'));
var secondVal = Number($('option[value!=""]:eq(1)', el).attr('value'));
var lastVal = Number($('option[value!=""]:last', el).attr('value'));

// Insert an input for the slider
var thisInput = $('<input class="inserted-input" type="text" />').insertAfter(el);

// Initiate the slider
thisInput.val(currentVal).bootstrapSlider({
'min': firstVal,
'max': lastVal,
'step': secondVal - firstVal,
'value': Number(currentVal),
'tooltip': 'always'
});

// Listener on the slider
$(thisInput).on('slideStop', function () {
if($('.tooltip', thisCell).is(':hidden')) {
$('.tooltip', thisCell).show();
$('.tooltip', thisCell).css('margin-left', '-'+($('.tooltip', thisCell).width()/2)+'px');
}
$(el).val($(thisInput).val());
});

// Hide the slider call-out if no value selected yet
if(currentVal == '') {
$('.tooltip', thisCell).hide();
}
});
}
});
</script></syntaxhighlight><br /><br />
#Add something like the following to the end of '''template.css''' (these styles are for the default template and may need to be modified for other templates):<syntaxhighlight lang="css">
.with-dropdown-sliders .slider.slider-horizontal {
margin: 1.5em auto 1em auto;
width: 90%;
}

.with-dropdown-sliders .slider.slider-horizontal .slider-handle {
margin-top: -5px;
}
</syntaxhighlight><br />
Sample survey for version 2.6x: [[Media:Demo_Sliders_in_Array_Survey.zip|Demo_Sliders_in_Array_Survey.zip]]

=Vertical Sliders=

''Tested with: 1.92+, 2.00+, IE 9, Firefox 13, Chrome 19''

This workaround uses a custom jQuery plugin to apply vertical sliders to multiple-numeric questions. You can download a sample template here (with the plugin in template.js) - [[Media:default_vertical_sliders.zip|vertical slider template]] - and a sample survey here - [[Media:demo_vertical_sliders.lss|vertical slider survey]].

[[File:verticalsliders_1.jpg]]<br /><br />
# Create your multi-numeric question(s). Do NOT use any of the slider advanced settings.<br /><br />
#Add the following to the end of template.js. Replace "QQ" (line 5) with the question ID and adjust the options in the function call as desired. Repeat the call as many times as you need for more questions<syntaxhighlight lang="javascript">$(document).ready(function(){

// Call the vertical slider plugin with the question ID
// Edit options here as desired
$('#questionQQ').lsVerticalSlider({
minValue :0, // Minimum value (default 0)
maxValue :200, // Maximum value (default 100)
startValue :100, // Start value (default null)
step :10, // Slider increments (default 1)
height :100, // Height of slider in pixels (default 200)
recordStart :true, // Record the start value? (default no)
showMin :true, // Show minimum value? (default no)
showMax :true // Show maximum value? (default no)
});
});

// NO EDITING REQUIRED BELOW HERE
// A jQuery plugin to convert multiple-numeric questions to vertical sliders
(function( $ ){
$.fn.lsVerticalSlider = function(options) {

// The defaults, extended and modified with any passed in the function call
var opts = $.extend( {
minValue :0,
maxValue :100,
startValue :'',
step :1,
height :150,
recordStart :false,
showMin :false,
showMax :false
}, options);

return this.each(function() {

var $this = $(this);

// Some classes for the question and subquestions
$this.addClass('vertical-slider-question');
$('li:[id<div class="simplebox">="javatbd"]', $this).addClass('vertical-slider-subquestion');

// Loop through the subquestions
$('li:[id</div>="javatbd"]', $this).each(function(i){
var itemID = $(this).attr('id').replace(/javatbd/, '');

// Check for pre-existing answer
if($('#answer'+itemID).val() != '') {
opts.startValue = $('#answer'+itemID).val();
}

// Insert the slider elements
$('#answer'+itemID).after(
'<div class="vertical-slider-max-min" style="height:'+(opts.height+2)+'px;"> \
<div class="vertical-slider-max"></div> \
<div class="vertical-slider-min"></div> \
</div> \
<div id="vertical-slider-'+itemID+'" class="vertical-slider" style="height:'+opts.height+'px;"></div> \
<div class="vertical-slider-callout-wrapper" style="height:'+(opts.height+2)+'px;"> \
<div class="vertical-slider-callout" id="slider-callout-'+itemID+'"></div> \
</div>'
);

// Show min/max if option is set
if(opts.showMax) {
$('.vertical-slider-max', $this).text(opts.maxValue);
}

if(opts.showMin) {
$('.vertical-slider-min', $this).text(opts.minValue);
}

// Initiate the slider
$('#vertical-slider-'+itemID).slider({
orientation: 'vertical',
range: 'min',
min: opts.minValue,
max: opts.maxValue,
value: opts.startValue,
step: opts.step,
slide: function(event, ui) {
$('#answer'+itemID).val(ui.value);
$('#slider-callout-'+itemID).text(ui.value);
setTimeout(function() {
$('#slider-callout-'+itemID).css({ 'bottom':$('#vertical-slider-'+itemID+' .ui-slider-handle').css('bottom') }).show();
}, 10);
},
create: function(event, ui) {
// Initial values and positions
if($('#answer'+itemID).val() != '') { // Pre-existing answer
$('#slider-callout-'+itemID).text(opts.startValue);
}
else if(opts.recordStart) { // Record the start value (if option is set)
$('#answer'+itemID).val(opts.startValue);
$('#slider-callout-'+itemID).text(opts.startValue);
}
else {
$('#slider-callout-'+itemID).hide();
}
$('#slider-callout-'+itemID).css({ 'bottom':$('#vertical-slider-'+itemID+' .ui-slider-handle').css('bottom') });
}
});
});
});
};
})( jQuery );</syntaxhighlight><br /><br />
#Add the following to the end of template.css (these styles are for the default template):<syntaxhighlight lang="css">/* Vertical slider styles and overrides */
.vertical-slider-question p.tip {
display: none;
}

.vertical-slider-subquestion {
float: left;
margin: 0 3em 0 0 !important;
}

.vertical-slider-question label {
display: block;
padding: 0 0 0.75em 0 !important;
}

.vertical-slider-question span.input {
padding: 0.3em 0 0 0;
display: block;
}

.vertical-slider-question input.text {
display: none;
}

.vertical-slider {
float: left;
border-radius: 4px;
}

.vertical-slider-question .ui-slider-handle {
top: auto;
border-radius: 4px;
}

.vertical-slider-max-min,
.vertical-slider-callout-wrapper {
float: left;
position: relative;
}

.vertical-slider-callout-wrapper {
min-width: 3em;
}

.vertical-slider-max-min {
margin-right: 0.5em;
}

.vertical-slider-max,
.vertical-slider-min {
font-size: 0.8em;
color:#666666;
line-height: 1;
}

.vertical-slider-max {
margin-top: -0.5em;
}

.vertical-slider-min {
position: absolute;
right: 0;
bottom: 0;
margin-bottom: -0.5em;
}

.vertical-slider-callout {
position: absolute;
top: auto;
margin: 0 0 -0.6em 0.5em;
padding: 0.1em;
font-size: 0.9em;
color:#000000;
line-height: 1;
background: #F8F8FF;
border: 1px solid #D2E0F2;
border-radius: 4px;
}</syntaxhighlight>
<br /><br />

=Range Slider=

==LimeSurvey Version 2.5x==

This workaround uses a custom jQuery plugin to insert a jQuery UI range slider into a multi-numeric question and automatically populate that question's inputs with the range min and max values.

'''Download''': [[Media:Demo_Range_Slider_2.5x.zip|Sample Template and Survey.]]

[[File:Demo_Range_Slider_2.5x.png]]<br /><br />
The plugin handles:
*previous answers
*slider max/min
*range min start
*range max start
*range span min
*slider step
*record the start values
*show slider max and min<br /><br />
Requirements:
<ul><li>LimeSurvey 2.5x</li>
<li>A multiple-numeric question with two subquestions</li></ul><br /><br />
#Create your multi-numeric question. Do NOT use any of the slider advanced settings.
#Add the following to the end of template.js.<syntaxhighlight lang="javascript">// A jQuery plugin to display a range slider in LimeSurvey
// Author - Tony Partner - partnersurveys.com
(function( $ ){

$.fn.lsRangeSlider = function(options) {

// The defaults, extended and modified with any passed in the function call
var opts = $.extend( {
sliderMin :0, // Minimum slider value (default 0)
sliderMax :100, // Maximum slider value (default 100)
rangeStartMin :'', // Minimum range handle start value (default sliderMin)
rangeStartMax :'', // Maximum range handle start value (default sliderMax)
minRangeSpan :0, // Minimum allowed range span (default 0)
step :1, // Slider increments (default 1)
recordStart :false, // Record the start value? (default no)
showMin :false, // Show slider minimum value? (default no)
showMax :false // Show slider maximum value? (default no)
}, options);

return this.each(function() {

if($(this).hasClass('numeric-multi') && $('input.text', this).length == 2) {

// Define some vars
var thisQuestion = $(this);
var rangeMinInput = $('input.text.form-control:eq(0)', thisQuestion);
var rangeMaxInput = $('input.text.form-control:eq(1)', thisQuestion);
thisQuestion.addClass('range-slider-question');

// Check for pre-existing answer
if($(rangeMinInput).val() != '' && $(rangeMinInput).val() != '') {
opts.rangeStartMin = $(rangeMinInput).val();
opts.rangeStartMax = $(rangeMaxInput).val();
}
else {
if(opts.rangeStartMin == '') {
opts.rangeStartMin = opts.sliderMin;
}
if(opts.rangeStartMax == '') {
opts.rangeStartMax = opts.sliderMax;
}
}

// Insert the slider
var insertedEls = '<div class="col-xs-12 col-sm-12 withslider">\
<input class="inserted-slider" type="text" name="rangeSlider" />\
<div class="pull-left">\
<span class="help-block inserted-slider-min"></span>\
</div>\
<div class="pull-right">\
<span class="help-block inserted-slider-max"></span>\
</div>\
</div>';
$('input[type="text"].form-control:eq(0)', thisQuestion).closest('.subquestion-list').hide().before(insertedEls);

var sliderValues = [Number(opts.rangeStartMin), Number(opts.rangeStartMax)];

$('input.inserted-slider', thisQuestion).bootstrapSlider({
'min': Number(opts.sliderMin),
'max': Number(opts.sliderMax),
'step': Number(opts.step),
'range': true,
'value': sliderValues,
'tooltip': 'always'
});
if($(rangeMinInput).val() == '' && $(rangeMinInput).val() == '') {
$('.slider .tooltip', thisQuestion).hide();
}

// Listener on the range slider
$('input.inserted-slider', thisQuestion).on('slideStart', function(event, ui) {
});
$('input.inserted-slider', thisQuestion).on('slide slideStop', function(event, ui) {
var thisLowerVal = Number($.trim($(this).val().split(',')[0]));
var thisUpperVal = Number($.trim($(this).val().split(',')[1]));
if(opts.minRangeSpan > 0 && (thisUpperVal-thisLowerVal) < opts.minRangeSpan) {
$('input.inserted-slider', thisQuestion).bootstrapSlider('setValue', sliderValues);
}
else {
// Load the LS inputs
$(rangeMinInput).val(thisLowerVal);
$(rangeMaxInput).val(thisUpperVal);
// Fire Expression manager
checkconditions($(rangeMinInput).attr('value'), $(rangeMinInput).attr('name'), $(rangeMinInput).attr('type'));
checkconditions($(rangeMaxInput).attr('value'), $(rangeMaxInput).attr('name'), $(rangeMaxInput).attr('type'));
// Show the tooltip
$('.slider .tooltip', thisQuestion).show();
sliderValues = [thisLowerVal, thisUpperVal];
}
});

// Show min/max if option is set
if(opts.showMin) {
$('.inserted-slider-min', thisQuestion).text(opts.sliderMin);
}
if(opts.showMax) {
$('.inserted-slider-max', thisQuestion).text(opts.sliderMax);
}

// Handle recordStart
if(opts.recordStart) {
if($(rangeMinInput).val() == '' && $(rangeMinInput).val() == '') {
// Load the LS inputs
$(rangeMinInput).val(Number($.trim($('input.inserted-slider', thisQuestion).val().split(',')[0])));
$(rangeMaxInput).val(Number($.trim($('input.inserted-slider', thisQuestion).val().split(',')[1])));
// Fire Expression manager
checkconditions($(rangeMinInput).attr('value'), $(rangeMinInput).attr('name'), $(rangeMinInput).attr('type'));
checkconditions($(rangeMaxInput).attr('value'), $(rangeMaxInput).attr('name'), $(rangeMaxInput).attr('type'));
// Show the tooltip
$('.slider .tooltip', thisQuestion).show();
}
}
}
});

};
})( jQuery );</syntaxhighlight>
#Then, add something like this to the source of your question to apply the plugin with some custom option settings (I think the comments explain the options adequately)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').lsRangeSlider({
sliderMin :0, // Minimum slider value (default 0)
sliderMax :10, // Maximum slider value (default 100)
rangeStartMin :2, // Minimum range handle start value (default sliderMin)
rangeStartMax :8, // Maximum range handle start value (default sliderMax)
minRangeSpan :0, // Minimum allowed range span (default 0)
step :1, // Slider increments (default 1)
recordStart :true, // Record the start value? (default no)
showMin :true, // Show slider minimum value? (default no)
showMax :true // Show slider maximum value? (default no)
});
});
</script></syntaxhighlight>
#Or, to apply the plugin with the default option settings<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').lsRangeSlider();
});
</script></syntaxhighlight>
<br /><br />

=Reverse Slider=

{{Box|The reverse slider feature can be used in any (multiple) numerical input question type. For more details, please check the [[Question_type_-_Multiple_numerical_input#Slider|slider wiki subsection]].}}

=Sliders With Control Buttons=
== Version 2.05 ==

''Tested with: 2.05, IE 7-10, Firefox, Chrome''

This workaround uses a custom jQuery plugin to insert "up" and "down" buttons to control sliders. You can download a sample template here - [[Media:Demo_Slider_Buttons.zip|slider with buttons template]] - and a sample survey here - [[Media:Limesurvey_survey_button_slider.lss|button slider survey]].

[[File:Button_slider.jpg]]<br /><br />
The plugin allows the following options:
*Down Text: Text for the "down" button
*Up Text: Text for the "up" button
*Scrolling: Continuous slider movement if the left mouse button is held down
*Scroll Interval: Interval (in milliseconds) between slider movement when button is held down (do not make this too short or it will be difficult to stop the slider accurately)
*Value Prefix: Prefix for call-out
*Value Suffix: Suffix for call-out<br /><br />
Requirements:
*LimeSurvey 2.05 or newer
*A multiple-numeric question with slider enabled<br /><br />
# Create your multi-numeric question with the slider advanced settings.<br /><br />
#Add the following to the end of template.js.<syntaxhighlight lang="javascript">// A custom plugin to add control buttons to LimeSurvey sliders
// Author - Tony Partner - partnersurveys.com
(function( $ ){

$.fn.sliderButtons = function(options) {

// The defaults, extended and modified with any passed in the function call
var opts = $.extend( {
downText: '-', // Text for the "down" button
upText: '+', // Text for the "up" button
scrolling: true, // Continuous slider movement if left mouse button held down
scrollInterval: 150,// Interval (in ms) between slider movement when button is held down
valuePrefix: '', // Prefix for callout
valueSuffix: '' // Suffix for callout
}, options);

return this.each(function(i) {

var thisQuestion = $(this);

// Add some classes
$(thisQuestion).addClass('slider-button-question');

// Insert the buttons
$('li.question-item', thisQuestion).append('<div class="slider-button-wrapper">\
<button type="button" class="slider-button down">'+opts.downText+'</button>\
<button type="button" class="slider-button up">'+opts.upText+'</button>\
</div>');

// Initial button states
function handleButtonState(slider) {
var thisRow = $(slider).closest('li.question-item');
var thisSliderVal = $(slider).slider('option', 'value');
var thisSliderStep = $(slider).slider('option', 'step');
var thisSliderMin = $(slider).slider('option', 'min');
var thisSliderMax = $(slider).slider('option', 'max');
$('button.slider-button', thisRow).prop('disabled', false);
if ($(slider).slider('option', 'value') == thisSliderMin) {
$('button.slider-button.down', thisRow).prop('disabled', true);
}
if ($(slider).slider('option', 'value') == thisSliderMax) {
$('button.slider-button.up', thisRow).prop('disabled', true);
}
}
$('.multinum-slider', thisQuestion).each(function(i) {
handleButtonState(this);
if($(this).closest('li.question-item').find('input.text').val() != '') {
$('.slider-callout', this).text(opts.valuePrefix+$(this).closest('li.question-item').find('input.text').val()+opts.valueSuffix);
}
});

// Function to handle button actions
function handleButtons(thisButton) {
var thisRow = $(thisButton).closest('li.question-item');
var thisSlider = $('.multinum-slider', thisRow);
var thisSliderStep = $(thisSlider).slider('option', 'step');
var stepDecimals = 0;
if(thisSliderStep.toString().indexOf('.') >= 0) {
stepDecimals = thisSliderStep.toString().split('.')[1].length;
}
var thisSliderVal = Number($(thisSlider).slider('option', 'value')).toFixed(stepDecimals);
var thisSliderMin = $(thisSlider).slider('option', 'min');
var thisSliderMax = $(thisSlider).slider('option', 'max');
if ($(thisButton).hasClass('down') && thisSliderVal > thisSliderMin) {
$(thisSlider).slider('option', 'value', Number(thisSliderVal)-Number(thisSliderStep));
}
if ($(thisButton).hasClass('up') && thisSliderVal < thisSliderMax) {
$(thisSlider).slider('option', 'value', Number(thisSliderVal)+Number(thisSliderStep));
}
var newValue = $(thisSlider).slider('option', 'value').toFixed(stepDecimals).replace(/\./, LSvar.sLEMradix);
$('input.text', thisRow).val(newValue).triggerHandler('keyup');
$('.slider-callout', thisSlider).text(opts.valuePrefix+newValue+opts.valueSuffix);
}

// Scrolling
if(opts.scrolling == true) {

var sliderTimeout;
var clicker = $('button.slider-button', thisQuestion);
var count = 0;

$('button.slider-button', thisQuestion).mousedown(function(){
var thisButton = $(this);
sliderTimeout = setInterval(function(){
handleButtons(thisButton);
}, opts.scrollInterval);
return false;
});

$(document).mouseup(function(){
clearInterval(sliderTimeout);
return false;
});
$('button.slider-button', thisQuestion).mouseout(function(){
handleButtonState($(this).closest('li.question-item').find('.multinum-slider'));
});
}

// Listener on the buttons
$('button.slider-button', thisQuestion).click(function(e) {
handleButtons(this) ;
handleButtonState($(this).closest('li.question-item').find('.multinum-slider'));
});

// Listener on sliders
$('.multinum-slider', thisQuestion).on('slidestop', function( event, ui ) {
handleButtonState(this);
});

// Listener on reset buttons
$('.slider-reset', thisQuestion).on( "click", function( event, ui ) {
var thisReset = $(this);
setTimeout(function() {
handleButtonState($(thisReset).closest('li.question-item').find('.multinum-slider'));
}, 150);
});
});
};
})( jQuery );
</syntaxhighlight><br /><br />
#Add the following to the end of template.css (these styles are for the default template but easily modified for others):<syntaxhighlight lang="css">.slider-button-question label.slider-label {
margin-top: 0;
padding: 40px 1em 0 0;
*padding: 25px 1em 0 0;
}

.slider-button-question div.multinum-slider {
margin-top: 45px;
}

.slider-button-question .ui-slider-horizontal .ui-slider-handle {
width: 18px;
margin-left: -9px;
top: -4px;
}

.slider-button-question .slider_callout {
margin-left: -41px;
text-align: center;
width: 100px;
}

.slider-button-question .slider-button-wrapper {
float: left;
margin: 40px 0 0 25px;
}

.slider-button-question .slider-button-wrapper button {
padding: 0 10px;
margin: 0 0 0 5px;
}

.slider-button-question .slider-button-wrapper button:disabled {
opacity:0.65;
filter:alpha(opacity=65);
cursor: default;
}

.slider-button-question .slider-reset {
margin-top: 42px;
}
</syntaxhighlight><br /><br />
#Then, add something like this to the source of your question to apply the plugin with some custom option settings (I think the comments explain the options adequately)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#question{QID}').sliderButtons({
downText: 'Down', // Text for the "down" button
upText: 'Up', // Text for the "up" button
scrolling: true, // Continuous slider movement if left mouse button held down
scrollInterval: 250, // Interval (in ms) between slider movement when button is held down
valueSuffix: "%" // Suffix for callout
});
});
</script>
</syntaxhighlight><br /><br />
#Or, simply to apply the plugin with the default option settings<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#question{QID}').sliderButtons();
});
</script>
</syntaxhighlight>

== Version 3.x ==

A custom question theme for Slider Control Buttons for LimeSurvey 3.x can be found here - https://github.com/tpartner/LimeSurvey-Slider-Controls-3x

Workarounds: Question design, layout and templating

2023-05-11T17:28:57Z

Tpartner: /* Star Rating System Using Numeric Input Question */

This section more or less deals with styling your survey, adjusting the layout and setting up special question types. You can find '''similar information''' at these pages:
* [[The template editor]]
* [[Workarounds: Manipulating a survey at runtime using Javascript]]
* [[Workarounds: Survey behaviour]].

<div class="simplebox"><center><br />'''Please keep in mind that these workarounds are not official LimeSurvey extensions - they are solutions that users have created for themselves. <span style='color:#EE0000'>Therefore LimeSurvey can't offer guarantees or support for these solutions.</span><br />If you have questions, please contact the users that, thankfully, shared their solutions with the community.'''<br /><br /></center></div>

__TOC__

=Different progress indicator=

==Version 1.87 and later:==

Add the following to the end of template.js. It will find the progress value and insert it into the element following the progress bar.

It should be pointed out that I had to introduce a delay in firing the function because the progress value is not calculated until after template.js is called. The delay is set at 1/10 of a second but you may be able to reduce that.

<syntaxhighlight lang="php">

// Display progress value

function setProgValue() {

var progress = $('#progressbar').attr('aria-valuenow');

$('#progress-post').text(progress+'%').show();

}

$(document).ready(function(){

$('#progress-post').hide();

setTimeout('setProgValue()',100);

});

</syntaxhighlight>

If you want to hide the "0%" before the progress bar, add the following to the end of template.css:

<syntaxhighlight lang="php">
#progress-pre {

display: none;

}

</syntaxhighlight>

=Delete unwanted gaps in question title=

''Tested with: ''

When copying data (questions, answers, ...) from MS Word or other applications into the editor there might occur some gaps in the question title.

There are two solutions to this:
# Use popup mode and manually delete unwanting extra html tags (requires html knowledge).
# Disable paste word feature: Tweak your limesurvey-config.js file in limesurvey/admin/scripts/fckeditor.26 and set the following option to true:

<syntaxhighlight lang="php">FCKConfig.ForcePasteAsPlainText = true ;</syntaxhighlight>

After that clear you browser cache and try again.

=How to change the <font-size> tags using CSS=

''This workaround was deleted because it is outdated. Such changes can be done by [[The template editor#Styling questions with CSS|adjusting template.css]] of your template.

=Question type variation: Scale with bars (one and two sided)=

''Tested with: ''

Some methodogical issues to think about: Very often a common scale as 1 to 5 or -2 to +2 fits all needs, as the shown subject is clearly defined as positive or negative. As soon as you would reduce the influence from the question and scale on the respondent, you will need something neutral to determine tendences, emphases and so on.

So I put up a new variation of the one and two sided array question:

ttp://www.limesurvey.org/images/fbfiles/images/example_bar_scale.jpg

In my example the left side reads "strategical planning" and the right side "operative business". None of these are purely negative or positive, so the bars only show in which direction the balancing point moves.

To realize a question as shown above just do as follows:

Set up as many bars as you will need (in my example there are four different bars in total) with a graphic program like PAINT .NET, GIMP or similar ones (yes, you may also use commercial software like Photoshop). To prevent the bars from looking twitchy, designate the size in advance. I did one bar 60x15 px, one 45x15px, one 30x15px and at last 15x15px. Save them as PNG, JPG or GIF.
# Create a new label set within Lime. Call it whatever you like.
# Enter a code number at first, then press the pencil symbol to enter the editor.
#Press the "Insert / edit image" button and upload the bar you want to insert with the FCK upload tool. Then choose the uploaded picture, save and leave the FCK editor.
#The row in the lable editor now shows an <img>-tag which refers to your bar picture.
#Repeat the above described steps as often as needed to build up your bar scale.

=Doing a Likert Scale=

''Tested with: ''

A Likert Scale is a special type of the Semantic Differential question where several item shall be rated on different scales, each marked at the beginning and at the end with opposite statements.

To do this in LimeSurvey just follow these steps:
#Create a label set with values from 0 to 7 (for the classic Likert Scale - feel free to choose other ranges).
#Create a new question and choose Array (Flexible Labels) as question type.
#Assign the Likert Scale label set to this question.
#Enter your answers as follows:

<syntaxhighlight lang="php"><DIV style="white-space: nowrap;">ITEM statement1|statement2</div></syntaxhighlight>

The white-space style is to avoid line breaks which would ruin the whole scale. feel free to insert non-breakable spaces between the ITEM and statement1 to define the margin between these to strings.

=Alternate background colour of questions=

''Tested with: 1.85+ (7191)''

To alternate the background colour of questions, open the ''template.css'' of your template with the Template Editor or a text editor and modify the ''Question styles'' section to include the following style.

<syntaxhighlight lang="php">

div#question2 td.questiontext,

div#question4 td.questiontext,

div#question6 td.questiontext {

background-color: #E0EBF8;

}

</syntaxhighlight>

Be sure to apply the style to all of the questions you would like modified using their question IDs (''question2, question4, question6'' in this case). Question IDs are displayed when creating or editing questions - see below:

[[File:qid_1_493x173.gif]]

Here the question ID is #question80 .

=Embedding audio in questions=

''Tested with: 1.85+ (7191), IE 7, FireFox 3''

Audio clips can be embedded in most question text or answer text. In this example, using the default template, I've embedded clips into the answers of an '''''Array (Yes/No/Uncertain)''''' question to ask respondents how they feel about some sounds. The resulting question will look like this.

[[File:audioTest_595x202.gif]]

It's accomplished by placing the following code in each of the answers.

<syntaxhighlight lang="php">

<embed height="20" width="128" autostart="false" controls="console"

loop="true" volume="50" src="{TEMPLATEURL}audio_1.mp3"></embed>

</syntaxhighlight>

Some notes about the code:
*The ''audio_1.mp3'' part will be different for each answer (it's the audio file name).
*In this case the audio files are residing in the template folder being used for this survey (that's where ''{TEMPLATEURL}'' points to) but they can be placed anywhere if you use an absolute URL in the ''src'' parameter - something like ''src="http://mysite.com/audio/audio_1.mp3"''
*If the audio file doesn't exist where the ''src'' parameter indicates, the player will not appear.
*You'll need to insert the code into the answers using the source screen - click on "Edit answers", click the pencil beside the text box, click "Source" in the pop-up, enter the code and save it with the little diskette icon.
*You may need to turn off the XSS filter - see the documentation for [http://docs.limesurvey.org/tiki-index.php?page=Global+settings&structure;=English+Instructions+for+LimeSurvey#Security Global settings].

Although the above example places the audio in the answer text of the question, the same principles can be used to place it in the question text itself. Something like this perhaps.

[[File:audioTest_595x154.gif]]

=Hiding inputs of a "Multiple options with comments" question=

There may be times when you want to hide some of the input boxes of a '''''Multiple choice question type with comments''''' question as in the image below:

[[File:hidden_inputs_541x168.gif]]

This can be accomplished with CSS (see [[The template editor#Styling questions with CSS|Styling questions in LimeSurvey 1.8]]). For each input that you want to hide, add the following style to your template.css file:

<syntaxhighlight lang="css">
#answer11111X22X33Acomment {
display: none;
}
</syntaxhighlight>

Where 11111 is your survey ID, 22 is your group ID, 33 is your question ID and A is the answer code.

Note that you will still see columns for the hidden inputs in your data but they will be empty.

=Multiple question types in array=

''Tested with: 1.90 - 1.92+, IE 7/8/9, Firefox 13, Safari 5, Chrome 10''

[[Media:limesurvey_survey_62584.lss|Download the sample survey]]

This workaround allows you to present multiple question types in what appears to be an array - as depicted in the image below and [http://www.partnersinc.biz/surveys//index.php?sid=62584&newtest=Y&lang=en demonstrated here] (download the sample survey - [[Media:limesurvey_survey_62584.lss|limesurvey_survey_62584.lss]]). This example uses the default template but should be adaptable to any template using divisions for question containers.

[[File:inline_questions_700x228.png]]

Basically what we do is take groups of questions (5 in this case), wrap them in a division and make them line up nicely horizontally and vertically. The width of the survey is also fixed to prevent wrapping issues. We do this with a JavaScript/jQuery function that inserts the necessary wrappers and then modifies styles so everything behaves properly. The top row is 5 boilerplate questions with the "column headers" as question text (the first just has a blank space). The following rows are a boilerplate with the "row headers" followed by 4 assorted questions.

It should be noted that using conditions on these questions may result in unexpected behavior. If a question is hidden by conditions, the question(s) to the right of it will move over to take its place.

Implementation is as follows:
#Create your questions keeping in mind how they will lay out when grouped into rows (in this example - boilerplate, yes/no, short text, numeric, dropdown, and repeat).
#In the source of the first boilerplate question add the function below (see [http://manual.limesurvey.org/wiki/Workarounds:_Manipulating_a_survey_at_runtime_using_Javascript#How_to_use_Script_.28eg._JavaScript_etc..29_in_LimeSurvey.3F How to use script]).
#Modify the number of rows, number of columns and the start placement in the function call (line 6) as required (the example uses 4 rows and 5 columns and the "array" starts with the third question on the page).

The code may look intimidating at first but it's actually fairly simple. I've laid it out as sequentially as possible and purposely used few shortcuts and many comments to make it easier to follow.

Notes:
*If you use question types other than boilerplate, short text, list dropdown, numeric or yes-no, you'll need to add to the last section of code, where it hides the question text and formats the inputs for display this way.
*Any extra questions on the page should follow this grid of questions, not precede them.
* If you use boilerplate as question type you should add after:
<syntaxhighlight lang="javascript">
// Hide the question text elements in non-boilerplate questions
$('div.questionCell td.questiontext').parent().hide();
</syntaxhighlight>
the following 2 lines
<syntaxhighlight lang="javascript">
//repair boilerplate questioncells
$('div.boilerplate td.questiontext').parent().show();
</syntaxhighlight>

Javascript code:
<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {
// Call the "sideBySide" function with number of rows, columns and start position
sideBySide(4, 5, 3);
});

function sideBySide(rows, columns, startQuestion) {

/*********** Display multiple questions side by side ***********/

if ($('div.qRow1').length == 0) {

var rowNum = 0;
var colNum = 1;
var rowList = new Array();

//////// Add question classes for later use ////////

// Loop through all questions and add row and column specific classes
$('div[id^="question"]').each(function(i) {
if(i >= (startQuestion-1) && rowNum < rows) { // This IF condition only needed if there are questions before or following the "inline" questions
$(this).addClass('qRow'+rowNum+'').addClass('qCol'+colNum+'').addClass('inlineQuestion');
if(rowNum == 0 && colNum > 1) {
$(this).addClass('columnLabel');
}
if(rowNum > 0 && colNum == 1) {
$(this).addClass('rowLabel');
}
else if(rowNum > 0 && colNum > 1) {
$(this).addClass('questionCell');
}
if(colNum == columns) {
rowList.push('qRow'+rowNum+'');
rowNum++;
colNum = 1;
}
else {
colNum++;
}
}
else {
$(this).addClass('normalQuestion');
}
});

//////// Survey layout manipulation ////////

// Fix the width of the survey
$('table.outerframe').css({
'width': '900px'
});

// Wrap each "row" in a wrapper div
$(rowList).each(function(i) {
$('.'+this+'').wrapAll('<div id="inlineWrapper'+i+'" class="inlineRow" />');
});

// Style the wrapper divs
$('.inlineRow').css({
'width': '850px',
'margin': '0 auto 0 auto',
'clear': 'both'
});

$( '.inlineRow:first' ).css({
'margin-top': '10px'
});

// Get all the questions to sit politely side by side
$( '.inlineQuestion' ).css({
'float': 'left',
'height':'41px',
'overflow':'hidden',
'margin-bottom': '-8px'
});
$( '.inlineQuestion .questionhelp' ).hide();
$( '.inlineQuestion .survey-question-help' ).parent().hide();

// A little space under the last row
$( '.inlineRow:last .inlineQuestion' ).css({
'margin-bottom': '10px'
});

// Any questions not displayed inline (this is only needed if there are questions following the "inline" questions)
$( '.normalQuestion' ).css({
'clear': 'both'
});

//////// Column manipulation ////////

// Set the column widths - can be set individually if necessary
// Must add up to less than 100%
$( '.qCol1' ).css({
'width': '12%'
});

$( '.qCol2, .qCol3, .qCol4, .qCol5' ).css({
'width': '22%'
});

//////// Question manipulation ////////

// Hide the answer element in boilerplate questions
$( 'div.boilerplate td.answer' ).parent().hide();

// Hide the question text elements in non-boilerplate questions
$('div.questionCell td.questiontext').parent().hide();

// Push the question tables to 100%
$( 'div.inlineRow table' ).css({
'width': '100%'
});

// Get everything to line up nicely vertically
$( '.inlineQuestion td.questiontext, .inlineQuestion td.answer p' ).css({
'text-align': 'center'
});

// Adjust cell heights so everything lines up nicely horizontally
$( '.inlineQuestion td.answer, .inlineQuestion td.questiontext' ).css({
'height':'35px',
'overflow':'hidden',
'padding':'0.5em'
});
$( '#inlineWrapper0 .inlineQuestion' ).css({ 'height':'50px' });
$( '#inlineWrapper0 td.questiontext' ).css({
'height':'50px'
});

// Yes-no question styles
$( 'div.yes-no ul' ).css({
'text-align': 'center',
'font-size': '90%',
'margin': '0',
'padding-bottom': '5px'
});
$( 'div.yes-no li' ).css({
'padding-right': '1.5em'
});
$( 'div.yes-no td.answer' ).css({
'padding-bottom': '0'
});

// Short-text question styles
$( 'div.text-short input' ).css({
'width': '125px',
'margin-left': '0'
});

// Numeric question styles
$( 'div.numeric input' ).css({
'width': '125px',
'margin-left': '0'
});
$( 'div.numeric p.tip' ).css({
'display': 'none'
});

// Get rid of the margins around select boxes
$( 'p.question' ).css({ 'margin':'0' });
}
}
</script>
</syntaxhighlight>
<br /><br />

=Star Rating System=

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

This workaround uses the [http://www.fyneworks.com/jquery/star-rating/ jQuery Star Rating Plugin] to display a series of stars that are used to generate a rating value. This value is then passed to either a hidden numeric input question or a hidden list radio question. Both methods are outlined below - use one or both depending on whether you want to use [Assessments|assessments].

The plugin uses a series of radio inputs to generate the stars (more about these below). It allows the use of whole or partial stars as shown in the image below.

[[File:star_rating_700x324.png]]

==Star Rating System Using Numeric Input Question==

Use this method if you would like your rating data to be collected as a numeric value and don't want to use [[Assessments|LimeSurvey assessments]] - it's a little easier to implement.

'''Implementation is as follows:'''
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])
#[http://www.fyneworks.com/jquery/star-rating/ Download the plugin] and place the following included files in your template folder:
##jquery.MetaData.js
##jquery.rating.css
##jquery.rating.js
##delete.gif
##star.gif
#In the <head> section of your startpage.pstpl, add the following code to link to the files.

<syntaxhighlight lang="php">

<script type="text/javascript" src="{TEMPLATEURL}jquery.rating.js" charset="utf-8"></script>

<script type="text/javascript" src="{TEMPLATEURL}jquery.MetaData.js" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}jquery.rating.css" />

</syntaxhighlight>

5. Create a numeric input question and then in the source of the question add as many radio inputs as star segments. For example, if you would like 5 stars, each with half-segments (as in the demo Q1), you would need 10 radio inputs and that would give rating values from 1-10.

Don't confuse these inputs with the actual question, they are just for the plugin's use.

At this point your question source code should look something like below. Make sure that all inputs have the same name. Each input must have the same title as value and these must be sequential. Don't worry about how all of this looks in the WSYSWYG editor - the plugin is going to hide these inputs and replace them with stars.

<syntaxhighlight lang="php">

Q1 - Some question text here.<br /><br />

<div id="starContainer">

<input type="radio" class="star { split:2 }" title="1" value="1" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="2" value="2" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="3" value="3" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="4" value="4" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="5" value="5" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="6" value="6" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="7" value="7" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="8" value="8" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="9" value="9" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="10" value="10" name="q1Rate" />

</div>

</syntaxhighlight>

6. A note on split stars. The stars in the above example are split in half by the ''{ split:2 }'' metadata. So if you don't want split stars, your inputs would look like:

'''<input type="radio" class="star" title="1" value="1" name="q1Rate" />'''

And stars split into third-segments would look like:

'''<input type="radio" class="star { split:3 }" title="1" value="1" name="q1Rate" />'''

7. Finally, in the source of the question add the following function after your inputs. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]])

Some notes on the code:
*Replace "SSSSS", "GG", "QQ" in the function call at the end with the survey ID, group ID and question ID respectively.
*The code will hide the numeric input and pass the rating values into it as they are changed. If the rating is canceled the numeric input is nullified. If a respondent navigates away from the page then returns the code "remembers" the previous rating and displays the stars accordingly.
*If you want to apply it to more numeric questions on the same page simply add more calls with the appropriate IDs. (eg. handleRatingNumeric(11111, 22, 1); handleRatingNumeric(11111, 22, 2); ...) .

Code:

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

function handleRatingNumeric (sID, gID, qID) {

// Hide the numeric input

$('#question' + qID + ' td.answer').parent().hide();

// Get a previous rating (if any) and use it to initialize the star display

var rating = $('#answer' + sID + 'X' + gID + 'X' + qID + '').val();

if ( rating != '' ) {

$('#question' + qID + ' input.star').rating('select', rating);

}

// Listener on the star rating cancel element

$('#question' + qID + ' div.rating-cancel').click(function(event) {

// Nullify the rating if the Cancel element is clicked

rating = '';

$('#answer' + sID + 'X' + gID + 'X' + qID + '').val(rating);

});

// Listener on the star rating elements

$('#question' + qID + ' div.star-rating').click(function(event) {

// Find the value of the highest clicked star and pass it into the text input

$('#question' + qID + ' div.star-rating-on').each(function(i) {

rating = $(this).children('a').html( );

});

$('#answer' + sID + 'X' + gID + 'X' + qID + '').val(rating);

});

}

// Call the function for the numeric question

handleRatingNumeric (SSSSS, GG, QQ);

});

</script>

</syntaxhighlight>

==Star Rating System Using List (Radio) Question==

Use this method if you would like to use [[Assessments|assessments]]. There is a demo [http://www.partnersinc.biz/surveys//index.php?sid=47586&newtest=Y&lang=en here] (second question).

'''Implementation is as follows:'''

1. Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])

2. Set up the template to use custom onload functions. (See the [[Workarounds: Manipulating a survey at runtime using Javascript#Custom onload function|workaround here]])

3. [http://www.fyneworks.com/jquery/star-rating/ Download the plugin] and place the following included files in your template folder:
*jquery.MetaData.js
*jquery.rating.css
*jquery.rating.js
*delete.gif
*star.gif

4. In the <head> section of your startpage.pstpl, add the following code to link to the files.

<syntaxhighlight lang="php">

<script type="text/javascript" src="{TEMPLATEURL}jquery.rating.js" charset="utf-8"></script>

<script type="text/javascript" src="{TEMPLATEURL}jquery.MetaData.js" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}jquery.rating.css" />

</syntaxhighlight>

5. Create a list (radio) question with the same amount of sequentially numbered answers as star ratings. For example, if you want 5 whole-stars, you would create 5 answers, as in the image below, and this would give you ratings from 1-5. Note that the "Codes" and "Answers" must be sequential numbers.

[[File:star_rating_700x156_v2.png]]

6. In the list (radio) question, set the [[Advanced question settings|hide_tip]] question attribute to 1

7. In the source of the question add as many radio inputs as star segments. So 5 whole-stars (as in the demo Q2), would need 5 radio inputs.

Don't confuse these inputs with the actual question, they are just for the plugin's use.

At this point your question source code should look something like below. Make sure that all inputs have the same name. Each input must have the same title as value and these must be sequential. Don't worry about how all of this looks in the WSYSWYG editor - the plugin is going to hide these inputs and replace them with stars.

<syntaxhighlight lang="php">

Q2 - Some question text here.<br /><br />

<div id="starContainer">

<input type="radio" class="star" title="1" value="1" name="q2Rate" />

<input type="radio" class="star" title="2" value="2" name="q2Rate" />

<input type="radio" class="star" title="3" value="3" name="q2Rate" />

<input type="radio" class="star" title="4" value="4" name="q2Rate" />

<input type="radio" class="star" title="5" value="5" name="q2Rate" />

</div>

</syntaxhighlight>

8. A note on split stars. The stars in the above example are whole-stars. If you want them split you need to add metadata to the class - something like ''{ split:2 }''. So if you want half-stars your inputs would look like:

'''<input type="radio" class="star { split:2 }" title="1" value="1" name="q1Rate" />'''

And stars split into third-segments would look like:

'''<input type="radio" class="star { split:3 }" title="1" value="1" name="q1Rate" />'''

9. Finally, in the source of the question add the following function after your inputs. (See [http://docs.limesurvey.org/tiki-index.php?page=Workarounds&structure;=English+Instructions+for+LimeSurvey#How_to_use_Script_eg._JavaScript_etc._ How to use script here])

Some notes on the code:
*Replace "SSSSS", "GG", "QQ" in the function call at the end with the survey ID, group ID and question ID respectively.
*The code will hide the question radio buttons and toggle them as the rating values are changed. If the rating is canceled all question inputs are unchecked. If a respondent navigates away from the page then returns the code "remembers" the previous rating and displays the stars accordingly.
*If you want to apply it to more numeric questions on the same page simply add more calls with the appropriate IDs. (eg. handleRatingRadio(11111, 22, 1); handleRatingRadio(11111, 22, 2); ...) .

Onload code:

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

function handleRatingRadio (sID, gID, qID) {

// Hide the radio input

$('#question' + qID + ' td.answer').parent().hide();

// Get a previous rating (if any) and use it to initialize the star display

var rating = $('#question' + qID + ' input.radio[checked=true]').attr('value');

//if ( rating != '' ) {

if ( rating ) {

$('#question' + qID + ' input.star').rating('select', rating);

}

// Listener on the star rating cancel element

$('#question' + qID + ' div.rating-cancel').click(function(event) {

// Nullify the rating if the Cancel element is clicked

rating = '';

$('#question' + qID + ' input.radio').attr('checked', false);

});

// Listener on the star rating elements

$('#question' + qID + ' div.star-rating').click(function(event) {

// Find the value of the highest clicked star and pass it into the text input

$('#question' + qID + ' div.star-rating-on').each(function(i) {

rating = $(this).children('a').html( );

});

$('#question' + qID + ' input.radio[value=' + rating + ']').attr('checked', true);

});

}

// Call the function for the radio question

handleRatingRadio (SSSSS, GG, QQ);

});

</script></syntaxhighlight>

=Variable column widths in array=

''Tested with: 1.85+ (7557), IE 6/7, Firefox 3.0, Safari 3.2''

This workaround allows you to define all column widths of an array question - as shown in the image below and [http://www.partnersinc.biz/surveys//index.php?sid=26842&newtest=Y&lang=en demonstrated here]. This example uses the default template shipped with 7557 but should be adaptable to any template.

[[File:array_widths_701x226.gif]]

We use a function to remove all of the widths imposed by the core code and then insert our own.

'''Implementation is as follows:'''
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions (see [http://docs.limesurvey.org/tiki-index.php?page=Optional+settings&structure;=English+Instructions+for+LimeSurvey#Filtering_dangerous_HTML_tags_in_survey_objects documentation here]).
#Create the array question.
#In the source of the array question add the following script (see [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]]).
#Replace all instances of QQ with the question ID.
#In the third section of code, adjust the widths and add/remove columns as necessary. This example is for an array with a question text column followed by 3 answer columns as shown above.
#In the final section adjust the question text alignment to your liking

Onload code

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Get rid of all the widths that the API imposes

$( 'div#questionQQ table.question col' ).attr('width', '');

$( 'div#questionQQ table.question thead td' ).attr('width', '');

// Define a width for the question table so we can do so for its children

// NOTE: Keep this to 95% or less so IE will behave

$( 'div#questionQQ table.question' ).attr('width', '95%');

// Define the column widths

// Add or remove columns and adjust widths as necessary but widths should add up to 100%

// NOTE: Columns must be sequentially numbered starting at 0 - eg, td:eq(0), td:eq(1), td:eq(2).....

$( 'div#questionQQ table.question tbody th:eq(0)' ).css({ 'width':'10%' }); // Answer text column

$( 'div#questionQQ table.question tbody td:eq(0)' ).css({ 'width':'50%' }); // First answer column

$( 'div#questionQQ table.question tbody td:eq(1)' ).css({ 'width':'20%' }); // Second answer column

$( 'div#questionQQ table.question tbody td:eq(2)' ).css({ 'width':'20%' }); // Third answer column

// Push the text input widths to 95% of their parent containers

$( 'div#questionQQ table.question input[type="text"]' ).css({ 'width':'95%' });

// Align the answer text - feel free to experiment

$( 'div#questionQQ table.question tbody th' ).css({'text-align':'center'});

});

</script></syntaxhighlight>

=Use images for radio buttons and checkboxes=

''Tested with: LimeSurvey 1.92/2.0, using IE 9, FireFox 13, Chrome 16, Safari 5''

This workaround uses an adaptation of the jQuery imagetick.js plugin to replace the default radio buttons and checkboxes with images as pictured below:

[[File:images.png]]

This adaptation will work in the following question types:
*Array
*Array by column
*Array dual scale
*Array (5 point choice)
*Array (10 point choice)
*Array (Increase-Same-Decrease)
*Array (Yes-No-Uncertain)
*Gender
*Yes-No
*Multiple choice
*Multiple choice with comments
*5 point choice
*List (Radio)
*List with comment

==LimeSurvey 2.0 and later implementation==

Follow the instructions above with these changes:
#Download [[Media:Imagetick_lime_v2.1.zip|this modified version of the plugin for 2.0 and up]] instead of the one mentioned above and add all contained files to your template directory.
#Add these lines to the <head> element in your startpage.pstpl instead of the one above:<syntaxhighlight lang="php"><script type="text/javascript" src="{TEMPLATEURL}imagetick_lime_2.js"></script>

<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}imagetick_lime_2.css" /></syntaxhighlight>

Thanks to Jordan Boesch for the original plugin.

=Changing the position and layout of an individual question using "question code"=

''Tested with: 1.87+ (6536)''

To use this very flexible workaround you first have to apply a minor change to the question.pstpl of the used template.

<syntaxhighlight lang="php">

<div class="survey-question">

<div class="survey-question-text">

</syntaxhighlight>

needs to be changed to

<syntaxhighlight lang="php">

<div class="survey-question" id="{QUESTION_CODE}">

<div class="survey-question-text" id="{QUESTION_CODE}" >

</syntaxhighlight>

this change won't change anything in the layout and can be left in the template even if you don't need this workaround. It's just a means to have a handle to actually change individual questions.

You can then use a code such as the following in the question text to make question specific format changes. "SAMPLE" needs to be replaced with the concerning question code and javascript has to be allowed ([[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|older versions of limesurvey]], under global settings for newer versions).

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

document.getElementById('SAMPLE').style.borderTop= "0px";

document.getElementById('SAMPLE').style.marginTop= "-62px";

document.getElementById('SAMPLE').style.marginLeft= "30px";

</script>

</syntaxhighlight>

This sample code will hide the border at the top of the question, will move the whole question up by 62px and to the right by 30px. Using this workaround you can change a whole a lot of things concerning format and positions of a specific question without changing all the questions. A (German) list of all the allowed options can be found [http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften here].

=Create MaxDiff question type=
==Version 2.06==

''Tested with: LimeSurvey version 2.06''

This workaround uses JavaScript to convert an '''''Array (flexible labels) by column''''' question into a [http://en.wikipedia.org/wiki/MaxDiff MaxDiff] question type.
<br /><br />
[[File:max_diff_596x253.gif]]
<br /><br />
Implementation is as follows.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create an '''''Array (flexible labels) by column''''' question with 2 "answers" - these will be the left and right columns.
#Assign a label set to the question - these will be the labels in the center column.
#Set the second parameter of the function call to true for randomized rows.
#Adjust the styles in lines 21-24 as required.
<br />
The script moves the question columns into the MaxDiff configuration and disables the opposing radio element when a selection is made.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

// Call the maxDiff() function
// Set the second parameter to true for randomized rows
maxDiff({QID}, false);
});

function maxDiff(qID, randomize) {

// Random number between 1 and 2
// Math.floor(Math.random() * (max - min + 1)) + min;
var randomNum = Math.floor(Math.random() * ((2-1)+1) + 1);

// Move the columns
$('#question'+qID+' table.subquestions-list col:eq(1)').prependTo('colgroup.col-responses');
$('#question'+qID+' table.subquestions-list thead tr:eq(0) th:eq(0)').prependTo('#question'+qID+' table.question thead tr:eq(0)');
$('#question'+qID+' table.subquestions-list tbody tr').each(function(i){
$('td.answer-item:eq(0)', this).prependTo(this);
});
$('#question'+qID+' table.subquestions-list tbody tr').each(function(i){
$('td.answer-item:eq(0)', this).prependTo(this);
});

// Random rows
if(randomize) {
var rowsArr = [];
$('#question'+qID+' table.subquestions-list tbody tr').each(function(i){
$(this).attr('data-index', i);
rowsArr.push(i);
});
shuffleArray(rowsArr);
$(rowsArr).each(function(i){
$('#question'+qID+' table.subquestions-list tbody').append($('#question'+qID+' tr[data-index="'+this+'"]'));
});
}

// Style stuff
$('#question'+qID+' table.subquestions-list col.odd').css({ 'background-color':'transparent' });
$('#question'+qID+' table.subquestions-list tbody th').css({ 'text-align':'center' });
$('#question'+qID+' table.subquestions-list tbody tr:even td, #question'+qID+' table.question tbody tr:even th').css({ 'background-color':'#F1F1F1' });
$('#question'+qID+' table.subquestions-list tbody tr:odd td, #question'+qID+' table.question tbody tr:odd th').css({ 'background-color':'#FCFCFC' });

// Prevent clicking twice in the same row
$('#question'+qID+' input.radio').on('click', function () {

$('#question'+qID+' input.radio').prop('disabled', false);
$('#question'+qID+' input.radio:checked').each(function(i) {
var thisRow = $(this).closest('tr');
$('input.radio', thisRow).not(this).prop('disabled', true);
});
});
}

function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
</script></syntaxhighlight>
==Versions 2.5 and 3.x==

''Tested with: LimeSurvey version 2.5''

This workaround uses JavaScript to convert an '''''Array (flexible labels) by column''''' question into a [http://en.wikipedia.org/wiki/MaxDiff MaxDiff] question type.
<br /><br />
[[File:MaxDiff_2.5.png]]
<br /><br />
'''DOWNLOADS'''<br />
* [[Media:Demo_MaxDiff_For_25_Template.zip|Demo template]]
* [[Media:Demo_MaxDiff_For_25_Survey.zip|Demo survey]]

'''IMPLEMENTATION'''
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create an '''''Array (flexible labels) by column''''' question with 2 "answers" - these will be the left and right columns.
#Add 2 subquestions to the array - these will be the left and right columns.
#Add answers to the array - these will be the rows.
#Create a copy the default template.
#Add the following to the end of '''''template.js''''' in your new template:<syntaxhighlight lang="javascript">function maxDiff(qID, randomize) {

// Identify some elements
var thisQuestion = $('#question'+qID);
var thisTable = $('table.subquestion-list:eq(0)', thisQuestion);

// Assign a new question class
$(thisQuestion).addClass('max-diff-array');

// Move the columns
$('thead tr:eq(0)', thisTable).prepend($('thead tr:eq(0) th:eq(1)', thisTable));
$('tr.answers-list', thisTable).each(function(i){
$('td.answer-item:eq(0)', this).prependTo(this);
});

// Random rows
if(randomize) {
var rowsArr = [];
$('tr.answers-list', thisTable).each(function(i){
$(this).attr('data-index', i);
rowsArr.push(i);
});
shuffleArray(rowsArr);
$(rowsArr).each(function(i){
$('tbody', thisTable).append($('tr[data-index="'+this+'"]', thisTable));
});
}

// Prevent clicking twice in the same row
$('input:radio', thisQuestion).on('click', function () {

$('input:radio', thisQuestion).prop('disabled', false);
$('input:radio:checked', thisQuestion).each(function(i) {
var thisRow = $(this).closest('tr.answers-list');
$('input:radio', thisRow).not(this).prop('disabled', true);
});
});

// Fix up the row classes
var rowClass = 1;
$('tr.answers-list', thisTable).each(function(i) {
$(this).addClass('array'+(2-(i%2)));
});
}

function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}</syntaxhighlight>
#Add the following to the end of '''''template.css''''' in your new template:<syntaxhighlight lang="css">.max-diff-array th.answertext {
text-align: center;
border-right: 3px solid #FFFFFF;
border-left: 3px solid #FFFFFF;
}

/* Override the responsive "no-more-tables" stuff */
@media only screen and (max-width: 801px) {

.max-diff-array .no-more-tables table {
display: table;
border-collapse: inherit;
}

.max-diff-array .no-more-tables thead,
.max-diff-array .no-more-tables tbody {
display: table-row-group;
}

.max-diff-array .no-more-tables tr {
left: auto;
position: relative;
top: auto;
display: table-row;
border: 0 none;
}

.max-diff-array .no-more-tables th,
.max-diff-array .no-more-tables td {
display: table-cell;
text-align: center !important;
color: #2c3e50;
font-size: 15px;
}

.max-diff-array th.answertext {
border-right: 3px solid #FFFFFF;
border-left: 3px solid #FFFFFF;
}

.max-diff-array .answer-item label span {
display: none !important;
}
}</syntaxhighlight>
#Add a script like this to the question source of the Array (flexible labels) question:<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Call the maxDiff() function
// Set the second parameter to true for randomized rows
maxDiff({QID}, true);
});
</script></syntaxhighlight>

=Load SVG Code From Drawing Tool=

This workaround uses JavaScript/jQuery to load a drawing tool and store the results in a huge-text question. The details are outlined in the [[Workarounds: Manipulating a survey at runtime using Javascript#Load SVG Code From Drawing Tool|JavaScript section of the workarounds]].

=Minimum or Maximum Date in Datepicker=

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

'''Please note: From version 2.05 beta6, you MUST set the minimum and maximum date for the date picker directly in the advanced question attributes of the date/time question. This workaround will seize to work.'''

You can set the minimum or maximum selectible date in a datepicker as follows

[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]] and add the following to the source of the date question text or help. Replace "QQ" with the date question ID.

For a minimum date of April 15, 2010:<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;

$('#question'+qID+' .popupdate').datepicker( 'option', 'minDate', new Date(2010, 4-1, 15) );

});

</script>

</syntaxhighlight>

For a minimum date of the current date (today):<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;

$('#question'+qID+' .popupdate').datepicker( 'option', 'minDate', new Date() );

});

</script>

</syntaxhighlight>

For a maximum date of May 10, 2015:<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;

$('#question'+qID+' .popupdate').datepicker( 'option', 'maxDate', new Date(2015, 5-1, 10) );

});

</script>

</syntaxhighlight>

More details here - http://jqueryui.com/demos/datepicker/#option-minDate

=Evaluative Space Grid (ESG)=

''Tested with LimeSurvey versions 2.06 & 2.5''

The evaluative space grid (ESG) is a two-dimensional grid that provides a single-item measure of positivity and negativity (Larsen et al, 2009). See [http://leeds-faculty.colorado.edu/mcgrawp/pdf/larsen.norris.mcgraw.hawkley.cacioppo.2009.pdf page 4 of this PDF].

This can be accomplished using a multiple-numeric question, some simple HTML and a little JavaScript.

A table can be shown in the question. When a respondent clicks a grid cell in the table JavaScript loads the coordinates of the cell into the multiple-numeric question inputs.

[[File:Space_grid_2.png]]<br /><br />
#Create a Multiple Numeric question with two subquestions labelled "X" and "Y".
#Add the following HTML to the source of the question to create the table:<syntaxhighlight lang="html4strict">
<table class="spaceGrid">
<tr>
<td rowspan="5" class="yAxisLabel">How NEGATIVE<br>
do you feel about<br>
the stimulus?</td>
<td class="yLabel">Extremely</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="yLabel">Quite a bit</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="yLabel">Moderately</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="yLabel">Slightly</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="yLabel">Not at all</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="blankCell"></td>
<td class="blankCell"></td>
<td class="xLabel">Not at all</td>
<td class="xLabel"><span class="yLabel">Slightly</span></td>
<td class="xLabel"><span class="yLabel">Moderately</span></td>
<td class="xLabel"><span class="yLabel">Quite a bit</span></td>
<td class="xLabel"><span class="yLabel">Extremely</span></td>
</tr>
<tr>
<td class="blankCell"></td>
<td class="blankCell"></td>
<td colspan="5" class="xAxisLabel">How POSITIVE do you feel about the stimulus?</td>
</tr>
</table>
</syntaxhighlight><br /><br />
#Add the following styles to the end of your template.css file:<syntaxhighlight lang="css">
.spaceGrid {
width: auto;
border: 0 none;
border-collapse: collapse;
}

.spaceGrid td {
padding: 0 3px;
text-align: center !important;
border: 0 none;
}

td.xAxisLabel {
padding-top: 10px;
}

td.yAxisLabel {
padding-right: 10px;
width: 125px;
}

td.xLabel {
height: 20px;
font-weight: normal;
font-size: 13px;
}

td.yLabel {
text-align: right !important;
font-weight: normal;
font-size: 13px;
}

td.gridCell {
width: 70px;
height: 70px;
border: 1px solid #666666;
background-color: #FFFFFF;
cursor: pointer;
}

td.checkedCell {
background-color: #66FF00;
}</syntaxhighlight><br /><br />
#Add the following to the end of your template.js file:<syntaxhighlight lang="javascript">
$(document).ready(function() {

$('.spaceGrid').each(function(i){

// Define some vars
var thisQuestion = $(this).closest('.numeric-multi');
var thisTable = $(this).closest('table.spaceGrid');
var numGridCell = $('.gridCell', thisTable).length;
var numCols = $('tr:eq(0) .gridCell', thisTable).length;
var numRows = numGridCell/numCols;

// Hide the answers list
$('.subquestion-list, .questions-list', thisQuestion).hide();

// Initial state
var xCoord = $('input.text:eq(0)', thisQuestion).val() - 1;
var yCoord = numRows - $('input.text:eq(1)', thisQuestion).val();
$('tr:eq('+yCoord+') .gridCell:eq('+xCoord+')', thisTable).addClass('checkedCell');

// Listener on the grid cells
$('.gridCell').click(function(){
var thisRow = $(this).closest('tr');

// Add class to checked cell
$('.checkedCell', thisQuestion).removeClass('checkedCell');
$(this).addClass('checkedCell');

// Find the cell coordinates
var reverseRowIndex = (numRows - $('tr', thisTable).index($(thisRow)));
var colIndex = $('.gridCell', thisRow).index($(this)) + 1;

// Load coordinates into inputs
$('input.text:eq(0)', thisQuestion).val(colIndex);
$('input.text:eq(1)', thisQuestion).val(reverseRowIndex);
});
});

});</syntaxhighlight><br /><br />
The script should automatically handle different grid sizes.

=Slider Highlighting=

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

You may want to highlight a slider after it has been moved/changed to allow respondents to easily see which slider subquestions have been answered.

[[File:Capture.PNG]]<br /><br />
#Add the following to the end of '''template.js''':<syntaxhighlight lang="javascript">
$('html').bind('slidecreate', function(event, ui) {
$('.slider_callout').each(function(i){
if($(this).text().length > 0) {
$(this).parents('li:eq(0)').addClass('changedSlider');
}
});
});

$(document).ready(function() {
$('.ui-slider-horizontal').bind('slidechange', function(event, ui) {
$(this).parents('li:eq(0)').addClass('changedSlider');
});
});
</syntaxhighlight><br /><br />
#Add something like the following to the end of '''template.css''' (these styles are for the default template and would need to be modified for other templates):<syntaxhighlight lang="css">
.numeric-multi .answer li {
border-bottom: 5px solid #FFFFFF;
}

.numeric-multi .answer li label {
background-color: #FFFFFF;
}

.numeric-multi .answer li div.multinum-slider {
margin: 1.5em 0.5em 0.2em 0;
padding-left: 0.5em;
}

.ui-slider-1 {
margin-bottom: 10px;
}

.changedSlider {
background-color: #99FFFF;
}
</syntaxhighlight>
<br /><br />

=Dynamic Slider Call-Out Styles=

''Tested with: 2.05, IE 9-11, Firefox, Chrome''

This is an example of how to insert a custom '''''slide()''''' function to control the appearance of the slider call-out as the slider is manipulated. In this example the call-out text colour changes as the slider is moved. Sample survey here - [[Media:Dynamic_slider_call_out.lss|dynamic call-out slider survey]].
<br /><br />
[[File:Dynamic_slider_call_out.png]]<br /><br />
Requirements:
*LimeSurvey 2.05 or newer
*A multiple-numeric question with slider enabled<br /><br />
# Create your multi-numeric question with the slider enabled<br /><br />
#Add the following to the source of the question
<br /><br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// Identify this question
var thisQuestion = $('#question{QID}');

// Slide function
$('.ui-slider', thisQuestion).on('slide', function( event, ui ) {
handleCallout($(this).closest('li.answer-item'), ui.value);
});

// Initial callout states
$('input.text', thisQuestion).each(function(i) {
handleCallout($(this).closest('li.answer-item'), $(this).val());
});

// Handle the callout style
function handleCallout(thisRow, sliderVal) {
if(sliderVal < 20) {
$('.slider_callout', thisRow).css('color', '#D90000');
}
else if(sliderVal < 40) {
$('.slider_callout', thisRow).css('color', '#D96D00');
}
else if(sliderVal < 60) {
$('.slider_callout', thisRow).css('color', '#D9D900');
}
else {
$('.slider_callout', thisRow).css('color', '#00B22D');
}
}

});
</script>
</syntaxhighlight>
<br /><br />

=Sliders in Array-Numbers or Array-Dual-Scale-Numbers=

This workaround will replace the dropdowns in '''''array-numbers''''' or '''''array-dual-scale-numbers''''' questions with sliders. The sliders will automatically have the same minimum, maximum and steps that you set in the advanced question settings.

==LimeSurvey Version 2.06==
[[File:custom_sliders_1.png]]<br /><br />
''Tested with: LimeSurvey version 2.06''<br /><br />
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your array-numbers or array-dual-scale-numbers question.
#Add the following to the source of the question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

insertSlider ({QID});

function insertSlider (qID) {

$('#question'+qID+' select').each(function(i, el){

// Hide the dropdown
$(el).hide();

var id = $(el).attr('id').replace(/#/g,'-');

// Some dropdown values
var currentVal = Number($('option:selected', el).val());
var firstVal = Number($('option[value!=""]:first', el).val());
var secondVal = Number($('option[value!=""]:first', el).next('option').val());
var lastVal = Number($('option[value!=""]:last', el).val());

// Insert a container for the slider
var container = $('<div class="customSliderWrapper"></div>').insertAfter(el);

// Initiate the slider
var slider = $('<div id="slider-'+id+'" class="customSlider"></div>').appendTo(container).slider({
min: firstVal,
max: lastVal,
range: 'min',
value: currentVal,
step: secondVal - firstVal,
slide: function( event, ui ) {
$(el).val(ui.value);
$('#callOut-'+id).text($(el).val());
}
});

// Insert a callout
var callout = $('<div id="callOut-'+id+'" class="slider_callout slider-callout"></div>').appendTo($('#slider-'+id+' .ui-slider-handle')).text($('option:selected', el).val());

// Set a value as soon as the slider handle is clicked
$('#slider-'+id+' .ui-slider-handle').mousedown(function() {
$(el).val(slider.slider('value'));
$('#callOut-'+id).text($(el).val());
});
});
}
});
</script></syntaxhighlight><br /><br />
#Add something like the following to the end of '''template.css''' (these styles are for the default template and may need to be modified for other templates):<syntaxhighlight lang="css">
.customSliderWrapper {
position: relative;
margin: 0 10px;
padding-top: 1.75em;
}
</syntaxhighlight>
<br /><br />
==LimeSurvey Version 2.6x==
[[File:Dropdown-sliders.png]]<br /><br />
''Tested with: LimeSurvey version 2.64.7 ''<br /><br />
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your array-numbers or array-dual-scale-numbers question.
#Add the following to the source of the question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

insertSlider ({QID});

function insertSlider (qID) {

// Identify this question
var thisQuestion = $('#question'+qID);
thisQuestion.addClass('with-dropdown-sliders');

// Loop through all array drop-downs
$('select.multiflexiselect', thisQuestion).each(function(i, el){
var thisCell = $(el).closest('td');

// Hide the dropdown
$(el).hide();

// Some dropdown values
var currentVal = $(el).val();
var firstVal = Number($('option[value!=""]:first', el).attr('value'));
var secondVal = Number($('option[value!=""]:eq(1)', el).attr('value'));
var lastVal = Number($('option[value!=""]:last', el).attr('value'));

// Insert an input for the slider
var thisInput = $('<input class="inserted-input" type="text" />').insertAfter(el);

// Initiate the slider
thisInput.val(currentVal).bootstrapSlider({
'min': firstVal,
'max': lastVal,
'step': secondVal - firstVal,
'value': Number(currentVal),
'tooltip': 'always'
});

// Listener on the slider
$(thisInput).on('slideStop', function () {
if($('.tooltip', thisCell).is(':hidden')) {
$('.tooltip', thisCell).show();
$('.tooltip', thisCell).css('margin-left', '-'+($('.tooltip', thisCell).width()/2)+'px');
}
$(el).val($(thisInput).val());
});

// Hide the slider call-out if no value selected yet
if(currentVal == '') {
$('.tooltip', thisCell).hide();
}
});
}
});
</script></syntaxhighlight><br /><br />
#Add something like the following to the end of '''template.css''' (these styles are for the default template and may need to be modified for other templates):<syntaxhighlight lang="css">
.with-dropdown-sliders .slider.slider-horizontal {
margin: 1.5em auto 1em auto;
width: 90%;
}

.with-dropdown-sliders .slider.slider-horizontal .slider-handle {
margin-top: -5px;
}
</syntaxhighlight><br />
Sample survey for version 2.6x: [[Media:Demo_Sliders_in_Array_Survey.zip|Demo_Sliders_in_Array_Survey.zip]]

=Vertical Sliders=

''Tested with: 1.92+, 2.00+, IE 9, Firefox 13, Chrome 19''

This workaround uses a custom jQuery plugin to apply vertical sliders to multiple-numeric questions. You can download a sample template here (with the plugin in template.js) - [[Media:default_vertical_sliders.zip|vertical slider template]] - and a sample survey here - [[Media:demo_vertical_sliders.lss|vertical slider survey]].

[[File:verticalsliders_1.jpg]]<br /><br />
# Create your multi-numeric question(s). Do NOT use any of the slider advanced settings.<br /><br />
#Add the following to the end of template.js. Replace "QQ" (line 5) with the question ID and adjust the options in the function call as desired. Repeat the call as many times as you need for more questions<syntaxhighlight lang="javascript">$(document).ready(function(){

// Call the vertical slider plugin with the question ID
// Edit options here as desired
$('#questionQQ').lsVerticalSlider({
minValue :0, // Minimum value (default 0)
maxValue :200, // Maximum value (default 100)
startValue :100, // Start value (default null)
step :10, // Slider increments (default 1)
height :100, // Height of slider in pixels (default 200)
recordStart :true, // Record the start value? (default no)
showMin :true, // Show minimum value? (default no)
showMax :true // Show maximum value? (default no)
});
});

// NO EDITING REQUIRED BELOW HERE
// A jQuery plugin to convert multiple-numeric questions to vertical sliders
(function( $ ){
$.fn.lsVerticalSlider = function(options) {

// The defaults, extended and modified with any passed in the function call
var opts = $.extend( {
minValue :0,
maxValue :100,
startValue :'',
step :1,
height :150,
recordStart :false,
showMin :false,
showMax :false
}, options);

return this.each(function() {

var $this = $(this);

// Some classes for the question and subquestions
$this.addClass('vertical-slider-question');
$('li:[id<div class="simplebox">="javatbd"]', $this).addClass('vertical-slider-subquestion');

// Loop through the subquestions
$('li:[id</div>="javatbd"]', $this).each(function(i){
var itemID = $(this).attr('id').replace(/javatbd/, '');

// Check for pre-existing answer
if($('#answer'+itemID).val() != '') {
opts.startValue = $('#answer'+itemID).val();
}

// Insert the slider elements
$('#answer'+itemID).after(
'<div class="vertical-slider-max-min" style="height:'+(opts.height+2)+'px;"> \
<div class="vertical-slider-max"></div> \
<div class="vertical-slider-min"></div> \
</div> \
<div id="vertical-slider-'+itemID+'" class="vertical-slider" style="height:'+opts.height+'px;"></div> \
<div class="vertical-slider-callout-wrapper" style="height:'+(opts.height+2)+'px;"> \
<div class="vertical-slider-callout" id="slider-callout-'+itemID+'"></div> \
</div>'
);

// Show min/max if option is set
if(opts.showMax) {
$('.vertical-slider-max', $this).text(opts.maxValue);
}

if(opts.showMin) {
$('.vertical-slider-min', $this).text(opts.minValue);
}

// Initiate the slider
$('#vertical-slider-'+itemID).slider({
orientation: 'vertical',
range: 'min',
min: opts.minValue,
max: opts.maxValue,
value: opts.startValue,
step: opts.step,
slide: function(event, ui) {
$('#answer'+itemID).val(ui.value);
$('#slider-callout-'+itemID).text(ui.value);
setTimeout(function() {
$('#slider-callout-'+itemID).css({ 'bottom':$('#vertical-slider-'+itemID+' .ui-slider-handle').css('bottom') }).show();
}, 10);
},
create: function(event, ui) {
// Initial values and positions
if($('#answer'+itemID).val() != '') { // Pre-existing answer
$('#slider-callout-'+itemID).text(opts.startValue);
}
else if(opts.recordStart) { // Record the start value (if option is set)
$('#answer'+itemID).val(opts.startValue);
$('#slider-callout-'+itemID).text(opts.startValue);
}
else {
$('#slider-callout-'+itemID).hide();
}
$('#slider-callout-'+itemID).css({ 'bottom':$('#vertical-slider-'+itemID+' .ui-slider-handle').css('bottom') });
}
});
});
});
};
})( jQuery );</syntaxhighlight><br /><br />
#Add the following to the end of template.css (these styles are for the default template):<syntaxhighlight lang="css">/* Vertical slider styles and overrides */
.vertical-slider-question p.tip {
display: none;
}

.vertical-slider-subquestion {
float: left;
margin: 0 3em 0 0 !important;
}

.vertical-slider-question label {
display: block;
padding: 0 0 0.75em 0 !important;
}

.vertical-slider-question span.input {
padding: 0.3em 0 0 0;
display: block;
}

.vertical-slider-question input.text {
display: none;
}

.vertical-slider {
float: left;
border-radius: 4px;
}

.vertical-slider-question .ui-slider-handle {
top: auto;
border-radius: 4px;
}

.vertical-slider-max-min,
.vertical-slider-callout-wrapper {
float: left;
position: relative;
}

.vertical-slider-callout-wrapper {
min-width: 3em;
}

.vertical-slider-max-min {
margin-right: 0.5em;
}

.vertical-slider-max,
.vertical-slider-min {
font-size: 0.8em;
color:#666666;
line-height: 1;
}

.vertical-slider-max {
margin-top: -0.5em;
}

.vertical-slider-min {
position: absolute;
right: 0;
bottom: 0;
margin-bottom: -0.5em;
}

.vertical-slider-callout {
position: absolute;
top: auto;
margin: 0 0 -0.6em 0.5em;
padding: 0.1em;
font-size: 0.9em;
color:#000000;
line-height: 1;
background: #F8F8FF;
border: 1px solid #D2E0F2;
border-radius: 4px;
}</syntaxhighlight>
<br /><br />

=Range Slider=

==LimeSurvey Version 2.5x==

This workaround uses a custom jQuery plugin to insert a jQuery UI range slider into a multi-numeric question and automatically populate that question's inputs with the range min and max values.

'''Download''': [[Media:Demo_Range_Slider_2.5x.zip|Sample Template and Survey.]]

[[File:Demo_Range_Slider_2.5x.png]]<br /><br />
The plugin handles:
*previous answers
*slider max/min
*range min start
*range max start
*range span min
*slider step
*record the start values
*show slider max and min<br /><br />
Requirements:
<ul><li>LimeSurvey 2.5x</li>
<li>A multiple-numeric question with two subquestions</li></ul><br /><br />
#Create your multi-numeric question. Do NOT use any of the slider advanced settings.
#Add the following to the end of template.js.<syntaxhighlight lang="javascript">// A jQuery plugin to display a range slider in LimeSurvey
// Author - Tony Partner - partnersurveys.com
(function( $ ){

$.fn.lsRangeSlider = function(options) {

// The defaults, extended and modified with any passed in the function call
var opts = $.extend( {
sliderMin :0, // Minimum slider value (default 0)
sliderMax :100, // Maximum slider value (default 100)
rangeStartMin :'', // Minimum range handle start value (default sliderMin)
rangeStartMax :'', // Maximum range handle start value (default sliderMax)
minRangeSpan :0, // Minimum allowed range span (default 0)
step :1, // Slider increments (default 1)
recordStart :false, // Record the start value? (default no)
showMin :false, // Show slider minimum value? (default no)
showMax :false // Show slider maximum value? (default no)
}, options);

return this.each(function() {

if($(this).hasClass('numeric-multi') && $('input.text', this).length == 2) {

// Define some vars
var thisQuestion = $(this);
var rangeMinInput = $('input.text.form-control:eq(0)', thisQuestion);
var rangeMaxInput = $('input.text.form-control:eq(1)', thisQuestion);
thisQuestion.addClass('range-slider-question');

// Check for pre-existing answer
if($(rangeMinInput).val() != '' && $(rangeMinInput).val() != '') {
opts.rangeStartMin = $(rangeMinInput).val();
opts.rangeStartMax = $(rangeMaxInput).val();
}
else {
if(opts.rangeStartMin == '') {
opts.rangeStartMin = opts.sliderMin;
}
if(opts.rangeStartMax == '') {
opts.rangeStartMax = opts.sliderMax;
}
}

// Insert the slider
var insertedEls = '<div class="col-xs-12 col-sm-12 withslider">\
<input class="inserted-slider" type="text" name="rangeSlider" />\
<div class="pull-left">\
<span class="help-block inserted-slider-min"></span>\
</div>\
<div class="pull-right">\
<span class="help-block inserted-slider-max"></span>\
</div>\
</div>';
$('input[type="text"].form-control:eq(0)', thisQuestion).closest('.subquestion-list').hide().before(insertedEls);

var sliderValues = [Number(opts.rangeStartMin), Number(opts.rangeStartMax)];

$('input.inserted-slider', thisQuestion).bootstrapSlider({
'min': Number(opts.sliderMin),
'max': Number(opts.sliderMax),
'step': Number(opts.step),
'range': true,
'value': sliderValues,
'tooltip': 'always'
});
if($(rangeMinInput).val() == '' && $(rangeMinInput).val() == '') {
$('.slider .tooltip', thisQuestion).hide();
}

// Listener on the range slider
$('input.inserted-slider', thisQuestion).on('slideStart', function(event, ui) {
});
$('input.inserted-slider', thisQuestion).on('slide slideStop', function(event, ui) {
var thisLowerVal = Number($.trim($(this).val().split(',')[0]));
var thisUpperVal = Number($.trim($(this).val().split(',')[1]));
if(opts.minRangeSpan > 0 && (thisUpperVal-thisLowerVal) < opts.minRangeSpan) {
$('input.inserted-slider', thisQuestion).bootstrapSlider('setValue', sliderValues);
}
else {
// Load the LS inputs
$(rangeMinInput).val(thisLowerVal);
$(rangeMaxInput).val(thisUpperVal);
// Fire Expression manager
checkconditions($(rangeMinInput).attr('value'), $(rangeMinInput).attr('name'), $(rangeMinInput).attr('type'));
checkconditions($(rangeMaxInput).attr('value'), $(rangeMaxInput).attr('name'), $(rangeMaxInput).attr('type'));
// Show the tooltip
$('.slider .tooltip', thisQuestion).show();
sliderValues = [thisLowerVal, thisUpperVal];
}
});

// Show min/max if option is set
if(opts.showMin) {
$('.inserted-slider-min', thisQuestion).text(opts.sliderMin);
}
if(opts.showMax) {
$('.inserted-slider-max', thisQuestion).text(opts.sliderMax);
}

// Handle recordStart
if(opts.recordStart) {
if($(rangeMinInput).val() == '' && $(rangeMinInput).val() == '') {
// Load the LS inputs
$(rangeMinInput).val(Number($.trim($('input.inserted-slider', thisQuestion).val().split(',')[0])));
$(rangeMaxInput).val(Number($.trim($('input.inserted-slider', thisQuestion).val().split(',')[1])));
// Fire Expression manager
checkconditions($(rangeMinInput).attr('value'), $(rangeMinInput).attr('name'), $(rangeMinInput).attr('type'));
checkconditions($(rangeMaxInput).attr('value'), $(rangeMaxInput).attr('name'), $(rangeMaxInput).attr('type'));
// Show the tooltip
$('.slider .tooltip', thisQuestion).show();
}
}
}
});

};
})( jQuery );</syntaxhighlight>
#Then, add something like this to the source of your question to apply the plugin with some custom option settings (I think the comments explain the options adequately)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').lsRangeSlider({
sliderMin :0, // Minimum slider value (default 0)
sliderMax :10, // Maximum slider value (default 100)
rangeStartMin :2, // Minimum range handle start value (default sliderMin)
rangeStartMax :8, // Maximum range handle start value (default sliderMax)
minRangeSpan :0, // Minimum allowed range span (default 0)
step :1, // Slider increments (default 1)
recordStart :true, // Record the start value? (default no)
showMin :true, // Show slider minimum value? (default no)
showMax :true // Show slider maximum value? (default no)
});
});
</script></syntaxhighlight>
#Or, to apply the plugin with the default option settings<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').lsRangeSlider();
});
</script></syntaxhighlight>
<br /><br />

=Reverse Slider=

{{Box|The reverse slider feature can be used in any (multiple) numerical input question type. For more details, please check the [[Question_type_-_Multiple_numerical_input#Slider|slider wiki subsection]].}}

=Sliders With Control Buttons=
== Version 2.05 ==

''Tested with: 2.05, IE 7-10, Firefox, Chrome''

This workaround uses a custom jQuery plugin to insert "up" and "down" buttons to control sliders. You can download a sample template here - [[Media:Demo_Slider_Buttons.zip|slider with buttons template]] - and a sample survey here - [[Media:Limesurvey_survey_button_slider.lss|button slider survey]].

[[File:Button_slider.jpg]]<br /><br />
The plugin allows the following options:
*Down Text: Text for the "down" button
*Up Text: Text for the "up" button
*Scrolling: Continuous slider movement if the left mouse button is held down
*Scroll Interval: Interval (in milliseconds) between slider movement when button is held down (do not make this too short or it will be difficult to stop the slider accurately)
*Value Prefix: Prefix for call-out
*Value Suffix: Suffix for call-out<br /><br />
Requirements:
*LimeSurvey 2.05 or newer
*A multiple-numeric question with slider enabled<br /><br />
# Create your multi-numeric question with the slider advanced settings.<br /><br />
#Add the following to the end of template.js.<syntaxhighlight lang="javascript">// A custom plugin to add control buttons to LimeSurvey sliders
// Author - Tony Partner - partnersurveys.com
(function( $ ){

$.fn.sliderButtons = function(options) {

// The defaults, extended and modified with any passed in the function call
var opts = $.extend( {
downText: '-', // Text for the "down" button
upText: '+', // Text for the "up" button
scrolling: true, // Continuous slider movement if left mouse button held down
scrollInterval: 150,// Interval (in ms) between slider movement when button is held down
valuePrefix: '', // Prefix for callout
valueSuffix: '' // Suffix for callout
}, options);

return this.each(function(i) {

var thisQuestion = $(this);

// Add some classes
$(thisQuestion).addClass('slider-button-question');

// Insert the buttons
$('li.question-item', thisQuestion).append('<div class="slider-button-wrapper">\
<button type="button" class="slider-button down">'+opts.downText+'</button>\
<button type="button" class="slider-button up">'+opts.upText+'</button>\
</div>');

// Initial button states
function handleButtonState(slider) {
var thisRow = $(slider).closest('li.question-item');
var thisSliderVal = $(slider).slider('option', 'value');
var thisSliderStep = $(slider).slider('option', 'step');
var thisSliderMin = $(slider).slider('option', 'min');
var thisSliderMax = $(slider).slider('option', 'max');
$('button.slider-button', thisRow).prop('disabled', false);
if ($(slider).slider('option', 'value') == thisSliderMin) {
$('button.slider-button.down', thisRow).prop('disabled', true);
}
if ($(slider).slider('option', 'value') == thisSliderMax) {
$('button.slider-button.up', thisRow).prop('disabled', true);
}
}
$('.multinum-slider', thisQuestion).each(function(i) {
handleButtonState(this);
if($(this).closest('li.question-item').find('input.text').val() != '') {
$('.slider-callout', this).text(opts.valuePrefix+$(this).closest('li.question-item').find('input.text').val()+opts.valueSuffix);
}
});

// Function to handle button actions
function handleButtons(thisButton) {
var thisRow = $(thisButton).closest('li.question-item');
var thisSlider = $('.multinum-slider', thisRow);
var thisSliderStep = $(thisSlider).slider('option', 'step');
var stepDecimals = 0;
if(thisSliderStep.toString().indexOf('.') >= 0) {
stepDecimals = thisSliderStep.toString().split('.')[1].length;
}
var thisSliderVal = Number($(thisSlider).slider('option', 'value')).toFixed(stepDecimals);
var thisSliderMin = $(thisSlider).slider('option', 'min');
var thisSliderMax = $(thisSlider).slider('option', 'max');
if ($(thisButton).hasClass('down') && thisSliderVal > thisSliderMin) {
$(thisSlider).slider('option', 'value', Number(thisSliderVal)-Number(thisSliderStep));
}
if ($(thisButton).hasClass('up') && thisSliderVal < thisSliderMax) {
$(thisSlider).slider('option', 'value', Number(thisSliderVal)+Number(thisSliderStep));
}
var newValue = $(thisSlider).slider('option', 'value').toFixed(stepDecimals).replace(/\./, LSvar.sLEMradix);
$('input.text', thisRow).val(newValue).triggerHandler('keyup');
$('.slider-callout', thisSlider).text(opts.valuePrefix+newValue+opts.valueSuffix);
}

// Scrolling
if(opts.scrolling == true) {

var sliderTimeout;
var clicker = $('button.slider-button', thisQuestion);
var count = 0;

$('button.slider-button', thisQuestion).mousedown(function(){
var thisButton = $(this);
sliderTimeout = setInterval(function(){
handleButtons(thisButton);
}, opts.scrollInterval);
return false;
});

$(document).mouseup(function(){
clearInterval(sliderTimeout);
return false;
});
$('button.slider-button', thisQuestion).mouseout(function(){
handleButtonState($(this).closest('li.question-item').find('.multinum-slider'));
});
}

// Listener on the buttons
$('button.slider-button', thisQuestion).click(function(e) {
handleButtons(this) ;
handleButtonState($(this).closest('li.question-item').find('.multinum-slider'));
});

// Listener on sliders
$('.multinum-slider', thisQuestion).on('slidestop', function( event, ui ) {
handleButtonState(this);
});

// Listener on reset buttons
$('.slider-reset', thisQuestion).on( "click", function( event, ui ) {
var thisReset = $(this);
setTimeout(function() {
handleButtonState($(thisReset).closest('li.question-item').find('.multinum-slider'));
}, 150);
});
});
};
})( jQuery );
</syntaxhighlight><br /><br />
#Add the following to the end of template.css (these styles are for the default template but easily modified for others):<syntaxhighlight lang="css">.slider-button-question label.slider-label {
margin-top: 0;
padding: 40px 1em 0 0;
*padding: 25px 1em 0 0;
}

.slider-button-question div.multinum-slider {
margin-top: 45px;
}

.slider-button-question .ui-slider-horizontal .ui-slider-handle {
width: 18px;
margin-left: -9px;
top: -4px;
}

.slider-button-question .slider_callout {
margin-left: -41px;
text-align: center;
width: 100px;
}

.slider-button-question .slider-button-wrapper {
float: left;
margin: 40px 0 0 25px;
}

.slider-button-question .slider-button-wrapper button {
padding: 0 10px;
margin: 0 0 0 5px;
}

.slider-button-question .slider-button-wrapper button:disabled {
opacity:0.65;
filter:alpha(opacity=65);
cursor: default;
}

.slider-button-question .slider-reset {
margin-top: 42px;
}
</syntaxhighlight><br /><br />
#Then, add something like this to the source of your question to apply the plugin with some custom option settings (I think the comments explain the options adequately)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#question{QID}').sliderButtons({
downText: 'Down', // Text for the "down" button
upText: 'Up', // Text for the "up" button
scrolling: true, // Continuous slider movement if left mouse button held down
scrollInterval: 250, // Interval (in ms) between slider movement when button is held down
valueSuffix: "%" // Suffix for callout
});
});
</script>
</syntaxhighlight><br /><br />
#Or, simply to apply the plugin with the default option settings<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#question{QID}').sliderButtons();
});
</script>
</syntaxhighlight>

== Version 3.x ==

A custom question theme for Slider Control Buttons for LimeSurvey 3.x can be found here - https://github.com/tpartner/LimeSurvey-Slider-Controls-3x

Workarounds: Question design, layout and templating

2023-05-11T17:28:32Z

Tpartner: /* Star Rating System */

This section more or less deals with styling your survey, adjusting the layout and setting up special question types. You can find '''similar information''' at these pages:
* [[The template editor]]
* [[Workarounds: Manipulating a survey at runtime using Javascript]]
* [[Workarounds: Survey behaviour]].

<div class="simplebox"><center><br />'''Please keep in mind that these workarounds are not official LimeSurvey extensions - they are solutions that users have created for themselves. <span style='color:#EE0000'>Therefore LimeSurvey can't offer guarantees or support for these solutions.</span><br />If you have questions, please contact the users that, thankfully, shared their solutions with the community.'''<br /><br /></center></div>

__TOC__

=Different progress indicator=

==Version 1.87 and later:==

Add the following to the end of template.js. It will find the progress value and insert it into the element following the progress bar.

It should be pointed out that I had to introduce a delay in firing the function because the progress value is not calculated until after template.js is called. The delay is set at 1/10 of a second but you may be able to reduce that.

<syntaxhighlight lang="php">

// Display progress value

function setProgValue() {

var progress = $('#progressbar').attr('aria-valuenow');

$('#progress-post').text(progress+'%').show();

}

$(document).ready(function(){

$('#progress-post').hide();

setTimeout('setProgValue()',100);

});

</syntaxhighlight>

If you want to hide the "0%" before the progress bar, add the following to the end of template.css:

<syntaxhighlight lang="php">
#progress-pre {

display: none;

}

</syntaxhighlight>

=Delete unwanted gaps in question title=

''Tested with: ''

When copying data (questions, answers, ...) from MS Word or other applications into the editor there might occur some gaps in the question title.

There are two solutions to this:
# Use popup mode and manually delete unwanting extra html tags (requires html knowledge).
# Disable paste word feature: Tweak your limesurvey-config.js file in limesurvey/admin/scripts/fckeditor.26 and set the following option to true:

<syntaxhighlight lang="php">FCKConfig.ForcePasteAsPlainText = true ;</syntaxhighlight>

After that clear you browser cache and try again.

=How to change the <font-size> tags using CSS=

''This workaround was deleted because it is outdated. Such changes can be done by [[The template editor#Styling questions with CSS|adjusting template.css]] of your template.

=Question type variation: Scale with bars (one and two sided)=

''Tested with: ''

Some methodogical issues to think about: Very often a common scale as 1 to 5 or -2 to +2 fits all needs, as the shown subject is clearly defined as positive or negative. As soon as you would reduce the influence from the question and scale on the respondent, you will need something neutral to determine tendences, emphases and so on.

So I put up a new variation of the one and two sided array question:

ttp://www.limesurvey.org/images/fbfiles/images/example_bar_scale.jpg

In my example the left side reads "strategical planning" and the right side "operative business". None of these are purely negative or positive, so the bars only show in which direction the balancing point moves.

To realize a question as shown above just do as follows:

Set up as many bars as you will need (in my example there are four different bars in total) with a graphic program like PAINT .NET, GIMP or similar ones (yes, you may also use commercial software like Photoshop). To prevent the bars from looking twitchy, designate the size in advance. I did one bar 60x15 px, one 45x15px, one 30x15px and at last 15x15px. Save them as PNG, JPG or GIF.
# Create a new label set within Lime. Call it whatever you like.
# Enter a code number at first, then press the pencil symbol to enter the editor.
#Press the "Insert / edit image" button and upload the bar you want to insert with the FCK upload tool. Then choose the uploaded picture, save and leave the FCK editor.
#The row in the lable editor now shows an <img>-tag which refers to your bar picture.
#Repeat the above described steps as often as needed to build up your bar scale.

=Doing a Likert Scale=

''Tested with: ''

A Likert Scale is a special type of the Semantic Differential question where several item shall be rated on different scales, each marked at the beginning and at the end with opposite statements.

To do this in LimeSurvey just follow these steps:
#Create a label set with values from 0 to 7 (for the classic Likert Scale - feel free to choose other ranges).
#Create a new question and choose Array (Flexible Labels) as question type.
#Assign the Likert Scale label set to this question.
#Enter your answers as follows:

<syntaxhighlight lang="php"><DIV style="white-space: nowrap;">ITEM statement1|statement2</div></syntaxhighlight>

The white-space style is to avoid line breaks which would ruin the whole scale. feel free to insert non-breakable spaces between the ITEM and statement1 to define the margin between these to strings.

=Alternate background colour of questions=

''Tested with: 1.85+ (7191)''

To alternate the background colour of questions, open the ''template.css'' of your template with the Template Editor or a text editor and modify the ''Question styles'' section to include the following style.

<syntaxhighlight lang="php">

div#question2 td.questiontext,

div#question4 td.questiontext,

div#question6 td.questiontext {

background-color: #E0EBF8;

}

</syntaxhighlight>

Be sure to apply the style to all of the questions you would like modified using their question IDs (''question2, question4, question6'' in this case). Question IDs are displayed when creating or editing questions - see below:

[[File:qid_1_493x173.gif]]

Here the question ID is #question80 .

=Embedding audio in questions=

''Tested with: 1.85+ (7191), IE 7, FireFox 3''

Audio clips can be embedded in most question text or answer text. In this example, using the default template, I've embedded clips into the answers of an '''''Array (Yes/No/Uncertain)''''' question to ask respondents how they feel about some sounds. The resulting question will look like this.

[[File:audioTest_595x202.gif]]

It's accomplished by placing the following code in each of the answers.

<syntaxhighlight lang="php">

<embed height="20" width="128" autostart="false" controls="console"

loop="true" volume="50" src="{TEMPLATEURL}audio_1.mp3"></embed>

</syntaxhighlight>

Some notes about the code:
*The ''audio_1.mp3'' part will be different for each answer (it's the audio file name).
*In this case the audio files are residing in the template folder being used for this survey (that's where ''{TEMPLATEURL}'' points to) but they can be placed anywhere if you use an absolute URL in the ''src'' parameter - something like ''src="http://mysite.com/audio/audio_1.mp3"''
*If the audio file doesn't exist where the ''src'' parameter indicates, the player will not appear.
*You'll need to insert the code into the answers using the source screen - click on "Edit answers", click the pencil beside the text box, click "Source" in the pop-up, enter the code and save it with the little diskette icon.
*You may need to turn off the XSS filter - see the documentation for [http://docs.limesurvey.org/tiki-index.php?page=Global+settings&structure;=English+Instructions+for+LimeSurvey#Security Global settings].

Although the above example places the audio in the answer text of the question, the same principles can be used to place it in the question text itself. Something like this perhaps.

[[File:audioTest_595x154.gif]]

=Hiding inputs of a "Multiple options with comments" question=

There may be times when you want to hide some of the input boxes of a '''''Multiple choice question type with comments''''' question as in the image below:

[[File:hidden_inputs_541x168.gif]]

This can be accomplished with CSS (see [[The template editor#Styling questions with CSS|Styling questions in LimeSurvey 1.8]]). For each input that you want to hide, add the following style to your template.css file:

<syntaxhighlight lang="css">
#answer11111X22X33Acomment {
display: none;
}
</syntaxhighlight>

Where 11111 is your survey ID, 22 is your group ID, 33 is your question ID and A is the answer code.

Note that you will still see columns for the hidden inputs in your data but they will be empty.

=Multiple question types in array=

''Tested with: 1.90 - 1.92+, IE 7/8/9, Firefox 13, Safari 5, Chrome 10''

[[Media:limesurvey_survey_62584.lss|Download the sample survey]]

This workaround allows you to present multiple question types in what appears to be an array - as depicted in the image below and [http://www.partnersinc.biz/surveys//index.php?sid=62584&newtest=Y&lang=en demonstrated here] (download the sample survey - [[Media:limesurvey_survey_62584.lss|limesurvey_survey_62584.lss]]). This example uses the default template but should be adaptable to any template using divisions for question containers.

[[File:inline_questions_700x228.png]]

Basically what we do is take groups of questions (5 in this case), wrap them in a division and make them line up nicely horizontally and vertically. The width of the survey is also fixed to prevent wrapping issues. We do this with a JavaScript/jQuery function that inserts the necessary wrappers and then modifies styles so everything behaves properly. The top row is 5 boilerplate questions with the "column headers" as question text (the first just has a blank space). The following rows are a boilerplate with the "row headers" followed by 4 assorted questions.

It should be noted that using conditions on these questions may result in unexpected behavior. If a question is hidden by conditions, the question(s) to the right of it will move over to take its place.

Implementation is as follows:
#Create your questions keeping in mind how they will lay out when grouped into rows (in this example - boilerplate, yes/no, short text, numeric, dropdown, and repeat).
#In the source of the first boilerplate question add the function below (see [http://manual.limesurvey.org/wiki/Workarounds:_Manipulating_a_survey_at_runtime_using_Javascript#How_to_use_Script_.28eg._JavaScript_etc..29_in_LimeSurvey.3F How to use script]).
#Modify the number of rows, number of columns and the start placement in the function call (line 6) as required (the example uses 4 rows and 5 columns and the "array" starts with the third question on the page).

The code may look intimidating at first but it's actually fairly simple. I've laid it out as sequentially as possible and purposely used few shortcuts and many comments to make it easier to follow.

Notes:
*If you use question types other than boilerplate, short text, list dropdown, numeric or yes-no, you'll need to add to the last section of code, where it hides the question text and formats the inputs for display this way.
*Any extra questions on the page should follow this grid of questions, not precede them.
* If you use boilerplate as question type you should add after:
<syntaxhighlight lang="javascript">
// Hide the question text elements in non-boilerplate questions
$('div.questionCell td.questiontext').parent().hide();
</syntaxhighlight>
the following 2 lines
<syntaxhighlight lang="javascript">
//repair boilerplate questioncells
$('div.boilerplate td.questiontext').parent().show();
</syntaxhighlight>

Javascript code:
<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {
// Call the "sideBySide" function with number of rows, columns and start position
sideBySide(4, 5, 3);
});

function sideBySide(rows, columns, startQuestion) {

/*********** Display multiple questions side by side ***********/

if ($('div.qRow1').length == 0) {

var rowNum = 0;
var colNum = 1;
var rowList = new Array();

//////// Add question classes for later use ////////

// Loop through all questions and add row and column specific classes
$('div[id^="question"]').each(function(i) {
if(i >= (startQuestion-1) && rowNum < rows) { // This IF condition only needed if there are questions before or following the "inline" questions
$(this).addClass('qRow'+rowNum+'').addClass('qCol'+colNum+'').addClass('inlineQuestion');
if(rowNum == 0 && colNum > 1) {
$(this).addClass('columnLabel');
}
if(rowNum > 0 && colNum == 1) {
$(this).addClass('rowLabel');
}
else if(rowNum > 0 && colNum > 1) {
$(this).addClass('questionCell');
}
if(colNum == columns) {
rowList.push('qRow'+rowNum+'');
rowNum++;
colNum = 1;
}
else {
colNum++;
}
}
else {
$(this).addClass('normalQuestion');
}
});

//////// Survey layout manipulation ////////

// Fix the width of the survey
$('table.outerframe').css({
'width': '900px'
});

// Wrap each "row" in a wrapper div
$(rowList).each(function(i) {
$('.'+this+'').wrapAll('<div id="inlineWrapper'+i+'" class="inlineRow" />');
});

// Style the wrapper divs
$('.inlineRow').css({
'width': '850px',
'margin': '0 auto 0 auto',
'clear': 'both'
});

$( '.inlineRow:first' ).css({
'margin-top': '10px'
});

// Get all the questions to sit politely side by side
$( '.inlineQuestion' ).css({
'float': 'left',
'height':'41px',
'overflow':'hidden',
'margin-bottom': '-8px'
});
$( '.inlineQuestion .questionhelp' ).hide();
$( '.inlineQuestion .survey-question-help' ).parent().hide();

// A little space under the last row
$( '.inlineRow:last .inlineQuestion' ).css({
'margin-bottom': '10px'
});

// Any questions not displayed inline (this is only needed if there are questions following the "inline" questions)
$( '.normalQuestion' ).css({
'clear': 'both'
});

//////// Column manipulation ////////

// Set the column widths - can be set individually if necessary
// Must add up to less than 100%
$( '.qCol1' ).css({
'width': '12%'
});

$( '.qCol2, .qCol3, .qCol4, .qCol5' ).css({
'width': '22%'
});

//////// Question manipulation ////////

// Hide the answer element in boilerplate questions
$( 'div.boilerplate td.answer' ).parent().hide();

// Hide the question text elements in non-boilerplate questions
$('div.questionCell td.questiontext').parent().hide();

// Push the question tables to 100%
$( 'div.inlineRow table' ).css({
'width': '100%'
});

// Get everything to line up nicely vertically
$( '.inlineQuestion td.questiontext, .inlineQuestion td.answer p' ).css({
'text-align': 'center'
});

// Adjust cell heights so everything lines up nicely horizontally
$( '.inlineQuestion td.answer, .inlineQuestion td.questiontext' ).css({
'height':'35px',
'overflow':'hidden',
'padding':'0.5em'
});
$( '#inlineWrapper0 .inlineQuestion' ).css({ 'height':'50px' });
$( '#inlineWrapper0 td.questiontext' ).css({
'height':'50px'
});

// Yes-no question styles
$( 'div.yes-no ul' ).css({
'text-align': 'center',
'font-size': '90%',
'margin': '0',
'padding-bottom': '5px'
});
$( 'div.yes-no li' ).css({
'padding-right': '1.5em'
});
$( 'div.yes-no td.answer' ).css({
'padding-bottom': '0'
});

// Short-text question styles
$( 'div.text-short input' ).css({
'width': '125px',
'margin-left': '0'
});

// Numeric question styles
$( 'div.numeric input' ).css({
'width': '125px',
'margin-left': '0'
});
$( 'div.numeric p.tip' ).css({
'display': 'none'
});

// Get rid of the margins around select boxes
$( 'p.question' ).css({ 'margin':'0' });
}
}
</script>
</syntaxhighlight>
<br /><br />

=Star Rating System=

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

This workaround uses the [http://www.fyneworks.com/jquery/star-rating/ jQuery Star Rating Plugin] to display a series of stars that are used to generate a rating value. This value is then passed to either a hidden numeric input question or a hidden list radio question. Both methods are outlined below - use one or both depending on whether you want to use [Assessments|assessments].

The plugin uses a series of radio inputs to generate the stars (more about these below). It allows the use of whole or partial stars as shown in the image below.

[[File:star_rating_700x324.png]]

==Star Rating System Using Numeric Input Question==

Use this method if you would like your rating data to be collected as a numeric value and don't want to use [[Assessments|LimeSurvey assessments]] - it's a little easier to implement. There is a demo [http://www.partnersinc.biz/surveys//index.php?sid=47586&newtest=Y&lang=en here] (first question).

'''Implementation is as follows:'''
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])
#[http://www.fyneworks.com/jquery/star-rating/ Download the plugin] and place the following included files in your template folder:
##jquery.MetaData.js
##jquery.rating.css
##jquery.rating.js
##delete.gif
##star.gif
#In the <head> section of your startpage.pstpl, add the following code to link to the files.

<syntaxhighlight lang="php">

<script type="text/javascript" src="{TEMPLATEURL}jquery.rating.js" charset="utf-8"></script>

<script type="text/javascript" src="{TEMPLATEURL}jquery.MetaData.js" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}jquery.rating.css" />

</syntaxhighlight>

5. Create a numeric input question and then in the source of the question add as many radio inputs as star segments. For example, if you would like 5 stars, each with half-segments (as in the demo Q1), you would need 10 radio inputs and that would give rating values from 1-10.

Don't confuse these inputs with the actual question, they are just for the plugin's use.

At this point your question source code should look something like below. Make sure that all inputs have the same name. Each input must have the same title as value and these must be sequential. Don't worry about how all of this looks in the WSYSWYG editor - the plugin is going to hide these inputs and replace them with stars.

<syntaxhighlight lang="php">

Q1 - Some question text here.<br /><br />

<div id="starContainer">

<input type="radio" class="star { split:2 }" title="1" value="1" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="2" value="2" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="3" value="3" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="4" value="4" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="5" value="5" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="6" value="6" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="7" value="7" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="8" value="8" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="9" value="9" name="q1Rate" />

<input type="radio" class="star { split:2 }" title="10" value="10" name="q1Rate" />

</div>

</syntaxhighlight>

6. A note on split stars. The stars in the above example are split in half by the ''{ split:2 }'' metadata. So if you don't want split stars, your inputs would look like:

'''<input type="radio" class="star" title="1" value="1" name="q1Rate" />'''

And stars split into third-segments would look like:

'''<input type="radio" class="star { split:3 }" title="1" value="1" name="q1Rate" />'''

7. Finally, in the source of the question add the following function after your inputs. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]])

Some notes on the code:
*Replace "SSSSS", "GG", "QQ" in the function call at the end with the survey ID, group ID and question ID respectively.
*The code will hide the numeric input and pass the rating values into it as they are changed. If the rating is canceled the numeric input is nullified. If a respondent navigates away from the page then returns the code "remembers" the previous rating and displays the stars accordingly.
*If you want to apply it to more numeric questions on the same page simply add more calls with the appropriate IDs. (eg. handleRatingNumeric(11111, 22, 1); handleRatingNumeric(11111, 22, 2); ...) .

Code:

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

function handleRatingNumeric (sID, gID, qID) {

// Hide the numeric input

$('#question' + qID + ' td.answer').parent().hide();

// Get a previous rating (if any) and use it to initialize the star display

var rating = $('#answer' + sID + 'X' + gID + 'X' + qID + '').val();

if ( rating != '' ) {

$('#question' + qID + ' input.star').rating('select', rating);

}

// Listener on the star rating cancel element

$('#question' + qID + ' div.rating-cancel').click(function(event) {

// Nullify the rating if the Cancel element is clicked

rating = '';

$('#answer' + sID + 'X' + gID + 'X' + qID + '').val(rating);

});

// Listener on the star rating elements

$('#question' + qID + ' div.star-rating').click(function(event) {

// Find the value of the highest clicked star and pass it into the text input

$('#question' + qID + ' div.star-rating-on').each(function(i) {

rating = $(this).children('a').html( );

});

$('#answer' + sID + 'X' + gID + 'X' + qID + '').val(rating);

});

}

// Call the function for the numeric question

handleRatingNumeric (SSSSS, GG, QQ);

});

</script>

</syntaxhighlight>

==Star Rating System Using List (Radio) Question==

Use this method if you would like to use [[Assessments|assessments]]. There is a demo [http://www.partnersinc.biz/surveys//index.php?sid=47586&newtest=Y&lang=en here] (second question).

'''Implementation is as follows:'''

1. Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])

2. Set up the template to use custom onload functions. (See the [[Workarounds: Manipulating a survey at runtime using Javascript#Custom onload function|workaround here]])

3. [http://www.fyneworks.com/jquery/star-rating/ Download the plugin] and place the following included files in your template folder:
*jquery.MetaData.js
*jquery.rating.css
*jquery.rating.js
*delete.gif
*star.gif

4. In the <head> section of your startpage.pstpl, add the following code to link to the files.

<syntaxhighlight lang="php">

<script type="text/javascript" src="{TEMPLATEURL}jquery.rating.js" charset="utf-8"></script>

<script type="text/javascript" src="{TEMPLATEURL}jquery.MetaData.js" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}jquery.rating.css" />

</syntaxhighlight>

5. Create a list (radio) question with the same amount of sequentially numbered answers as star ratings. For example, if you want 5 whole-stars, you would create 5 answers, as in the image below, and this would give you ratings from 1-5. Note that the "Codes" and "Answers" must be sequential numbers.

[[File:star_rating_700x156_v2.png]]

6. In the list (radio) question, set the [[Advanced question settings|hide_tip]] question attribute to 1

7. In the source of the question add as many radio inputs as star segments. So 5 whole-stars (as in the demo Q2), would need 5 radio inputs.

Don't confuse these inputs with the actual question, they are just for the plugin's use.

At this point your question source code should look something like below. Make sure that all inputs have the same name. Each input must have the same title as value and these must be sequential. Don't worry about how all of this looks in the WSYSWYG editor - the plugin is going to hide these inputs and replace them with stars.

<syntaxhighlight lang="php">

Q2 - Some question text here.<br /><br />

<div id="starContainer">

<input type="radio" class="star" title="1" value="1" name="q2Rate" />

<input type="radio" class="star" title="2" value="2" name="q2Rate" />

<input type="radio" class="star" title="3" value="3" name="q2Rate" />

<input type="radio" class="star" title="4" value="4" name="q2Rate" />

<input type="radio" class="star" title="5" value="5" name="q2Rate" />

</div>

</syntaxhighlight>

8. A note on split stars. The stars in the above example are whole-stars. If you want them split you need to add metadata to the class - something like ''{ split:2 }''. So if you want half-stars your inputs would look like:

'''<input type="radio" class="star { split:2 }" title="1" value="1" name="q1Rate" />'''

And stars split into third-segments would look like:

'''<input type="radio" class="star { split:3 }" title="1" value="1" name="q1Rate" />'''

9. Finally, in the source of the question add the following function after your inputs. (See [http://docs.limesurvey.org/tiki-index.php?page=Workarounds&structure;=English+Instructions+for+LimeSurvey#How_to_use_Script_eg._JavaScript_etc._ How to use script here])

Some notes on the code:
*Replace "SSSSS", "GG", "QQ" in the function call at the end with the survey ID, group ID and question ID respectively.
*The code will hide the question radio buttons and toggle them as the rating values are changed. If the rating is canceled all question inputs are unchecked. If a respondent navigates away from the page then returns the code "remembers" the previous rating and displays the stars accordingly.
*If you want to apply it to more numeric questions on the same page simply add more calls with the appropriate IDs. (eg. handleRatingRadio(11111, 22, 1); handleRatingRadio(11111, 22, 2); ...) .

Onload code:

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

function handleRatingRadio (sID, gID, qID) {

// Hide the radio input

$('#question' + qID + ' td.answer').parent().hide();

// Get a previous rating (if any) and use it to initialize the star display

var rating = $('#question' + qID + ' input.radio[checked=true]').attr('value');

//if ( rating != '' ) {

if ( rating ) {

$('#question' + qID + ' input.star').rating('select', rating);

}

// Listener on the star rating cancel element

$('#question' + qID + ' div.rating-cancel').click(function(event) {

// Nullify the rating if the Cancel element is clicked

rating = '';

$('#question' + qID + ' input.radio').attr('checked', false);

});

// Listener on the star rating elements

$('#question' + qID + ' div.star-rating').click(function(event) {

// Find the value of the highest clicked star and pass it into the text input

$('#question' + qID + ' div.star-rating-on').each(function(i) {

rating = $(this).children('a').html( );

});

$('#question' + qID + ' input.radio[value=' + rating + ']').attr('checked', true);

});

}

// Call the function for the radio question

handleRatingRadio (SSSSS, GG, QQ);

});

</script></syntaxhighlight>

=Variable column widths in array=

''Tested with: 1.85+ (7557), IE 6/7, Firefox 3.0, Safari 3.2''

This workaround allows you to define all column widths of an array question - as shown in the image below and [http://www.partnersinc.biz/surveys//index.php?sid=26842&newtest=Y&lang=en demonstrated here]. This example uses the default template shipped with 7557 but should be adaptable to any template.

[[File:array_widths_701x226.gif]]

We use a function to remove all of the widths imposed by the core code and then insert our own.

'''Implementation is as follows:'''
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions (see [http://docs.limesurvey.org/tiki-index.php?page=Optional+settings&structure;=English+Instructions+for+LimeSurvey#Filtering_dangerous_HTML_tags_in_survey_objects documentation here]).
#Create the array question.
#In the source of the array question add the following script (see [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]]).
#Replace all instances of QQ with the question ID.
#In the third section of code, adjust the widths and add/remove columns as necessary. This example is for an array with a question text column followed by 3 answer columns as shown above.
#In the final section adjust the question text alignment to your liking

Onload code

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Get rid of all the widths that the API imposes

$( 'div#questionQQ table.question col' ).attr('width', '');

$( 'div#questionQQ table.question thead td' ).attr('width', '');

// Define a width for the question table so we can do so for its children

// NOTE: Keep this to 95% or less so IE will behave

$( 'div#questionQQ table.question' ).attr('width', '95%');

// Define the column widths

// Add or remove columns and adjust widths as necessary but widths should add up to 100%

// NOTE: Columns must be sequentially numbered starting at 0 - eg, td:eq(0), td:eq(1), td:eq(2).....

$( 'div#questionQQ table.question tbody th:eq(0)' ).css({ 'width':'10%' }); // Answer text column

$( 'div#questionQQ table.question tbody td:eq(0)' ).css({ 'width':'50%' }); // First answer column

$( 'div#questionQQ table.question tbody td:eq(1)' ).css({ 'width':'20%' }); // Second answer column

$( 'div#questionQQ table.question tbody td:eq(2)' ).css({ 'width':'20%' }); // Third answer column

// Push the text input widths to 95% of their parent containers

$( 'div#questionQQ table.question input[type="text"]' ).css({ 'width':'95%' });

// Align the answer text - feel free to experiment

$( 'div#questionQQ table.question tbody th' ).css({'text-align':'center'});

});

</script></syntaxhighlight>

=Use images for radio buttons and checkboxes=

''Tested with: LimeSurvey 1.92/2.0, using IE 9, FireFox 13, Chrome 16, Safari 5''

This workaround uses an adaptation of the jQuery imagetick.js plugin to replace the default radio buttons and checkboxes with images as pictured below:

[[File:images.png]]

This adaptation will work in the following question types:
*Array
*Array by column
*Array dual scale
*Array (5 point choice)
*Array (10 point choice)
*Array (Increase-Same-Decrease)
*Array (Yes-No-Uncertain)
*Gender
*Yes-No
*Multiple choice
*Multiple choice with comments
*5 point choice
*List (Radio)
*List with comment

==LimeSurvey 2.0 and later implementation==

Follow the instructions above with these changes:
#Download [[Media:Imagetick_lime_v2.1.zip|this modified version of the plugin for 2.0 and up]] instead of the one mentioned above and add all contained files to your template directory.
#Add these lines to the <head> element in your startpage.pstpl instead of the one above:<syntaxhighlight lang="php"><script type="text/javascript" src="{TEMPLATEURL}imagetick_lime_2.js"></script>

<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}imagetick_lime_2.css" /></syntaxhighlight>

Thanks to Jordan Boesch for the original plugin.

=Changing the position and layout of an individual question using "question code"=

''Tested with: 1.87+ (6536)''

To use this very flexible workaround you first have to apply a minor change to the question.pstpl of the used template.

<syntaxhighlight lang="php">

<div class="survey-question">

<div class="survey-question-text">

</syntaxhighlight>

needs to be changed to

<syntaxhighlight lang="php">

<div class="survey-question" id="{QUESTION_CODE}">

<div class="survey-question-text" id="{QUESTION_CODE}" >

</syntaxhighlight>

this change won't change anything in the layout and can be left in the template even if you don't need this workaround. It's just a means to have a handle to actually change individual questions.

You can then use a code such as the following in the question text to make question specific format changes. "SAMPLE" needs to be replaced with the concerning question code and javascript has to be allowed ([[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|older versions of limesurvey]], under global settings for newer versions).

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

document.getElementById('SAMPLE').style.borderTop= "0px";

document.getElementById('SAMPLE').style.marginTop= "-62px";

document.getElementById('SAMPLE').style.marginLeft= "30px";

</script>

</syntaxhighlight>

This sample code will hide the border at the top of the question, will move the whole question up by 62px and to the right by 30px. Using this workaround you can change a whole a lot of things concerning format and positions of a specific question without changing all the questions. A (German) list of all the allowed options can be found [http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften here].

=Create MaxDiff question type=
==Version 2.06==

''Tested with: LimeSurvey version 2.06''

This workaround uses JavaScript to convert an '''''Array (flexible labels) by column''''' question into a [http://en.wikipedia.org/wiki/MaxDiff MaxDiff] question type.
<br /><br />
[[File:max_diff_596x253.gif]]
<br /><br />
Implementation is as follows.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create an '''''Array (flexible labels) by column''''' question with 2 "answers" - these will be the left and right columns.
#Assign a label set to the question - these will be the labels in the center column.
#Set the second parameter of the function call to true for randomized rows.
#Adjust the styles in lines 21-24 as required.
<br />
The script moves the question columns into the MaxDiff configuration and disables the opposing radio element when a selection is made.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

// Call the maxDiff() function
// Set the second parameter to true for randomized rows
maxDiff({QID}, false);
});

function maxDiff(qID, randomize) {

// Random number between 1 and 2
// Math.floor(Math.random() * (max - min + 1)) + min;
var randomNum = Math.floor(Math.random() * ((2-1)+1) + 1);

// Move the columns
$('#question'+qID+' table.subquestions-list col:eq(1)').prependTo('colgroup.col-responses');
$('#question'+qID+' table.subquestions-list thead tr:eq(0) th:eq(0)').prependTo('#question'+qID+' table.question thead tr:eq(0)');
$('#question'+qID+' table.subquestions-list tbody tr').each(function(i){
$('td.answer-item:eq(0)', this).prependTo(this);
});
$('#question'+qID+' table.subquestions-list tbody tr').each(function(i){
$('td.answer-item:eq(0)', this).prependTo(this);
});

// Random rows
if(randomize) {
var rowsArr = [];
$('#question'+qID+' table.subquestions-list tbody tr').each(function(i){
$(this).attr('data-index', i);
rowsArr.push(i);
});
shuffleArray(rowsArr);
$(rowsArr).each(function(i){
$('#question'+qID+' table.subquestions-list tbody').append($('#question'+qID+' tr[data-index="'+this+'"]'));
});
}

// Style stuff
$('#question'+qID+' table.subquestions-list col.odd').css({ 'background-color':'transparent' });
$('#question'+qID+' table.subquestions-list tbody th').css({ 'text-align':'center' });
$('#question'+qID+' table.subquestions-list tbody tr:even td, #question'+qID+' table.question tbody tr:even th').css({ 'background-color':'#F1F1F1' });
$('#question'+qID+' table.subquestions-list tbody tr:odd td, #question'+qID+' table.question tbody tr:odd th').css({ 'background-color':'#FCFCFC' });

// Prevent clicking twice in the same row
$('#question'+qID+' input.radio').on('click', function () {

$('#question'+qID+' input.radio').prop('disabled', false);
$('#question'+qID+' input.radio:checked').each(function(i) {
var thisRow = $(this).closest('tr');
$('input.radio', thisRow).not(this).prop('disabled', true);
});
});
}

function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
</script></syntaxhighlight>
==Versions 2.5 and 3.x==

''Tested with: LimeSurvey version 2.5''

This workaround uses JavaScript to convert an '''''Array (flexible labels) by column''''' question into a [http://en.wikipedia.org/wiki/MaxDiff MaxDiff] question type.
<br /><br />
[[File:MaxDiff_2.5.png]]
<br /><br />
'''DOWNLOADS'''<br />
* [[Media:Demo_MaxDiff_For_25_Template.zip|Demo template]]
* [[Media:Demo_MaxDiff_For_25_Survey.zip|Demo survey]]

'''IMPLEMENTATION'''
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create an '''''Array (flexible labels) by column''''' question with 2 "answers" - these will be the left and right columns.
#Add 2 subquestions to the array - these will be the left and right columns.
#Add answers to the array - these will be the rows.
#Create a copy the default template.
#Add the following to the end of '''''template.js''''' in your new template:<syntaxhighlight lang="javascript">function maxDiff(qID, randomize) {

// Identify some elements
var thisQuestion = $('#question'+qID);
var thisTable = $('table.subquestion-list:eq(0)', thisQuestion);

// Assign a new question class
$(thisQuestion).addClass('max-diff-array');

// Move the columns
$('thead tr:eq(0)', thisTable).prepend($('thead tr:eq(0) th:eq(1)', thisTable));
$('tr.answers-list', thisTable).each(function(i){
$('td.answer-item:eq(0)', this).prependTo(this);
});

// Random rows
if(randomize) {
var rowsArr = [];
$('tr.answers-list', thisTable).each(function(i){
$(this).attr('data-index', i);
rowsArr.push(i);
});
shuffleArray(rowsArr);
$(rowsArr).each(function(i){
$('tbody', thisTable).append($('tr[data-index="'+this+'"]', thisTable));
});
}

// Prevent clicking twice in the same row
$('input:radio', thisQuestion).on('click', function () {

$('input:radio', thisQuestion).prop('disabled', false);
$('input:radio:checked', thisQuestion).each(function(i) {
var thisRow = $(this).closest('tr.answers-list');
$('input:radio', thisRow).not(this).prop('disabled', true);
});
});

// Fix up the row classes
var rowClass = 1;
$('tr.answers-list', thisTable).each(function(i) {
$(this).addClass('array'+(2-(i%2)));
});
}

function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}</syntaxhighlight>
#Add the following to the end of '''''template.css''''' in your new template:<syntaxhighlight lang="css">.max-diff-array th.answertext {
text-align: center;
border-right: 3px solid #FFFFFF;
border-left: 3px solid #FFFFFF;
}

/* Override the responsive "no-more-tables" stuff */
@media only screen and (max-width: 801px) {

.max-diff-array .no-more-tables table {
display: table;
border-collapse: inherit;
}

.max-diff-array .no-more-tables thead,
.max-diff-array .no-more-tables tbody {
display: table-row-group;
}

.max-diff-array .no-more-tables tr {
left: auto;
position: relative;
top: auto;
display: table-row;
border: 0 none;
}

.max-diff-array .no-more-tables th,
.max-diff-array .no-more-tables td {
display: table-cell;
text-align: center !important;
color: #2c3e50;
font-size: 15px;
}

.max-diff-array th.answertext {
border-right: 3px solid #FFFFFF;
border-left: 3px solid #FFFFFF;
}

.max-diff-array .answer-item label span {
display: none !important;
}
}</syntaxhighlight>
#Add a script like this to the question source of the Array (flexible labels) question:<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Call the maxDiff() function
// Set the second parameter to true for randomized rows
maxDiff({QID}, true);
});
</script></syntaxhighlight>

=Load SVG Code From Drawing Tool=

This workaround uses JavaScript/jQuery to load a drawing tool and store the results in a huge-text question. The details are outlined in the [[Workarounds: Manipulating a survey at runtime using Javascript#Load SVG Code From Drawing Tool|JavaScript section of the workarounds]].

=Minimum or Maximum Date in Datepicker=

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

'''Please note: From version 2.05 beta6, you MUST set the minimum and maximum date for the date picker directly in the advanced question attributes of the date/time question. This workaround will seize to work.'''

You can set the minimum or maximum selectible date in a datepicker as follows

[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]] and add the following to the source of the date question text or help. Replace "QQ" with the date question ID.

For a minimum date of April 15, 2010:<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;

$('#question'+qID+' .popupdate').datepicker( 'option', 'minDate', new Date(2010, 4-1, 15) );

});

</script>

</syntaxhighlight>

For a minimum date of the current date (today):<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;

$('#question'+qID+' .popupdate').datepicker( 'option', 'minDate', new Date() );

});

</script>

</syntaxhighlight>

For a maximum date of May 10, 2015:<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;

$('#question'+qID+' .popupdate').datepicker( 'option', 'maxDate', new Date(2015, 5-1, 10) );

});

</script>

</syntaxhighlight>

More details here - http://jqueryui.com/demos/datepicker/#option-minDate

=Evaluative Space Grid (ESG)=

''Tested with LimeSurvey versions 2.06 & 2.5''

The evaluative space grid (ESG) is a two-dimensional grid that provides a single-item measure of positivity and negativity (Larsen et al, 2009). See [http://leeds-faculty.colorado.edu/mcgrawp/pdf/larsen.norris.mcgraw.hawkley.cacioppo.2009.pdf page 4 of this PDF].

This can be accomplished using a multiple-numeric question, some simple HTML and a little JavaScript.

A table can be shown in the question. When a respondent clicks a grid cell in the table JavaScript loads the coordinates of the cell into the multiple-numeric question inputs.

[[File:Space_grid_2.png]]<br /><br />
#Create a Multiple Numeric question with two subquestions labelled "X" and "Y".
#Add the following HTML to the source of the question to create the table:<syntaxhighlight lang="html4strict">
<table class="spaceGrid">
<tr>
<td rowspan="5" class="yAxisLabel">How NEGATIVE<br>
do you feel about<br>
the stimulus?</td>
<td class="yLabel">Extremely</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="yLabel">Quite a bit</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="yLabel">Moderately</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="yLabel">Slightly</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="yLabel">Not at all</td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
<td class="gridCell"></td>
</tr>
<tr>
<td class="blankCell"></td>
<td class="blankCell"></td>
<td class="xLabel">Not at all</td>
<td class="xLabel"><span class="yLabel">Slightly</span></td>
<td class="xLabel"><span class="yLabel">Moderately</span></td>
<td class="xLabel"><span class="yLabel">Quite a bit</span></td>
<td class="xLabel"><span class="yLabel">Extremely</span></td>
</tr>
<tr>
<td class="blankCell"></td>
<td class="blankCell"></td>
<td colspan="5" class="xAxisLabel">How POSITIVE do you feel about the stimulus?</td>
</tr>
</table>
</syntaxhighlight><br /><br />
#Add the following styles to the end of your template.css file:<syntaxhighlight lang="css">
.spaceGrid {
width: auto;
border: 0 none;
border-collapse: collapse;
}

.spaceGrid td {
padding: 0 3px;
text-align: center !important;
border: 0 none;
}

td.xAxisLabel {
padding-top: 10px;
}

td.yAxisLabel {
padding-right: 10px;
width: 125px;
}

td.xLabel {
height: 20px;
font-weight: normal;
font-size: 13px;
}

td.yLabel {
text-align: right !important;
font-weight: normal;
font-size: 13px;
}

td.gridCell {
width: 70px;
height: 70px;
border: 1px solid #666666;
background-color: #FFFFFF;
cursor: pointer;
}

td.checkedCell {
background-color: #66FF00;
}</syntaxhighlight><br /><br />
#Add the following to the end of your template.js file:<syntaxhighlight lang="javascript">
$(document).ready(function() {

$('.spaceGrid').each(function(i){

// Define some vars
var thisQuestion = $(this).closest('.numeric-multi');
var thisTable = $(this).closest('table.spaceGrid');
var numGridCell = $('.gridCell', thisTable).length;
var numCols = $('tr:eq(0) .gridCell', thisTable).length;
var numRows = numGridCell/numCols;

// Hide the answers list
$('.subquestion-list, .questions-list', thisQuestion).hide();

// Initial state
var xCoord = $('input.text:eq(0)', thisQuestion).val() - 1;
var yCoord = numRows - $('input.text:eq(1)', thisQuestion).val();
$('tr:eq('+yCoord+') .gridCell:eq('+xCoord+')', thisTable).addClass('checkedCell');

// Listener on the grid cells
$('.gridCell').click(function(){
var thisRow = $(this).closest('tr');

// Add class to checked cell
$('.checkedCell', thisQuestion).removeClass('checkedCell');
$(this).addClass('checkedCell');

// Find the cell coordinates
var reverseRowIndex = (numRows - $('tr', thisTable).index($(thisRow)));
var colIndex = $('.gridCell', thisRow).index($(this)) + 1;

// Load coordinates into inputs
$('input.text:eq(0)', thisQuestion).val(colIndex);
$('input.text:eq(1)', thisQuestion).val(reverseRowIndex);
});
});

});</syntaxhighlight><br /><br />
The script should automatically handle different grid sizes.

=Slider Highlighting=

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

You may want to highlight a slider after it has been moved/changed to allow respondents to easily see which slider subquestions have been answered.

[[File:Capture.PNG]]<br /><br />
#Add the following to the end of '''template.js''':<syntaxhighlight lang="javascript">
$('html').bind('slidecreate', function(event, ui) {
$('.slider_callout').each(function(i){
if($(this).text().length > 0) {
$(this).parents('li:eq(0)').addClass('changedSlider');
}
});
});

$(document).ready(function() {
$('.ui-slider-horizontal').bind('slidechange', function(event, ui) {
$(this).parents('li:eq(0)').addClass('changedSlider');
});
});
</syntaxhighlight><br /><br />
#Add something like the following to the end of '''template.css''' (these styles are for the default template and would need to be modified for other templates):<syntaxhighlight lang="css">
.numeric-multi .answer li {
border-bottom: 5px solid #FFFFFF;
}

.numeric-multi .answer li label {
background-color: #FFFFFF;
}

.numeric-multi .answer li div.multinum-slider {
margin: 1.5em 0.5em 0.2em 0;
padding-left: 0.5em;
}

.ui-slider-1 {
margin-bottom: 10px;
}

.changedSlider {
background-color: #99FFFF;
}
</syntaxhighlight>
<br /><br />

=Dynamic Slider Call-Out Styles=

''Tested with: 2.05, IE 9-11, Firefox, Chrome''

This is an example of how to insert a custom '''''slide()''''' function to control the appearance of the slider call-out as the slider is manipulated. In this example the call-out text colour changes as the slider is moved. Sample survey here - [[Media:Dynamic_slider_call_out.lss|dynamic call-out slider survey]].
<br /><br />
[[File:Dynamic_slider_call_out.png]]<br /><br />
Requirements:
*LimeSurvey 2.05 or newer
*A multiple-numeric question with slider enabled<br /><br />
# Create your multi-numeric question with the slider enabled<br /><br />
#Add the following to the source of the question
<br /><br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// Identify this question
var thisQuestion = $('#question{QID}');

// Slide function
$('.ui-slider', thisQuestion).on('slide', function( event, ui ) {
handleCallout($(this).closest('li.answer-item'), ui.value);
});

// Initial callout states
$('input.text', thisQuestion).each(function(i) {
handleCallout($(this).closest('li.answer-item'), $(this).val());
});

// Handle the callout style
function handleCallout(thisRow, sliderVal) {
if(sliderVal < 20) {
$('.slider_callout', thisRow).css('color', '#D90000');
}
else if(sliderVal < 40) {
$('.slider_callout', thisRow).css('color', '#D96D00');
}
else if(sliderVal < 60) {
$('.slider_callout', thisRow).css('color', '#D9D900');
}
else {
$('.slider_callout', thisRow).css('color', '#00B22D');
}
}

});
</script>
</syntaxhighlight>
<br /><br />

=Sliders in Array-Numbers or Array-Dual-Scale-Numbers=

This workaround will replace the dropdowns in '''''array-numbers''''' or '''''array-dual-scale-numbers''''' questions with sliders. The sliders will automatically have the same minimum, maximum and steps that you set in the advanced question settings.

==LimeSurvey Version 2.06==
[[File:custom_sliders_1.png]]<br /><br />
''Tested with: LimeSurvey version 2.06''<br /><br />
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your array-numbers or array-dual-scale-numbers question.
#Add the following to the source of the question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

insertSlider ({QID});

function insertSlider (qID) {

$('#question'+qID+' select').each(function(i, el){

// Hide the dropdown
$(el).hide();

var id = $(el).attr('id').replace(/#/g,'-');

// Some dropdown values
var currentVal = Number($('option:selected', el).val());
var firstVal = Number($('option[value!=""]:first', el).val());
var secondVal = Number($('option[value!=""]:first', el).next('option').val());
var lastVal = Number($('option[value!=""]:last', el).val());

// Insert a container for the slider
var container = $('<div class="customSliderWrapper"></div>').insertAfter(el);

// Initiate the slider
var slider = $('<div id="slider-'+id+'" class="customSlider"></div>').appendTo(container).slider({
min: firstVal,
max: lastVal,
range: 'min',
value: currentVal,
step: secondVal - firstVal,
slide: function( event, ui ) {
$(el).val(ui.value);
$('#callOut-'+id).text($(el).val());
}
});

// Insert a callout
var callout = $('<div id="callOut-'+id+'" class="slider_callout slider-callout"></div>').appendTo($('#slider-'+id+' .ui-slider-handle')).text($('option:selected', el).val());

// Set a value as soon as the slider handle is clicked
$('#slider-'+id+' .ui-slider-handle').mousedown(function() {
$(el).val(slider.slider('value'));
$('#callOut-'+id).text($(el).val());
});
});
}
});
</script></syntaxhighlight><br /><br />
#Add something like the following to the end of '''template.css''' (these styles are for the default template and may need to be modified for other templates):<syntaxhighlight lang="css">
.customSliderWrapper {
position: relative;
margin: 0 10px;
padding-top: 1.75em;
}
</syntaxhighlight>
<br /><br />
==LimeSurvey Version 2.6x==
[[File:Dropdown-sliders.png]]<br /><br />
''Tested with: LimeSurvey version 2.64.7 ''<br /><br />
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your array-numbers or array-dual-scale-numbers question.
#Add the following to the source of the question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

insertSlider ({QID});

function insertSlider (qID) {

// Identify this question
var thisQuestion = $('#question'+qID);
thisQuestion.addClass('with-dropdown-sliders');

// Loop through all array drop-downs
$('select.multiflexiselect', thisQuestion).each(function(i, el){
var thisCell = $(el).closest('td');

// Hide the dropdown
$(el).hide();

// Some dropdown values
var currentVal = $(el).val();
var firstVal = Number($('option[value!=""]:first', el).attr('value'));
var secondVal = Number($('option[value!=""]:eq(1)', el).attr('value'));
var lastVal = Number($('option[value!=""]:last', el).attr('value'));

// Insert an input for the slider
var thisInput = $('<input class="inserted-input" type="text" />').insertAfter(el);

// Initiate the slider
thisInput.val(currentVal).bootstrapSlider({
'min': firstVal,
'max': lastVal,
'step': secondVal - firstVal,
'value': Number(currentVal),
'tooltip': 'always'
});

// Listener on the slider
$(thisInput).on('slideStop', function () {
if($('.tooltip', thisCell).is(':hidden')) {
$('.tooltip', thisCell).show();
$('.tooltip', thisCell).css('margin-left', '-'+($('.tooltip', thisCell).width()/2)+'px');
}
$(el).val($(thisInput).val());
});

// Hide the slider call-out if no value selected yet
if(currentVal == '') {
$('.tooltip', thisCell).hide();
}
});
}
});
</script></syntaxhighlight><br /><br />
#Add something like the following to the end of '''template.css''' (these styles are for the default template and may need to be modified for other templates):<syntaxhighlight lang="css">
.with-dropdown-sliders .slider.slider-horizontal {
margin: 1.5em auto 1em auto;
width: 90%;
}

.with-dropdown-sliders .slider.slider-horizontal .slider-handle {
margin-top: -5px;
}
</syntaxhighlight><br />
Sample survey for version 2.6x: [[Media:Demo_Sliders_in_Array_Survey.zip|Demo_Sliders_in_Array_Survey.zip]]

=Vertical Sliders=

''Tested with: 1.92+, 2.00+, IE 9, Firefox 13, Chrome 19''

This workaround uses a custom jQuery plugin to apply vertical sliders to multiple-numeric questions. You can download a sample template here (with the plugin in template.js) - [[Media:default_vertical_sliders.zip|vertical slider template]] - and a sample survey here - [[Media:demo_vertical_sliders.lss|vertical slider survey]].

[[File:verticalsliders_1.jpg]]<br /><br />
# Create your multi-numeric question(s). Do NOT use any of the slider advanced settings.<br /><br />
#Add the following to the end of template.js. Replace "QQ" (line 5) with the question ID and adjust the options in the function call as desired. Repeat the call as many times as you need for more questions<syntaxhighlight lang="javascript">$(document).ready(function(){

// Call the vertical slider plugin with the question ID
// Edit options here as desired
$('#questionQQ').lsVerticalSlider({
minValue :0, // Minimum value (default 0)
maxValue :200, // Maximum value (default 100)
startValue :100, // Start value (default null)
step :10, // Slider increments (default 1)
height :100, // Height of slider in pixels (default 200)
recordStart :true, // Record the start value? (default no)
showMin :true, // Show minimum value? (default no)
showMax :true // Show maximum value? (default no)
});
});

// NO EDITING REQUIRED BELOW HERE
// A jQuery plugin to convert multiple-numeric questions to vertical sliders
(function( $ ){
$.fn.lsVerticalSlider = function(options) {

// The defaults, extended and modified with any passed in the function call
var opts = $.extend( {
minValue :0,
maxValue :100,
startValue :'',
step :1,
height :150,
recordStart :false,
showMin :false,
showMax :false
}, options);

return this.each(function() {

var $this = $(this);

// Some classes for the question and subquestions
$this.addClass('vertical-slider-question');
$('li:[id<div class="simplebox">="javatbd"]', $this).addClass('vertical-slider-subquestion');

// Loop through the subquestions
$('li:[id</div>="javatbd"]', $this).each(function(i){
var itemID = $(this).attr('id').replace(/javatbd/, '');

// Check for pre-existing answer
if($('#answer'+itemID).val() != '') {
opts.startValue = $('#answer'+itemID).val();
}

// Insert the slider elements
$('#answer'+itemID).after(
'<div class="vertical-slider-max-min" style="height:'+(opts.height+2)+'px;"> \
<div class="vertical-slider-max"></div> \
<div class="vertical-slider-min"></div> \
</div> \
<div id="vertical-slider-'+itemID+'" class="vertical-slider" style="height:'+opts.height+'px;"></div> \
<div class="vertical-slider-callout-wrapper" style="height:'+(opts.height+2)+'px;"> \
<div class="vertical-slider-callout" id="slider-callout-'+itemID+'"></div> \
</div>'
);

// Show min/max if option is set
if(opts.showMax) {
$('.vertical-slider-max', $this).text(opts.maxValue);
}

if(opts.showMin) {
$('.vertical-slider-min', $this).text(opts.minValue);
}

// Initiate the slider
$('#vertical-slider-'+itemID).slider({
orientation: 'vertical',
range: 'min',
min: opts.minValue,
max: opts.maxValue,
value: opts.startValue,
step: opts.step,
slide: function(event, ui) {
$('#answer'+itemID).val(ui.value);
$('#slider-callout-'+itemID).text(ui.value);
setTimeout(function() {
$('#slider-callout-'+itemID).css({ 'bottom':$('#vertical-slider-'+itemID+' .ui-slider-handle').css('bottom') }).show();
}, 10);
},
create: function(event, ui) {
// Initial values and positions
if($('#answer'+itemID).val() != '') { // Pre-existing answer
$('#slider-callout-'+itemID).text(opts.startValue);
}
else if(opts.recordStart) { // Record the start value (if option is set)
$('#answer'+itemID).val(opts.startValue);
$('#slider-callout-'+itemID).text(opts.startValue);
}
else {
$('#slider-callout-'+itemID).hide();
}
$('#slider-callout-'+itemID).css({ 'bottom':$('#vertical-slider-'+itemID+' .ui-slider-handle').css('bottom') });
}
});
});
});
};
})( jQuery );</syntaxhighlight><br /><br />
#Add the following to the end of template.css (these styles are for the default template):<syntaxhighlight lang="css">/* Vertical slider styles and overrides */
.vertical-slider-question p.tip {
display: none;
}

.vertical-slider-subquestion {
float: left;
margin: 0 3em 0 0 !important;
}

.vertical-slider-question label {
display: block;
padding: 0 0 0.75em 0 !important;
}

.vertical-slider-question span.input {
padding: 0.3em 0 0 0;
display: block;
}

.vertical-slider-question input.text {
display: none;
}

.vertical-slider {
float: left;
border-radius: 4px;
}

.vertical-slider-question .ui-slider-handle {
top: auto;
border-radius: 4px;
}

.vertical-slider-max-min,
.vertical-slider-callout-wrapper {
float: left;
position: relative;
}

.vertical-slider-callout-wrapper {
min-width: 3em;
}

.vertical-slider-max-min {
margin-right: 0.5em;
}

.vertical-slider-max,
.vertical-slider-min {
font-size: 0.8em;
color:#666666;
line-height: 1;
}

.vertical-slider-max {
margin-top: -0.5em;
}

.vertical-slider-min {
position: absolute;
right: 0;
bottom: 0;
margin-bottom: -0.5em;
}

.vertical-slider-callout {
position: absolute;
top: auto;
margin: 0 0 -0.6em 0.5em;
padding: 0.1em;
font-size: 0.9em;
color:#000000;
line-height: 1;
background: #F8F8FF;
border: 1px solid #D2E0F2;
border-radius: 4px;
}</syntaxhighlight>
<br /><br />

=Range Slider=

==LimeSurvey Version 2.5x==

This workaround uses a custom jQuery plugin to insert a jQuery UI range slider into a multi-numeric question and automatically populate that question's inputs with the range min and max values.

'''Download''': [[Media:Demo_Range_Slider_2.5x.zip|Sample Template and Survey.]]

[[File:Demo_Range_Slider_2.5x.png]]<br /><br />
The plugin handles:
*previous answers
*slider max/min
*range min start
*range max start
*range span min
*slider step
*record the start values
*show slider max and min<br /><br />
Requirements:
<ul><li>LimeSurvey 2.5x</li>
<li>A multiple-numeric question with two subquestions</li></ul><br /><br />
#Create your multi-numeric question. Do NOT use any of the slider advanced settings.
#Add the following to the end of template.js.<syntaxhighlight lang="javascript">// A jQuery plugin to display a range slider in LimeSurvey
// Author - Tony Partner - partnersurveys.com
(function( $ ){

$.fn.lsRangeSlider = function(options) {

// The defaults, extended and modified with any passed in the function call
var opts = $.extend( {
sliderMin :0, // Minimum slider value (default 0)
sliderMax :100, // Maximum slider value (default 100)
rangeStartMin :'', // Minimum range handle start value (default sliderMin)
rangeStartMax :'', // Maximum range handle start value (default sliderMax)
minRangeSpan :0, // Minimum allowed range span (default 0)
step :1, // Slider increments (default 1)
recordStart :false, // Record the start value? (default no)
showMin :false, // Show slider minimum value? (default no)
showMax :false // Show slider maximum value? (default no)
}, options);

return this.each(function() {

if($(this).hasClass('numeric-multi') && $('input.text', this).length == 2) {

// Define some vars
var thisQuestion = $(this);
var rangeMinInput = $('input.text.form-control:eq(0)', thisQuestion);
var rangeMaxInput = $('input.text.form-control:eq(1)', thisQuestion);
thisQuestion.addClass('range-slider-question');

// Check for pre-existing answer
if($(rangeMinInput).val() != '' && $(rangeMinInput).val() != '') {
opts.rangeStartMin = $(rangeMinInput).val();
opts.rangeStartMax = $(rangeMaxInput).val();
}
else {
if(opts.rangeStartMin == '') {
opts.rangeStartMin = opts.sliderMin;
}
if(opts.rangeStartMax == '') {
opts.rangeStartMax = opts.sliderMax;
}
}

// Insert the slider
var insertedEls = '<div class="col-xs-12 col-sm-12 withslider">\
<input class="inserted-slider" type="text" name="rangeSlider" />\
<div class="pull-left">\
<span class="help-block inserted-slider-min"></span>\
</div>\
<div class="pull-right">\
<span class="help-block inserted-slider-max"></span>\
</div>\
</div>';
$('input[type="text"].form-control:eq(0)', thisQuestion).closest('.subquestion-list').hide().before(insertedEls);

var sliderValues = [Number(opts.rangeStartMin), Number(opts.rangeStartMax)];

$('input.inserted-slider', thisQuestion).bootstrapSlider({
'min': Number(opts.sliderMin),
'max': Number(opts.sliderMax),
'step': Number(opts.step),
'range': true,
'value': sliderValues,
'tooltip': 'always'
});
if($(rangeMinInput).val() == '' && $(rangeMinInput).val() == '') {
$('.slider .tooltip', thisQuestion).hide();
}

// Listener on the range slider
$('input.inserted-slider', thisQuestion).on('slideStart', function(event, ui) {
});
$('input.inserted-slider', thisQuestion).on('slide slideStop', function(event, ui) {
var thisLowerVal = Number($.trim($(this).val().split(',')[0]));
var thisUpperVal = Number($.trim($(this).val().split(',')[1]));
if(opts.minRangeSpan > 0 && (thisUpperVal-thisLowerVal) < opts.minRangeSpan) {
$('input.inserted-slider', thisQuestion).bootstrapSlider('setValue', sliderValues);
}
else {
// Load the LS inputs
$(rangeMinInput).val(thisLowerVal);
$(rangeMaxInput).val(thisUpperVal);
// Fire Expression manager
checkconditions($(rangeMinInput).attr('value'), $(rangeMinInput).attr('name'), $(rangeMinInput).attr('type'));
checkconditions($(rangeMaxInput).attr('value'), $(rangeMaxInput).attr('name'), $(rangeMaxInput).attr('type'));
// Show the tooltip
$('.slider .tooltip', thisQuestion).show();
sliderValues = [thisLowerVal, thisUpperVal];
}
});

// Show min/max if option is set
if(opts.showMin) {
$('.inserted-slider-min', thisQuestion).text(opts.sliderMin);
}
if(opts.showMax) {
$('.inserted-slider-max', thisQuestion).text(opts.sliderMax);
}

// Handle recordStart
if(opts.recordStart) {
if($(rangeMinInput).val() == '' && $(rangeMinInput).val() == '') {
// Load the LS inputs
$(rangeMinInput).val(Number($.trim($('input.inserted-slider', thisQuestion).val().split(',')[0])));
$(rangeMaxInput).val(Number($.trim($('input.inserted-slider', thisQuestion).val().split(',')[1])));
// Fire Expression manager
checkconditions($(rangeMinInput).attr('value'), $(rangeMinInput).attr('name'), $(rangeMinInput).attr('type'));
checkconditions($(rangeMaxInput).attr('value'), $(rangeMaxInput).attr('name'), $(rangeMaxInput).attr('type'));
// Show the tooltip
$('.slider .tooltip', thisQuestion).show();
}
}
}
});

};
})( jQuery );</syntaxhighlight>
#Then, add something like this to the source of your question to apply the plugin with some custom option settings (I think the comments explain the options adequately)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').lsRangeSlider({
sliderMin :0, // Minimum slider value (default 0)
sliderMax :10, // Maximum slider value (default 100)
rangeStartMin :2, // Minimum range handle start value (default sliderMin)
rangeStartMax :8, // Maximum range handle start value (default sliderMax)
minRangeSpan :0, // Minimum allowed range span (default 0)
step :1, // Slider increments (default 1)
recordStart :true, // Record the start value? (default no)
showMin :true, // Show slider minimum value? (default no)
showMax :true // Show slider maximum value? (default no)
});
});
</script></syntaxhighlight>
#Or, to apply the plugin with the default option settings<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').lsRangeSlider();
});
</script></syntaxhighlight>
<br /><br />

=Reverse Slider=

{{Box|The reverse slider feature can be used in any (multiple) numerical input question type. For more details, please check the [[Question_type_-_Multiple_numerical_input#Slider|slider wiki subsection]].}}

=Sliders With Control Buttons=
== Version 2.05 ==

''Tested with: 2.05, IE 7-10, Firefox, Chrome''

This workaround uses a custom jQuery plugin to insert "up" and "down" buttons to control sliders. You can download a sample template here - [[Media:Demo_Slider_Buttons.zip|slider with buttons template]] - and a sample survey here - [[Media:Limesurvey_survey_button_slider.lss|button slider survey]].

[[File:Button_slider.jpg]]<br /><br />
The plugin allows the following options:
*Down Text: Text for the "down" button
*Up Text: Text for the "up" button
*Scrolling: Continuous slider movement if the left mouse button is held down
*Scroll Interval: Interval (in milliseconds) between slider movement when button is held down (do not make this too short or it will be difficult to stop the slider accurately)
*Value Prefix: Prefix for call-out
*Value Suffix: Suffix for call-out<br /><br />
Requirements:
*LimeSurvey 2.05 or newer
*A multiple-numeric question with slider enabled<br /><br />
# Create your multi-numeric question with the slider advanced settings.<br /><br />
#Add the following to the end of template.js.<syntaxhighlight lang="javascript">// A custom plugin to add control buttons to LimeSurvey sliders
// Author - Tony Partner - partnersurveys.com
(function( $ ){

$.fn.sliderButtons = function(options) {

// The defaults, extended and modified with any passed in the function call
var opts = $.extend( {
downText: '-', // Text for the "down" button
upText: '+', // Text for the "up" button
scrolling: true, // Continuous slider movement if left mouse button held down
scrollInterval: 150,// Interval (in ms) between slider movement when button is held down
valuePrefix: '', // Prefix for callout
valueSuffix: '' // Suffix for callout
}, options);

return this.each(function(i) {

var thisQuestion = $(this);

// Add some classes
$(thisQuestion).addClass('slider-button-question');

// Insert the buttons
$('li.question-item', thisQuestion).append('<div class="slider-button-wrapper">\
<button type="button" class="slider-button down">'+opts.downText+'</button>\
<button type="button" class="slider-button up">'+opts.upText+'</button>\
</div>');

// Initial button states
function handleButtonState(slider) {
var thisRow = $(slider).closest('li.question-item');
var thisSliderVal = $(slider).slider('option', 'value');
var thisSliderStep = $(slider).slider('option', 'step');
var thisSliderMin = $(slider).slider('option', 'min');
var thisSliderMax = $(slider).slider('option', 'max');
$('button.slider-button', thisRow).prop('disabled', false);
if ($(slider).slider('option', 'value') == thisSliderMin) {
$('button.slider-button.down', thisRow).prop('disabled', true);
}
if ($(slider).slider('option', 'value') == thisSliderMax) {
$('button.slider-button.up', thisRow).prop('disabled', true);
}
}
$('.multinum-slider', thisQuestion).each(function(i) {
handleButtonState(this);
if($(this).closest('li.question-item').find('input.text').val() != '') {
$('.slider-callout', this).text(opts.valuePrefix+$(this).closest('li.question-item').find('input.text').val()+opts.valueSuffix);
}
});

// Function to handle button actions
function handleButtons(thisButton) {
var thisRow = $(thisButton).closest('li.question-item');
var thisSlider = $('.multinum-slider', thisRow);
var thisSliderStep = $(thisSlider).slider('option', 'step');
var stepDecimals = 0;
if(thisSliderStep.toString().indexOf('.') >= 0) {
stepDecimals = thisSliderStep.toString().split('.')[1].length;
}
var thisSliderVal = Number($(thisSlider).slider('option', 'value')).toFixed(stepDecimals);
var thisSliderMin = $(thisSlider).slider('option', 'min');
var thisSliderMax = $(thisSlider).slider('option', 'max');
if ($(thisButton).hasClass('down') && thisSliderVal > thisSliderMin) {
$(thisSlider).slider('option', 'value', Number(thisSliderVal)-Number(thisSliderStep));
}
if ($(thisButton).hasClass('up') && thisSliderVal < thisSliderMax) {
$(thisSlider).slider('option', 'value', Number(thisSliderVal)+Number(thisSliderStep));
}
var newValue = $(thisSlider).slider('option', 'value').toFixed(stepDecimals).replace(/\./, LSvar.sLEMradix);
$('input.text', thisRow).val(newValue).triggerHandler('keyup');
$('.slider-callout', thisSlider).text(opts.valuePrefix+newValue+opts.valueSuffix);
}

// Scrolling
if(opts.scrolling == true) {

var sliderTimeout;
var clicker = $('button.slider-button', thisQuestion);
var count = 0;

$('button.slider-button', thisQuestion).mousedown(function(){
var thisButton = $(this);
sliderTimeout = setInterval(function(){
handleButtons(thisButton);
}, opts.scrollInterval);
return false;
});

$(document).mouseup(function(){
clearInterval(sliderTimeout);
return false;
});
$('button.slider-button', thisQuestion).mouseout(function(){
handleButtonState($(this).closest('li.question-item').find('.multinum-slider'));
});
}

// Listener on the buttons
$('button.slider-button', thisQuestion).click(function(e) {
handleButtons(this) ;
handleButtonState($(this).closest('li.question-item').find('.multinum-slider'));
});

// Listener on sliders
$('.multinum-slider', thisQuestion).on('slidestop', function( event, ui ) {
handleButtonState(this);
});

// Listener on reset buttons
$('.slider-reset', thisQuestion).on( "click", function( event, ui ) {
var thisReset = $(this);
setTimeout(function() {
handleButtonState($(thisReset).closest('li.question-item').find('.multinum-slider'));
}, 150);
});
});
};
})( jQuery );
</syntaxhighlight><br /><br />
#Add the following to the end of template.css (these styles are for the default template but easily modified for others):<syntaxhighlight lang="css">.slider-button-question label.slider-label {
margin-top: 0;
padding: 40px 1em 0 0;
*padding: 25px 1em 0 0;
}

.slider-button-question div.multinum-slider {
margin-top: 45px;
}

.slider-button-question .ui-slider-horizontal .ui-slider-handle {
width: 18px;
margin-left: -9px;
top: -4px;
}

.slider-button-question .slider_callout {
margin-left: -41px;
text-align: center;
width: 100px;
}

.slider-button-question .slider-button-wrapper {
float: left;
margin: 40px 0 0 25px;
}

.slider-button-question .slider-button-wrapper button {
padding: 0 10px;
margin: 0 0 0 5px;
}

.slider-button-question .slider-button-wrapper button:disabled {
opacity:0.65;
filter:alpha(opacity=65);
cursor: default;
}

.slider-button-question .slider-reset {
margin-top: 42px;
}
</syntaxhighlight><br /><br />
#Then, add something like this to the source of your question to apply the plugin with some custom option settings (I think the comments explain the options adequately)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#question{QID}').sliderButtons({
downText: 'Down', // Text for the "down" button
upText: 'Up', // Text for the "up" button
scrolling: true, // Continuous slider movement if left mouse button held down
scrollInterval: 250, // Interval (in ms) between slider movement when button is held down
valueSuffix: "%" // Suffix for callout
});
});
</script>
</syntaxhighlight><br /><br />
#Or, simply to apply the plugin with the default option settings<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#question{QID}').sliderButtons();
});
</script>
</syntaxhighlight>

== Version 3.x ==

A custom question theme for Slider Control Buttons for LimeSurvey 3.x can be found here - https://github.com/tpartner/LimeSurvey-Slider-Controls-3x

Workarounds: Manipulating a survey at runtime using Javascript

2023-05-11T17:27:28Z

Tpartner: /* Partially Randomized Answers - List (dropdown) questions */

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]]

<div class="simplebox"><center><br />'''Please keep in mind that these workarounds are not official LimeSurvey extensions - they are solutions that users have created for themselves.<br /><span style='color:#EE0000,#FFFFFF'>Therefore LimeSurvey can't offer guarantees or support for these solutions.</span><br />If you have questions, please contact the users that, thankfully, shared their solutions with the community.'''<br /><br /></center></div>

<div class="simplebox">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.<br /><br /></div>

__TOC__

=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 <nowiki>''Tested with: (enter LimeSurvey version and maybe browser)''</nowiki>.

Finally it's imported to mark all your code with code tags, other wise you might break this page.
*Start tag: '''<nowiki><syntaxhighlight lang="php"></nowiki>'''
*End tag: '''<nowiki></syntaxhighlight></nowiki>'''.

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

Plugin [https://extensions.sondages.pro/questions-updating-and-managing/addscripttoquestion-easily-add-javascript/ 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".
* [http://docs.limesurvey.org/tiki-index.php?page=Adding+A+Question Add a new question]
* Edit the question and click the "Source" button in the editor toolbar:

[[File:Editor_1.png]]
* Enter your script after the question text:

[[File:Editor_2.png]]
* Save the question

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

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
alert("Test!");
</script></syntaxhighlight>

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:

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:complete',function() {
alert("Test!");
});
</script></syntaxhighlight>

===Usage of brackets (<nowiki>{ and }</nowiki>)===
{{Alert|title=Caution when using brackets (<nowiki>{ and }</nowiki>) in scripts|text=[[ExpressionScript#Syntax|Expression manager]] uses brackets (<nowiki>{ and }</nowiki>) to enclose expressions. If you have to use brackets in your JavaScript, you must add a space or line feed after the opening bracket (<nowiki>{</nowiki>) and before the closing bracket (<nowiki>}</nowiki>) }}

===Examples of usage of brackets===

ExpressionScript will try to parse this JavaScript:
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(function() {console.log('broken javascript');});
</script>
</syntaxhighlight>

Adding line feed prevents ExpressionScript from parsing
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(function() {
console.log('Adding a line feed for javascript');
});
</script>
</syntaxhighlight>

ExpressionScript will try to parse this JavaScript:
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
if(myvar==1) {console.log('broken javascript');};
</script>
</syntaxhighlight>

Adding spaces inside the brackets prevents ExpressionScript from parsing
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
if(myvar==1) { console.log('Adding a space for javascript'); };
</script>
</syntaxhighlight>

=Sum up input values using Javascript=

''Tested with: ''

<div class="simplebox">As of version 1.92, this is easier to do using the sum() function in [[ExpressionScript|ExpressionScript]]. See this [[ExpressionScript how-tos#Calculate assessment values at runtime and store the results in the survey data|HowTo example]].</div>

<div class="simplebox">Starting in Version 1.92, you also do no longer need to use SGQA (e.g. 45251X1X5) identifiers. Instead the code <code>{SGQ}</code> will automatically replaced by the current questions SGQA-codes.</div>

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 [http://docs.limesurvey.org/tiki-index.php?page=SGQA+Identifier SGQA identifier] and [[Adding a question#Information from previous answers|Using information from previous answers]].

<syntaxhighlight lang="html4strict">

<div style="text-align: left">These are your answers:<br />

<u></u><u></u><u></u><u></u><u>=

<p><script LANGUAGE="JavaScript">

partyprice = 3;

beadclothprice = 3;

breakfastprice = 7;

lunchprice = 8;

dinnerprice = 10;

foodtotal = 0;

var isreallytrue = "Yes";

var noanswer = "No answer";

document.write( "Can you come? = {INSERTANS:45251X1X1}<BR>" );

if ("{INSERTANS:45251X1X1}" == isreallytrue )

{

if ("{INSERTANS:45251X1X3}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X3}"; }

partypeople = parseInt(answer);

partytotal = partyprice * partypeople;

document.write( "It's {INSERTANS:45251X1X3} persons who will come = " + partytotal + "€<BR>" );

if ("{INSERTANS:45251X1X4}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X4}";}

beadcloths = parseInt(answer);

beadclothtotal = beadclothprice * beadcloths;

document.write( "You want to borrow {INSERTANS:45251X1X4} beadcloths = " + beadclothtotal + "€<BR>" );

document.write( "Will you be there thursday? = {INSERTANS:45251X1X5}<BR>" );

document.write( "On friday you will have these meals: <BR>" );

if ("{INSERTANS:45251X1X71}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X71}";}

breakfastfriday = parseInt(answer) * breakfastprice;

document.write( "'''_ " + answer + " breakfeasts = " + breakfastfriday + "€<BR>" );

if ("{INSERTANS:45251X1X72}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X72}";}

lunchfriday = parseInt(answer) * lunchprice ;

document.write( "'''_ " + answer + " lunches = " + lunchfriday + "€<BR>" );

if ("{INSERTANS:45251X1X73}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X73}";}

dinnerfriday = parseInt(answer)* dinnerprice ;

document.write( "'''_ " + answer + " dinners = " + dinnerfriday + "€<BR>" );

foodtotal = breakfastfriday + lunchfriday + dinnerfriday;

document.write( "Will you be there saturday? = {INSERTANS:45251X1X8}<BR>" );

if ("{INSERTANS:45251X1X8}" == isreallytrue )

{

document.write( "On saturday you will have these meals: <BR>" );

if ("{INSERTANS:45251X1X91}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X91}"; }

breakfastsaturday = parseInt(answer) * breakfastprice ;

document.write("'''_ " + answer + " breakfeasts = " + breakfastsaturday + "€<BR>" );

if ("{INSERTANS:45251X1X92}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X92}"; }

lunchsaturday = parseInt(answer) * lunchprice ;

document.write( "'''_ " + answer + " lunches = " + lunchsaturday + "€<BR>" );

if ("{INSERTANS:45251X1X93}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X93}"; }

dinnersaturday = parseInt(answer) * dinnerprice ;

document.write( "'''_ " + answer + " dinners = " + dinnersaturday + "€<BR>" );

foodtotal = foodtotal + breakfastsaturday + lunchsaturday + dinnersaturday;

}

document.write( "Will you be there sunday? = {INSERTANS:45251X1X10}<BR>" );

if ("{INSERTANS:45251X1X10}" == isreallytrue )

{

document.write( "On sunday you will have these meals: <br>" );

if ("{INSERTANS:45251X1X111}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X111}"; }

breakfastsunday = parseInt(answer) * breakfastprice ;

document.write( "'''_ " + answer + " breakfeasts = " + breakfastsunday + "€<BR>" );

if ("{INSERTANS:45251X1X112}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X112}"; }

lunchsunday = parseInt(answer) * lunchprice ;

document.write( "'''_ " + answer + " lunches = " + lunchsunday + "€<BR>" );

if ("{INSERTANS:45251X1X113}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X113}"; }

dinnersunday = parseInt(answer) * dinnerprice ;

document.write( "'''_ " + answer + " dinners = " + dinnersunday + "€<p>" );

foodtotal = foodtotal + breakfastsunday + lunchsunday + dinnersunday;

}

total = partytotal + beadclothtotal + foodtotal;

document.write( "<h3>In total it will cost you " + total + "€</h3><BR>

Put that sum in this bank account 1234 5678 9012" );

}

</SCRIPT></p>

</div></syntaxhighlight>

=Multiple Question Validation=

''Tested with: ''

<div class="simplebox">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|ExpressionScript]]. Such validations also work on the current page, and properly handle array_filter and cascading relevance.</div>

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.):
#Create a new survey of type "group by group", set the "Show |<< Prev| button" to yes and note the SID.
#Add a new group called "Group 1" and note the GID.
#Add a new question "Percent of males" of type "numeric", make it mandatory and note the QID (we will refer to this as QID1).
#Add a new question "Percent of females" of type "numeric", make it mandatory and note the QID (we will refer to this as QID2).
#Add a new group called "Group 2"
#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

<syntaxhighlight lang="javascript">

<script>

function validation()

{

if [[{INSERTANS:SIDXGIDXQID1}+{INSERTANS:SIDXGIDXQID2}) != 100)

{

alert("Your responses don't sum 100! Check them");

document.limesurvey.move.value = 'moveprev';

document.limesurvey.submit();

}

else

{

document.limesurvey.move.value = 'movelast';

document.limesurvey.submit();

}

}

setTimeout("validation()",250);

</script>

</syntaxhighlight>

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

<syntaxhighlight lang="php">

function validation() {

if ("{INSERTANS:SIDXGIDXQID}" != "{INSERTANS:SIDXGIDXQID}") {

alert("Your responses don't match Check them"); document.limesurvey.move.value = 'moveprev';

document.limesurvey.submit();

}

}

setTimeout("validation()",250);

</syntaxhighlight>

=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.

<syntaxhighlight lang="php">

<script>

if ("{INSERTANS:SIDXGIDXQID}" == "No")

{

window.location="http://www.limesurvey.org";

}

</script>

</syntaxhighlight>

=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 (<input> 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...:

<syntaxhighlight lang="php">

<script>

jQuery(document).ready(

function(){

alert('onload alert!');

}

);

</script>

</syntaxhighlight>

...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:

<syntaxhighlight lang="php">document.getElementById("answer73166X16X54").style.display='none';</syntaxhighlight>

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:

<syntaxhighlight lang="php">document.getElementById("answer{SGQ}").style.display='none';</syntaxhighlight>

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:

<syntaxhighlight lang="php">document.getElementById("answer73166X16X54").readOnly=true;</syntaxhighlight> 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.

<syntaxhighlight lang="php">

jQuery(document).ready(

function() {

jQuery('input:radio').each(

function() {

var s = jQuery(this);

var c = s.parent().children('.answertext');

for(var i=0; i < c.length; i++) {

var a = jQuery(c[i]]);

if(this.id </u> a.attr('for') && a.text() == '') {

s.css({ 'display' : 'none' });

a.css({ 'display' : 'none' });

break;

}

}

}

)

}

);

</syntaxhighlight>

==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 <html> 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

<syntaxhighlight lang="javascript">

jQuery(document).ready(

function(){

languagecode=$('html').attr('lang');

alert('This is the current language code: '+languagecode);

}

);

</syntaxhighlight>

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''

<div class="simplebox">As of version 1.92, this is easier to do using the the array_filter attribute, or relevance equations in general.</div>

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.

<syntaxhighlight lang="php">

var previousQuestionAnswer = "{INSERTANS:1000X1X1}";

var currentQuestionID = "#answer1000X1X1"

$(document).ready(function() {

// See if the answer for the previous question matches an answer in the current question

// (other than 'No Answer')

// If so, disable it.

if (previousQuestionAnswer!='No Answer') {

$(currentQuestionID).children().each(function(index, Element)

{

if ($(this).attr('text') == previousQuestionAnswer)

{ $(this).attr('disabled', true); }

}

);}

}); // End of JQuery ready function

</syntaxhighlight>

===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):

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Get the countryCode (first character of the country)
var countryCode = '{INSERTANS:1000X1X1}'.substr(0, 1).toUpperCase();

// Loop through all dropdown options and remove those with codes not starting with the countryCode
$('select[id^="answer"] option').each(function(i){

if($(this).attr('value') && $(this).attr('value').substr(0, 1).toUpperCase() != countryCode) {
$(this).remove();
}
});
});

</script></syntaxhighlight>

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

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Get the stateCode (two first characters of the state)

var stateCode = '{INSERTANS:1000X1X2}'.substr(0, 2).toUpperCase();

// Loop through all dropdown options and remove those with codes not starting with the stateCode

$('select[id^="answer"] option').each(function(i){

if($(this).attr('value') && $(this).attr('value').substr(0, 2).toUpperCase() != stateCode) {

$(this).remove();

}

});

});

</script></syntaxhighlight>

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+''

<div class="simplebox">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).</div>

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...

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

// Match elements with labels using htmlFor and a loop

var labels = document.getElementsByTagName('LABEL');

for (var i = 0; i < labels.length; i++) {

if (labels[i].htmlFor != '') {

var elem = document.getElementById(labels[i].htmlFor);

if (elem)

elem.label = labels[i];

}

}

var answerFilter="{INSERTANS:96553X63X759}";

for (i=0; i<30; i++){

var iLabel = document.getElementById('answer96553X63X760'+(i+1]].label.innerHTML;

if (answerFilter.search(iLabel) == -1){

// Hide element

$('#question760').find('li').eq(i).hide();

// Set value of hidden elements to zero

document.getElementById('answer96553X63X760'+(i+1)).value = 0;

}

}

});</script>

</syntaxhighlight>

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

''Tested with: 1.72''

''And tested with: 1.91+''

<div class="simplebox">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|ExpressionScript]] compatible equations or tailored text. Finally, with 1.92, defaults are properly managed even when set on the same page.</div>

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.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answer1000X11X30').val('{INSERTANS:1000X10X20}');

$('#answer1000X11X31').val('{INSERTANS:1000X10X21}');

});

</script></syntaxhighlight>

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.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answer1000X2X2').val(parseInt('{INSERTANS:1000X1X1}')*2);

$("#question2").hide();

});

</script>

</syntaxhighlight>

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

=Dynamic Sum=

<div class="simplebox">As of version 1.92, this is easier to do with [[ExpressionScript|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 [[ExpressionScript how-tos#Calculate assessment values at runtime and store the results in the survey data|HowTo example]] demonstrates the dynamic sum feature.</div>

<div class="simplebox">Also note, as of version 1.92, the following workaround will fail, since it includes a a regular expression containing curly braces.</div>

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:

<syntaxhighlight lang="php">

<script language=Javascript>

// General definitions

// Define a regular expression to match the labels containing information about an answer

// In LimeSurvey, these labels start with "answer..."

var answerRegex = /^answer/;

// Find all answer checkboxes in the document and set their

// onchange events to updatePrice

function Custom_On_Load()

{

// Find all input elements

var inputList=document.getElementsByTagName("input");

// Loop through each, looking for checkboxes

var i;

for( i=0; i< inputList.length;i++ )

{

// If input item does not have an ID, skip

if (! (inputList[i].id)) { continue; }

// Skip to next if ID doesn't start with "answer"

if (!answerRegex.test(inputList[i].id)) { continue; }

// Skip to next if not a checkbox

if (inputList[i].type.toUpperCase()!='CHECKBOX') { continue; }

// This is an answer checkbox!

// Setup onchange event

inputList[i].onclick = updatePrice;

}

// Load initial sum

updatePrice();

}

function updatePrice()

{

var labels=document.getElementsByTagName("LABEL");

// Define a regular expression to match a price inside parenthesis

// For example: ($29) or ($29.54).

// Set up

priceRegex = /$\$(\d*\.{0,1}\d+)$/;

// Loop through all the labels, looking for labels corresponding to

// answers that have a price in them.

var i;

var total = 0;

for( i=0; i<labels.length;i++ )

{

var myArray; // Define array used for regex matching

var inputID; // Define field element

// Get the ID of the field corresponding to the label using the

// "htmlFor" attribute

// (FYI, there are some labels that will have to be screened out

// because they don't correspond to an answer)

// Does the label start with "answer"?

// If not: exit.

if (!answerRegex.test(labels[i].htmlFor)) { continue; }

// First make sure this element exists

// If it doesn't, go to the next element

// If it does, it will be defined in inputID

if (! (inputID = document.getElementById(labels[i].htmlFor)) ) { continue; }

// See if the corresponding answer is a checkbox that is checked.

// If not, go to next label

if (inputID.type.toUpperCase()!='CHECKBOX') { continue; }

if (!inputID.checked) { continue; }

// This is label for an answer.

// The innerHTML will give us the text of the label

// The price information will be in the form ($XX.XX)

// which in contained in the label text.

// Find a match for a decimal number inside the pattern "($" and ")"

if [[myArray = priceRegex.exec(labels[i].innerHTML]] != null)

{

// Keep a running tally

total += parseFloat(myArray[1]);

}

}

// Update total price on form

document.getElementById("totalPrice").value = "$" + formatCurrency(total);

}

function formatCurrency(num) {

num = isNaN(num) || num <u> '' || num </u> null ? 0.00 : num;

return parseFloat(num).toFixed(2);

}

</script>

</syntaxhighlight>

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

<syntaxhighlight lang="php">Total Cost for selected accessories: <input type="readonly" value="" id="totalPrice" /></syntaxhighlight>

=Focus on the first Input field=

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

<div class="simplebox">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.</div>

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 </head> closing tag:

<syntaxhighlight lang="php">

<script type="text/javascript">

function focusFirst(Event)

{

var i=0;

while(document.forms[0].elements[i].type == "hidden")

{

i++;

}

document.forms[0].elements[i].focus();

return;

}

if(ie)

{ window.attachEvent("onload", focusFirst); }

else

{ document.addEventListener("load", focusFirst, true); }

</script>

</syntaxhighlight>

'''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:

<syntaxhighlight lang="php">

<script type="text/javascript">

var ie = false;

</script>

</syntaxhighlight>

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.

<syntaxhighlight lang="php">

<script type="text/javascript">

jQuery(document).ready(function() {

jQuery(document).bind('keypress', function(e){

if (48 <= e.which && e.which <= 57) {

jQuery('input:radio').each(function() {

var v = jQuery(this).val();

var c = (e.which <u> 48) ? 10 : e.which - 48;

if(v </u> 'Y' || v <u> 'N') {

v = (v </u> 'Y') ? 1 : 2;

}

if(v == c) {

jQuery(this).click();

jQuery('#limesurvey input:submit').click();

}

});

}

})

});

</script>

</syntaxhighlight>

=Math notation in LimeSurvey=
#download the js file from [http://mathcs.chapman.edu/~jipsen/mathml/asciimathdownload.html AsciiMath script]
#copy it in the /scripts/ folder in your installation
#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:

<syntaxhighlight lang="php">

<script type="text/javascript" src="ASCIIMathML.js">

</syntaxhighlight>

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 [http://www.imathas.com/editordemo/demo.html link for a TinyMCE with math support].

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

<div class="simplebox">As of version 2.06 this workaround is not required. It can be handled with subquestion relevance.</div>

''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:'''
*[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|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.<syntaxhighlight lang="javascript">function filterArrByCol(qMultiOpt, qArray, prevPage) {

// If filter question is on a previous page, hide Q1 and check all "visible" boxes
if(prevPage == 1) {
$('#question'+qMultiOpt+' li[id^="javatbd"]:visible input.checkbox').attr('checked', true);
$('#question'+qMultiOpt+'').hide();
}

// Assign classes to the answer cells
$('#question'+qArray+' td.answer-item').each(function(i){
var classArr = $(this).attr('class').split('answer_cell_00');
classArr = classArr[1].split(' ');
var ansCode = classArr[0];
$(this).addClass('ans-'+ansCode+' filtered');
});

// Assign classes to the answer label cells
$('#question'+qArray+' table.subquestions-list tbody tr:eq(0) td.answer-item').each(function(i){
var classArr2 = $(this).attr('class').split(' ans-');
var ansCode2 = classArr2[1];
$('#question'+qArray+' table.subquestions-list thead tr:eq(0) th:eq('+i+')').addClass('ans-'+ansCode2+'');
});

// Fire the filter function on page load
filterArr(qMultiOpt, qArray);

// Listener on multi-opt checkboxes to fire the filter function
$('#question'+qMultiOpt+' input.checkbox').click(function(){
filterArr(qMultiOpt, qArray);
});

// On submit, clear all hidden radios of array
$('#movenextbtn, #movesubmitbtn').click(function(){
$('#question'+qArray+' td.filtered:hidden').each(function(i){
$('input.radio', this).prop('checked', false);
});
return true;
});
}

function filterArr(qMultiOpt, qArray) {

if($('#question'+qMultiOpt+' input.checkbox:checked').length < 1) {
// Hide the array if no multi-opt options are checked
$('#question'+qArray+'').hide();
}
else {
$('#question'+qArray+'').show();

// Hide all columns of array
$('#question'+qArray+' table.subquestions-list tbody td.answer-item, #question'+qArray+' table.question thead th').hide();

// Loop through multi-opt checkboxes and, if checked, show corresponding column of array
$('#question'+qMultiOpt+' input.checkbox').each(function(i){
if($(this).prop('checked') == true) {
var classArr3 = $(this).attr('id').split('X'+qMultiOpt);
var ansCode3 = classArr3[1];
$('#question'+qArray+' .ans-'+ansCode3+'').show();
}
});
}
}</syntaxhighlight>

*If using LimeSurvey version 2.0 or older, place the following functions in your template.js file. These will be accessed by either method.<syntaxhighlight lang="javascript">
$(document).ready(function() {

function filterArrByCol(qMultiOpt, qArray, prevPage) {

// If filter question is on a previous page, hide Q1 and check all "visible" boxes
if(prevPage == 1) {
$('#question'+qMultiOpt+' li[id^="javatbd"]:visible input.checkbox').attr('checked', true);
$('#question'+qMultiOpt+'').hide();
}

// Assign classes to the answer cells
$('#question'+qArray+' table.question tbody td').each(function(i){
var classArr = $(this).attr('class').split('answer_cell_00');
var ansCode = classArr[1];
$(this).addClass('ans-'+ansCode+' filtered');
});

// Assign classes to the answer label cells
$('#question'+qArray+' table.question tbody tr:eq(0) td').each(function(i){
var classArr2 = $(this).attr('class').split(' ans-');
var ansCode2 = classArr2[1];
$('#question'+qArray+' table.question thead tr:eq(0) th:eq('+i+')').addClass('ans-'+ansCode2+'');
});

// Fire the filter function on page load
filterArr(qMultiOpt, qArray);

// Listener on multi-opt checkboxes to fire the filter function
$('#question'+qMultiOpt+' input.checkbox').click(function(){
filterArr(qMultiOpt, qArray);
});

// On submit, clear all hidden radios of array
$('#movenextbtn, #movesubmitbtn').click(function(){
$('#question'+qArray+' td.filtered:hidden').each(function(i){
$('input.radio', this).attr('checked', false);
});
return true;
});
}

function filterArr(qMultiOpt, qArray) {

if($('#question'+qMultiOpt+' input.checkbox:checked').length < 1) {
// Hide the array if no multi-opt options are checked
$('#question'+qArray+'').hide();
}
else {
$('#question'+qArray+'').show();

// Hide all columns of array
$('#question'+qArray+' table.question tbody td, #question'+qArray+' table.question thead th').hide();

// Loop through multi-opt checkboxes and, if checked, show corresponding column of array
$('#question'+qMultiOpt+' input.checkbox').each(function(i){
if($(this).attr('checked') == true) {
var classArr3 = $(this).attr('id').split('X'+qMultiOpt);
var ansCode3 = classArr3[1];
$('#question'+qArray+' .ans-'+ansCode3+'').show();
}
});
}
}
});</syntaxhighlight>

'''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).<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
filterArrByCol(MM, AA);
});
</script></syntaxhighlight>

'''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.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
filterArrByCol(MM, AA, 1);
});
</script></syntaxhighlight>

=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 [http://plugins.jquery.com/project/autotab 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.

Implementation is as follows:
#Visit [http://plugins.jquery.com/autotabs http://plugins.jquery.com/autotabs], download the plugin script and save it as ''jquery.autotab-1.1b.js'' in the template folder.
#Link to the script by placing ''<script type="text/javascript" src="{TEMPLATEURL}jquery.autotab-1.1b.js"></script>'' within the ''<head>'' tag of startpage.pstpl.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#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)
#Define a Maximum characters attribute for all questions that the autotab is applied to.
{{QS:maximum_chars}}
#In the source of the first question of the group that contains the auto-tabbed questions, add the following code.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answerSSSSSXGGXAA').focus(); //initially focus on the first input

$('#answerSSSSSXGGXAA').autotab({ target: 'answerSSSSSXGGXBB' });

$('#answerSSSSSXGGXBB').autotab({ previous: 'answerSSSSSXGGXAA', target: 'answerSSSSSXGGXCC' });

$('#answerSSSSSXGGXCC').autotab({ previous: 'answerSSSSSXGGXBB', target: 'answerSSSSSXGGXDD' });

$('#answerSSSSSXGGXDD').autotab({ previous: 'answerSSSSSXGGXCC' });

});

</script></syntaxhighlight>

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

[[File:ids_343x252.gif]]

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 [[Workarounds#Reverse_array_filter|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 [http://docs.jquery.com/Events/change 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.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#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

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answer11111X22X33').change(function() {

if ( $('#answer11111X22X33').val() > 10 ) {
alert ("That's an awful lot. Are you sure?");
}
});
});
</script></syntaxhighlight>

=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 [http://plugins.jquery.com/project/meioMask 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/ http://www.meiocodigo.com/projects/meiomask/] for more details on features and options.

Implementation for this demo was as follows:
#Visit [http://www.meiocodigo.com/projects/meiomask/ http://www.meiocodigo.com/projects/meiomask/], download the latest plugin script and save it as jquery.meiomask.js in the template folder.
#Link to the script by placing <script type="text/javascript" src="{TEMPLATEURL}jquery.meiomask.js" charset="utf-8"></script> within the <head> tag of startpage.pstpl.
#Turn off $filterxsshtml to allow insertion of JavaScript in the questions. ([http://docs.limesurvey.org/tiki-index.php?page=Optional+settings&structure=English+Instructions+for+LimeSurvey#Filtering_dangerous_HTML_tags_in_survey_objects See documentation here])
#Create the text input questions that the masks are to be applied to
#In the source of the help section of the first question of the group that contains the masked inputs, add the following code. ([http://docs.limesurvey.org/tiki-index.php?page=Workarounds&structure=English+Instructions+for+LimeSurvey#How_to_use_Script_eg._JavaScript_etc._ See How to use script here])

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Define custom masks
$.mask.masks = $.extend($.mask.masks,{
customMask1:{ mask: 'a9a 9a9' }, // Canadian postal code
// Maximum input of 9,999.99, reverse input, default value of 0.00
customMask2:{ mask: '99.999,9', type : 'reverse', defaultValue : '000' }
});

// Set the 'alt' attributes of the inputs
$('#answer111111X22XAA').attr('alt', 'phone-us'); // a pre-defined mask
$('#answer111111X22XBB').attr('alt', 'customMask1'); // a custom mask
$('#answer111111X22XCC').attr('alt', 'customMask2'); // a custom mask
$('#answer111111X22XDD').attr('alt', 'cc'); // a pre-defined mask for credit card

// Tell the plugin to apply masks to these inputs
$('input:#answer111111X22XAA').setMask();
$('input:#answer111111X22XBB').setMask();
$('input:#answer111111X22XCC').setMask();
$('input:#answer111111X22XDD').setMask();
});
</script>
</syntaxhighlight>

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 [http://www.meiocodigo.com/projects/meiomask/#mm_options 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

[[File:Ids 343x252.gif]]

=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/ http://digitalbush.com/projects/masked-input-plugin/] for more details on features and options.

Implementation as follows:

#Visit [http://digitalbush.com/projects/masked-input-plugin/ http://digitalbush.com/projects/masked-input-plugin/], download the latest plugin script and save it as jquery.maskedinput.js in the template folder.
#Link to the script by placing <script type="text/javascript" src="{TEMPLATEURL}jquery.maskedinput.js" charset="utf-8"></script> within the <head> tag of startpage.pstpl.
#Turn off $filterxsshtml to allow insertion of JavaScript in the questions. ([http://docs.limesurvey.org/tiki-index.php?page=Optional+settings&structure=English+Instructions+for+LimeSurvey#Filtering_dangerous_HTML_tags_in_survey_objects See documentation here])
#Create the text input questions that the masks are to be applied to
#In the source of the help section of the first question of the group that contains the masked inputs, add the following code. ([http://docs.limesurvey.org/tiki-index.php?page=Workarounds&structure=English+Instructions+for+LimeSurvey#How_to_use_Script_eg._JavaScript_etc._ See How to use script here])

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function($) {
$("#answer55431X1X5").mask("999-99-9999",{ placeholder:"#" });
});
</script>
</syntaxhighlight>

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.
<br /><br />
'''DOWNLOAD:'''<br />
- [[Media:Demo_Random_Option_From_Multi-Choice_v206.1.zip|Demo survey for LS 2.06]]<br />
- [[Media:Demo_Random_Option_From_Multi-Choice_v25.1.zip|Demo survey for LS 2.5]]<br />
<br />
'''IMPLEMENTATION''' (LimeSurvey version 2.06)<br />

#[https://manual.limesurvey.org/Workarounds:_Manipulating_a_survey_at_runtime_using_Javascript#How_to_use_Script_.28eg._JavaScript_etc..29_in_LimeSurvey.3F Set up your survey to use JavaScript].
#Create a "Multiple options" question
#Immediately following that question, create a short-text question to store the label of the checked box in (we'll hide this with JavaScript)
#Place the script below in the source of the multiple options question. <syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// Identify the questions
var thisQuestion = $('#question{QID}');
var qHidden = thisQuestion.nextAll('.text-short:eq(0)');
var hiddenInput = $('input.text', qHidden);

// Hide qHidden
qHidden.hide();

// Listener on the checkboxes
$('input.checkbox', thisQuestion).on('change', function(e) {
handleChecked();
});

// Listener on the "Other" input
$('input.text', thisQuestion).on('keyup change', function(e) {
setTimeout(function() {
handleChecked();
}, 250);
});

function handleChecked() {
// Build an array of checked answers
var checkedAnswers = [];
$('input.checkbox:checked', thisQuestion).each(function(i) {
if($(this).closest('.answer-item').hasClass('other-item')) {
checkedAnswers.push($(this).closest('.other-item').find('input.text').val());
}
else {
checkedAnswers.push($(this).nextAll('label:eq(0)').text());
}
});

// Load the hidden question with a random item from the array
var checkedLength = checkedAnswers.length;
$(hiddenInput).val(checkedAnswers[Math.floor(Math.random()*checkedLength)]);

// Fire ExpressionScript
checkconditions(hiddenInput.value, hiddenInput.name, hiddenInput.type);
}
});
</script></syntaxhighlight>
<br />
'''IMPLEMENTATION''' (LimeSurvey version 2.5)

#Follow the first 3 implementation steps above
#Place the script below in the source of the multiple options question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// Identify the questions
var thisQuestion = $('#question{QID}');
var qHidden = thisQuestion.nextAll('.text-short:eq(0)');
var hiddenInput = $('input.text', qHidden);

// Hide qHidden
qHidden.hide();

// Class for "Other
$('input.text', thisQuestion).closest('.answer-item').addClass('other-item');

// Listener on the checkboxes
$('input.checkbox', thisQuestion).on('change', function(e) {
handleChecked();
});

// Listener on the "Other" input
$('input.text', thisQuestion).on('keyup change', function(e) {
setTimeout(function() {
handleChecked();
}, 250);
});

function handleChecked() {
// Build an array of checked answers
var checkedAnswers = [];
$('input.checkbox:checked', thisQuestion).each(function(i) {
if($(this).closest('.answer-item').hasClass('other-item')) {
checkedAnswers.push($(this).closest('.answer-item').find('input.text').val());
}
else {
checkedAnswers.push($.trim($(this).nextAll('.label-text:eq(0)').text()));
}
});

// Load the hidden question with a random item from the array
var checkedLength = checkedAnswers.length;
$(hiddenInput).val(checkedAnswers[Math.floor(Math.random()*checkedLength)]);

// Fire ExpressionScript
checkconditions(hiddenInput.value, hiddenInput.name, hiddenInput.type);
}
});
</script></syntaxhighlight>

=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:<br />
[[File:Secondary_options_1.png]]

Primary option selected:<br />
[[File:Secondary_options_2.png]]<br /><br />

'''DOWNLOADS:'''<br />
- [[Media:Demo_Secondary_Checkboxes.zip|Demo template for LS version 2.06]]<br />
- [[Media:Demo_Secondary_Checkboxes.lss|Demo survey for LS version 2.06]].<br />
- [[Media:Template_Demo_Secondary_Checkboxes_For_2.5.zip|Demo template for LS version 2.5]]<br />
- [[Media:Survey_Demo_Secondary_Multiple_Options_For_LS_25.zip|Demo survey for LS version 2.5]].<br /><br />

==LimeSurvey version 2.06==

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create a "Multiple options" question including both the primary and secondary subquestions (in the order that you would like them displayed if all shown).
#Add the following function to the end of template.js:<syntaxhighlight lang="javascript">
// A function to handle "secondary" checkboxes
function secondaryCheckboxes(qID, primaryPosition, secondaryCount) {
// Identify the elements
var thisQuestion = $('#question'+qID);
var primaryRow = $('li.question-item:eq('+(primaryPosition-1)+')', thisQuestion);
var primaryInput = $('input.checkbox', primaryRow);
var secondaryRows = primaryRow.nextAll('li.question-item:lt('+(secondaryCount)+')');
var secondaryInputs = $('input.checkbox', secondaryRows);

// Indent the secondaries
secondaryRows.css({ 'margin-left':'2.5em' });

// Initial states of the secondary answers
if (primaryInput.prop('checked') == false ) {
secondaryRows.hide();
}

// A listener on the primary answer to show or hide secondary answers
primaryInput.click(function (event) {

// Hide/show the secondary answers accordingly
if (!$(this).is(':checked')) {
secondaryRows.hide();
secondaryInputs.prop('checked', false);
secondaryInputs.each(function(i) {
checkconditions(this.value, this.name, this.type);
});
}
else {
secondaryRows.show();
}
});
}</syntaxhighlight>
#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. <br />So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Sub-question 1 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 1, 2);
// Sub-question 6 is primary followed by 3 secondaries
secondaryCheckboxes({QID}, 6, 3);
});
</script></syntaxhighlight>

==LimeSurvey version 2.5==

#Follow the first 2 implementation steps above
#Add the following function to the end of template.js:<syntaxhighlight lang="javascript">
// A function to handle "secondary" checkboxes
function secondaryCheckboxes(qID, primaryPosition, secondaryCount) {
// Identify the elements
var thisQuestion = $('#question'+qID);
$('div.question-item', thisQuestion).parent().addClass('answer-row');
var primaryRow = $('div.question-item:eq('+(primaryPosition-1)+')', thisQuestion).closest('.answer-row');
var primaryInput = $('input.checkbox', primaryRow);
var secondaryRows = primaryRow.nextAll('div.answer-row:lt('+(secondaryCount)+')');
var secondaryInputs = $('input.checkbox', secondaryRows);

// Indent the secondaries
secondaryRows.css({ 'margin-left':'2.5em' });

// Initial states of the secondary answers
if (primaryInput.prop('checked') == false ) {
secondaryRows.hide();
}

// A listener on the primary answer to show or hide secondary answers
primaryInput.click(function (event) {

// Hide/show the secondary answers accordingly
if (!$(this).is(':checked')) {
secondaryRows.hide();
secondaryInputs.prop('checked', false);
secondaryInputs.each(function(i) {
checkconditions(this.value, this.name, this.type);
});
}
else {
secondaryRows.show();
}
});
}</syntaxhighlight>
#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. <br />So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Sub-question 1 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 1, 2);
// Sub-question 6 is primary followed by 3 secondaries
secondaryCheckboxes({QID}, 6, 3);
});
</script></syntaxhighlight>

==LimeSurvey version 3.x==

#Follow the first 2 implementation steps above
#Add the following function to the end of custom.js:<syntaxhighlight lang="javascript">
// A function to handle "secondary" checkboxes
function secondaryCheckboxes(qID, primaryPosition, secondaryCount) {
// Identify the elements
var thisQuestion = $('#question'+qID);
var primaryRow = $('li.question-item:eq('+(primaryPosition-1)+')', thisQuestion).closest('li.question-item');
var primaryInput = $('input:checkbox', primaryRow);
var secondaryRows = primaryRow.nextAll('li.question-item:lt('+(secondaryCount)+')');
var secondaryInputs = $('input:checkbox', secondaryRows);

// Indent the secondaries
secondaryRows.css({ 'margin-left':'2.5em' });

// Initial states of the secondary answers
if (primaryInput.prop('checked') == false ) {
secondaryRows.hide();
}

// A listener on the primary answer to show or hide secondary answers
primaryInput.on('change', function (event) {

// Hide/show the secondary answers accordingly
if (!$(this).is(':checked')) {
secondaryRows.hide();
secondaryInputs.prop('checked', false).trigger('change');
}
else {
secondaryRows.show();
}
});
}</syntaxhighlight>
#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. <br />So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Sub-question 1 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 1, 2);
// Sub-question 6 is primary followed by 3 secondaries
secondaryCheckboxes({QID}, 6, 3);
});
</script></syntaxhighlight>

=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.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#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.

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

minTime(TT);

function minTime(minTime) {

var startTime = new Date();

$('#movenextbtn, #movesubmitbtn').click(function(){

var endTime = new Date();

if((endTime - startTime)/1000 <= minTime) {
alert ('You must spend at least '+minTime+' seconds on the question.');
return false;
}
else {
return true;
}
});
}
});
</script>
</syntaxhighlight>

=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''

<div class="simplebox">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.</div>

<div class="simplebox">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.</div>

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.

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].

#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.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

minChar(QQ, CC);

function minChar(qID, minChars) {

$('#movenextbtn, #movesubmitbtn').click(function(){

if($('#question'+qID+' textarea').val().replace(/ /g,'').length < minChars) {

alert ('You must enter at least '+minChars+' characters.');

return false;

}

else {

return true;

}

});

}

});

</script></syntaxhighlight>

=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.

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:

#Set up your survey to use JavaScript (See instructions [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|here]])

#Add the following script to your ''template.js'' file.

#Replace "QQ" in the function call at the end with the question ID.

#Create one or more Array (Multi Flexible Text) questions

#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);...)

<syntaxhighlight lang="javascript">$(document).ready(function() {

// A function to add or remove rows of an Array (Multi Flexible)(Text) question
function varLengthArray(qID) {

if ($('#question'+qID+'').length > 0) {

// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+]';
var removeContent = '[-]';

// Create the Add and Remove elements & insert them
var el1 = document.createElement('div');
el1.setAttribute('id','addButton'+qID);
document.body.appendChild(el1);
var el2 = document.createElement('div');
el2.setAttribute('id','removeButton'+qID);
document.body.appendChild(el2);

// Move them to after the array
$( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.question' ).parent());
$( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.question' ).parent());

// Insert their HTML
$( 'div#addButton'+qID ).html( addContent );
$( 'div#removeButton'+qID ).html( removeContent );

// Style the elements - you can modify here if you wish
$( 'div#addButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

$( 'div#removeButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

// Initially hide the Remove element
$( 'div#removeButton'+qID ).hide();

// Call the functions below when clicked
$( 'div#addButton'+qID ).click(function (event) {
addRow(qID);
});
$( 'div#removeButton'+qID ).click(function (event) {
removeRow(qID);
});

// Function to add a row, also shows the Remove element and hides the
//Add element if all rows are shown
function addRow(qID) {
var arrayRow = '#question' + qID + ' table.question tbody';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' ) {
$( 'div#addButton'+qID ).hide();
}
}

// Function to remove a row, also clears the contents of the removed row,
// shows the Add element if the last row is hidden and hides the Remove
// element if only the first row is shown
function removeRow(qID) {
var arrayRow = '#question' + qID + ' table.question tbody';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
$( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
$( 'div#addButton'+qID ).show();
if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' ) {
$( 'div#removeButton'+qID ).hide();
}
}

// Just some initialization stuff
var arrayRow = '#question' + qID + ' table.question tbody';
var rowCount = '';

// Initially hide all except first row or any rows with populated inputs
$( arrayRow ).each(function(i) {
if ( i > 0 ) {
// We also need to give the hidden rows a name cause IE doesn't
// recognize jQuery :visible selector consistently
$( this ).attr('name', 'hidden').hide();

$('input[type=text]', this).each(function(i) {
if ($(this).attr('value') != '') {
$(this).parents('tbody:eq(0)').attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
}
});
rowCount = i;
}
});
}
}

// Call the function with a question ID
varLengthArray(QQ);

});</syntaxhighlight>

''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.

<syntaxhighlight lang="javascript">$(document).ready(function() {

// A function to add or remove rows of an Array (Multi Flexible)(Text) question
function varLengthArray(qID) {

if ($('#question'+qID+'').length > 0) {

// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+]';
var removeContent = '[-]';

// Create the Add and Remove elements & insert them
var el1 = document.createElement('div');
el1.setAttribute('id','addButton'+qID);
document.body.appendChild(el1);
var el2 = document.createElement('div');
el2.setAttribute('id','removeButton'+qID);
document.body.appendChild(el2);

// Move them to after the array
$( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());
$( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());

// Insert their HTML
$( 'div#addButton'+qID ).html( addContent );
$( 'div#removeButton'+qID ).html( removeContent );

// Style the elements - you can modify here if you wish
$( 'div#addButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

$( 'div#removeButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

// Initially hide the Remove element
$( 'div#removeButton'+qID ).hide();

// Call the functions below when clicked
$( 'div#addButton'+qID ).click(function (event) {
addRow(qID);
});
$( 'div#removeButton'+qID ).click(function (event) {
removeRow(qID);
});

// Function to add a row, also shows the Remove element and hides the
//Add element if all rows are shown
function addRow(qID) {
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' ) {
$( 'div#addButton'+qID ).hide();
}
}

// Function to remove a row, also clears the contents of the removed row,
// shows the Add element if the last row is hidden and hides the Remove
// element if only the first row is shown
function removeRow(qID) {
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
$( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
$( 'div#addButton'+qID ).show();
if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' ) {
$( 'div#removeButton'+qID ).hide();
}
}

// Just some initialization stuff
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = '';

// Initially hide all except first row or any rows with populated inputs
$( arrayRow ).each(function(i) {
if ( i > 0 ) {
// We also need to give the hidden rows a name cause IE doesn't
// recognize jQuery :visible selector consistently
$( this ).attr('name', 'hidden').hide();

$('input[type=text]', this).each(function(i) {
if ($(this).attr('value') != '') {
$(this).parents('tbody:eq(0)').attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
}
});
rowCount = i;
}
});
}
}

// Call the function with a question ID
varLengthArray(QQ);

});</syntaxhighlight>

=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.

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:
#Set up your survey to use JavaScript. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|documentation here]])
#Create one or more Array questions
#In the source of the first array question add the following script.
#Replace "QQ" in the function call at the end of the script with the question ID of the array you would like to manipulate.
#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);...)

<syntaxhighlight lang="javascript">
<script type="text/javascript">

$(document).ready(function() {

// A function to show subsequent rows of an array as options are checked
function expandingArray(qID) {

// Build an array of the question rows
var arrayRow = '#question' + qID + ' table.question tbody tr';

// Initially hide all rows unless an input was previously checked
$( arrayRow ).each(function(i) {

if ( $( arrayRow + ':eq(' + i + ') input.radio:checked' ).length != 0 ) {
$(this).attr('name', 'clickedRow');
}
else {
$(this).attr('name', 'hidden').hide();
}
});

// Now show the first hidden row
addRow();

// Add another row when an option is checked for the first time
$( '#question' + qID + ' td.answer input.radio' ).click(function (event) {

if ($(this).parents('tr:eq(0)').attr('name') != 'clickedRow') {
addRow();
$(this).parents('tr:eq(0)').attr('name', 'clickedRow');
}

// The original function of the click event
checkconditions(this.value, this.name, this.type);
});

// Add another row when an table cell is clicked for the first time
$( '#question' + qID + ' table.question tbody td' ).click(function (event) {

if ($(this).parents('tr:eq(0)').attr('name') != 'clickedRow') {
addRow();
$(this).parents('tr:eq(0)').attr('name', 'clickedRow');
}
});

// Function to add a row
function addRow() {
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
// Now, scroll down
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
}
}

// Call the function with a question ID
expandingArray(QQ);

});
</script></syntaxhighlight>

=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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create an Array type question.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedCode" value as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// The subquestion code to place in the last position
var fixedCode = 'A1';

// Identify this question
var q1ID = {QID};
var thisQuestion = $('#question'+q1ID);

// Move the "fixed" row to the end
$('table.subquestion-list tbody', thisQuestion).append($('tr[id$="X'+q1ID+fixedCode+'"]'));

// Fix up the array row background colours
$('tr.answers-list', thisQuestion).each(function(i){
$(this).removeClass('array1 array2').addClass('array'+(2-(i%2)));
});

});
</script></syntaxhighlight>

'''Download sample survey:'''<br />
[[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:

[[File:random_336x179gif.gif]]

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)

[[File:Partially_Randomized_Answers_1.png]]

Implementation is as follows:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' li.answer-item').length;

// Place the last answer created at the end of the list
var answer = $( 'input[id$="X'+qID+ansCount+'"]');
var answerItem = $(answer).closest('li');
var answersList = $(answer).closest('ul');
$(answersList).append(answerItem);

});
</script></syntaxhighlight>

'''Download sample survey:'''<br />
[[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:

[[File:Random v2.50.png]]

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)

[[File:Random answers v2.50.png]]

==LimeSurvey version 2.06==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedAnswers" and "otherFixed" variables as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// The number of answers to be fixed at the end of the list
var fixedAnswers = 2;

// Set this to "true" if you want "Other" to be fixed in the last position
var otherFixed = false;

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' li.answer-item').length;
if($('#question'+qID+' input[type="text"]').length > 0) {
ansCount = ansCount -1
}

// Place the last n answers created at the end of the list
var fixedIndex = fixedAnswers - 1;
for (var i=0; i<fixedAnswers; i++) {
var answer = $( 'input[id$="X'+qID+(ansCount-fixedIndex)+'"]');
var answerItem = $(answer).closest('li');
var answersList = $(answer).closest('ul');
$(answersList).append(answerItem);
fixedIndex--;
}

// Handle "Other"
if(otherFixed == true && $('#question'+qID+' input[type="text"]').length > 0) {
var otherAnswer = $('#question'+qID+' input[type="text"]');
var otherAnswerItem = $(otherAnswer ).closest('li');
var otherAnswersList = $(otherAnswer ).closest('ul');
$(otherAnswersList).append(otherAnswerItem);
}
});
</script></syntaxhighlight>

<br /><br />
==LimeSurvey version 2.73.0:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedAnswers" and "otherFixed" variables as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// The number of answers to be fixed at the end of the list
var fixedAnswers = 2;

// Set this to "true" if you want "Other" to be fixed in the last position
var otherFixed = false;

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' .answer-item').length;
if($('#question'+qID+' input[type="text"]').length > 0) {
ansCount = ansCount -1
}

// Place the last n answers created at the end of the list
var fixedIndex = fixedAnswers - 1;
for (var i=0; i<fixedAnswers; i++) {
var answer = $('input[id^="answer"][id$="X'+qID+'s'+(ansCount-fixedIndex)+'"]');
var answerItem = $(answer).closest('.answer-item');
var answersList = $(answer).closest('.answers-list');
if($('#question'+qID).hasClass('multiple-opt')) {
answer = $('input[id^="answer"][id$="X'+qID+(ansCount-fixedIndex)+'"]');
answerItem = $(answer).closest('.answer-item').parent();
answersList = $(answer).closest('.subquestion-list');
}
$(answersList).append(answerItem);
fixedIndex--;
}

// Handle "Other"
if(otherFixed == true && $('#question'+qID+' input[type="text"]').length > 0) {
var otherAnswer = $('#question'+qID+' input[type="text"]');
var otherAnswerItem = $(otherAnswer ).closest('.answer-item');
var otherAnswersList = $(otherAnswer ).closest('.answers-list');
if($('#question'+qID).hasClass('multiple-opt')) {
otherAnswerItem = $(otherAnswer ).closest('.answer-item').parent();
otherAnswersList = $(otherAnswer ).closest('.subquestion-list');
}
$(otherAnswersList).append(otherAnswerItem);
}
});
</script></syntaxhighlight>

<br /><br />
==LimeSurvey version 3.x:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedAnswers" and "otherFixed" variables as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).on('ready pjax:scriptcomplete',function(){

// The number of answers to be fixed at the end of the list
var fixedAnswers = 2;

// Set this to "true" if you want "Other" to be fixed in the last position
var otherFixed = false;

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' .answer-item').length;
if($('#question'+qID+' input[type="text"]').length > 0) {
ansCount = ansCount -1
}
console.log(ansCount);

// Place the last n answers created at the end of the list
var fixedIndex = fixedAnswers - 1;
for (var i=0; i<fixedAnswers; i++) {
var answer = $('input[id^="answer"][id$="X'+qID+(ansCount-fixedIndex)+'"]');
var answerItem = $(answer).closest('.answer-item');
var answersList = $(answer).closest('ul');
$(answersList).append(answerItem);
fixedIndex--;
}

// Handle "Other"
if(otherFixed == true && $('#question'+qID+' input[type="text"]').length > 0) {
var otherAnswer = $('#question'+qID+' input[type="text"]');
var otherAnswerItem = $(otherAnswer ).closest('.answer-item');
var otherAnswersList = $(otherAnswer ).closest('ul');
$(otherAnswersList).append(otherAnswerItem);
}
});
</script></syntaxhighlight>

=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.

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

[[File:random_700x154.png]]

Implementation is as follows:
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])
#Create one or more List (dropdown) questions with sequential response codes. Set the [[Advanced question settings#random order|random_order question attribute]] to 1.
#In the source of the first question add the following onload function. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]])
#Replace the ID question at the end of the function call.

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Function to allow randomization of all answers
//except the last one in List/dropdown questions
function partRandDD(qID) {

// Find the last answer option
var ansCount = $( 'div#question' + qID + ' select option' ).length - 1;

// Place the last answer option at the end of the list
$( 'div#question' + qID + ' select option[value="' + ansCount + '"]' )
.appendTo($( 'div#question' + qID + ' select' ));
}

// Call the function with the qID (replace the qID eg. partRandDD(244))
partRandDD(qID);
//If you want to apply it to more questions on the same page simply add more calls with the appropriate IDs.
partRandDD(qID);
});
</script></syntaxhighlight>

=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)

[[File:random_700x154.png]]

Implementation is as follows:
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])
#Create one or more Multiple numerical input question with sequential response codes. Set the [[Advanced question settings#random order|random_order question attribute]] to 1.
#In the source of the first question add the following onload function. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]])
#Replace "SSSSS", "GG", "QQ" in the function call at the end with the survey ID, group ID and question ID respectively.
#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); ...)

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Function to allow randomization of all answers except the last one in multiple numeric input questions
function partRand(sID, gID, qID) {

// Find the number of answers
var ansCount = ''
$( 'div#question' + qID + ' div.answers li' ).each(function(i) {
ansCount = (i - 1);
});

// Place the last answer created at the end of the list - but before the first helping sum
$( 'li#javatbd' + sID + 'X' + gID + 'X' + qID + ansCount + '' ).insertBefore($( 'div#question' + qID + ' div.answers li.multiplenumerichelp' ).first());

}

// Call the function with the SID, GID and QID
partRand(SID, GID, QID);

});

</script></syntaxhighlight>

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 (<nowiki><ul></nowiki>) 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=

{{Hint|Text=With Expression manager, you can use [[Expression_Manager_Examples#Using_em_validation_q_in_array|Using em_validation_q in array]] system.}}

''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 [http://www.partnersinc.biz/surveys//index.php?sid=26842&newtest=Y&lang=en 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:
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions (see [[Optional settings#Security|documentation here]]).
#Create the array question.
#In the source of the array question add the following script (see [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]]).
#Modify the warningText (line10)as required.
#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.

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function () {

// Interrupt the submit function
$('form#limesurvey').submit(function () {

// Override the built-in "disable navigation buttons" feature
$('#moveprevbtn, #movenextbtn, #movesubmitbtn').attr('disabled', '');

var empty = 0;
var warningText = 'Please complete the highlighted inputs.';

// Call the mandatory row function with question IDs and row numbers
mandatoryRow(QQ, 1);
mandatoryRow(QQ, 3);

// A function to render rows of an array mandatory
function mandatoryRow(qID, rowNum) {

$('div#question' + qID + ' table.question tbody[id^="javatbd"]:eq(' + Number(rowNum - 1) + ') input[type="text"]').each(function (i) {

if ($(this).val() == '') {
$(this).css('background-color', 'pink');
empty = 1;
}
else {
$(this).css('background-color', '#FFFFFF');
}
});
}

if (empty == 1) {
alert(warningText);
return false;
}
else {
return true;
}
});

});

</script></syntaxhighlight>

=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|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:

<syntaxhighlight lang="javascript">

Please have a look at this picture:

<br />

<script>

$(document).ready(

function(){

// Find a random number (here between 1 and 4)

var randNumber = Math.floor(Math.random()*4 + 1);

// Save the number as answer of this question

$('input#answerSSSSSXGGXQQ').val(randNumber);

// Hide this answer field

document.getElementById("answerSSSSSXGGXQQ").style.display='none';

// Show the picture

picString = '<img src="pic/' + String(randNumber) + '.jpg">';

document.getElementById('pic').innerHTML = picString;

}

);</script>

<p>

</p>

<div id="pic">

</div>

</syntaxhighlight>

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):

<syntaxhighlight lang="javascript">

You saw picture number {INSERTANS:SSSSSXGGXQQ}.

</syntaxhighlight>

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:

<syntaxhighlight lang="javascript">

Here you see the picture again: <br>

<script>

$(document).ready(

function(){

// Get the picture number from previous question

var randNumber = "{INSERTANS:SSSSSXGGXQQ}";

// Show picture

picString = '<img width="100" height="100" src="pic/' + String(randNumber) + '.jpg">';

document.getElementById('pic').innerHTML = picString;

}

);</script>

<div id="pic">

</div>

</syntaxhighlight>

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

''Tested in 1.85+''

<div class="simplebox">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.</div>

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:

<syntaxhighlight lang="javascript">

<script type="text/javascript" charset="utf-8">

function Custom_On_Load(){

document.getElementById('answer1000X10X11').value='{TOKEN:ATTRIBUTE_1}';

document.getElementById('answer1000X10X11').readOnly=1;

}

</script>

</syntaxhighlight>

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:

<syntaxhighlight lang="javascript">

document.getElementById('question85').style.display='none';

document.getElementById('display85').value='';

</syntaxhighlight>

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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use script]].
#Create the array question.
#In the source of the array question add the following script.
#Replace"QQ" with the question ID and "CC" with the column number to be checked.

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// A function to pre-check a column of an array
function checkedDefault(qID, column) {
var checkedCol = column - 1;
$('#question'+qID+' tr.subquestions-list').each(function(i) {
if ($('input.checkbox:checked', this).length == 0) {
$('input.checkbox:eq('+checkedCol+')', this).prop('checked', true);
$('input.checkbox:eq('+checkedCol+')', this).parent().find('input[type="hidden"]').val(1);
}
});
}
// Call the function with a question ID and column number
checkedDefault(QQ, CC);
});

</script></syntaxhighlight>

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

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

'''Overview'''<br />
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:'''
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use script]].
#Create the array question.
#In the source of the array question add the following script.
#Adjust "''defaultAnsweredScale''" and "''defaultAnsweredColumn''" as necessary.

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Scale to set the default answer on
var defaultAnsweredScale = 2;
// Column of that scale to set as default answer
var defaultAnsweredColumn = 3;

// Identify this question
var thisQuestion = $('#question{self.qid}');

// Identify the scales and columns
$('.answer-item[class^="answer_cell_1"]', thisQuestion).addClass('scale-1-item');
$('.answer-item[class^="answer_cell_2"]', thisQuestion).addClass('scale-2-item');
$('tr.answers-list', thisQuestion).each(function(i) {
$('.scale-1-item', this).each(function(i) {
$(this).addClass('scale-1-column-'+(i+1)+'-item');
});
$('.scale-2-item', this).each(function(i) {
$(this).addClass('scale-2-column-'+(i+1)+'-item');
});
});

// Click the default answers
$('tr.answers-list', thisQuestion).each(function(i) {
if($('.scale-'+defaultAnsweredScale+'-item input[type="radio"]:checked', this).length == 0) {
$('.scale-'+defaultAnsweredScale+'-column-'+defaultAnsweredColumn+'-item input[type="radio"]:last', this).click();
}
});
});
</script></syntaxhighlight>

'''Download sample survey:'''<br />
[[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''

<div class="simplebox">As of version 1.92, group view time is accurately recorded in the timings table if you choose the Record Timings survey option.</div>

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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#In the group, create a short-text question. We will hide this later with JavaScript and populate it with the elapsed time.
#Place the following script in the source of the short-text question.
#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.

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

// call the functions with the hidden timer question ID

runTimer(QQ);

function runTimer(timeQID) {

$('#question'+timeQID).hide();

var initSec = '0';

// Check for elapsed time from previous visits

if ($('#question'+timeQID+' input.text').val()) {

var initTime = $('#question'+timeQID+' input.text').val();

initTimeArr = initTime.split(':');

initSec = Number[[initTimeArr[0]*3600]]+Number[[initTimeArr[1]*60]]+Number(initTimeArr[2]);

}

// Run the timer update function

recordTime(initSec, timeQID);

}

});

// Timer update function

function recordTime(elapsedSec, timeQID){

elapsedSec++;

var h = Math.floor(elapsedSec / 3600);

var m = Math.floor(elapsedSec % 3600 / 60);

var s = Math.floor(elapsedSec % 3600 % 60);

var elapsedTime = [[h > 0 ? h + ":" : "00:") + (m > 0 ? (m < 10 ? "0" : "") + m + ":" : "00:") + (s < 10 ? "0" : "") + s);

$('#question'+timeQID+' input.text').val(elapsedTime);

// Run the timer update function every second

setTimeout('recordTime('+elapsedSec+', '+timeQID+')',1000);

}

</script>

</syntaxhighlight>

=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 [http://www.partnersinc.biz/surveys//index.php?sid=33613&newtest=Y&lang=en demonstrated here].

Implementation is as follows:

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Set the survey to run in "all in one" mode.
#Add your groups and questions.
#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:

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

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

// Insert show/hide divs before all group wrapper divs
$('<div class="groupToggler"><span></span></div>').insertBefore('div[id^="group-"]');

// Add some text to the show/hide divs
$('.groupToggler span').each(function(i) {
($( this ).text('Show/Hide Group '+(i+1)+''));
});

// Add some styles to the show/hide divs
$('.groupToggler').css({
'padding':'5px 0 10px 0',
'text-align':'center'
});
$('.groupToggler span').css({
'text-decoration':'underline',
'cursor':'pointer'
});

// Add some hover effects to the show/hide divs
$(".groupToggler span").hover(
function () {
$(this).css({
'text-decoration':'none',
'font-weight':'bold'
});
},
function () {
$(this).css({
'text-decoration':'underline',
'font-weight':'normal'
});
}
);

// Initially hide all of the groups
// Toggle their visibility when the show/hide is clicked
$('.groupToggler span').click(function() {
$(this).parent().next().toggle();
return false;
}).parent().next().hide();

// Display any groups that have unanswered mandatories
$('.errormandatory').parents('div[id^="group-"]').show();

// Some tidying up
$('h1').next().next().hide();
$('.surveywelcome').css({
'margin-bottom':'10px'
});
$('.surveywelcome').next().hide();
$('.surveywelcome').next().next().hide();

});

</script></syntaxhighlight>

=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 [http://jqueryui.com/demos/autocomplete/ 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

<syntaxhighlight lang="css">/* Autocomplete styles */

ul.ui-autocomplete {
width: 250px !important;
padding: 5px 10px;
list-style: none;
}</syntaxhighlight>

'''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)

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var q1ID = 'QQ';

var states = "Alabama,Alaska,Arizona,Arkansas,California,Colorado,Connecticut,Delaware, District of Columbia,Florida,Georgia,Hawaii,Idaho,Illinois,Indiana,Iowa,Kansas,Kentucky, Louisiana,Maine,Montana,Nebraska,Nevada,New Hampshire,New Jersey,New Mexico,New York, North Carolina,North Dakota,Ohio,Oklahoma,Oregon,Maryland,Massachusetts,Michigan, Minnesota,Mississippi,Missouri,Pennsylvania,Rhode Island,South Carolina,South Dakota, Tennessee,Texas,Utah,Vermont,Virginia,Washington,West Virginia,Wisconsin,Wyoming".split(',');

$('#question'+q1ID+' input.text').autocomplete({
source: states
});

});

</script></syntaxhighlight>

'''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:

<syntaxhighlight lang="php"><?php

$countriesArr = array();

$file_handle = fopen("countries2.csv", "r");

while (!feof($file_handle) ) {
$line_of_text = fgetcsv($file_handle);
array_push($countriesArr, $line_of_text[0]);
}

fclose($file_handle);

echo json_encode($countriesArr);

?></syntaxhighlight>

JavaScript code:

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;
var url = "templates/yourTemplate/countries.php";
var dataArr = [];

$.getJSON(url,function(data){

$.each(data,function(i, item){
dataArr.push(item);
});

$('#question'+qID+' input.text').autocomplete({
source: dataArr
});

});

});

</script></syntaxhighlight>

<br />
== 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:'''
<ol><li>Download the jQuery Autocomplete widget</li>
<li>Add special autocomplete styling to the survey template (tested with the Skeletonquest template by Denis Chenu)</li>
</ol>

This workaround builds on the previous examples, but is updated for use with newer versions of LimeSurvey. Note that the [http://jqueryui.com/demos/autocomplete/ Autocomplete widget] is already included in LimeSurvey, as part of jQuery UI.

<br />
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.

<br />
'''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 [http://jqueryui.com/demos/autocomplete/ jQuery website] for example):

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 1;

$('#question'+qID+' input[type="text"]').autocomplete({
minLength: 2, // This line is optional, signifies number of keystrokes before autocomplete is initiated
source: ["Test1","Test2","Test3"]
});

});

</script>
</syntaxhighlight>

<br />
'''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:
<ol><li>A comma-separated data file (CSV)</li>
<li>The [https://code.google.com/p/jquery-csv/ jquery.csv.js plugin] (v0.71)</li>
</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 <strong>before</strong> {TEMPLATEJS}.

<syntaxhighlight lang="html5">
<script type="text/javascript" src="{TEMPLATEURL}jquery.csv.js"></script>
</syntaxhighlight>

<br />
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 <strong>semicolon</strong>, 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:

<syntaxhighlight lang="javascript">
41 $.csv = {
42 defaults: {
43 separator:',', // Change this to: separator:';',
44 delimiter:'"',
45 headers:true
46 },
</syntaxhighlight>

<br />
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:

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 1;

var surveyRoot = location.pathname.split('index.php')[0];
var url = surveyRoot+'datafile.csv';

// Create an array to hold the data
var testArr = new Array();

// Grab the CSV contents
$.get(url,function(data){

// Convert CSV contents to an array of arrays
fullArray = $.csv.toArrays(data);

// Load the data array
$(fullArray).each(function(i, item){
testArr.push(item[0]);
});

// Initialise the autocomplete plugin
$('#question'+qID+' input.text').autocomplete({
source: testArr
});

// console.log(data); This would be a gould place to put your debugging script. Remember to comment out or remove before going into production, to economize on server workload
});
});

</script>
</syntaxhighlight>

<br />
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 <strong>console.log(data);</strong> 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.

<br />
'''3. Input from a MySQL database (trickiest, but also the most versatile and secure).'''
<br />This method requires the following:
<ol><li>Access to a MySQL database (tested with MySQL 5.5)</li>
<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):
<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 1;

$('#question'+qID+' input[type="text"]').autocomplete({
minLength: 2, // This line is optional, signifies number of keystrokes before autocomplete is initiated
source: 'autocomplete.php'
});

});

</script>
</syntaxhighlight>

<br />
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:

<syntaxhighlight lang="php">
<?php
// Login credentials
define('DB_SERVER', "localhost");
define('DB_USER', "username");
define('DB_PASSWORD', "password");
define('DB_DATABASE', "database_name");
define('DB_DRIVER', "mysql");
?>
</syntaxhighlight>

<br />
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):

<syntaxhighlight lang="php">
<?php

// Connect and query MySQL database, using PDO
try {
$db = new PDO(DB_DRIVER . ":dbname=" . DB_DATABASE . ";host=" . DB_SERVER . ";charset=utf8", DB_USER, DB_PASSWORD);
}

catch(PDOException $e) {
echo $e->getMessage();
}

$return_arr = array();

if ($db)
{
$ac_term = "%".$_GET['term']."%";
$query = "SELECT * FROM table_name WHERE column_name LIKE :term";
$result = $db->prepare($query);
$result->bindValue(":term",$ac_term);
$result->execute();

// Fetch data and store in array
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
$row_array['label'] = $row['column_name'];
$row_array['value'] = $row['column_name'];

array_push($return_arr,$row_array);
}
}
</syntaxhighlight>

<br />
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:

<syntaxhighlight lang="php">
<?php

// Include files outside of webroot
set_include_path('/var/www/surveys/test-survey');

// Fetch database credentials
require_once ('constant.php');

// Connect to database and perform query
require_once ('database.php');

// Clear query
$db = null;

// Encode results in JSON. This is required for jquery autocomplete
echo json_encode($return_arr);

?>
</syntaxhighlight>

<br />
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.
<br />

== Use autocomplete to populate several fields==

''Tested with: 1.91+, IE 7/8/9, Firefox 18''

This workaround uses the [http://jqueryui.com/demos/autocomplete/ Autocomplete widget] included with jQuery UI and the [https://code.google.com/p/jquery-csv/downloads/list 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 [https://code.google.com/p/jquery-csv/downloads/list 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<syntaxhighlight lang="php"><script type="text/javascript" src="{TEMPLATEURL}jquery.csv.js"></script></syntaxhighlight>
*Create your CSV file with 3 columns (name, ID, email) as in this example and place it in your template folder<syntaxhighlight lang="php">Bob, Bob's ID, Bob's email

Andy, Andy's ID, Andy's email

Sam, Sam's ID, Sam's email

Tony, Tony's ID, Tony's email

Fred, Fred's ID, Fred's email</syntaxhighlight>
*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<syntaxhighlight lang="php">/* Autocomplete styles */

ul.ui-autocomplete {

width: 250px !important;

padding: 5px 10px;

list-style: none;

}</syntaxhighlight>
*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<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qNameID = NN;

var qIDID = II;

var qEmailID = EE;

var url = "upload/templates/yourTemplate/yourCsvFile.csv";

// Create an array to hold the names
var namesArr = new Array();

// Grab the CSV contents
$.get(url,function(data){

// Convert CSV contents to an array of arrays
fullArray = $.csv.toArrays(data);

// Load the names array
$(fullArray).each(function(i, item){
namesArr.push(item[0]);
});

// Initialise the autocomplete plugin
$('#question'+qNameID+' input.text').autocomplete({
source: namesArr,
// Event fired when a selection is made (ui.item.value refers to the selected item)
select: function(event, ui) {
// Find the "ID" and "Email" values associated with the selected name value and load those questions
$(fullArray).each(function(i, item){
if(item[0] == ui.item.value) {
// The value from column 2 of the CSV
$('#question'+qIDID+' input.text').val(item[1]);
// The value from column 3 of the CSV
$('#question'+qEmailID+' input.text').val(item[2]);
}
});
}
});
});
});

</script></syntaxhighlight>

=Create MaxDiff question type=

See the [[Workarounds: Question design, layout and templating|Question design, layout and templating]] section for a workaround that uses JavaScript to convert an '''''Array (flexible labels) by column''''' question into a [http://en.wikipedia.org/wiki/MaxDiff MaxDiff] question type.

[[File:max_diff_596x253.gif]]

=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.

<syntaxhighlight lang="php">

<script>

numColumns=13;

numRows=18;

questionId='28417X2X24';

specialColumns=[1,12,13];

function action(obj){

locator=obj.id.replace('cbox_'+questionId, '').split('_');

row=locator[0];

column=locator[1];

//alert('Action for row,column='+row+','+column);

my_id='#cbox_'+questionId+row+'_'+column+''

if($(my_id).attr('checked') == false) {

for( var i=1; i<=numColumns; i++ ) {

if(i==column) continue;

id='#cbox_'+questionId+row+'_'+i

$(id).attr('disabled',false);

}

} else {

for( var i=1; i<=numColumns; i++ ) {

if(i==column) continue;

id='#cbox_'+questionId+row+'_'+i

aid='#answer'+questionId+row+'_'+i

$(aid).val(0);

$(id).attr('checked',false);

$(id).attr('disabled',true);

}

}

}

function customOnLoad(){

for( var row=1; row<=numRows; row++ ) {

for( var k=0; k<specialColumns.length; k++ )

{

column=specialColumns[k];

$('#cbox_'+questionId+row+'_'+column).change(function() {

action(this);

});

}

}

}

jQuery(document).ready(

function(){

customOnLoad();

}

);

</script>

</syntaxhighlight>

=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:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following script in the source of the array question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Call the exclude function using question ID
excludeOpt({QID});
});

// A function to make the last option in each array row exclusive
function excludeOpt (qID) {

var thisQuestion = $('#question'+qID)

// Add some classes to the checkbox cells
$('td.checkbox-item', thisQuestion).addClass('normalOpt');
$('tr.subquestions-list', thisQuestion).each(function(i) {
$('.normalOpt:last', this).removeClass('normalOpt').addClass('exlusiveOpt')
});

// A listener on the checkbox cells
$('td.checkbox-item', thisQuestion).click(function (event) {
handleExclusive($(this));
});

// A listener on the checkboxes
$('td.checkbox-item input[type="checkbox"]', thisQuestion).click(function (event) {
handleExclusive($(this).closest('td'));
});

function handleExclusive(thisCell) {

var thisRow = $(thisCell).closest('tr');

// Uncheck the appropriate boxes in a row
if ($(thisCell).hasClass('normalOpt')) {
$('.exlusiveOpt input[type="checkbox"]', thisRow).attr('checked', false);
}
else {
$('.normalOpt input[type="checkbox"]', thisRow).attr('checked', false);
}

// Check conditions (relevance)
$('td.checkbox-item', thisRow).each(function(i) {
var thisValue = '';
if($('input[type="checkbox"]', this).is(':checked')) {
thisValue = 1;
}
var thisSGQA = $('input[type="checkbox"]', this).attr('id').replace(/cbox_/, '');

$('input[type="hidden"]', this).attr('value', thisValue);
fixnum_checkconditions(thisValue, thisSGQA, 'hidden');
});
}
}
</script></syntaxhighlight>

==Implementation LS Version 3.x:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following script in the source of the array question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){

var thisQuestion = $('#question{QID}')

// Add some classes to the checkbox cells
$('td.checkbox-item:last-child', thisQuestion).addClass('exclusive-item');

// A function to un-check boxes
function resetCheckbox(thisItem) {
$(':hidden', thisItem).val('');
$(':checkbox', thisItem).prop('checked', false).trigger('change');
}

// A listener on the checkboxes
$(':checkbox', thisQuestion).on('change', function(e) {
if($(this).is(':checked')) {
var thisItem = $(this).closest('.answer-item');
var thisRow = $(this).closest('tr');
var items = $('td.answer-item.exclusive-item', thisRow);
if($(thisItem).hasClass('exclusive-item')) {
items = $('td.answer-item:not(.exclusive-item)', thisRow);
}
$.each(items, function(i, el) {
resetCheckbox(el);
});
}
});
});
</script></syntaxhighlight>

=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.

<syntaxhighlight lang="javascript">
$(document).ready(function() {

// Insert a new div after the progress bar
$('<div id="navigator2" />').insertAfter('#progress-wrapper');

// Style the new div
$('#navigator2').css({
'text-align':'center'
});

// Insert clones of the nav buttons in the new div
$('input.submit:eq(0)').clone().appendTo('#navigator2');
$('input.submit:eq(2)').clone().appendTo('#navigator2');

// Give the new buttons some new IDs
$('#navigator2 input.submit').each(function(i) {
var oldID = $(this).attr('id');
var newID = oldID + '2';
$(this).attr('id', newID)
});
});</syntaxhighlight>

[[File:extra_buttons.png]]

=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.

[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|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.

<syntaxhighlight lang="php"> <script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Find the survey ID
if($('input#fieldnames').length != 0) {
var fieldNames = $('input#fieldnames').attr('value');
var tmp = fieldNames.split('X');
var sID = tmp[0];
}

// Insert a new div after the progress bar
$('<div id="optOutLink" />').insertBefore('#progress-wrapper');

// Style the new div
$('#optOutLink').css({
'text-align':'center'
});

// Insert opt out url in the new div
$('#optOutLink').html('<p><a href="optout.php?lang=en&sid;='+sID+'&token;={TOKEN}">Click here to opt out of this survey.</a></p><br>');

});

</script></syntaxhighlight>

=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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following code in the source of a short text question.
#Optional: you can also add other select field to avoid collisions (e.g. for large population sample)

<syntaxhighlight lang="php">

<p>This answers are used to generate your ID. These information will be encrypted, it will not be possible in any case to identify you neither from your answers nor from your ID.</p>

<table>

<tr>

<td>Initial of your name</td>

<td>

<select id="field1">

<option value=""></option>

<option value="A">A</option>

<option value="B">B</option>

<option value="C">C</option>

<option value="D">D</option>

<option value="E">E</option>

<option value="F">F</option>

<option value="G">G</option>

<option value="H">H</option>

<option value="I">I</option>

<option value="J">J</option>

<option value="K">K</option>

<option value="L">L</option>

<option value="M">M</option>

<option value="N">N</option>

<option value="O">O</option>

<option value="P">P</option>

<option value="Q">Q</option>

<option value="R">R</option>

<option value="S">S</option>

<option value="T">T</option>

<option value="U">U</option>

<option value="V">V</option>

<option value="W">W</option>

<option value="X">X</option>

<option value="Y">Y</option>

<option value="Z">Z</option>

</select>

</td>

</tr>

<tr>

<td>Your birth month</td>

<td>

<select id="field2">

<option value=""></option>

<option value="01">January</option>

<option value="02">February</option>

<option value="03">March</option>

<option value="04">April</option>

<option value="05">May</option>

<option value="06">June</option>

<option value="07">July</option>

<option value="08">August</option>

<option value="09">September</option>

<option value="10">October</option>

<option value="11">November</option>

<option value="12">December</option>

</select>

<td>

</tr>

</table>

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

<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);

}

});

</script>

</syntaxhighlight>

=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.

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Call the phone function with the question ID and the row number

phoneTest(QQ, NN);

function phoneTest(qID, inputNum) {

// Interrupt next/submit function

$('#movenextbtn, #movesubmitbtn').click(function(){

// Some vars - modify as required

var phoneMatch = /^[0-9,+,(), ,]{1,}(,[0-9]+){0,}$/;

var msg1 = 'Please enter a valid phone number.';

// Test the input

var phoneInput = $('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val();

if(phoneInput != '' && !phoneMatch.test(phoneInput)) {

alert(msg1);

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'pink' });

return false;

}

else {

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'' });

return true;

}

});

}

});

</script>

</syntaxhighlight>

The regex is from: [http://www.regexlib.com/REDetails.aspx?regexp_id=1136 regexlib.com blank]

=Check validity of email address in subquestion=

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

<div class="simplebox">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.<br />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</div>

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.

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Call the email function with the question ID and the row number

emailTest(QQ, NN);

function emailTest(qID, inputNum) {

// Interrupt next/submit function

$('#movenextbtn, #movesubmitbtn').click(function(){

// Some vars - modify as required

var emailMatch = /^[a-zA-Z0-9\_\-]+[a-zA-Z0-9\.\_\-]*@([a-zA-Z0-9\_\-]+\.)+([a-zA-Z]{2,4}|travel|museum)$/;

var msg1 = 'Please enter a valid email address.';

// Test the input

var emailInput = $('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val();

if(emailInput != '' && !emailMatch.test(emailInput)) {

alert(msg1);

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'pink' });

return false;

}

else {

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'' });

return true;

}

});

}

});

</script>

</syntaxhighlight>

The regex is from: [http://www.regexlib.com/REDetails.aspx?regexp_id=1653 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:

<syntaxhighlight lang="php">

<script type="text/javascript">

var questionhelp="{QUESTIONHELP}";

if (questionhelp=="") {

document.write("");}

else {

document.write('<tr><td class="survey-question-help">'+ questionhelp +'</td></tr>');}

</script>

</syntaxhighlight>

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)

[[File:snap035.gif]]

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.

[[File:snap037.gif]]

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!

<syntaxhighlight lang="javascript">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('input[name="69965X2X10SQ001_SQ001"]').attr('disabled', 'disabled');

$('input[name="69965X2X10SQ001_SQ002"]').attr('hidden', 'hidden');

});

</script>

</syntaxhighlight>

[[File:snap039.gif]]

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.

[[File:suffix.png]]

Fig. 1: Suffix

[[File:prefix.png]]

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 €" suffix in the first column and an "in %" in the next 3 columns.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Call the function with the question ID followed by a comma-separated list of suffixes

addSuffix(12345, 'in €', 'in %', 'in %', 'in %');

function addSuffix() {

var qID = $(arguments)[0];

// Assign some column-specific classes

$('#question'+qID+' table.question tbody tr').each(function(i){

$('td', this).each(function(i){

$(this).addClass('answerCol-'+(i+1)+'');

});

});

// Some styling

$('#question'+qID+' table.question tbody input[type="text"]').css({

'width': '50%'

});

// Insert the suffixes

$(arguments).each(function(i, val){

if(i > 0) {

$('#question'+qID+' td.answerCol-'+i+' label').append(val);

}

});

}

});

</script></syntaxhighlight>

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

<syntaxhighlight lang="php">$('#question'+qID+' td.answerCol-'+i+' label').append(val);</syntaxhighlight>

with this

<syntaxhighlight lang="php">$('#question'+qID+' td.answerCol-'+i+' label').prepend(val);</syntaxhighlight>

=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:
#Download the file at [http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js] and upload it to your survey.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following code in the source of a short text question.

<syntaxhighlight lang="javascript">
<script src="/upload/surveys/{SID}/jquery-ui-timepicker-addon.js"></script>

<script>

$(document).ready(function(){

$('#answer{SGQ}').timepicker({
timeText: 'Time', //here translation
hourText: 'hour', //here translation
minuteText: 'minute', //here translation
closeText: 'Done' //here translation
});

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

$( "<style>"
+".ui-widget-header, .ui-datepicker-current { display:none; }"
+".ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }"
+".ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }"
+" }"
+"</style>").appendTo( "head" );

});

</script></syntaxhighlight>

=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 [http://ditio.net/2010/05/02/javascript-date-difference-calculation/ 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.

<syntaxhighlight lang="php">

<script type="text/javascript">

/*

Adapted from http://ditio.net/2010/05/02/javascript-date-difference-calculation/
*/

var DateDiff = {

inDays: function(d1, d2) {

var t2 = d2.getTime();

var t1 = d1.getTime();

return parseInt[[t2-t1)/(24*3600*1000]];

},

inWeeks: function(d1, d2) {

var t2 = d2.getTime();

var t1 = d1.getTime();

return parseInt[[t2-t1)/(24*3600*1000*7]];

},

inMonths: function(d1, d2) {

var d1Y = d1.getFullYear();

var d2Y = d2.getFullYear();

var d1M = d1.getMonth();

var d2M = d2.getMonth();

return (d2M+12*d2Y)-(d1M+12*d1Y);

},

inYears: function(d1, d2) {

return d2.getFullYear()-d1.getFullYear();

}

}

d1 = new Date({substr(DD,0,4)}, {substr(DD,5,2)}, {substr(DD,8,2)});

d2 = new Date({substr(D2,0,4)}, {substr(D2,5,2)}, {substr(D2,8,2)});

// Displays result

document.write("<br />Number of <b>days</b>: "+DateDiff.inDays(d1, d2));

document.write("<br />Number of <b>weeks</b>: "+DateDiff.inWeeks(d1, d2));

document.write("<br />Number of <b>months</b>: "+DateDiff.inMonths(d1, d2));

document.write("<br />Number of <b>years</b>: "+DateDiff.inYears(d1, d2));

// filled the numerical input with number of days (or nights)

var nDays = +DateDiff.inDays(d1, d2);

jQuery(document).ready(function() {

$(".numeric:eq(0) input.text").val(nDays);

$(".numeric:eq(0) input.text").attr('readonly','readonly');

// check if d2 > d1

$('#movenextbtn').hide();

$('#movesubmitbtn').hide();

if(nDays >= 0){

// automatic submit (uncomment if needed)

// document.limesurvey.submit();

// $('body').hide();

}

else alert("Check out date must be posterior than Check in\nPlease return to the previous page and edit your answers");

});

</script>

</syntaxhighlight>

=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.

<syntaxhighlight lang="php">
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
'use strict';
var qID1 = QQ1,
qID2 = QQ2,
q1 = $('#question' + 'QQ1' + ' .popupdate'),
q2 = $('#question' + 'QQ2' + ' .popupdate');

//if q1 loses focus, its value is taken and used as minDate in q2
q1.datepicker("option", "onClose", function (datum){
q2.datepicker( "option", "minDate", datum );
});
//q2 gets today as its maxDate
q2.datepicker( 'option', 'maxDate', new Date() );
});
</script>
</syntaxhighlight>

=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}.

<syntaxhighlight lang="javascript">
<tr><td class="survey-question-help" id=help_{QUESTION_NUMBER}>{QUESTIONHELP}</td></tr>
</syntaxhighlight>

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.

<syntaxhighlight lang="javascript">
<script>
$(document).ready(function(){
if($('#help_{QUESTION_NUMBER}').is(':empty')){
$('#help_{QUESTION_NUMBER}').hide();
}
});
</script>
</syntaxhighlight>

= 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.<br /><br />

[[File:Iat_1.png]]<br /><br />

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

Implementation is as follows:

1) [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].

2) Create your Array (Texts) with subquestions as follows:<br />
- Y scale - all of your "attribut" words or phrases<br />
- X scale - "Key Pressed" and "Elapsed Time (ms)"<br />
[[File:Iat_2.jpg]]

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:<br />
- Left association term<br />
- Right association term<br />
- Instructional text<br />
- Finished text<br />
[[File:Iat_3.png]]

4) Add the following to the end of template.js:<syntaxhighlight lang="javascript">
// A plugin to insert an IAT interface
function implicitAssociation(el, showAnswers) {

$(el).each(function() {

var thisQuestion = $(this);
var thisQuestionHelp = $('img[src$="help.gif"]', thisQuestion).parent();
var thisQuestionAnswers = $('table.question', thisQuestion).parent();
var startTime = '';
var endTime = '';
var agent = navigator.userAgent.toLowerCase();
var mobile = false;
if( /android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent) ) { // Mobile devices
mobile = true;
}

// Some classes
$(thisQuestion).addClass('iatQuestion');
$('.subquestion-list').addClass('unanswered');

// Hide the question help element
$(thisQuestionHelp).hide();

// Hide the answers
if(showAnswers != true) {
$('table.question', thisQuestion).hide();
}

// Insert IAT display
var iatTexts = $(thisQuestionHelp).text().split('||');
var iatDisplayHTML = '<div class="iatWrapper">\
<div class="iatLeftLabel">'+iatTexts[0]+'</div>\
<div class="iatRightLabel">'+iatTexts[1]+'</div>\
<div class="iatWord"></div>\
<div class="iatInstructions">'+iatTexts[2]+'</div>\
</div>\
<div class="iatMobileButtonWrapper">\
<div class="iatButton iatLeftButton">E</div>\
<div class="iatButton iatRightButton">I</div>\
<div style="width:100%; clear:both;"></div>\
</div>';
$(thisQuestionAnswers).prepend(iatDisplayHTML);

// Show a word
function iatShowWord() {
$('div.iatWord', thisQuestion).text($('.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$(document).bind('keypress.iatKeypress', function(e) {
if(e.which == 101 || e.which == 105) {
var thisRow = $('.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
if(e.which == 101) {
$('input[type="text"]:eq(0)', thisRow).val('E');
}
else {
$('input[type="text"]:eq(0)', thisRow).val('I');
}
$(document).unbind('keypress.iatKeypress');
if($('.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWord();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
}
});
}
function iatShowWordMobile() {
$('div.iatWord', thisQuestion).text($('.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$('.iatButton', thisQuestion).bind('click.iatButtonClick', function(e) {
var thisRow = $('.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
$('input[type="text"]:eq(0)', thisRow).val($(this).text());
$('.iatButton', thisQuestion).unbind('click.iatButtonClick');
if($('.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWordMobile();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions, .iatMobileButtonWrapper', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
});
}

// Start the IAT display
if(mobile == true) { // Mobile devices
$('.iatMobileButtonWrapper', thisQuestion).show();
$('.iatButton', thisQuestion).bind('click.iatStartMobile', function(e) {
$('.iatButton', thisQuestion).unbind('click.iatStartMobile');
iatShowWordMobile();
});
}
else {
$(document).bind('keypress.iatStart', function(e) { // Non-mobile devices
if(e.which == 101 || e.which == 105) {
$(document).unbind('keypress.iatStart');
iatShowWord();
}
});
}
});
} </syntaxhighlight>

<br />5) Add the following to the end of template.css:<syntaxhighlight lang="css">
/* IAT questions */

.iatWrapper {
position: relative;
width: 600px;
height: 300px;
color: #FFFFFF;
background-color: #000000;
font-size: 21px;
}

.iatLeftLabel {
float: left;
padding: 10px;
}

.iatRightLabel {
float: right;
padding: 10px;
}

.iatWord {
position: absolute;
width: 100%;
top: 35%;
text-align: center;
font-size: 36px;
color:#0F0;
}

.iatWord.done {
color:#FFFFFF;
}

.iatInstructions {
position: absolute;
width: 100%;
bottom: 0px;
padding-bottom: 10px;
text-align: center;
}

.iatMobileButtonWrapper {
display: none;
position: relative;
width: 600px;
font-size: 36px;
}

.iatButton {
float: left;
margin: 20px;
width: 100px;
padding: 2px 0 5px 0;
border: 5px solid #999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
text-align: center;
line-height: normal;
cursor: pointer;
}

.iatLeftButton {
float: left;
}

.iatRightButton {
float: right;
}</syntaxhighlight>

<br />6) To apply the plugin, add one of the two scripts below to the question source:<br />
- With hidden answer table (for normally activated survey)
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}');
});
</script></syntaxhighlight>
- With visible answer table (for testing purposes)
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}', true);
});
</script></syntaxhighlight>

== 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.<br /><br />

[[File:Demo_iat_v250.png]]<br /><br />

'''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''':
<ol>
<li>[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].</li>
<li>Create your Array (Texts) with subquestions as follows:
<ul>
<li>Y scale - all of your "attribute" words or phrases</li>
<li>X scale - "Key Pressed" and "Elapsed Time (ms)"<br />[[File:Demo_iat_v250_2.png]]</li>
</ul>
</li>
<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>
<li>Left association term</li>
<li>Right association term</li>
<li>Instructional text</li>
<li>Finished text<br />[[File:Demo_iat_v250_3.png]]</li>
</ul>
</li>
<li>Add the following to the end of template.js:<syntaxhighlight lang="javascript">// A plugin to insert an IAT interface
function implicitAssociation(el, showAnswers) {

$(el).each(function() {

var thisQuestion = $(this);
var thisQuestionHelp = $('div.question-help', thisQuestion);
var thisQuestionAnswers = $('table.subquestion-list', thisQuestion).parent();
var startTime = '';
var endTime = '';
var agent = navigator.userAgent.toLowerCase();
var mobile = false;
if( /android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent) ) { // Mobile devices
mobile = true;
}

// Some classes
$(thisQuestion).addClass('iat-question');
$('tr.subquestion-list', thisQuestion).addClass('unanswered');

// Hide the question help element
$(thisQuestionHelp).hide();
$(thisQuestionHelp).closest('.question-help-container').hide();

// Hide the answers
if(showAnswers != true) {
$('table.subquestion-list', thisQuestion).hide();
}

// Insert IAT display
var iatTexts = $(thisQuestionHelp).text().split('||');
var iatDisplayHTML = '<div class="iatWrapper">\
<div class="iatLeftLabel">'+iatTexts[0]+'</div>\
<div class="iatRightLabel">'+iatTexts[1]+'</div>\
<div class="iatWord"></div>\
<div class="iatInstructions">'+iatTexts[2]+'</div>\
</div>\
<div class="iatMobileButtonWrapper">\
<div class="iatButton iatLeftButton">E</div>\
<div class="iatButton iatRightButton">I</div>\
<div style="width:100%; clear:both;"></div>\
</div>';
$(thisQuestionAnswers).prepend(iatDisplayHTML);

// Show a word
function iatShowWord() {
$('div.iatWord', thisQuestion).text($('tr.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$(document).bind('keypress.iatKeypress', function(e) {
if(e.which == 101 || e.which == 105) {
var thisRow = $('tr.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
if(e.which == 101) {
$('input[type="text"]:eq(0)', thisRow).val('E');
}
else {
$('input[type="text"]:eq(0)', thisRow).val('I');
}
$(document).unbind('keypress.iatKeypress');
if($('tr.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWord();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
}
});
}
function iatShowWordMobile() {
$('div.iatWord', thisQuestion).text($('tr.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$('.iatButton', thisQuestion).bind('click.iatButtonClick', function(e) {
var thisRow = $('tr.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
$('input[type="text"]:eq(0)', thisRow).val($(this).text());
$('.iatButton', thisQuestion).unbind('click.iatButtonClick');
if($('tr.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWordMobile();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions, .iatMobileButtonWrapper', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
});
}

// Start the IAT display
if(mobile == true) { // Mobile devices
$('.iatMobileButtonWrapper', thisQuestion).show();
$('.iatButton', thisQuestion).bind('click.iatStartMobile', function(e) {
$('.iatButton', thisQuestion).unbind('click.iatStartMobile');
iatShowWordMobile();
});
}
else {
$(document).bind('keypress.iatStart', function(e) { // Non-mobile devices
if(e.which == 101 || e.which == 105) {
$(document).unbind('keypress.iatStart');
iatShowWord();
}
});
}
});
}</syntaxhighlight>
</li>
<li>Add the following to the end of template.css:<syntaxhighlight lang="css">/* IAT questions */

.iatWrapper {
position: relative;
width: 100%;
max-width: 600px;
height: 300px;
margin: 0 auto;
color: #D0DBE5;
background-color: #2C3E50;
font-size: 21px;
}

.iatLeftLabel {
float: left;
padding: 10px;
}

.iatRightLabel {
float: right;
padding: 10px;
}

.iatWord {
position: absolute;
width: 100%;
top: 35%;
text-align: center;
font-size: 36px;
color: #C4D1DE;
}

.iatWord.done {
color: #C4D1DE;
}

.iatInstructions {
position: absolute;
width: 100%;
bottom: 0px;
padding-bottom: 10px;
text-align: center;
}

.iatMobileButtonWrapper {
display: none;
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
font-size: 36px;
}

.iatButton {
float: left;
margin: 20px;
width: 100px;
padding: 2px 0 5px 0;
border: 5px solid #233140;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
text-align: center;
line-height: normal;
cursor: pointer;
}

.iatLeftButton {
float: left;
}

.iatRightButton {
float: right;
}</syntaxhighlight>
</li>
<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)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}');
});
</script></syntaxhighlight>
</li>
<li>With visible answer table (for testing purposes)
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}', true);
});
</script></syntaxhighlight>
</li>
</ul>
</li>
</ol>

== Version 3.x ==

Here is a custom question theme for an Implicit Association Test (IAT) in version 3.x - https://github.com/tpartner/LimeSurvey-Implicit-Association-Test

=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

<syntaxhighlight lang="javascript">
<script type="text/javascript">

/**
* Small script that adds a "X" before a checkbox.
* On click the text color of the label of the checkbox turns grey
* If the user has to choose some answers from many options, he can "delete" answers, that on first sight looks wrong
* Add the script to the question in Limesurvey (for example within the source code of the help text)
*/

//Define the X (standard is a X in capitals)
var x = "X";
css_class = "x";

/*
* Define the style of the X
* Of course you can define the style in the stylesheet - if so, the script ignores the following settings
* If there is a style, than set style var to 1
*/
var style = 0;
var size = "12px";
var weight = "bold";
var color = "red";
var cursor = "pointer";

//element type - standard is a span element
var type = "span";

//Define the new font color of the checkbox label
label_color = "#bfbfbf";

//End of configuration - start of the function

//Define the element that is added
if(style == 1) {
ele = "<"+type+" class='"+css_class+"'>"+x+"</"+type+">";
}
else {
ele = "<"+type+" class='"+css_class+"' style='font-size:"+size+"; font-weight:"+weight+"; color:"+color+"; cursor:"+cursor+";'>"+x+"</"+type+">";
}

//Get the standard font-color of the used style
st_color = $("label").css("color");

//insert the X before the checkboxes
$(document).ready(function() {
$("li").each(function(){
$(this).prepend(ele);
});
});

//bind an eventhandler on the X (delegate is used, because Limesurvey uses an old jQuery version)
var css_class_c = "."+css_class;
$(document).delegate(css_class_c,"click",function() {
var color_check = $(this).siblings("label").data("color");
if(color_check != "true") {
$(this).siblings("label").css("color",label_color).data("color","true");
$(this).siblings('input').attr('checked', false);

}
else {
$(this).siblings("label").css("color",st_color).data("color","false");

}
});

$(".checkbox").click(function () {
$(this).siblings("label").css("color",st_color).data("color","false");
});

</script>
</syntaxhighlight>

=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:

<syntaxhighlight lang="javascript">$(document).ready(function(){
$('input').keypress(
function(event){
if (event.which == '13') {
event.preventDefault();
}
});
});</syntaxhighlight>

= 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.<br /><br />

[[File:Card_sort_1.png]]<br /><br />

'''DOWNLOADS:'''<br />
- [[Media:Card_Sort.zip|Demo template]]<br />
- [[Media:Card_Sort.lss|Demo survey]].

'''IMPLEMENTATION:'''

1) [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|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:<syntaxhighlight lang="javascript">
function cardSort(qID) {

// Define some stuff...
var thisQuestion = $('#question'+qID);
var thisQuestionHelp = $('img[alt="Help"]', thisQuestion).parent();
thisQuestion.addClass('card-sort-question');

// Hide the "Help" section
thisQuestionHelp.hide();

//Insert the "card sort" elements
$('ul.questions-list', thisQuestion).parent().prepend('<div class="droppable items-start"></div><div class="items-end-wrapper" />');
$('ul:eq(0) li', thisQuestionHelp).each(function(i) {
$('.items-end-wrapper', thisQuestion).append('<div class="items-end-inner">\
<div class="items-end-text">'+$(this).html()+'</div>\
<div class="droppable items-end items-end-'+(i+1)+'" data-items-end="'+(i+1)+'"></div>\
</div>')});

// Insert the "cards"
$('li.answer-item', thisQuestion).each(function(i) {
var thisSGQA = $(this).attr('id').replace(/javatbd/, '');
var thisCode = $(this).attr('id').split('X'+qID)[1];
var thisHTML = $('label', this).html();
$('div.items-start').append('<div class="card draggable" data-sgqa="'+thisSGQA+'" data-code="'+thisCode+'">\
'+thisHTML+'\
</div>');
});

// Make the "cards" draggable
$('.draggable').draggable({
revert: "invalid",
zIndex: 2700,
helper: 'original',
start: function( event, ui ) {
$(ui.helper).addClass('ui-draggable-helper');
},
stop: function( event, ui ) {
}
});

// Set the targets for the draggables
$('.droppable.items-start').droppable({
hoverClass: 'target-hover',
accept: '.draggable.moved'
});
$('.droppable.items-end').droppable({
hoverClass: 'target-hover',
accept: '.draggable'
});

// After dropped
$('.droppable').bind('drop', function(event, ui) {

// Physically move the draggable to the target
// (the plugin just visually moves it)
// (need to use a clone here to fake out iPad)
var newDraggable = $(ui.draggable).clone();
$(newDraggable).appendTo(this);
$(ui.draggable).remove();
if($(this).hasClass('items-end')) {
$(newDraggable).addClass('moved');
}
else {
$(newDraggable).removeClass('moved');
}
$(newDraggable).removeClass('ui-draggable-helper ui-draggable-dragging').css({
'z-index':'',
'top':'auto',
'left':'auto'
});

// Now, make this new clone draggable
$(newDraggable).draggable({
revert: "invalid",
zIndex: 2700,
helper: 'original',
start: function( event, ui ) {
$(ui.helper).addClass('ui-draggable-helper');
},
stop: function( event, ui ) {
}
});
});

// Initial "card" positions
$('li.question-item input.text', thisQuestion).each(function(i) {
if($(this).val() > 0) {
$('.items-end[data-items-end="'+$(this).val()+'"]').append($('.card[data-sgqa="'+$(this).attr('name')+'"]'));
$('.card[data-sgqa="'+$(this).attr('name')+'"]').appendTo($('.items-end[data-items-end="'+$(this).val()+'"]')).addClass('moved');
}
});

// Interrupt the Next/Submit function and load the inputs
$('form#limesurvey').submit(function(){
$('.question-item input.text', thisQuestion).val(0);
$('.droppable.items-end .card', thisQuestion).each(function(i) {
var thisItemsEnd = $(this).closest('.droppable.items-end').attr('data-items-end');
var thisID = $(this).attr('data-sgqa');
$('#answer'+thisID+'').val(thisItemsEnd);
});
});
}</syntaxhighlight>

<br />5) Add the following to the end of template.css:<syntaxhighlight lang="css">
/* Card Sort */

.card-sort-question ul.subquestions-list {
/*display: none;
clear: both;*/
}

.card-sort-question .items-start {
float: left;
width: 340px;
height: 317px;
margin-top: 8px;
border: 1px solid #666;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}

.card-sort-question .items-start.target-hover {
background:#C9C9C9;
}

.card-sort-question .items-end-wrapper {
float: left;
margin-left: 20px;
width: 340px;
}

.card-sort-question .items-end {
width: 338px;
min-height: 73px;
margin-bottom: 10px;
padding-bottom: 5px;
border: 1px solid #666;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
background: #EBEBEB;
}

.card-sort-question .items-end.target-hover {
background: #C9C9C9;
}

.card-sort-question .items-end.ui-state-disabled {
opacity: 1;
filter:alpha(opacity=100);
}

.card-sort-question .items-end-text {
width: 338px;
padding-bottom: 5px;
background: #FFFFFF;
font-size: 110%;
font-weight: bold;
}

.card-sort-question .card {
display: inline-block;
width: 140px;
height: auto;
margin: 5px 8px;
padding: 3px;
border: 2px solid #2F4354;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
background-color: #43b3d1;
color: #2f4354;
font-weight: bold;
text-align: center;
line-height: normal;
}

.card-sort-question .items-end .card {
margin: 5px 7px;
}

.card-sort-question div.answer {
clear: both;
padding-top: 1px;
margin-top: 0;
}</syntaxhighlight>

<br />6) Add this to the source of the question to apply the function.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
cardSort({QID});
});
</script></syntaxhighlight>

== Version 3.x ==
Here is a custom question theme for card Sorting in version 3.x. - https://github.com/tpartner/LimeSurvey-Card-Sorting-3.x

== Version 4.x ==
Here is a custom question theme for card Sorting in version 4.x. - https://github.com/tpartner/LimeSurvey-Card-Sorting-4.x

= Q Sorting=
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.<br /><br />

== Version 3.x==
''Tested with: 3.08 - 3.15''
Custom question theme - [[Media:QSort.zip]]<br />

== Version 4.x==
''Tested with: 4.5.1''
Custom question theme - [[Media:qSort-4.x.zip]]<br />

=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:
<syntaxhighlight lang="javascript">
<script type='text/javascript' charset='utf-8'>
$( document ).ready( function() {
var this_surveyId='{SID}';
var this_groupId='{self.gid}';
var this_quesitonId='{self.qid}';
var this_self='{self.sgqa}';

// Remark for the variable 'my_targetTextBox':
// ------------------------------------
// For Text-type question (e.g. 'short free text', 'huge free text'), use : '#answer' + this_self;
// For 'Multiple Choice'-type question enabled with the 'Other' option which provides a textbox, use : '#answer' + this_self;
// For 'List (radio)'-type question enabled with the 'Other' option which provides a textbox, use : '#answer' + this_self + 'text'.
var my_targetTextBox='#answer' + this_self;

// Trim:
// -----
$( my_targetTextBox ).blur( function(){
$( this ).val( $.trim( $( this ).val() ) );
});

// Uppercase:
// ----------
// Operate for its appearance only (but have no effect to modify its intrinsic value) - display as UpperCase:
$( my_targetTextBox ).css( 'text-transform', 'uppercase' );
// Operate for its intrinsic value:
$( my_targetTextBox ).blur( function() {
$( this ).val( $( this ).val().toUpperCase() );
});
});
</script>
</syntaxhighlight>

For Text-type question (e.g. 'short free text', 'huge free text'), set the 'this_self' variable as below:
<syntaxhighlight lang="javascript">
var my_targetTextBox='#answer' + this_self;
</syntaxhighlight>

For 'Multiple Choice'-type question enabled with the 'Other' option which provides a textbox, set the 'this_self' variable as below:
<syntaxhighlight lang="javascript">
var my_targetTextBox='#answer' + this_self;
</syntaxhighlight>

For 'List (radio)'-type question enabled with the 'Other' option which provides a textbox, set the 'this_self' variable as below:
<syntaxhighlight lang="javascript">
var my_targetTextBox='#answer' + this_self + 'text';
</syntaxhighlight>

= 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.<br /><br />

'''IMPLEMENTATION:'''

1) Add the following to the end of template.js:<syntaxhighlight lang="javascript">
$(document).ready(function(){
// Apply the responsiveArray plugin with default settings
$('.array-10-pt, .array-flexible-row, .array-5-pt, .array-increase-same-decrease, .array-yes-uncertain-no').responsiveArray();
});

/*****
A plugin to insert drop-downs into arrays for small screens
Copyright (C) 2015 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 09/04/15
*****/
(function( $ ){
$.fn.responsiveArray = function(options) {

var opts = $.extend( {
chooseText: 'Please choose...'
}, options);

return this.each(function() {

var thisQuestion = $(this);
var thisQID = $(thisQuestion).attr('id').split('question')[1];

// Some classes
$(thisQuestion).addClass('responsive-array');
$('table.questions-list tr', thisQuestion).each(function(i){
$('> *', this).each(function(i){
$(this).addClass('col-'+i);
if(i != 0) {
$(this).addClass('expanded');
}
});
});

// Insert a column
$('.col-0', thisQuestion).after('<td class="dropdown-cell" />');

// Insert dropdowns
$('body').append('<select style="display:none;" class="responsive-select responsive-select-'+thisQID+'" />');
$('table.questions-list thead th.expanded', thisQuestion).each(function(i){
$('.responsive-select-'+thisQID).append('<option value="">'+$(this).text()+'</option>');
});
$('table.questions-list tbody .dropdown-cell', thisQuestion).append($('.responsive-select-'+thisQID+'').clone());
$('tr.radio-list', thisQuestion).each(function(i){
var thisRow = $(this);
$('input.radio', this).each(function(i){
$('.responsive-select-'+thisQID+' option:eq('+i+')', thisRow).attr('value', $(this).attr('id'));
});
if($('input.radio:checked', thisRow).length > 0) {
$('.responsive-select-'+thisQID+'', thisRow).val($('input.radio:checked', thisRow).attr('id'));
}
else {
$('.responsive-select-'+thisQID+'', thisRow).prepend('<option value="" selected="selected">'+opts.chooseText+'</option>');
}
});
$('.responsive-select-'+thisQID+'', thisQuestion).show();

// Listeners on radios
$('input.radio', thisQuestion).click(function(event) {
var thisRow = $(this).closest('tr');
var thisID = $(this).attr('id');
//$('option[value="'+thisID+'"]').attr('selected', 'selected');
$('.responsive-select', thisRow).val(thisID);
$('.responsive-select option[value=""]', thisRow).remove();
});

// Listeners on dropdowns
$('.responsive-select-'+thisQID+'').change(function() {
$('#'+$(this).val()+'').click();
});

});
};
})( jQuery );</syntaxhighlight>

<br />2) Add something like this to template.css (I have it set to switch at 640px but adjust that as you see fit):<syntaxhighlight lang="css">
/*****
Styles for the responsiveArray plugin
Copyright (C) 2015 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 09/04/15
*****/

.responsive-array .dropdown-cell {
display: none;
text-align: left;
padding-left: 8px;
}

.responsive-array .dropdown-cell select {
max-width: none;
}

@media screen and (max-width: 640px) {
.responsive-array table.question {
table-layout: auto;
}
.responsive-array table.question .col-0,
.responsive-array table.question .dropdown-cell {
width: 50%;
}
.responsive-array .dropdown-cell {
display: table-cell;
}
.responsive-array th.expanded,
.responsive-array td.expanded {
display: none;
}
}</syntaxhighlight>

<br />Note that the "Please choose" text is an optional setting. To change it, apply the plugin like this:<syntaxhighlight lang="javascript">
$(document).ready(function(){
// Apply the responsiveArray plugin with default settings
$('.array-10-pt, .array-flexible-row, .array-5-pt, .array-increase-same-decrease, .array-yes-uncertain-no').responsiveArray({
chooseText: 'Select one...'
});
});</syntaxhighlight>

= Van Westendorp Pricing Sliders=
== Version 2.06==

''Tested with: LimeSurvey version 2.06''

This workaround uses JavaScript to dynamically control sliders to facilitate the [http://www.5circles.com/van-westendorp-pricing-the-price-sensitivity-meter/ 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.<br /><br />

[[File:Test_Van_Westendorp_Pricing_206_v2.png]]<br /><br />

'''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''':

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your Multiple Numeric question with subquestions as seen in the image above.
#Add the following to the end of template.js:<syntaxhighlight lang="javascript">function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}

/*****
A jQuery plugin to facilitate the Van Westendorp pricing research methodology
Copyright (C) 2016 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 19/10/16
*****/
(function( $ ){

$.fn.vWPricing = function(options) {

var opts = $.extend( {
order: [1, 2, 3, 4],
randomOrder: false
}, options);

return this.each(function() {

var thisQuestion = $(this);

thisQuestion.addClass('vwp-question');

// Add some attributes and set the slider max/min values
var itemsLength = $('li.question-item', thisQuestion).length;
$('li.question-item', thisQuestion).each(function(i) {
$(this).attr('data-item', (i+1));
$('.ui-slider', this).attr('data-slider', (i+1));

var thisSliderMin = $('.ui-slider', this).slider('option', 'min');
$('.ui-slider', this).slider('option', 'min', thisSliderMin+(i));
var thisSliderMax = $('.ui-slider', this).slider('option', 'max');
$('.ui-slider', this).slider('option', 'max', thisSliderMax-((itemsLength-1)-i));
});

// Slider order
if(opts.randomOrder == true) {
shuffleArray(opts.order);
}
$(opts.order).each(function(i, val) {
$('ul.subquestions-list', thisQuestion).append($('li.question-item[data-item="'+val+'"]', thisQuestion));
});

// Listeners on the sliders
$('.ui-slider', thisQuestion).on('slide', function(event, ui) {
handleVwpSliders(this, ui.value);
});
$('.ui-slider', thisQuestion).on('slidestop', function(event, ui) {
handleVwpSliders(this, ui.value);
});

// A function to handle the siders
function handleVwpSliders(el, sliderVal) {
var thisRow = $(el).closest('li');
var movedIndexNum = $(el).attr('data-slider');

$('input.text', thisRow).val(sliderVal);
$('.slider-callout', thisRow).html($('input.text', thisRow).val());

var lowerSliders = $('.ui-slider', thisQuestion).filter(function() {
return $(this).attr('data-slider') < movedIndexNum;
});
var higherSliders = $('.ui-slider', thisQuestion).filter(function() {
return $(this).attr('data-slider') > movedIndexNum;
});

$(lowerSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider');
var newSliderVal = sliderVal-(movedIndexNum-thisIndexNum);
if($(this).slider('option', 'value') > newSliderVal) {
var thisRow = $(this).closest('li');
$(this).slider('option', 'value', newSliderVal);
$('input.text', thisRow).val(newSliderVal);
$('.slider-callout', thisRow).html($('input.text', thisRow).val());
}
});
$(higherSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider');
var newSliderVal = sliderVal+(thisIndexNum-movedIndexNum);
if($(this).slider('option', 'value') < newSliderVal) {
var thisRow = $(this).closest('li');
$(this).slider('option', 'value', newSliderVal);
$('input.text', thisRow).val(newSliderVal);
$('.slider-callout', thisRow).html($('input.text', thisRow).val());
}
});
}
});

};
})( jQuery );</syntaxhighlight>
#Add the following to the end of template.css (this is for a copy of [http://extensions.sondages.pro/skeletonquest-rwd-for-limesurvey/ Denis Chenu's SkeletonQuest template]):<syntaxhighlight lang="css">/**** Van Westendorp Pricing ****/

.vwp-question ul.subquestions-list,
.vwp-question ul.subquestions-list li {
display:block;
}

.vwp-question ul.subquestions-list li {
margin-bottom: 15px;
}

.vwp-question ul.subquestions-list .slider-label {
display:block;
padding: 0.3em 0.5em 0.7em;
width: auto;
max-width: 100%;
text-align: left;
}

.vwp-question .slider-element {
display: block;
margin-left: 2%;
width:90%;
max-width: 32em;
}</syntaxhighlight>
#To apply the plugin, add this script the multiple-numeric question source.
There are two options to adjust<br /> -'''order''' - this is the order that your subquestions will be displayed (default, 1, 2, 3, 4)<br /> -'''randomOrder''' - if set to true, the '''order''' option will be overridden and the subquestion order will be randomized (default, false)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').vWPricing({
order: [1, 2, 3, 4],
randomOrder: false
});

});
</script></syntaxhighlight>
== Version 2.5x==

''Tested with: LimeSurvey version 2.54.5''

This workaround uses JavaScript to dynamically control sliders to facilitate the [http://www.5circles.com/van-westendorp-pricing-the-price-sensitivity-meter/ 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.<br /><br />

[[File:Test_Van_Westendorp_Pricing_25x.png]]<br /><br />

'''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''':

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your Multiple Numeric question with subquestions as seen in the image above.
#Add the following to the end of template.js:<syntaxhighlight lang="javascript">function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}

/*****
A jQuery plugin to facilitate the Van Westendorp pricing research methodology
Copyright (C) 2016 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 19/10/16
*****/
(function( $ ){

$.fn.vWPricing25 = function(options) {

var opts = $.extend( {
order: [1, 2, 3, 4],
randomOrder: false
}, options);

return this.each(function() {

var thisQuestion = $(this);

thisQuestion.addClass('vwp-question');

// Add some attributes and set the slider max/min values
var itemsLength = $('.question-item', thisQuestion).length;
$('.question-item', thisQuestion).each(function(i) {
var thisInput = $('input[type=text]', this);
var thisVal = $(thisInput).val();

$(this).attr('data-item', (i+1));
$(thisInput).attr('data-slider-index', (i+1));

// Slider initial settings
setTimeout(function() {
var thisSliderMin = $(thisInput).bootstrapSlider('getAttribute', 'min');
$(thisInput).bootstrapSlider('setAttribute', 'min', thisSliderMin+(i));
var thisSliderMax = $(thisInput).bootstrapSlider('getAttribute', 'max');
$(thisInput).bootstrapSlider('setAttribute', 'max', thisSliderMax-((itemsLength-1)-i));

if(thisVal == '') {
$(thisInput).val('');
}
}, 200);

});

// Slider order
if(opts.randomOrder == true) {
shuffleArray(opts.order);
}
$(opts.order).each(function(i, val) {
$('.subquestion-list.questions-list', thisQuestion).append($('.question-item[data-item="'+val+'"]', thisQuestion));
});

// Listeners on the sliders
$('input[type=text]', thisQuestion).on('slide', function(event) {
handleVwpSliders(this, $(this).bootstrapSlider('getValue'));
});
$('input[type=text]', thisQuestion).on('slideStop', function(event) {
handleVwpSliders(this, $(this).bootstrapSlider('getValue'));
});

// A function to handle the siders
function handleVwpSliders(el, sliderVal) {
var movedIndexNum = $(el).attr('data-slider-index');

var lowerSliders = $('input[type=text]', thisQuestion).filter(function() {
return $(this).attr('data-slider-index') < movedIndexNum;
});
var higherSliders = $('input[type=text]', thisQuestion).filter(function() {
return $(this).attr('data-slider-index') > movedIndexNum;
});

$(lowerSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider-index');
var newSliderVal = sliderVal-(movedIndexNum-thisIndexNum);
if($(this).bootstrapSlider('getValue') > newSliderVal) {
var thisRow = $(this).closest('.question-item');
var thisTooltip = $('.tooltip', thisRow);
$(this).bootstrapSlider('setValue', newSliderVal);
$('.tooltip-inner', thisTooltip).text($('input.text', thisRow).val());
thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');

var validationInput = $('input.em_sq_validation', thisRow);
$(validationInput).val($('input.text', thisRow).val())
fixnum_checkconditions($(validationInput).attr('value'), $(validationInput).attr('name'), $(validationInput).attr('type'));
}
});
$(higherSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider-index');
var newSliderVal = sliderVal+(thisIndexNum-movedIndexNum);
if($(this).bootstrapSlider('getValue') < newSliderVal) {
var thisRow = $(this).closest('.question-item');
var thisTooltip = $('.tooltip', thisRow);
$(this).bootstrapSlider('setValue', newSliderVal);
$('.tooltip-inner', thisTooltip).text($('input.text', thisRow).val());
thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');

var validationInput = $('input.em_sq_validation', thisRow);
$(validationInput).val($('input.text', thisRow).val())
fixnum_checkconditions($(validationInput).attr('value'), $(validationInput).attr('name'), $(validationInput).attr('type'));
}
});
}

// Listener on resizing (override the bootstrap callout behaviour)
$(window).resize(function() {
setTimeout(function() {
$('input[type=text]', thisQuestion).each(function(i) {
if($(this).val() != '') {
var thisRow = $(this).closest('.question-item');
var thisTooltip = $('.tooltip', thisRow);
$('.tooltip-inner', thisTooltip).text($.trim($(this).val()));
console.log($('.tooltip-inner', thisTooltip).text());
thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');
}
});
}, 1);
});
});
};
})( jQuery );</syntaxhighlight>
#Add the following to the end of template.css (this is for a copy of the default template):<syntaxhighlight lang="css">/*********** Van Westendorp Pricing ***********/

.vwp-question .control-label {
margin-bottom: 35px;
}

.vwp-question .withslider {
margin-bottom: 0px;
}

.vwp-question .slider-container {
margin-bottom: 2.5em;
margin-top: 3.5em;
}

.vwp-question .slider.slider-horizontal .slider-handle {
margin-top: -5px;
}

@media (max-width: 600px){

.vwp-question .withslider {
padding-left: 0;
padding-right: 0;
}
}

@media (max-width: 480px){

#outerframeContainer,
.vwp-question .control-label,
.vwp-question .slider-container > div {
padding-left: 0;
padding-right: 0;
}

.vwp-question .slider-container > div > div {
padding-left: 5px;
padding-right: 5px;
}
}</syntaxhighlight>
#To apply the plugin, add this script the multiple-numeric question source.
There are two options to adjust<br /> -'''order''' - this is the order that your subquestions will be displayed (default, 1, 2, 3, 4)<br /> -'''randomOrder''' - if set to true, the '''order''' option will be overridden and the subquestion order will be randomized (default, false)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').vWPricing25({
order: [1, 2, 3, 4],
randomOrder: false
});

});
</script></syntaxhighlight>
== 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".<br />

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

'''Implementation''':

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your Multiple Choice question with the last subquestions as "Select all".
#Add the following script to the source of the question text:<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:complete',function() {

// Identify this question
var thisQuestion = $('#question{QID}');

// Initial states
if($('input[type="checkbox"]:last', thisQuestion).is(':checked')) {
$('input[type="checkbox"]', thisQuestion).not(':last').prop('checked', true).prop('disabled', true);
}

// Listener on the last checkbox
$('input[type="checkbox"]:last', thisQuestion).on('change', function(e) {
if($(this).is(':checked')) {
$('input[type="checkbox"]', thisQuestion).not(this).prop('checked', true).prop('disabled', true);
}
else {
$('input[type="checkbox"]', thisQuestion).not(this).prop('checked', false).prop('disabled', false);
}

// Fire ExpressionScript
$('input[type="checkbox"]', thisQuestion).not(this).each(function(i) {
checkconditions(this.value, this.name, this.type);
});
});

// Re-enable checkboxes so data gets stored
$('#moveprevbtn, #movenextbtn, #movesubmitbtn').on('click', function(){
$('input[type="checkbox"]', thisQuestion).prop('disabled', false);
});
});
</script></syntaxhighlight>

= Pay Off Matrix Interface =
== LimeSurvey Version 2.67.x==

This workaround converts a list-radio type question into a Pay Off Matrix interface.<br /><br />

[[File:Pay_off_matrix_1.png]]<br />
[[File:Pay_off_matrix_2.png]]<br /><br />

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

'''Implementation''':

#Create your List Radio question with with the upper and lower values for each answer separated by "pipe" characters.<br />[[File:Pay_off_matrix_3.png]]
#Assign a class "pay-off-matrix" to that question.<br />[[File:Pay_off_matrix_4.png]]
#Add the following to the end of template.js:<syntaxhighlight lang="javascript">$(document).on('ready pjax:complete',function() {
// Apply the payOffMatrix plugin
$('.pay-off-matrix').payOffMatrix({
topText: 'You receive',
bottomText: 'Others receive'
});
});

/*****
A jQuery plugin to convert a list-radio question to a Pay Off Matrix
Copyright (C) 2017 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 1.0
Create date - 25/09/2017
*****/

(function($){

$.fn.payOffMatrix = function(options) {

var opts = $.extend( {
topText: '',
bottomText: ''
}, options);

return this.each(function() {

var thisQuestion = $(this);

// Insert the matrix elements
$('div.answer', thisQuestion).prepend('<div class="pom-outer-wrapper"><div class="pom-wrapper">\
<div class="pom-row-label top">'+opts.topText+'</div>\
<div class="pom-items-wrapper">\
</div>\
<div class="pom-row-label bottom">'+opts.bottomText+'</div>\
<div style="clear:both;" />\
</div></div>');

$('.answer-item', thisQuestion).each(function(i) {
var thisValue = $('input.radio', this).attr('value');
var itemTop = $.trim($('.label-text', this).text()).split('|')[0];
var itemBottom = $.trim($('.label-text', this).text()).split('|')[1];
$('.pom-items-wrapper', thisQuestion).append('<div class="pom-item">\
<div class="pom-item-label-wrapper top">\
<div class="pom-item-label">'+itemTop+'</div>\
</div>\
<div class="pom-item-button-wrapper">\
<div class="pom-item-button" data-value="'+thisValue+'"></div>\
</div>\
<div class="pom-item-label-wrapper bottom">\
<div class="pom-item-label">'+itemBottom+'</div>\
</div>\
<div class="under-480" style="clear:both;" />\
</div>');
});
$('.pom-item:first', thisQuestion).addClass('first');
$('.pom-item:last', thisQuestion).addClass('last');

// Listeners on the matrix events
$('.pom-item-button, .pom-item-label', thisQuestion).on('click', function(e) {
$('.pom-item', thisQuestion).removeClass('active-item');
$(this).closest('.pom-item').addClass('active-item');
var thisValue = $(this).closest('.pom-item').find('.pom-item-button').attr('data-value');
$('input.radio[value="'+thisValue+'"]', thisQuestion).trigger('click');
}).hover(
function() {
$(this).closest('.pom-item').addClass('hover');
}, function() {
$( this ).closest('.pom-item').removeClass('hover');
}
);
});

};
})(jQuery);</syntaxhighlight>
#Add the following to the end of template.css:<syntaxhighlight lang="css">/*****
Styles for the payOffMatrix plugin
Copyright (C) 2017 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 1.0
Create date - 25/09/2017
*****/

.pay-off-matrix .answers-list {
position: absolute;
left: -9999em;
}

.pom-wrapper {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 648px;
}

.pom-item {
float: left;
}

.pom-row-label {
clear: both;
text-align: center;
font-size: 16px;
}

.pom-row-label.top {
padding-top: 5px;
}

.pom-row-label.bottom {
padding-bottom: 5px;
}

.pom-item-label-wrapper {
padding: 5px 8px;
}

.pom-item-label-wrapper.top {
margin-bottom: 3px;
}

.pom-item-label-wrapper.bottom {
margin-top: 3px;
}

.pom-item {
width: 11.11111111111111%;
}

.pom-item-label {
border: 1px solid #233140;
background: #EBEBEB;
-moz-transition: background-color 300ms ease;
-o-transition: background-color 300ms ease;
-webkit-transition: background-color 300ms ease;
transition: background-color 300ms ease;
text-align:center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
font-size: 16px;
line-height: 30px;
}

.pom-item.hover .pom-item-label,
.pom-item.active-item .pom-item-label {
font-weight: bold;
cursor: pointer;
}

.pom-item.active-item .pom-item-label {
background: #233140;
color: #FFFFFF;
}

.pom-item-button-wrapper {
padding: 5px 15.27777777777778%;
background: #CCD5DD;
width: 69.44444444444444%;
width: auto;
}

.pom-item.first .pom-item-button-wrapper {
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-khtml-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}

.pom-item.last .pom-item-button-wrapper {
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-khtml-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}

.pom-item-button {
height: 0;
width: 100%;
padding-top: 100%;
background: #FFFFFF;
-moz-transition: background-color 300ms ease;
-o-transition: background-color 300ms ease;
-webkit-transition: background-color 300ms ease;
transition: background-color 300ms ease;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
}

.pom-item.hover .pom-item-button {
background-color: #5b7fa5;
}

.pom-item.active-item .pom-item-button,
.pom-item.active-item .pom-item-button:hover {
background-color: #233140;
cursor:default;
}

@media only screen and (max-width: 480px) {
.pom-outer-wrapper {
margin: 0 auto;
padding-top: 50px;
width: 256px;
}
.pom-wrapper {
display:block;
position: relative;
}

.pom-row-label {
bottom: 100%;
left: 0;
margin-left: -25px;
position: absolute;
text-align: center;
width: 150px;
background-color: transparent !important;
}

.pom-row-label.bottom {
left: auto;
right: 0;
margin-right: -25px;
padding: 5px 0 0 0;
}

pom-items-wrapper {
vertical-align: middle;
}

.pom-item {
float: none;
width: auto;
}

.pom-item-label-wrapper {
float: left;
margin: 0 !important;
padding: 7px 24px;
}

.pom-item-label {
width: 50px;
}

.pom-item-button-wrapper {
float: left;
margin: 0 5px;
padding: 5px;
width: 46px;
}

.pom-item.first .pom-item-button-wrapper {
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-khtml-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}

.pom-item.last .pom-item-button-wrapper {
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-khtml-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

.pom-item .under-480 {
display: block !important;
}
}</syntaxhighlight>

== LimeSurvey Version 3.x==
Here is a custom question theme for LS 3.x - https://github.com/tpartner/LimeSurvey-Social-Value-Orientation

Workarounds: Manipulating a survey at runtime using Javascript

2023-05-11T17:27:02Z

Tpartner: /* Text input masks */

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]]

<div class="simplebox"><center><br />'''Please keep in mind that these workarounds are not official LimeSurvey extensions - they are solutions that users have created for themselves.<br /><span style='color:#EE0000,#FFFFFF'>Therefore LimeSurvey can't offer guarantees or support for these solutions.</span><br />If you have questions, please contact the users that, thankfully, shared their solutions with the community.'''<br /><br /></center></div>

<div class="simplebox">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.<br /><br /></div>

__TOC__

=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 <nowiki>''Tested with: (enter LimeSurvey version and maybe browser)''</nowiki>.

Finally it's imported to mark all your code with code tags, other wise you might break this page.
*Start tag: '''<nowiki><syntaxhighlight lang="php"></nowiki>'''
*End tag: '''<nowiki></syntaxhighlight></nowiki>'''.

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

Plugin [https://extensions.sondages.pro/questions-updating-and-managing/addscripttoquestion-easily-add-javascript/ 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".
* [http://docs.limesurvey.org/tiki-index.php?page=Adding+A+Question Add a new question]
* Edit the question and click the "Source" button in the editor toolbar:

[[File:Editor_1.png]]
* Enter your script after the question text:

[[File:Editor_2.png]]
* Save the question

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

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
alert("Test!");
</script></syntaxhighlight>

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:

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:complete',function() {
alert("Test!");
});
</script></syntaxhighlight>

===Usage of brackets (<nowiki>{ and }</nowiki>)===
{{Alert|title=Caution when using brackets (<nowiki>{ and }</nowiki>) in scripts|text=[[ExpressionScript#Syntax|Expression manager]] uses brackets (<nowiki>{ and }</nowiki>) to enclose expressions. If you have to use brackets in your JavaScript, you must add a space or line feed after the opening bracket (<nowiki>{</nowiki>) and before the closing bracket (<nowiki>}</nowiki>) }}

===Examples of usage of brackets===

ExpressionScript will try to parse this JavaScript:
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(function() {console.log('broken javascript');});
</script>
</syntaxhighlight>

Adding line feed prevents ExpressionScript from parsing
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(function() {
console.log('Adding a line feed for javascript');
});
</script>
</syntaxhighlight>

ExpressionScript will try to parse this JavaScript:
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
if(myvar==1) {console.log('broken javascript');};
</script>
</syntaxhighlight>

Adding spaces inside the brackets prevents ExpressionScript from parsing
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
if(myvar==1) { console.log('Adding a space for javascript'); };
</script>
</syntaxhighlight>

=Sum up input values using Javascript=

''Tested with: ''

<div class="simplebox">As of version 1.92, this is easier to do using the sum() function in [[ExpressionScript|ExpressionScript]]. See this [[ExpressionScript how-tos#Calculate assessment values at runtime and store the results in the survey data|HowTo example]].</div>

<div class="simplebox">Starting in Version 1.92, you also do no longer need to use SGQA (e.g. 45251X1X5) identifiers. Instead the code <code>{SGQ}</code> will automatically replaced by the current questions SGQA-codes.</div>

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 [http://docs.limesurvey.org/tiki-index.php?page=SGQA+Identifier SGQA identifier] and [[Adding a question#Information from previous answers|Using information from previous answers]].

<syntaxhighlight lang="html4strict">

<div style="text-align: left">These are your answers:<br />

<u></u><u></u><u></u><u></u><u>=

<p><script LANGUAGE="JavaScript">

partyprice = 3;

beadclothprice = 3;

breakfastprice = 7;

lunchprice = 8;

dinnerprice = 10;

foodtotal = 0;

var isreallytrue = "Yes";

var noanswer = "No answer";

document.write( "Can you come? = {INSERTANS:45251X1X1}<BR>" );

if ("{INSERTANS:45251X1X1}" == isreallytrue )

{

if ("{INSERTANS:45251X1X3}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X3}"; }

partypeople = parseInt(answer);

partytotal = partyprice * partypeople;

document.write( "It's {INSERTANS:45251X1X3} persons who will come = " + partytotal + "€<BR>" );

if ("{INSERTANS:45251X1X4}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X4}";}

beadcloths = parseInt(answer);

beadclothtotal = beadclothprice * beadcloths;

document.write( "You want to borrow {INSERTANS:45251X1X4} beadcloths = " + beadclothtotal + "€<BR>" );

document.write( "Will you be there thursday? = {INSERTANS:45251X1X5}<BR>" );

document.write( "On friday you will have these meals: <BR>" );

if ("{INSERTANS:45251X1X71}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X71}";}

breakfastfriday = parseInt(answer) * breakfastprice;

document.write( "'''_ " + answer + " breakfeasts = " + breakfastfriday + "€<BR>" );

if ("{INSERTANS:45251X1X72}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X72}";}

lunchfriday = parseInt(answer) * lunchprice ;

document.write( "'''_ " + answer + " lunches = " + lunchfriday + "€<BR>" );

if ("{INSERTANS:45251X1X73}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X73}";}

dinnerfriday = parseInt(answer)* dinnerprice ;

document.write( "'''_ " + answer + " dinners = " + dinnerfriday + "€<BR>" );

foodtotal = breakfastfriday + lunchfriday + dinnerfriday;

document.write( "Will you be there saturday? = {INSERTANS:45251X1X8}<BR>" );

if ("{INSERTANS:45251X1X8}" == isreallytrue )

{

document.write( "On saturday you will have these meals: <BR>" );

if ("{INSERTANS:45251X1X91}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X91}"; }

breakfastsaturday = parseInt(answer) * breakfastprice ;

document.write("'''_ " + answer + " breakfeasts = " + breakfastsaturday + "€<BR>" );

if ("{INSERTANS:45251X1X92}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X92}"; }

lunchsaturday = parseInt(answer) * lunchprice ;

document.write( "'''_ " + answer + " lunches = " + lunchsaturday + "€<BR>" );

if ("{INSERTANS:45251X1X93}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X93}"; }

dinnersaturday = parseInt(answer) * dinnerprice ;

document.write( "'''_ " + answer + " dinners = " + dinnersaturday + "€<BR>" );

foodtotal = foodtotal + breakfastsaturday + lunchsaturday + dinnersaturday;

}

document.write( "Will you be there sunday? = {INSERTANS:45251X1X10}<BR>" );

if ("{INSERTANS:45251X1X10}" == isreallytrue )

{

document.write( "On sunday you will have these meals: <br>" );

if ("{INSERTANS:45251X1X111}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X111}"; }

breakfastsunday = parseInt(answer) * breakfastprice ;

document.write( "'''_ " + answer + " breakfeasts = " + breakfastsunday + "€<BR>" );

if ("{INSERTANS:45251X1X112}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X112}"; }

lunchsunday = parseInt(answer) * lunchprice ;

document.write( "'''_ " + answer + " lunches = " + lunchsunday + "€<BR>" );

if ("{INSERTANS:45251X1X113}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X113}"; }

dinnersunday = parseInt(answer) * dinnerprice ;

document.write( "'''_ " + answer + " dinners = " + dinnersunday + "€<p>" );

foodtotal = foodtotal + breakfastsunday + lunchsunday + dinnersunday;

}

total = partytotal + beadclothtotal + foodtotal;

document.write( "<h3>In total it will cost you " + total + "€</h3><BR>

Put that sum in this bank account 1234 5678 9012" );

}

</SCRIPT></p>

</div></syntaxhighlight>

=Multiple Question Validation=

''Tested with: ''

<div class="simplebox">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|ExpressionScript]]. Such validations also work on the current page, and properly handle array_filter and cascading relevance.</div>

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.):
#Create a new survey of type "group by group", set the "Show |<< Prev| button" to yes and note the SID.
#Add a new group called "Group 1" and note the GID.
#Add a new question "Percent of males" of type "numeric", make it mandatory and note the QID (we will refer to this as QID1).
#Add a new question "Percent of females" of type "numeric", make it mandatory and note the QID (we will refer to this as QID2).
#Add a new group called "Group 2"
#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

<syntaxhighlight lang="javascript">

<script>

function validation()

{

if [[{INSERTANS:SIDXGIDXQID1}+{INSERTANS:SIDXGIDXQID2}) != 100)

{

alert("Your responses don't sum 100! Check them");

document.limesurvey.move.value = 'moveprev';

document.limesurvey.submit();

}

else

{

document.limesurvey.move.value = 'movelast';

document.limesurvey.submit();

}

}

setTimeout("validation()",250);

</script>

</syntaxhighlight>

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

<syntaxhighlight lang="php">

function validation() {

if ("{INSERTANS:SIDXGIDXQID}" != "{INSERTANS:SIDXGIDXQID}") {

alert("Your responses don't match Check them"); document.limesurvey.move.value = 'moveprev';

document.limesurvey.submit();

}

}

setTimeout("validation()",250);

</syntaxhighlight>

=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.

<syntaxhighlight lang="php">

<script>

if ("{INSERTANS:SIDXGIDXQID}" == "No")

{

window.location="http://www.limesurvey.org";

}

</script>

</syntaxhighlight>

=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 (<input> 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...:

<syntaxhighlight lang="php">

<script>

jQuery(document).ready(

function(){

alert('onload alert!');

}

);

</script>

</syntaxhighlight>

...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:

<syntaxhighlight lang="php">document.getElementById("answer73166X16X54").style.display='none';</syntaxhighlight>

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:

<syntaxhighlight lang="php">document.getElementById("answer{SGQ}").style.display='none';</syntaxhighlight>

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:

<syntaxhighlight lang="php">document.getElementById("answer73166X16X54").readOnly=true;</syntaxhighlight> 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.

<syntaxhighlight lang="php">

jQuery(document).ready(

function() {

jQuery('input:radio').each(

function() {

var s = jQuery(this);

var c = s.parent().children('.answertext');

for(var i=0; i < c.length; i++) {

var a = jQuery(c[i]]);

if(this.id </u> a.attr('for') && a.text() == '') {

s.css({ 'display' : 'none' });

a.css({ 'display' : 'none' });

break;

}

}

}

)

}

);

</syntaxhighlight>

==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 <html> 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

<syntaxhighlight lang="javascript">

jQuery(document).ready(

function(){

languagecode=$('html').attr('lang');

alert('This is the current language code: '+languagecode);

}

);

</syntaxhighlight>

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''

<div class="simplebox">As of version 1.92, this is easier to do using the the array_filter attribute, or relevance equations in general.</div>

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.

<syntaxhighlight lang="php">

var previousQuestionAnswer = "{INSERTANS:1000X1X1}";

var currentQuestionID = "#answer1000X1X1"

$(document).ready(function() {

// See if the answer for the previous question matches an answer in the current question

// (other than 'No Answer')

// If so, disable it.

if (previousQuestionAnswer!='No Answer') {

$(currentQuestionID).children().each(function(index, Element)

{

if ($(this).attr('text') == previousQuestionAnswer)

{ $(this).attr('disabled', true); }

}

);}

}); // End of JQuery ready function

</syntaxhighlight>

===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):

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Get the countryCode (first character of the country)
var countryCode = '{INSERTANS:1000X1X1}'.substr(0, 1).toUpperCase();

// Loop through all dropdown options and remove those with codes not starting with the countryCode
$('select[id^="answer"] option').each(function(i){

if($(this).attr('value') && $(this).attr('value').substr(0, 1).toUpperCase() != countryCode) {
$(this).remove();
}
});
});

</script></syntaxhighlight>

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

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Get the stateCode (two first characters of the state)

var stateCode = '{INSERTANS:1000X1X2}'.substr(0, 2).toUpperCase();

// Loop through all dropdown options and remove those with codes not starting with the stateCode

$('select[id^="answer"] option').each(function(i){

if($(this).attr('value') && $(this).attr('value').substr(0, 2).toUpperCase() != stateCode) {

$(this).remove();

}

});

});

</script></syntaxhighlight>

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+''

<div class="simplebox">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).</div>

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...

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

// Match elements with labels using htmlFor and a loop

var labels = document.getElementsByTagName('LABEL');

for (var i = 0; i < labels.length; i++) {

if (labels[i].htmlFor != '') {

var elem = document.getElementById(labels[i].htmlFor);

if (elem)

elem.label = labels[i];

}

}

var answerFilter="{INSERTANS:96553X63X759}";

for (i=0; i<30; i++){

var iLabel = document.getElementById('answer96553X63X760'+(i+1]].label.innerHTML;

if (answerFilter.search(iLabel) == -1){

// Hide element

$('#question760').find('li').eq(i).hide();

// Set value of hidden elements to zero

document.getElementById('answer96553X63X760'+(i+1)).value = 0;

}

}

});</script>

</syntaxhighlight>

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

''Tested with: 1.72''

''And tested with: 1.91+''

<div class="simplebox">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|ExpressionScript]] compatible equations or tailored text. Finally, with 1.92, defaults are properly managed even when set on the same page.</div>

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.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answer1000X11X30').val('{INSERTANS:1000X10X20}');

$('#answer1000X11X31').val('{INSERTANS:1000X10X21}');

});

</script></syntaxhighlight>

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.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answer1000X2X2').val(parseInt('{INSERTANS:1000X1X1}')*2);

$("#question2").hide();

});

</script>

</syntaxhighlight>

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

=Dynamic Sum=

<div class="simplebox">As of version 1.92, this is easier to do with [[ExpressionScript|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 [[ExpressionScript how-tos#Calculate assessment values at runtime and store the results in the survey data|HowTo example]] demonstrates the dynamic sum feature.</div>

<div class="simplebox">Also note, as of version 1.92, the following workaround will fail, since it includes a a regular expression containing curly braces.</div>

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:

<syntaxhighlight lang="php">

<script language=Javascript>

// General definitions

// Define a regular expression to match the labels containing information about an answer

// In LimeSurvey, these labels start with "answer..."

var answerRegex = /^answer/;

// Find all answer checkboxes in the document and set their

// onchange events to updatePrice

function Custom_On_Load()

{

// Find all input elements

var inputList=document.getElementsByTagName("input");

// Loop through each, looking for checkboxes

var i;

for( i=0; i< inputList.length;i++ )

{

// If input item does not have an ID, skip

if (! (inputList[i].id)) { continue; }

// Skip to next if ID doesn't start with "answer"

if (!answerRegex.test(inputList[i].id)) { continue; }

// Skip to next if not a checkbox

if (inputList[i].type.toUpperCase()!='CHECKBOX') { continue; }

// This is an answer checkbox!

// Setup onchange event

inputList[i].onclick = updatePrice;

}

// Load initial sum

updatePrice();

}

function updatePrice()

{

var labels=document.getElementsByTagName("LABEL");

// Define a regular expression to match a price inside parenthesis

// For example: ($29) or ($29.54).

// Set up

priceRegex = /$\$(\d*\.{0,1}\d+)$/;

// Loop through all the labels, looking for labels corresponding to

// answers that have a price in them.

var i;

var total = 0;

for( i=0; i<labels.length;i++ )

{

var myArray; // Define array used for regex matching

var inputID; // Define field element

// Get the ID of the field corresponding to the label using the

// "htmlFor" attribute

// (FYI, there are some labels that will have to be screened out

// because they don't correspond to an answer)

// Does the label start with "answer"?

// If not: exit.

if (!answerRegex.test(labels[i].htmlFor)) { continue; }

// First make sure this element exists

// If it doesn't, go to the next element

// If it does, it will be defined in inputID

if (! (inputID = document.getElementById(labels[i].htmlFor)) ) { continue; }

// See if the corresponding answer is a checkbox that is checked.

// If not, go to next label

if (inputID.type.toUpperCase()!='CHECKBOX') { continue; }

if (!inputID.checked) { continue; }

// This is label for an answer.

// The innerHTML will give us the text of the label

// The price information will be in the form ($XX.XX)

// which in contained in the label text.

// Find a match for a decimal number inside the pattern "($" and ")"

if [[myArray = priceRegex.exec(labels[i].innerHTML]] != null)

{

// Keep a running tally

total += parseFloat(myArray[1]);

}

}

// Update total price on form

document.getElementById("totalPrice").value = "$" + formatCurrency(total);

}

function formatCurrency(num) {

num = isNaN(num) || num <u> '' || num </u> null ? 0.00 : num;

return parseFloat(num).toFixed(2);

}

</script>

</syntaxhighlight>

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

<syntaxhighlight lang="php">Total Cost for selected accessories: <input type="readonly" value="" id="totalPrice" /></syntaxhighlight>

=Focus on the first Input field=

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

<div class="simplebox">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.</div>

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 </head> closing tag:

<syntaxhighlight lang="php">

<script type="text/javascript">

function focusFirst(Event)

{

var i=0;

while(document.forms[0].elements[i].type == "hidden")

{

i++;

}

document.forms[0].elements[i].focus();

return;

}

if(ie)

{ window.attachEvent("onload", focusFirst); }

else

{ document.addEventListener("load", focusFirst, true); }

</script>

</syntaxhighlight>

'''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:

<syntaxhighlight lang="php">

<script type="text/javascript">

var ie = false;

</script>

</syntaxhighlight>

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.

<syntaxhighlight lang="php">

<script type="text/javascript">

jQuery(document).ready(function() {

jQuery(document).bind('keypress', function(e){

if (48 <= e.which && e.which <= 57) {

jQuery('input:radio').each(function() {

var v = jQuery(this).val();

var c = (e.which <u> 48) ? 10 : e.which - 48;

if(v </u> 'Y' || v <u> 'N') {

v = (v </u> 'Y') ? 1 : 2;

}

if(v == c) {

jQuery(this).click();

jQuery('#limesurvey input:submit').click();

}

});

}

})

});

</script>

</syntaxhighlight>

=Math notation in LimeSurvey=
#download the js file from [http://mathcs.chapman.edu/~jipsen/mathml/asciimathdownload.html AsciiMath script]
#copy it in the /scripts/ folder in your installation
#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:

<syntaxhighlight lang="php">

<script type="text/javascript" src="ASCIIMathML.js">

</syntaxhighlight>

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 [http://www.imathas.com/editordemo/demo.html link for a TinyMCE with math support].

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

<div class="simplebox">As of version 2.06 this workaround is not required. It can be handled with subquestion relevance.</div>

''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:'''
*[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|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.<syntaxhighlight lang="javascript">function filterArrByCol(qMultiOpt, qArray, prevPage) {

// If filter question is on a previous page, hide Q1 and check all "visible" boxes
if(prevPage == 1) {
$('#question'+qMultiOpt+' li[id^="javatbd"]:visible input.checkbox').attr('checked', true);
$('#question'+qMultiOpt+'').hide();
}

// Assign classes to the answer cells
$('#question'+qArray+' td.answer-item').each(function(i){
var classArr = $(this).attr('class').split('answer_cell_00');
classArr = classArr[1].split(' ');
var ansCode = classArr[0];
$(this).addClass('ans-'+ansCode+' filtered');
});

// Assign classes to the answer label cells
$('#question'+qArray+' table.subquestions-list tbody tr:eq(0) td.answer-item').each(function(i){
var classArr2 = $(this).attr('class').split(' ans-');
var ansCode2 = classArr2[1];
$('#question'+qArray+' table.subquestions-list thead tr:eq(0) th:eq('+i+')').addClass('ans-'+ansCode2+'');
});

// Fire the filter function on page load
filterArr(qMultiOpt, qArray);

// Listener on multi-opt checkboxes to fire the filter function
$('#question'+qMultiOpt+' input.checkbox').click(function(){
filterArr(qMultiOpt, qArray);
});

// On submit, clear all hidden radios of array
$('#movenextbtn, #movesubmitbtn').click(function(){
$('#question'+qArray+' td.filtered:hidden').each(function(i){
$('input.radio', this).prop('checked', false);
});
return true;
});
}

function filterArr(qMultiOpt, qArray) {

if($('#question'+qMultiOpt+' input.checkbox:checked').length < 1) {
// Hide the array if no multi-opt options are checked
$('#question'+qArray+'').hide();
}
else {
$('#question'+qArray+'').show();

// Hide all columns of array
$('#question'+qArray+' table.subquestions-list tbody td.answer-item, #question'+qArray+' table.question thead th').hide();

// Loop through multi-opt checkboxes and, if checked, show corresponding column of array
$('#question'+qMultiOpt+' input.checkbox').each(function(i){
if($(this).prop('checked') == true) {
var classArr3 = $(this).attr('id').split('X'+qMultiOpt);
var ansCode3 = classArr3[1];
$('#question'+qArray+' .ans-'+ansCode3+'').show();
}
});
}
}</syntaxhighlight>

*If using LimeSurvey version 2.0 or older, place the following functions in your template.js file. These will be accessed by either method.<syntaxhighlight lang="javascript">
$(document).ready(function() {

function filterArrByCol(qMultiOpt, qArray, prevPage) {

// If filter question is on a previous page, hide Q1 and check all "visible" boxes
if(prevPage == 1) {
$('#question'+qMultiOpt+' li[id^="javatbd"]:visible input.checkbox').attr('checked', true);
$('#question'+qMultiOpt+'').hide();
}

// Assign classes to the answer cells
$('#question'+qArray+' table.question tbody td').each(function(i){
var classArr = $(this).attr('class').split('answer_cell_00');
var ansCode = classArr[1];
$(this).addClass('ans-'+ansCode+' filtered');
});

// Assign classes to the answer label cells
$('#question'+qArray+' table.question tbody tr:eq(0) td').each(function(i){
var classArr2 = $(this).attr('class').split(' ans-');
var ansCode2 = classArr2[1];
$('#question'+qArray+' table.question thead tr:eq(0) th:eq('+i+')').addClass('ans-'+ansCode2+'');
});

// Fire the filter function on page load
filterArr(qMultiOpt, qArray);

// Listener on multi-opt checkboxes to fire the filter function
$('#question'+qMultiOpt+' input.checkbox').click(function(){
filterArr(qMultiOpt, qArray);
});

// On submit, clear all hidden radios of array
$('#movenextbtn, #movesubmitbtn').click(function(){
$('#question'+qArray+' td.filtered:hidden').each(function(i){
$('input.radio', this).attr('checked', false);
});
return true;
});
}

function filterArr(qMultiOpt, qArray) {

if($('#question'+qMultiOpt+' input.checkbox:checked').length < 1) {
// Hide the array if no multi-opt options are checked
$('#question'+qArray+'').hide();
}
else {
$('#question'+qArray+'').show();

// Hide all columns of array
$('#question'+qArray+' table.question tbody td, #question'+qArray+' table.question thead th').hide();

// Loop through multi-opt checkboxes and, if checked, show corresponding column of array
$('#question'+qMultiOpt+' input.checkbox').each(function(i){
if($(this).attr('checked') == true) {
var classArr3 = $(this).attr('id').split('X'+qMultiOpt);
var ansCode3 = classArr3[1];
$('#question'+qArray+' .ans-'+ansCode3+'').show();
}
});
}
}
});</syntaxhighlight>

'''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).<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
filterArrByCol(MM, AA);
});
</script></syntaxhighlight>

'''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.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
filterArrByCol(MM, AA, 1);
});
</script></syntaxhighlight>

=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 [http://plugins.jquery.com/project/autotab 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.

Implementation is as follows:
#Visit [http://plugins.jquery.com/autotabs http://plugins.jquery.com/autotabs], download the plugin script and save it as ''jquery.autotab-1.1b.js'' in the template folder.
#Link to the script by placing ''<script type="text/javascript" src="{TEMPLATEURL}jquery.autotab-1.1b.js"></script>'' within the ''<head>'' tag of startpage.pstpl.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#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)
#Define a Maximum characters attribute for all questions that the autotab is applied to.
{{QS:maximum_chars}}
#In the source of the first question of the group that contains the auto-tabbed questions, add the following code.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answerSSSSSXGGXAA').focus(); //initially focus on the first input

$('#answerSSSSSXGGXAA').autotab({ target: 'answerSSSSSXGGXBB' });

$('#answerSSSSSXGGXBB').autotab({ previous: 'answerSSSSSXGGXAA', target: 'answerSSSSSXGGXCC' });

$('#answerSSSSSXGGXCC').autotab({ previous: 'answerSSSSSXGGXBB', target: 'answerSSSSSXGGXDD' });

$('#answerSSSSSXGGXDD').autotab({ previous: 'answerSSSSSXGGXCC' });

});

</script></syntaxhighlight>

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

[[File:ids_343x252.gif]]

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 [[Workarounds#Reverse_array_filter|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 [http://docs.jquery.com/Events/change 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.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#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

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answer11111X22X33').change(function() {

if ( $('#answer11111X22X33').val() > 10 ) {
alert ("That's an awful lot. Are you sure?");
}
});
});
</script></syntaxhighlight>

=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 [http://plugins.jquery.com/project/meioMask 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/ http://www.meiocodigo.com/projects/meiomask/] for more details on features and options.

Implementation for this demo was as follows:
#Visit [http://www.meiocodigo.com/projects/meiomask/ http://www.meiocodigo.com/projects/meiomask/], download the latest plugin script and save it as jquery.meiomask.js in the template folder.
#Link to the script by placing <script type="text/javascript" src="{TEMPLATEURL}jquery.meiomask.js" charset="utf-8"></script> within the <head> tag of startpage.pstpl.
#Turn off $filterxsshtml to allow insertion of JavaScript in the questions. ([http://docs.limesurvey.org/tiki-index.php?page=Optional+settings&structure=English+Instructions+for+LimeSurvey#Filtering_dangerous_HTML_tags_in_survey_objects See documentation here])
#Create the text input questions that the masks are to be applied to
#In the source of the help section of the first question of the group that contains the masked inputs, add the following code. ([http://docs.limesurvey.org/tiki-index.php?page=Workarounds&structure=English+Instructions+for+LimeSurvey#How_to_use_Script_eg._JavaScript_etc._ See How to use script here])

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Define custom masks
$.mask.masks = $.extend($.mask.masks,{
customMask1:{ mask: 'a9a 9a9' }, // Canadian postal code
// Maximum input of 9,999.99, reverse input, default value of 0.00
customMask2:{ mask: '99.999,9', type : 'reverse', defaultValue : '000' }
});

// Set the 'alt' attributes of the inputs
$('#answer111111X22XAA').attr('alt', 'phone-us'); // a pre-defined mask
$('#answer111111X22XBB').attr('alt', 'customMask1'); // a custom mask
$('#answer111111X22XCC').attr('alt', 'customMask2'); // a custom mask
$('#answer111111X22XDD').attr('alt', 'cc'); // a pre-defined mask for credit card

// Tell the plugin to apply masks to these inputs
$('input:#answer111111X22XAA').setMask();
$('input:#answer111111X22XBB').setMask();
$('input:#answer111111X22XCC').setMask();
$('input:#answer111111X22XDD').setMask();
});
</script>
</syntaxhighlight>

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 [http://www.meiocodigo.com/projects/meiomask/#mm_options 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

[[File:Ids 343x252.gif]]

=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/ http://digitalbush.com/projects/masked-input-plugin/] for more details on features and options.

Implementation as follows:

#Visit [http://digitalbush.com/projects/masked-input-plugin/ http://digitalbush.com/projects/masked-input-plugin/], download the latest plugin script and save it as jquery.maskedinput.js in the template folder.
#Link to the script by placing <script type="text/javascript" src="{TEMPLATEURL}jquery.maskedinput.js" charset="utf-8"></script> within the <head> tag of startpage.pstpl.
#Turn off $filterxsshtml to allow insertion of JavaScript in the questions. ([http://docs.limesurvey.org/tiki-index.php?page=Optional+settings&structure=English+Instructions+for+LimeSurvey#Filtering_dangerous_HTML_tags_in_survey_objects See documentation here])
#Create the text input questions that the masks are to be applied to
#In the source of the help section of the first question of the group that contains the masked inputs, add the following code. ([http://docs.limesurvey.org/tiki-index.php?page=Workarounds&structure=English+Instructions+for+LimeSurvey#How_to_use_Script_eg._JavaScript_etc._ See How to use script here])

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function($) {
$("#answer55431X1X5").mask("999-99-9999",{ placeholder:"#" });
});
</script>
</syntaxhighlight>

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.
<br /><br />
'''DOWNLOAD:'''<br />
- [[Media:Demo_Random_Option_From_Multi-Choice_v206.1.zip|Demo survey for LS 2.06]]<br />
- [[Media:Demo_Random_Option_From_Multi-Choice_v25.1.zip|Demo survey for LS 2.5]]<br />
<br />
'''IMPLEMENTATION''' (LimeSurvey version 2.06)<br />

#[https://manual.limesurvey.org/Workarounds:_Manipulating_a_survey_at_runtime_using_Javascript#How_to_use_Script_.28eg._JavaScript_etc..29_in_LimeSurvey.3F Set up your survey to use JavaScript].
#Create a "Multiple options" question
#Immediately following that question, create a short-text question to store the label of the checked box in (we'll hide this with JavaScript)
#Place the script below in the source of the multiple options question. <syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// Identify the questions
var thisQuestion = $('#question{QID}');
var qHidden = thisQuestion.nextAll('.text-short:eq(0)');
var hiddenInput = $('input.text', qHidden);

// Hide qHidden
qHidden.hide();

// Listener on the checkboxes
$('input.checkbox', thisQuestion).on('change', function(e) {
handleChecked();
});

// Listener on the "Other" input
$('input.text', thisQuestion).on('keyup change', function(e) {
setTimeout(function() {
handleChecked();
}, 250);
});

function handleChecked() {
// Build an array of checked answers
var checkedAnswers = [];
$('input.checkbox:checked', thisQuestion).each(function(i) {
if($(this).closest('.answer-item').hasClass('other-item')) {
checkedAnswers.push($(this).closest('.other-item').find('input.text').val());
}
else {
checkedAnswers.push($(this).nextAll('label:eq(0)').text());
}
});

// Load the hidden question with a random item from the array
var checkedLength = checkedAnswers.length;
$(hiddenInput).val(checkedAnswers[Math.floor(Math.random()*checkedLength)]);

// Fire ExpressionScript
checkconditions(hiddenInput.value, hiddenInput.name, hiddenInput.type);
}
});
</script></syntaxhighlight>
<br />
'''IMPLEMENTATION''' (LimeSurvey version 2.5)

#Follow the first 3 implementation steps above
#Place the script below in the source of the multiple options question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// Identify the questions
var thisQuestion = $('#question{QID}');
var qHidden = thisQuestion.nextAll('.text-short:eq(0)');
var hiddenInput = $('input.text', qHidden);

// Hide qHidden
qHidden.hide();

// Class for "Other
$('input.text', thisQuestion).closest('.answer-item').addClass('other-item');

// Listener on the checkboxes
$('input.checkbox', thisQuestion).on('change', function(e) {
handleChecked();
});

// Listener on the "Other" input
$('input.text', thisQuestion).on('keyup change', function(e) {
setTimeout(function() {
handleChecked();
}, 250);
});

function handleChecked() {
// Build an array of checked answers
var checkedAnswers = [];
$('input.checkbox:checked', thisQuestion).each(function(i) {
if($(this).closest('.answer-item').hasClass('other-item')) {
checkedAnswers.push($(this).closest('.answer-item').find('input.text').val());
}
else {
checkedAnswers.push($.trim($(this).nextAll('.label-text:eq(0)').text()));
}
});

// Load the hidden question with a random item from the array
var checkedLength = checkedAnswers.length;
$(hiddenInput).val(checkedAnswers[Math.floor(Math.random()*checkedLength)]);

// Fire ExpressionScript
checkconditions(hiddenInput.value, hiddenInput.name, hiddenInput.type);
}
});
</script></syntaxhighlight>

=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:<br />
[[File:Secondary_options_1.png]]

Primary option selected:<br />
[[File:Secondary_options_2.png]]<br /><br />

'''DOWNLOADS:'''<br />
- [[Media:Demo_Secondary_Checkboxes.zip|Demo template for LS version 2.06]]<br />
- [[Media:Demo_Secondary_Checkboxes.lss|Demo survey for LS version 2.06]].<br />
- [[Media:Template_Demo_Secondary_Checkboxes_For_2.5.zip|Demo template for LS version 2.5]]<br />
- [[Media:Survey_Demo_Secondary_Multiple_Options_For_LS_25.zip|Demo survey for LS version 2.5]].<br /><br />

==LimeSurvey version 2.06==

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create a "Multiple options" question including both the primary and secondary subquestions (in the order that you would like them displayed if all shown).
#Add the following function to the end of template.js:<syntaxhighlight lang="javascript">
// A function to handle "secondary" checkboxes
function secondaryCheckboxes(qID, primaryPosition, secondaryCount) {
// Identify the elements
var thisQuestion = $('#question'+qID);
var primaryRow = $('li.question-item:eq('+(primaryPosition-1)+')', thisQuestion);
var primaryInput = $('input.checkbox', primaryRow);
var secondaryRows = primaryRow.nextAll('li.question-item:lt('+(secondaryCount)+')');
var secondaryInputs = $('input.checkbox', secondaryRows);

// Indent the secondaries
secondaryRows.css({ 'margin-left':'2.5em' });

// Initial states of the secondary answers
if (primaryInput.prop('checked') == false ) {
secondaryRows.hide();
}

// A listener on the primary answer to show or hide secondary answers
primaryInput.click(function (event) {

// Hide/show the secondary answers accordingly
if (!$(this).is(':checked')) {
secondaryRows.hide();
secondaryInputs.prop('checked', false);
secondaryInputs.each(function(i) {
checkconditions(this.value, this.name, this.type);
});
}
else {
secondaryRows.show();
}
});
}</syntaxhighlight>
#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. <br />So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Sub-question 1 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 1, 2);
// Sub-question 6 is primary followed by 3 secondaries
secondaryCheckboxes({QID}, 6, 3);
});
</script></syntaxhighlight>

==LimeSurvey version 2.5==

#Follow the first 2 implementation steps above
#Add the following function to the end of template.js:<syntaxhighlight lang="javascript">
// A function to handle "secondary" checkboxes
function secondaryCheckboxes(qID, primaryPosition, secondaryCount) {
// Identify the elements
var thisQuestion = $('#question'+qID);
$('div.question-item', thisQuestion).parent().addClass('answer-row');
var primaryRow = $('div.question-item:eq('+(primaryPosition-1)+')', thisQuestion).closest('.answer-row');
var primaryInput = $('input.checkbox', primaryRow);
var secondaryRows = primaryRow.nextAll('div.answer-row:lt('+(secondaryCount)+')');
var secondaryInputs = $('input.checkbox', secondaryRows);

// Indent the secondaries
secondaryRows.css({ 'margin-left':'2.5em' });

// Initial states of the secondary answers
if (primaryInput.prop('checked') == false ) {
secondaryRows.hide();
}

// A listener on the primary answer to show or hide secondary answers
primaryInput.click(function (event) {

// Hide/show the secondary answers accordingly
if (!$(this).is(':checked')) {
secondaryRows.hide();
secondaryInputs.prop('checked', false);
secondaryInputs.each(function(i) {
checkconditions(this.value, this.name, this.type);
});
}
else {
secondaryRows.show();
}
});
}</syntaxhighlight>
#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. <br />So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Sub-question 1 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 1, 2);
// Sub-question 6 is primary followed by 3 secondaries
secondaryCheckboxes({QID}, 6, 3);
});
</script></syntaxhighlight>

==LimeSurvey version 3.x==

#Follow the first 2 implementation steps above
#Add the following function to the end of custom.js:<syntaxhighlight lang="javascript">
// A function to handle "secondary" checkboxes
function secondaryCheckboxes(qID, primaryPosition, secondaryCount) {
// Identify the elements
var thisQuestion = $('#question'+qID);
var primaryRow = $('li.question-item:eq('+(primaryPosition-1)+')', thisQuestion).closest('li.question-item');
var primaryInput = $('input:checkbox', primaryRow);
var secondaryRows = primaryRow.nextAll('li.question-item:lt('+(secondaryCount)+')');
var secondaryInputs = $('input:checkbox', secondaryRows);

// Indent the secondaries
secondaryRows.css({ 'margin-left':'2.5em' });

// Initial states of the secondary answers
if (primaryInput.prop('checked') == false ) {
secondaryRows.hide();
}

// A listener on the primary answer to show or hide secondary answers
primaryInput.on('change', function (event) {

// Hide/show the secondary answers accordingly
if (!$(this).is(':checked')) {
secondaryRows.hide();
secondaryInputs.prop('checked', false).trigger('change');
}
else {
secondaryRows.show();
}
});
}</syntaxhighlight>
#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. <br />So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Sub-question 1 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 1, 2);
// Sub-question 6 is primary followed by 3 secondaries
secondaryCheckboxes({QID}, 6, 3);
});
</script></syntaxhighlight>

=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.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#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.

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

minTime(TT);

function minTime(minTime) {

var startTime = new Date();

$('#movenextbtn, #movesubmitbtn').click(function(){

var endTime = new Date();

if((endTime - startTime)/1000 <= minTime) {
alert ('You must spend at least '+minTime+' seconds on the question.');
return false;
}
else {
return true;
}
});
}
});
</script>
</syntaxhighlight>

=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''

<div class="simplebox">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.</div>

<div class="simplebox">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.</div>

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.

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].

#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.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

minChar(QQ, CC);

function minChar(qID, minChars) {

$('#movenextbtn, #movesubmitbtn').click(function(){

if($('#question'+qID+' textarea').val().replace(/ /g,'').length < minChars) {

alert ('You must enter at least '+minChars+' characters.');

return false;

}

else {

return true;

}

});

}

});

</script></syntaxhighlight>

=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.

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:

#Set up your survey to use JavaScript (See instructions [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|here]])

#Add the following script to your ''template.js'' file.

#Replace "QQ" in the function call at the end with the question ID.

#Create one or more Array (Multi Flexible Text) questions

#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);...)

<syntaxhighlight lang="javascript">$(document).ready(function() {

// A function to add or remove rows of an Array (Multi Flexible)(Text) question
function varLengthArray(qID) {

if ($('#question'+qID+'').length > 0) {

// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+]';
var removeContent = '[-]';

// Create the Add and Remove elements & insert them
var el1 = document.createElement('div');
el1.setAttribute('id','addButton'+qID);
document.body.appendChild(el1);
var el2 = document.createElement('div');
el2.setAttribute('id','removeButton'+qID);
document.body.appendChild(el2);

// Move them to after the array
$( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.question' ).parent());
$( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.question' ).parent());

// Insert their HTML
$( 'div#addButton'+qID ).html( addContent );
$( 'div#removeButton'+qID ).html( removeContent );

// Style the elements - you can modify here if you wish
$( 'div#addButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

$( 'div#removeButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

// Initially hide the Remove element
$( 'div#removeButton'+qID ).hide();

// Call the functions below when clicked
$( 'div#addButton'+qID ).click(function (event) {
addRow(qID);
});
$( 'div#removeButton'+qID ).click(function (event) {
removeRow(qID);
});

// Function to add a row, also shows the Remove element and hides the
//Add element if all rows are shown
function addRow(qID) {
var arrayRow = '#question' + qID + ' table.question tbody';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' ) {
$( 'div#addButton'+qID ).hide();
}
}

// Function to remove a row, also clears the contents of the removed row,
// shows the Add element if the last row is hidden and hides the Remove
// element if only the first row is shown
function removeRow(qID) {
var arrayRow = '#question' + qID + ' table.question tbody';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
$( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
$( 'div#addButton'+qID ).show();
if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' ) {
$( 'div#removeButton'+qID ).hide();
}
}

// Just some initialization stuff
var arrayRow = '#question' + qID + ' table.question tbody';
var rowCount = '';

// Initially hide all except first row or any rows with populated inputs
$( arrayRow ).each(function(i) {
if ( i > 0 ) {
// We also need to give the hidden rows a name cause IE doesn't
// recognize jQuery :visible selector consistently
$( this ).attr('name', 'hidden').hide();

$('input[type=text]', this).each(function(i) {
if ($(this).attr('value') != '') {
$(this).parents('tbody:eq(0)').attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
}
});
rowCount = i;
}
});
}
}

// Call the function with a question ID
varLengthArray(QQ);

});</syntaxhighlight>

''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.

<syntaxhighlight lang="javascript">$(document).ready(function() {

// A function to add or remove rows of an Array (Multi Flexible)(Text) question
function varLengthArray(qID) {

if ($('#question'+qID+'').length > 0) {

// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+]';
var removeContent = '[-]';

// Create the Add and Remove elements & insert them
var el1 = document.createElement('div');
el1.setAttribute('id','addButton'+qID);
document.body.appendChild(el1);
var el2 = document.createElement('div');
el2.setAttribute('id','removeButton'+qID);
document.body.appendChild(el2);

// Move them to after the array
$( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());
$( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());

// Insert their HTML
$( 'div#addButton'+qID ).html( addContent );
$( 'div#removeButton'+qID ).html( removeContent );

// Style the elements - you can modify here if you wish
$( 'div#addButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

$( 'div#removeButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

// Initially hide the Remove element
$( 'div#removeButton'+qID ).hide();

// Call the functions below when clicked
$( 'div#addButton'+qID ).click(function (event) {
addRow(qID);
});
$( 'div#removeButton'+qID ).click(function (event) {
removeRow(qID);
});

// Function to add a row, also shows the Remove element and hides the
//Add element if all rows are shown
function addRow(qID) {
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' ) {
$( 'div#addButton'+qID ).hide();
}
}

// Function to remove a row, also clears the contents of the removed row,
// shows the Add element if the last row is hidden and hides the Remove
// element if only the first row is shown
function removeRow(qID) {
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
$( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
$( 'div#addButton'+qID ).show();
if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' ) {
$( 'div#removeButton'+qID ).hide();
}
}

// Just some initialization stuff
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = '';

// Initially hide all except first row or any rows with populated inputs
$( arrayRow ).each(function(i) {
if ( i > 0 ) {
// We also need to give the hidden rows a name cause IE doesn't
// recognize jQuery :visible selector consistently
$( this ).attr('name', 'hidden').hide();

$('input[type=text]', this).each(function(i) {
if ($(this).attr('value') != '') {
$(this).parents('tbody:eq(0)').attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
}
});
rowCount = i;
}
});
}
}

// Call the function with a question ID
varLengthArray(QQ);

});</syntaxhighlight>

=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.

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:
#Set up your survey to use JavaScript. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|documentation here]])
#Create one or more Array questions
#In the source of the first array question add the following script.
#Replace "QQ" in the function call at the end of the script with the question ID of the array you would like to manipulate.
#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);...)

<syntaxhighlight lang="javascript">
<script type="text/javascript">

$(document).ready(function() {

// A function to show subsequent rows of an array as options are checked
function expandingArray(qID) {

// Build an array of the question rows
var arrayRow = '#question' + qID + ' table.question tbody tr';

// Initially hide all rows unless an input was previously checked
$( arrayRow ).each(function(i) {

if ( $( arrayRow + ':eq(' + i + ') input.radio:checked' ).length != 0 ) {
$(this).attr('name', 'clickedRow');
}
else {
$(this).attr('name', 'hidden').hide();
}
});

// Now show the first hidden row
addRow();

// Add another row when an option is checked for the first time
$( '#question' + qID + ' td.answer input.radio' ).click(function (event) {

if ($(this).parents('tr:eq(0)').attr('name') != 'clickedRow') {
addRow();
$(this).parents('tr:eq(0)').attr('name', 'clickedRow');
}

// The original function of the click event
checkconditions(this.value, this.name, this.type);
});

// Add another row when an table cell is clicked for the first time
$( '#question' + qID + ' table.question tbody td' ).click(function (event) {

if ($(this).parents('tr:eq(0)').attr('name') != 'clickedRow') {
addRow();
$(this).parents('tr:eq(0)').attr('name', 'clickedRow');
}
});

// Function to add a row
function addRow() {
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
// Now, scroll down
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
}
}

// Call the function with a question ID
expandingArray(QQ);

});
</script></syntaxhighlight>

=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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create an Array type question.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedCode" value as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// The subquestion code to place in the last position
var fixedCode = 'A1';

// Identify this question
var q1ID = {QID};
var thisQuestion = $('#question'+q1ID);

// Move the "fixed" row to the end
$('table.subquestion-list tbody', thisQuestion).append($('tr[id$="X'+q1ID+fixedCode+'"]'));

// Fix up the array row background colours
$('tr.answers-list', thisQuestion).each(function(i){
$(this).removeClass('array1 array2').addClass('array'+(2-(i%2)));
});

});
</script></syntaxhighlight>

'''Download sample survey:'''<br />
[[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:

[[File:random_336x179gif.gif]]

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)

[[File:Partially_Randomized_Answers_1.png]]

Implementation is as follows:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' li.answer-item').length;

// Place the last answer created at the end of the list
var answer = $( 'input[id$="X'+qID+ansCount+'"]');
var answerItem = $(answer).closest('li');
var answersList = $(answer).closest('ul');
$(answersList).append(answerItem);

});
</script></syntaxhighlight>

'''Download sample survey:'''<br />
[[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:

[[File:Random v2.50.png]]

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)

[[File:Random answers v2.50.png]]

==LimeSurvey version 2.06==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedAnswers" and "otherFixed" variables as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// The number of answers to be fixed at the end of the list
var fixedAnswers = 2;

// Set this to "true" if you want "Other" to be fixed in the last position
var otherFixed = false;

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' li.answer-item').length;
if($('#question'+qID+' input[type="text"]').length > 0) {
ansCount = ansCount -1
}

// Place the last n answers created at the end of the list
var fixedIndex = fixedAnswers - 1;
for (var i=0; i<fixedAnswers; i++) {
var answer = $( 'input[id$="X'+qID+(ansCount-fixedIndex)+'"]');
var answerItem = $(answer).closest('li');
var answersList = $(answer).closest('ul');
$(answersList).append(answerItem);
fixedIndex--;
}

// Handle "Other"
if(otherFixed == true && $('#question'+qID+' input[type="text"]').length > 0) {
var otherAnswer = $('#question'+qID+' input[type="text"]');
var otherAnswerItem = $(otherAnswer ).closest('li');
var otherAnswersList = $(otherAnswer ).closest('ul');
$(otherAnswersList).append(otherAnswerItem);
}
});
</script></syntaxhighlight>

<br /><br />
==LimeSurvey version 2.73.0:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedAnswers" and "otherFixed" variables as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// The number of answers to be fixed at the end of the list
var fixedAnswers = 2;

// Set this to "true" if you want "Other" to be fixed in the last position
var otherFixed = false;

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' .answer-item').length;
if($('#question'+qID+' input[type="text"]').length > 0) {
ansCount = ansCount -1
}

// Place the last n answers created at the end of the list
var fixedIndex = fixedAnswers - 1;
for (var i=0; i<fixedAnswers; i++) {
var answer = $('input[id^="answer"][id$="X'+qID+'s'+(ansCount-fixedIndex)+'"]');
var answerItem = $(answer).closest('.answer-item');
var answersList = $(answer).closest('.answers-list');
if($('#question'+qID).hasClass('multiple-opt')) {
answer = $('input[id^="answer"][id$="X'+qID+(ansCount-fixedIndex)+'"]');
answerItem = $(answer).closest('.answer-item').parent();
answersList = $(answer).closest('.subquestion-list');
}
$(answersList).append(answerItem);
fixedIndex--;
}

// Handle "Other"
if(otherFixed == true && $('#question'+qID+' input[type="text"]').length > 0) {
var otherAnswer = $('#question'+qID+' input[type="text"]');
var otherAnswerItem = $(otherAnswer ).closest('.answer-item');
var otherAnswersList = $(otherAnswer ).closest('.answers-list');
if($('#question'+qID).hasClass('multiple-opt')) {
otherAnswerItem = $(otherAnswer ).closest('.answer-item').parent();
otherAnswersList = $(otherAnswer ).closest('.subquestion-list');
}
$(otherAnswersList).append(otherAnswerItem);
}
});
</script></syntaxhighlight>

<br /><br />
==LimeSurvey version 3.x:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedAnswers" and "otherFixed" variables as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).on('ready pjax:scriptcomplete',function(){

// The number of answers to be fixed at the end of the list
var fixedAnswers = 2;

// Set this to "true" if you want "Other" to be fixed in the last position
var otherFixed = false;

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' .answer-item').length;
if($('#question'+qID+' input[type="text"]').length > 0) {
ansCount = ansCount -1
}
console.log(ansCount);

// Place the last n answers created at the end of the list
var fixedIndex = fixedAnswers - 1;
for (var i=0; i<fixedAnswers; i++) {
var answer = $('input[id^="answer"][id$="X'+qID+(ansCount-fixedIndex)+'"]');
var answerItem = $(answer).closest('.answer-item');
var answersList = $(answer).closest('ul');
$(answersList).append(answerItem);
fixedIndex--;
}

// Handle "Other"
if(otherFixed == true && $('#question'+qID+' input[type="text"]').length > 0) {
var otherAnswer = $('#question'+qID+' input[type="text"]');
var otherAnswerItem = $(otherAnswer ).closest('.answer-item');
var otherAnswersList = $(otherAnswer ).closest('ul');
$(otherAnswersList).append(otherAnswerItem);
}
});
</script></syntaxhighlight>

=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 [http://www.partnersinc.biz/surveys//index.php?sid=89344&newtest=Y&lang=en here].

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

[[File:random_700x154.png]]

Implementation is as follows:
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])
#Create one or more List (dropdown) questions with sequential response codes. Set the [[Advanced question settings#random order|random_order question attribute]] to 1.
#In the source of the first question add the following onload function. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]])
#Replace the ID question at the end of the function call.

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Function to allow randomization of all answers
//except the last one in List/dropdown questions
function partRandDD(qID) {

// Find the last answer option
var ansCount = $( 'div#question' + qID + ' select option' ).length - 1;

// Place the last answer option at the end of the list
$( 'div#question' + qID + ' select option[value="' + ansCount + '"]' )
.appendTo($( 'div#question' + qID + ' select' ));
}

// Call the function with the qID (replace the qID eg. partRandDD(244))
partRandDD(qID);
//If you want to apply it to more questions on the same page simply add more calls with the appropriate IDs.
partRandDD(qID);
});
</script></syntaxhighlight>

=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)

[[File:random_700x154.png]]

Implementation is as follows:
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])
#Create one or more Multiple numerical input question with sequential response codes. Set the [[Advanced question settings#random order|random_order question attribute]] to 1.
#In the source of the first question add the following onload function. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]])
#Replace "SSSSS", "GG", "QQ" in the function call at the end with the survey ID, group ID and question ID respectively.
#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); ...)

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Function to allow randomization of all answers except the last one in multiple numeric input questions
function partRand(sID, gID, qID) {

// Find the number of answers
var ansCount = ''
$( 'div#question' + qID + ' div.answers li' ).each(function(i) {
ansCount = (i - 1);
});

// Place the last answer created at the end of the list - but before the first helping sum
$( 'li#javatbd' + sID + 'X' + gID + 'X' + qID + ansCount + '' ).insertBefore($( 'div#question' + qID + ' div.answers li.multiplenumerichelp' ).first());

}

// Call the function with the SID, GID and QID
partRand(SID, GID, QID);

});

</script></syntaxhighlight>

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 (<nowiki><ul></nowiki>) 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=

{{Hint|Text=With Expression manager, you can use [[Expression_Manager_Examples#Using_em_validation_q_in_array|Using em_validation_q in array]] system.}}

''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 [http://www.partnersinc.biz/surveys//index.php?sid=26842&newtest=Y&lang=en 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:
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions (see [[Optional settings#Security|documentation here]]).
#Create the array question.
#In the source of the array question add the following script (see [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]]).
#Modify the warningText (line10)as required.
#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.

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function () {

// Interrupt the submit function
$('form#limesurvey').submit(function () {

// Override the built-in "disable navigation buttons" feature
$('#moveprevbtn, #movenextbtn, #movesubmitbtn').attr('disabled', '');

var empty = 0;
var warningText = 'Please complete the highlighted inputs.';

// Call the mandatory row function with question IDs and row numbers
mandatoryRow(QQ, 1);
mandatoryRow(QQ, 3);

// A function to render rows of an array mandatory
function mandatoryRow(qID, rowNum) {

$('div#question' + qID + ' table.question tbody[id^="javatbd"]:eq(' + Number(rowNum - 1) + ') input[type="text"]').each(function (i) {

if ($(this).val() == '') {
$(this).css('background-color', 'pink');
empty = 1;
}
else {
$(this).css('background-color', '#FFFFFF');
}
});
}

if (empty == 1) {
alert(warningText);
return false;
}
else {
return true;
}
});

});

</script></syntaxhighlight>

=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|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:

<syntaxhighlight lang="javascript">

Please have a look at this picture:

<br />

<script>

$(document).ready(

function(){

// Find a random number (here between 1 and 4)

var randNumber = Math.floor(Math.random()*4 + 1);

// Save the number as answer of this question

$('input#answerSSSSSXGGXQQ').val(randNumber);

// Hide this answer field

document.getElementById("answerSSSSSXGGXQQ").style.display='none';

// Show the picture

picString = '<img src="pic/' + String(randNumber) + '.jpg">';

document.getElementById('pic').innerHTML = picString;

}

);</script>

<p>

</p>

<div id="pic">

</div>

</syntaxhighlight>

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):

<syntaxhighlight lang="javascript">

You saw picture number {INSERTANS:SSSSSXGGXQQ}.

</syntaxhighlight>

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:

<syntaxhighlight lang="javascript">

Here you see the picture again: <br>

<script>

$(document).ready(

function(){

// Get the picture number from previous question

var randNumber = "{INSERTANS:SSSSSXGGXQQ}";

// Show picture

picString = '<img width="100" height="100" src="pic/' + String(randNumber) + '.jpg">';

document.getElementById('pic').innerHTML = picString;

}

);</script>

<div id="pic">

</div>

</syntaxhighlight>

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

''Tested in 1.85+''

<div class="simplebox">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.</div>

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:

<syntaxhighlight lang="javascript">

<script type="text/javascript" charset="utf-8">

function Custom_On_Load(){

document.getElementById('answer1000X10X11').value='{TOKEN:ATTRIBUTE_1}';

document.getElementById('answer1000X10X11').readOnly=1;

}

</script>

</syntaxhighlight>

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:

<syntaxhighlight lang="javascript">

document.getElementById('question85').style.display='none';

document.getElementById('display85').value='';

</syntaxhighlight>

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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use script]].
#Create the array question.
#In the source of the array question add the following script.
#Replace"QQ" with the question ID and "CC" with the column number to be checked.

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// A function to pre-check a column of an array
function checkedDefault(qID, column) {
var checkedCol = column - 1;
$('#question'+qID+' tr.subquestions-list').each(function(i) {
if ($('input.checkbox:checked', this).length == 0) {
$('input.checkbox:eq('+checkedCol+')', this).prop('checked', true);
$('input.checkbox:eq('+checkedCol+')', this).parent().find('input[type="hidden"]').val(1);
}
});
}
// Call the function with a question ID and column number
checkedDefault(QQ, CC);
});

</script></syntaxhighlight>

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

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

'''Overview'''<br />
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:'''
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use script]].
#Create the array question.
#In the source of the array question add the following script.
#Adjust "''defaultAnsweredScale''" and "''defaultAnsweredColumn''" as necessary.

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Scale to set the default answer on
var defaultAnsweredScale = 2;
// Column of that scale to set as default answer
var defaultAnsweredColumn = 3;

// Identify this question
var thisQuestion = $('#question{self.qid}');

// Identify the scales and columns
$('.answer-item[class^="answer_cell_1"]', thisQuestion).addClass('scale-1-item');
$('.answer-item[class^="answer_cell_2"]', thisQuestion).addClass('scale-2-item');
$('tr.answers-list', thisQuestion).each(function(i) {
$('.scale-1-item', this).each(function(i) {
$(this).addClass('scale-1-column-'+(i+1)+'-item');
});
$('.scale-2-item', this).each(function(i) {
$(this).addClass('scale-2-column-'+(i+1)+'-item');
});
});

// Click the default answers
$('tr.answers-list', thisQuestion).each(function(i) {
if($('.scale-'+defaultAnsweredScale+'-item input[type="radio"]:checked', this).length == 0) {
$('.scale-'+defaultAnsweredScale+'-column-'+defaultAnsweredColumn+'-item input[type="radio"]:last', this).click();
}
});
});
</script></syntaxhighlight>

'''Download sample survey:'''<br />
[[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''

<div class="simplebox">As of version 1.92, group view time is accurately recorded in the timings table if you choose the Record Timings survey option.</div>

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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#In the group, create a short-text question. We will hide this later with JavaScript and populate it with the elapsed time.
#Place the following script in the source of the short-text question.
#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.

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

// call the functions with the hidden timer question ID

runTimer(QQ);

function runTimer(timeQID) {

$('#question'+timeQID).hide();

var initSec = '0';

// Check for elapsed time from previous visits

if ($('#question'+timeQID+' input.text').val()) {

var initTime = $('#question'+timeQID+' input.text').val();

initTimeArr = initTime.split(':');

initSec = Number[[initTimeArr[0]*3600]]+Number[[initTimeArr[1]*60]]+Number(initTimeArr[2]);

}

// Run the timer update function

recordTime(initSec, timeQID);

}

});

// Timer update function

function recordTime(elapsedSec, timeQID){

elapsedSec++;

var h = Math.floor(elapsedSec / 3600);

var m = Math.floor(elapsedSec % 3600 / 60);

var s = Math.floor(elapsedSec % 3600 % 60);

var elapsedTime = [[h > 0 ? h + ":" : "00:") + (m > 0 ? (m < 10 ? "0" : "") + m + ":" : "00:") + (s < 10 ? "0" : "") + s);

$('#question'+timeQID+' input.text').val(elapsedTime);

// Run the timer update function every second

setTimeout('recordTime('+elapsedSec+', '+timeQID+')',1000);

}

</script>

</syntaxhighlight>

=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 [http://www.partnersinc.biz/surveys//index.php?sid=33613&newtest=Y&lang=en demonstrated here].

Implementation is as follows:

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Set the survey to run in "all in one" mode.
#Add your groups and questions.
#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:

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

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

// Insert show/hide divs before all group wrapper divs
$('<div class="groupToggler"><span></span></div>').insertBefore('div[id^="group-"]');

// Add some text to the show/hide divs
$('.groupToggler span').each(function(i) {
($( this ).text('Show/Hide Group '+(i+1)+''));
});

// Add some styles to the show/hide divs
$('.groupToggler').css({
'padding':'5px 0 10px 0',
'text-align':'center'
});
$('.groupToggler span').css({
'text-decoration':'underline',
'cursor':'pointer'
});

// Add some hover effects to the show/hide divs
$(".groupToggler span").hover(
function () {
$(this).css({
'text-decoration':'none',
'font-weight':'bold'
});
},
function () {
$(this).css({
'text-decoration':'underline',
'font-weight':'normal'
});
}
);

// Initially hide all of the groups
// Toggle their visibility when the show/hide is clicked
$('.groupToggler span').click(function() {
$(this).parent().next().toggle();
return false;
}).parent().next().hide();

// Display any groups that have unanswered mandatories
$('.errormandatory').parents('div[id^="group-"]').show();

// Some tidying up
$('h1').next().next().hide();
$('.surveywelcome').css({
'margin-bottom':'10px'
});
$('.surveywelcome').next().hide();
$('.surveywelcome').next().next().hide();

});

</script></syntaxhighlight>

=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 [http://jqueryui.com/demos/autocomplete/ 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

<syntaxhighlight lang="css">/* Autocomplete styles */

ul.ui-autocomplete {
width: 250px !important;
padding: 5px 10px;
list-style: none;
}</syntaxhighlight>

'''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)

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var q1ID = 'QQ';

var states = "Alabama,Alaska,Arizona,Arkansas,California,Colorado,Connecticut,Delaware, District of Columbia,Florida,Georgia,Hawaii,Idaho,Illinois,Indiana,Iowa,Kansas,Kentucky, Louisiana,Maine,Montana,Nebraska,Nevada,New Hampshire,New Jersey,New Mexico,New York, North Carolina,North Dakota,Ohio,Oklahoma,Oregon,Maryland,Massachusetts,Michigan, Minnesota,Mississippi,Missouri,Pennsylvania,Rhode Island,South Carolina,South Dakota, Tennessee,Texas,Utah,Vermont,Virginia,Washington,West Virginia,Wisconsin,Wyoming".split(',');

$('#question'+q1ID+' input.text').autocomplete({
source: states
});

});

</script></syntaxhighlight>

'''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:

<syntaxhighlight lang="php"><?php

$countriesArr = array();

$file_handle = fopen("countries2.csv", "r");

while (!feof($file_handle) ) {
$line_of_text = fgetcsv($file_handle);
array_push($countriesArr, $line_of_text[0]);
}

fclose($file_handle);

echo json_encode($countriesArr);

?></syntaxhighlight>

JavaScript code:

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;
var url = "templates/yourTemplate/countries.php";
var dataArr = [];

$.getJSON(url,function(data){

$.each(data,function(i, item){
dataArr.push(item);
});

$('#question'+qID+' input.text').autocomplete({
source: dataArr
});

});

});

</script></syntaxhighlight>

<br />
== 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:'''
<ol><li>Download the jQuery Autocomplete widget</li>
<li>Add special autocomplete styling to the survey template (tested with the Skeletonquest template by Denis Chenu)</li>
</ol>

This workaround builds on the previous examples, but is updated for use with newer versions of LimeSurvey. Note that the [http://jqueryui.com/demos/autocomplete/ Autocomplete widget] is already included in LimeSurvey, as part of jQuery UI.

<br />
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.

<br />
'''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 [http://jqueryui.com/demos/autocomplete/ jQuery website] for example):

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 1;

$('#question'+qID+' input[type="text"]').autocomplete({
minLength: 2, // This line is optional, signifies number of keystrokes before autocomplete is initiated
source: ["Test1","Test2","Test3"]
});

});

</script>
</syntaxhighlight>

<br />
'''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:
<ol><li>A comma-separated data file (CSV)</li>
<li>The [https://code.google.com/p/jquery-csv/ jquery.csv.js plugin] (v0.71)</li>
</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 <strong>before</strong> {TEMPLATEJS}.

<syntaxhighlight lang="html5">
<script type="text/javascript" src="{TEMPLATEURL}jquery.csv.js"></script>
</syntaxhighlight>

<br />
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 <strong>semicolon</strong>, 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:

<syntaxhighlight lang="javascript">
41 $.csv = {
42 defaults: {
43 separator:',', // Change this to: separator:';',
44 delimiter:'"',
45 headers:true
46 },
</syntaxhighlight>

<br />
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:

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 1;

var surveyRoot = location.pathname.split('index.php')[0];
var url = surveyRoot+'datafile.csv';

// Create an array to hold the data
var testArr = new Array();

// Grab the CSV contents
$.get(url,function(data){

// Convert CSV contents to an array of arrays
fullArray = $.csv.toArrays(data);

// Load the data array
$(fullArray).each(function(i, item){
testArr.push(item[0]);
});

// Initialise the autocomplete plugin
$('#question'+qID+' input.text').autocomplete({
source: testArr
});

// console.log(data); This would be a gould place to put your debugging script. Remember to comment out or remove before going into production, to economize on server workload
});
});

</script>
</syntaxhighlight>

<br />
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 <strong>console.log(data);</strong> 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.

<br />
'''3. Input from a MySQL database (trickiest, but also the most versatile and secure).'''
<br />This method requires the following:
<ol><li>Access to a MySQL database (tested with MySQL 5.5)</li>
<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):
<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 1;

$('#question'+qID+' input[type="text"]').autocomplete({
minLength: 2, // This line is optional, signifies number of keystrokes before autocomplete is initiated
source: 'autocomplete.php'
});

});

</script>
</syntaxhighlight>

<br />
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:

<syntaxhighlight lang="php">
<?php
// Login credentials
define('DB_SERVER', "localhost");
define('DB_USER', "username");
define('DB_PASSWORD', "password");
define('DB_DATABASE', "database_name");
define('DB_DRIVER', "mysql");
?>
</syntaxhighlight>

<br />
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):

<syntaxhighlight lang="php">
<?php

// Connect and query MySQL database, using PDO
try {
$db = new PDO(DB_DRIVER . ":dbname=" . DB_DATABASE . ";host=" . DB_SERVER . ";charset=utf8", DB_USER, DB_PASSWORD);
}

catch(PDOException $e) {
echo $e->getMessage();
}

$return_arr = array();

if ($db)
{
$ac_term = "%".$_GET['term']."%";
$query = "SELECT * FROM table_name WHERE column_name LIKE :term";
$result = $db->prepare($query);
$result->bindValue(":term",$ac_term);
$result->execute();

// Fetch data and store in array
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
$row_array['label'] = $row['column_name'];
$row_array['value'] = $row['column_name'];

array_push($return_arr,$row_array);
}
}
</syntaxhighlight>

<br />
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:

<syntaxhighlight lang="php">
<?php

// Include files outside of webroot
set_include_path('/var/www/surveys/test-survey');

// Fetch database credentials
require_once ('constant.php');

// Connect to database and perform query
require_once ('database.php');

// Clear query
$db = null;

// Encode results in JSON. This is required for jquery autocomplete
echo json_encode($return_arr);

?>
</syntaxhighlight>

<br />
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.
<br />

== Use autocomplete to populate several fields==

''Tested with: 1.91+, IE 7/8/9, Firefox 18''

This workaround uses the [http://jqueryui.com/demos/autocomplete/ Autocomplete widget] included with jQuery UI and the [https://code.google.com/p/jquery-csv/downloads/list 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 [https://code.google.com/p/jquery-csv/downloads/list 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<syntaxhighlight lang="php"><script type="text/javascript" src="{TEMPLATEURL}jquery.csv.js"></script></syntaxhighlight>
*Create your CSV file with 3 columns (name, ID, email) as in this example and place it in your template folder<syntaxhighlight lang="php">Bob, Bob's ID, Bob's email

Andy, Andy's ID, Andy's email

Sam, Sam's ID, Sam's email

Tony, Tony's ID, Tony's email

Fred, Fred's ID, Fred's email</syntaxhighlight>
*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<syntaxhighlight lang="php">/* Autocomplete styles */

ul.ui-autocomplete {

width: 250px !important;

padding: 5px 10px;

list-style: none;

}</syntaxhighlight>
*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<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qNameID = NN;

var qIDID = II;

var qEmailID = EE;

var url = "upload/templates/yourTemplate/yourCsvFile.csv";

// Create an array to hold the names
var namesArr = new Array();

// Grab the CSV contents
$.get(url,function(data){

// Convert CSV contents to an array of arrays
fullArray = $.csv.toArrays(data);

// Load the names array
$(fullArray).each(function(i, item){
namesArr.push(item[0]);
});

// Initialise the autocomplete plugin
$('#question'+qNameID+' input.text').autocomplete({
source: namesArr,
// Event fired when a selection is made (ui.item.value refers to the selected item)
select: function(event, ui) {
// Find the "ID" and "Email" values associated with the selected name value and load those questions
$(fullArray).each(function(i, item){
if(item[0] == ui.item.value) {
// The value from column 2 of the CSV
$('#question'+qIDID+' input.text').val(item[1]);
// The value from column 3 of the CSV
$('#question'+qEmailID+' input.text').val(item[2]);
}
});
}
});
});
});

</script></syntaxhighlight>

=Create MaxDiff question type=

See the [[Workarounds: Question design, layout and templating|Question design, layout and templating]] section for a workaround that uses JavaScript to convert an '''''Array (flexible labels) by column''''' question into a [http://en.wikipedia.org/wiki/MaxDiff MaxDiff] question type.

[[File:max_diff_596x253.gif]]

=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.

<syntaxhighlight lang="php">

<script>

numColumns=13;

numRows=18;

questionId='28417X2X24';

specialColumns=[1,12,13];

function action(obj){

locator=obj.id.replace('cbox_'+questionId, '').split('_');

row=locator[0];

column=locator[1];

//alert('Action for row,column='+row+','+column);

my_id='#cbox_'+questionId+row+'_'+column+''

if($(my_id).attr('checked') == false) {

for( var i=1; i<=numColumns; i++ ) {

if(i==column) continue;

id='#cbox_'+questionId+row+'_'+i

$(id).attr('disabled',false);

}

} else {

for( var i=1; i<=numColumns; i++ ) {

if(i==column) continue;

id='#cbox_'+questionId+row+'_'+i

aid='#answer'+questionId+row+'_'+i

$(aid).val(0);

$(id).attr('checked',false);

$(id).attr('disabled',true);

}

}

}

function customOnLoad(){

for( var row=1; row<=numRows; row++ ) {

for( var k=0; k<specialColumns.length; k++ )

{

column=specialColumns[k];

$('#cbox_'+questionId+row+'_'+column).change(function() {

action(this);

});

}

}

}

jQuery(document).ready(

function(){

customOnLoad();

}

);

</script>

</syntaxhighlight>

=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:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following script in the source of the array question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Call the exclude function using question ID
excludeOpt({QID});
});

// A function to make the last option in each array row exclusive
function excludeOpt (qID) {

var thisQuestion = $('#question'+qID)

// Add some classes to the checkbox cells
$('td.checkbox-item', thisQuestion).addClass('normalOpt');
$('tr.subquestions-list', thisQuestion).each(function(i) {
$('.normalOpt:last', this).removeClass('normalOpt').addClass('exlusiveOpt')
});

// A listener on the checkbox cells
$('td.checkbox-item', thisQuestion).click(function (event) {
handleExclusive($(this));
});

// A listener on the checkboxes
$('td.checkbox-item input[type="checkbox"]', thisQuestion).click(function (event) {
handleExclusive($(this).closest('td'));
});

function handleExclusive(thisCell) {

var thisRow = $(thisCell).closest('tr');

// Uncheck the appropriate boxes in a row
if ($(thisCell).hasClass('normalOpt')) {
$('.exlusiveOpt input[type="checkbox"]', thisRow).attr('checked', false);
}
else {
$('.normalOpt input[type="checkbox"]', thisRow).attr('checked', false);
}

// Check conditions (relevance)
$('td.checkbox-item', thisRow).each(function(i) {
var thisValue = '';
if($('input[type="checkbox"]', this).is(':checked')) {
thisValue = 1;
}
var thisSGQA = $('input[type="checkbox"]', this).attr('id').replace(/cbox_/, '');

$('input[type="hidden"]', this).attr('value', thisValue);
fixnum_checkconditions(thisValue, thisSGQA, 'hidden');
});
}
}
</script></syntaxhighlight>

==Implementation LS Version 3.x:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following script in the source of the array question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){

var thisQuestion = $('#question{QID}')

// Add some classes to the checkbox cells
$('td.checkbox-item:last-child', thisQuestion).addClass('exclusive-item');

// A function to un-check boxes
function resetCheckbox(thisItem) {
$(':hidden', thisItem).val('');
$(':checkbox', thisItem).prop('checked', false).trigger('change');
}

// A listener on the checkboxes
$(':checkbox', thisQuestion).on('change', function(e) {
if($(this).is(':checked')) {
var thisItem = $(this).closest('.answer-item');
var thisRow = $(this).closest('tr');
var items = $('td.answer-item.exclusive-item', thisRow);
if($(thisItem).hasClass('exclusive-item')) {
items = $('td.answer-item:not(.exclusive-item)', thisRow);
}
$.each(items, function(i, el) {
resetCheckbox(el);
});
}
});
});
</script></syntaxhighlight>

=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.

<syntaxhighlight lang="javascript">
$(document).ready(function() {

// Insert a new div after the progress bar
$('<div id="navigator2" />').insertAfter('#progress-wrapper');

// Style the new div
$('#navigator2').css({
'text-align':'center'
});

// Insert clones of the nav buttons in the new div
$('input.submit:eq(0)').clone().appendTo('#navigator2');
$('input.submit:eq(2)').clone().appendTo('#navigator2');

// Give the new buttons some new IDs
$('#navigator2 input.submit').each(function(i) {
var oldID = $(this).attr('id');
var newID = oldID + '2';
$(this).attr('id', newID)
});
});</syntaxhighlight>

[[File:extra_buttons.png]]

=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.

[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|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.

<syntaxhighlight lang="php"> <script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Find the survey ID
if($('input#fieldnames').length != 0) {
var fieldNames = $('input#fieldnames').attr('value');
var tmp = fieldNames.split('X');
var sID = tmp[0];
}

// Insert a new div after the progress bar
$('<div id="optOutLink" />').insertBefore('#progress-wrapper');

// Style the new div
$('#optOutLink').css({
'text-align':'center'
});

// Insert opt out url in the new div
$('#optOutLink').html('<p><a href="optout.php?lang=en&sid;='+sID+'&token;={TOKEN}">Click here to opt out of this survey.</a></p><br>');

});

</script></syntaxhighlight>

=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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following code in the source of a short text question.
#Optional: you can also add other select field to avoid collisions (e.g. for large population sample)

<syntaxhighlight lang="php">

<p>This answers are used to generate your ID. These information will be encrypted, it will not be possible in any case to identify you neither from your answers nor from your ID.</p>

<table>

<tr>

<td>Initial of your name</td>

<td>

<select id="field1">

<option value=""></option>

<option value="A">A</option>

<option value="B">B</option>

<option value="C">C</option>

<option value="D">D</option>

<option value="E">E</option>

<option value="F">F</option>

<option value="G">G</option>

<option value="H">H</option>

<option value="I">I</option>

<option value="J">J</option>

<option value="K">K</option>

<option value="L">L</option>

<option value="M">M</option>

<option value="N">N</option>

<option value="O">O</option>

<option value="P">P</option>

<option value="Q">Q</option>

<option value="R">R</option>

<option value="S">S</option>

<option value="T">T</option>

<option value="U">U</option>

<option value="V">V</option>

<option value="W">W</option>

<option value="X">X</option>

<option value="Y">Y</option>

<option value="Z">Z</option>

</select>

</td>

</tr>

<tr>

<td>Your birth month</td>

<td>

<select id="field2">

<option value=""></option>

<option value="01">January</option>

<option value="02">February</option>

<option value="03">March</option>

<option value="04">April</option>

<option value="05">May</option>

<option value="06">June</option>

<option value="07">July</option>

<option value="08">August</option>

<option value="09">September</option>

<option value="10">October</option>

<option value="11">November</option>

<option value="12">December</option>

</select>

<td>

</tr>

</table>

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

<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);

}

});

</script>

</syntaxhighlight>

=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.

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Call the phone function with the question ID and the row number

phoneTest(QQ, NN);

function phoneTest(qID, inputNum) {

// Interrupt next/submit function

$('#movenextbtn, #movesubmitbtn').click(function(){

// Some vars - modify as required

var phoneMatch = /^[0-9,+,(), ,]{1,}(,[0-9]+){0,}$/;

var msg1 = 'Please enter a valid phone number.';

// Test the input

var phoneInput = $('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val();

if(phoneInput != '' && !phoneMatch.test(phoneInput)) {

alert(msg1);

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'pink' });

return false;

}

else {

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'' });

return true;

}

});

}

});

</script>

</syntaxhighlight>

The regex is from: [http://www.regexlib.com/REDetails.aspx?regexp_id=1136 regexlib.com blank]

=Check validity of email address in subquestion=

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

<div class="simplebox">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.<br />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</div>

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.

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Call the email function with the question ID and the row number

emailTest(QQ, NN);

function emailTest(qID, inputNum) {

// Interrupt next/submit function

$('#movenextbtn, #movesubmitbtn').click(function(){

// Some vars - modify as required

var emailMatch = /^[a-zA-Z0-9\_\-]+[a-zA-Z0-9\.\_\-]*@([a-zA-Z0-9\_\-]+\.)+([a-zA-Z]{2,4}|travel|museum)$/;

var msg1 = 'Please enter a valid email address.';

// Test the input

var emailInput = $('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val();

if(emailInput != '' && !emailMatch.test(emailInput)) {

alert(msg1);

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'pink' });

return false;

}

else {

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'' });

return true;

}

});

}

});

</script>

</syntaxhighlight>

The regex is from: [http://www.regexlib.com/REDetails.aspx?regexp_id=1653 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:

<syntaxhighlight lang="php">

<script type="text/javascript">

var questionhelp="{QUESTIONHELP}";

if (questionhelp=="") {

document.write("");}

else {

document.write('<tr><td class="survey-question-help">'+ questionhelp +'</td></tr>');}

</script>

</syntaxhighlight>

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)

[[File:snap035.gif]]

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.

[[File:snap037.gif]]

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!

<syntaxhighlight lang="javascript">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('input[name="69965X2X10SQ001_SQ001"]').attr('disabled', 'disabled');

$('input[name="69965X2X10SQ001_SQ002"]').attr('hidden', 'hidden');

});

</script>

</syntaxhighlight>

[[File:snap039.gif]]

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.

[[File:suffix.png]]

Fig. 1: Suffix

[[File:prefix.png]]

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 €" suffix in the first column and an "in %" in the next 3 columns.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Call the function with the question ID followed by a comma-separated list of suffixes

addSuffix(12345, 'in €', 'in %', 'in %', 'in %');

function addSuffix() {

var qID = $(arguments)[0];

// Assign some column-specific classes

$('#question'+qID+' table.question tbody tr').each(function(i){

$('td', this).each(function(i){

$(this).addClass('answerCol-'+(i+1)+'');

});

});

// Some styling

$('#question'+qID+' table.question tbody input[type="text"]').css({

'width': '50%'

});

// Insert the suffixes

$(arguments).each(function(i, val){

if(i > 0) {

$('#question'+qID+' td.answerCol-'+i+' label').append(val);

}

});

}

});

</script></syntaxhighlight>

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

<syntaxhighlight lang="php">$('#question'+qID+' td.answerCol-'+i+' label').append(val);</syntaxhighlight>

with this

<syntaxhighlight lang="php">$('#question'+qID+' td.answerCol-'+i+' label').prepend(val);</syntaxhighlight>

=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:
#Download the file at [http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js] and upload it to your survey.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following code in the source of a short text question.

<syntaxhighlight lang="javascript">
<script src="/upload/surveys/{SID}/jquery-ui-timepicker-addon.js"></script>

<script>

$(document).ready(function(){

$('#answer{SGQ}').timepicker({
timeText: 'Time', //here translation
hourText: 'hour', //here translation
minuteText: 'minute', //here translation
closeText: 'Done' //here translation
});

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

$( "<style>"
+".ui-widget-header, .ui-datepicker-current { display:none; }"
+".ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }"
+".ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }"
+" }"
+"</style>").appendTo( "head" );

});

</script></syntaxhighlight>

=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 [http://ditio.net/2010/05/02/javascript-date-difference-calculation/ 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.

<syntaxhighlight lang="php">

<script type="text/javascript">

/*

Adapted from http://ditio.net/2010/05/02/javascript-date-difference-calculation/
*/

var DateDiff = {

inDays: function(d1, d2) {

var t2 = d2.getTime();

var t1 = d1.getTime();

return parseInt[[t2-t1)/(24*3600*1000]];

},

inWeeks: function(d1, d2) {

var t2 = d2.getTime();

var t1 = d1.getTime();

return parseInt[[t2-t1)/(24*3600*1000*7]];

},

inMonths: function(d1, d2) {

var d1Y = d1.getFullYear();

var d2Y = d2.getFullYear();

var d1M = d1.getMonth();

var d2M = d2.getMonth();

return (d2M+12*d2Y)-(d1M+12*d1Y);

},

inYears: function(d1, d2) {

return d2.getFullYear()-d1.getFullYear();

}

}

d1 = new Date({substr(DD,0,4)}, {substr(DD,5,2)}, {substr(DD,8,2)});

d2 = new Date({substr(D2,0,4)}, {substr(D2,5,2)}, {substr(D2,8,2)});

// Displays result

document.write("<br />Number of <b>days</b>: "+DateDiff.inDays(d1, d2));

document.write("<br />Number of <b>weeks</b>: "+DateDiff.inWeeks(d1, d2));

document.write("<br />Number of <b>months</b>: "+DateDiff.inMonths(d1, d2));

document.write("<br />Number of <b>years</b>: "+DateDiff.inYears(d1, d2));

// filled the numerical input with number of days (or nights)

var nDays = +DateDiff.inDays(d1, d2);

jQuery(document).ready(function() {

$(".numeric:eq(0) input.text").val(nDays);

$(".numeric:eq(0) input.text").attr('readonly','readonly');

// check if d2 > d1

$('#movenextbtn').hide();

$('#movesubmitbtn').hide();

if(nDays >= 0){

// automatic submit (uncomment if needed)

// document.limesurvey.submit();

// $('body').hide();

}

else alert("Check out date must be posterior than Check in\nPlease return to the previous page and edit your answers");

});

</script>

</syntaxhighlight>

=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.

<syntaxhighlight lang="php">
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
'use strict';
var qID1 = QQ1,
qID2 = QQ2,
q1 = $('#question' + 'QQ1' + ' .popupdate'),
q2 = $('#question' + 'QQ2' + ' .popupdate');

//if q1 loses focus, its value is taken and used as minDate in q2
q1.datepicker("option", "onClose", function (datum){
q2.datepicker( "option", "minDate", datum );
});
//q2 gets today as its maxDate
q2.datepicker( 'option', 'maxDate', new Date() );
});
</script>
</syntaxhighlight>

=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}.

<syntaxhighlight lang="javascript">
<tr><td class="survey-question-help" id=help_{QUESTION_NUMBER}>{QUESTIONHELP}</td></tr>
</syntaxhighlight>

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.

<syntaxhighlight lang="javascript">
<script>
$(document).ready(function(){
if($('#help_{QUESTION_NUMBER}').is(':empty')){
$('#help_{QUESTION_NUMBER}').hide();
}
});
</script>
</syntaxhighlight>

= 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.<br /><br />

[[File:Iat_1.png]]<br /><br />

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

Implementation is as follows:

1) [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].

2) Create your Array (Texts) with subquestions as follows:<br />
- Y scale - all of your "attribut" words or phrases<br />
- X scale - "Key Pressed" and "Elapsed Time (ms)"<br />
[[File:Iat_2.jpg]]

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:<br />
- Left association term<br />
- Right association term<br />
- Instructional text<br />
- Finished text<br />
[[File:Iat_3.png]]

4) Add the following to the end of template.js:<syntaxhighlight lang="javascript">
// A plugin to insert an IAT interface
function implicitAssociation(el, showAnswers) {

$(el).each(function() {

var thisQuestion = $(this);
var thisQuestionHelp = $('img[src$="help.gif"]', thisQuestion).parent();
var thisQuestionAnswers = $('table.question', thisQuestion).parent();
var startTime = '';
var endTime = '';
var agent = navigator.userAgent.toLowerCase();
var mobile = false;
if( /android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent) ) { // Mobile devices
mobile = true;
}

// Some classes
$(thisQuestion).addClass('iatQuestion');
$('.subquestion-list').addClass('unanswered');

// Hide the question help element
$(thisQuestionHelp).hide();

// Hide the answers
if(showAnswers != true) {
$('table.question', thisQuestion).hide();
}

// Insert IAT display
var iatTexts = $(thisQuestionHelp).text().split('||');
var iatDisplayHTML = '<div class="iatWrapper">\
<div class="iatLeftLabel">'+iatTexts[0]+'</div>\
<div class="iatRightLabel">'+iatTexts[1]+'</div>\
<div class="iatWord"></div>\
<div class="iatInstructions">'+iatTexts[2]+'</div>\
</div>\
<div class="iatMobileButtonWrapper">\
<div class="iatButton iatLeftButton">E</div>\
<div class="iatButton iatRightButton">I</div>\
<div style="width:100%; clear:both;"></div>\
</div>';
$(thisQuestionAnswers).prepend(iatDisplayHTML);

// Show a word
function iatShowWord() {
$('div.iatWord', thisQuestion).text($('.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$(document).bind('keypress.iatKeypress', function(e) {
if(e.which == 101 || e.which == 105) {
var thisRow = $('.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
if(e.which == 101) {
$('input[type="text"]:eq(0)', thisRow).val('E');
}
else {
$('input[type="text"]:eq(0)', thisRow).val('I');
}
$(document).unbind('keypress.iatKeypress');
if($('.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWord();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
}
});
}
function iatShowWordMobile() {
$('div.iatWord', thisQuestion).text($('.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$('.iatButton', thisQuestion).bind('click.iatButtonClick', function(e) {
var thisRow = $('.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
$('input[type="text"]:eq(0)', thisRow).val($(this).text());
$('.iatButton', thisQuestion).unbind('click.iatButtonClick');
if($('.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWordMobile();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions, .iatMobileButtonWrapper', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
});
}

// Start the IAT display
if(mobile == true) { // Mobile devices
$('.iatMobileButtonWrapper', thisQuestion).show();
$('.iatButton', thisQuestion).bind('click.iatStartMobile', function(e) {
$('.iatButton', thisQuestion).unbind('click.iatStartMobile');
iatShowWordMobile();
});
}
else {
$(document).bind('keypress.iatStart', function(e) { // Non-mobile devices
if(e.which == 101 || e.which == 105) {
$(document).unbind('keypress.iatStart');
iatShowWord();
}
});
}
});
} </syntaxhighlight>

<br />5) Add the following to the end of template.css:<syntaxhighlight lang="css">
/* IAT questions */

.iatWrapper {
position: relative;
width: 600px;
height: 300px;
color: #FFFFFF;
background-color: #000000;
font-size: 21px;
}

.iatLeftLabel {
float: left;
padding: 10px;
}

.iatRightLabel {
float: right;
padding: 10px;
}

.iatWord {
position: absolute;
width: 100%;
top: 35%;
text-align: center;
font-size: 36px;
color:#0F0;
}

.iatWord.done {
color:#FFFFFF;
}

.iatInstructions {
position: absolute;
width: 100%;
bottom: 0px;
padding-bottom: 10px;
text-align: center;
}

.iatMobileButtonWrapper {
display: none;
position: relative;
width: 600px;
font-size: 36px;
}

.iatButton {
float: left;
margin: 20px;
width: 100px;
padding: 2px 0 5px 0;
border: 5px solid #999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
text-align: center;
line-height: normal;
cursor: pointer;
}

.iatLeftButton {
float: left;
}

.iatRightButton {
float: right;
}</syntaxhighlight>

<br />6) To apply the plugin, add one of the two scripts below to the question source:<br />
- With hidden answer table (for normally activated survey)
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}');
});
</script></syntaxhighlight>
- With visible answer table (for testing purposes)
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}', true);
});
</script></syntaxhighlight>

== 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.<br /><br />

[[File:Demo_iat_v250.png]]<br /><br />

'''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''':
<ol>
<li>[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].</li>
<li>Create your Array (Texts) with subquestions as follows:
<ul>
<li>Y scale - all of your "attribute" words or phrases</li>
<li>X scale - "Key Pressed" and "Elapsed Time (ms)"<br />[[File:Demo_iat_v250_2.png]]</li>
</ul>
</li>
<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>
<li>Left association term</li>
<li>Right association term</li>
<li>Instructional text</li>
<li>Finished text<br />[[File:Demo_iat_v250_3.png]]</li>
</ul>
</li>
<li>Add the following to the end of template.js:<syntaxhighlight lang="javascript">// A plugin to insert an IAT interface
function implicitAssociation(el, showAnswers) {

$(el).each(function() {

var thisQuestion = $(this);
var thisQuestionHelp = $('div.question-help', thisQuestion);
var thisQuestionAnswers = $('table.subquestion-list', thisQuestion).parent();
var startTime = '';
var endTime = '';
var agent = navigator.userAgent.toLowerCase();
var mobile = false;
if( /android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent) ) { // Mobile devices
mobile = true;
}

// Some classes
$(thisQuestion).addClass('iat-question');
$('tr.subquestion-list', thisQuestion).addClass('unanswered');

// Hide the question help element
$(thisQuestionHelp).hide();
$(thisQuestionHelp).closest('.question-help-container').hide();

// Hide the answers
if(showAnswers != true) {
$('table.subquestion-list', thisQuestion).hide();
}

// Insert IAT display
var iatTexts = $(thisQuestionHelp).text().split('||');
var iatDisplayHTML = '<div class="iatWrapper">\
<div class="iatLeftLabel">'+iatTexts[0]+'</div>\
<div class="iatRightLabel">'+iatTexts[1]+'</div>\
<div class="iatWord"></div>\
<div class="iatInstructions">'+iatTexts[2]+'</div>\
</div>\
<div class="iatMobileButtonWrapper">\
<div class="iatButton iatLeftButton">E</div>\
<div class="iatButton iatRightButton">I</div>\
<div style="width:100%; clear:both;"></div>\
</div>';
$(thisQuestionAnswers).prepend(iatDisplayHTML);

// Show a word
function iatShowWord() {
$('div.iatWord', thisQuestion).text($('tr.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$(document).bind('keypress.iatKeypress', function(e) {
if(e.which == 101 || e.which == 105) {
var thisRow = $('tr.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
if(e.which == 101) {
$('input[type="text"]:eq(0)', thisRow).val('E');
}
else {
$('input[type="text"]:eq(0)', thisRow).val('I');
}
$(document).unbind('keypress.iatKeypress');
if($('tr.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWord();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
}
});
}
function iatShowWordMobile() {
$('div.iatWord', thisQuestion).text($('tr.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$('.iatButton', thisQuestion).bind('click.iatButtonClick', function(e) {
var thisRow = $('tr.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
$('input[type="text"]:eq(0)', thisRow).val($(this).text());
$('.iatButton', thisQuestion).unbind('click.iatButtonClick');
if($('tr.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWordMobile();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions, .iatMobileButtonWrapper', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
});
}

// Start the IAT display
if(mobile == true) { // Mobile devices
$('.iatMobileButtonWrapper', thisQuestion).show();
$('.iatButton', thisQuestion).bind('click.iatStartMobile', function(e) {
$('.iatButton', thisQuestion).unbind('click.iatStartMobile');
iatShowWordMobile();
});
}
else {
$(document).bind('keypress.iatStart', function(e) { // Non-mobile devices
if(e.which == 101 || e.which == 105) {
$(document).unbind('keypress.iatStart');
iatShowWord();
}
});
}
});
}</syntaxhighlight>
</li>
<li>Add the following to the end of template.css:<syntaxhighlight lang="css">/* IAT questions */

.iatWrapper {
position: relative;
width: 100%;
max-width: 600px;
height: 300px;
margin: 0 auto;
color: #D0DBE5;
background-color: #2C3E50;
font-size: 21px;
}

.iatLeftLabel {
float: left;
padding: 10px;
}

.iatRightLabel {
float: right;
padding: 10px;
}

.iatWord {
position: absolute;
width: 100%;
top: 35%;
text-align: center;
font-size: 36px;
color: #C4D1DE;
}

.iatWord.done {
color: #C4D1DE;
}

.iatInstructions {
position: absolute;
width: 100%;
bottom: 0px;
padding-bottom: 10px;
text-align: center;
}

.iatMobileButtonWrapper {
display: none;
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
font-size: 36px;
}

.iatButton {
float: left;
margin: 20px;
width: 100px;
padding: 2px 0 5px 0;
border: 5px solid #233140;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
text-align: center;
line-height: normal;
cursor: pointer;
}

.iatLeftButton {
float: left;
}

.iatRightButton {
float: right;
}</syntaxhighlight>
</li>
<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)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}');
});
</script></syntaxhighlight>
</li>
<li>With visible answer table (for testing purposes)
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}', true);
});
</script></syntaxhighlight>
</li>
</ul>
</li>
</ol>

== Version 3.x ==

Here is a custom question theme for an Implicit Association Test (IAT) in version 3.x - https://github.com/tpartner/LimeSurvey-Implicit-Association-Test

=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

<syntaxhighlight lang="javascript">
<script type="text/javascript">

/**
* Small script that adds a "X" before a checkbox.
* On click the text color of the label of the checkbox turns grey
* If the user has to choose some answers from many options, he can "delete" answers, that on first sight looks wrong
* Add the script to the question in Limesurvey (for example within the source code of the help text)
*/

//Define the X (standard is a X in capitals)
var x = "X";
css_class = "x";

/*
* Define the style of the X
* Of course you can define the style in the stylesheet - if so, the script ignores the following settings
* If there is a style, than set style var to 1
*/
var style = 0;
var size = "12px";
var weight = "bold";
var color = "red";
var cursor = "pointer";

//element type - standard is a span element
var type = "span";

//Define the new font color of the checkbox label
label_color = "#bfbfbf";

//End of configuration - start of the function

//Define the element that is added
if(style == 1) {
ele = "<"+type+" class='"+css_class+"'>"+x+"</"+type+">";
}
else {
ele = "<"+type+" class='"+css_class+"' style='font-size:"+size+"; font-weight:"+weight+"; color:"+color+"; cursor:"+cursor+";'>"+x+"</"+type+">";
}

//Get the standard font-color of the used style
st_color = $("label").css("color");

//insert the X before the checkboxes
$(document).ready(function() {
$("li").each(function(){
$(this).prepend(ele);
});
});

//bind an eventhandler on the X (delegate is used, because Limesurvey uses an old jQuery version)
var css_class_c = "."+css_class;
$(document).delegate(css_class_c,"click",function() {
var color_check = $(this).siblings("label").data("color");
if(color_check != "true") {
$(this).siblings("label").css("color",label_color).data("color","true");
$(this).siblings('input').attr('checked', false);

}
else {
$(this).siblings("label").css("color",st_color).data("color","false");

}
});

$(".checkbox").click(function () {
$(this).siblings("label").css("color",st_color).data("color","false");
});

</script>
</syntaxhighlight>

=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:

<syntaxhighlight lang="javascript">$(document).ready(function(){
$('input').keypress(
function(event){
if (event.which == '13') {
event.preventDefault();
}
});
});</syntaxhighlight>

= 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.<br /><br />

[[File:Card_sort_1.png]]<br /><br />

'''DOWNLOADS:'''<br />
- [[Media:Card_Sort.zip|Demo template]]<br />
- [[Media:Card_Sort.lss|Demo survey]].

'''IMPLEMENTATION:'''

1) [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|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:<syntaxhighlight lang="javascript">
function cardSort(qID) {

// Define some stuff...
var thisQuestion = $('#question'+qID);
var thisQuestionHelp = $('img[alt="Help"]', thisQuestion).parent();
thisQuestion.addClass('card-sort-question');

// Hide the "Help" section
thisQuestionHelp.hide();

//Insert the "card sort" elements
$('ul.questions-list', thisQuestion).parent().prepend('<div class="droppable items-start"></div><div class="items-end-wrapper" />');
$('ul:eq(0) li', thisQuestionHelp).each(function(i) {
$('.items-end-wrapper', thisQuestion).append('<div class="items-end-inner">\
<div class="items-end-text">'+$(this).html()+'</div>\
<div class="droppable items-end items-end-'+(i+1)+'" data-items-end="'+(i+1)+'"></div>\
</div>')});

// Insert the "cards"
$('li.answer-item', thisQuestion).each(function(i) {
var thisSGQA = $(this).attr('id').replace(/javatbd/, '');
var thisCode = $(this).attr('id').split('X'+qID)[1];
var thisHTML = $('label', this).html();
$('div.items-start').append('<div class="card draggable" data-sgqa="'+thisSGQA+'" data-code="'+thisCode+'">\
'+thisHTML+'\
</div>');
});

// Make the "cards" draggable
$('.draggable').draggable({
revert: "invalid",
zIndex: 2700,
helper: 'original',
start: function( event, ui ) {
$(ui.helper).addClass('ui-draggable-helper');
},
stop: function( event, ui ) {
}
});

// Set the targets for the draggables
$('.droppable.items-start').droppable({
hoverClass: 'target-hover',
accept: '.draggable.moved'
});
$('.droppable.items-end').droppable({
hoverClass: 'target-hover',
accept: '.draggable'
});

// After dropped
$('.droppable').bind('drop', function(event, ui) {

// Physically move the draggable to the target
// (the plugin just visually moves it)
// (need to use a clone here to fake out iPad)
var newDraggable = $(ui.draggable).clone();
$(newDraggable).appendTo(this);
$(ui.draggable).remove();
if($(this).hasClass('items-end')) {
$(newDraggable).addClass('moved');
}
else {
$(newDraggable).removeClass('moved');
}
$(newDraggable).removeClass('ui-draggable-helper ui-draggable-dragging').css({
'z-index':'',
'top':'auto',
'left':'auto'
});

// Now, make this new clone draggable
$(newDraggable).draggable({
revert: "invalid",
zIndex: 2700,
helper: 'original',
start: function( event, ui ) {
$(ui.helper).addClass('ui-draggable-helper');
},
stop: function( event, ui ) {
}
});
});

// Initial "card" positions
$('li.question-item input.text', thisQuestion).each(function(i) {
if($(this).val() > 0) {
$('.items-end[data-items-end="'+$(this).val()+'"]').append($('.card[data-sgqa="'+$(this).attr('name')+'"]'));
$('.card[data-sgqa="'+$(this).attr('name')+'"]').appendTo($('.items-end[data-items-end="'+$(this).val()+'"]')).addClass('moved');
}
});

// Interrupt the Next/Submit function and load the inputs
$('form#limesurvey').submit(function(){
$('.question-item input.text', thisQuestion).val(0);
$('.droppable.items-end .card', thisQuestion).each(function(i) {
var thisItemsEnd = $(this).closest('.droppable.items-end').attr('data-items-end');
var thisID = $(this).attr('data-sgqa');
$('#answer'+thisID+'').val(thisItemsEnd);
});
});
}</syntaxhighlight>

<br />5) Add the following to the end of template.css:<syntaxhighlight lang="css">
/* Card Sort */

.card-sort-question ul.subquestions-list {
/*display: none;
clear: both;*/
}

.card-sort-question .items-start {
float: left;
width: 340px;
height: 317px;
margin-top: 8px;
border: 1px solid #666;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}

.card-sort-question .items-start.target-hover {
background:#C9C9C9;
}

.card-sort-question .items-end-wrapper {
float: left;
margin-left: 20px;
width: 340px;
}

.card-sort-question .items-end {
width: 338px;
min-height: 73px;
margin-bottom: 10px;
padding-bottom: 5px;
border: 1px solid #666;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
background: #EBEBEB;
}

.card-sort-question .items-end.target-hover {
background: #C9C9C9;
}

.card-sort-question .items-end.ui-state-disabled {
opacity: 1;
filter:alpha(opacity=100);
}

.card-sort-question .items-end-text {
width: 338px;
padding-bottom: 5px;
background: #FFFFFF;
font-size: 110%;
font-weight: bold;
}

.card-sort-question .card {
display: inline-block;
width: 140px;
height: auto;
margin: 5px 8px;
padding: 3px;
border: 2px solid #2F4354;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
background-color: #43b3d1;
color: #2f4354;
font-weight: bold;
text-align: center;
line-height: normal;
}

.card-sort-question .items-end .card {
margin: 5px 7px;
}

.card-sort-question div.answer {
clear: both;
padding-top: 1px;
margin-top: 0;
}</syntaxhighlight>

<br />6) Add this to the source of the question to apply the function.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
cardSort({QID});
});
</script></syntaxhighlight>

== Version 3.x ==
Here is a custom question theme for card Sorting in version 3.x. - https://github.com/tpartner/LimeSurvey-Card-Sorting-3.x

== Version 4.x ==
Here is a custom question theme for card Sorting in version 4.x. - https://github.com/tpartner/LimeSurvey-Card-Sorting-4.x

= Q Sorting=
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.<br /><br />

== Version 3.x==
''Tested with: 3.08 - 3.15''
Custom question theme - [[Media:QSort.zip]]<br />

== Version 4.x==
''Tested with: 4.5.1''
Custom question theme - [[Media:qSort-4.x.zip]]<br />

=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:
<syntaxhighlight lang="javascript">
<script type='text/javascript' charset='utf-8'>
$( document ).ready( function() {
var this_surveyId='{SID}';
var this_groupId='{self.gid}';
var this_quesitonId='{self.qid}';
var this_self='{self.sgqa}';

// Remark for the variable 'my_targetTextBox':
// ------------------------------------
// For Text-type question (e.g. 'short free text', 'huge free text'), use : '#answer' + this_self;
// For 'Multiple Choice'-type question enabled with the 'Other' option which provides a textbox, use : '#answer' + this_self;
// For 'List (radio)'-type question enabled with the 'Other' option which provides a textbox, use : '#answer' + this_self + 'text'.
var my_targetTextBox='#answer' + this_self;

// Trim:
// -----
$( my_targetTextBox ).blur( function(){
$( this ).val( $.trim( $( this ).val() ) );
});

// Uppercase:
// ----------
// Operate for its appearance only (but have no effect to modify its intrinsic value) - display as UpperCase:
$( my_targetTextBox ).css( 'text-transform', 'uppercase' );
// Operate for its intrinsic value:
$( my_targetTextBox ).blur( function() {
$( this ).val( $( this ).val().toUpperCase() );
});
});
</script>
</syntaxhighlight>

For Text-type question (e.g. 'short free text', 'huge free text'), set the 'this_self' variable as below:
<syntaxhighlight lang="javascript">
var my_targetTextBox='#answer' + this_self;
</syntaxhighlight>

For 'Multiple Choice'-type question enabled with the 'Other' option which provides a textbox, set the 'this_self' variable as below:
<syntaxhighlight lang="javascript">
var my_targetTextBox='#answer' + this_self;
</syntaxhighlight>

For 'List (radio)'-type question enabled with the 'Other' option which provides a textbox, set the 'this_self' variable as below:
<syntaxhighlight lang="javascript">
var my_targetTextBox='#answer' + this_self + 'text';
</syntaxhighlight>

= 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.<br /><br />

'''IMPLEMENTATION:'''

1) Add the following to the end of template.js:<syntaxhighlight lang="javascript">
$(document).ready(function(){
// Apply the responsiveArray plugin with default settings
$('.array-10-pt, .array-flexible-row, .array-5-pt, .array-increase-same-decrease, .array-yes-uncertain-no').responsiveArray();
});

/*****
A plugin to insert drop-downs into arrays for small screens
Copyright (C) 2015 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 09/04/15
*****/
(function( $ ){
$.fn.responsiveArray = function(options) {

var opts = $.extend( {
chooseText: 'Please choose...'
}, options);

return this.each(function() {

var thisQuestion = $(this);
var thisQID = $(thisQuestion).attr('id').split('question')[1];

// Some classes
$(thisQuestion).addClass('responsive-array');
$('table.questions-list tr', thisQuestion).each(function(i){
$('> *', this).each(function(i){
$(this).addClass('col-'+i);
if(i != 0) {
$(this).addClass('expanded');
}
});
});

// Insert a column
$('.col-0', thisQuestion).after('<td class="dropdown-cell" />');

// Insert dropdowns
$('body').append('<select style="display:none;" class="responsive-select responsive-select-'+thisQID+'" />');
$('table.questions-list thead th.expanded', thisQuestion).each(function(i){
$('.responsive-select-'+thisQID).append('<option value="">'+$(this).text()+'</option>');
});
$('table.questions-list tbody .dropdown-cell', thisQuestion).append($('.responsive-select-'+thisQID+'').clone());
$('tr.radio-list', thisQuestion).each(function(i){
var thisRow = $(this);
$('input.radio', this).each(function(i){
$('.responsive-select-'+thisQID+' option:eq('+i+')', thisRow).attr('value', $(this).attr('id'));
});
if($('input.radio:checked', thisRow).length > 0) {
$('.responsive-select-'+thisQID+'', thisRow).val($('input.radio:checked', thisRow).attr('id'));
}
else {
$('.responsive-select-'+thisQID+'', thisRow).prepend('<option value="" selected="selected">'+opts.chooseText+'</option>');
}
});
$('.responsive-select-'+thisQID+'', thisQuestion).show();

// Listeners on radios
$('input.radio', thisQuestion).click(function(event) {
var thisRow = $(this).closest('tr');
var thisID = $(this).attr('id');
//$('option[value="'+thisID+'"]').attr('selected', 'selected');
$('.responsive-select', thisRow).val(thisID);
$('.responsive-select option[value=""]', thisRow).remove();
});

// Listeners on dropdowns
$('.responsive-select-'+thisQID+'').change(function() {
$('#'+$(this).val()+'').click();
});

});
};
})( jQuery );</syntaxhighlight>

<br />2) Add something like this to template.css (I have it set to switch at 640px but adjust that as you see fit):<syntaxhighlight lang="css">
/*****
Styles for the responsiveArray plugin
Copyright (C) 2015 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 09/04/15
*****/

.responsive-array .dropdown-cell {
display: none;
text-align: left;
padding-left: 8px;
}

.responsive-array .dropdown-cell select {
max-width: none;
}

@media screen and (max-width: 640px) {
.responsive-array table.question {
table-layout: auto;
}
.responsive-array table.question .col-0,
.responsive-array table.question .dropdown-cell {
width: 50%;
}
.responsive-array .dropdown-cell {
display: table-cell;
}
.responsive-array th.expanded,
.responsive-array td.expanded {
display: none;
}
}</syntaxhighlight>

<br />Note that the "Please choose" text is an optional setting. To change it, apply the plugin like this:<syntaxhighlight lang="javascript">
$(document).ready(function(){
// Apply the responsiveArray plugin with default settings
$('.array-10-pt, .array-flexible-row, .array-5-pt, .array-increase-same-decrease, .array-yes-uncertain-no').responsiveArray({
chooseText: 'Select one...'
});
});</syntaxhighlight>

= Van Westendorp Pricing Sliders=
== Version 2.06==

''Tested with: LimeSurvey version 2.06''

This workaround uses JavaScript to dynamically control sliders to facilitate the [http://www.5circles.com/van-westendorp-pricing-the-price-sensitivity-meter/ 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.<br /><br />

[[File:Test_Van_Westendorp_Pricing_206_v2.png]]<br /><br />

'''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''':

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your Multiple Numeric question with subquestions as seen in the image above.
#Add the following to the end of template.js:<syntaxhighlight lang="javascript">function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}

/*****
A jQuery plugin to facilitate the Van Westendorp pricing research methodology
Copyright (C) 2016 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 19/10/16
*****/
(function( $ ){

$.fn.vWPricing = function(options) {

var opts = $.extend( {
order: [1, 2, 3, 4],
randomOrder: false
}, options);

return this.each(function() {

var thisQuestion = $(this);

thisQuestion.addClass('vwp-question');

// Add some attributes and set the slider max/min values
var itemsLength = $('li.question-item', thisQuestion).length;
$('li.question-item', thisQuestion).each(function(i) {
$(this).attr('data-item', (i+1));
$('.ui-slider', this).attr('data-slider', (i+1));

var thisSliderMin = $('.ui-slider', this).slider('option', 'min');
$('.ui-slider', this).slider('option', 'min', thisSliderMin+(i));
var thisSliderMax = $('.ui-slider', this).slider('option', 'max');
$('.ui-slider', this).slider('option', 'max', thisSliderMax-((itemsLength-1)-i));
});

// Slider order
if(opts.randomOrder == true) {
shuffleArray(opts.order);
}
$(opts.order).each(function(i, val) {
$('ul.subquestions-list', thisQuestion).append($('li.question-item[data-item="'+val+'"]', thisQuestion));
});

// Listeners on the sliders
$('.ui-slider', thisQuestion).on('slide', function(event, ui) {
handleVwpSliders(this, ui.value);
});
$('.ui-slider', thisQuestion).on('slidestop', function(event, ui) {
handleVwpSliders(this, ui.value);
});

// A function to handle the siders
function handleVwpSliders(el, sliderVal) {
var thisRow = $(el).closest('li');
var movedIndexNum = $(el).attr('data-slider');

$('input.text', thisRow).val(sliderVal);
$('.slider-callout', thisRow).html($('input.text', thisRow).val());

var lowerSliders = $('.ui-slider', thisQuestion).filter(function() {
return $(this).attr('data-slider') < movedIndexNum;
});
var higherSliders = $('.ui-slider', thisQuestion).filter(function() {
return $(this).attr('data-slider') > movedIndexNum;
});

$(lowerSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider');
var newSliderVal = sliderVal-(movedIndexNum-thisIndexNum);
if($(this).slider('option', 'value') > newSliderVal) {
var thisRow = $(this).closest('li');
$(this).slider('option', 'value', newSliderVal);
$('input.text', thisRow).val(newSliderVal);
$('.slider-callout', thisRow).html($('input.text', thisRow).val());
}
});
$(higherSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider');
var newSliderVal = sliderVal+(thisIndexNum-movedIndexNum);
if($(this).slider('option', 'value') < newSliderVal) {
var thisRow = $(this).closest('li');
$(this).slider('option', 'value', newSliderVal);
$('input.text', thisRow).val(newSliderVal);
$('.slider-callout', thisRow).html($('input.text', thisRow).val());
}
});
}
});

};
})( jQuery );</syntaxhighlight>
#Add the following to the end of template.css (this is for a copy of [http://extensions.sondages.pro/skeletonquest-rwd-for-limesurvey/ Denis Chenu's SkeletonQuest template]):<syntaxhighlight lang="css">/**** Van Westendorp Pricing ****/

.vwp-question ul.subquestions-list,
.vwp-question ul.subquestions-list li {
display:block;
}

.vwp-question ul.subquestions-list li {
margin-bottom: 15px;
}

.vwp-question ul.subquestions-list .slider-label {
display:block;
padding: 0.3em 0.5em 0.7em;
width: auto;
max-width: 100%;
text-align: left;
}

.vwp-question .slider-element {
display: block;
margin-left: 2%;
width:90%;
max-width: 32em;
}</syntaxhighlight>
#To apply the plugin, add this script the multiple-numeric question source.
There are two options to adjust<br /> -'''order''' - this is the order that your subquestions will be displayed (default, 1, 2, 3, 4)<br /> -'''randomOrder''' - if set to true, the '''order''' option will be overridden and the subquestion order will be randomized (default, false)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').vWPricing({
order: [1, 2, 3, 4],
randomOrder: false
});

});
</script></syntaxhighlight>
== Version 2.5x==

''Tested with: LimeSurvey version 2.54.5''

This workaround uses JavaScript to dynamically control sliders to facilitate the [http://www.5circles.com/van-westendorp-pricing-the-price-sensitivity-meter/ 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.<br /><br />

[[File:Test_Van_Westendorp_Pricing_25x.png]]<br /><br />

'''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''':

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your Multiple Numeric question with subquestions as seen in the image above.
#Add the following to the end of template.js:<syntaxhighlight lang="javascript">function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}

/*****
A jQuery plugin to facilitate the Van Westendorp pricing research methodology
Copyright (C) 2016 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 19/10/16
*****/
(function( $ ){

$.fn.vWPricing25 = function(options) {

var opts = $.extend( {
order: [1, 2, 3, 4],
randomOrder: false
}, options);

return this.each(function() {

var thisQuestion = $(this);

thisQuestion.addClass('vwp-question');

// Add some attributes and set the slider max/min values
var itemsLength = $('.question-item', thisQuestion).length;
$('.question-item', thisQuestion).each(function(i) {
var thisInput = $('input[type=text]', this);
var thisVal = $(thisInput).val();

$(this).attr('data-item', (i+1));
$(thisInput).attr('data-slider-index', (i+1));

// Slider initial settings
setTimeout(function() {
var thisSliderMin = $(thisInput).bootstrapSlider('getAttribute', 'min');
$(thisInput).bootstrapSlider('setAttribute', 'min', thisSliderMin+(i));
var thisSliderMax = $(thisInput).bootstrapSlider('getAttribute', 'max');
$(thisInput).bootstrapSlider('setAttribute', 'max', thisSliderMax-((itemsLength-1)-i));

if(thisVal == '') {
$(thisInput).val('');
}
}, 200);

});

// Slider order
if(opts.randomOrder == true) {
shuffleArray(opts.order);
}
$(opts.order).each(function(i, val) {
$('.subquestion-list.questions-list', thisQuestion).append($('.question-item[data-item="'+val+'"]', thisQuestion));
});

// Listeners on the sliders
$('input[type=text]', thisQuestion).on('slide', function(event) {
handleVwpSliders(this, $(this).bootstrapSlider('getValue'));
});
$('input[type=text]', thisQuestion).on('slideStop', function(event) {
handleVwpSliders(this, $(this).bootstrapSlider('getValue'));
});

// A function to handle the siders
function handleVwpSliders(el, sliderVal) {
var movedIndexNum = $(el).attr('data-slider-index');

var lowerSliders = $('input[type=text]', thisQuestion).filter(function() {
return $(this).attr('data-slider-index') < movedIndexNum;
});
var higherSliders = $('input[type=text]', thisQuestion).filter(function() {
return $(this).attr('data-slider-index') > movedIndexNum;
});

$(lowerSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider-index');
var newSliderVal = sliderVal-(movedIndexNum-thisIndexNum);
if($(this).bootstrapSlider('getValue') > newSliderVal) {
var thisRow = $(this).closest('.question-item');
var thisTooltip = $('.tooltip', thisRow);
$(this).bootstrapSlider('setValue', newSliderVal);
$('.tooltip-inner', thisTooltip).text($('input.text', thisRow).val());
thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');

var validationInput = $('input.em_sq_validation', thisRow);
$(validationInput).val($('input.text', thisRow).val())
fixnum_checkconditions($(validationInput).attr('value'), $(validationInput).attr('name'), $(validationInput).attr('type'));
}
});
$(higherSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider-index');
var newSliderVal = sliderVal+(thisIndexNum-movedIndexNum);
if($(this).bootstrapSlider('getValue') < newSliderVal) {
var thisRow = $(this).closest('.question-item');
var thisTooltip = $('.tooltip', thisRow);
$(this).bootstrapSlider('setValue', newSliderVal);
$('.tooltip-inner', thisTooltip).text($('input.text', thisRow).val());
thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');

var validationInput = $('input.em_sq_validation', thisRow);
$(validationInput).val($('input.text', thisRow).val())
fixnum_checkconditions($(validationInput).attr('value'), $(validationInput).attr('name'), $(validationInput).attr('type'));
}
});
}

// Listener on resizing (override the bootstrap callout behaviour)
$(window).resize(function() {
setTimeout(function() {
$('input[type=text]', thisQuestion).each(function(i) {
if($(this).val() != '') {
var thisRow = $(this).closest('.question-item');
var thisTooltip = $('.tooltip', thisRow);
$('.tooltip-inner', thisTooltip).text($.trim($(this).val()));
console.log($('.tooltip-inner', thisTooltip).text());
thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');
}
});
}, 1);
});
});
};
})( jQuery );</syntaxhighlight>
#Add the following to the end of template.css (this is for a copy of the default template):<syntaxhighlight lang="css">/*********** Van Westendorp Pricing ***********/

.vwp-question .control-label {
margin-bottom: 35px;
}

.vwp-question .withslider {
margin-bottom: 0px;
}

.vwp-question .slider-container {
margin-bottom: 2.5em;
margin-top: 3.5em;
}

.vwp-question .slider.slider-horizontal .slider-handle {
margin-top: -5px;
}

@media (max-width: 600px){

.vwp-question .withslider {
padding-left: 0;
padding-right: 0;
}
}

@media (max-width: 480px){

#outerframeContainer,
.vwp-question .control-label,
.vwp-question .slider-container > div {
padding-left: 0;
padding-right: 0;
}

.vwp-question .slider-container > div > div {
padding-left: 5px;
padding-right: 5px;
}
}</syntaxhighlight>
#To apply the plugin, add this script the multiple-numeric question source.
There are two options to adjust<br /> -'''order''' - this is the order that your subquestions will be displayed (default, 1, 2, 3, 4)<br /> -'''randomOrder''' - if set to true, the '''order''' option will be overridden and the subquestion order will be randomized (default, false)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').vWPricing25({
order: [1, 2, 3, 4],
randomOrder: false
});

});
</script></syntaxhighlight>
== 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".<br />

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

'''Implementation''':

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your Multiple Choice question with the last subquestions as "Select all".
#Add the following script to the source of the question text:<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:complete',function() {

// Identify this question
var thisQuestion = $('#question{QID}');

// Initial states
if($('input[type="checkbox"]:last', thisQuestion).is(':checked')) {
$('input[type="checkbox"]', thisQuestion).not(':last').prop('checked', true).prop('disabled', true);
}

// Listener on the last checkbox
$('input[type="checkbox"]:last', thisQuestion).on('change', function(e) {
if($(this).is(':checked')) {
$('input[type="checkbox"]', thisQuestion).not(this).prop('checked', true).prop('disabled', true);
}
else {
$('input[type="checkbox"]', thisQuestion).not(this).prop('checked', false).prop('disabled', false);
}

// Fire ExpressionScript
$('input[type="checkbox"]', thisQuestion).not(this).each(function(i) {
checkconditions(this.value, this.name, this.type);
});
});

// Re-enable checkboxes so data gets stored
$('#moveprevbtn, #movenextbtn, #movesubmitbtn').on('click', function(){
$('input[type="checkbox"]', thisQuestion).prop('disabled', false);
});
});
</script></syntaxhighlight>

= Pay Off Matrix Interface =
== LimeSurvey Version 2.67.x==

This workaround converts a list-radio type question into a Pay Off Matrix interface.<br /><br />

[[File:Pay_off_matrix_1.png]]<br />
[[File:Pay_off_matrix_2.png]]<br /><br />

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

'''Implementation''':

#Create your List Radio question with with the upper and lower values for each answer separated by "pipe" characters.<br />[[File:Pay_off_matrix_3.png]]
#Assign a class "pay-off-matrix" to that question.<br />[[File:Pay_off_matrix_4.png]]
#Add the following to the end of template.js:<syntaxhighlight lang="javascript">$(document).on('ready pjax:complete',function() {
// Apply the payOffMatrix plugin
$('.pay-off-matrix').payOffMatrix({
topText: 'You receive',
bottomText: 'Others receive'
});
});

/*****
A jQuery plugin to convert a list-radio question to a Pay Off Matrix
Copyright (C) 2017 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 1.0
Create date - 25/09/2017
*****/

(function($){

$.fn.payOffMatrix = function(options) {

var opts = $.extend( {
topText: '',
bottomText: ''
}, options);

return this.each(function() {

var thisQuestion = $(this);

// Insert the matrix elements
$('div.answer', thisQuestion).prepend('<div class="pom-outer-wrapper"><div class="pom-wrapper">\
<div class="pom-row-label top">'+opts.topText+'</div>\
<div class="pom-items-wrapper">\
</div>\
<div class="pom-row-label bottom">'+opts.bottomText+'</div>\
<div style="clear:both;" />\
</div></div>');

$('.answer-item', thisQuestion).each(function(i) {
var thisValue = $('input.radio', this).attr('value');
var itemTop = $.trim($('.label-text', this).text()).split('|')[0];
var itemBottom = $.trim($('.label-text', this).text()).split('|')[1];
$('.pom-items-wrapper', thisQuestion).append('<div class="pom-item">\
<div class="pom-item-label-wrapper top">\
<div class="pom-item-label">'+itemTop+'</div>\
</div>\
<div class="pom-item-button-wrapper">\
<div class="pom-item-button" data-value="'+thisValue+'"></div>\
</div>\
<div class="pom-item-label-wrapper bottom">\
<div class="pom-item-label">'+itemBottom+'</div>\
</div>\
<div class="under-480" style="clear:both;" />\
</div>');
});
$('.pom-item:first', thisQuestion).addClass('first');
$('.pom-item:last', thisQuestion).addClass('last');

// Listeners on the matrix events
$('.pom-item-button, .pom-item-label', thisQuestion).on('click', function(e) {
$('.pom-item', thisQuestion).removeClass('active-item');
$(this).closest('.pom-item').addClass('active-item');
var thisValue = $(this).closest('.pom-item').find('.pom-item-button').attr('data-value');
$('input.radio[value="'+thisValue+'"]', thisQuestion).trigger('click');
}).hover(
function() {
$(this).closest('.pom-item').addClass('hover');
}, function() {
$( this ).closest('.pom-item').removeClass('hover');
}
);
});

};
})(jQuery);</syntaxhighlight>
#Add the following to the end of template.css:<syntaxhighlight lang="css">/*****
Styles for the payOffMatrix plugin
Copyright (C) 2017 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 1.0
Create date - 25/09/2017
*****/

.pay-off-matrix .answers-list {
position: absolute;
left: -9999em;
}

.pom-wrapper {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 648px;
}

.pom-item {
float: left;
}

.pom-row-label {
clear: both;
text-align: center;
font-size: 16px;
}

.pom-row-label.top {
padding-top: 5px;
}

.pom-row-label.bottom {
padding-bottom: 5px;
}

.pom-item-label-wrapper {
padding: 5px 8px;
}

.pom-item-label-wrapper.top {
margin-bottom: 3px;
}

.pom-item-label-wrapper.bottom {
margin-top: 3px;
}

.pom-item {
width: 11.11111111111111%;
}

.pom-item-label {
border: 1px solid #233140;
background: #EBEBEB;
-moz-transition: background-color 300ms ease;
-o-transition: background-color 300ms ease;
-webkit-transition: background-color 300ms ease;
transition: background-color 300ms ease;
text-align:center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
font-size: 16px;
line-height: 30px;
}

.pom-item.hover .pom-item-label,
.pom-item.active-item .pom-item-label {
font-weight: bold;
cursor: pointer;
}

.pom-item.active-item .pom-item-label {
background: #233140;
color: #FFFFFF;
}

.pom-item-button-wrapper {
padding: 5px 15.27777777777778%;
background: #CCD5DD;
width: 69.44444444444444%;
width: auto;
}

.pom-item.first .pom-item-button-wrapper {
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-khtml-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}

.pom-item.last .pom-item-button-wrapper {
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-khtml-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}

.pom-item-button {
height: 0;
width: 100%;
padding-top: 100%;
background: #FFFFFF;
-moz-transition: background-color 300ms ease;
-o-transition: background-color 300ms ease;
-webkit-transition: background-color 300ms ease;
transition: background-color 300ms ease;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
}

.pom-item.hover .pom-item-button {
background-color: #5b7fa5;
}

.pom-item.active-item .pom-item-button,
.pom-item.active-item .pom-item-button:hover {
background-color: #233140;
cursor:default;
}

@media only screen and (max-width: 480px) {
.pom-outer-wrapper {
margin: 0 auto;
padding-top: 50px;
width: 256px;
}
.pom-wrapper {
display:block;
position: relative;
}

.pom-row-label {
bottom: 100%;
left: 0;
margin-left: -25px;
position: absolute;
text-align: center;
width: 150px;
background-color: transparent !important;
}

.pom-row-label.bottom {
left: auto;
right: 0;
margin-right: -25px;
padding: 5px 0 0 0;
}

pom-items-wrapper {
vertical-align: middle;
}

.pom-item {
float: none;
width: auto;
}

.pom-item-label-wrapper {
float: left;
margin: 0 !important;
padding: 7px 24px;
}

.pom-item-label {
width: 50px;
}

.pom-item-button-wrapper {
float: left;
margin: 0 5px;
padding: 5px;
width: 46px;
}

.pom-item.first .pom-item-button-wrapper {
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-khtml-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}

.pom-item.last .pom-item-button-wrapper {
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-khtml-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

.pom-item .under-480 {
display: block !important;
}
}</syntaxhighlight>

== LimeSurvey Version 3.x==
Here is a custom question theme for LS 3.x - https://github.com/tpartner/LimeSurvey-Social-Value-Orientation

Workarounds: Manipulating a survey at runtime using Javascript

2023-05-11T17:26:42Z

Tpartner: /* Auto-tabbing between text input fields */

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]]

<div class="simplebox"><center><br />'''Please keep in mind that these workarounds are not official LimeSurvey extensions - they are solutions that users have created for themselves.<br /><span style='color:#EE0000,#FFFFFF'>Therefore LimeSurvey can't offer guarantees or support for these solutions.</span><br />If you have questions, please contact the users that, thankfully, shared their solutions with the community.'''<br /><br /></center></div>

<div class="simplebox">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.<br /><br /></div>

__TOC__

=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 <nowiki>''Tested with: (enter LimeSurvey version and maybe browser)''</nowiki>.

Finally it's imported to mark all your code with code tags, other wise you might break this page.
*Start tag: '''<nowiki><syntaxhighlight lang="php"></nowiki>'''
*End tag: '''<nowiki></syntaxhighlight></nowiki>'''.

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

Plugin [https://extensions.sondages.pro/questions-updating-and-managing/addscripttoquestion-easily-add-javascript/ 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".
* [http://docs.limesurvey.org/tiki-index.php?page=Adding+A+Question Add a new question]
* Edit the question and click the "Source" button in the editor toolbar:

[[File:Editor_1.png]]
* Enter your script after the question text:

[[File:Editor_2.png]]
* Save the question

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

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
alert("Test!");
</script></syntaxhighlight>

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:

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:complete',function() {
alert("Test!");
});
</script></syntaxhighlight>

===Usage of brackets (<nowiki>{ and }</nowiki>)===
{{Alert|title=Caution when using brackets (<nowiki>{ and }</nowiki>) in scripts|text=[[ExpressionScript#Syntax|Expression manager]] uses brackets (<nowiki>{ and }</nowiki>) to enclose expressions. If you have to use brackets in your JavaScript, you must add a space or line feed after the opening bracket (<nowiki>{</nowiki>) and before the closing bracket (<nowiki>}</nowiki>) }}

===Examples of usage of brackets===

ExpressionScript will try to parse this JavaScript:
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(function() {console.log('broken javascript');});
</script>
</syntaxhighlight>

Adding line feed prevents ExpressionScript from parsing
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(function() {
console.log('Adding a line feed for javascript');
});
</script>
</syntaxhighlight>

ExpressionScript will try to parse this JavaScript:
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
if(myvar==1) {console.log('broken javascript');};
</script>
</syntaxhighlight>

Adding spaces inside the brackets prevents ExpressionScript from parsing
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
if(myvar==1) { console.log('Adding a space for javascript'); };
</script>
</syntaxhighlight>

=Sum up input values using Javascript=

''Tested with: ''

<div class="simplebox">As of version 1.92, this is easier to do using the sum() function in [[ExpressionScript|ExpressionScript]]. See this [[ExpressionScript how-tos#Calculate assessment values at runtime and store the results in the survey data|HowTo example]].</div>

<div class="simplebox">Starting in Version 1.92, you also do no longer need to use SGQA (e.g. 45251X1X5) identifiers. Instead the code <code>{SGQ}</code> will automatically replaced by the current questions SGQA-codes.</div>

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 [http://docs.limesurvey.org/tiki-index.php?page=SGQA+Identifier SGQA identifier] and [[Adding a question#Information from previous answers|Using information from previous answers]].

<syntaxhighlight lang="html4strict">

<div style="text-align: left">These are your answers:<br />

<u></u><u></u><u></u><u></u><u>=

<p><script LANGUAGE="JavaScript">

partyprice = 3;

beadclothprice = 3;

breakfastprice = 7;

lunchprice = 8;

dinnerprice = 10;

foodtotal = 0;

var isreallytrue = "Yes";

var noanswer = "No answer";

document.write( "Can you come? = {INSERTANS:45251X1X1}<BR>" );

if ("{INSERTANS:45251X1X1}" == isreallytrue )

{

if ("{INSERTANS:45251X1X3}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X3}"; }

partypeople = parseInt(answer);

partytotal = partyprice * partypeople;

document.write( "It's {INSERTANS:45251X1X3} persons who will come = " + partytotal + "€<BR>" );

if ("{INSERTANS:45251X1X4}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X4}";}

beadcloths = parseInt(answer);

beadclothtotal = beadclothprice * beadcloths;

document.write( "You want to borrow {INSERTANS:45251X1X4} beadcloths = " + beadclothtotal + "€<BR>" );

document.write( "Will you be there thursday? = {INSERTANS:45251X1X5}<BR>" );

document.write( "On friday you will have these meals: <BR>" );

if ("{INSERTANS:45251X1X71}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X71}";}

breakfastfriday = parseInt(answer) * breakfastprice;

document.write( "'''_ " + answer + " breakfeasts = " + breakfastfriday + "€<BR>" );

if ("{INSERTANS:45251X1X72}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X72}";}

lunchfriday = parseInt(answer) * lunchprice ;

document.write( "'''_ " + answer + " lunches = " + lunchfriday + "€<BR>" );

if ("{INSERTANS:45251X1X73}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X73}";}

dinnerfriday = parseInt(answer)* dinnerprice ;

document.write( "'''_ " + answer + " dinners = " + dinnerfriday + "€<BR>" );

foodtotal = breakfastfriday + lunchfriday + dinnerfriday;

document.write( "Will you be there saturday? = {INSERTANS:45251X1X8}<BR>" );

if ("{INSERTANS:45251X1X8}" == isreallytrue )

{

document.write( "On saturday you will have these meals: <BR>" );

if ("{INSERTANS:45251X1X91}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X91}"; }

breakfastsaturday = parseInt(answer) * breakfastprice ;

document.write("'''_ " + answer + " breakfeasts = " + breakfastsaturday + "€<BR>" );

if ("{INSERTANS:45251X1X92}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X92}"; }

lunchsaturday = parseInt(answer) * lunchprice ;

document.write( "'''_ " + answer + " lunches = " + lunchsaturday + "€<BR>" );

if ("{INSERTANS:45251X1X93}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X93}"; }

dinnersaturday = parseInt(answer) * dinnerprice ;

document.write( "'''_ " + answer + " dinners = " + dinnersaturday + "€<BR>" );

foodtotal = foodtotal + breakfastsaturday + lunchsaturday + dinnersaturday;

}

document.write( "Will you be there sunday? = {INSERTANS:45251X1X10}<BR>" );

if ("{INSERTANS:45251X1X10}" == isreallytrue )

{

document.write( "On sunday you will have these meals: <br>" );

if ("{INSERTANS:45251X1X111}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X111}"; }

breakfastsunday = parseInt(answer) * breakfastprice ;

document.write( "'''_ " + answer + " breakfeasts = " + breakfastsunday + "€<BR>" );

if ("{INSERTANS:45251X1X112}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X112}"; }

lunchsunday = parseInt(answer) * lunchprice ;

document.write( "'''_ " + answer + " lunches = " + lunchsunday + "€<BR>" );

if ("{INSERTANS:45251X1X113}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X113}"; }

dinnersunday = parseInt(answer) * dinnerprice ;

document.write( "'''_ " + answer + " dinners = " + dinnersunday + "€<p>" );

foodtotal = foodtotal + breakfastsunday + lunchsunday + dinnersunday;

}

total = partytotal + beadclothtotal + foodtotal;

document.write( "<h3>In total it will cost you " + total + "€</h3><BR>

Put that sum in this bank account 1234 5678 9012" );

}

</SCRIPT></p>

</div></syntaxhighlight>

=Multiple Question Validation=

''Tested with: ''

<div class="simplebox">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|ExpressionScript]]. Such validations also work on the current page, and properly handle array_filter and cascading relevance.</div>

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.):
#Create a new survey of type "group by group", set the "Show |<< Prev| button" to yes and note the SID.
#Add a new group called "Group 1" and note the GID.
#Add a new question "Percent of males" of type "numeric", make it mandatory and note the QID (we will refer to this as QID1).
#Add a new question "Percent of females" of type "numeric", make it mandatory and note the QID (we will refer to this as QID2).
#Add a new group called "Group 2"
#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

<syntaxhighlight lang="javascript">

<script>

function validation()

{

if [[{INSERTANS:SIDXGIDXQID1}+{INSERTANS:SIDXGIDXQID2}) != 100)

{

alert("Your responses don't sum 100! Check them");

document.limesurvey.move.value = 'moveprev';

document.limesurvey.submit();

}

else

{

document.limesurvey.move.value = 'movelast';

document.limesurvey.submit();

}

}

setTimeout("validation()",250);

</script>

</syntaxhighlight>

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

<syntaxhighlight lang="php">

function validation() {

if ("{INSERTANS:SIDXGIDXQID}" != "{INSERTANS:SIDXGIDXQID}") {

alert("Your responses don't match Check them"); document.limesurvey.move.value = 'moveprev';

document.limesurvey.submit();

}

}

setTimeout("validation()",250);

</syntaxhighlight>

=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.

<syntaxhighlight lang="php">

<script>

if ("{INSERTANS:SIDXGIDXQID}" == "No")

{

window.location="http://www.limesurvey.org";

}

</script>

</syntaxhighlight>

=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 (<input> 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...:

<syntaxhighlight lang="php">

<script>

jQuery(document).ready(

function(){

alert('onload alert!');

}

);

</script>

</syntaxhighlight>

...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:

<syntaxhighlight lang="php">document.getElementById("answer73166X16X54").style.display='none';</syntaxhighlight>

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:

<syntaxhighlight lang="php">document.getElementById("answer{SGQ}").style.display='none';</syntaxhighlight>

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:

<syntaxhighlight lang="php">document.getElementById("answer73166X16X54").readOnly=true;</syntaxhighlight> 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.

<syntaxhighlight lang="php">

jQuery(document).ready(

function() {

jQuery('input:radio').each(

function() {

var s = jQuery(this);

var c = s.parent().children('.answertext');

for(var i=0; i < c.length; i++) {

var a = jQuery(c[i]]);

if(this.id </u> a.attr('for') && a.text() == '') {

s.css({ 'display' : 'none' });

a.css({ 'display' : 'none' });

break;

}

}

}

)

}

);

</syntaxhighlight>

==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 <html> 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

<syntaxhighlight lang="javascript">

jQuery(document).ready(

function(){

languagecode=$('html').attr('lang');

alert('This is the current language code: '+languagecode);

}

);

</syntaxhighlight>

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''

<div class="simplebox">As of version 1.92, this is easier to do using the the array_filter attribute, or relevance equations in general.</div>

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.

<syntaxhighlight lang="php">

var previousQuestionAnswer = "{INSERTANS:1000X1X1}";

var currentQuestionID = "#answer1000X1X1"

$(document).ready(function() {

// See if the answer for the previous question matches an answer in the current question

// (other than 'No Answer')

// If so, disable it.

if (previousQuestionAnswer!='No Answer') {

$(currentQuestionID).children().each(function(index, Element)

{

if ($(this).attr('text') == previousQuestionAnswer)

{ $(this).attr('disabled', true); }

}

);}

}); // End of JQuery ready function

</syntaxhighlight>

===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):

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Get the countryCode (first character of the country)
var countryCode = '{INSERTANS:1000X1X1}'.substr(0, 1).toUpperCase();

// Loop through all dropdown options and remove those with codes not starting with the countryCode
$('select[id^="answer"] option').each(function(i){

if($(this).attr('value') && $(this).attr('value').substr(0, 1).toUpperCase() != countryCode) {
$(this).remove();
}
});
});

</script></syntaxhighlight>

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

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Get the stateCode (two first characters of the state)

var stateCode = '{INSERTANS:1000X1X2}'.substr(0, 2).toUpperCase();

// Loop through all dropdown options and remove those with codes not starting with the stateCode

$('select[id^="answer"] option').each(function(i){

if($(this).attr('value') && $(this).attr('value').substr(0, 2).toUpperCase() != stateCode) {

$(this).remove();

}

});

});

</script></syntaxhighlight>

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+''

<div class="simplebox">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).</div>

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...

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

// Match elements with labels using htmlFor and a loop

var labels = document.getElementsByTagName('LABEL');

for (var i = 0; i < labels.length; i++) {

if (labels[i].htmlFor != '') {

var elem = document.getElementById(labels[i].htmlFor);

if (elem)

elem.label = labels[i];

}

}

var answerFilter="{INSERTANS:96553X63X759}";

for (i=0; i<30; i++){

var iLabel = document.getElementById('answer96553X63X760'+(i+1]].label.innerHTML;

if (answerFilter.search(iLabel) == -1){

// Hide element

$('#question760').find('li').eq(i).hide();

// Set value of hidden elements to zero

document.getElementById('answer96553X63X760'+(i+1)).value = 0;

}

}

});</script>

</syntaxhighlight>

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

''Tested with: 1.72''

''And tested with: 1.91+''

<div class="simplebox">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|ExpressionScript]] compatible equations or tailored text. Finally, with 1.92, defaults are properly managed even when set on the same page.</div>

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.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answer1000X11X30').val('{INSERTANS:1000X10X20}');

$('#answer1000X11X31').val('{INSERTANS:1000X10X21}');

});

</script></syntaxhighlight>

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.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answer1000X2X2').val(parseInt('{INSERTANS:1000X1X1}')*2);

$("#question2").hide();

});

</script>

</syntaxhighlight>

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

=Dynamic Sum=

<div class="simplebox">As of version 1.92, this is easier to do with [[ExpressionScript|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 [[ExpressionScript how-tos#Calculate assessment values at runtime and store the results in the survey data|HowTo example]] demonstrates the dynamic sum feature.</div>

<div class="simplebox">Also note, as of version 1.92, the following workaround will fail, since it includes a a regular expression containing curly braces.</div>

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:

<syntaxhighlight lang="php">

<script language=Javascript>

// General definitions

// Define a regular expression to match the labels containing information about an answer

// In LimeSurvey, these labels start with "answer..."

var answerRegex = /^answer/;

// Find all answer checkboxes in the document and set their

// onchange events to updatePrice

function Custom_On_Load()

{

// Find all input elements

var inputList=document.getElementsByTagName("input");

// Loop through each, looking for checkboxes

var i;

for( i=0; i< inputList.length;i++ )

{

// If input item does not have an ID, skip

if (! (inputList[i].id)) { continue; }

// Skip to next if ID doesn't start with "answer"

if (!answerRegex.test(inputList[i].id)) { continue; }

// Skip to next if not a checkbox

if (inputList[i].type.toUpperCase()!='CHECKBOX') { continue; }

// This is an answer checkbox!

// Setup onchange event

inputList[i].onclick = updatePrice;

}

// Load initial sum

updatePrice();

}

function updatePrice()

{

var labels=document.getElementsByTagName("LABEL");

// Define a regular expression to match a price inside parenthesis

// For example: ($29) or ($29.54).

// Set up

priceRegex = /$\$(\d*\.{0,1}\d+)$/;

// Loop through all the labels, looking for labels corresponding to

// answers that have a price in them.

var i;

var total = 0;

for( i=0; i<labels.length;i++ )

{

var myArray; // Define array used for regex matching

var inputID; // Define field element

// Get the ID of the field corresponding to the label using the

// "htmlFor" attribute

// (FYI, there are some labels that will have to be screened out

// because they don't correspond to an answer)

// Does the label start with "answer"?

// If not: exit.

if (!answerRegex.test(labels[i].htmlFor)) { continue; }

// First make sure this element exists

// If it doesn't, go to the next element

// If it does, it will be defined in inputID

if (! (inputID = document.getElementById(labels[i].htmlFor)) ) { continue; }

// See if the corresponding answer is a checkbox that is checked.

// If not, go to next label

if (inputID.type.toUpperCase()!='CHECKBOX') { continue; }

if (!inputID.checked) { continue; }

// This is label for an answer.

// The innerHTML will give us the text of the label

// The price information will be in the form ($XX.XX)

// which in contained in the label text.

// Find a match for a decimal number inside the pattern "($" and ")"

if [[myArray = priceRegex.exec(labels[i].innerHTML]] != null)

{

// Keep a running tally

total += parseFloat(myArray[1]);

}

}

// Update total price on form

document.getElementById("totalPrice").value = "$" + formatCurrency(total);

}

function formatCurrency(num) {

num = isNaN(num) || num <u> '' || num </u> null ? 0.00 : num;

return parseFloat(num).toFixed(2);

}

</script>

</syntaxhighlight>

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

<syntaxhighlight lang="php">Total Cost for selected accessories: <input type="readonly" value="" id="totalPrice" /></syntaxhighlight>

=Focus on the first Input field=

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

<div class="simplebox">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.</div>

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 </head> closing tag:

<syntaxhighlight lang="php">

<script type="text/javascript">

function focusFirst(Event)

{

var i=0;

while(document.forms[0].elements[i].type == "hidden")

{

i++;

}

document.forms[0].elements[i].focus();

return;

}

if(ie)

{ window.attachEvent("onload", focusFirst); }

else

{ document.addEventListener("load", focusFirst, true); }

</script>

</syntaxhighlight>

'''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:

<syntaxhighlight lang="php">

<script type="text/javascript">

var ie = false;

</script>

</syntaxhighlight>

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.

<syntaxhighlight lang="php">

<script type="text/javascript">

jQuery(document).ready(function() {

jQuery(document).bind('keypress', function(e){

if (48 <= e.which && e.which <= 57) {

jQuery('input:radio').each(function() {

var v = jQuery(this).val();

var c = (e.which <u> 48) ? 10 : e.which - 48;

if(v </u> 'Y' || v <u> 'N') {

v = (v </u> 'Y') ? 1 : 2;

}

if(v == c) {

jQuery(this).click();

jQuery('#limesurvey input:submit').click();

}

});

}

})

});

</script>

</syntaxhighlight>

=Math notation in LimeSurvey=
#download the js file from [http://mathcs.chapman.edu/~jipsen/mathml/asciimathdownload.html AsciiMath script]
#copy it in the /scripts/ folder in your installation
#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:

<syntaxhighlight lang="php">

<script type="text/javascript" src="ASCIIMathML.js">

</syntaxhighlight>

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 [http://www.imathas.com/editordemo/demo.html link for a TinyMCE with math support].

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

<div class="simplebox">As of version 2.06 this workaround is not required. It can be handled with subquestion relevance.</div>

''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:'''
*[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|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.<syntaxhighlight lang="javascript">function filterArrByCol(qMultiOpt, qArray, prevPage) {

// If filter question is on a previous page, hide Q1 and check all "visible" boxes
if(prevPage == 1) {
$('#question'+qMultiOpt+' li[id^="javatbd"]:visible input.checkbox').attr('checked', true);
$('#question'+qMultiOpt+'').hide();
}

// Assign classes to the answer cells
$('#question'+qArray+' td.answer-item').each(function(i){
var classArr = $(this).attr('class').split('answer_cell_00');
classArr = classArr[1].split(' ');
var ansCode = classArr[0];
$(this).addClass('ans-'+ansCode+' filtered');
});

// Assign classes to the answer label cells
$('#question'+qArray+' table.subquestions-list tbody tr:eq(0) td.answer-item').each(function(i){
var classArr2 = $(this).attr('class').split(' ans-');
var ansCode2 = classArr2[1];
$('#question'+qArray+' table.subquestions-list thead tr:eq(0) th:eq('+i+')').addClass('ans-'+ansCode2+'');
});

// Fire the filter function on page load
filterArr(qMultiOpt, qArray);

// Listener on multi-opt checkboxes to fire the filter function
$('#question'+qMultiOpt+' input.checkbox').click(function(){
filterArr(qMultiOpt, qArray);
});

// On submit, clear all hidden radios of array
$('#movenextbtn, #movesubmitbtn').click(function(){
$('#question'+qArray+' td.filtered:hidden').each(function(i){
$('input.radio', this).prop('checked', false);
});
return true;
});
}

function filterArr(qMultiOpt, qArray) {

if($('#question'+qMultiOpt+' input.checkbox:checked').length < 1) {
// Hide the array if no multi-opt options are checked
$('#question'+qArray+'').hide();
}
else {
$('#question'+qArray+'').show();

// Hide all columns of array
$('#question'+qArray+' table.subquestions-list tbody td.answer-item, #question'+qArray+' table.question thead th').hide();

// Loop through multi-opt checkboxes and, if checked, show corresponding column of array
$('#question'+qMultiOpt+' input.checkbox').each(function(i){
if($(this).prop('checked') == true) {
var classArr3 = $(this).attr('id').split('X'+qMultiOpt);
var ansCode3 = classArr3[1];
$('#question'+qArray+' .ans-'+ansCode3+'').show();
}
});
}
}</syntaxhighlight>

*If using LimeSurvey version 2.0 or older, place the following functions in your template.js file. These will be accessed by either method.<syntaxhighlight lang="javascript">
$(document).ready(function() {

function filterArrByCol(qMultiOpt, qArray, prevPage) {

// If filter question is on a previous page, hide Q1 and check all "visible" boxes
if(prevPage == 1) {
$('#question'+qMultiOpt+' li[id^="javatbd"]:visible input.checkbox').attr('checked', true);
$('#question'+qMultiOpt+'').hide();
}

// Assign classes to the answer cells
$('#question'+qArray+' table.question tbody td').each(function(i){
var classArr = $(this).attr('class').split('answer_cell_00');
var ansCode = classArr[1];
$(this).addClass('ans-'+ansCode+' filtered');
});

// Assign classes to the answer label cells
$('#question'+qArray+' table.question tbody tr:eq(0) td').each(function(i){
var classArr2 = $(this).attr('class').split(' ans-');
var ansCode2 = classArr2[1];
$('#question'+qArray+' table.question thead tr:eq(0) th:eq('+i+')').addClass('ans-'+ansCode2+'');
});

// Fire the filter function on page load
filterArr(qMultiOpt, qArray);

// Listener on multi-opt checkboxes to fire the filter function
$('#question'+qMultiOpt+' input.checkbox').click(function(){
filterArr(qMultiOpt, qArray);
});

// On submit, clear all hidden radios of array
$('#movenextbtn, #movesubmitbtn').click(function(){
$('#question'+qArray+' td.filtered:hidden').each(function(i){
$('input.radio', this).attr('checked', false);
});
return true;
});
}

function filterArr(qMultiOpt, qArray) {

if($('#question'+qMultiOpt+' input.checkbox:checked').length < 1) {
// Hide the array if no multi-opt options are checked
$('#question'+qArray+'').hide();
}
else {
$('#question'+qArray+'').show();

// Hide all columns of array
$('#question'+qArray+' table.question tbody td, #question'+qArray+' table.question thead th').hide();

// Loop through multi-opt checkboxes and, if checked, show corresponding column of array
$('#question'+qMultiOpt+' input.checkbox').each(function(i){
if($(this).attr('checked') == true) {
var classArr3 = $(this).attr('id').split('X'+qMultiOpt);
var ansCode3 = classArr3[1];
$('#question'+qArray+' .ans-'+ansCode3+'').show();
}
});
}
}
});</syntaxhighlight>

'''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).<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
filterArrByCol(MM, AA);
});
</script></syntaxhighlight>

'''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.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
filterArrByCol(MM, AA, 1);
});
</script></syntaxhighlight>

=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 [http://plugins.jquery.com/project/autotab 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.

Implementation is as follows:
#Visit [http://plugins.jquery.com/autotabs http://plugins.jquery.com/autotabs], download the plugin script and save it as ''jquery.autotab-1.1b.js'' in the template folder.
#Link to the script by placing ''<script type="text/javascript" src="{TEMPLATEURL}jquery.autotab-1.1b.js"></script>'' within the ''<head>'' tag of startpage.pstpl.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#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)
#Define a Maximum characters attribute for all questions that the autotab is applied to.
{{QS:maximum_chars}}
#In the source of the first question of the group that contains the auto-tabbed questions, add the following code.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answerSSSSSXGGXAA').focus(); //initially focus on the first input

$('#answerSSSSSXGGXAA').autotab({ target: 'answerSSSSSXGGXBB' });

$('#answerSSSSSXGGXBB').autotab({ previous: 'answerSSSSSXGGXAA', target: 'answerSSSSSXGGXCC' });

$('#answerSSSSSXGGXCC').autotab({ previous: 'answerSSSSSXGGXBB', target: 'answerSSSSSXGGXDD' });

$('#answerSSSSSXGGXDD').autotab({ previous: 'answerSSSSSXGGXCC' });

});

</script></syntaxhighlight>

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

[[File:ids_343x252.gif]]

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 [[Workarounds#Reverse_array_filter|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 [http://docs.jquery.com/Events/change 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.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#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

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answer11111X22X33').change(function() {

if ( $('#answer11111X22X33').val() > 10 ) {
alert ("That's an awful lot. Are you sure?");
}
});
});
</script></syntaxhighlight>

=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 [http://plugins.jquery.com/project/meioMask 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/ http://www.meiocodigo.com/projects/meiomask/] for more details on features and options.

There is a small demo [http://www.partnersinc.biz/surveys//index.php?sid=36146&newtest=Y&lang=en here].

Implementation for this demo was as follows:
#Visit [http://www.meiocodigo.com/projects/meiomask/ http://www.meiocodigo.com/projects/meiomask/], download the latest plugin script and save it as jquery.meiomask.js in the template folder.
#Link to the script by placing <script type="text/javascript" src="{TEMPLATEURL}jquery.meiomask.js" charset="utf-8"></script> within the <head> tag of startpage.pstpl.
#Turn off $filterxsshtml to allow insertion of JavaScript in the questions. ([http://docs.limesurvey.org/tiki-index.php?page=Optional+settings&structure=English+Instructions+for+LimeSurvey#Filtering_dangerous_HTML_tags_in_survey_objects See documentation here])
#Create the text input questions that the masks are to be applied to
#In the source of the help section of the first question of the group that contains the masked inputs, add the following code. ([http://docs.limesurvey.org/tiki-index.php?page=Workarounds&structure=English+Instructions+for+LimeSurvey#How_to_use_Script_eg._JavaScript_etc._ See How to use script here])

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Define custom masks
$.mask.masks = $.extend($.mask.masks,{
customMask1:{ mask: 'a9a 9a9' }, // Canadian postal code
// Maximum input of 9,999.99, reverse input, default value of 0.00
customMask2:{ mask: '99.999,9', type : 'reverse', defaultValue : '000' }
});

// Set the 'alt' attributes of the inputs
$('#answer111111X22XAA').attr('alt', 'phone-us'); // a pre-defined mask
$('#answer111111X22XBB').attr('alt', 'customMask1'); // a custom mask
$('#answer111111X22XCC').attr('alt', 'customMask2'); // a custom mask
$('#answer111111X22XDD').attr('alt', 'cc'); // a pre-defined mask for credit card

// Tell the plugin to apply masks to these inputs
$('input:#answer111111X22XAA').setMask();
$('input:#answer111111X22XBB').setMask();
$('input:#answer111111X22XCC').setMask();
$('input:#answer111111X22XDD').setMask();
});
</script>
</syntaxhighlight>

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 [http://www.meiocodigo.com/projects/meiomask/#mm_options 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

[[File:Ids 343x252.gif]]

=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/ http://digitalbush.com/projects/masked-input-plugin/] for more details on features and options.

Implementation as follows:

#Visit [http://digitalbush.com/projects/masked-input-plugin/ http://digitalbush.com/projects/masked-input-plugin/], download the latest plugin script and save it as jquery.maskedinput.js in the template folder.
#Link to the script by placing <script type="text/javascript" src="{TEMPLATEURL}jquery.maskedinput.js" charset="utf-8"></script> within the <head> tag of startpage.pstpl.
#Turn off $filterxsshtml to allow insertion of JavaScript in the questions. ([http://docs.limesurvey.org/tiki-index.php?page=Optional+settings&structure=English+Instructions+for+LimeSurvey#Filtering_dangerous_HTML_tags_in_survey_objects See documentation here])
#Create the text input questions that the masks are to be applied to
#In the source of the help section of the first question of the group that contains the masked inputs, add the following code. ([http://docs.limesurvey.org/tiki-index.php?page=Workarounds&structure=English+Instructions+for+LimeSurvey#How_to_use_Script_eg._JavaScript_etc._ See How to use script here])

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function($) {
$("#answer55431X1X5").mask("999-99-9999",{ placeholder:"#" });
});
</script>
</syntaxhighlight>

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.
<br /><br />
'''DOWNLOAD:'''<br />
- [[Media:Demo_Random_Option_From_Multi-Choice_v206.1.zip|Demo survey for LS 2.06]]<br />
- [[Media:Demo_Random_Option_From_Multi-Choice_v25.1.zip|Demo survey for LS 2.5]]<br />
<br />
'''IMPLEMENTATION''' (LimeSurvey version 2.06)<br />

#[https://manual.limesurvey.org/Workarounds:_Manipulating_a_survey_at_runtime_using_Javascript#How_to_use_Script_.28eg._JavaScript_etc..29_in_LimeSurvey.3F Set up your survey to use JavaScript].
#Create a "Multiple options" question
#Immediately following that question, create a short-text question to store the label of the checked box in (we'll hide this with JavaScript)
#Place the script below in the source of the multiple options question. <syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// Identify the questions
var thisQuestion = $('#question{QID}');
var qHidden = thisQuestion.nextAll('.text-short:eq(0)');
var hiddenInput = $('input.text', qHidden);

// Hide qHidden
qHidden.hide();

// Listener on the checkboxes
$('input.checkbox', thisQuestion).on('change', function(e) {
handleChecked();
});

// Listener on the "Other" input
$('input.text', thisQuestion).on('keyup change', function(e) {
setTimeout(function() {
handleChecked();
}, 250);
});

function handleChecked() {
// Build an array of checked answers
var checkedAnswers = [];
$('input.checkbox:checked', thisQuestion).each(function(i) {
if($(this).closest('.answer-item').hasClass('other-item')) {
checkedAnswers.push($(this).closest('.other-item').find('input.text').val());
}
else {
checkedAnswers.push($(this).nextAll('label:eq(0)').text());
}
});

// Load the hidden question with a random item from the array
var checkedLength = checkedAnswers.length;
$(hiddenInput).val(checkedAnswers[Math.floor(Math.random()*checkedLength)]);

// Fire ExpressionScript
checkconditions(hiddenInput.value, hiddenInput.name, hiddenInput.type);
}
});
</script></syntaxhighlight>
<br />
'''IMPLEMENTATION''' (LimeSurvey version 2.5)

#Follow the first 3 implementation steps above
#Place the script below in the source of the multiple options question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// Identify the questions
var thisQuestion = $('#question{QID}');
var qHidden = thisQuestion.nextAll('.text-short:eq(0)');
var hiddenInput = $('input.text', qHidden);

// Hide qHidden
qHidden.hide();

// Class for "Other
$('input.text', thisQuestion).closest('.answer-item').addClass('other-item');

// Listener on the checkboxes
$('input.checkbox', thisQuestion).on('change', function(e) {
handleChecked();
});

// Listener on the "Other" input
$('input.text', thisQuestion).on('keyup change', function(e) {
setTimeout(function() {
handleChecked();
}, 250);
});

function handleChecked() {
// Build an array of checked answers
var checkedAnswers = [];
$('input.checkbox:checked', thisQuestion).each(function(i) {
if($(this).closest('.answer-item').hasClass('other-item')) {
checkedAnswers.push($(this).closest('.answer-item').find('input.text').val());
}
else {
checkedAnswers.push($.trim($(this).nextAll('.label-text:eq(0)').text()));
}
});

// Load the hidden question with a random item from the array
var checkedLength = checkedAnswers.length;
$(hiddenInput).val(checkedAnswers[Math.floor(Math.random()*checkedLength)]);

// Fire ExpressionScript
checkconditions(hiddenInput.value, hiddenInput.name, hiddenInput.type);
}
});
</script></syntaxhighlight>

=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:<br />
[[File:Secondary_options_1.png]]

Primary option selected:<br />
[[File:Secondary_options_2.png]]<br /><br />

'''DOWNLOADS:'''<br />
- [[Media:Demo_Secondary_Checkboxes.zip|Demo template for LS version 2.06]]<br />
- [[Media:Demo_Secondary_Checkboxes.lss|Demo survey for LS version 2.06]].<br />
- [[Media:Template_Demo_Secondary_Checkboxes_For_2.5.zip|Demo template for LS version 2.5]]<br />
- [[Media:Survey_Demo_Secondary_Multiple_Options_For_LS_25.zip|Demo survey for LS version 2.5]].<br /><br />

==LimeSurvey version 2.06==

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create a "Multiple options" question including both the primary and secondary subquestions (in the order that you would like them displayed if all shown).
#Add the following function to the end of template.js:<syntaxhighlight lang="javascript">
// A function to handle "secondary" checkboxes
function secondaryCheckboxes(qID, primaryPosition, secondaryCount) {
// Identify the elements
var thisQuestion = $('#question'+qID);
var primaryRow = $('li.question-item:eq('+(primaryPosition-1)+')', thisQuestion);
var primaryInput = $('input.checkbox', primaryRow);
var secondaryRows = primaryRow.nextAll('li.question-item:lt('+(secondaryCount)+')');
var secondaryInputs = $('input.checkbox', secondaryRows);

// Indent the secondaries
secondaryRows.css({ 'margin-left':'2.5em' });

// Initial states of the secondary answers
if (primaryInput.prop('checked') == false ) {
secondaryRows.hide();
}

// A listener on the primary answer to show or hide secondary answers
primaryInput.click(function (event) {

// Hide/show the secondary answers accordingly
if (!$(this).is(':checked')) {
secondaryRows.hide();
secondaryInputs.prop('checked', false);
secondaryInputs.each(function(i) {
checkconditions(this.value, this.name, this.type);
});
}
else {
secondaryRows.show();
}
});
}</syntaxhighlight>
#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. <br />So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Sub-question 1 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 1, 2);
// Sub-question 6 is primary followed by 3 secondaries
secondaryCheckboxes({QID}, 6, 3);
});
</script></syntaxhighlight>

==LimeSurvey version 2.5==

#Follow the first 2 implementation steps above
#Add the following function to the end of template.js:<syntaxhighlight lang="javascript">
// A function to handle "secondary" checkboxes
function secondaryCheckboxes(qID, primaryPosition, secondaryCount) {
// Identify the elements
var thisQuestion = $('#question'+qID);
$('div.question-item', thisQuestion).parent().addClass('answer-row');
var primaryRow = $('div.question-item:eq('+(primaryPosition-1)+')', thisQuestion).closest('.answer-row');
var primaryInput = $('input.checkbox', primaryRow);
var secondaryRows = primaryRow.nextAll('div.answer-row:lt('+(secondaryCount)+')');
var secondaryInputs = $('input.checkbox', secondaryRows);

// Indent the secondaries
secondaryRows.css({ 'margin-left':'2.5em' });

// Initial states of the secondary answers
if (primaryInput.prop('checked') == false ) {
secondaryRows.hide();
}

// A listener on the primary answer to show or hide secondary answers
primaryInput.click(function (event) {

// Hide/show the secondary answers accordingly
if (!$(this).is(':checked')) {
secondaryRows.hide();
secondaryInputs.prop('checked', false);
secondaryInputs.each(function(i) {
checkconditions(this.value, this.name, this.type);
});
}
else {
secondaryRows.show();
}
});
}</syntaxhighlight>
#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. <br />So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Sub-question 1 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 1, 2);
// Sub-question 6 is primary followed by 3 secondaries
secondaryCheckboxes({QID}, 6, 3);
});
</script></syntaxhighlight>

==LimeSurvey version 3.x==

#Follow the first 2 implementation steps above
#Add the following function to the end of custom.js:<syntaxhighlight lang="javascript">
// A function to handle "secondary" checkboxes
function secondaryCheckboxes(qID, primaryPosition, secondaryCount) {
// Identify the elements
var thisQuestion = $('#question'+qID);
var primaryRow = $('li.question-item:eq('+(primaryPosition-1)+')', thisQuestion).closest('li.question-item');
var primaryInput = $('input:checkbox', primaryRow);
var secondaryRows = primaryRow.nextAll('li.question-item:lt('+(secondaryCount)+')');
var secondaryInputs = $('input:checkbox', secondaryRows);

// Indent the secondaries
secondaryRows.css({ 'margin-left':'2.5em' });

// Initial states of the secondary answers
if (primaryInput.prop('checked') == false ) {
secondaryRows.hide();
}

// A listener on the primary answer to show or hide secondary answers
primaryInput.on('change', function (event) {

// Hide/show the secondary answers accordingly
if (!$(this).is(':checked')) {
secondaryRows.hide();
secondaryInputs.prop('checked', false).trigger('change');
}
else {
secondaryRows.show();
}
});
}</syntaxhighlight>
#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. <br />So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Sub-question 1 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 1, 2);
// Sub-question 6 is primary followed by 3 secondaries
secondaryCheckboxes({QID}, 6, 3);
});
</script></syntaxhighlight>

=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.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#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.

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

minTime(TT);

function minTime(minTime) {

var startTime = new Date();

$('#movenextbtn, #movesubmitbtn').click(function(){

var endTime = new Date();

if((endTime - startTime)/1000 <= minTime) {
alert ('You must spend at least '+minTime+' seconds on the question.');
return false;
}
else {
return true;
}
});
}
});
</script>
</syntaxhighlight>

=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''

<div class="simplebox">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.</div>

<div class="simplebox">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.</div>

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.

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].

#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.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

minChar(QQ, CC);

function minChar(qID, minChars) {

$('#movenextbtn, #movesubmitbtn').click(function(){

if($('#question'+qID+' textarea').val().replace(/ /g,'').length < minChars) {

alert ('You must enter at least '+minChars+' characters.');

return false;

}

else {

return true;

}

});

}

});

</script></syntaxhighlight>

=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.

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:

#Set up your survey to use JavaScript (See instructions [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|here]])

#Add the following script to your ''template.js'' file.

#Replace "QQ" in the function call at the end with the question ID.

#Create one or more Array (Multi Flexible Text) questions

#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);...)

<syntaxhighlight lang="javascript">$(document).ready(function() {

// A function to add or remove rows of an Array (Multi Flexible)(Text) question
function varLengthArray(qID) {

if ($('#question'+qID+'').length > 0) {

// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+]';
var removeContent = '[-]';

// Create the Add and Remove elements & insert them
var el1 = document.createElement('div');
el1.setAttribute('id','addButton'+qID);
document.body.appendChild(el1);
var el2 = document.createElement('div');
el2.setAttribute('id','removeButton'+qID);
document.body.appendChild(el2);

// Move them to after the array
$( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.question' ).parent());
$( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.question' ).parent());

// Insert their HTML
$( 'div#addButton'+qID ).html( addContent );
$( 'div#removeButton'+qID ).html( removeContent );

// Style the elements - you can modify here if you wish
$( 'div#addButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

$( 'div#removeButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

// Initially hide the Remove element
$( 'div#removeButton'+qID ).hide();

// Call the functions below when clicked
$( 'div#addButton'+qID ).click(function (event) {
addRow(qID);
});
$( 'div#removeButton'+qID ).click(function (event) {
removeRow(qID);
});

// Function to add a row, also shows the Remove element and hides the
//Add element if all rows are shown
function addRow(qID) {
var arrayRow = '#question' + qID + ' table.question tbody';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' ) {
$( 'div#addButton'+qID ).hide();
}
}

// Function to remove a row, also clears the contents of the removed row,
// shows the Add element if the last row is hidden and hides the Remove
// element if only the first row is shown
function removeRow(qID) {
var arrayRow = '#question' + qID + ' table.question tbody';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
$( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
$( 'div#addButton'+qID ).show();
if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' ) {
$( 'div#removeButton'+qID ).hide();
}
}

// Just some initialization stuff
var arrayRow = '#question' + qID + ' table.question tbody';
var rowCount = '';

// Initially hide all except first row or any rows with populated inputs
$( arrayRow ).each(function(i) {
if ( i > 0 ) {
// We also need to give the hidden rows a name cause IE doesn't
// recognize jQuery :visible selector consistently
$( this ).attr('name', 'hidden').hide();

$('input[type=text]', this).each(function(i) {
if ($(this).attr('value') != '') {
$(this).parents('tbody:eq(0)').attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
}
});
rowCount = i;
}
});
}
}

// Call the function with a question ID
varLengthArray(QQ);

});</syntaxhighlight>

''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.

<syntaxhighlight lang="javascript">$(document).ready(function() {

// A function to add or remove rows of an Array (Multi Flexible)(Text) question
function varLengthArray(qID) {

if ($('#question'+qID+'').length > 0) {

// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+]';
var removeContent = '[-]';

// Create the Add and Remove elements & insert them
var el1 = document.createElement('div');
el1.setAttribute('id','addButton'+qID);
document.body.appendChild(el1);
var el2 = document.createElement('div');
el2.setAttribute('id','removeButton'+qID);
document.body.appendChild(el2);

// Move them to after the array
$( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());
$( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());

// Insert their HTML
$( 'div#addButton'+qID ).html( addContent );
$( 'div#removeButton'+qID ).html( removeContent );

// Style the elements - you can modify here if you wish
$( 'div#addButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

$( 'div#removeButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

// Initially hide the Remove element
$( 'div#removeButton'+qID ).hide();

// Call the functions below when clicked
$( 'div#addButton'+qID ).click(function (event) {
addRow(qID);
});
$( 'div#removeButton'+qID ).click(function (event) {
removeRow(qID);
});

// Function to add a row, also shows the Remove element and hides the
//Add element if all rows are shown
function addRow(qID) {
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' ) {
$( 'div#addButton'+qID ).hide();
}
}

// Function to remove a row, also clears the contents of the removed row,
// shows the Add element if the last row is hidden and hides the Remove
// element if only the first row is shown
function removeRow(qID) {
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
$( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
$( 'div#addButton'+qID ).show();
if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' ) {
$( 'div#removeButton'+qID ).hide();
}
}

// Just some initialization stuff
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = '';

// Initially hide all except first row or any rows with populated inputs
$( arrayRow ).each(function(i) {
if ( i > 0 ) {
// We also need to give the hidden rows a name cause IE doesn't
// recognize jQuery :visible selector consistently
$( this ).attr('name', 'hidden').hide();

$('input[type=text]', this).each(function(i) {
if ($(this).attr('value') != '') {
$(this).parents('tbody:eq(0)').attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
}
});
rowCount = i;
}
});
}
}

// Call the function with a question ID
varLengthArray(QQ);

});</syntaxhighlight>

=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.

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:
#Set up your survey to use JavaScript. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|documentation here]])
#Create one or more Array questions
#In the source of the first array question add the following script.
#Replace "QQ" in the function call at the end of the script with the question ID of the array you would like to manipulate.
#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);...)

<syntaxhighlight lang="javascript">
<script type="text/javascript">

$(document).ready(function() {

// A function to show subsequent rows of an array as options are checked
function expandingArray(qID) {

// Build an array of the question rows
var arrayRow = '#question' + qID + ' table.question tbody tr';

// Initially hide all rows unless an input was previously checked
$( arrayRow ).each(function(i) {

if ( $( arrayRow + ':eq(' + i + ') input.radio:checked' ).length != 0 ) {
$(this).attr('name', 'clickedRow');
}
else {
$(this).attr('name', 'hidden').hide();
}
});

// Now show the first hidden row
addRow();

// Add another row when an option is checked for the first time
$( '#question' + qID + ' td.answer input.radio' ).click(function (event) {

if ($(this).parents('tr:eq(0)').attr('name') != 'clickedRow') {
addRow();
$(this).parents('tr:eq(0)').attr('name', 'clickedRow');
}

// The original function of the click event
checkconditions(this.value, this.name, this.type);
});

// Add another row when an table cell is clicked for the first time
$( '#question' + qID + ' table.question tbody td' ).click(function (event) {

if ($(this).parents('tr:eq(0)').attr('name') != 'clickedRow') {
addRow();
$(this).parents('tr:eq(0)').attr('name', 'clickedRow');
}
});

// Function to add a row
function addRow() {
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
// Now, scroll down
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
}
}

// Call the function with a question ID
expandingArray(QQ);

});
</script></syntaxhighlight>

=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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create an Array type question.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedCode" value as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// The subquestion code to place in the last position
var fixedCode = 'A1';

// Identify this question
var q1ID = {QID};
var thisQuestion = $('#question'+q1ID);

// Move the "fixed" row to the end
$('table.subquestion-list tbody', thisQuestion).append($('tr[id$="X'+q1ID+fixedCode+'"]'));

// Fix up the array row background colours
$('tr.answers-list', thisQuestion).each(function(i){
$(this).removeClass('array1 array2').addClass('array'+(2-(i%2)));
});

});
</script></syntaxhighlight>

'''Download sample survey:'''<br />
[[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:

[[File:random_336x179gif.gif]]

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)

[[File:Partially_Randomized_Answers_1.png]]

Implementation is as follows:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' li.answer-item').length;

// Place the last answer created at the end of the list
var answer = $( 'input[id$="X'+qID+ansCount+'"]');
var answerItem = $(answer).closest('li');
var answersList = $(answer).closest('ul');
$(answersList).append(answerItem);

});
</script></syntaxhighlight>

'''Download sample survey:'''<br />
[[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:

[[File:Random v2.50.png]]

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)

[[File:Random answers v2.50.png]]

==LimeSurvey version 2.06==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedAnswers" and "otherFixed" variables as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// The number of answers to be fixed at the end of the list
var fixedAnswers = 2;

// Set this to "true" if you want "Other" to be fixed in the last position
var otherFixed = false;

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' li.answer-item').length;
if($('#question'+qID+' input[type="text"]').length > 0) {
ansCount = ansCount -1
}

// Place the last n answers created at the end of the list
var fixedIndex = fixedAnswers - 1;
for (var i=0; i<fixedAnswers; i++) {
var answer = $( 'input[id$="X'+qID+(ansCount-fixedIndex)+'"]');
var answerItem = $(answer).closest('li');
var answersList = $(answer).closest('ul');
$(answersList).append(answerItem);
fixedIndex--;
}

// Handle "Other"
if(otherFixed == true && $('#question'+qID+' input[type="text"]').length > 0) {
var otherAnswer = $('#question'+qID+' input[type="text"]');
var otherAnswerItem = $(otherAnswer ).closest('li');
var otherAnswersList = $(otherAnswer ).closest('ul');
$(otherAnswersList).append(otherAnswerItem);
}
});
</script></syntaxhighlight>

<br /><br />
==LimeSurvey version 2.73.0:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedAnswers" and "otherFixed" variables as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// The number of answers to be fixed at the end of the list
var fixedAnswers = 2;

// Set this to "true" if you want "Other" to be fixed in the last position
var otherFixed = false;

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' .answer-item').length;
if($('#question'+qID+' input[type="text"]').length > 0) {
ansCount = ansCount -1
}

// Place the last n answers created at the end of the list
var fixedIndex = fixedAnswers - 1;
for (var i=0; i<fixedAnswers; i++) {
var answer = $('input[id^="answer"][id$="X'+qID+'s'+(ansCount-fixedIndex)+'"]');
var answerItem = $(answer).closest('.answer-item');
var answersList = $(answer).closest('.answers-list');
if($('#question'+qID).hasClass('multiple-opt')) {
answer = $('input[id^="answer"][id$="X'+qID+(ansCount-fixedIndex)+'"]');
answerItem = $(answer).closest('.answer-item').parent();
answersList = $(answer).closest('.subquestion-list');
}
$(answersList).append(answerItem);
fixedIndex--;
}

// Handle "Other"
if(otherFixed == true && $('#question'+qID+' input[type="text"]').length > 0) {
var otherAnswer = $('#question'+qID+' input[type="text"]');
var otherAnswerItem = $(otherAnswer ).closest('.answer-item');
var otherAnswersList = $(otherAnswer ).closest('.answers-list');
if($('#question'+qID).hasClass('multiple-opt')) {
otherAnswerItem = $(otherAnswer ).closest('.answer-item').parent();
otherAnswersList = $(otherAnswer ).closest('.subquestion-list');
}
$(otherAnswersList).append(otherAnswerItem);
}
});
</script></syntaxhighlight>

<br /><br />
==LimeSurvey version 3.x:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedAnswers" and "otherFixed" variables as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).on('ready pjax:scriptcomplete',function(){

// The number of answers to be fixed at the end of the list
var fixedAnswers = 2;

// Set this to "true" if you want "Other" to be fixed in the last position
var otherFixed = false;

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' .answer-item').length;
if($('#question'+qID+' input[type="text"]').length > 0) {
ansCount = ansCount -1
}
console.log(ansCount);

// Place the last n answers created at the end of the list
var fixedIndex = fixedAnswers - 1;
for (var i=0; i<fixedAnswers; i++) {
var answer = $('input[id^="answer"][id$="X'+qID+(ansCount-fixedIndex)+'"]');
var answerItem = $(answer).closest('.answer-item');
var answersList = $(answer).closest('ul');
$(answersList).append(answerItem);
fixedIndex--;
}

// Handle "Other"
if(otherFixed == true && $('#question'+qID+' input[type="text"]').length > 0) {
var otherAnswer = $('#question'+qID+' input[type="text"]');
var otherAnswerItem = $(otherAnswer ).closest('.answer-item');
var otherAnswersList = $(otherAnswer ).closest('ul');
$(otherAnswersList).append(otherAnswerItem);
}
});
</script></syntaxhighlight>

=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 [http://www.partnersinc.biz/surveys//index.php?sid=89344&newtest=Y&lang=en here].

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

[[File:random_700x154.png]]

Implementation is as follows:
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])
#Create one or more List (dropdown) questions with sequential response codes. Set the [[Advanced question settings#random order|random_order question attribute]] to 1.
#In the source of the first question add the following onload function. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]])
#Replace the ID question at the end of the function call.

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Function to allow randomization of all answers
//except the last one in List/dropdown questions
function partRandDD(qID) {

// Find the last answer option
var ansCount = $( 'div#question' + qID + ' select option' ).length - 1;

// Place the last answer option at the end of the list
$( 'div#question' + qID + ' select option[value="' + ansCount + '"]' )
.appendTo($( 'div#question' + qID + ' select' ));
}

// Call the function with the qID (replace the qID eg. partRandDD(244))
partRandDD(qID);
//If you want to apply it to more questions on the same page simply add more calls with the appropriate IDs.
partRandDD(qID);
});
</script></syntaxhighlight>

=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)

[[File:random_700x154.png]]

Implementation is as follows:
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])
#Create one or more Multiple numerical input question with sequential response codes. Set the [[Advanced question settings#random order|random_order question attribute]] to 1.
#In the source of the first question add the following onload function. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]])
#Replace "SSSSS", "GG", "QQ" in the function call at the end with the survey ID, group ID and question ID respectively.
#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); ...)

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Function to allow randomization of all answers except the last one in multiple numeric input questions
function partRand(sID, gID, qID) {

// Find the number of answers
var ansCount = ''
$( 'div#question' + qID + ' div.answers li' ).each(function(i) {
ansCount = (i - 1);
});

// Place the last answer created at the end of the list - but before the first helping sum
$( 'li#javatbd' + sID + 'X' + gID + 'X' + qID + ansCount + '' ).insertBefore($( 'div#question' + qID + ' div.answers li.multiplenumerichelp' ).first());

}

// Call the function with the SID, GID and QID
partRand(SID, GID, QID);

});

</script></syntaxhighlight>

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 (<nowiki><ul></nowiki>) 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=

{{Hint|Text=With Expression manager, you can use [[Expression_Manager_Examples#Using_em_validation_q_in_array|Using em_validation_q in array]] system.}}

''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 [http://www.partnersinc.biz/surveys//index.php?sid=26842&newtest=Y&lang=en 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:
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions (see [[Optional settings#Security|documentation here]]).
#Create the array question.
#In the source of the array question add the following script (see [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]]).
#Modify the warningText (line10)as required.
#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.

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function () {

// Interrupt the submit function
$('form#limesurvey').submit(function () {

// Override the built-in "disable navigation buttons" feature
$('#moveprevbtn, #movenextbtn, #movesubmitbtn').attr('disabled', '');

var empty = 0;
var warningText = 'Please complete the highlighted inputs.';

// Call the mandatory row function with question IDs and row numbers
mandatoryRow(QQ, 1);
mandatoryRow(QQ, 3);

// A function to render rows of an array mandatory
function mandatoryRow(qID, rowNum) {

$('div#question' + qID + ' table.question tbody[id^="javatbd"]:eq(' + Number(rowNum - 1) + ') input[type="text"]').each(function (i) {

if ($(this).val() == '') {
$(this).css('background-color', 'pink');
empty = 1;
}
else {
$(this).css('background-color', '#FFFFFF');
}
});
}

if (empty == 1) {
alert(warningText);
return false;
}
else {
return true;
}
});

});

</script></syntaxhighlight>

=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|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:

<syntaxhighlight lang="javascript">

Please have a look at this picture:

<br />

<script>

$(document).ready(

function(){

// Find a random number (here between 1 and 4)

var randNumber = Math.floor(Math.random()*4 + 1);

// Save the number as answer of this question

$('input#answerSSSSSXGGXQQ').val(randNumber);

// Hide this answer field

document.getElementById("answerSSSSSXGGXQQ").style.display='none';

// Show the picture

picString = '<img src="pic/' + String(randNumber) + '.jpg">';

document.getElementById('pic').innerHTML = picString;

}

);</script>

<p>

</p>

<div id="pic">

</div>

</syntaxhighlight>

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):

<syntaxhighlight lang="javascript">

You saw picture number {INSERTANS:SSSSSXGGXQQ}.

</syntaxhighlight>

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:

<syntaxhighlight lang="javascript">

Here you see the picture again: <br>

<script>

$(document).ready(

function(){

// Get the picture number from previous question

var randNumber = "{INSERTANS:SSSSSXGGXQQ}";

// Show picture

picString = '<img width="100" height="100" src="pic/' + String(randNumber) + '.jpg">';

document.getElementById('pic').innerHTML = picString;

}

);</script>

<div id="pic">

</div>

</syntaxhighlight>

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

''Tested in 1.85+''

<div class="simplebox">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.</div>

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:

<syntaxhighlight lang="javascript">

<script type="text/javascript" charset="utf-8">

function Custom_On_Load(){

document.getElementById('answer1000X10X11').value='{TOKEN:ATTRIBUTE_1}';

document.getElementById('answer1000X10X11').readOnly=1;

}

</script>

</syntaxhighlight>

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:

<syntaxhighlight lang="javascript">

document.getElementById('question85').style.display='none';

document.getElementById('display85').value='';

</syntaxhighlight>

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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use script]].
#Create the array question.
#In the source of the array question add the following script.
#Replace"QQ" with the question ID and "CC" with the column number to be checked.

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// A function to pre-check a column of an array
function checkedDefault(qID, column) {
var checkedCol = column - 1;
$('#question'+qID+' tr.subquestions-list').each(function(i) {
if ($('input.checkbox:checked', this).length == 0) {
$('input.checkbox:eq('+checkedCol+')', this).prop('checked', true);
$('input.checkbox:eq('+checkedCol+')', this).parent().find('input[type="hidden"]').val(1);
}
});
}
// Call the function with a question ID and column number
checkedDefault(QQ, CC);
});

</script></syntaxhighlight>

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

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

'''Overview'''<br />
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:'''
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use script]].
#Create the array question.
#In the source of the array question add the following script.
#Adjust "''defaultAnsweredScale''" and "''defaultAnsweredColumn''" as necessary.

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Scale to set the default answer on
var defaultAnsweredScale = 2;
// Column of that scale to set as default answer
var defaultAnsweredColumn = 3;

// Identify this question
var thisQuestion = $('#question{self.qid}');

// Identify the scales and columns
$('.answer-item[class^="answer_cell_1"]', thisQuestion).addClass('scale-1-item');
$('.answer-item[class^="answer_cell_2"]', thisQuestion).addClass('scale-2-item');
$('tr.answers-list', thisQuestion).each(function(i) {
$('.scale-1-item', this).each(function(i) {
$(this).addClass('scale-1-column-'+(i+1)+'-item');
});
$('.scale-2-item', this).each(function(i) {
$(this).addClass('scale-2-column-'+(i+1)+'-item');
});
});

// Click the default answers
$('tr.answers-list', thisQuestion).each(function(i) {
if($('.scale-'+defaultAnsweredScale+'-item input[type="radio"]:checked', this).length == 0) {
$('.scale-'+defaultAnsweredScale+'-column-'+defaultAnsweredColumn+'-item input[type="radio"]:last', this).click();
}
});
});
</script></syntaxhighlight>

'''Download sample survey:'''<br />
[[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''

<div class="simplebox">As of version 1.92, group view time is accurately recorded in the timings table if you choose the Record Timings survey option.</div>

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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#In the group, create a short-text question. We will hide this later with JavaScript and populate it with the elapsed time.
#Place the following script in the source of the short-text question.
#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.

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

// call the functions with the hidden timer question ID

runTimer(QQ);

function runTimer(timeQID) {

$('#question'+timeQID).hide();

var initSec = '0';

// Check for elapsed time from previous visits

if ($('#question'+timeQID+' input.text').val()) {

var initTime = $('#question'+timeQID+' input.text').val();

initTimeArr = initTime.split(':');

initSec = Number[[initTimeArr[0]*3600]]+Number[[initTimeArr[1]*60]]+Number(initTimeArr[2]);

}

// Run the timer update function

recordTime(initSec, timeQID);

}

});

// Timer update function

function recordTime(elapsedSec, timeQID){

elapsedSec++;

var h = Math.floor(elapsedSec / 3600);

var m = Math.floor(elapsedSec % 3600 / 60);

var s = Math.floor(elapsedSec % 3600 % 60);

var elapsedTime = [[h > 0 ? h + ":" : "00:") + (m > 0 ? (m < 10 ? "0" : "") + m + ":" : "00:") + (s < 10 ? "0" : "") + s);

$('#question'+timeQID+' input.text').val(elapsedTime);

// Run the timer update function every second

setTimeout('recordTime('+elapsedSec+', '+timeQID+')',1000);

}

</script>

</syntaxhighlight>

=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 [http://www.partnersinc.biz/surveys//index.php?sid=33613&newtest=Y&lang=en demonstrated here].

Implementation is as follows:

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Set the survey to run in "all in one" mode.
#Add your groups and questions.
#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:

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

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

// Insert show/hide divs before all group wrapper divs
$('<div class="groupToggler"><span></span></div>').insertBefore('div[id^="group-"]');

// Add some text to the show/hide divs
$('.groupToggler span').each(function(i) {
($( this ).text('Show/Hide Group '+(i+1)+''));
});

// Add some styles to the show/hide divs
$('.groupToggler').css({
'padding':'5px 0 10px 0',
'text-align':'center'
});
$('.groupToggler span').css({
'text-decoration':'underline',
'cursor':'pointer'
});

// Add some hover effects to the show/hide divs
$(".groupToggler span").hover(
function () {
$(this).css({
'text-decoration':'none',
'font-weight':'bold'
});
},
function () {
$(this).css({
'text-decoration':'underline',
'font-weight':'normal'
});
}
);

// Initially hide all of the groups
// Toggle their visibility when the show/hide is clicked
$('.groupToggler span').click(function() {
$(this).parent().next().toggle();
return false;
}).parent().next().hide();

// Display any groups that have unanswered mandatories
$('.errormandatory').parents('div[id^="group-"]').show();

// Some tidying up
$('h1').next().next().hide();
$('.surveywelcome').css({
'margin-bottom':'10px'
});
$('.surveywelcome').next().hide();
$('.surveywelcome').next().next().hide();

});

</script></syntaxhighlight>

=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 [http://jqueryui.com/demos/autocomplete/ 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

<syntaxhighlight lang="css">/* Autocomplete styles */

ul.ui-autocomplete {
width: 250px !important;
padding: 5px 10px;
list-style: none;
}</syntaxhighlight>

'''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)

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var q1ID = 'QQ';

var states = "Alabama,Alaska,Arizona,Arkansas,California,Colorado,Connecticut,Delaware, District of Columbia,Florida,Georgia,Hawaii,Idaho,Illinois,Indiana,Iowa,Kansas,Kentucky, Louisiana,Maine,Montana,Nebraska,Nevada,New Hampshire,New Jersey,New Mexico,New York, North Carolina,North Dakota,Ohio,Oklahoma,Oregon,Maryland,Massachusetts,Michigan, Minnesota,Mississippi,Missouri,Pennsylvania,Rhode Island,South Carolina,South Dakota, Tennessee,Texas,Utah,Vermont,Virginia,Washington,West Virginia,Wisconsin,Wyoming".split(',');

$('#question'+q1ID+' input.text').autocomplete({
source: states
});

});

</script></syntaxhighlight>

'''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:

<syntaxhighlight lang="php"><?php

$countriesArr = array();

$file_handle = fopen("countries2.csv", "r");

while (!feof($file_handle) ) {
$line_of_text = fgetcsv($file_handle);
array_push($countriesArr, $line_of_text[0]);
}

fclose($file_handle);

echo json_encode($countriesArr);

?></syntaxhighlight>

JavaScript code:

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;
var url = "templates/yourTemplate/countries.php";
var dataArr = [];

$.getJSON(url,function(data){

$.each(data,function(i, item){
dataArr.push(item);
});

$('#question'+qID+' input.text').autocomplete({
source: dataArr
});

});

});

</script></syntaxhighlight>

<br />
== 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:'''
<ol><li>Download the jQuery Autocomplete widget</li>
<li>Add special autocomplete styling to the survey template (tested with the Skeletonquest template by Denis Chenu)</li>
</ol>

This workaround builds on the previous examples, but is updated for use with newer versions of LimeSurvey. Note that the [http://jqueryui.com/demos/autocomplete/ Autocomplete widget] is already included in LimeSurvey, as part of jQuery UI.

<br />
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.

<br />
'''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 [http://jqueryui.com/demos/autocomplete/ jQuery website] for example):

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 1;

$('#question'+qID+' input[type="text"]').autocomplete({
minLength: 2, // This line is optional, signifies number of keystrokes before autocomplete is initiated
source: ["Test1","Test2","Test3"]
});

});

</script>
</syntaxhighlight>

<br />
'''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:
<ol><li>A comma-separated data file (CSV)</li>
<li>The [https://code.google.com/p/jquery-csv/ jquery.csv.js plugin] (v0.71)</li>
</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 <strong>before</strong> {TEMPLATEJS}.

<syntaxhighlight lang="html5">
<script type="text/javascript" src="{TEMPLATEURL}jquery.csv.js"></script>
</syntaxhighlight>

<br />
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 <strong>semicolon</strong>, 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:

<syntaxhighlight lang="javascript">
41 $.csv = {
42 defaults: {
43 separator:',', // Change this to: separator:';',
44 delimiter:'"',
45 headers:true
46 },
</syntaxhighlight>

<br />
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:

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 1;

var surveyRoot = location.pathname.split('index.php')[0];
var url = surveyRoot+'datafile.csv';

// Create an array to hold the data
var testArr = new Array();

// Grab the CSV contents
$.get(url,function(data){

// Convert CSV contents to an array of arrays
fullArray = $.csv.toArrays(data);

// Load the data array
$(fullArray).each(function(i, item){
testArr.push(item[0]);
});

// Initialise the autocomplete plugin
$('#question'+qID+' input.text').autocomplete({
source: testArr
});

// console.log(data); This would be a gould place to put your debugging script. Remember to comment out or remove before going into production, to economize on server workload
});
});

</script>
</syntaxhighlight>

<br />
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 <strong>console.log(data);</strong> 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.

<br />
'''3. Input from a MySQL database (trickiest, but also the most versatile and secure).'''
<br />This method requires the following:
<ol><li>Access to a MySQL database (tested with MySQL 5.5)</li>
<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):
<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 1;

$('#question'+qID+' input[type="text"]').autocomplete({
minLength: 2, // This line is optional, signifies number of keystrokes before autocomplete is initiated
source: 'autocomplete.php'
});

});

</script>
</syntaxhighlight>

<br />
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:

<syntaxhighlight lang="php">
<?php
// Login credentials
define('DB_SERVER', "localhost");
define('DB_USER', "username");
define('DB_PASSWORD', "password");
define('DB_DATABASE', "database_name");
define('DB_DRIVER', "mysql");
?>
</syntaxhighlight>

<br />
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):

<syntaxhighlight lang="php">
<?php

// Connect and query MySQL database, using PDO
try {
$db = new PDO(DB_DRIVER . ":dbname=" . DB_DATABASE . ";host=" . DB_SERVER . ";charset=utf8", DB_USER, DB_PASSWORD);
}

catch(PDOException $e) {
echo $e->getMessage();
}

$return_arr = array();

if ($db)
{
$ac_term = "%".$_GET['term']."%";
$query = "SELECT * FROM table_name WHERE column_name LIKE :term";
$result = $db->prepare($query);
$result->bindValue(":term",$ac_term);
$result->execute();

// Fetch data and store in array
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
$row_array['label'] = $row['column_name'];
$row_array['value'] = $row['column_name'];

array_push($return_arr,$row_array);
}
}
</syntaxhighlight>

<br />
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:

<syntaxhighlight lang="php">
<?php

// Include files outside of webroot
set_include_path('/var/www/surveys/test-survey');

// Fetch database credentials
require_once ('constant.php');

// Connect to database and perform query
require_once ('database.php');

// Clear query
$db = null;

// Encode results in JSON. This is required for jquery autocomplete
echo json_encode($return_arr);

?>
</syntaxhighlight>

<br />
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.
<br />

== Use autocomplete to populate several fields==

''Tested with: 1.91+, IE 7/8/9, Firefox 18''

This workaround uses the [http://jqueryui.com/demos/autocomplete/ Autocomplete widget] included with jQuery UI and the [https://code.google.com/p/jquery-csv/downloads/list 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 [https://code.google.com/p/jquery-csv/downloads/list 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<syntaxhighlight lang="php"><script type="text/javascript" src="{TEMPLATEURL}jquery.csv.js"></script></syntaxhighlight>
*Create your CSV file with 3 columns (name, ID, email) as in this example and place it in your template folder<syntaxhighlight lang="php">Bob, Bob's ID, Bob's email

Andy, Andy's ID, Andy's email

Sam, Sam's ID, Sam's email

Tony, Tony's ID, Tony's email

Fred, Fred's ID, Fred's email</syntaxhighlight>
*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<syntaxhighlight lang="php">/* Autocomplete styles */

ul.ui-autocomplete {

width: 250px !important;

padding: 5px 10px;

list-style: none;

}</syntaxhighlight>
*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<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qNameID = NN;

var qIDID = II;

var qEmailID = EE;

var url = "upload/templates/yourTemplate/yourCsvFile.csv";

// Create an array to hold the names
var namesArr = new Array();

// Grab the CSV contents
$.get(url,function(data){

// Convert CSV contents to an array of arrays
fullArray = $.csv.toArrays(data);

// Load the names array
$(fullArray).each(function(i, item){
namesArr.push(item[0]);
});

// Initialise the autocomplete plugin
$('#question'+qNameID+' input.text').autocomplete({
source: namesArr,
// Event fired when a selection is made (ui.item.value refers to the selected item)
select: function(event, ui) {
// Find the "ID" and "Email" values associated with the selected name value and load those questions
$(fullArray).each(function(i, item){
if(item[0] == ui.item.value) {
// The value from column 2 of the CSV
$('#question'+qIDID+' input.text').val(item[1]);
// The value from column 3 of the CSV
$('#question'+qEmailID+' input.text').val(item[2]);
}
});
}
});
});
});

</script></syntaxhighlight>

=Create MaxDiff question type=

See the [[Workarounds: Question design, layout and templating|Question design, layout and templating]] section for a workaround that uses JavaScript to convert an '''''Array (flexible labels) by column''''' question into a [http://en.wikipedia.org/wiki/MaxDiff MaxDiff] question type.

[[File:max_diff_596x253.gif]]

=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.

<syntaxhighlight lang="php">

<script>

numColumns=13;

numRows=18;

questionId='28417X2X24';

specialColumns=[1,12,13];

function action(obj){

locator=obj.id.replace('cbox_'+questionId, '').split('_');

row=locator[0];

column=locator[1];

//alert('Action for row,column='+row+','+column);

my_id='#cbox_'+questionId+row+'_'+column+''

if($(my_id).attr('checked') == false) {

for( var i=1; i<=numColumns; i++ ) {

if(i==column) continue;

id='#cbox_'+questionId+row+'_'+i

$(id).attr('disabled',false);

}

} else {

for( var i=1; i<=numColumns; i++ ) {

if(i==column) continue;

id='#cbox_'+questionId+row+'_'+i

aid='#answer'+questionId+row+'_'+i

$(aid).val(0);

$(id).attr('checked',false);

$(id).attr('disabled',true);

}

}

}

function customOnLoad(){

for( var row=1; row<=numRows; row++ ) {

for( var k=0; k<specialColumns.length; k++ )

{

column=specialColumns[k];

$('#cbox_'+questionId+row+'_'+column).change(function() {

action(this);

});

}

}

}

jQuery(document).ready(

function(){

customOnLoad();

}

);

</script>

</syntaxhighlight>

=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:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following script in the source of the array question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Call the exclude function using question ID
excludeOpt({QID});
});

// A function to make the last option in each array row exclusive
function excludeOpt (qID) {

var thisQuestion = $('#question'+qID)

// Add some classes to the checkbox cells
$('td.checkbox-item', thisQuestion).addClass('normalOpt');
$('tr.subquestions-list', thisQuestion).each(function(i) {
$('.normalOpt:last', this).removeClass('normalOpt').addClass('exlusiveOpt')
});

// A listener on the checkbox cells
$('td.checkbox-item', thisQuestion).click(function (event) {
handleExclusive($(this));
});

// A listener on the checkboxes
$('td.checkbox-item input[type="checkbox"]', thisQuestion).click(function (event) {
handleExclusive($(this).closest('td'));
});

function handleExclusive(thisCell) {

var thisRow = $(thisCell).closest('tr');

// Uncheck the appropriate boxes in a row
if ($(thisCell).hasClass('normalOpt')) {
$('.exlusiveOpt input[type="checkbox"]', thisRow).attr('checked', false);
}
else {
$('.normalOpt input[type="checkbox"]', thisRow).attr('checked', false);
}

// Check conditions (relevance)
$('td.checkbox-item', thisRow).each(function(i) {
var thisValue = '';
if($('input[type="checkbox"]', this).is(':checked')) {
thisValue = 1;
}
var thisSGQA = $('input[type="checkbox"]', this).attr('id').replace(/cbox_/, '');

$('input[type="hidden"]', this).attr('value', thisValue);
fixnum_checkconditions(thisValue, thisSGQA, 'hidden');
});
}
}
</script></syntaxhighlight>

==Implementation LS Version 3.x:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following script in the source of the array question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){

var thisQuestion = $('#question{QID}')

// Add some classes to the checkbox cells
$('td.checkbox-item:last-child', thisQuestion).addClass('exclusive-item');

// A function to un-check boxes
function resetCheckbox(thisItem) {
$(':hidden', thisItem).val('');
$(':checkbox', thisItem).prop('checked', false).trigger('change');
}

// A listener on the checkboxes
$(':checkbox', thisQuestion).on('change', function(e) {
if($(this).is(':checked')) {
var thisItem = $(this).closest('.answer-item');
var thisRow = $(this).closest('tr');
var items = $('td.answer-item.exclusive-item', thisRow);
if($(thisItem).hasClass('exclusive-item')) {
items = $('td.answer-item:not(.exclusive-item)', thisRow);
}
$.each(items, function(i, el) {
resetCheckbox(el);
});
}
});
});
</script></syntaxhighlight>

=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.

<syntaxhighlight lang="javascript">
$(document).ready(function() {

// Insert a new div after the progress bar
$('<div id="navigator2" />').insertAfter('#progress-wrapper');

// Style the new div
$('#navigator2').css({
'text-align':'center'
});

// Insert clones of the nav buttons in the new div
$('input.submit:eq(0)').clone().appendTo('#navigator2');
$('input.submit:eq(2)').clone().appendTo('#navigator2');

// Give the new buttons some new IDs
$('#navigator2 input.submit').each(function(i) {
var oldID = $(this).attr('id');
var newID = oldID + '2';
$(this).attr('id', newID)
});
});</syntaxhighlight>

[[File:extra_buttons.png]]

=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.

[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|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.

<syntaxhighlight lang="php"> <script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Find the survey ID
if($('input#fieldnames').length != 0) {
var fieldNames = $('input#fieldnames').attr('value');
var tmp = fieldNames.split('X');
var sID = tmp[0];
}

// Insert a new div after the progress bar
$('<div id="optOutLink" />').insertBefore('#progress-wrapper');

// Style the new div
$('#optOutLink').css({
'text-align':'center'
});

// Insert opt out url in the new div
$('#optOutLink').html('<p><a href="optout.php?lang=en&sid;='+sID+'&token;={TOKEN}">Click here to opt out of this survey.</a></p><br>');

});

</script></syntaxhighlight>

=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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following code in the source of a short text question.
#Optional: you can also add other select field to avoid collisions (e.g. for large population sample)

<syntaxhighlight lang="php">

<p>This answers are used to generate your ID. These information will be encrypted, it will not be possible in any case to identify you neither from your answers nor from your ID.</p>

<table>

<tr>

<td>Initial of your name</td>

<td>

<select id="field1">

<option value=""></option>

<option value="A">A</option>

<option value="B">B</option>

<option value="C">C</option>

<option value="D">D</option>

<option value="E">E</option>

<option value="F">F</option>

<option value="G">G</option>

<option value="H">H</option>

<option value="I">I</option>

<option value="J">J</option>

<option value="K">K</option>

<option value="L">L</option>

<option value="M">M</option>

<option value="N">N</option>

<option value="O">O</option>

<option value="P">P</option>

<option value="Q">Q</option>

<option value="R">R</option>

<option value="S">S</option>

<option value="T">T</option>

<option value="U">U</option>

<option value="V">V</option>

<option value="W">W</option>

<option value="X">X</option>

<option value="Y">Y</option>

<option value="Z">Z</option>

</select>

</td>

</tr>

<tr>

<td>Your birth month</td>

<td>

<select id="field2">

<option value=""></option>

<option value="01">January</option>

<option value="02">February</option>

<option value="03">March</option>

<option value="04">April</option>

<option value="05">May</option>

<option value="06">June</option>

<option value="07">July</option>

<option value="08">August</option>

<option value="09">September</option>

<option value="10">October</option>

<option value="11">November</option>

<option value="12">December</option>

</select>

<td>

</tr>

</table>

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

<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);

}

});

</script>

</syntaxhighlight>

=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.

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Call the phone function with the question ID and the row number

phoneTest(QQ, NN);

function phoneTest(qID, inputNum) {

// Interrupt next/submit function

$('#movenextbtn, #movesubmitbtn').click(function(){

// Some vars - modify as required

var phoneMatch = /^[0-9,+,(), ,]{1,}(,[0-9]+){0,}$/;

var msg1 = 'Please enter a valid phone number.';

// Test the input

var phoneInput = $('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val();

if(phoneInput != '' && !phoneMatch.test(phoneInput)) {

alert(msg1);

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'pink' });

return false;

}

else {

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'' });

return true;

}

});

}

});

</script>

</syntaxhighlight>

The regex is from: [http://www.regexlib.com/REDetails.aspx?regexp_id=1136 regexlib.com blank]

=Check validity of email address in subquestion=

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

<div class="simplebox">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.<br />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</div>

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.

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Call the email function with the question ID and the row number

emailTest(QQ, NN);

function emailTest(qID, inputNum) {

// Interrupt next/submit function

$('#movenextbtn, #movesubmitbtn').click(function(){

// Some vars - modify as required

var emailMatch = /^[a-zA-Z0-9\_\-]+[a-zA-Z0-9\.\_\-]*@([a-zA-Z0-9\_\-]+\.)+([a-zA-Z]{2,4}|travel|museum)$/;

var msg1 = 'Please enter a valid email address.';

// Test the input

var emailInput = $('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val();

if(emailInput != '' && !emailMatch.test(emailInput)) {

alert(msg1);

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'pink' });

return false;

}

else {

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'' });

return true;

}

});

}

});

</script>

</syntaxhighlight>

The regex is from: [http://www.regexlib.com/REDetails.aspx?regexp_id=1653 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:

<syntaxhighlight lang="php">

<script type="text/javascript">

var questionhelp="{QUESTIONHELP}";

if (questionhelp=="") {

document.write("");}

else {

document.write('<tr><td class="survey-question-help">'+ questionhelp +'</td></tr>');}

</script>

</syntaxhighlight>

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)

[[File:snap035.gif]]

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.

[[File:snap037.gif]]

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!

<syntaxhighlight lang="javascript">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('input[name="69965X2X10SQ001_SQ001"]').attr('disabled', 'disabled');

$('input[name="69965X2X10SQ001_SQ002"]').attr('hidden', 'hidden');

});

</script>

</syntaxhighlight>

[[File:snap039.gif]]

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.

[[File:suffix.png]]

Fig. 1: Suffix

[[File:prefix.png]]

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 €" suffix in the first column and an "in %" in the next 3 columns.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Call the function with the question ID followed by a comma-separated list of suffixes

addSuffix(12345, 'in €', 'in %', 'in %', 'in %');

function addSuffix() {

var qID = $(arguments)[0];

// Assign some column-specific classes

$('#question'+qID+' table.question tbody tr').each(function(i){

$('td', this).each(function(i){

$(this).addClass('answerCol-'+(i+1)+'');

});

});

// Some styling

$('#question'+qID+' table.question tbody input[type="text"]').css({

'width': '50%'

});

// Insert the suffixes

$(arguments).each(function(i, val){

if(i > 0) {

$('#question'+qID+' td.answerCol-'+i+' label').append(val);

}

});

}

});

</script></syntaxhighlight>

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

<syntaxhighlight lang="php">$('#question'+qID+' td.answerCol-'+i+' label').append(val);</syntaxhighlight>

with this

<syntaxhighlight lang="php">$('#question'+qID+' td.answerCol-'+i+' label').prepend(val);</syntaxhighlight>

=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:
#Download the file at [http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js] and upload it to your survey.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following code in the source of a short text question.

<syntaxhighlight lang="javascript">
<script src="/upload/surveys/{SID}/jquery-ui-timepicker-addon.js"></script>

<script>

$(document).ready(function(){

$('#answer{SGQ}').timepicker({
timeText: 'Time', //here translation
hourText: 'hour', //here translation
minuteText: 'minute', //here translation
closeText: 'Done' //here translation
});

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

$( "<style>"
+".ui-widget-header, .ui-datepicker-current { display:none; }"
+".ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }"
+".ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }"
+" }"
+"</style>").appendTo( "head" );

});

</script></syntaxhighlight>

=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 [http://ditio.net/2010/05/02/javascript-date-difference-calculation/ 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.

<syntaxhighlight lang="php">

<script type="text/javascript">

/*

Adapted from http://ditio.net/2010/05/02/javascript-date-difference-calculation/
*/

var DateDiff = {

inDays: function(d1, d2) {

var t2 = d2.getTime();

var t1 = d1.getTime();

return parseInt[[t2-t1)/(24*3600*1000]];

},

inWeeks: function(d1, d2) {

var t2 = d2.getTime();

var t1 = d1.getTime();

return parseInt[[t2-t1)/(24*3600*1000*7]];

},

inMonths: function(d1, d2) {

var d1Y = d1.getFullYear();

var d2Y = d2.getFullYear();

var d1M = d1.getMonth();

var d2M = d2.getMonth();

return (d2M+12*d2Y)-(d1M+12*d1Y);

},

inYears: function(d1, d2) {

return d2.getFullYear()-d1.getFullYear();

}

}

d1 = new Date({substr(DD,0,4)}, {substr(DD,5,2)}, {substr(DD,8,2)});

d2 = new Date({substr(D2,0,4)}, {substr(D2,5,2)}, {substr(D2,8,2)});

// Displays result

document.write("<br />Number of <b>days</b>: "+DateDiff.inDays(d1, d2));

document.write("<br />Number of <b>weeks</b>: "+DateDiff.inWeeks(d1, d2));

document.write("<br />Number of <b>months</b>: "+DateDiff.inMonths(d1, d2));

document.write("<br />Number of <b>years</b>: "+DateDiff.inYears(d1, d2));

// filled the numerical input with number of days (or nights)

var nDays = +DateDiff.inDays(d1, d2);

jQuery(document).ready(function() {

$(".numeric:eq(0) input.text").val(nDays);

$(".numeric:eq(0) input.text").attr('readonly','readonly');

// check if d2 > d1

$('#movenextbtn').hide();

$('#movesubmitbtn').hide();

if(nDays >= 0){

// automatic submit (uncomment if needed)

// document.limesurvey.submit();

// $('body').hide();

}

else alert("Check out date must be posterior than Check in\nPlease return to the previous page and edit your answers");

});

</script>

</syntaxhighlight>

=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.

<syntaxhighlight lang="php">
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
'use strict';
var qID1 = QQ1,
qID2 = QQ2,
q1 = $('#question' + 'QQ1' + ' .popupdate'),
q2 = $('#question' + 'QQ2' + ' .popupdate');

//if q1 loses focus, its value is taken and used as minDate in q2
q1.datepicker("option", "onClose", function (datum){
q2.datepicker( "option", "minDate", datum );
});
//q2 gets today as its maxDate
q2.datepicker( 'option', 'maxDate', new Date() );
});
</script>
</syntaxhighlight>

=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}.

<syntaxhighlight lang="javascript">
<tr><td class="survey-question-help" id=help_{QUESTION_NUMBER}>{QUESTIONHELP}</td></tr>
</syntaxhighlight>

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.

<syntaxhighlight lang="javascript">
<script>
$(document).ready(function(){
if($('#help_{QUESTION_NUMBER}').is(':empty')){
$('#help_{QUESTION_NUMBER}').hide();
}
});
</script>
</syntaxhighlight>

= 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.<br /><br />

[[File:Iat_1.png]]<br /><br />

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

Implementation is as follows:

1) [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].

2) Create your Array (Texts) with subquestions as follows:<br />
- Y scale - all of your "attribut" words or phrases<br />
- X scale - "Key Pressed" and "Elapsed Time (ms)"<br />
[[File:Iat_2.jpg]]

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:<br />
- Left association term<br />
- Right association term<br />
- Instructional text<br />
- Finished text<br />
[[File:Iat_3.png]]

4) Add the following to the end of template.js:<syntaxhighlight lang="javascript">
// A plugin to insert an IAT interface
function implicitAssociation(el, showAnswers) {

$(el).each(function() {

var thisQuestion = $(this);
var thisQuestionHelp = $('img[src$="help.gif"]', thisQuestion).parent();
var thisQuestionAnswers = $('table.question', thisQuestion).parent();
var startTime = '';
var endTime = '';
var agent = navigator.userAgent.toLowerCase();
var mobile = false;
if( /android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent) ) { // Mobile devices
mobile = true;
}

// Some classes
$(thisQuestion).addClass('iatQuestion');
$('.subquestion-list').addClass('unanswered');

// Hide the question help element
$(thisQuestionHelp).hide();

// Hide the answers
if(showAnswers != true) {
$('table.question', thisQuestion).hide();
}

// Insert IAT display
var iatTexts = $(thisQuestionHelp).text().split('||');
var iatDisplayHTML = '<div class="iatWrapper">\
<div class="iatLeftLabel">'+iatTexts[0]+'</div>\
<div class="iatRightLabel">'+iatTexts[1]+'</div>\
<div class="iatWord"></div>\
<div class="iatInstructions">'+iatTexts[2]+'</div>\
</div>\
<div class="iatMobileButtonWrapper">\
<div class="iatButton iatLeftButton">E</div>\
<div class="iatButton iatRightButton">I</div>\
<div style="width:100%; clear:both;"></div>\
</div>';
$(thisQuestionAnswers).prepend(iatDisplayHTML);

// Show a word
function iatShowWord() {
$('div.iatWord', thisQuestion).text($('.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$(document).bind('keypress.iatKeypress', function(e) {
if(e.which == 101 || e.which == 105) {
var thisRow = $('.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
if(e.which == 101) {
$('input[type="text"]:eq(0)', thisRow).val('E');
}
else {
$('input[type="text"]:eq(0)', thisRow).val('I');
}
$(document).unbind('keypress.iatKeypress');
if($('.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWord();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
}
});
}
function iatShowWordMobile() {
$('div.iatWord', thisQuestion).text($('.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$('.iatButton', thisQuestion).bind('click.iatButtonClick', function(e) {
var thisRow = $('.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
$('input[type="text"]:eq(0)', thisRow).val($(this).text());
$('.iatButton', thisQuestion).unbind('click.iatButtonClick');
if($('.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWordMobile();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions, .iatMobileButtonWrapper', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
});
}

// Start the IAT display
if(mobile == true) { // Mobile devices
$('.iatMobileButtonWrapper', thisQuestion).show();
$('.iatButton', thisQuestion).bind('click.iatStartMobile', function(e) {
$('.iatButton', thisQuestion).unbind('click.iatStartMobile');
iatShowWordMobile();
});
}
else {
$(document).bind('keypress.iatStart', function(e) { // Non-mobile devices
if(e.which == 101 || e.which == 105) {
$(document).unbind('keypress.iatStart');
iatShowWord();
}
});
}
});
} </syntaxhighlight>

<br />5) Add the following to the end of template.css:<syntaxhighlight lang="css">
/* IAT questions */

.iatWrapper {
position: relative;
width: 600px;
height: 300px;
color: #FFFFFF;
background-color: #000000;
font-size: 21px;
}

.iatLeftLabel {
float: left;
padding: 10px;
}

.iatRightLabel {
float: right;
padding: 10px;
}

.iatWord {
position: absolute;
width: 100%;
top: 35%;
text-align: center;
font-size: 36px;
color:#0F0;
}

.iatWord.done {
color:#FFFFFF;
}

.iatInstructions {
position: absolute;
width: 100%;
bottom: 0px;
padding-bottom: 10px;
text-align: center;
}

.iatMobileButtonWrapper {
display: none;
position: relative;
width: 600px;
font-size: 36px;
}

.iatButton {
float: left;
margin: 20px;
width: 100px;
padding: 2px 0 5px 0;
border: 5px solid #999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
text-align: center;
line-height: normal;
cursor: pointer;
}

.iatLeftButton {
float: left;
}

.iatRightButton {
float: right;
}</syntaxhighlight>

<br />6) To apply the plugin, add one of the two scripts below to the question source:<br />
- With hidden answer table (for normally activated survey)
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}');
});
</script></syntaxhighlight>
- With visible answer table (for testing purposes)
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}', true);
});
</script></syntaxhighlight>

== 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.<br /><br />

[[File:Demo_iat_v250.png]]<br /><br />

'''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''':
<ol>
<li>[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].</li>
<li>Create your Array (Texts) with subquestions as follows:
<ul>
<li>Y scale - all of your "attribute" words or phrases</li>
<li>X scale - "Key Pressed" and "Elapsed Time (ms)"<br />[[File:Demo_iat_v250_2.png]]</li>
</ul>
</li>
<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>
<li>Left association term</li>
<li>Right association term</li>
<li>Instructional text</li>
<li>Finished text<br />[[File:Demo_iat_v250_3.png]]</li>
</ul>
</li>
<li>Add the following to the end of template.js:<syntaxhighlight lang="javascript">// A plugin to insert an IAT interface
function implicitAssociation(el, showAnswers) {

$(el).each(function() {

var thisQuestion = $(this);
var thisQuestionHelp = $('div.question-help', thisQuestion);
var thisQuestionAnswers = $('table.subquestion-list', thisQuestion).parent();
var startTime = '';
var endTime = '';
var agent = navigator.userAgent.toLowerCase();
var mobile = false;
if( /android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent) ) { // Mobile devices
mobile = true;
}

// Some classes
$(thisQuestion).addClass('iat-question');
$('tr.subquestion-list', thisQuestion).addClass('unanswered');

// Hide the question help element
$(thisQuestionHelp).hide();
$(thisQuestionHelp).closest('.question-help-container').hide();

// Hide the answers
if(showAnswers != true) {
$('table.subquestion-list', thisQuestion).hide();
}

// Insert IAT display
var iatTexts = $(thisQuestionHelp).text().split('||');
var iatDisplayHTML = '<div class="iatWrapper">\
<div class="iatLeftLabel">'+iatTexts[0]+'</div>\
<div class="iatRightLabel">'+iatTexts[1]+'</div>\
<div class="iatWord"></div>\
<div class="iatInstructions">'+iatTexts[2]+'</div>\
</div>\
<div class="iatMobileButtonWrapper">\
<div class="iatButton iatLeftButton">E</div>\
<div class="iatButton iatRightButton">I</div>\
<div style="width:100%; clear:both;"></div>\
</div>';
$(thisQuestionAnswers).prepend(iatDisplayHTML);

// Show a word
function iatShowWord() {
$('div.iatWord', thisQuestion).text($('tr.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$(document).bind('keypress.iatKeypress', function(e) {
if(e.which == 101 || e.which == 105) {
var thisRow = $('tr.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
if(e.which == 101) {
$('input[type="text"]:eq(0)', thisRow).val('E');
}
else {
$('input[type="text"]:eq(0)', thisRow).val('I');
}
$(document).unbind('keypress.iatKeypress');
if($('tr.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWord();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
}
});
}
function iatShowWordMobile() {
$('div.iatWord', thisQuestion).text($('tr.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$('.iatButton', thisQuestion).bind('click.iatButtonClick', function(e) {
var thisRow = $('tr.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
$('input[type="text"]:eq(0)', thisRow).val($(this).text());
$('.iatButton', thisQuestion).unbind('click.iatButtonClick');
if($('tr.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWordMobile();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions, .iatMobileButtonWrapper', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
});
}

// Start the IAT display
if(mobile == true) { // Mobile devices
$('.iatMobileButtonWrapper', thisQuestion).show();
$('.iatButton', thisQuestion).bind('click.iatStartMobile', function(e) {
$('.iatButton', thisQuestion).unbind('click.iatStartMobile');
iatShowWordMobile();
});
}
else {
$(document).bind('keypress.iatStart', function(e) { // Non-mobile devices
if(e.which == 101 || e.which == 105) {
$(document).unbind('keypress.iatStart');
iatShowWord();
}
});
}
});
}</syntaxhighlight>
</li>
<li>Add the following to the end of template.css:<syntaxhighlight lang="css">/* IAT questions */

.iatWrapper {
position: relative;
width: 100%;
max-width: 600px;
height: 300px;
margin: 0 auto;
color: #D0DBE5;
background-color: #2C3E50;
font-size: 21px;
}

.iatLeftLabel {
float: left;
padding: 10px;
}

.iatRightLabel {
float: right;
padding: 10px;
}

.iatWord {
position: absolute;
width: 100%;
top: 35%;
text-align: center;
font-size: 36px;
color: #C4D1DE;
}

.iatWord.done {
color: #C4D1DE;
}

.iatInstructions {
position: absolute;
width: 100%;
bottom: 0px;
padding-bottom: 10px;
text-align: center;
}

.iatMobileButtonWrapper {
display: none;
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
font-size: 36px;
}

.iatButton {
float: left;
margin: 20px;
width: 100px;
padding: 2px 0 5px 0;
border: 5px solid #233140;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
text-align: center;
line-height: normal;
cursor: pointer;
}

.iatLeftButton {
float: left;
}

.iatRightButton {
float: right;
}</syntaxhighlight>
</li>
<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)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}');
});
</script></syntaxhighlight>
</li>
<li>With visible answer table (for testing purposes)
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}', true);
});
</script></syntaxhighlight>
</li>
</ul>
</li>
</ol>

== Version 3.x ==

Here is a custom question theme for an Implicit Association Test (IAT) in version 3.x - https://github.com/tpartner/LimeSurvey-Implicit-Association-Test

=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

<syntaxhighlight lang="javascript">
<script type="text/javascript">

/**
* Small script that adds a "X" before a checkbox.
* On click the text color of the label of the checkbox turns grey
* If the user has to choose some answers from many options, he can "delete" answers, that on first sight looks wrong
* Add the script to the question in Limesurvey (for example within the source code of the help text)
*/

//Define the X (standard is a X in capitals)
var x = "X";
css_class = "x";

/*
* Define the style of the X
* Of course you can define the style in the stylesheet - if so, the script ignores the following settings
* If there is a style, than set style var to 1
*/
var style = 0;
var size = "12px";
var weight = "bold";
var color = "red";
var cursor = "pointer";

//element type - standard is a span element
var type = "span";

//Define the new font color of the checkbox label
label_color = "#bfbfbf";

//End of configuration - start of the function

//Define the element that is added
if(style == 1) {
ele = "<"+type+" class='"+css_class+"'>"+x+"</"+type+">";
}
else {
ele = "<"+type+" class='"+css_class+"' style='font-size:"+size+"; font-weight:"+weight+"; color:"+color+"; cursor:"+cursor+";'>"+x+"</"+type+">";
}

//Get the standard font-color of the used style
st_color = $("label").css("color");

//insert the X before the checkboxes
$(document).ready(function() {
$("li").each(function(){
$(this).prepend(ele);
});
});

//bind an eventhandler on the X (delegate is used, because Limesurvey uses an old jQuery version)
var css_class_c = "."+css_class;
$(document).delegate(css_class_c,"click",function() {
var color_check = $(this).siblings("label").data("color");
if(color_check != "true") {
$(this).siblings("label").css("color",label_color).data("color","true");
$(this).siblings('input').attr('checked', false);

}
else {
$(this).siblings("label").css("color",st_color).data("color","false");

}
});

$(".checkbox").click(function () {
$(this).siblings("label").css("color",st_color).data("color","false");
});

</script>
</syntaxhighlight>

=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:

<syntaxhighlight lang="javascript">$(document).ready(function(){
$('input').keypress(
function(event){
if (event.which == '13') {
event.preventDefault();
}
});
});</syntaxhighlight>

= 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.<br /><br />

[[File:Card_sort_1.png]]<br /><br />

'''DOWNLOADS:'''<br />
- [[Media:Card_Sort.zip|Demo template]]<br />
- [[Media:Card_Sort.lss|Demo survey]].

'''IMPLEMENTATION:'''

1) [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|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:<syntaxhighlight lang="javascript">
function cardSort(qID) {

// Define some stuff...
var thisQuestion = $('#question'+qID);
var thisQuestionHelp = $('img[alt="Help"]', thisQuestion).parent();
thisQuestion.addClass('card-sort-question');

// Hide the "Help" section
thisQuestionHelp.hide();

//Insert the "card sort" elements
$('ul.questions-list', thisQuestion).parent().prepend('<div class="droppable items-start"></div><div class="items-end-wrapper" />');
$('ul:eq(0) li', thisQuestionHelp).each(function(i) {
$('.items-end-wrapper', thisQuestion).append('<div class="items-end-inner">\
<div class="items-end-text">'+$(this).html()+'</div>\
<div class="droppable items-end items-end-'+(i+1)+'" data-items-end="'+(i+1)+'"></div>\
</div>')});

// Insert the "cards"
$('li.answer-item', thisQuestion).each(function(i) {
var thisSGQA = $(this).attr('id').replace(/javatbd/, '');
var thisCode = $(this).attr('id').split('X'+qID)[1];
var thisHTML = $('label', this).html();
$('div.items-start').append('<div class="card draggable" data-sgqa="'+thisSGQA+'" data-code="'+thisCode+'">\
'+thisHTML+'\
</div>');
});

// Make the "cards" draggable
$('.draggable').draggable({
revert: "invalid",
zIndex: 2700,
helper: 'original',
start: function( event, ui ) {
$(ui.helper).addClass('ui-draggable-helper');
},
stop: function( event, ui ) {
}
});

// Set the targets for the draggables
$('.droppable.items-start').droppable({
hoverClass: 'target-hover',
accept: '.draggable.moved'
});
$('.droppable.items-end').droppable({
hoverClass: 'target-hover',
accept: '.draggable'
});

// After dropped
$('.droppable').bind('drop', function(event, ui) {

// Physically move the draggable to the target
// (the plugin just visually moves it)
// (need to use a clone here to fake out iPad)
var newDraggable = $(ui.draggable).clone();
$(newDraggable).appendTo(this);
$(ui.draggable).remove();
if($(this).hasClass('items-end')) {
$(newDraggable).addClass('moved');
}
else {
$(newDraggable).removeClass('moved');
}
$(newDraggable).removeClass('ui-draggable-helper ui-draggable-dragging').css({
'z-index':'',
'top':'auto',
'left':'auto'
});

// Now, make this new clone draggable
$(newDraggable).draggable({
revert: "invalid",
zIndex: 2700,
helper: 'original',
start: function( event, ui ) {
$(ui.helper).addClass('ui-draggable-helper');
},
stop: function( event, ui ) {
}
});
});

// Initial "card" positions
$('li.question-item input.text', thisQuestion).each(function(i) {
if($(this).val() > 0) {
$('.items-end[data-items-end="'+$(this).val()+'"]').append($('.card[data-sgqa="'+$(this).attr('name')+'"]'));
$('.card[data-sgqa="'+$(this).attr('name')+'"]').appendTo($('.items-end[data-items-end="'+$(this).val()+'"]')).addClass('moved');
}
});

// Interrupt the Next/Submit function and load the inputs
$('form#limesurvey').submit(function(){
$('.question-item input.text', thisQuestion).val(0);
$('.droppable.items-end .card', thisQuestion).each(function(i) {
var thisItemsEnd = $(this).closest('.droppable.items-end').attr('data-items-end');
var thisID = $(this).attr('data-sgqa');
$('#answer'+thisID+'').val(thisItemsEnd);
});
});
}</syntaxhighlight>

<br />5) Add the following to the end of template.css:<syntaxhighlight lang="css">
/* Card Sort */

.card-sort-question ul.subquestions-list {
/*display: none;
clear: both;*/
}

.card-sort-question .items-start {
float: left;
width: 340px;
height: 317px;
margin-top: 8px;
border: 1px solid #666;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}

.card-sort-question .items-start.target-hover {
background:#C9C9C9;
}

.card-sort-question .items-end-wrapper {
float: left;
margin-left: 20px;
width: 340px;
}

.card-sort-question .items-end {
width: 338px;
min-height: 73px;
margin-bottom: 10px;
padding-bottom: 5px;
border: 1px solid #666;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
background: #EBEBEB;
}

.card-sort-question .items-end.target-hover {
background: #C9C9C9;
}

.card-sort-question .items-end.ui-state-disabled {
opacity: 1;
filter:alpha(opacity=100);
}

.card-sort-question .items-end-text {
width: 338px;
padding-bottom: 5px;
background: #FFFFFF;
font-size: 110%;
font-weight: bold;
}

.card-sort-question .card {
display: inline-block;
width: 140px;
height: auto;
margin: 5px 8px;
padding: 3px;
border: 2px solid #2F4354;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
background-color: #43b3d1;
color: #2f4354;
font-weight: bold;
text-align: center;
line-height: normal;
}

.card-sort-question .items-end .card {
margin: 5px 7px;
}

.card-sort-question div.answer {
clear: both;
padding-top: 1px;
margin-top: 0;
}</syntaxhighlight>

<br />6) Add this to the source of the question to apply the function.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
cardSort({QID});
});
</script></syntaxhighlight>

== Version 3.x ==
Here is a custom question theme for card Sorting in version 3.x. - https://github.com/tpartner/LimeSurvey-Card-Sorting-3.x

== Version 4.x ==
Here is a custom question theme for card Sorting in version 4.x. - https://github.com/tpartner/LimeSurvey-Card-Sorting-4.x

= Q Sorting=
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.<br /><br />

== Version 3.x==
''Tested with: 3.08 - 3.15''
Custom question theme - [[Media:QSort.zip]]<br />

== Version 4.x==
''Tested with: 4.5.1''
Custom question theme - [[Media:qSort-4.x.zip]]<br />

=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:
<syntaxhighlight lang="javascript">
<script type='text/javascript' charset='utf-8'>
$( document ).ready( function() {
var this_surveyId='{SID}';
var this_groupId='{self.gid}';
var this_quesitonId='{self.qid}';
var this_self='{self.sgqa}';

// Remark for the variable 'my_targetTextBox':
// ------------------------------------
// For Text-type question (e.g. 'short free text', 'huge free text'), use : '#answer' + this_self;
// For 'Multiple Choice'-type question enabled with the 'Other' option which provides a textbox, use : '#answer' + this_self;
// For 'List (radio)'-type question enabled with the 'Other' option which provides a textbox, use : '#answer' + this_self + 'text'.
var my_targetTextBox='#answer' + this_self;

// Trim:
// -----
$( my_targetTextBox ).blur( function(){
$( this ).val( $.trim( $( this ).val() ) );
});

// Uppercase:
// ----------
// Operate for its appearance only (but have no effect to modify its intrinsic value) - display as UpperCase:
$( my_targetTextBox ).css( 'text-transform', 'uppercase' );
// Operate for its intrinsic value:
$( my_targetTextBox ).blur( function() {
$( this ).val( $( this ).val().toUpperCase() );
});
});
</script>
</syntaxhighlight>

For Text-type question (e.g. 'short free text', 'huge free text'), set the 'this_self' variable as below:
<syntaxhighlight lang="javascript">
var my_targetTextBox='#answer' + this_self;
</syntaxhighlight>

For 'Multiple Choice'-type question enabled with the 'Other' option which provides a textbox, set the 'this_self' variable as below:
<syntaxhighlight lang="javascript">
var my_targetTextBox='#answer' + this_self;
</syntaxhighlight>

For 'List (radio)'-type question enabled with the 'Other' option which provides a textbox, set the 'this_self' variable as below:
<syntaxhighlight lang="javascript">
var my_targetTextBox='#answer' + this_self + 'text';
</syntaxhighlight>

= 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.<br /><br />

'''IMPLEMENTATION:'''

1) Add the following to the end of template.js:<syntaxhighlight lang="javascript">
$(document).ready(function(){
// Apply the responsiveArray plugin with default settings
$('.array-10-pt, .array-flexible-row, .array-5-pt, .array-increase-same-decrease, .array-yes-uncertain-no').responsiveArray();
});

/*****
A plugin to insert drop-downs into arrays for small screens
Copyright (C) 2015 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 09/04/15
*****/
(function( $ ){
$.fn.responsiveArray = function(options) {

var opts = $.extend( {
chooseText: 'Please choose...'
}, options);

return this.each(function() {

var thisQuestion = $(this);
var thisQID = $(thisQuestion).attr('id').split('question')[1];

// Some classes
$(thisQuestion).addClass('responsive-array');
$('table.questions-list tr', thisQuestion).each(function(i){
$('> *', this).each(function(i){
$(this).addClass('col-'+i);
if(i != 0) {
$(this).addClass('expanded');
}
});
});

// Insert a column
$('.col-0', thisQuestion).after('<td class="dropdown-cell" />');

// Insert dropdowns
$('body').append('<select style="display:none;" class="responsive-select responsive-select-'+thisQID+'" />');
$('table.questions-list thead th.expanded', thisQuestion).each(function(i){
$('.responsive-select-'+thisQID).append('<option value="">'+$(this).text()+'</option>');
});
$('table.questions-list tbody .dropdown-cell', thisQuestion).append($('.responsive-select-'+thisQID+'').clone());
$('tr.radio-list', thisQuestion).each(function(i){
var thisRow = $(this);
$('input.radio', this).each(function(i){
$('.responsive-select-'+thisQID+' option:eq('+i+')', thisRow).attr('value', $(this).attr('id'));
});
if($('input.radio:checked', thisRow).length > 0) {
$('.responsive-select-'+thisQID+'', thisRow).val($('input.radio:checked', thisRow).attr('id'));
}
else {
$('.responsive-select-'+thisQID+'', thisRow).prepend('<option value="" selected="selected">'+opts.chooseText+'</option>');
}
});
$('.responsive-select-'+thisQID+'', thisQuestion).show();

// Listeners on radios
$('input.radio', thisQuestion).click(function(event) {
var thisRow = $(this).closest('tr');
var thisID = $(this).attr('id');
//$('option[value="'+thisID+'"]').attr('selected', 'selected');
$('.responsive-select', thisRow).val(thisID);
$('.responsive-select option[value=""]', thisRow).remove();
});

// Listeners on dropdowns
$('.responsive-select-'+thisQID+'').change(function() {
$('#'+$(this).val()+'').click();
});

});
};
})( jQuery );</syntaxhighlight>

<br />2) Add something like this to template.css (I have it set to switch at 640px but adjust that as you see fit):<syntaxhighlight lang="css">
/*****
Styles for the responsiveArray plugin
Copyright (C) 2015 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 09/04/15
*****/

.responsive-array .dropdown-cell {
display: none;
text-align: left;
padding-left: 8px;
}

.responsive-array .dropdown-cell select {
max-width: none;
}

@media screen and (max-width: 640px) {
.responsive-array table.question {
table-layout: auto;
}
.responsive-array table.question .col-0,
.responsive-array table.question .dropdown-cell {
width: 50%;
}
.responsive-array .dropdown-cell {
display: table-cell;
}
.responsive-array th.expanded,
.responsive-array td.expanded {
display: none;
}
}</syntaxhighlight>

<br />Note that the "Please choose" text is an optional setting. To change it, apply the plugin like this:<syntaxhighlight lang="javascript">
$(document).ready(function(){
// Apply the responsiveArray plugin with default settings
$('.array-10-pt, .array-flexible-row, .array-5-pt, .array-increase-same-decrease, .array-yes-uncertain-no').responsiveArray({
chooseText: 'Select one...'
});
});</syntaxhighlight>

= Van Westendorp Pricing Sliders=
== Version 2.06==

''Tested with: LimeSurvey version 2.06''

This workaround uses JavaScript to dynamically control sliders to facilitate the [http://www.5circles.com/van-westendorp-pricing-the-price-sensitivity-meter/ 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.<br /><br />

[[File:Test_Van_Westendorp_Pricing_206_v2.png]]<br /><br />

'''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''':

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your Multiple Numeric question with subquestions as seen in the image above.
#Add the following to the end of template.js:<syntaxhighlight lang="javascript">function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}

/*****
A jQuery plugin to facilitate the Van Westendorp pricing research methodology
Copyright (C) 2016 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 19/10/16
*****/
(function( $ ){

$.fn.vWPricing = function(options) {

var opts = $.extend( {
order: [1, 2, 3, 4],
randomOrder: false
}, options);

return this.each(function() {

var thisQuestion = $(this);

thisQuestion.addClass('vwp-question');

// Add some attributes and set the slider max/min values
var itemsLength = $('li.question-item', thisQuestion).length;
$('li.question-item', thisQuestion).each(function(i) {
$(this).attr('data-item', (i+1));
$('.ui-slider', this).attr('data-slider', (i+1));

var thisSliderMin = $('.ui-slider', this).slider('option', 'min');
$('.ui-slider', this).slider('option', 'min', thisSliderMin+(i));
var thisSliderMax = $('.ui-slider', this).slider('option', 'max');
$('.ui-slider', this).slider('option', 'max', thisSliderMax-((itemsLength-1)-i));
});

// Slider order
if(opts.randomOrder == true) {
shuffleArray(opts.order);
}
$(opts.order).each(function(i, val) {
$('ul.subquestions-list', thisQuestion).append($('li.question-item[data-item="'+val+'"]', thisQuestion));
});

// Listeners on the sliders
$('.ui-slider', thisQuestion).on('slide', function(event, ui) {
handleVwpSliders(this, ui.value);
});
$('.ui-slider', thisQuestion).on('slidestop', function(event, ui) {
handleVwpSliders(this, ui.value);
});

// A function to handle the siders
function handleVwpSliders(el, sliderVal) {
var thisRow = $(el).closest('li');
var movedIndexNum = $(el).attr('data-slider');

$('input.text', thisRow).val(sliderVal);
$('.slider-callout', thisRow).html($('input.text', thisRow).val());

var lowerSliders = $('.ui-slider', thisQuestion).filter(function() {
return $(this).attr('data-slider') < movedIndexNum;
});
var higherSliders = $('.ui-slider', thisQuestion).filter(function() {
return $(this).attr('data-slider') > movedIndexNum;
});

$(lowerSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider');
var newSliderVal = sliderVal-(movedIndexNum-thisIndexNum);
if($(this).slider('option', 'value') > newSliderVal) {
var thisRow = $(this).closest('li');
$(this).slider('option', 'value', newSliderVal);
$('input.text', thisRow).val(newSliderVal);
$('.slider-callout', thisRow).html($('input.text', thisRow).val());
}
});
$(higherSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider');
var newSliderVal = sliderVal+(thisIndexNum-movedIndexNum);
if($(this).slider('option', 'value') < newSliderVal) {
var thisRow = $(this).closest('li');
$(this).slider('option', 'value', newSliderVal);
$('input.text', thisRow).val(newSliderVal);
$('.slider-callout', thisRow).html($('input.text', thisRow).val());
}
});
}
});

};
})( jQuery );</syntaxhighlight>
#Add the following to the end of template.css (this is for a copy of [http://extensions.sondages.pro/skeletonquest-rwd-for-limesurvey/ Denis Chenu's SkeletonQuest template]):<syntaxhighlight lang="css">/**** Van Westendorp Pricing ****/

.vwp-question ul.subquestions-list,
.vwp-question ul.subquestions-list li {
display:block;
}

.vwp-question ul.subquestions-list li {
margin-bottom: 15px;
}

.vwp-question ul.subquestions-list .slider-label {
display:block;
padding: 0.3em 0.5em 0.7em;
width: auto;
max-width: 100%;
text-align: left;
}

.vwp-question .slider-element {
display: block;
margin-left: 2%;
width:90%;
max-width: 32em;
}</syntaxhighlight>
#To apply the plugin, add this script the multiple-numeric question source.
There are two options to adjust<br /> -'''order''' - this is the order that your subquestions will be displayed (default, 1, 2, 3, 4)<br /> -'''randomOrder''' - if set to true, the '''order''' option will be overridden and the subquestion order will be randomized (default, false)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').vWPricing({
order: [1, 2, 3, 4],
randomOrder: false
});

});
</script></syntaxhighlight>
== Version 2.5x==

''Tested with: LimeSurvey version 2.54.5''

This workaround uses JavaScript to dynamically control sliders to facilitate the [http://www.5circles.com/van-westendorp-pricing-the-price-sensitivity-meter/ 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.<br /><br />

[[File:Test_Van_Westendorp_Pricing_25x.png]]<br /><br />

'''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''':

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your Multiple Numeric question with subquestions as seen in the image above.
#Add the following to the end of template.js:<syntaxhighlight lang="javascript">function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}

/*****
A jQuery plugin to facilitate the Van Westendorp pricing research methodology
Copyright (C) 2016 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 19/10/16
*****/
(function( $ ){

$.fn.vWPricing25 = function(options) {

var opts = $.extend( {
order: [1, 2, 3, 4],
randomOrder: false
}, options);

return this.each(function() {

var thisQuestion = $(this);

thisQuestion.addClass('vwp-question');

// Add some attributes and set the slider max/min values
var itemsLength = $('.question-item', thisQuestion).length;
$('.question-item', thisQuestion).each(function(i) {
var thisInput = $('input[type=text]', this);
var thisVal = $(thisInput).val();

$(this).attr('data-item', (i+1));
$(thisInput).attr('data-slider-index', (i+1));

// Slider initial settings
setTimeout(function() {
var thisSliderMin = $(thisInput).bootstrapSlider('getAttribute', 'min');
$(thisInput).bootstrapSlider('setAttribute', 'min', thisSliderMin+(i));
var thisSliderMax = $(thisInput).bootstrapSlider('getAttribute', 'max');
$(thisInput).bootstrapSlider('setAttribute', 'max', thisSliderMax-((itemsLength-1)-i));

if(thisVal == '') {
$(thisInput).val('');
}
}, 200);

});

// Slider order
if(opts.randomOrder == true) {
shuffleArray(opts.order);
}
$(opts.order).each(function(i, val) {
$('.subquestion-list.questions-list', thisQuestion).append($('.question-item[data-item="'+val+'"]', thisQuestion));
});

// Listeners on the sliders
$('input[type=text]', thisQuestion).on('slide', function(event) {
handleVwpSliders(this, $(this).bootstrapSlider('getValue'));
});
$('input[type=text]', thisQuestion).on('slideStop', function(event) {
handleVwpSliders(this, $(this).bootstrapSlider('getValue'));
});

// A function to handle the siders
function handleVwpSliders(el, sliderVal) {
var movedIndexNum = $(el).attr('data-slider-index');

var lowerSliders = $('input[type=text]', thisQuestion).filter(function() {
return $(this).attr('data-slider-index') < movedIndexNum;
});
var higherSliders = $('input[type=text]', thisQuestion).filter(function() {
return $(this).attr('data-slider-index') > movedIndexNum;
});

$(lowerSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider-index');
var newSliderVal = sliderVal-(movedIndexNum-thisIndexNum);
if($(this).bootstrapSlider('getValue') > newSliderVal) {
var thisRow = $(this).closest('.question-item');
var thisTooltip = $('.tooltip', thisRow);
$(this).bootstrapSlider('setValue', newSliderVal);
$('.tooltip-inner', thisTooltip).text($('input.text', thisRow).val());
thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');

var validationInput = $('input.em_sq_validation', thisRow);
$(validationInput).val($('input.text', thisRow).val())
fixnum_checkconditions($(validationInput).attr('value'), $(validationInput).attr('name'), $(validationInput).attr('type'));
}
});
$(higherSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider-index');
var newSliderVal = sliderVal+(thisIndexNum-movedIndexNum);
if($(this).bootstrapSlider('getValue') < newSliderVal) {
var thisRow = $(this).closest('.question-item');
var thisTooltip = $('.tooltip', thisRow);
$(this).bootstrapSlider('setValue', newSliderVal);
$('.tooltip-inner', thisTooltip).text($('input.text', thisRow).val());
thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');

var validationInput = $('input.em_sq_validation', thisRow);
$(validationInput).val($('input.text', thisRow).val())
fixnum_checkconditions($(validationInput).attr('value'), $(validationInput).attr('name'), $(validationInput).attr('type'));
}
});
}

// Listener on resizing (override the bootstrap callout behaviour)
$(window).resize(function() {
setTimeout(function() {
$('input[type=text]', thisQuestion).each(function(i) {
if($(this).val() != '') {
var thisRow = $(this).closest('.question-item');
var thisTooltip = $('.tooltip', thisRow);
$('.tooltip-inner', thisTooltip).text($.trim($(this).val()));
console.log($('.tooltip-inner', thisTooltip).text());
thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');
}
});
}, 1);
});
});
};
})( jQuery );</syntaxhighlight>
#Add the following to the end of template.css (this is for a copy of the default template):<syntaxhighlight lang="css">/*********** Van Westendorp Pricing ***********/

.vwp-question .control-label {
margin-bottom: 35px;
}

.vwp-question .withslider {
margin-bottom: 0px;
}

.vwp-question .slider-container {
margin-bottom: 2.5em;
margin-top: 3.5em;
}

.vwp-question .slider.slider-horizontal .slider-handle {
margin-top: -5px;
}

@media (max-width: 600px){

.vwp-question .withslider {
padding-left: 0;
padding-right: 0;
}
}

@media (max-width: 480px){

#outerframeContainer,
.vwp-question .control-label,
.vwp-question .slider-container > div {
padding-left: 0;
padding-right: 0;
}

.vwp-question .slider-container > div > div {
padding-left: 5px;
padding-right: 5px;
}
}</syntaxhighlight>
#To apply the plugin, add this script the multiple-numeric question source.
There are two options to adjust<br /> -'''order''' - this is the order that your subquestions will be displayed (default, 1, 2, 3, 4)<br /> -'''randomOrder''' - if set to true, the '''order''' option will be overridden and the subquestion order will be randomized (default, false)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').vWPricing25({
order: [1, 2, 3, 4],
randomOrder: false
});

});
</script></syntaxhighlight>
== 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".<br />

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

'''Implementation''':

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your Multiple Choice question with the last subquestions as "Select all".
#Add the following script to the source of the question text:<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:complete',function() {

// Identify this question
var thisQuestion = $('#question{QID}');

// Initial states
if($('input[type="checkbox"]:last', thisQuestion).is(':checked')) {
$('input[type="checkbox"]', thisQuestion).not(':last').prop('checked', true).prop('disabled', true);
}

// Listener on the last checkbox
$('input[type="checkbox"]:last', thisQuestion).on('change', function(e) {
if($(this).is(':checked')) {
$('input[type="checkbox"]', thisQuestion).not(this).prop('checked', true).prop('disabled', true);
}
else {
$('input[type="checkbox"]', thisQuestion).not(this).prop('checked', false).prop('disabled', false);
}

// Fire ExpressionScript
$('input[type="checkbox"]', thisQuestion).not(this).each(function(i) {
checkconditions(this.value, this.name, this.type);
});
});

// Re-enable checkboxes so data gets stored
$('#moveprevbtn, #movenextbtn, #movesubmitbtn').on('click', function(){
$('input[type="checkbox"]', thisQuestion).prop('disabled', false);
});
});
</script></syntaxhighlight>

= Pay Off Matrix Interface =
== LimeSurvey Version 2.67.x==

This workaround converts a list-radio type question into a Pay Off Matrix interface.<br /><br />

[[File:Pay_off_matrix_1.png]]<br />
[[File:Pay_off_matrix_2.png]]<br /><br />

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

'''Implementation''':

#Create your List Radio question with with the upper and lower values for each answer separated by "pipe" characters.<br />[[File:Pay_off_matrix_3.png]]
#Assign a class "pay-off-matrix" to that question.<br />[[File:Pay_off_matrix_4.png]]
#Add the following to the end of template.js:<syntaxhighlight lang="javascript">$(document).on('ready pjax:complete',function() {
// Apply the payOffMatrix plugin
$('.pay-off-matrix').payOffMatrix({
topText: 'You receive',
bottomText: 'Others receive'
});
});

/*****
A jQuery plugin to convert a list-radio question to a Pay Off Matrix
Copyright (C) 2017 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 1.0
Create date - 25/09/2017
*****/

(function($){

$.fn.payOffMatrix = function(options) {

var opts = $.extend( {
topText: '',
bottomText: ''
}, options);

return this.each(function() {

var thisQuestion = $(this);

// Insert the matrix elements
$('div.answer', thisQuestion).prepend('<div class="pom-outer-wrapper"><div class="pom-wrapper">\
<div class="pom-row-label top">'+opts.topText+'</div>\
<div class="pom-items-wrapper">\
</div>\
<div class="pom-row-label bottom">'+opts.bottomText+'</div>\
<div style="clear:both;" />\
</div></div>');

$('.answer-item', thisQuestion).each(function(i) {
var thisValue = $('input.radio', this).attr('value');
var itemTop = $.trim($('.label-text', this).text()).split('|')[0];
var itemBottom = $.trim($('.label-text', this).text()).split('|')[1];
$('.pom-items-wrapper', thisQuestion).append('<div class="pom-item">\
<div class="pom-item-label-wrapper top">\
<div class="pom-item-label">'+itemTop+'</div>\
</div>\
<div class="pom-item-button-wrapper">\
<div class="pom-item-button" data-value="'+thisValue+'"></div>\
</div>\
<div class="pom-item-label-wrapper bottom">\
<div class="pom-item-label">'+itemBottom+'</div>\
</div>\
<div class="under-480" style="clear:both;" />\
</div>');
});
$('.pom-item:first', thisQuestion).addClass('first');
$('.pom-item:last', thisQuestion).addClass('last');

// Listeners on the matrix events
$('.pom-item-button, .pom-item-label', thisQuestion).on('click', function(e) {
$('.pom-item', thisQuestion).removeClass('active-item');
$(this).closest('.pom-item').addClass('active-item');
var thisValue = $(this).closest('.pom-item').find('.pom-item-button').attr('data-value');
$('input.radio[value="'+thisValue+'"]', thisQuestion).trigger('click');
}).hover(
function() {
$(this).closest('.pom-item').addClass('hover');
}, function() {
$( this ).closest('.pom-item').removeClass('hover');
}
);
});

};
})(jQuery);</syntaxhighlight>
#Add the following to the end of template.css:<syntaxhighlight lang="css">/*****
Styles for the payOffMatrix plugin
Copyright (C) 2017 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 1.0
Create date - 25/09/2017
*****/

.pay-off-matrix .answers-list {
position: absolute;
left: -9999em;
}

.pom-wrapper {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 648px;
}

.pom-item {
float: left;
}

.pom-row-label {
clear: both;
text-align: center;
font-size: 16px;
}

.pom-row-label.top {
padding-top: 5px;
}

.pom-row-label.bottom {
padding-bottom: 5px;
}

.pom-item-label-wrapper {
padding: 5px 8px;
}

.pom-item-label-wrapper.top {
margin-bottom: 3px;
}

.pom-item-label-wrapper.bottom {
margin-top: 3px;
}

.pom-item {
width: 11.11111111111111%;
}

.pom-item-label {
border: 1px solid #233140;
background: #EBEBEB;
-moz-transition: background-color 300ms ease;
-o-transition: background-color 300ms ease;
-webkit-transition: background-color 300ms ease;
transition: background-color 300ms ease;
text-align:center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
font-size: 16px;
line-height: 30px;
}

.pom-item.hover .pom-item-label,
.pom-item.active-item .pom-item-label {
font-weight: bold;
cursor: pointer;
}

.pom-item.active-item .pom-item-label {
background: #233140;
color: #FFFFFF;
}

.pom-item-button-wrapper {
padding: 5px 15.27777777777778%;
background: #CCD5DD;
width: 69.44444444444444%;
width: auto;
}

.pom-item.first .pom-item-button-wrapper {
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-khtml-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}

.pom-item.last .pom-item-button-wrapper {
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-khtml-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}

.pom-item-button {
height: 0;
width: 100%;
padding-top: 100%;
background: #FFFFFF;
-moz-transition: background-color 300ms ease;
-o-transition: background-color 300ms ease;
-webkit-transition: background-color 300ms ease;
transition: background-color 300ms ease;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
}

.pom-item.hover .pom-item-button {
background-color: #5b7fa5;
}

.pom-item.active-item .pom-item-button,
.pom-item.active-item .pom-item-button:hover {
background-color: #233140;
cursor:default;
}

@media only screen and (max-width: 480px) {
.pom-outer-wrapper {
margin: 0 auto;
padding-top: 50px;
width: 256px;
}
.pom-wrapper {
display:block;
position: relative;
}

.pom-row-label {
bottom: 100%;
left: 0;
margin-left: -25px;
position: absolute;
text-align: center;
width: 150px;
background-color: transparent !important;
}

.pom-row-label.bottom {
left: auto;
right: 0;
margin-right: -25px;
padding: 5px 0 0 0;
}

pom-items-wrapper {
vertical-align: middle;
}

.pom-item {
float: none;
width: auto;
}

.pom-item-label-wrapper {
float: left;
margin: 0 !important;
padding: 7px 24px;
}

.pom-item-label {
width: 50px;
}

.pom-item-button-wrapper {
float: left;
margin: 0 5px;
padding: 5px;
width: 46px;
}

.pom-item.first .pom-item-button-wrapper {
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-khtml-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}

.pom-item.last .pom-item-button-wrapper {
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-khtml-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

.pom-item .under-480 {
display: block !important;
}
}</syntaxhighlight>

== LimeSurvey Version 3.x==
Here is a custom question theme for LS 3.x - https://github.com/tpartner/LimeSurvey-Social-Value-Orientation

Workarounds: Manipulating a survey at runtime using Javascript

2023-05-11T17:17:51Z

Tpartner: /* Expandable Array */

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]]

<div class="simplebox"><center><br />'''Please keep in mind that these workarounds are not official LimeSurvey extensions - they are solutions that users have created for themselves.<br /><span style='color:#EE0000,#FFFFFF'>Therefore LimeSurvey can't offer guarantees or support for these solutions.</span><br />If you have questions, please contact the users that, thankfully, shared their solutions with the community.'''<br /><br /></center></div>

<div class="simplebox">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.<br /><br /></div>

__TOC__

=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 <nowiki>''Tested with: (enter LimeSurvey version and maybe browser)''</nowiki>.

Finally it's imported to mark all your code with code tags, other wise you might break this page.
*Start tag: '''<nowiki><syntaxhighlight lang="php"></nowiki>'''
*End tag: '''<nowiki></syntaxhighlight></nowiki>'''.

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

Plugin [https://extensions.sondages.pro/questions-updating-and-managing/addscripttoquestion-easily-add-javascript/ 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".
* [http://docs.limesurvey.org/tiki-index.php?page=Adding+A+Question Add a new question]
* Edit the question and click the "Source" button in the editor toolbar:

[[File:Editor_1.png]]
* Enter your script after the question text:

[[File:Editor_2.png]]
* Save the question

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

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
alert("Test!");
</script></syntaxhighlight>

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:

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:complete',function() {
alert("Test!");
});
</script></syntaxhighlight>

===Usage of brackets (<nowiki>{ and }</nowiki>)===
{{Alert|title=Caution when using brackets (<nowiki>{ and }</nowiki>) in scripts|text=[[ExpressionScript#Syntax|Expression manager]] uses brackets (<nowiki>{ and }</nowiki>) to enclose expressions. If you have to use brackets in your JavaScript, you must add a space or line feed after the opening bracket (<nowiki>{</nowiki>) and before the closing bracket (<nowiki>}</nowiki>) }}

===Examples of usage of brackets===

ExpressionScript will try to parse this JavaScript:
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(function() {console.log('broken javascript');});
</script>
</syntaxhighlight>

Adding line feed prevents ExpressionScript from parsing
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(function() {
console.log('Adding a line feed for javascript');
});
</script>
</syntaxhighlight>

ExpressionScript will try to parse this JavaScript:
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
if(myvar==1) {console.log('broken javascript');};
</script>
</syntaxhighlight>

Adding spaces inside the brackets prevents ExpressionScript from parsing
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
if(myvar==1) { console.log('Adding a space for javascript'); };
</script>
</syntaxhighlight>

=Sum up input values using Javascript=

''Tested with: ''

<div class="simplebox">As of version 1.92, this is easier to do using the sum() function in [[ExpressionScript|ExpressionScript]]. See this [[ExpressionScript how-tos#Calculate assessment values at runtime and store the results in the survey data|HowTo example]].</div>

<div class="simplebox">Starting in Version 1.92, you also do no longer need to use SGQA (e.g. 45251X1X5) identifiers. Instead the code <code>{SGQ}</code> will automatically replaced by the current questions SGQA-codes.</div>

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 [http://docs.limesurvey.org/tiki-index.php?page=SGQA+Identifier SGQA identifier] and [[Adding a question#Information from previous answers|Using information from previous answers]].

<syntaxhighlight lang="html4strict">

<div style="text-align: left">These are your answers:<br />

<u></u><u></u><u></u><u></u><u>=

<p><script LANGUAGE="JavaScript">

partyprice = 3;

beadclothprice = 3;

breakfastprice = 7;

lunchprice = 8;

dinnerprice = 10;

foodtotal = 0;

var isreallytrue = "Yes";

var noanswer = "No answer";

document.write( "Can you come? = {INSERTANS:45251X1X1}<BR>" );

if ("{INSERTANS:45251X1X1}" == isreallytrue )

{

if ("{INSERTANS:45251X1X3}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X3}"; }

partypeople = parseInt(answer);

partytotal = partyprice * partypeople;

document.write( "It's {INSERTANS:45251X1X3} persons who will come = " + partytotal + "€<BR>" );

if ("{INSERTANS:45251X1X4}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X4}";}

beadcloths = parseInt(answer);

beadclothtotal = beadclothprice * beadcloths;

document.write( "You want to borrow {INSERTANS:45251X1X4} beadcloths = " + beadclothtotal + "€<BR>" );

document.write( "Will you be there thursday? = {INSERTANS:45251X1X5}<BR>" );

document.write( "On friday you will have these meals: <BR>" );

if ("{INSERTANS:45251X1X71}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X71}";}

breakfastfriday = parseInt(answer) * breakfastprice;

document.write( "'''_ " + answer + " breakfeasts = " + breakfastfriday + "€<BR>" );

if ("{INSERTANS:45251X1X72}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X72}";}

lunchfriday = parseInt(answer) * lunchprice ;

document.write( "'''_ " + answer + " lunches = " + lunchfriday + "€<BR>" );

if ("{INSERTANS:45251X1X73}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X73}";}

dinnerfriday = parseInt(answer)* dinnerprice ;

document.write( "'''_ " + answer + " dinners = " + dinnerfriday + "€<BR>" );

foodtotal = breakfastfriday + lunchfriday + dinnerfriday;

document.write( "Will you be there saturday? = {INSERTANS:45251X1X8}<BR>" );

if ("{INSERTANS:45251X1X8}" == isreallytrue )

{

document.write( "On saturday you will have these meals: <BR>" );

if ("{INSERTANS:45251X1X91}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X91}"; }

breakfastsaturday = parseInt(answer) * breakfastprice ;

document.write("'''_ " + answer + " breakfeasts = " + breakfastsaturday + "€<BR>" );

if ("{INSERTANS:45251X1X92}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X92}"; }

lunchsaturday = parseInt(answer) * lunchprice ;

document.write( "'''_ " + answer + " lunches = " + lunchsaturday + "€<BR>" );

if ("{INSERTANS:45251X1X93}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X93}"; }

dinnersaturday = parseInt(answer) * dinnerprice ;

document.write( "'''_ " + answer + " dinners = " + dinnersaturday + "€<BR>" );

foodtotal = foodtotal + breakfastsaturday + lunchsaturday + dinnersaturday;

}

document.write( "Will you be there sunday? = {INSERTANS:45251X1X10}<BR>" );

if ("{INSERTANS:45251X1X10}" == isreallytrue )

{

document.write( "On sunday you will have these meals: <br>" );

if ("{INSERTANS:45251X1X111}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X111}"; }

breakfastsunday = parseInt(answer) * breakfastprice ;

document.write( "'''_ " + answer + " breakfeasts = " + breakfastsunday + "€<BR>" );

if ("{INSERTANS:45251X1X112}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X112}"; }

lunchsunday = parseInt(answer) * lunchprice ;

document.write( "'''_ " + answer + " lunches = " + lunchsunday + "€<BR>" );

if ("{INSERTANS:45251X1X113}"== noanswer) { answer = 0; }

else { answer = "{INSERTANS:45251X1X113}"; }

dinnersunday = parseInt(answer) * dinnerprice ;

document.write( "'''_ " + answer + " dinners = " + dinnersunday + "€<p>" );

foodtotal = foodtotal + breakfastsunday + lunchsunday + dinnersunday;

}

total = partytotal + beadclothtotal + foodtotal;

document.write( "<h3>In total it will cost you " + total + "€</h3><BR>

Put that sum in this bank account 1234 5678 9012" );

}

</SCRIPT></p>

</div></syntaxhighlight>

=Multiple Question Validation=

''Tested with: ''

<div class="simplebox">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|ExpressionScript]]. Such validations also work on the current page, and properly handle array_filter and cascading relevance.</div>

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.):
#Create a new survey of type "group by group", set the "Show |<< Prev| button" to yes and note the SID.
#Add a new group called "Group 1" and note the GID.
#Add a new question "Percent of males" of type "numeric", make it mandatory and note the QID (we will refer to this as QID1).
#Add a new question "Percent of females" of type "numeric", make it mandatory and note the QID (we will refer to this as QID2).
#Add a new group called "Group 2"
#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

<syntaxhighlight lang="javascript">

<script>

function validation()

{

if [[{INSERTANS:SIDXGIDXQID1}+{INSERTANS:SIDXGIDXQID2}) != 100)

{

alert("Your responses don't sum 100! Check them");

document.limesurvey.move.value = 'moveprev';

document.limesurvey.submit();

}

else

{

document.limesurvey.move.value = 'movelast';

document.limesurvey.submit();

}

}

setTimeout("validation()",250);

</script>

</syntaxhighlight>

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

<syntaxhighlight lang="php">

function validation() {

if ("{INSERTANS:SIDXGIDXQID}" != "{INSERTANS:SIDXGIDXQID}") {

alert("Your responses don't match Check them"); document.limesurvey.move.value = 'moveprev';

document.limesurvey.submit();

}

}

setTimeout("validation()",250);

</syntaxhighlight>

=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.

<syntaxhighlight lang="php">

<script>

if ("{INSERTANS:SIDXGIDXQID}" == "No")

{

window.location="http://www.limesurvey.org";

}

</script>

</syntaxhighlight>

=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 (<input> 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...:

<syntaxhighlight lang="php">

<script>

jQuery(document).ready(

function(){

alert('onload alert!');

}

);

</script>

</syntaxhighlight>

...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:

<syntaxhighlight lang="php">document.getElementById("answer73166X16X54").style.display='none';</syntaxhighlight>

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:

<syntaxhighlight lang="php">document.getElementById("answer{SGQ}").style.display='none';</syntaxhighlight>

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:

<syntaxhighlight lang="php">document.getElementById("answer73166X16X54").readOnly=true;</syntaxhighlight> 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.

<syntaxhighlight lang="php">

jQuery(document).ready(

function() {

jQuery('input:radio').each(

function() {

var s = jQuery(this);

var c = s.parent().children('.answertext');

for(var i=0; i < c.length; i++) {

var a = jQuery(c[i]]);

if(this.id </u> a.attr('for') && a.text() == '') {

s.css({ 'display' : 'none' });

a.css({ 'display' : 'none' });

break;

}

}

}

)

}

);

</syntaxhighlight>

==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 <html> 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

<syntaxhighlight lang="javascript">

jQuery(document).ready(

function(){

languagecode=$('html').attr('lang');

alert('This is the current language code: '+languagecode);

}

);

</syntaxhighlight>

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''

<div class="simplebox">As of version 1.92, this is easier to do using the the array_filter attribute, or relevance equations in general.</div>

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.

<syntaxhighlight lang="php">

var previousQuestionAnswer = "{INSERTANS:1000X1X1}";

var currentQuestionID = "#answer1000X1X1"

$(document).ready(function() {

// See if the answer for the previous question matches an answer in the current question

// (other than 'No Answer')

// If so, disable it.

if (previousQuestionAnswer!='No Answer') {

$(currentQuestionID).children().each(function(index, Element)

{

if ($(this).attr('text') == previousQuestionAnswer)

{ $(this).attr('disabled', true); }

}

);}

}); // End of JQuery ready function

</syntaxhighlight>

===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):

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Get the countryCode (first character of the country)
var countryCode = '{INSERTANS:1000X1X1}'.substr(0, 1).toUpperCase();

// Loop through all dropdown options and remove those with codes not starting with the countryCode
$('select[id^="answer"] option').each(function(i){

if($(this).attr('value') && $(this).attr('value').substr(0, 1).toUpperCase() != countryCode) {
$(this).remove();
}
});
});

</script></syntaxhighlight>

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

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Get the stateCode (two first characters of the state)

var stateCode = '{INSERTANS:1000X1X2}'.substr(0, 2).toUpperCase();

// Loop through all dropdown options and remove those with codes not starting with the stateCode

$('select[id^="answer"] option').each(function(i){

if($(this).attr('value') && $(this).attr('value').substr(0, 2).toUpperCase() != stateCode) {

$(this).remove();

}

});

});

</script></syntaxhighlight>

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+''

<div class="simplebox">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).</div>

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...

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

// Match elements with labels using htmlFor and a loop

var labels = document.getElementsByTagName('LABEL');

for (var i = 0; i < labels.length; i++) {

if (labels[i].htmlFor != '') {

var elem = document.getElementById(labels[i].htmlFor);

if (elem)

elem.label = labels[i];

}

}

var answerFilter="{INSERTANS:96553X63X759}";

for (i=0; i<30; i++){

var iLabel = document.getElementById('answer96553X63X760'+(i+1]].label.innerHTML;

if (answerFilter.search(iLabel) == -1){

// Hide element

$('#question760').find('li').eq(i).hide();

// Set value of hidden elements to zero

document.getElementById('answer96553X63X760'+(i+1)).value = 0;

}

}

});</script>

</syntaxhighlight>

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

''Tested with: 1.72''

''And tested with: 1.91+''

<div class="simplebox">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|ExpressionScript]] compatible equations or tailored text. Finally, with 1.92, defaults are properly managed even when set on the same page.</div>

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.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answer1000X11X30').val('{INSERTANS:1000X10X20}');

$('#answer1000X11X31').val('{INSERTANS:1000X10X21}');

});

</script></syntaxhighlight>

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.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answer1000X2X2').val(parseInt('{INSERTANS:1000X1X1}')*2);

$("#question2").hide();

});

</script>

</syntaxhighlight>

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

=Dynamic Sum=

<div class="simplebox">As of version 1.92, this is easier to do with [[ExpressionScript|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 [[ExpressionScript how-tos#Calculate assessment values at runtime and store the results in the survey data|HowTo example]] demonstrates the dynamic sum feature.</div>

<div class="simplebox">Also note, as of version 1.92, the following workaround will fail, since it includes a a regular expression containing curly braces.</div>

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:

<syntaxhighlight lang="php">

<script language=Javascript>

// General definitions

// Define a regular expression to match the labels containing information about an answer

// In LimeSurvey, these labels start with "answer..."

var answerRegex = /^answer/;

// Find all answer checkboxes in the document and set their

// onchange events to updatePrice

function Custom_On_Load()

{

// Find all input elements

var inputList=document.getElementsByTagName("input");

// Loop through each, looking for checkboxes

var i;

for( i=0; i< inputList.length;i++ )

{

// If input item does not have an ID, skip

if (! (inputList[i].id)) { continue; }

// Skip to next if ID doesn't start with "answer"

if (!answerRegex.test(inputList[i].id)) { continue; }

// Skip to next if not a checkbox

if (inputList[i].type.toUpperCase()!='CHECKBOX') { continue; }

// This is an answer checkbox!

// Setup onchange event

inputList[i].onclick = updatePrice;

}

// Load initial sum

updatePrice();

}

function updatePrice()

{

var labels=document.getElementsByTagName("LABEL");

// Define a regular expression to match a price inside parenthesis

// For example: ($29) or ($29.54).

// Set up

priceRegex = /$\$(\d*\.{0,1}\d+)$/;

// Loop through all the labels, looking for labels corresponding to

// answers that have a price in them.

var i;

var total = 0;

for( i=0; i<labels.length;i++ )

{

var myArray; // Define array used for regex matching

var inputID; // Define field element

// Get the ID of the field corresponding to the label using the

// "htmlFor" attribute

// (FYI, there are some labels that will have to be screened out

// because they don't correspond to an answer)

// Does the label start with "answer"?

// If not: exit.

if (!answerRegex.test(labels[i].htmlFor)) { continue; }

// First make sure this element exists

// If it doesn't, go to the next element

// If it does, it will be defined in inputID

if (! (inputID = document.getElementById(labels[i].htmlFor)) ) { continue; }

// See if the corresponding answer is a checkbox that is checked.

// If not, go to next label

if (inputID.type.toUpperCase()!='CHECKBOX') { continue; }

if (!inputID.checked) { continue; }

// This is label for an answer.

// The innerHTML will give us the text of the label

// The price information will be in the form ($XX.XX)

// which in contained in the label text.

// Find a match for a decimal number inside the pattern "($" and ")"

if [[myArray = priceRegex.exec(labels[i].innerHTML]] != null)

{

// Keep a running tally

total += parseFloat(myArray[1]);

}

}

// Update total price on form

document.getElementById("totalPrice").value = "$" + formatCurrency(total);

}

function formatCurrency(num) {

num = isNaN(num) || num <u> '' || num </u> null ? 0.00 : num;

return parseFloat(num).toFixed(2);

}

</script>

</syntaxhighlight>

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

<syntaxhighlight lang="php">Total Cost for selected accessories: <input type="readonly" value="" id="totalPrice" /></syntaxhighlight>

=Focus on the first Input field=

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

<div class="simplebox">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.</div>

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 </head> closing tag:

<syntaxhighlight lang="php">

<script type="text/javascript">

function focusFirst(Event)

{

var i=0;

while(document.forms[0].elements[i].type == "hidden")

{

i++;

}

document.forms[0].elements[i].focus();

return;

}

if(ie)

{ window.attachEvent("onload", focusFirst); }

else

{ document.addEventListener("load", focusFirst, true); }

</script>

</syntaxhighlight>

'''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:

<syntaxhighlight lang="php">

<script type="text/javascript">

var ie = false;

</script>

</syntaxhighlight>

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.

<syntaxhighlight lang="php">

<script type="text/javascript">

jQuery(document).ready(function() {

jQuery(document).bind('keypress', function(e){

if (48 <= e.which && e.which <= 57) {

jQuery('input:radio').each(function() {

var v = jQuery(this).val();

var c = (e.which <u> 48) ? 10 : e.which - 48;

if(v </u> 'Y' || v <u> 'N') {

v = (v </u> 'Y') ? 1 : 2;

}

if(v == c) {

jQuery(this).click();

jQuery('#limesurvey input:submit').click();

}

});

}

})

});

</script>

</syntaxhighlight>

=Math notation in LimeSurvey=
#download the js file from [http://mathcs.chapman.edu/~jipsen/mathml/asciimathdownload.html AsciiMath script]
#copy it in the /scripts/ folder in your installation
#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:

<syntaxhighlight lang="php">

<script type="text/javascript" src="ASCIIMathML.js">

</syntaxhighlight>

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 [http://www.imathas.com/editordemo/demo.html link for a TinyMCE with math support].

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

<div class="simplebox">As of version 2.06 this workaround is not required. It can be handled with subquestion relevance.</div>

''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:'''
*[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|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.<syntaxhighlight lang="javascript">function filterArrByCol(qMultiOpt, qArray, prevPage) {

// If filter question is on a previous page, hide Q1 and check all "visible" boxes
if(prevPage == 1) {
$('#question'+qMultiOpt+' li[id^="javatbd"]:visible input.checkbox').attr('checked', true);
$('#question'+qMultiOpt+'').hide();
}

// Assign classes to the answer cells
$('#question'+qArray+' td.answer-item').each(function(i){
var classArr = $(this).attr('class').split('answer_cell_00');
classArr = classArr[1].split(' ');
var ansCode = classArr[0];
$(this).addClass('ans-'+ansCode+' filtered');
});

// Assign classes to the answer label cells
$('#question'+qArray+' table.subquestions-list tbody tr:eq(0) td.answer-item').each(function(i){
var classArr2 = $(this).attr('class').split(' ans-');
var ansCode2 = classArr2[1];
$('#question'+qArray+' table.subquestions-list thead tr:eq(0) th:eq('+i+')').addClass('ans-'+ansCode2+'');
});

// Fire the filter function on page load
filterArr(qMultiOpt, qArray);

// Listener on multi-opt checkboxes to fire the filter function
$('#question'+qMultiOpt+' input.checkbox').click(function(){
filterArr(qMultiOpt, qArray);
});

// On submit, clear all hidden radios of array
$('#movenextbtn, #movesubmitbtn').click(function(){
$('#question'+qArray+' td.filtered:hidden').each(function(i){
$('input.radio', this).prop('checked', false);
});
return true;
});
}

function filterArr(qMultiOpt, qArray) {

if($('#question'+qMultiOpt+' input.checkbox:checked').length < 1) {
// Hide the array if no multi-opt options are checked
$('#question'+qArray+'').hide();
}
else {
$('#question'+qArray+'').show();

// Hide all columns of array
$('#question'+qArray+' table.subquestions-list tbody td.answer-item, #question'+qArray+' table.question thead th').hide();

// Loop through multi-opt checkboxes and, if checked, show corresponding column of array
$('#question'+qMultiOpt+' input.checkbox').each(function(i){
if($(this).prop('checked') == true) {
var classArr3 = $(this).attr('id').split('X'+qMultiOpt);
var ansCode3 = classArr3[1];
$('#question'+qArray+' .ans-'+ansCode3+'').show();
}
});
}
}</syntaxhighlight>

*If using LimeSurvey version 2.0 or older, place the following functions in your template.js file. These will be accessed by either method.<syntaxhighlight lang="javascript">
$(document).ready(function() {

function filterArrByCol(qMultiOpt, qArray, prevPage) {

// If filter question is on a previous page, hide Q1 and check all "visible" boxes
if(prevPage == 1) {
$('#question'+qMultiOpt+' li[id^="javatbd"]:visible input.checkbox').attr('checked', true);
$('#question'+qMultiOpt+'').hide();
}

// Assign classes to the answer cells
$('#question'+qArray+' table.question tbody td').each(function(i){
var classArr = $(this).attr('class').split('answer_cell_00');
var ansCode = classArr[1];
$(this).addClass('ans-'+ansCode+' filtered');
});

// Assign classes to the answer label cells
$('#question'+qArray+' table.question tbody tr:eq(0) td').each(function(i){
var classArr2 = $(this).attr('class').split(' ans-');
var ansCode2 = classArr2[1];
$('#question'+qArray+' table.question thead tr:eq(0) th:eq('+i+')').addClass('ans-'+ansCode2+'');
});

// Fire the filter function on page load
filterArr(qMultiOpt, qArray);

// Listener on multi-opt checkboxes to fire the filter function
$('#question'+qMultiOpt+' input.checkbox').click(function(){
filterArr(qMultiOpt, qArray);
});

// On submit, clear all hidden radios of array
$('#movenextbtn, #movesubmitbtn').click(function(){
$('#question'+qArray+' td.filtered:hidden').each(function(i){
$('input.radio', this).attr('checked', false);
});
return true;
});
}

function filterArr(qMultiOpt, qArray) {

if($('#question'+qMultiOpt+' input.checkbox:checked').length < 1) {
// Hide the array if no multi-opt options are checked
$('#question'+qArray+'').hide();
}
else {
$('#question'+qArray+'').show();

// Hide all columns of array
$('#question'+qArray+' table.question tbody td, #question'+qArray+' table.question thead th').hide();

// Loop through multi-opt checkboxes and, if checked, show corresponding column of array
$('#question'+qMultiOpt+' input.checkbox').each(function(i){
if($(this).attr('checked') == true) {
var classArr3 = $(this).attr('id').split('X'+qMultiOpt);
var ansCode3 = classArr3[1];
$('#question'+qArray+' .ans-'+ansCode3+'').show();
}
});
}
}
});</syntaxhighlight>

'''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).<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
filterArrByCol(MM, AA);
});
</script></syntaxhighlight>

'''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.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
filterArrByCol(MM, AA, 1);
});
</script></syntaxhighlight>

=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 [http://plugins.jquery.com/project/autotab 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 [http://www.partnersinc.biz/surveys//index.php?sid=11327&newtest=Y&lang=en here].

Implementation is as follows:
#Visit [http://plugins.jquery.com/autotabs http://plugins.jquery.com/autotabs], download the plugin script and save it as ''jquery.autotab-1.1b.js'' in the template folder.
#Link to the script by placing ''<script type="text/javascript" src="{TEMPLATEURL}jquery.autotab-1.1b.js"></script>'' within the ''<head>'' tag of startpage.pstpl.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#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)
#Define a Maximum characters attribute for all questions that the autotab is applied to.
{{QS:maximum_chars}}
#In the source of the first question of the group that contains the auto-tabbed questions, add the following code.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answerSSSSSXGGXAA').focus(); //initially focus on the first input

$('#answerSSSSSXGGXAA').autotab({ target: 'answerSSSSSXGGXBB' });

$('#answerSSSSSXGGXBB').autotab({ previous: 'answerSSSSSXGGXAA', target: 'answerSSSSSXGGXCC' });

$('#answerSSSSSXGGXCC').autotab({ previous: 'answerSSSSSXGGXBB', target: 'answerSSSSSXGGXDD' });

$('#answerSSSSSXGGXDD').autotab({ previous: 'answerSSSSSXGGXCC' });

});

</script></syntaxhighlight>

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

[[File:ids_343x252.gif]]

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 [[Workarounds#Reverse_array_filter|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 [http://docs.jquery.com/Events/change 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.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#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

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('#answer11111X22X33').change(function() {

if ( $('#answer11111X22X33').val() > 10 ) {
alert ("That's an awful lot. Are you sure?");
}
});
});
</script></syntaxhighlight>

=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 [http://plugins.jquery.com/project/meioMask 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/ http://www.meiocodigo.com/projects/meiomask/] for more details on features and options.

There is a small demo [http://www.partnersinc.biz/surveys//index.php?sid=36146&newtest=Y&lang=en here].

Implementation for this demo was as follows:
#Visit [http://www.meiocodigo.com/projects/meiomask/ http://www.meiocodigo.com/projects/meiomask/], download the latest plugin script and save it as jquery.meiomask.js in the template folder.
#Link to the script by placing <script type="text/javascript" src="{TEMPLATEURL}jquery.meiomask.js" charset="utf-8"></script> within the <head> tag of startpage.pstpl.
#Turn off $filterxsshtml to allow insertion of JavaScript in the questions. ([http://docs.limesurvey.org/tiki-index.php?page=Optional+settings&structure=English+Instructions+for+LimeSurvey#Filtering_dangerous_HTML_tags_in_survey_objects See documentation here])
#Create the text input questions that the masks are to be applied to
#In the source of the help section of the first question of the group that contains the masked inputs, add the following code. ([http://docs.limesurvey.org/tiki-index.php?page=Workarounds&structure=English+Instructions+for+LimeSurvey#How_to_use_Script_eg._JavaScript_etc._ See How to use script here])

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Define custom masks
$.mask.masks = $.extend($.mask.masks,{
customMask1:{ mask: 'a9a 9a9' }, // Canadian postal code
// Maximum input of 9,999.99, reverse input, default value of 0.00
customMask2:{ mask: '99.999,9', type : 'reverse', defaultValue : '000' }
});

// Set the 'alt' attributes of the inputs
$('#answer111111X22XAA').attr('alt', 'phone-us'); // a pre-defined mask
$('#answer111111X22XBB').attr('alt', 'customMask1'); // a custom mask
$('#answer111111X22XCC').attr('alt', 'customMask2'); // a custom mask
$('#answer111111X22XDD').attr('alt', 'cc'); // a pre-defined mask for credit card

// Tell the plugin to apply masks to these inputs
$('input:#answer111111X22XAA').setMask();
$('input:#answer111111X22XBB').setMask();
$('input:#answer111111X22XCC').setMask();
$('input:#answer111111X22XDD').setMask();
});
</script>
</syntaxhighlight>

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 [http://www.meiocodigo.com/projects/meiomask/#mm_options 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

[[File:Ids 343x252.gif]]

=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/ http://digitalbush.com/projects/masked-input-plugin/] for more details on features and options.

Implementation as follows:

#Visit [http://digitalbush.com/projects/masked-input-plugin/ http://digitalbush.com/projects/masked-input-plugin/], download the latest plugin script and save it as jquery.maskedinput.js in the template folder.
#Link to the script by placing <script type="text/javascript" src="{TEMPLATEURL}jquery.maskedinput.js" charset="utf-8"></script> within the <head> tag of startpage.pstpl.
#Turn off $filterxsshtml to allow insertion of JavaScript in the questions. ([http://docs.limesurvey.org/tiki-index.php?page=Optional+settings&structure=English+Instructions+for+LimeSurvey#Filtering_dangerous_HTML_tags_in_survey_objects See documentation here])
#Create the text input questions that the masks are to be applied to
#In the source of the help section of the first question of the group that contains the masked inputs, add the following code. ([http://docs.limesurvey.org/tiki-index.php?page=Workarounds&structure=English+Instructions+for+LimeSurvey#How_to_use_Script_eg._JavaScript_etc._ See How to use script here])

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function($) {
$("#answer55431X1X5").mask("999-99-9999",{ placeholder:"#" });
});
</script>
</syntaxhighlight>

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.
<br /><br />
'''DOWNLOAD:'''<br />
- [[Media:Demo_Random_Option_From_Multi-Choice_v206.1.zip|Demo survey for LS 2.06]]<br />
- [[Media:Demo_Random_Option_From_Multi-Choice_v25.1.zip|Demo survey for LS 2.5]]<br />
<br />
'''IMPLEMENTATION''' (LimeSurvey version 2.06)<br />

#[https://manual.limesurvey.org/Workarounds:_Manipulating_a_survey_at_runtime_using_Javascript#How_to_use_Script_.28eg._JavaScript_etc..29_in_LimeSurvey.3F Set up your survey to use JavaScript].
#Create a "Multiple options" question
#Immediately following that question, create a short-text question to store the label of the checked box in (we'll hide this with JavaScript)
#Place the script below in the source of the multiple options question. <syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// Identify the questions
var thisQuestion = $('#question{QID}');
var qHidden = thisQuestion.nextAll('.text-short:eq(0)');
var hiddenInput = $('input.text', qHidden);

// Hide qHidden
qHidden.hide();

// Listener on the checkboxes
$('input.checkbox', thisQuestion).on('change', function(e) {
handleChecked();
});

// Listener on the "Other" input
$('input.text', thisQuestion).on('keyup change', function(e) {
setTimeout(function() {
handleChecked();
}, 250);
});

function handleChecked() {
// Build an array of checked answers
var checkedAnswers = [];
$('input.checkbox:checked', thisQuestion).each(function(i) {
if($(this).closest('.answer-item').hasClass('other-item')) {
checkedAnswers.push($(this).closest('.other-item').find('input.text').val());
}
else {
checkedAnswers.push($(this).nextAll('label:eq(0)').text());
}
});

// Load the hidden question with a random item from the array
var checkedLength = checkedAnswers.length;
$(hiddenInput).val(checkedAnswers[Math.floor(Math.random()*checkedLength)]);

// Fire ExpressionScript
checkconditions(hiddenInput.value, hiddenInput.name, hiddenInput.type);
}
});
</script></syntaxhighlight>
<br />
'''IMPLEMENTATION''' (LimeSurvey version 2.5)

#Follow the first 3 implementation steps above
#Place the script below in the source of the multiple options question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// Identify the questions
var thisQuestion = $('#question{QID}');
var qHidden = thisQuestion.nextAll('.text-short:eq(0)');
var hiddenInput = $('input.text', qHidden);

// Hide qHidden
qHidden.hide();

// Class for "Other
$('input.text', thisQuestion).closest('.answer-item').addClass('other-item');

// Listener on the checkboxes
$('input.checkbox', thisQuestion).on('change', function(e) {
handleChecked();
});

// Listener on the "Other" input
$('input.text', thisQuestion).on('keyup change', function(e) {
setTimeout(function() {
handleChecked();
}, 250);
});

function handleChecked() {
// Build an array of checked answers
var checkedAnswers = [];
$('input.checkbox:checked', thisQuestion).each(function(i) {
if($(this).closest('.answer-item').hasClass('other-item')) {
checkedAnswers.push($(this).closest('.answer-item').find('input.text').val());
}
else {
checkedAnswers.push($.trim($(this).nextAll('.label-text:eq(0)').text()));
}
});

// Load the hidden question with a random item from the array
var checkedLength = checkedAnswers.length;
$(hiddenInput).val(checkedAnswers[Math.floor(Math.random()*checkedLength)]);

// Fire ExpressionScript
checkconditions(hiddenInput.value, hiddenInput.name, hiddenInput.type);
}
});
</script></syntaxhighlight>

=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:<br />
[[File:Secondary_options_1.png]]

Primary option selected:<br />
[[File:Secondary_options_2.png]]<br /><br />

'''DOWNLOADS:'''<br />
- [[Media:Demo_Secondary_Checkboxes.zip|Demo template for LS version 2.06]]<br />
- [[Media:Demo_Secondary_Checkboxes.lss|Demo survey for LS version 2.06]].<br />
- [[Media:Template_Demo_Secondary_Checkboxes_For_2.5.zip|Demo template for LS version 2.5]]<br />
- [[Media:Survey_Demo_Secondary_Multiple_Options_For_LS_25.zip|Demo survey for LS version 2.5]].<br /><br />

==LimeSurvey version 2.06==

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create a "Multiple options" question including both the primary and secondary subquestions (in the order that you would like them displayed if all shown).
#Add the following function to the end of template.js:<syntaxhighlight lang="javascript">
// A function to handle "secondary" checkboxes
function secondaryCheckboxes(qID, primaryPosition, secondaryCount) {
// Identify the elements
var thisQuestion = $('#question'+qID);
var primaryRow = $('li.question-item:eq('+(primaryPosition-1)+')', thisQuestion);
var primaryInput = $('input.checkbox', primaryRow);
var secondaryRows = primaryRow.nextAll('li.question-item:lt('+(secondaryCount)+')');
var secondaryInputs = $('input.checkbox', secondaryRows);

// Indent the secondaries
secondaryRows.css({ 'margin-left':'2.5em' });

// Initial states of the secondary answers
if (primaryInput.prop('checked') == false ) {
secondaryRows.hide();
}

// A listener on the primary answer to show or hide secondary answers
primaryInput.click(function (event) {

// Hide/show the secondary answers accordingly
if (!$(this).is(':checked')) {
secondaryRows.hide();
secondaryInputs.prop('checked', false);
secondaryInputs.each(function(i) {
checkconditions(this.value, this.name, this.type);
});
}
else {
secondaryRows.show();
}
});
}</syntaxhighlight>
#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. <br />So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Sub-question 1 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 1, 2);
// Sub-question 6 is primary followed by 3 secondaries
secondaryCheckboxes({QID}, 6, 3);
});
</script></syntaxhighlight>

==LimeSurvey version 2.5==

#Follow the first 2 implementation steps above
#Add the following function to the end of template.js:<syntaxhighlight lang="javascript">
// A function to handle "secondary" checkboxes
function secondaryCheckboxes(qID, primaryPosition, secondaryCount) {
// Identify the elements
var thisQuestion = $('#question'+qID);
$('div.question-item', thisQuestion).parent().addClass('answer-row');
var primaryRow = $('div.question-item:eq('+(primaryPosition-1)+')', thisQuestion).closest('.answer-row');
var primaryInput = $('input.checkbox', primaryRow);
var secondaryRows = primaryRow.nextAll('div.answer-row:lt('+(secondaryCount)+')');
var secondaryInputs = $('input.checkbox', secondaryRows);

// Indent the secondaries
secondaryRows.css({ 'margin-left':'2.5em' });

// Initial states of the secondary answers
if (primaryInput.prop('checked') == false ) {
secondaryRows.hide();
}

// A listener on the primary answer to show or hide secondary answers
primaryInput.click(function (event) {

// Hide/show the secondary answers accordingly
if (!$(this).is(':checked')) {
secondaryRows.hide();
secondaryInputs.prop('checked', false);
secondaryInputs.each(function(i) {
checkconditions(this.value, this.name, this.type);
});
}
else {
secondaryRows.show();
}
});
}</syntaxhighlight>
#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. <br />So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Sub-question 1 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 1, 2);
// Sub-question 6 is primary followed by 3 secondaries
secondaryCheckboxes({QID}, 6, 3);
});
</script></syntaxhighlight>

==LimeSurvey version 3.x==

#Follow the first 2 implementation steps above
#Add the following function to the end of custom.js:<syntaxhighlight lang="javascript">
// A function to handle "secondary" checkboxes
function secondaryCheckboxes(qID, primaryPosition, secondaryCount) {
// Identify the elements
var thisQuestion = $('#question'+qID);
var primaryRow = $('li.question-item:eq('+(primaryPosition-1)+')', thisQuestion).closest('li.question-item');
var primaryInput = $('input:checkbox', primaryRow);
var secondaryRows = primaryRow.nextAll('li.question-item:lt('+(secondaryCount)+')');
var secondaryInputs = $('input:checkbox', secondaryRows);

// Indent the secondaries
secondaryRows.css({ 'margin-left':'2.5em' });

// Initial states of the secondary answers
if (primaryInput.prop('checked') == false ) {
secondaryRows.hide();
}

// A listener on the primary answer to show or hide secondary answers
primaryInput.on('change', function (event) {

// Hide/show the secondary answers accordingly
if (!$(this).is(':checked')) {
secondaryRows.hide();
secondaryInputs.prop('checked', false).trigger('change');
}
else {
secondaryRows.show();
}
});
}</syntaxhighlight>
#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. <br />So, in this example, subquestion 1 is a primary followed by 2 secondaries and subquestion 6 is a primary followed by 3 secondaries.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Sub-question 1 is primary followed by 2 secondaries
secondaryCheckboxes({QID}, 1, 2);
// Sub-question 6 is primary followed by 3 secondaries
secondaryCheckboxes({QID}, 6, 3);
});
</script></syntaxhighlight>

=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.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#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.

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

minTime(TT);

function minTime(minTime) {

var startTime = new Date();

$('#movenextbtn, #movesubmitbtn').click(function(){

var endTime = new Date();

if((endTime - startTime)/1000 <= minTime) {
alert ('You must spend at least '+minTime+' seconds on the question.');
return false;
}
else {
return true;
}
});
}
});
</script>
</syntaxhighlight>

=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''

<div class="simplebox">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.</div>

<div class="simplebox">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.</div>

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.

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].

#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.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

minChar(QQ, CC);

function minChar(qID, minChars) {

$('#movenextbtn, #movesubmitbtn').click(function(){

if($('#question'+qID+' textarea').val().replace(/ /g,'').length < minChars) {

alert ('You must enter at least '+minChars+' characters.');

return false;

}

else {

return true;

}

});

}

});

</script></syntaxhighlight>

=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.

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:

#Set up your survey to use JavaScript (See instructions [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|here]])

#Add the following script to your ''template.js'' file.

#Replace "QQ" in the function call at the end with the question ID.

#Create one or more Array (Multi Flexible Text) questions

#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);...)

<syntaxhighlight lang="javascript">$(document).ready(function() {

// A function to add or remove rows of an Array (Multi Flexible)(Text) question
function varLengthArray(qID) {

if ($('#question'+qID+'').length > 0) {

// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+]';
var removeContent = '[-]';

// Create the Add and Remove elements & insert them
var el1 = document.createElement('div');
el1.setAttribute('id','addButton'+qID);
document.body.appendChild(el1);
var el2 = document.createElement('div');
el2.setAttribute('id','removeButton'+qID);
document.body.appendChild(el2);

// Move them to after the array
$( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.question' ).parent());
$( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.question' ).parent());

// Insert their HTML
$( 'div#addButton'+qID ).html( addContent );
$( 'div#removeButton'+qID ).html( removeContent );

// Style the elements - you can modify here if you wish
$( 'div#addButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

$( 'div#removeButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

// Initially hide the Remove element
$( 'div#removeButton'+qID ).hide();

// Call the functions below when clicked
$( 'div#addButton'+qID ).click(function (event) {
addRow(qID);
});
$( 'div#removeButton'+qID ).click(function (event) {
removeRow(qID);
});

// Function to add a row, also shows the Remove element and hides the
//Add element if all rows are shown
function addRow(qID) {
var arrayRow = '#question' + qID + ' table.question tbody';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' ) {
$( 'div#addButton'+qID ).hide();
}
}

// Function to remove a row, also clears the contents of the removed row,
// shows the Add element if the last row is hidden and hides the Remove
// element if only the first row is shown
function removeRow(qID) {
var arrayRow = '#question' + qID + ' table.question tbody';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
$( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
$( 'div#addButton'+qID ).show();
if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' ) {
$( 'div#removeButton'+qID ).hide();
}
}

// Just some initialization stuff
var arrayRow = '#question' + qID + ' table.question tbody';
var rowCount = '';

// Initially hide all except first row or any rows with populated inputs
$( arrayRow ).each(function(i) {
if ( i > 0 ) {
// We also need to give the hidden rows a name cause IE doesn't
// recognize jQuery :visible selector consistently
$( this ).attr('name', 'hidden').hide();

$('input[type=text]', this).each(function(i) {
if ($(this).attr('value') != '') {
$(this).parents('tbody:eq(0)').attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
}
});
rowCount = i;
}
});
}
}

// Call the function with a question ID
varLengthArray(QQ);

});</syntaxhighlight>

''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.

<syntaxhighlight lang="javascript">$(document).ready(function() {

// A function to add or remove rows of an Array (Multi Flexible)(Text) question
function varLengthArray(qID) {

if ($('#question'+qID+'').length > 0) {

// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+]';
var removeContent = '[-]';

// Create the Add and Remove elements & insert them
var el1 = document.createElement('div');
el1.setAttribute('id','addButton'+qID);
document.body.appendChild(el1);
var el2 = document.createElement('div');
el2.setAttribute('id','removeButton'+qID);
document.body.appendChild(el2);

// Move them to after the array
$( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());
$( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());

// Insert their HTML
$( 'div#addButton'+qID ).html( addContent );
$( 'div#removeButton'+qID ).html( removeContent );

// Style the elements - you can modify here if you wish
$( 'div#addButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

$( 'div#removeButton'+qID ).css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});

// Initially hide the Remove element
$( 'div#removeButton'+qID ).hide();

// Call the functions below when clicked
$( 'div#addButton'+qID ).click(function (event) {
addRow(qID);
});
$( 'div#removeButton'+qID ).click(function (event) {
removeRow(qID);
});

// Function to add a row, also shows the Remove element and hides the
//Add element if all rows are shown
function addRow(qID) {
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' ) {
$( 'div#addButton'+qID ).hide();
}
}

// Function to remove a row, also clears the contents of the removed row,
// shows the Add element if the last row is hidden and hides the Remove
// element if only the first row is shown
function removeRow(qID) {
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
$( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
$( 'div#addButton'+qID ).show();
if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' ) {
$( 'div#removeButton'+qID ).hide();
}
}

// Just some initialization stuff
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = '';

// Initially hide all except first row or any rows with populated inputs
$( arrayRow ).each(function(i) {
if ( i > 0 ) {
// We also need to give the hidden rows a name cause IE doesn't
// recognize jQuery :visible selector consistently
$( this ).attr('name', 'hidden').hide();

$('input[type=text]', this).each(function(i) {
if ($(this).attr('value') != '') {
$(this).parents('tbody:eq(0)').attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
}
});
rowCount = i;
}
});
}
}

// Call the function with a question ID
varLengthArray(QQ);

});</syntaxhighlight>

=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.

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:
#Set up your survey to use JavaScript. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|documentation here]])
#Create one or more Array questions
#In the source of the first array question add the following script.
#Replace "QQ" in the function call at the end of the script with the question ID of the array you would like to manipulate.
#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);...)

<syntaxhighlight lang="javascript">
<script type="text/javascript">

$(document).ready(function() {

// A function to show subsequent rows of an array as options are checked
function expandingArray(qID) {

// Build an array of the question rows
var arrayRow = '#question' + qID + ' table.question tbody tr';

// Initially hide all rows unless an input was previously checked
$( arrayRow ).each(function(i) {

if ( $( arrayRow + ':eq(' + i + ') input.radio:checked' ).length != 0 ) {
$(this).attr('name', 'clickedRow');
}
else {
$(this).attr('name', 'hidden').hide();
}
});

// Now show the first hidden row
addRow();

// Add another row when an option is checked for the first time
$( '#question' + qID + ' td.answer input.radio' ).click(function (event) {

if ($(this).parents('tr:eq(0)').attr('name') != 'clickedRow') {
addRow();
$(this).parents('tr:eq(0)').attr('name', 'clickedRow');
}

// The original function of the click event
checkconditions(this.value, this.name, this.type);
});

// Add another row when an table cell is clicked for the first time
$( '#question' + qID + ' table.question tbody td' ).click(function (event) {

if ($(this).parents('tr:eq(0)').attr('name') != 'clickedRow') {
addRow();
$(this).parents('tr:eq(0)').attr('name', 'clickedRow');
}
});

// Function to add a row
function addRow() {
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
// Now, scroll down
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
}
}

// Call the function with a question ID
expandingArray(QQ);

});
</script></syntaxhighlight>

=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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create an Array type question.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedCode" value as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {

// The subquestion code to place in the last position
var fixedCode = 'A1';

// Identify this question
var q1ID = {QID};
var thisQuestion = $('#question'+q1ID);

// Move the "fixed" row to the end
$('table.subquestion-list tbody', thisQuestion).append($('tr[id$="X'+q1ID+fixedCode+'"]'));

// Fix up the array row background colours
$('tr.answers-list', thisQuestion).each(function(i){
$(this).removeClass('array1 array2').addClass('array'+(2-(i%2)));
});

});
</script></syntaxhighlight>

'''Download sample survey:'''<br />
[[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:

[[File:random_336x179gif.gif]]

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)

[[File:Partially_Randomized_Answers_1.png]]

Implementation is as follows:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' li.answer-item').length;

// Place the last answer created at the end of the list
var answer = $( 'input[id$="X'+qID+ansCount+'"]');
var answerItem = $(answer).closest('li');
var answersList = $(answer).closest('ul');
$(answersList).append(answerItem);

});
</script></syntaxhighlight>

'''Download sample survey:'''<br />
[[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:

[[File:Random v2.50.png]]

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)

[[File:Random answers v2.50.png]]

==LimeSurvey version 2.06==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedAnswers" and "otherFixed" variables as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// The number of answers to be fixed at the end of the list
var fixedAnswers = 2;

// Set this to "true" if you want "Other" to be fixed in the last position
var otherFixed = false;

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' li.answer-item').length;
if($('#question'+qID+' input[type="text"]').length > 0) {
ansCount = ansCount -1
}

// Place the last n answers created at the end of the list
var fixedIndex = fixedAnswers - 1;
for (var i=0; i<fixedAnswers; i++) {
var answer = $( 'input[id$="X'+qID+(ansCount-fixedIndex)+'"]');
var answerItem = $(answer).closest('li');
var answersList = $(answer).closest('ul');
$(answersList).append(answerItem);
fixedIndex--;
}

// Handle "Other"
if(otherFixed == true && $('#question'+qID+' input[type="text"]').length > 0) {
var otherAnswer = $('#question'+qID+' input[type="text"]');
var otherAnswerItem = $(otherAnswer ).closest('li');
var otherAnswersList = $(otherAnswer ).closest('ul');
$(otherAnswersList).append(otherAnswerItem);
}
});
</script></syntaxhighlight>

<br /><br />
==LimeSurvey version 2.73.0:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedAnswers" and "otherFixed" variables as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// The number of answers to be fixed at the end of the list
var fixedAnswers = 2;

// Set this to "true" if you want "Other" to be fixed in the last position
var otherFixed = false;

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' .answer-item').length;
if($('#question'+qID+' input[type="text"]').length > 0) {
ansCount = ansCount -1
}

// Place the last n answers created at the end of the list
var fixedIndex = fixedAnswers - 1;
for (var i=0; i<fixedAnswers; i++) {
var answer = $('input[id^="answer"][id$="X'+qID+'s'+(ansCount-fixedIndex)+'"]');
var answerItem = $(answer).closest('.answer-item');
var answersList = $(answer).closest('.answers-list');
if($('#question'+qID).hasClass('multiple-opt')) {
answer = $('input[id^="answer"][id$="X'+qID+(ansCount-fixedIndex)+'"]');
answerItem = $(answer).closest('.answer-item').parent();
answersList = $(answer).closest('.subquestion-list');
}
$(answersList).append(answerItem);
fixedIndex--;
}

// Handle "Other"
if(otherFixed == true && $('#question'+qID+' input[type="text"]').length > 0) {
var otherAnswer = $('#question'+qID+' input[type="text"]');
var otherAnswerItem = $(otherAnswer ).closest('.answer-item');
var otherAnswersList = $(otherAnswer ).closest('.answers-list');
if($('#question'+qID).hasClass('multiple-opt')) {
otherAnswerItem = $(otherAnswer ).closest('.answer-item').parent();
otherAnswersList = $(otherAnswer ).closest('.subquestion-list');
}
$(otherAnswersList).append(otherAnswerItem);
}
});
</script></syntaxhighlight>

<br /><br />
==LimeSurvey version 3.x:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]]
#Create a Multiple Options or List (radio) question with sequential response codes.
#Set the "Random order" question setting to "Randomize on each page load".
#Place the following script in the source of the question.
#Modify the "fixedAnswers" and "otherFixed" variables as required.
<br />
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).on('ready pjax:scriptcomplete',function(){

// The number of answers to be fixed at the end of the list
var fixedAnswers = 2;

// Set this to "true" if you want "Other" to be fixed in the last position
var otherFixed = false;

// Identify this question
var qID = {QID};

// Find the number of answers
var ansCount = $('#question'+qID+' .answer-item').length;
if($('#question'+qID+' input[type="text"]').length > 0) {
ansCount = ansCount -1
}
console.log(ansCount);

// Place the last n answers created at the end of the list
var fixedIndex = fixedAnswers - 1;
for (var i=0; i<fixedAnswers; i++) {
var answer = $('input[id^="answer"][id$="X'+qID+(ansCount-fixedIndex)+'"]');
var answerItem = $(answer).closest('.answer-item');
var answersList = $(answer).closest('ul');
$(answersList).append(answerItem);
fixedIndex--;
}

// Handle "Other"
if(otherFixed == true && $('#question'+qID+' input[type="text"]').length > 0) {
var otherAnswer = $('#question'+qID+' input[type="text"]');
var otherAnswerItem = $(otherAnswer ).closest('.answer-item');
var otherAnswersList = $(otherAnswer ).closest('ul');
$(otherAnswersList).append(otherAnswerItem);
}
});
</script></syntaxhighlight>

=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 [http://www.partnersinc.biz/surveys//index.php?sid=89344&newtest=Y&lang=en here].

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

[[File:random_700x154.png]]

Implementation is as follows:
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])
#Create one or more List (dropdown) questions with sequential response codes. Set the [[Advanced question settings#random order|random_order question attribute]] to 1.
#In the source of the first question add the following onload function. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]])
#Replace the ID question at the end of the function call.

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Function to allow randomization of all answers
//except the last one in List/dropdown questions
function partRandDD(qID) {

// Find the last answer option
var ansCount = $( 'div#question' + qID + ' select option' ).length - 1;

// Place the last answer option at the end of the list
$( 'div#question' + qID + ' select option[value="' + ansCount + '"]' )
.appendTo($( 'div#question' + qID + ' select' ));
}

// Call the function with the qID (replace the qID eg. partRandDD(244))
partRandDD(qID);
//If you want to apply it to more questions on the same page simply add more calls with the appropriate IDs.
partRandDD(qID);
});
</script></syntaxhighlight>

=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)

[[File:random_700x154.png]]

Implementation is as follows:
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions. (See [[Optional settings#Security|documentation here]])
#Create one or more Multiple numerical input question with sequential response codes. Set the [[Advanced question settings#random order|random_order question attribute]] to 1.
#In the source of the first question add the following onload function. (See [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]])
#Replace "SSSSS", "GG", "QQ" in the function call at the end with the survey ID, group ID and question ID respectively.
#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); ...)

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Function to allow randomization of all answers except the last one in multiple numeric input questions
function partRand(sID, gID, qID) {

// Find the number of answers
var ansCount = ''
$( 'div#question' + qID + ' div.answers li' ).each(function(i) {
ansCount = (i - 1);
});

// Place the last answer created at the end of the list - but before the first helping sum
$( 'li#javatbd' + sID + 'X' + gID + 'X' + qID + ansCount + '' ).insertBefore($( 'div#question' + qID + ' div.answers li.multiplenumerichelp' ).first());

}

// Call the function with the SID, GID and QID
partRand(SID, GID, QID);

});

</script></syntaxhighlight>

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 (<nowiki><ul></nowiki>) 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=

{{Hint|Text=With Expression manager, you can use [[Expression_Manager_Examples#Using_em_validation_q_in_array|Using em_validation_q in array]] system.}}

''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 [http://www.partnersinc.biz/surveys//index.php?sid=26842&newtest=Y&lang=en 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:
#Turn off ''$filterxsshtml'' to allow insertion of JavaScript in the questions (see [[Optional settings#Security|documentation here]]).
#Create the array question.
#In the source of the array question add the following script (see [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|How to use script here]]).
#Modify the warningText (line10)as required.
#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.

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function () {

// Interrupt the submit function
$('form#limesurvey').submit(function () {

// Override the built-in "disable navigation buttons" feature
$('#moveprevbtn, #movenextbtn, #movesubmitbtn').attr('disabled', '');

var empty = 0;
var warningText = 'Please complete the highlighted inputs.';

// Call the mandatory row function with question IDs and row numbers
mandatoryRow(QQ, 1);
mandatoryRow(QQ, 3);

// A function to render rows of an array mandatory
function mandatoryRow(qID, rowNum) {

$('div#question' + qID + ' table.question tbody[id^="javatbd"]:eq(' + Number(rowNum - 1) + ') input[type="text"]').each(function (i) {

if ($(this).val() == '') {
$(this).css('background-color', 'pink');
empty = 1;
}
else {
$(this).css('background-color', '#FFFFFF');
}
});
}

if (empty == 1) {
alert(warningText);
return false;
}
else {
return true;
}
});

});

</script></syntaxhighlight>

=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|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:

<syntaxhighlight lang="javascript">

Please have a look at this picture:

<br />

<script>

$(document).ready(

function(){

// Find a random number (here between 1 and 4)

var randNumber = Math.floor(Math.random()*4 + 1);

// Save the number as answer of this question

$('input#answerSSSSSXGGXQQ').val(randNumber);

// Hide this answer field

document.getElementById("answerSSSSSXGGXQQ").style.display='none';

// Show the picture

picString = '<img src="pic/' + String(randNumber) + '.jpg">';

document.getElementById('pic').innerHTML = picString;

}

);</script>

<p>

</p>

<div id="pic">

</div>

</syntaxhighlight>

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):

<syntaxhighlight lang="javascript">

You saw picture number {INSERTANS:SSSSSXGGXQQ}.

</syntaxhighlight>

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:

<syntaxhighlight lang="javascript">

Here you see the picture again: <br>

<script>

$(document).ready(

function(){

// Get the picture number from previous question

var randNumber = "{INSERTANS:SSSSSXGGXQQ}";

// Show picture

picString = '<img width="100" height="100" src="pic/' + String(randNumber) + '.jpg">';

document.getElementById('pic').innerHTML = picString;

}

);</script>

<div id="pic">

</div>

</syntaxhighlight>

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

''Tested in 1.85+''

<div class="simplebox">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.</div>

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:

<syntaxhighlight lang="javascript">

<script type="text/javascript" charset="utf-8">

function Custom_On_Load(){

document.getElementById('answer1000X10X11').value='{TOKEN:ATTRIBUTE_1}';

document.getElementById('answer1000X10X11').readOnly=1;

}

</script>

</syntaxhighlight>

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:

<syntaxhighlight lang="javascript">

document.getElementById('question85').style.display='none';

document.getElementById('display85').value='';

</syntaxhighlight>

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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use script]].
#Create the array question.
#In the source of the array question add the following script.
#Replace"QQ" with the question ID and "CC" with the column number to be checked.

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// A function to pre-check a column of an array
function checkedDefault(qID, column) {
var checkedCol = column - 1;
$('#question'+qID+' tr.subquestions-list').each(function(i) {
if ($('input.checkbox:checked', this).length == 0) {
$('input.checkbox:eq('+checkedCol+')', this).prop('checked', true);
$('input.checkbox:eq('+checkedCol+')', this).parent().find('input[type="hidden"]').val(1);
}
});
}
// Call the function with a question ID and column number
checkedDefault(QQ, CC);
});

</script></syntaxhighlight>

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

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

'''Overview'''<br />
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:'''
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use script]].
#Create the array question.
#In the source of the array question add the following script.
#Adjust "''defaultAnsweredScale''" and "''defaultAnsweredColumn''" as necessary.

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Scale to set the default answer on
var defaultAnsweredScale = 2;
// Column of that scale to set as default answer
var defaultAnsweredColumn = 3;

// Identify this question
var thisQuestion = $('#question{self.qid}');

// Identify the scales and columns
$('.answer-item[class^="answer_cell_1"]', thisQuestion).addClass('scale-1-item');
$('.answer-item[class^="answer_cell_2"]', thisQuestion).addClass('scale-2-item');
$('tr.answers-list', thisQuestion).each(function(i) {
$('.scale-1-item', this).each(function(i) {
$(this).addClass('scale-1-column-'+(i+1)+'-item');
});
$('.scale-2-item', this).each(function(i) {
$(this).addClass('scale-2-column-'+(i+1)+'-item');
});
});

// Click the default answers
$('tr.answers-list', thisQuestion).each(function(i) {
if($('.scale-'+defaultAnsweredScale+'-item input[type="radio"]:checked', this).length == 0) {
$('.scale-'+defaultAnsweredScale+'-column-'+defaultAnsweredColumn+'-item input[type="radio"]:last', this).click();
}
});
});
</script></syntaxhighlight>

'''Download sample survey:'''<br />
[[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''

<div class="simplebox">As of version 1.92, group view time is accurately recorded in the timings table if you choose the Record Timings survey option.</div>

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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#In the group, create a short-text question. We will hide this later with JavaScript and populate it with the elapsed time.
#Place the following script in the source of the short-text question.
#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.

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

// call the functions with the hidden timer question ID

runTimer(QQ);

function runTimer(timeQID) {

$('#question'+timeQID).hide();

var initSec = '0';

// Check for elapsed time from previous visits

if ($('#question'+timeQID+' input.text').val()) {

var initTime = $('#question'+timeQID+' input.text').val();

initTimeArr = initTime.split(':');

initSec = Number[[initTimeArr[0]*3600]]+Number[[initTimeArr[1]*60]]+Number(initTimeArr[2]);

}

// Run the timer update function

recordTime(initSec, timeQID);

}

});

// Timer update function

function recordTime(elapsedSec, timeQID){

elapsedSec++;

var h = Math.floor(elapsedSec / 3600);

var m = Math.floor(elapsedSec % 3600 / 60);

var s = Math.floor(elapsedSec % 3600 % 60);

var elapsedTime = [[h > 0 ? h + ":" : "00:") + (m > 0 ? (m < 10 ? "0" : "") + m + ":" : "00:") + (s < 10 ? "0" : "") + s);

$('#question'+timeQID+' input.text').val(elapsedTime);

// Run the timer update function every second

setTimeout('recordTime('+elapsedSec+', '+timeQID+')',1000);

}

</script>

</syntaxhighlight>

=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 [http://www.partnersinc.biz/surveys//index.php?sid=33613&newtest=Y&lang=en demonstrated here].

Implementation is as follows:

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Set the survey to run in "all in one" mode.
#Add your groups and questions.
#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:

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

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

// Insert show/hide divs before all group wrapper divs
$('<div class="groupToggler"><span></span></div>').insertBefore('div[id^="group-"]');

// Add some text to the show/hide divs
$('.groupToggler span').each(function(i) {
($( this ).text('Show/Hide Group '+(i+1)+''));
});

// Add some styles to the show/hide divs
$('.groupToggler').css({
'padding':'5px 0 10px 0',
'text-align':'center'
});
$('.groupToggler span').css({
'text-decoration':'underline',
'cursor':'pointer'
});

// Add some hover effects to the show/hide divs
$(".groupToggler span").hover(
function () {
$(this).css({
'text-decoration':'none',
'font-weight':'bold'
});
},
function () {
$(this).css({
'text-decoration':'underline',
'font-weight':'normal'
});
}
);

// Initially hide all of the groups
// Toggle their visibility when the show/hide is clicked
$('.groupToggler span').click(function() {
$(this).parent().next().toggle();
return false;
}).parent().next().hide();

// Display any groups that have unanswered mandatories
$('.errormandatory').parents('div[id^="group-"]').show();

// Some tidying up
$('h1').next().next().hide();
$('.surveywelcome').css({
'margin-bottom':'10px'
});
$('.surveywelcome').next().hide();
$('.surveywelcome').next().next().hide();

});

</script></syntaxhighlight>

=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 [http://jqueryui.com/demos/autocomplete/ 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

<syntaxhighlight lang="css">/* Autocomplete styles */

ul.ui-autocomplete {
width: 250px !important;
padding: 5px 10px;
list-style: none;
}</syntaxhighlight>

'''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)

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var q1ID = 'QQ';

var states = "Alabama,Alaska,Arizona,Arkansas,California,Colorado,Connecticut,Delaware, District of Columbia,Florida,Georgia,Hawaii,Idaho,Illinois,Indiana,Iowa,Kansas,Kentucky, Louisiana,Maine,Montana,Nebraska,Nevada,New Hampshire,New Jersey,New Mexico,New York, North Carolina,North Dakota,Ohio,Oklahoma,Oregon,Maryland,Massachusetts,Michigan, Minnesota,Mississippi,Missouri,Pennsylvania,Rhode Island,South Carolina,South Dakota, Tennessee,Texas,Utah,Vermont,Virginia,Washington,West Virginia,Wisconsin,Wyoming".split(',');

$('#question'+q1ID+' input.text').autocomplete({
source: states
});

});

</script></syntaxhighlight>

'''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:

<syntaxhighlight lang="php"><?php

$countriesArr = array();

$file_handle = fopen("countries2.csv", "r");

while (!feof($file_handle) ) {
$line_of_text = fgetcsv($file_handle);
array_push($countriesArr, $line_of_text[0]);
}

fclose($file_handle);

echo json_encode($countriesArr);

?></syntaxhighlight>

JavaScript code:

<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = QQ;
var url = "templates/yourTemplate/countries.php";
var dataArr = [];

$.getJSON(url,function(data){

$.each(data,function(i, item){
dataArr.push(item);
});

$('#question'+qID+' input.text').autocomplete({
source: dataArr
});

});

});

</script></syntaxhighlight>

<br />
== 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:'''
<ol><li>Download the jQuery Autocomplete widget</li>
<li>Add special autocomplete styling to the survey template (tested with the Skeletonquest template by Denis Chenu)</li>
</ol>

This workaround builds on the previous examples, but is updated for use with newer versions of LimeSurvey. Note that the [http://jqueryui.com/demos/autocomplete/ Autocomplete widget] is already included in LimeSurvey, as part of jQuery UI.

<br />
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.

<br />
'''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 [http://jqueryui.com/demos/autocomplete/ jQuery website] for example):

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 1;

$('#question'+qID+' input[type="text"]').autocomplete({
minLength: 2, // This line is optional, signifies number of keystrokes before autocomplete is initiated
source: ["Test1","Test2","Test3"]
});

});

</script>
</syntaxhighlight>

<br />
'''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:
<ol><li>A comma-separated data file (CSV)</li>
<li>The [https://code.google.com/p/jquery-csv/ jquery.csv.js plugin] (v0.71)</li>
</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 <strong>before</strong> {TEMPLATEJS}.

<syntaxhighlight lang="html5">
<script type="text/javascript" src="{TEMPLATEURL}jquery.csv.js"></script>
</syntaxhighlight>

<br />
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 <strong>semicolon</strong>, 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:

<syntaxhighlight lang="javascript">
41 $.csv = {
42 defaults: {
43 separator:',', // Change this to: separator:';',
44 delimiter:'"',
45 headers:true
46 },
</syntaxhighlight>

<br />
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:

<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 1;

var surveyRoot = location.pathname.split('index.php')[0];
var url = surveyRoot+'datafile.csv';

// Create an array to hold the data
var testArr = new Array();

// Grab the CSV contents
$.get(url,function(data){

// Convert CSV contents to an array of arrays
fullArray = $.csv.toArrays(data);

// Load the data array
$(fullArray).each(function(i, item){
testArr.push(item[0]);
});

// Initialise the autocomplete plugin
$('#question'+qID+' input.text').autocomplete({
source: testArr
});

// console.log(data); This would be a gould place to put your debugging script. Remember to comment out or remove before going into production, to economize on server workload
});
});

</script>
</syntaxhighlight>

<br />
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 <strong>console.log(data);</strong> 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.

<br />
'''3. Input from a MySQL database (trickiest, but also the most versatile and secure).'''
<br />This method requires the following:
<ol><li>Access to a MySQL database (tested with MySQL 5.5)</li>
<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):
<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qID = 1;

$('#question'+qID+' input[type="text"]').autocomplete({
minLength: 2, // This line is optional, signifies number of keystrokes before autocomplete is initiated
source: 'autocomplete.php'
});

});

</script>
</syntaxhighlight>

<br />
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:

<syntaxhighlight lang="php">
<?php
// Login credentials
define('DB_SERVER', "localhost");
define('DB_USER', "username");
define('DB_PASSWORD', "password");
define('DB_DATABASE', "database_name");
define('DB_DRIVER', "mysql");
?>
</syntaxhighlight>

<br />
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):

<syntaxhighlight lang="php">
<?php

// Connect and query MySQL database, using PDO
try {
$db = new PDO(DB_DRIVER . ":dbname=" . DB_DATABASE . ";host=" . DB_SERVER . ";charset=utf8", DB_USER, DB_PASSWORD);
}

catch(PDOException $e) {
echo $e->getMessage();
}

$return_arr = array();

if ($db)
{
$ac_term = "%".$_GET['term']."%";
$query = "SELECT * FROM table_name WHERE column_name LIKE :term";
$result = $db->prepare($query);
$result->bindValue(":term",$ac_term);
$result->execute();

// Fetch data and store in array
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
$row_array['label'] = $row['column_name'];
$row_array['value'] = $row['column_name'];

array_push($return_arr,$row_array);
}
}
</syntaxhighlight>

<br />
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:

<syntaxhighlight lang="php">
<?php

// Include files outside of webroot
set_include_path('/var/www/surveys/test-survey');

// Fetch database credentials
require_once ('constant.php');

// Connect to database and perform query
require_once ('database.php');

// Clear query
$db = null;

// Encode results in JSON. This is required for jquery autocomplete
echo json_encode($return_arr);

?>
</syntaxhighlight>

<br />
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.
<br />

== Use autocomplete to populate several fields==

''Tested with: 1.91+, IE 7/8/9, Firefox 18''

This workaround uses the [http://jqueryui.com/demos/autocomplete/ Autocomplete widget] included with jQuery UI and the [https://code.google.com/p/jquery-csv/downloads/list 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 [https://code.google.com/p/jquery-csv/downloads/list 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<syntaxhighlight lang="php"><script type="text/javascript" src="{TEMPLATEURL}jquery.csv.js"></script></syntaxhighlight>
*Create your CSV file with 3 columns (name, ID, email) as in this example and place it in your template folder<syntaxhighlight lang="php">Bob, Bob's ID, Bob's email

Andy, Andy's ID, Andy's email

Sam, Sam's ID, Sam's email

Tony, Tony's ID, Tony's email

Fred, Fred's ID, Fred's email</syntaxhighlight>
*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<syntaxhighlight lang="php">/* Autocomplete styles */

ul.ui-autocomplete {

width: 250px !important;

padding: 5px 10px;

list-style: none;

}</syntaxhighlight>
*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<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

var qNameID = NN;

var qIDID = II;

var qEmailID = EE;

var url = "upload/templates/yourTemplate/yourCsvFile.csv";

// Create an array to hold the names
var namesArr = new Array();

// Grab the CSV contents
$.get(url,function(data){

// Convert CSV contents to an array of arrays
fullArray = $.csv.toArrays(data);

// Load the names array
$(fullArray).each(function(i, item){
namesArr.push(item[0]);
});

// Initialise the autocomplete plugin
$('#question'+qNameID+' input.text').autocomplete({
source: namesArr,
// Event fired when a selection is made (ui.item.value refers to the selected item)
select: function(event, ui) {
// Find the "ID" and "Email" values associated with the selected name value and load those questions
$(fullArray).each(function(i, item){
if(item[0] == ui.item.value) {
// The value from column 2 of the CSV
$('#question'+qIDID+' input.text').val(item[1]);
// The value from column 3 of the CSV
$('#question'+qEmailID+' input.text').val(item[2]);
}
});
}
});
});
});

</script></syntaxhighlight>

=Create MaxDiff question type=

See the [[Workarounds: Question design, layout and templating|Question design, layout and templating]] section for a workaround that uses JavaScript to convert an '''''Array (flexible labels) by column''''' question into a [http://en.wikipedia.org/wiki/MaxDiff MaxDiff] question type.

[[File:max_diff_596x253.gif]]

=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.

<syntaxhighlight lang="php">

<script>

numColumns=13;

numRows=18;

questionId='28417X2X24';

specialColumns=[1,12,13];

function action(obj){

locator=obj.id.replace('cbox_'+questionId, '').split('_');

row=locator[0];

column=locator[1];

//alert('Action for row,column='+row+','+column);

my_id='#cbox_'+questionId+row+'_'+column+''

if($(my_id).attr('checked') == false) {

for( var i=1; i<=numColumns; i++ ) {

if(i==column) continue;

id='#cbox_'+questionId+row+'_'+i

$(id).attr('disabled',false);

}

} else {

for( var i=1; i<=numColumns; i++ ) {

if(i==column) continue;

id='#cbox_'+questionId+row+'_'+i

aid='#answer'+questionId+row+'_'+i

$(aid).val(0);

$(id).attr('checked',false);

$(id).attr('disabled',true);

}

}

}

function customOnLoad(){

for( var row=1; row<=numRows; row++ ) {

for( var k=0; k<specialColumns.length; k++ )

{

column=specialColumns[k];

$('#cbox_'+questionId+row+'_'+column).change(function() {

action(this);

});

}

}

}

jQuery(document).ready(

function(){

customOnLoad();

}

);

</script>

</syntaxhighlight>

=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:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following script in the source of the array question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Call the exclude function using question ID
excludeOpt({QID});
});

// A function to make the last option in each array row exclusive
function excludeOpt (qID) {

var thisQuestion = $('#question'+qID)

// Add some classes to the checkbox cells
$('td.checkbox-item', thisQuestion).addClass('normalOpt');
$('tr.subquestions-list', thisQuestion).each(function(i) {
$('.normalOpt:last', this).removeClass('normalOpt').addClass('exlusiveOpt')
});

// A listener on the checkbox cells
$('td.checkbox-item', thisQuestion).click(function (event) {
handleExclusive($(this));
});

// A listener on the checkboxes
$('td.checkbox-item input[type="checkbox"]', thisQuestion).click(function (event) {
handleExclusive($(this).closest('td'));
});

function handleExclusive(thisCell) {

var thisRow = $(thisCell).closest('tr');

// Uncheck the appropriate boxes in a row
if ($(thisCell).hasClass('normalOpt')) {
$('.exlusiveOpt input[type="checkbox"]', thisRow).attr('checked', false);
}
else {
$('.normalOpt input[type="checkbox"]', thisRow).attr('checked', false);
}

// Check conditions (relevance)
$('td.checkbox-item', thisRow).each(function(i) {
var thisValue = '';
if($('input[type="checkbox"]', this).is(':checked')) {
thisValue = 1;
}
var thisSGQA = $('input[type="checkbox"]', this).attr('id').replace(/cbox_/, '');

$('input[type="hidden"]', this).attr('value', thisValue);
fixnum_checkconditions(thisValue, thisSGQA, 'hidden');
});
}
}
</script></syntaxhighlight>

==Implementation LS Version 3.x:==
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following script in the source of the array question.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){

var thisQuestion = $('#question{QID}')

// Add some classes to the checkbox cells
$('td.checkbox-item:last-child', thisQuestion).addClass('exclusive-item');

// A function to un-check boxes
function resetCheckbox(thisItem) {
$(':hidden', thisItem).val('');
$(':checkbox', thisItem).prop('checked', false).trigger('change');
}

// A listener on the checkboxes
$(':checkbox', thisQuestion).on('change', function(e) {
if($(this).is(':checked')) {
var thisItem = $(this).closest('.answer-item');
var thisRow = $(this).closest('tr');
var items = $('td.answer-item.exclusive-item', thisRow);
if($(thisItem).hasClass('exclusive-item')) {
items = $('td.answer-item:not(.exclusive-item)', thisRow);
}
$.each(items, function(i, el) {
resetCheckbox(el);
});
}
});
});
</script></syntaxhighlight>

=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.

<syntaxhighlight lang="javascript">
$(document).ready(function() {

// Insert a new div after the progress bar
$('<div id="navigator2" />').insertAfter('#progress-wrapper');

// Style the new div
$('#navigator2').css({
'text-align':'center'
});

// Insert clones of the nav buttons in the new div
$('input.submit:eq(0)').clone().appendTo('#navigator2');
$('input.submit:eq(2)').clone().appendTo('#navigator2');

// Give the new buttons some new IDs
$('#navigator2 input.submit').each(function(i) {
var oldID = $(this).attr('id');
var newID = oldID + '2';
$(this).attr('id', newID)
});
});</syntaxhighlight>

[[File:extra_buttons.png]]

=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.

[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|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.

<syntaxhighlight lang="php"> <script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Find the survey ID
if($('input#fieldnames').length != 0) {
var fieldNames = $('input#fieldnames').attr('value');
var tmp = fieldNames.split('X');
var sID = tmp[0];
}

// Insert a new div after the progress bar
$('<div id="optOutLink" />').insertBefore('#progress-wrapper');

// Style the new div
$('#optOutLink').css({
'text-align':'center'
});

// Insert opt out url in the new div
$('#optOutLink').html('<p><a href="optout.php?lang=en&sid;='+sID+'&token;={TOKEN}">Click here to opt out of this survey.</a></p><br>');

});

</script></syntaxhighlight>

=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:
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following code in the source of a short text question.
#Optional: you can also add other select field to avoid collisions (e.g. for large population sample)

<syntaxhighlight lang="php">

<p>This answers are used to generate your ID. These information will be encrypted, it will not be possible in any case to identify you neither from your answers nor from your ID.</p>

<table>

<tr>

<td>Initial of your name</td>

<td>

<select id="field1">

<option value=""></option>

<option value="A">A</option>

<option value="B">B</option>

<option value="C">C</option>

<option value="D">D</option>

<option value="E">E</option>

<option value="F">F</option>

<option value="G">G</option>

<option value="H">H</option>

<option value="I">I</option>

<option value="J">J</option>

<option value="K">K</option>

<option value="L">L</option>

<option value="M">M</option>

<option value="N">N</option>

<option value="O">O</option>

<option value="P">P</option>

<option value="Q">Q</option>

<option value="R">R</option>

<option value="S">S</option>

<option value="T">T</option>

<option value="U">U</option>

<option value="V">V</option>

<option value="W">W</option>

<option value="X">X</option>

<option value="Y">Y</option>

<option value="Z">Z</option>

</select>

</td>

</tr>

<tr>

<td>Your birth month</td>

<td>

<select id="field2">

<option value=""></option>

<option value="01">January</option>

<option value="02">February</option>

<option value="03">March</option>

<option value="04">April</option>

<option value="05">May</option>

<option value="06">June</option>

<option value="07">July</option>

<option value="08">August</option>

<option value="09">September</option>

<option value="10">October</option>

<option value="11">November</option>

<option value="12">December</option>

</select>

<td>

</tr>

</table>

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

<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);

}

});

</script>

</syntaxhighlight>

=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.

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Call the phone function with the question ID and the row number

phoneTest(QQ, NN);

function phoneTest(qID, inputNum) {

// Interrupt next/submit function

$('#movenextbtn, #movesubmitbtn').click(function(){

// Some vars - modify as required

var phoneMatch = /^[0-9,+,(), ,]{1,}(,[0-9]+){0,}$/;

var msg1 = 'Please enter a valid phone number.';

// Test the input

var phoneInput = $('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val();

if(phoneInput != '' && !phoneMatch.test(phoneInput)) {

alert(msg1);

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'pink' });

return false;

}

else {

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'' });

return true;

}

});

}

});

</script>

</syntaxhighlight>

The regex is from: [http://www.regexlib.com/REDetails.aspx?regexp_id=1136 regexlib.com blank]

=Check validity of email address in subquestion=

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

<div class="simplebox">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.<br />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</div>

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.

<syntaxhighlight lang="php">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Call the email function with the question ID and the row number

emailTest(QQ, NN);

function emailTest(qID, inputNum) {

// Interrupt next/submit function

$('#movenextbtn, #movesubmitbtn').click(function(){

// Some vars - modify as required

var emailMatch = /^[a-zA-Z0-9\_\-]+[a-zA-Z0-9\.\_\-]*@([a-zA-Z0-9\_\-]+\.)+([a-zA-Z]{2,4}|travel|museum)$/;

var msg1 = 'Please enter a valid email address.';

// Test the input

var emailInput = $('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val();

if(emailInput != '' && !emailMatch.test(emailInput)) {

alert(msg1);

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'pink' });

return false;

}

else {

$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({ 'background':'' });

return true;

}

});

}

});

</script>

</syntaxhighlight>

The regex is from: [http://www.regexlib.com/REDetails.aspx?regexp_id=1653 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:

<syntaxhighlight lang="php">

<script type="text/javascript">

var questionhelp="{QUESTIONHELP}";

if (questionhelp=="") {

document.write("");}

else {

document.write('<tr><td class="survey-question-help">'+ questionhelp +'</td></tr>');}

</script>

</syntaxhighlight>

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)

[[File:snap035.gif]]

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.

[[File:snap037.gif]]

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!

<syntaxhighlight lang="javascript">

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$('input[name="69965X2X10SQ001_SQ001"]').attr('disabled', 'disabled');

$('input[name="69965X2X10SQ001_SQ002"]').attr('hidden', 'hidden');

});

</script>

</syntaxhighlight>

[[File:snap039.gif]]

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.

[[File:suffix.png]]

Fig. 1: Suffix

[[File:prefix.png]]

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 €" suffix in the first column and an "in %" in the next 3 columns.

<syntaxhighlight lang="php"><script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Call the function with the question ID followed by a comma-separated list of suffixes

addSuffix(12345, 'in €', 'in %', 'in %', 'in %');

function addSuffix() {

var qID = $(arguments)[0];

// Assign some column-specific classes

$('#question'+qID+' table.question tbody tr').each(function(i){

$('td', this).each(function(i){

$(this).addClass('answerCol-'+(i+1)+'');

});

});

// Some styling

$('#question'+qID+' table.question tbody input[type="text"]').css({

'width': '50%'

});

// Insert the suffixes

$(arguments).each(function(i, val){

if(i > 0) {

$('#question'+qID+' td.answerCol-'+i+' label').append(val);

}

});

}

});

</script></syntaxhighlight>

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

<syntaxhighlight lang="php">$('#question'+qID+' td.answerCol-'+i+' label').append(val);</syntaxhighlight>

with this

<syntaxhighlight lang="php">$('#question'+qID+' td.answerCol-'+i+' label').prepend(val);</syntaxhighlight>

=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:
#Download the file at [http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js] and upload it to your survey.
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Place the following code in the source of a short text question.

<syntaxhighlight lang="javascript">
<script src="/upload/surveys/{SID}/jquery-ui-timepicker-addon.js"></script>

<script>

$(document).ready(function(){

$('#answer{SGQ}').timepicker({
timeText: 'Time', //here translation
hourText: 'hour', //here translation
minuteText: 'minute', //here translation
closeText: 'Done' //here translation
});

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

$( "<style>"
+".ui-widget-header, .ui-datepicker-current { display:none; }"
+".ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }"
+".ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }"
+" }"
+"</style>").appendTo( "head" );

});

</script></syntaxhighlight>

=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 [http://ditio.net/2010/05/02/javascript-date-difference-calculation/ 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.

<syntaxhighlight lang="php">

<script type="text/javascript">

/*

Adapted from http://ditio.net/2010/05/02/javascript-date-difference-calculation/
*/

var DateDiff = {

inDays: function(d1, d2) {

var t2 = d2.getTime();

var t1 = d1.getTime();

return parseInt[[t2-t1)/(24*3600*1000]];

},

inWeeks: function(d1, d2) {

var t2 = d2.getTime();

var t1 = d1.getTime();

return parseInt[[t2-t1)/(24*3600*1000*7]];

},

inMonths: function(d1, d2) {

var d1Y = d1.getFullYear();

var d2Y = d2.getFullYear();

var d1M = d1.getMonth();

var d2M = d2.getMonth();

return (d2M+12*d2Y)-(d1M+12*d1Y);

},

inYears: function(d1, d2) {

return d2.getFullYear()-d1.getFullYear();

}

}

d1 = new Date({substr(DD,0,4)}, {substr(DD,5,2)}, {substr(DD,8,2)});

d2 = new Date({substr(D2,0,4)}, {substr(D2,5,2)}, {substr(D2,8,2)});

// Displays result

document.write("<br />Number of <b>days</b>: "+DateDiff.inDays(d1, d2));

document.write("<br />Number of <b>weeks</b>: "+DateDiff.inWeeks(d1, d2));

document.write("<br />Number of <b>months</b>: "+DateDiff.inMonths(d1, d2));

document.write("<br />Number of <b>years</b>: "+DateDiff.inYears(d1, d2));

// filled the numerical input with number of days (or nights)

var nDays = +DateDiff.inDays(d1, d2);

jQuery(document).ready(function() {

$(".numeric:eq(0) input.text").val(nDays);

$(".numeric:eq(0) input.text").attr('readonly','readonly');

// check if d2 > d1

$('#movenextbtn').hide();

$('#movesubmitbtn').hide();

if(nDays >= 0){

// automatic submit (uncomment if needed)

// document.limesurvey.submit();

// $('body').hide();

}

else alert("Check out date must be posterior than Check in\nPlease return to the previous page and edit your answers");

});

</script>

</syntaxhighlight>

=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.

<syntaxhighlight lang="php">
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
'use strict';
var qID1 = QQ1,
qID2 = QQ2,
q1 = $('#question' + 'QQ1' + ' .popupdate'),
q2 = $('#question' + 'QQ2' + ' .popupdate');

//if q1 loses focus, its value is taken and used as minDate in q2
q1.datepicker("option", "onClose", function (datum){
q2.datepicker( "option", "minDate", datum );
});
//q2 gets today as its maxDate
q2.datepicker( 'option', 'maxDate', new Date() );
});
</script>
</syntaxhighlight>

=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}.

<syntaxhighlight lang="javascript">
<tr><td class="survey-question-help" id=help_{QUESTION_NUMBER}>{QUESTIONHELP}</td></tr>
</syntaxhighlight>

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.

<syntaxhighlight lang="javascript">
<script>
$(document).ready(function(){
if($('#help_{QUESTION_NUMBER}').is(':empty')){
$('#help_{QUESTION_NUMBER}').hide();
}
});
</script>
</syntaxhighlight>

= 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.<br /><br />

[[File:Iat_1.png]]<br /><br />

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

Implementation is as follows:

1) [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].

2) Create your Array (Texts) with subquestions as follows:<br />
- Y scale - all of your "attribut" words or phrases<br />
- X scale - "Key Pressed" and "Elapsed Time (ms)"<br />
[[File:Iat_2.jpg]]

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:<br />
- Left association term<br />
- Right association term<br />
- Instructional text<br />
- Finished text<br />
[[File:Iat_3.png]]

4) Add the following to the end of template.js:<syntaxhighlight lang="javascript">
// A plugin to insert an IAT interface
function implicitAssociation(el, showAnswers) {

$(el).each(function() {

var thisQuestion = $(this);
var thisQuestionHelp = $('img[src$="help.gif"]', thisQuestion).parent();
var thisQuestionAnswers = $('table.question', thisQuestion).parent();
var startTime = '';
var endTime = '';
var agent = navigator.userAgent.toLowerCase();
var mobile = false;
if( /android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent) ) { // Mobile devices
mobile = true;
}

// Some classes
$(thisQuestion).addClass('iatQuestion');
$('.subquestion-list').addClass('unanswered');

// Hide the question help element
$(thisQuestionHelp).hide();

// Hide the answers
if(showAnswers != true) {
$('table.question', thisQuestion).hide();
}

// Insert IAT display
var iatTexts = $(thisQuestionHelp).text().split('||');
var iatDisplayHTML = '<div class="iatWrapper">\
<div class="iatLeftLabel">'+iatTexts[0]+'</div>\
<div class="iatRightLabel">'+iatTexts[1]+'</div>\
<div class="iatWord"></div>\
<div class="iatInstructions">'+iatTexts[2]+'</div>\
</div>\
<div class="iatMobileButtonWrapper">\
<div class="iatButton iatLeftButton">E</div>\
<div class="iatButton iatRightButton">I</div>\
<div style="width:100%; clear:both;"></div>\
</div>';
$(thisQuestionAnswers).prepend(iatDisplayHTML);

// Show a word
function iatShowWord() {
$('div.iatWord', thisQuestion).text($('.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$(document).bind('keypress.iatKeypress', function(e) {
if(e.which == 101 || e.which == 105) {
var thisRow = $('.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
if(e.which == 101) {
$('input[type="text"]:eq(0)', thisRow).val('E');
}
else {
$('input[type="text"]:eq(0)', thisRow).val('I');
}
$(document).unbind('keypress.iatKeypress');
if($('.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWord();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
}
});
}
function iatShowWordMobile() {
$('div.iatWord', thisQuestion).text($('.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$('.iatButton', thisQuestion).bind('click.iatButtonClick', function(e) {
var thisRow = $('.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
$('input[type="text"]:eq(0)', thisRow).val($(this).text());
$('.iatButton', thisQuestion).unbind('click.iatButtonClick');
if($('.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWordMobile();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions, .iatMobileButtonWrapper', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
});
}

// Start the IAT display
if(mobile == true) { // Mobile devices
$('.iatMobileButtonWrapper', thisQuestion).show();
$('.iatButton', thisQuestion).bind('click.iatStartMobile', function(e) {
$('.iatButton', thisQuestion).unbind('click.iatStartMobile');
iatShowWordMobile();
});
}
else {
$(document).bind('keypress.iatStart', function(e) { // Non-mobile devices
if(e.which == 101 || e.which == 105) {
$(document).unbind('keypress.iatStart');
iatShowWord();
}
});
}
});
} </syntaxhighlight>

<br />5) Add the following to the end of template.css:<syntaxhighlight lang="css">
/* IAT questions */

.iatWrapper {
position: relative;
width: 600px;
height: 300px;
color: #FFFFFF;
background-color: #000000;
font-size: 21px;
}

.iatLeftLabel {
float: left;
padding: 10px;
}

.iatRightLabel {
float: right;
padding: 10px;
}

.iatWord {
position: absolute;
width: 100%;
top: 35%;
text-align: center;
font-size: 36px;
color:#0F0;
}

.iatWord.done {
color:#FFFFFF;
}

.iatInstructions {
position: absolute;
width: 100%;
bottom: 0px;
padding-bottom: 10px;
text-align: center;
}

.iatMobileButtonWrapper {
display: none;
position: relative;
width: 600px;
font-size: 36px;
}

.iatButton {
float: left;
margin: 20px;
width: 100px;
padding: 2px 0 5px 0;
border: 5px solid #999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
text-align: center;
line-height: normal;
cursor: pointer;
}

.iatLeftButton {
float: left;
}

.iatRightButton {
float: right;
}</syntaxhighlight>

<br />6) To apply the plugin, add one of the two scripts below to the question source:<br />
- With hidden answer table (for normally activated survey)
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}');
});
</script></syntaxhighlight>
- With visible answer table (for testing purposes)
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}', true);
});
</script></syntaxhighlight>

== 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.<br /><br />

[[File:Demo_iat_v250.png]]<br /><br />

'''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''':
<ol>
<li>[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].</li>
<li>Create your Array (Texts) with subquestions as follows:
<ul>
<li>Y scale - all of your "attribute" words or phrases</li>
<li>X scale - "Key Pressed" and "Elapsed Time (ms)"<br />[[File:Demo_iat_v250_2.png]]</li>
</ul>
</li>
<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>
<li>Left association term</li>
<li>Right association term</li>
<li>Instructional text</li>
<li>Finished text<br />[[File:Demo_iat_v250_3.png]]</li>
</ul>
</li>
<li>Add the following to the end of template.js:<syntaxhighlight lang="javascript">// A plugin to insert an IAT interface
function implicitAssociation(el, showAnswers) {

$(el).each(function() {

var thisQuestion = $(this);
var thisQuestionHelp = $('div.question-help', thisQuestion);
var thisQuestionAnswers = $('table.subquestion-list', thisQuestion).parent();
var startTime = '';
var endTime = '';
var agent = navigator.userAgent.toLowerCase();
var mobile = false;
if( /android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent) ) { // Mobile devices
mobile = true;
}

// Some classes
$(thisQuestion).addClass('iat-question');
$('tr.subquestion-list', thisQuestion).addClass('unanswered');

// Hide the question help element
$(thisQuestionHelp).hide();
$(thisQuestionHelp).closest('.question-help-container').hide();

// Hide the answers
if(showAnswers != true) {
$('table.subquestion-list', thisQuestion).hide();
}

// Insert IAT display
var iatTexts = $(thisQuestionHelp).text().split('||');
var iatDisplayHTML = '<div class="iatWrapper">\
<div class="iatLeftLabel">'+iatTexts[0]+'</div>\
<div class="iatRightLabel">'+iatTexts[1]+'</div>\
<div class="iatWord"></div>\
<div class="iatInstructions">'+iatTexts[2]+'</div>\
</div>\
<div class="iatMobileButtonWrapper">\
<div class="iatButton iatLeftButton">E</div>\
<div class="iatButton iatRightButton">I</div>\
<div style="width:100%; clear:both;"></div>\
</div>';
$(thisQuestionAnswers).prepend(iatDisplayHTML);

// Show a word
function iatShowWord() {
$('div.iatWord', thisQuestion).text($('tr.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$(document).bind('keypress.iatKeypress', function(e) {
if(e.which == 101 || e.which == 105) {
var thisRow = $('tr.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
if(e.which == 101) {
$('input[type="text"]:eq(0)', thisRow).val('E');
}
else {
$('input[type="text"]:eq(0)', thisRow).val('I');
}
$(document).unbind('keypress.iatKeypress');
if($('tr.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWord();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
}
});
}
function iatShowWordMobile() {
$('div.iatWord', thisQuestion).text($('tr.subquestion-list.unanswered:first .answertext', thisQuestion).text());
startTime = new Date();

$('.iatButton', thisQuestion).bind('click.iatButtonClick', function(e) {
var thisRow = $('tr.subquestion-list.unanswered:eq(0)', thisQuestion);
$(thisRow).removeClass('unanswered');
endTime = new Date();
$('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf());
$('input[type="text"]:eq(0)', thisRow).val($(this).text());
$('.iatButton', thisQuestion).unbind('click.iatButtonClick');
if($('tr.subquestion-list.unanswered', thisQuestion).length > 0) {
iatShowWordMobile();
}
else {
$('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions, .iatMobileButtonWrapper', thisQuestion).fadeOut('slow', function() {
$('div.iatWord', thisQuestion).text(iatTexts[3]);
$('.iatWord', thisQuestion).addClass('done').fadeIn('slow');
});
}
});
}

// Start the IAT display
if(mobile == true) { // Mobile devices
$('.iatMobileButtonWrapper', thisQuestion).show();
$('.iatButton', thisQuestion).bind('click.iatStartMobile', function(e) {
$('.iatButton', thisQuestion).unbind('click.iatStartMobile');
iatShowWordMobile();
});
}
else {
$(document).bind('keypress.iatStart', function(e) { // Non-mobile devices
if(e.which == 101 || e.which == 105) {
$(document).unbind('keypress.iatStart');
iatShowWord();
}
});
}
});
}</syntaxhighlight>
</li>
<li>Add the following to the end of template.css:<syntaxhighlight lang="css">/* IAT questions */

.iatWrapper {
position: relative;
width: 100%;
max-width: 600px;
height: 300px;
margin: 0 auto;
color: #D0DBE5;
background-color: #2C3E50;
font-size: 21px;
}

.iatLeftLabel {
float: left;
padding: 10px;
}

.iatRightLabel {
float: right;
padding: 10px;
}

.iatWord {
position: absolute;
width: 100%;
top: 35%;
text-align: center;
font-size: 36px;
color: #C4D1DE;
}

.iatWord.done {
color: #C4D1DE;
}

.iatInstructions {
position: absolute;
width: 100%;
bottom: 0px;
padding-bottom: 10px;
text-align: center;
}

.iatMobileButtonWrapper {
display: none;
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
font-size: 36px;
}

.iatButton {
float: left;
margin: 20px;
width: 100px;
padding: 2px 0 5px 0;
border: 5px solid #233140;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
text-align: center;
line-height: normal;
cursor: pointer;
}

.iatLeftButton {
float: left;
}

.iatRightButton {
float: right;
}</syntaxhighlight>
</li>
<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)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}');
});
</script></syntaxhighlight>
</li>
<li>With visible answer table (for testing purposes)
<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the IAT plugin to this question
implicitAssociation('#question{QID}', true);
});
</script></syntaxhighlight>
</li>
</ul>
</li>
</ol>

== Version 3.x ==

Here is a custom question theme for an Implicit Association Test (IAT) in version 3.x - https://github.com/tpartner/LimeSurvey-Implicit-Association-Test

=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

<syntaxhighlight lang="javascript">
<script type="text/javascript">

/**
* Small script that adds a "X" before a checkbox.
* On click the text color of the label of the checkbox turns grey
* If the user has to choose some answers from many options, he can "delete" answers, that on first sight looks wrong
* Add the script to the question in Limesurvey (for example within the source code of the help text)
*/

//Define the X (standard is a X in capitals)
var x = "X";
css_class = "x";

/*
* Define the style of the X
* Of course you can define the style in the stylesheet - if so, the script ignores the following settings
* If there is a style, than set style var to 1
*/
var style = 0;
var size = "12px";
var weight = "bold";
var color = "red";
var cursor = "pointer";

//element type - standard is a span element
var type = "span";

//Define the new font color of the checkbox label
label_color = "#bfbfbf";

//End of configuration - start of the function

//Define the element that is added
if(style == 1) {
ele = "<"+type+" class='"+css_class+"'>"+x+"</"+type+">";
}
else {
ele = "<"+type+" class='"+css_class+"' style='font-size:"+size+"; font-weight:"+weight+"; color:"+color+"; cursor:"+cursor+";'>"+x+"</"+type+">";
}

//Get the standard font-color of the used style
st_color = $("label").css("color");

//insert the X before the checkboxes
$(document).ready(function() {
$("li").each(function(){
$(this).prepend(ele);
});
});

//bind an eventhandler on the X (delegate is used, because Limesurvey uses an old jQuery version)
var css_class_c = "."+css_class;
$(document).delegate(css_class_c,"click",function() {
var color_check = $(this).siblings("label").data("color");
if(color_check != "true") {
$(this).siblings("label").css("color",label_color).data("color","true");
$(this).siblings('input').attr('checked', false);

}
else {
$(this).siblings("label").css("color",st_color).data("color","false");

}
});

$(".checkbox").click(function () {
$(this).siblings("label").css("color",st_color).data("color","false");
});

</script>
</syntaxhighlight>

=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:

<syntaxhighlight lang="javascript">$(document).ready(function(){
$('input').keypress(
function(event){
if (event.which == '13') {
event.preventDefault();
}
});
});</syntaxhighlight>

= 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.<br /><br />

[[File:Card_sort_1.png]]<br /><br />

'''DOWNLOADS:'''<br />
- [[Media:Card_Sort.zip|Demo template]]<br />
- [[Media:Card_Sort.lss|Demo survey]].

'''IMPLEMENTATION:'''

1) [[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|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:<syntaxhighlight lang="javascript">
function cardSort(qID) {

// Define some stuff...
var thisQuestion = $('#question'+qID);
var thisQuestionHelp = $('img[alt="Help"]', thisQuestion).parent();
thisQuestion.addClass('card-sort-question');

// Hide the "Help" section
thisQuestionHelp.hide();

//Insert the "card sort" elements
$('ul.questions-list', thisQuestion).parent().prepend('<div class="droppable items-start"></div><div class="items-end-wrapper" />');
$('ul:eq(0) li', thisQuestionHelp).each(function(i) {
$('.items-end-wrapper', thisQuestion).append('<div class="items-end-inner">\
<div class="items-end-text">'+$(this).html()+'</div>\
<div class="droppable items-end items-end-'+(i+1)+'" data-items-end="'+(i+1)+'"></div>\
</div>')});

// Insert the "cards"
$('li.answer-item', thisQuestion).each(function(i) {
var thisSGQA = $(this).attr('id').replace(/javatbd/, '');
var thisCode = $(this).attr('id').split('X'+qID)[1];
var thisHTML = $('label', this).html();
$('div.items-start').append('<div class="card draggable" data-sgqa="'+thisSGQA+'" data-code="'+thisCode+'">\
'+thisHTML+'\
</div>');
});

// Make the "cards" draggable
$('.draggable').draggable({
revert: "invalid",
zIndex: 2700,
helper: 'original',
start: function( event, ui ) {
$(ui.helper).addClass('ui-draggable-helper');
},
stop: function( event, ui ) {
}
});

// Set the targets for the draggables
$('.droppable.items-start').droppable({
hoverClass: 'target-hover',
accept: '.draggable.moved'
});
$('.droppable.items-end').droppable({
hoverClass: 'target-hover',
accept: '.draggable'
});

// After dropped
$('.droppable').bind('drop', function(event, ui) {

// Physically move the draggable to the target
// (the plugin just visually moves it)
// (need to use a clone here to fake out iPad)
var newDraggable = $(ui.draggable).clone();
$(newDraggable).appendTo(this);
$(ui.draggable).remove();
if($(this).hasClass('items-end')) {
$(newDraggable).addClass('moved');
}
else {
$(newDraggable).removeClass('moved');
}
$(newDraggable).removeClass('ui-draggable-helper ui-draggable-dragging').css({
'z-index':'',
'top':'auto',
'left':'auto'
});

// Now, make this new clone draggable
$(newDraggable).draggable({
revert: "invalid",
zIndex: 2700,
helper: 'original',
start: function( event, ui ) {
$(ui.helper).addClass('ui-draggable-helper');
},
stop: function( event, ui ) {
}
});
});

// Initial "card" positions
$('li.question-item input.text', thisQuestion).each(function(i) {
if($(this).val() > 0) {
$('.items-end[data-items-end="'+$(this).val()+'"]').append($('.card[data-sgqa="'+$(this).attr('name')+'"]'));
$('.card[data-sgqa="'+$(this).attr('name')+'"]').appendTo($('.items-end[data-items-end="'+$(this).val()+'"]')).addClass('moved');
}
});

// Interrupt the Next/Submit function and load the inputs
$('form#limesurvey').submit(function(){
$('.question-item input.text', thisQuestion).val(0);
$('.droppable.items-end .card', thisQuestion).each(function(i) {
var thisItemsEnd = $(this).closest('.droppable.items-end').attr('data-items-end');
var thisID = $(this).attr('data-sgqa');
$('#answer'+thisID+'').val(thisItemsEnd);
});
});
}</syntaxhighlight>

<br />5) Add the following to the end of template.css:<syntaxhighlight lang="css">
/* Card Sort */

.card-sort-question ul.subquestions-list {
/*display: none;
clear: both;*/
}

.card-sort-question .items-start {
float: left;
width: 340px;
height: 317px;
margin-top: 8px;
border: 1px solid #666;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}

.card-sort-question .items-start.target-hover {
background:#C9C9C9;
}

.card-sort-question .items-end-wrapper {
float: left;
margin-left: 20px;
width: 340px;
}

.card-sort-question .items-end {
width: 338px;
min-height: 73px;
margin-bottom: 10px;
padding-bottom: 5px;
border: 1px solid #666;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
background: #EBEBEB;
}

.card-sort-question .items-end.target-hover {
background: #C9C9C9;
}

.card-sort-question .items-end.ui-state-disabled {
opacity: 1;
filter:alpha(opacity=100);
}

.card-sort-question .items-end-text {
width: 338px;
padding-bottom: 5px;
background: #FFFFFF;
font-size: 110%;
font-weight: bold;
}

.card-sort-question .card {
display: inline-block;
width: 140px;
height: auto;
margin: 5px 8px;
padding: 3px;
border: 2px solid #2F4354;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
background-color: #43b3d1;
color: #2f4354;
font-weight: bold;
text-align: center;
line-height: normal;
}

.card-sort-question .items-end .card {
margin: 5px 7px;
}

.card-sort-question div.answer {
clear: both;
padding-top: 1px;
margin-top: 0;
}</syntaxhighlight>

<br />6) Add this to the source of the question to apply the function.<syntaxhighlight lang="javascript">
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
cardSort({QID});
});
</script></syntaxhighlight>

== Version 3.x ==
Here is a custom question theme for card Sorting in version 3.x. - https://github.com/tpartner/LimeSurvey-Card-Sorting-3.x

== Version 4.x ==
Here is a custom question theme for card Sorting in version 4.x. - https://github.com/tpartner/LimeSurvey-Card-Sorting-4.x

= Q Sorting=
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.<br /><br />

== Version 3.x==
''Tested with: 3.08 - 3.15''
Custom question theme - [[Media:QSort.zip]]<br />

== Version 4.x==
''Tested with: 4.5.1''
Custom question theme - [[Media:qSort-4.x.zip]]<br />

=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:
<syntaxhighlight lang="javascript">
<script type='text/javascript' charset='utf-8'>
$( document ).ready( function() {
var this_surveyId='{SID}';
var this_groupId='{self.gid}';
var this_quesitonId='{self.qid}';
var this_self='{self.sgqa}';

// Remark for the variable 'my_targetTextBox':
// ------------------------------------
// For Text-type question (e.g. 'short free text', 'huge free text'), use : '#answer' + this_self;
// For 'Multiple Choice'-type question enabled with the 'Other' option which provides a textbox, use : '#answer' + this_self;
// For 'List (radio)'-type question enabled with the 'Other' option which provides a textbox, use : '#answer' + this_self + 'text'.
var my_targetTextBox='#answer' + this_self;

// Trim:
// -----
$( my_targetTextBox ).blur( function(){
$( this ).val( $.trim( $( this ).val() ) );
});

// Uppercase:
// ----------
// Operate for its appearance only (but have no effect to modify its intrinsic value) - display as UpperCase:
$( my_targetTextBox ).css( 'text-transform', 'uppercase' );
// Operate for its intrinsic value:
$( my_targetTextBox ).blur( function() {
$( this ).val( $( this ).val().toUpperCase() );
});
});
</script>
</syntaxhighlight>

For Text-type question (e.g. 'short free text', 'huge free text'), set the 'this_self' variable as below:
<syntaxhighlight lang="javascript">
var my_targetTextBox='#answer' + this_self;
</syntaxhighlight>

For 'Multiple Choice'-type question enabled with the 'Other' option which provides a textbox, set the 'this_self' variable as below:
<syntaxhighlight lang="javascript">
var my_targetTextBox='#answer' + this_self;
</syntaxhighlight>

For 'List (radio)'-type question enabled with the 'Other' option which provides a textbox, set the 'this_self' variable as below:
<syntaxhighlight lang="javascript">
var my_targetTextBox='#answer' + this_self + 'text';
</syntaxhighlight>

= 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.<br /><br />

'''IMPLEMENTATION:'''

1) Add the following to the end of template.js:<syntaxhighlight lang="javascript">
$(document).ready(function(){
// Apply the responsiveArray plugin with default settings
$('.array-10-pt, .array-flexible-row, .array-5-pt, .array-increase-same-decrease, .array-yes-uncertain-no').responsiveArray();
});

/*****
A plugin to insert drop-downs into arrays for small screens
Copyright (C) 2015 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 09/04/15
*****/
(function( $ ){
$.fn.responsiveArray = function(options) {

var opts = $.extend( {
chooseText: 'Please choose...'
}, options);

return this.each(function() {

var thisQuestion = $(this);
var thisQID = $(thisQuestion).attr('id').split('question')[1];

// Some classes
$(thisQuestion).addClass('responsive-array');
$('table.questions-list tr', thisQuestion).each(function(i){
$('> *', this).each(function(i){
$(this).addClass('col-'+i);
if(i != 0) {
$(this).addClass('expanded');
}
});
});

// Insert a column
$('.col-0', thisQuestion).after('<td class="dropdown-cell" />');

// Insert dropdowns
$('body').append('<select style="display:none;" class="responsive-select responsive-select-'+thisQID+'" />');
$('table.questions-list thead th.expanded', thisQuestion).each(function(i){
$('.responsive-select-'+thisQID).append('<option value="">'+$(this).text()+'</option>');
});
$('table.questions-list tbody .dropdown-cell', thisQuestion).append($('.responsive-select-'+thisQID+'').clone());
$('tr.radio-list', thisQuestion).each(function(i){
var thisRow = $(this);
$('input.radio', this).each(function(i){
$('.responsive-select-'+thisQID+' option:eq('+i+')', thisRow).attr('value', $(this).attr('id'));
});
if($('input.radio:checked', thisRow).length > 0) {
$('.responsive-select-'+thisQID+'', thisRow).val($('input.radio:checked', thisRow).attr('id'));
}
else {
$('.responsive-select-'+thisQID+'', thisRow).prepend('<option value="" selected="selected">'+opts.chooseText+'</option>');
}
});
$('.responsive-select-'+thisQID+'', thisQuestion).show();

// Listeners on radios
$('input.radio', thisQuestion).click(function(event) {
var thisRow = $(this).closest('tr');
var thisID = $(this).attr('id');
//$('option[value="'+thisID+'"]').attr('selected', 'selected');
$('.responsive-select', thisRow).val(thisID);
$('.responsive-select option[value=""]', thisRow).remove();
});

// Listeners on dropdowns
$('.responsive-select-'+thisQID+'').change(function() {
$('#'+$(this).val()+'').click();
});

});
};
})( jQuery );</syntaxhighlight>

<br />2) Add something like this to template.css (I have it set to switch at 640px but adjust that as you see fit):<syntaxhighlight lang="css">
/*****
Styles for the responsiveArray plugin
Copyright (C) 2015 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 09/04/15
*****/

.responsive-array .dropdown-cell {
display: none;
text-align: left;
padding-left: 8px;
}

.responsive-array .dropdown-cell select {
max-width: none;
}

@media screen and (max-width: 640px) {
.responsive-array table.question {
table-layout: auto;
}
.responsive-array table.question .col-0,
.responsive-array table.question .dropdown-cell {
width: 50%;
}
.responsive-array .dropdown-cell {
display: table-cell;
}
.responsive-array th.expanded,
.responsive-array td.expanded {
display: none;
}
}</syntaxhighlight>

<br />Note that the "Please choose" text is an optional setting. To change it, apply the plugin like this:<syntaxhighlight lang="javascript">
$(document).ready(function(){
// Apply the responsiveArray plugin with default settings
$('.array-10-pt, .array-flexible-row, .array-5-pt, .array-increase-same-decrease, .array-yes-uncertain-no').responsiveArray({
chooseText: 'Select one...'
});
});</syntaxhighlight>

= Van Westendorp Pricing Sliders=
== Version 2.06==

''Tested with: LimeSurvey version 2.06''

This workaround uses JavaScript to dynamically control sliders to facilitate the [http://www.5circles.com/van-westendorp-pricing-the-price-sensitivity-meter/ 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.<br /><br />

[[File:Test_Van_Westendorp_Pricing_206_v2.png]]<br /><br />

'''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''':

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your Multiple Numeric question with subquestions as seen in the image above.
#Add the following to the end of template.js:<syntaxhighlight lang="javascript">function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}

/*****
A jQuery plugin to facilitate the Van Westendorp pricing research methodology
Copyright (C) 2016 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 19/10/16
*****/
(function( $ ){

$.fn.vWPricing = function(options) {

var opts = $.extend( {
order: [1, 2, 3, 4],
randomOrder: false
}, options);

return this.each(function() {

var thisQuestion = $(this);

thisQuestion.addClass('vwp-question');

// Add some attributes and set the slider max/min values
var itemsLength = $('li.question-item', thisQuestion).length;
$('li.question-item', thisQuestion).each(function(i) {
$(this).attr('data-item', (i+1));
$('.ui-slider', this).attr('data-slider', (i+1));

var thisSliderMin = $('.ui-slider', this).slider('option', 'min');
$('.ui-slider', this).slider('option', 'min', thisSliderMin+(i));
var thisSliderMax = $('.ui-slider', this).slider('option', 'max');
$('.ui-slider', this).slider('option', 'max', thisSliderMax-((itemsLength-1)-i));
});

// Slider order
if(opts.randomOrder == true) {
shuffleArray(opts.order);
}
$(opts.order).each(function(i, val) {
$('ul.subquestions-list', thisQuestion).append($('li.question-item[data-item="'+val+'"]', thisQuestion));
});

// Listeners on the sliders
$('.ui-slider', thisQuestion).on('slide', function(event, ui) {
handleVwpSliders(this, ui.value);
});
$('.ui-slider', thisQuestion).on('slidestop', function(event, ui) {
handleVwpSliders(this, ui.value);
});

// A function to handle the siders
function handleVwpSliders(el, sliderVal) {
var thisRow = $(el).closest('li');
var movedIndexNum = $(el).attr('data-slider');

$('input.text', thisRow).val(sliderVal);
$('.slider-callout', thisRow).html($('input.text', thisRow).val());

var lowerSliders = $('.ui-slider', thisQuestion).filter(function() {
return $(this).attr('data-slider') < movedIndexNum;
});
var higherSliders = $('.ui-slider', thisQuestion).filter(function() {
return $(this).attr('data-slider') > movedIndexNum;
});

$(lowerSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider');
var newSliderVal = sliderVal-(movedIndexNum-thisIndexNum);
if($(this).slider('option', 'value') > newSliderVal) {
var thisRow = $(this).closest('li');
$(this).slider('option', 'value', newSliderVal);
$('input.text', thisRow).val(newSliderVal);
$('.slider-callout', thisRow).html($('input.text', thisRow).val());
}
});
$(higherSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider');
var newSliderVal = sliderVal+(thisIndexNum-movedIndexNum);
if($(this).slider('option', 'value') < newSliderVal) {
var thisRow = $(this).closest('li');
$(this).slider('option', 'value', newSliderVal);
$('input.text', thisRow).val(newSliderVal);
$('.slider-callout', thisRow).html($('input.text', thisRow).val());
}
});
}
});

};
})( jQuery );</syntaxhighlight>
#Add the following to the end of template.css (this is for a copy of [http://extensions.sondages.pro/skeletonquest-rwd-for-limesurvey/ Denis Chenu's SkeletonQuest template]):<syntaxhighlight lang="css">/**** Van Westendorp Pricing ****/

.vwp-question ul.subquestions-list,
.vwp-question ul.subquestions-list li {
display:block;
}

.vwp-question ul.subquestions-list li {
margin-bottom: 15px;
}

.vwp-question ul.subquestions-list .slider-label {
display:block;
padding: 0.3em 0.5em 0.7em;
width: auto;
max-width: 100%;
text-align: left;
}

.vwp-question .slider-element {
display: block;
margin-left: 2%;
width:90%;
max-width: 32em;
}</syntaxhighlight>
#To apply the plugin, add this script the multiple-numeric question source.
There are two options to adjust<br /> -'''order''' - this is the order that your subquestions will be displayed (default, 1, 2, 3, 4)<br /> -'''randomOrder''' - if set to true, the '''order''' option will be overridden and the subquestion order will be randomized (default, false)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').vWPricing({
order: [1, 2, 3, 4],
randomOrder: false
});

});
</script></syntaxhighlight>
== Version 2.5x==

''Tested with: LimeSurvey version 2.54.5''

This workaround uses JavaScript to dynamically control sliders to facilitate the [http://www.5circles.com/van-westendorp-pricing-the-price-sensitivity-meter/ 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.<br /><br />

[[File:Test_Van_Westendorp_Pricing_25x.png]]<br /><br />

'''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''':

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your Multiple Numeric question with subquestions as seen in the image above.
#Add the following to the end of template.js:<syntaxhighlight lang="javascript">function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}

/*****
A jQuery plugin to facilitate the Van Westendorp pricing research methodology
Copyright (C) 2016 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 2.0
Create date - 19/10/16
*****/
(function( $ ){

$.fn.vWPricing25 = function(options) {

var opts = $.extend( {
order: [1, 2, 3, 4],
randomOrder: false
}, options);

return this.each(function() {

var thisQuestion = $(this);

thisQuestion.addClass('vwp-question');

// Add some attributes and set the slider max/min values
var itemsLength = $('.question-item', thisQuestion).length;
$('.question-item', thisQuestion).each(function(i) {
var thisInput = $('input[type=text]', this);
var thisVal = $(thisInput).val();

$(this).attr('data-item', (i+1));
$(thisInput).attr('data-slider-index', (i+1));

// Slider initial settings
setTimeout(function() {
var thisSliderMin = $(thisInput).bootstrapSlider('getAttribute', 'min');
$(thisInput).bootstrapSlider('setAttribute', 'min', thisSliderMin+(i));
var thisSliderMax = $(thisInput).bootstrapSlider('getAttribute', 'max');
$(thisInput).bootstrapSlider('setAttribute', 'max', thisSliderMax-((itemsLength-1)-i));

if(thisVal == '') {
$(thisInput).val('');
}
}, 200);

});

// Slider order
if(opts.randomOrder == true) {
shuffleArray(opts.order);
}
$(opts.order).each(function(i, val) {
$('.subquestion-list.questions-list', thisQuestion).append($('.question-item[data-item="'+val+'"]', thisQuestion));
});

// Listeners on the sliders
$('input[type=text]', thisQuestion).on('slide', function(event) {
handleVwpSliders(this, $(this).bootstrapSlider('getValue'));
});
$('input[type=text]', thisQuestion).on('slideStop', function(event) {
handleVwpSliders(this, $(this).bootstrapSlider('getValue'));
});

// A function to handle the siders
function handleVwpSliders(el, sliderVal) {
var movedIndexNum = $(el).attr('data-slider-index');

var lowerSliders = $('input[type=text]', thisQuestion).filter(function() {
return $(this).attr('data-slider-index') < movedIndexNum;
});
var higherSliders = $('input[type=text]', thisQuestion).filter(function() {
return $(this).attr('data-slider-index') > movedIndexNum;
});

$(lowerSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider-index');
var newSliderVal = sliderVal-(movedIndexNum-thisIndexNum);
if($(this).bootstrapSlider('getValue') > newSliderVal) {
var thisRow = $(this).closest('.question-item');
var thisTooltip = $('.tooltip', thisRow);
$(this).bootstrapSlider('setValue', newSliderVal);
$('.tooltip-inner', thisTooltip).text($('input.text', thisRow).val());
thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');

var validationInput = $('input.em_sq_validation', thisRow);
$(validationInput).val($('input.text', thisRow).val())
fixnum_checkconditions($(validationInput).attr('value'), $(validationInput).attr('name'), $(validationInput).attr('type'));
}
});
$(higherSliders).each(function(i) {
var thisIndexNum = $(this).attr('data-slider-index');
var newSliderVal = sliderVal+(thisIndexNum-movedIndexNum);
if($(this).bootstrapSlider('getValue') < newSliderVal) {
var thisRow = $(this).closest('.question-item');
var thisTooltip = $('.tooltip', thisRow);
$(this).bootstrapSlider('setValue', newSliderVal);
$('.tooltip-inner', thisTooltip).text($('input.text', thisRow).val());
thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');

var validationInput = $('input.em_sq_validation', thisRow);
$(validationInput).val($('input.text', thisRow).val())
fixnum_checkconditions($(validationInput).attr('value'), $(validationInput).attr('name'), $(validationInput).attr('type'));
}
});
}

// Listener on resizing (override the bootstrap callout behaviour)
$(window).resize(function() {
setTimeout(function() {
$('input[type=text]', thisQuestion).each(function(i) {
if($(this).val() != '') {
var thisRow = $(this).closest('.question-item');
var thisTooltip = $('.tooltip', thisRow);
$('.tooltip-inner', thisTooltip).text($.trim($(this).val()));
console.log($('.tooltip-inner', thisTooltip).text());
thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');
}
});
}, 1);
});
});
};
})( jQuery );</syntaxhighlight>
#Add the following to the end of template.css (this is for a copy of the default template):<syntaxhighlight lang="css">/*********** Van Westendorp Pricing ***********/

.vwp-question .control-label {
margin-bottom: 35px;
}

.vwp-question .withslider {
margin-bottom: 0px;
}

.vwp-question .slider-container {
margin-bottom: 2.5em;
margin-top: 3.5em;
}

.vwp-question .slider.slider-horizontal .slider-handle {
margin-top: -5px;
}

@media (max-width: 600px){

.vwp-question .withslider {
padding-left: 0;
padding-right: 0;
}
}

@media (max-width: 480px){

#outerframeContainer,
.vwp-question .control-label,
.vwp-question .slider-container > div {
padding-left: 0;
padding-right: 0;
}

.vwp-question .slider-container > div > div {
padding-left: 5px;
padding-right: 5px;
}
}</syntaxhighlight>
#To apply the plugin, add this script the multiple-numeric question source.
There are two options to adjust<br /> -'''order''' - this is the order that your subquestions will be displayed (default, 1, 2, 3, 4)<br /> -'''randomOrder''' - if set to true, the '''order''' option will be overridden and the subquestion order will be randomized (default, false)<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#question{QID}').vWPricing25({
order: [1, 2, 3, 4],
randomOrder: false
});

});
</script></syntaxhighlight>
== 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".<br />

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

'''Implementation''':

#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey?|Set up your survey to use JavaScript]].
#Create your Multiple Choice question with the last subquestions as "Select all".
#Add the following script to the source of the question text:<syntaxhighlight lang="javascript"><script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:complete',function() {

// Identify this question
var thisQuestion = $('#question{QID}');

// Initial states
if($('input[type="checkbox"]:last', thisQuestion).is(':checked')) {
$('input[type="checkbox"]', thisQuestion).not(':last').prop('checked', true).prop('disabled', true);
}

// Listener on the last checkbox
$('input[type="checkbox"]:last', thisQuestion).on('change', function(e) {
if($(this).is(':checked')) {
$('input[type="checkbox"]', thisQuestion).not(this).prop('checked', true).prop('disabled', true);
}
else {
$('input[type="checkbox"]', thisQuestion).not(this).prop('checked', false).prop('disabled', false);
}

// Fire ExpressionScript
$('input[type="checkbox"]', thisQuestion).not(this).each(function(i) {
checkconditions(this.value, this.name, this.type);
});
});

// Re-enable checkboxes so data gets stored
$('#moveprevbtn, #movenextbtn, #movesubmitbtn').on('click', function(){
$('input[type="checkbox"]', thisQuestion).prop('disabled', false);
});
});
</script></syntaxhighlight>

= Pay Off Matrix Interface =
== LimeSurvey Version 2.67.x==

This workaround converts a list-radio type question into a Pay Off Matrix interface.<br /><br />

[[File:Pay_off_matrix_1.png]]<br />
[[File:Pay_off_matrix_2.png]]<br /><br />

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

'''Implementation''':

#Create your List Radio question with with the upper and lower values for each answer separated by "pipe" characters.<br />[[File:Pay_off_matrix_3.png]]
#Assign a class "pay-off-matrix" to that question.<br />[[File:Pay_off_matrix_4.png]]
#Add the following to the end of template.js:<syntaxhighlight lang="javascript">$(document).on('ready pjax:complete',function() {
// Apply the payOffMatrix plugin
$('.pay-off-matrix').payOffMatrix({
topText: 'You receive',
bottomText: 'Others receive'
});
});

/*****
A jQuery plugin to convert a list-radio question to a Pay Off Matrix
Copyright (C) 2017 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 1.0
Create date - 25/09/2017
*****/

(function($){

$.fn.payOffMatrix = function(options) {

var opts = $.extend( {
topText: '',
bottomText: ''
}, options);

return this.each(function() {

var thisQuestion = $(this);

// Insert the matrix elements
$('div.answer', thisQuestion).prepend('<div class="pom-outer-wrapper"><div class="pom-wrapper">\
<div class="pom-row-label top">'+opts.topText+'</div>\
<div class="pom-items-wrapper">\
</div>\
<div class="pom-row-label bottom">'+opts.bottomText+'</div>\
<div style="clear:both;" />\
</div></div>');

$('.answer-item', thisQuestion).each(function(i) {
var thisValue = $('input.radio', this).attr('value');
var itemTop = $.trim($('.label-text', this).text()).split('|')[0];
var itemBottom = $.trim($('.label-text', this).text()).split('|')[1];
$('.pom-items-wrapper', thisQuestion).append('<div class="pom-item">\
<div class="pom-item-label-wrapper top">\
<div class="pom-item-label">'+itemTop+'</div>\
</div>\
<div class="pom-item-button-wrapper">\
<div class="pom-item-button" data-value="'+thisValue+'"></div>\
</div>\
<div class="pom-item-label-wrapper bottom">\
<div class="pom-item-label">'+itemBottom+'</div>\
</div>\
<div class="under-480" style="clear:both;" />\
</div>');
});
$('.pom-item:first', thisQuestion).addClass('first');
$('.pom-item:last', thisQuestion).addClass('last');

// Listeners on the matrix events
$('.pom-item-button, .pom-item-label', thisQuestion).on('click', function(e) {
$('.pom-item', thisQuestion).removeClass('active-item');
$(this).closest('.pom-item').addClass('active-item');
var thisValue = $(this).closest('.pom-item').find('.pom-item-button').attr('data-value');
$('input.radio[value="'+thisValue+'"]', thisQuestion).trigger('click');
}).hover(
function() {
$(this).closest('.pom-item').addClass('hover');
}, function() {
$( this ).closest('.pom-item').removeClass('hover');
}
);
});

};
})(jQuery);</syntaxhighlight>
#Add the following to the end of template.css:<syntaxhighlight lang="css">/*****
Styles for the payOffMatrix plugin
Copyright (C) 2017 - Tony Partner (http://partnersurveys.com)
Licensed MIT, GPL
Version - 1.0
Create date - 25/09/2017
*****/

.pay-off-matrix .answers-list {
position: absolute;
left: -9999em;
}

.pom-wrapper {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 648px;
}

.pom-item {
float: left;
}

.pom-row-label {
clear: both;
text-align: center;
font-size: 16px;
}

.pom-row-label.top {
padding-top: 5px;
}

.pom-row-label.bottom {
padding-bottom: 5px;
}

.pom-item-label-wrapper {
padding: 5px 8px;
}

.pom-item-label-wrapper.top {
margin-bottom: 3px;
}

.pom-item-label-wrapper.bottom {
margin-top: 3px;
}

.pom-item {
width: 11.11111111111111%;
}

.pom-item-label {
border: 1px solid #233140;
background: #EBEBEB;
-moz-transition: background-color 300ms ease;
-o-transition: background-color 300ms ease;
-webkit-transition: background-color 300ms ease;
transition: background-color 300ms ease;
text-align:center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
font-size: 16px;
line-height: 30px;
}

.pom-item.hover .pom-item-label,
.pom-item.active-item .pom-item-label {
font-weight: bold;
cursor: pointer;
}

.pom-item.active-item .pom-item-label {
background: #233140;
color: #FFFFFF;
}

.pom-item-button-wrapper {
padding: 5px 15.27777777777778%;
background: #CCD5DD;
width: 69.44444444444444%;
width: auto;
}

.pom-item.first .pom-item-button-wrapper {
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-khtml-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}

.pom-item.last .pom-item-button-wrapper {
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-khtml-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}

.pom-item-button {
height: 0;
width: 100%;
padding-top: 100%;
background: #FFFFFF;
-moz-transition: background-color 300ms ease;
-o-transition: background-color 300ms ease;
-webkit-transition: background-color 300ms ease;
transition: background-color 300ms ease;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
}

.pom-item.hover .pom-item-button {
background-color: #5b7fa5;
}

.pom-item.active-item .pom-item-button,
.pom-item.active-item .pom-item-button:hover {
background-color: #233140;
cursor:default;
}

@media only screen and (max-width: 480px) {
.pom-outer-wrapper {
margin: 0 auto;
padding-top: 50px;
width: 256px;
}
.pom-wrapper {
display:block;
position: relative;
}

.pom-row-label {
bottom: 100%;
left: 0;
margin-left: -25px;
position: absolute;
text-align: center;
width: 150px;
background-color: transparent !important;
}

.pom-row-label.bottom {
left: auto;
right: 0;
margin-right: -25px;
padding: 5px 0 0 0;
}

pom-items-wrapper {
vertical-align: middle;
}

.pom-item {
float: none;
width: auto;
}

.pom-item-label-wrapper {
float: left;
margin: 0 !important;
padding: 7px 24px;
}

.pom-item-label {
width: 50px;
}

.pom-item-button-wrapper {
float: left;
margin: 0 5px;
padding: 5px;
width: 46px;
}

.pom-item.first .pom-item-button-wrapper {
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-khtml-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}

.pom-item.last .pom-item-button-wrapper {
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-khtml-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

.pom-item .under-480 {
display: block !important;
}
}</syntaxhighlight>

== LimeSurvey Version 3.x==
Here is a custom question theme for LS 3.x - https://github.com/tpartner/LimeSurvey-Social-Value-Orientation