View source for Workarounds: Question design, layout and theme-ing - LimeSurvey 3.0+

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:

* [[Theme editor|The theme editor - LimeSurvey 3.0+]]
* [[Workarounds: Manipulating a survey at runtime using Javascript - LimeSurvey 3.0+]]
* [[Workarounds: Survey behaviour - LimeSurvey 3.0+]]
* [[Workarounds: Further solutions provided by LimeSurvey users - LimeSurvey 3.0+]]
* [[Question themes]]

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


{{Note|'''If you would like to receive survey design support, please contact one of the authorized LimeSurvey partners listed here:''' https://limesurvey.com .}}


=Alternate background colour of questions=

To alternate the background colour of questions, open the questions one by one and use CSS to edit each question's background. For example, if you wish to change the background colour of a question thas has the ID 6, use the below code:

<syntaxhighlight lang="css">
<style>
.question6 {
background-color: #E0EBF8;
}
</style>
</syntaxhighlight>

To check the ID of a question, create and save it into a question group, and then access again the question editor. You will see above the question code the ID of the question:


<center>[[File:ID_location_question.png]]</center>


=Card sorting question=


A custom question theme for Slider Control Buttons for LimeSurvey 3.x can be found here - https://github.com/tpartner/LimeSurvey-Card-Sorting-3.x


=Create MaxDiff question type=


''Tested with: LimeSurvey 3.17.3''

This workaround uses JavaScript to convert an '''''Array (flexible labels) by column''''' question into a [http://en.wikipedia.org/wiki/MaxDiff MaxDiff] question type.


<center>[[File:MaxDiff_question.png]]</center>


'''Example'''<br />
* [[Media:MaxDiff_question.zip]]

'''IMPLEMENTATION'''
#[[Workarounds: Manipulating a survey at runtime using Javascript#How to use Script (eg. JavaScript etc.) in LimeSurvey? - LimeSurvey 3.0+|Set up your survey to use JavaScript]].
#Create an [[Question_type_-_Array_by_column|Array (flexible labels) by column question]] with two subquestions (representing the left and right columns, respectively).
#Add answers to the array - (representing the rows).
#Create a copy the default theme (extend the default theme).
#Add the following to the end of '''''custom.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 '''''custom.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>

=Likert Scale=


To create a likert scale, you have to choose either Array or Array (5 point choice) as question type to part the answer by using a pipe char "|" - which answer should be on the left side and which one on the right side of the array. For example, If you want to have 'Good' on the left side of the row and 'Evil' on the right side of the row, just write 'Good|Evil' into the answer field: 


<center>[[File:Likert_array_subquestions.png]]</center>


<center>[[File:H_SD.jpg]]</center>


'''Example:''' [[Media:Question type - Array - Semantic Differential Question Type.zip]]

=Dropdown responses for Array=

Link tpartner forum

Download example link

Screenshot

=Embedding audio in questions=

To embed the audio clips, you have to use a code similar to the one listed below:

<syntaxhighlight lang=html>
<audio controls="controls"><source src=" /upload/surveys/336775/images/MP3_file_name.mp3
" type="audio/mp3" /> Your browser does not support this audio</audio>
</syntaxhighlight>

Once embedded, the question would look like this:


<center>[[File:Embed_audio_example.png]]</center>


To introduce audio clips as subquestions and/or answers, click on the green pencil to open the HTML editor and attach the corresponding code (while being in the source mode).

{{Alert|title=Attention|text=You may need to turn off the XSS filter - see the documentation for [[Global settings#Security|global settings]].}}


=Evaluative Space Grid (ESG)=

Check the old wiki section -> working

=Hiding inputs of a "Multiple options with comments" question=

See example + forum post

=How to hide the asterisk= <!--T:95-->


<!--T:96-->
The instructions are similar to the ones presented above for LimeSurvey 2.

<!--T:97-->
* Access the desired theme. If it is a default theme, create a copy of it by clicking on the "extend" button.
* Access the list of themes and click on the '''theme editor''' that corresponds to the newly created theme.
* On the left side, you can visualise the corresponding CSS files of your theme.
* Click on custom.css and add the following line:

<!--T:98-->
<syntaxhighlight lang="css">.asterisk {display: none;}</syntaxhighlight>


<!--T:99-->
* Save the changes. The red asterisk that is usually displayed at the beginning of the question text is hidden.


=How to hide the language switcher from the welcome page= <!--T:44-->


<!--T:45-->
In the case in which you decide to launch a multilingual survey, you will observe on the welcome page a drop-down menu that permits your respondents to select the language in which they wish to fill in your survey:


<!--T:46-->
<center>[[File:Language switcher show languages.png]]</center>
 

<!--T:47-->
However, in certain scenarios you wish to hide the respective option. There are many ways in which you can hide the language switcher. The '''"twig"''' way is displayed below.

<!--T:48-->
Access [[Themes]] from the global [[Administering LimeSurvey|Configuration menu]]:


<!--T:49-->
<center>[[File:Language switcher themes.png]]</center>


<!--T:50-->
Click on the '''Theme editor''' button to edit the desired theme:


<!--T:51-->
<center>[[File:Language switcher theme editor.png]]</center>


<!--T:52-->
{{Note|LimeSurvey does not allow you to edit the standard themes! If you wish to add changes to a standard theme, click on the '''Extend''' button located on the top bar to create an editable copy of it.}}


<!--T:53-->
Look on the left side of the screen for the '''language_changer.twig''' file.


<!--T:54-->
<center>[[File:Location language switcher twig.png]]</center>


<!--T:55-->
Go to the line that contains the following function: 

<!--T:56-->
<syntaxhighlight lang="php">
{% if aSurveyInfo.alanguageChanger.show == true %}
</syntaxhighlight>

<!--T:57-->
Comment it out (replace "%" with "#") and copy the following line below it:

<!--T:58-->
<syntaxhighlight lang="php">
{% if false == true %}
</syntaxhighlight>


<!--T:59-->
The line should look like this in the end:


<!--T:60-->
<center>[[File:Language switcher code replacement.png]]</center>


<!--T:61-->
Click on "Copy to local theme and save changes".


<!--T:62-->
Access your survey and select the edited theme from the [[General settings|general settings]] panel. Now, the welcome page should look like this:


<!--T:63-->
<center>[[File:Hide language switcher twig.png]]</center>


=How to hide the language switcher located on the top menu= <!--T:64-->


<!--T:65-->
To hide the top language switcher, we will follow pretty much the same steps as described above. We just have to access the right twig file to edit it. Access again the theme you wish to change, and then go to '''Screen''' which is located in the upper-right part of the window and select '''Navigation''' from the dropdown list. Now, look on the left side of the window for "language_changer_top_menu.twig". Click on it and comment out:

<!--T:66-->
<syntaxhighlight lang="php">
{% if aSurveyInfo.alanguageChanger.show == true %}
</syntaxhighlight>

<!--T:67-->
Add the following line below it:

<!--T:68-->
<syntaxhighlight lang="php">
{% if false == true %}
</syntaxhighlight>

<!--T:69-->
No language switcher will be displayed on the right side of the screen:


<!--T:70-->
<center>[[File:Language switcher hide top menu.png]]</center>


=Image interest points and comments=


A custom question theme for Slider Control Buttons for LimeSurvey 3.x can be found here - https://github.com/tpartner/LimeSurvey-Image-Interest-Points-3.x

=Public registration - mandatory fields= <!--T:102-->


<!--T:103-->
If you use a [[Survey participants|survey participants table]] and you also allow [[Participant_settings#Allow_public_registration|public registration]], then users will be prompted by the following message:


<!--T:104-->
<center>[[File:non-mandatory public reg.png]]</center>


<!--T:105-->
As it can be observed above, only the email field is mandatory.

<!--T:106-->
To have all three fields marked as being mandatory, please edit your survey theme accordingly. If you use '''Fruity''', you have to go to the '''registration''' screen and see how the participants email field looks like:

<!--T:107-->
<syntaxhighlight lang="twig">
        {# Participants email #}
        <div class='{{ aSurveyInfo.class.registerformcolrowc }} form-group row' {{ aSurveyInfo.attr.registerformcolrowc }}>
            <label {{ aSurveyInfo.attr.registerformcolrowclabel }} class='{{ aSurveyInfo.class.registerformcolrowclabel }}  control-label'> {{ gT("Email address:") }} {{ include('./subviews/registration/required.twig') }}</label>
            <div {{ aSurveyInfo.attr.registerformcolrowcdiv }}  >
                {{ C.Html.textField('register_email', aSurveyInfo.sEmail, ({'id' : 'register_email','class' : 'form-control input-sm','required' : true})) }}
            </div>
        </div>
</syntaxhighlight>

<!--T:108-->
After that, make sure to edit the first name and last name fields correspondingly by adding the label: <syntaxhighlight lang="twig">{{ include('./subviews/registration/required.twig') }}</syntaxhighlight> and this line which makes the field mandatory to be filled out: <syntaxhighlight lang="twig">'required' : true</syntaxhighlight>

<!--T:109-->
The edited file should look like this:

<!--T:110-->
<syntaxhighlight lang="twig">
        {# Participants first name #}
        <div class='{{ aSurveyInfo.class.registerformcolrow }} form-group row' {{ aSurveyInfo.attr.registerformcolrow }}>
            <label for='register_firstname' class='{{ aSurveyInfo.class.registerformcolrowlabel }} control-label '>{{ gT("First name:") }} {{ include('./subviews/registration/required.twig') }}</label> {# extra label #}
            <div class="">
                {{ C.Html.textField('register_firstname', aSurveyInfo.sFirstName, ({'id' : 'register_firstname','class' : 'form-control', 'required' : true})) }} {# mandatory field #}
            </div>
        </div>

        <!--T:111-->
{# Participants last name #}
        <div class='{{ aSurveyInfo.class.registerformcolrowb }} form-group row' {{ aSurveyInfo.attr.registerformcolrowb }}>
            <label {{ aSurveyInfo.attr.registerformcolrowblabel }}  class='{{ aSurveyInfo.class.registerformcolrowblabel }} control-label '>{{ gT("Last name:") }} {{ include('./subviews/registration/required.twig') }}</label> {# extra label #}
            <div {{ aSurveyInfo.attr.registerformcolrowbdiv }} >
                {{ C.Html.textField('register_lastname', aSurveyInfo.sLastName, ({'id' : 'register_lastname', 'class' : 'form-control', 'required' : true})) }} {# mandatory field #}
            </div>
        </div>
</syntaxhighlight>


<!--T:112-->
Now, the public registration page should look like this (all the fields being mandatory):


<!--T:113-->
<center>[[File:mandatory public reg.png]]</center>

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

=Slider with control buttons=


A custom question theme for Slider Control Buttons for LimeSurvey 3.x can be found here - https://github.com/tpartner/LimeSurvey-Slider-Controls-3x