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:

• Templates and Styles
• Styling Questions
• Workarounds - Manipulating a survey at runtime using Javascript
• Workarounds - Survey behaviour.

Table of contents

• Getting rid of the question mark symbol (help.gif)
• Use komma/virgule (komma: German data format) (virgule: french format) instead of dot when entering numbers
• Require users to check a box agreeing to privacy statement before registering for a survey
• Different progress indicator
  • Version 1.86 and earlier:
  • Version 1.87 and later:
• Delete unwanted gaps in question title
• How to change the <font-size> tags using CSS
• Question type variation: Scale with bars (one and two sided)
• Doing a Likert Scale
• Alternate background colour of questions
• Embedding audio in questions
• Hiding inputs of a "Multiple options with comments" question
• Multiple question types in array
• Star Rating System
  • Star Rating System Using Numeric Input Question
  • Star Rating System Using List (Radio) Question
• Variable column widths in array
• Changing radio buttons and checkboxes
• Changing the position an layout of an individual question using "question code"
• Create MaxDiff question type

Getting rid of the question mark symbol (help.gif)

Tested with: 1.80+ (6536)

To get rid of the question mark symbol that LimeSurvey displays at the end of a question, you can either upload an empty help.gif into the template folder (as discussed in the forum) or you can use the Template editor: Open the template.css of your template and search for div.questionhelp img, then add a visibility:hidden;
It will look something like this:

div.questionhelp img
{
   margin:5px;
   visibility:hidden;
}

You can also replace the image by following these instructions.

Use komma/virgule (komma: German data format) (virgule: french format) instead of dot when entering numbers

Tested with: LS1.53, LS1.70

To use kommas instead of dots when entering numbers make the following changes:
Search the "qanda.php" for the function "function do_numerical" which should look like this

inhibited_keypress=\"return goodchars(event,'0123456789.')\"

and replace the dot with a comma.

Require users to check a box agreeing to privacy statement before registering for a survey

If you need to have users positively acknowledge a privacy statement before submitting a registration form, the following will help you do this.

It involves a minor modification to common.php in versions up to 1.85. Later versions may not require this.

Edit common.php and look for the line (at approximately line 3014)

$registerform .= "<tr><td></td><td>
<input class='submit' type='submit' value='".$clang->gT("Continue")."' />"

and change it to:

$registerform .= "<tr><td></td><td>
<input id='registercontinue' class='submit' type='submit' value='".$clang->gT("Continue")."' />"

Then save common.php. This gives you DOM access to the "continue" button on the register form, but will have no other practical effect or change to LimeSurvey's operations.

Next, you need to edit the template you are using (see the documentation on the Template editor if you don't know how to do this).

In the template editor, open the screen "Register page" and select the file "register.pstpl"

There are two modifications you need to make to this file. The first is to add the following code after the line that says {REGISTERFORM}.

<script type='text/javascript'>
<!--
document.getElementById('registercontinue').disabled=true;
//-->
</script>

This code disables the "Continue" button so that nobody can process the registration form until they've clicked the checkbox.

The second modification to make is to be done between the lines {REGISTERMESSAGE2} and {REGISTERFORM}. Add:

<center>
  <label> Accept
    <input type='radio' 
           name="privacy" 
           value="YES" 
           onChange="if(this.checked) {
                       document.getElementById('registercontinue').disabled=false;
                     }" />
  </label>
  <label>I don't accept
    <input type='radio' 
           name="privacy" 
           value="NO" 
           CHECKED 
           onChange="if(this.checked) {
                       document.getElementById('registercontinue').disabled=true;
                     }" />
  </label>
</center>

Then the users will have to agree to whatever text you replace "Do you agree to privacy stuff?" before they continue on and register.

(Thanks to Pippo_Jedi for helping work this out)

Different progress indicator

Version 1.86 and earlier:

User Ypse implemented a new kind of progress indicator. Instead of showing the progress in percent his solution marks the progress like this:
3/6 (3 step of 6) Progress 14 %
The code and a short tutorial on how to integrate this solution can be found in the bug and feature tracker.

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.

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

    });

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

#progress-pre {
    display: none;
}

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:

FCKConfig.ForcePasteAsPlainText = true ;

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



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 <img>-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. See example:

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:

<DIV style="white-space: nowrap;">ITEM statement1|statement2</div>

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.

div#question2 td.questiontext,
div#question4 td.questiontext,
div#question6 td.questiontext {
	background-color: #E0EBF8;
}

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 are links to a couple of screenshots - before the styles change and after. The darker blue (#E0EBF8 in the "after" shot) is kinda subtle but could be more pronounced with something like #BACFEB.

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.

<embed height="20" width="128" autostart="false" controls="console" 
loop="true" volume="50" src="{TEMPLATEURL}audio_1.mp3"></embed>

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

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

There may be times when you want to hide some of the input boxes of a Multiple options 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:

#answer11111X22X33Acomment {  
    display: none; 
}

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.85+ (7557), IE 6/7, Firefox 3.0, Safari 3.2 (Yes/No question styles need tweaking in Safari)

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. This example uses the default template shipped with 7557 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 an onload 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. Turn off $filterxsshtml to allow insertion of JavaScript in the questions (see documentation here - now also available in Global Settings).
2. Set up the template to use custom onload functions (see the workaround here).
3. 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).
4. In the source of the first boilerplate question add the following onload function (see How to use script here).
5. Modify the question IDs in the first section of the code to match your survey.

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.

