Workarounds: Question design, layout and templating

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.

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

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

If you want to hide the "0%" before the progress bar, add the following to the end of template.css:

=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:
 * 1) Use popup mode and manually delete unwanting extra html tags (requires html knowledge).
 * 2) Disable paste word feature: Tweak your limesurvey-config.js file in limesurvey/admin/scripts/fckeditor.26 and set the following option to true:

After that clear you browser cache and try again.

=How to change the  tags using CSS=

''This workaround was deleted because it is outdated. Such changes can be done by 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.
 * 1) Create a new label set within Lime. Call it whatever you like.
 * 2) Enter a code number at first, then press the pencil symbol to enter the editor.
 * 3) 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.
 * 4) The row in the lable editor now shows an -tag which refers to your bar picture.
 * 5) 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:
 * 1) Create a label set with values from 0 to 7 (for the classic Likert Scale - feel free to choose other ranges).
 * 2) Create a new question and choose Array (Flexible Labels) as question type.
 * 3) Assign the Likert Scale label set to this question.
 * 4) Enter your answers as follows:

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.

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:



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.



It's accomplished by placing the following code in each of the answers.

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



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



This can be accomplished with CSS (see Styling questions in LimeSurvey 1.8). For each input that you want to hide, add the following style to your template.css file:

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



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:
 * 1) 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).
 * 2) In the source of the first boilerplate question add the function below (see How to use script).
 * 3) 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: the following 2 lines
 * 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:

Javascript code:

=Star Rating System=

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

This workaround uses the 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 this demo and the image below.



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 LimeSurvey assessments - it's a little easier to implement. There is a demo here (first question).

Implementation is as follows:
 * 1) Turn off $filterxsshtml to allow insertion of JavaScript in the questions. (See documentation here)
 * 2) Download the plugin and place the following included files in your template folder:
 * 3) jquery.MetaData.js
 * 4) jquery.rating.css
 * 5) jquery.rating.js
 * 6) delete.gif
 * 7) star.gif
 * 8) In the section of your startpage.pstpl, add the following code to link to the files.

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.

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:



And stars split into third-segments would look like:



7. Finally, in the source of the question add the following function after your inputs. (See 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:

Star Rating System Using List (Radio) Question
Use this method if you would like to use assessments. There is a demo here (second question).

Implementation is as follows:

1. Turn off $filterxsshtml to allow insertion of JavaScript in the questions. (See documentation here)

2. Set up the template to use custom onload functions. (See the workaround here)

3. 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 section of your startpage.pstpl, add the following code to link to the files.

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.



6. In the list (radio) question, set the 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.

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:



And stars split into third-segments would look like:



9. Finally, in the source of the question add the following function after your inputs. (See 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:

=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 demonstrated here. This example uses the default template shipped with 7557 but should be adaptable to any template.



We use a function to remove all of the widths imposed by the core code and then insert our own.

Implementation is as follows:
 * 1) Turn off $filterxsshtml to allow insertion of JavaScript in the questions (see documentation here).
 * 2) Create the array question.
 * 3) In the source of the array question add the following script (see How to use script here).
 * 4) Replace all instances of QQ with the question ID.
 * 5) 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.
 * 6) In the final section adjust the question text alignment to your liking

Onload code

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



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:
 * 1) 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.
 * 2) Add these lines to the element in your startpage.pstpl instead of the one above:

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.

needs to be changed to

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 (older versions of limesurvey, under global settings for newer versions).

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 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 MaxDiff question type.



Implementation is as follows.
 * 1) Set up your survey to use JavaScript.
 * 2) Create an Array (flexible labels) by column question with 2 "answers" - these will be the left and right columns.
 * 3) Assign a label set to the question - these will be the labels in the center column.
 * 4) Set the second parameter of the function call to true for randomized rows.
 * 5) Adjust the styles in lines 21-24 as required.

The script moves the question columns into the MaxDiff configuration and disables the opposing radio element when a selection is made.

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 MaxDiff question type.



DOWNLOADS


 * [[Media:Demo_MaxDiff_For_25_Template.zip|Demo template]]
 * [[Media:Demo_MaxDiff_For_25_Survey.zip|Demo survey]]

IMPLEMENTATION
 * 1) Set up your survey to use JavaScript.
 * 2) Create an Array (flexible labels) by column question with 2 "answers" - these will be the left and right columns.
 * 3) Add 2 subquestions to the array - these will be the left and right columns.
 * 4) Add answers to the array - these will be the rows.
 * 5) Create a copy the default template.
 * 6) Add the following to the end of template.js in your new template:
 * 7) Add the following to the end of template.css in your new template:
 * 8) Add a script like this to the question source of the Array (flexible labels) question:

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

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:

For a minimum date of the current date (today):

For a maximum date of May 10, 2015:

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




 * 1) Create a Multiple Numeric question with two subquestions labelled "X" and "Y".
 * 2) Add the following HTML to the source of the question to create the table:


 * 1) Add the following styles to the end of your template.css file:


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

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.




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


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

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



Requirements:
 * LimeSurvey 2.05 or newer
 * A multiple-numeric question with slider enabled


 * 1) Create your multi-numeric question with the slider enabled


 * 1) Add the following to the source of the question

=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


Tested with: LimeSurvey version 2.06


 * 1) Set up your survey to use JavaScript.
 * 2) Create your array-numbers or array-dual-scale-numbers question.
 * 3) Add the following to the source of the question.


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

LimeSurvey Version 2.6x


Tested with: LimeSurvey version 2.64.7 


 * 1) Set up your survey to use JavaScript.
 * 2) Create your array-numbers or array-dual-scale-numbers question.
 * 3) Add the following to the source of the question.


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

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




 * 1) Create your multi-numeric question(s). Do NOT use any of the slider advanced settings.


 * 1) 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


 * 1) Add the following to the end of template.css (these styles are for the default template):

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



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

Requirements: LimeSurvey 2.5x A multiple-numeric question with two subquestions


 * 1) Create your multi-numeric question. Do NOT use any of the slider advanced settings.
 * 2) Add the following to the end of template.js.
 * 3) 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)
 * Or, to apply the plugin with the default option settings

=Reverse Slider=

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



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

Requirements:
 * LimeSurvey 2.05 or newer
 * A multiple-numeric question with slider enabled


 * 1) Create your multi-numeric question with the slider advanced settings.


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


 * 1) Add the following to the end of template.css (these styles are for the default template but easily modified for others):


 * 1) 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)


 * Or, simply to apply the plugin with the default option settings

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