Some brief notes about the code:

1. The first section just assigns attributes to questions so we can handle them as rows or columns later - in this case 190-194 are row 1 (the top boilerplates), 195-199 are row 2, etc.
2. The second section fixes the width of the survey (not necessary with fixed-width templates), inserts wrapper elements around each group of questions (rows) and forces each group to display horizontally.
3. The next section adjusts column widths.
4. The final section applies styles to the different question types to hide unnecessary elements and ensure that vertical alignment, question height, etc are consistent.

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.

You cannot have other questions on the same survey page as this grid of questions, as their formatting will be altered too (question text altered). You will also need to test this with any CSS customization you have done.

Onload code:

<script type="text/javascript" charset="utf-8">
  
  $(document).ready(function() {
    
    /*********** 
    Display multiple questions side by side
    ***********/
    
    //////// Define question attributes for later use ////////
    
    // Give questions row specific attributes so we can easily manipulate them by row
    $('#question190, #question191, #question192, #question193, #question194').attr('name', 'qRow1');
    $('#question195, #question196, #question197, #question198, #question199').attr('name', 'qRow2');
    $('#question200, #question201, #question202, #question203, #question204').attr('name', 'qRow3');
    $('#question205, #question206, #question207, #question208, #question209').attr('name', 'qRow4');
    
    // Give questions column specific attributes so we can easily manipulate them by column
    // I know, not the correct use of "rel" attribute but...too bad!
    $('#question190, #question195, #question200, #question205').attr('rel', 'qCol1');
    $('#question191, #question196, #question201, #question206').attr('rel', 'qCol2');
    $('#question192, #question197, #question202, #question207').attr('rel', 'qCol3');
    $('#question193, #question198, #question203, #question208').attr('rel', 'qCol4');
    $('#question194, #question199, #question204, #question209').attr('rel', 'qCol5');
    
    //////// Survey layout manipulation ////////
    
    // Fix the width of the survey
    $( 'table.outerframe' ).css({
      'width': '900px'
    });
         
    // Wrap each row in a div
    // This is kinda verbose but IE won't let me use jQuery shortcuts
    var el = document.createElement('div');
    el.setAttribute('id','inlineWrapper1');
    document.body.appendChild(el);
    $('div[name="qRow1"]').wrapAll($('#inlineWrapper1'));
 
    el.setAttribute('id','inlineWrapper2');
    document.body.appendChild(el);
    $('div[name="qRow2"]').wrapAll($('#inlineWrapper2'));

    el.setAttribute('id','inlineWrapper3');
    document.body.appendChild(el);
    $('div[name="qRow3"]').wrapAll($('#inlineWrapper3'));

    el .setAttribute('id','inlineWrapper4');
    document.body.appendChild(el );
    $('div[name="qRow4"]').wrapAll($('#inlineWrapper4'));   
    
    // Style the wrapper divs
    $( '#inlineWrapper1, #inlineWrapper2, #inlineWrapper3, #inlineWrapper4' ).css({
      'width': '850px',
      'margin': '0 auto 0 auto',
      'clear': 'both'
    });
    
    // Get all the questions to sit politely side by side
    $( 'div[name="qRow1"], div[name="qRow2"], div[name="qRow3"], div[name="qRow4"]' ).css({
      'float': 'left'   
    });
    
    //////// Column manipulation ////////
    
    // Set the column widths - can be set individually if necessary
    // Must add up to less than 100%
    $( 'div[rel="qCol1"]' ).css({
      'width': '12%'
    });
    $( 'div[rel="qCol2"], div[rel="qCol3"], div[rel="qCol4"], div[rel="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.text-short td.questiontext, div.list-dropdown td.questiontext, div.yes-no td.questiontext, div.numeric td.questiontext').parent().hide();
    
    // Push the question tables to 100%
    $( 'div[name="qRow1"] table, div[name="qRow2"] table, div[name="qRow3"] table, div[name="qRow4"] table' ).css({
      'width': '100%'
    });
    
    // Get everything to line up nicely vertically
    $( 'td.questiontext, td.answer p' ).css({
      'text-align': 'center'
    });
    
    // Adjust cell heights so everything lines up nicely horizontally
    $( 'td.answer, td.questiontext' ).css({
      'height':'35px'
    });
    
    // Yes-no question styles
    $( 'div.yes-no ul' ).css({
      'text-align': 'center',
      'font-size': '90%',
      'margin': '0',
      'padding-bottom': '5px'
    });
    $( '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'});
    
    // Reduce the space caused by the question help table
    $( 'div[name="qRow1"], div[name="qRow2"], div[name="qRow3"]' ).css({
      'margin-bottom': '-8px'
    }); 
    
  });

</script>

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.

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

<!-- Link to the Star Rating plugin script -->
<script type="text/javascript" src="{TEMPLATEURL}jquery.rating.js" charset="utf-8"></script>  
<!-- Link to the MetaData plugin script -->
<script type="text/javascript" src="{TEMPLATEURL}jquery.MetaData.js" charset="utf-8"></script>  
<!-- Link to the Star Rating styles -->
<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}jquery.rating.css" />

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.

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>

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

Onload code:

<script type="text/javascript" charset="utf-8">
function Custom_On_Load(){

$(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>

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

<!-- Link to the Star Rating plugin script -->
<script type="text/javascript" src="{TEMPLATEURL}jquery.rating.js" charset="utf-8"></script>
<!-- Link to the MetaData plugin script -->
<script type="text/javascript" src="{TEMPLATEURL}jquery.MetaData.js" charset="utf-8"></script>  
<!-- Link to the Star Rating styles -->
<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}jquery.rating.css" />

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.

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>

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

<script type="text/javascript" charset="utf-8">
function Custom_On_Load(){

$(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>

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 custom onload 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. Set up the template to use custom onload functions (see the workaround here).
3. Create the array question.
4. In the source of the array question add the following onload function (see How to use script here).
5. Replace all instances of QQ with the question ID.
6. 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.
7. In the final section adjust the question text alignment to your liking

Onload code

<script type="text/javascript" charset="utf-8">
function Custom_On_Load(){

$(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>

Changing radio buttons and checkboxes

Tested with: 1.85 (7116), Googlechrome 3.0, IE 7, FireFox 3.0

This workaround uses the jQuery imagetick.js to change the default radio buttons and checkboxes. Example:


Implementation is as follows:

1. Turn off $filterxsshtml to allow insertion of JavaScript in the questions.

2. Set up the template to use custom onload functions.

3. Download the plugin http://boedesign.com/download.php?file=imagetick and place the following files in your template folder:

• imagetick.js
• check.gif
• no_check.gif
• no_radio.gif
• radio.gif

4. In the head section of your startpage.pstpl, add the following code to link to the files.

<head>
<script type="text/javascript" src="{TEMPLATEURL}imagetick.js"></script>
</head>

5. In the source of the question add the following onload function after your inputs:

<script type="text/javascript" charset="utf-8">  
function Custom_On_Load(){  
 
$(document).ready(function(){ 
    // the selector can be a class as well, target your radios or checkboxes 
    $("input.radio").imageTick({ 
        // the image you want to use as a selected state of the radio/checkbox 
        tick_image_path: "{TEMPLATEURL}radio.gif",  
        // image you want to use as a non selected state 
        // the class you want to apply to all images that are dynamically created 
        no_tick_image_path: "{TEMPLATEURL}no_radio.gif", image_tick_class: "radios"}); 
});  
 
        $("input.checkbox").imageTick({ // the selector can be a class as well 
            tick_image_path: "{TEMPLATEURL}check.gif", 
            no_tick_image_path: "{TEMPLATEURL}no_check.gif", 
            image_tick_class: "checkboxes" 
        });  
}  
</script>

If you want to apply it to only one question on a page use selector

$("#questionQQ input.radio")

where QQ is the question ID

If you want to apply it to a single radio button in a question (to maybe have different images for each option) use selector

$("input#answerSSSSSXGGXQQAA")

where SSSSS is the survey ID, GG is the group ID, QQ is the question ID, AA is the answer code.

Changing the position an 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.

<div class="survey-question">
	<div class="survey-question-text">

needs to be changed to

<div class="survey-question" id="{QUESTION_CODE}">
	<div class="survey-question-text" id="{QUESTION_CODE}" >

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

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

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

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

This workaround uses JavaScript to convert an Array (flexible labels) by column question into a MaxDiff question type.



There is a demo here and 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. Place the following script in the source of the question or in the group description.
5. In line 5, replace "QQ" with the ID of the question and modify the message to your needs.
6. Adjust the styles in lines 15-18 as required.

The script moves the question columns into the MaxDiff configuration and alerts the user if they select the same option for both max and min columns.

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

    $(document).ready(function(){
							   
		maxDiff(QQ, 'You cannot select this answer twice.');
		
		function maxDiff(qID, msg) {
			// Move the cells around
			$('#question'+qID+' table.question col:eq(1)').prependTo('colgroup.col-responses');					   
			$('#question'+qID+' table.question thead tr:eq(0) th:eq(0)').prependTo('#question'+qID+' table.question thead tr:eq(0)');						   
			$('#question'+qID+' table.question tbody tr').each(function(i){
				$('td:eq(0)', this).prependTo(this);													 
			});
		
			// Style stuff
			$('#question'+qID+' table.question col.odd').css({'background-color':'transparent'});
			$('#question'+qID+' table.question tbody th').css({'text-align':'center'});
			$('#question'+qID+' table.question tbody tr:even td, #question'+qID+' table.question tbody tr:even th').css({'background-color':'#F1F1F1'});
			$('#question'+qID+' table.question 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').mousedown(function () {			
				var clickRow = $(this).parents('tr:eq(0)');			
				if ($('input.radio:checked', clickRow).length > 0) {				
					alert (msg);				
					return;
				}
			});
		}
		
    });

</script>

---