Combine several questions types into one grid, using newest template

More
1 month 1 week ago - 1 month 1 week ago #188754 by Joffm
Tony's script and his sample survey work in 3.17.x

You only have to adapt the css.

A very raw review.


Joffm


But in my opinion it's not the best way.

Maybe better to start is this script - also from 2.50 - which inserts uttons in the second column of an array(text)
You may adapt to your needs.
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){	
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		// Assign column-specific classes
		$('table.subquestion-list tr', thisQuestion).each(function(i) {
 
			$('> *:gt(0)', this).each(function(i){
				$(this).addClass('column-'+(i+1));
				$(this).attr('data-column', i+1);
			});
		});
 
 
 
		// Hide the text inputs in columns 2
		$('.column-2 input[type="text"]', thisQuestion).hide();
 
		// Loop through all column-2 inputs
		$('.answer-item.column-2 input[type="text"]', thisQuestion).each(function(i) {
			var thisID = $(this).attr('id');
			var thisValue = $(this).val();
 
			// Insert the radios
			$(this).parent().addClass('radio').append('<span class="inserted-radio-wrapper">\
										<input id="'+thisID+'-Y" class="radio" value="Y" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
										<label class="control-label radio-label" for="'+thisID+'-Y">Yes</label>\
									</span>\
									<span class="inserted-radio-wrapper">\
										<input id="'+thisID+'-N" class="radio" value="N" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\
										<label class="control-label radio-label" for="'+thisID+'-N">No</label>\
									</span>');
 
			// Initial radio states
			$(this).closest('td').find('input[type="radio"][value="'+thisValue+'"]').prop('checked', true);
		});
 
		// Listener on the radios
		$('.answer-item.column-2 input[type="radio"]', thisQuestion).on('click', function() {
			var thisInput = $(this).closest('td').find('input[type="text"]');
			$(this).closest('td').find('input[type="text"]').val($(this).val());
			checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text');
		});
 
		// Some clean-up styles for the radios (could be placed in template.css)
		$('thead th, .answer-item.column-2', thisQuestion).css({
			'text-align': 'center'
		});
		$('.answer-item.column-2 .inserted-radio-wrapper', thisQuestion).css({
			'display': 'inline-block',
			'margin': '0px 0px 0 0px',
            'padding-left':'20px'
		});
		$('.answer-item.column-2 label', thisQuestion).css({
			'padding': '0'
		});
		$('.answer-item.column-2 .radio-label', thisQuestion).css({
			'padding-left': '3px',
			'margin-right': '3px',
            'padding':'0px 0px 0px 3px',
          'margin-left':'10px'
		});
 
 
		// Fix up the row background colours
		var rowIndex = 0;
		$('table.subquestion-list tbody tr', thisQuestion).each(function(i){
			rowIndex ++;
			$(this).removeClass('array1, array2');
			if(rowIndex % 2 == 0) {
				$(this).addClass('array1');
			}
			else {
				$(this).addClass('array2');
			}
		});
	});
</script>



Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:
Last edit: 1 month 1 week ago by Joffm.
The following user(s) said Thank You: DenisChenu

Please Log in or Create an account to join the conversation.

More
1 month 2 days ago #188888 by GISS
Thank you again.
Now I have the problem that wenn I export the answers to SPSS I get only string-variables.
I need numeric-variables. What can I do?

Please Log in or Create an account to join the conversation.

More
1 month 2 days ago - 1 month 2 days ago #188904 by Joffm
Well, that's obvious.
You use an array(text).

But this you handle in SPSS.
Like:
RECODE VAR00001 ('Y'='1') ('N'='2').
EXECUTE.

And then change to numeric.

Or you may change the value of the radio buttons:
<input id="'+thisID+'-Y" class="radio" value="Y" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">
from "Y" to "1", resp. "N" to "2".

And before you run the syntax file of SPSS change the data type of these variables from "(A)" to blank.


Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 1 month 2 days ago by Joffm. Reason: Addition

Please Log in or Create an account to join the conversation.

More
2 weeks 6 days ago - 2 weeks 6 days ago #189316 by asilbering
Hi Joffm (or anybody else who can give me a hand),


I am using LimeSurvey 2.05+ and I am trying to combine two question types (Short text and dropdown) to create something like the image attached. I have used the old workaround described in the manual as mentioned at the beginning of the thread ( manual.limesurvey.org/Workarounds:_Quest...stion_types_in_array ).
The problem is that it is not clear to me how to add the question text in that configuration.
If I add a text display question before then the text is not in the same box as the answers. I am very new to Limesurvey, and I don't have the full admin rights, so I cannot install the plugin mentioned above. And as far Java is concerned, I just copy pasted the bits of code I needed, I am not able to develop things on my own yet...

I really liked the option you proposed in your last post, which is a lot more elegant than the one I am using. Is there a way to make that work on Limesurvey 2.05+?

Thanks a lot in advance!
Best regards,

Ana

PS: actually I am also having trouble with the implementation of the "old fashioned" approach. The first image I posted was in a Demo survey, but when I copied the questions to my survey, nothing works (see second screenshot). Any ideas? Thanks a lot!!
Attachments:
Last edit: 2 weeks 6 days ago by asilbering. Reason: add a second question to the post.

Please Log in or Create an account to join the conversation.

More
2 weeks 5 days ago #189369 by tpartner
I'm not clear on what you need. You refer to Joffm's last post which shows how to insert radio buttons into a text-array but your screenshot indicates that you want drop-downs in the second column. Which is it?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

Please Log in or Create an account to join the conversation.

More
2 weeks 5 days ago #189370 by asilbering
You are right, sorry. I got mixed up with a previous post showing how to introduce dropdown menus, which is what I need.

Thanks!
Ana

Please Log in or Create an account to join the conversation.

More
2 weeks 5 days ago - 2 weeks 5 days ago #189379 by tpartner
This script should insert drop-downs in the last column of an array-texts in version 2.05 and 2.06LTS:

<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function() {
		var thisQuestion = $('#question{QID}');
 
		// Insert selects into last column
		$('.answer-item:last-child', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
													<option value="">Please choose...</option>\
													<option value="1">Option 1</option>\
													<option value="2">Option 2</option>\
													<option value="2">Option 3</option>\
													<option value="2">Option 4</option>\
												</select>'); 
 
		// Listeners
		$('.inserted-select', thisQuestion).on('change', function(i) {
			var thistextInput = $(this).closest('.answer-item').find('input:text');
			if($(this).val() != '') {
				$(thistextInput).val($.trim($('option:selected', this).text())).trigger('change');
			}
			else {
				$(this).closest('.answer-item').find('input:text').val('').trigger('change');
			}
			checkconditions($(thistextInput).attr('value'), $(thistextInput).attr('name'), $(thistextInput).attr('type'));
		});
 
		// Returning to page
		$('.with-select input:text', thisQuestion).each(function(i) {
			var thisCell = $(this).closest('.answer-item');
			var inputText = $.trim($(this).val());
			var selectval = $('select.inserted-select option', thisCell).filter(function () { return $(this).html() == inputText; }).val();
			$('select.inserted-select', thisCell).val(selectval);
		});
 
		// Clean-up styles
		$('select.inserted-select', thisQuestion).css({
			'max-width': '100%'
		});
		$('.with-select input:text', thisQuestion).css({
			'position': 'absolute',
			'left': '-9999em'
		});
	});
</script>



Sample survey attached:

File Attachment:

File Name: limesurvey...2821.lss
File Size:17 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Attachments:
Last edit: 2 weeks 5 days ago by tpartner.

Please Log in or Create an account to join the conversation.

More
2 weeks 4 days ago #189410 by asilbering
This is excellent tpartner!
Thank you so much!!

Ana

Please Log in or Create an account to join the conversation.

More
1 week 4 days ago #189690 by asilbering
Good morning,

I would like to change the above script to have the dropdowns on the first column and text boxes in the last one.
I tried modifying the script as follows:
'.answer-item:last-child' --> '.answer-item:first-child'
and also
'.answer-item:last-child' --> '.answer-item.answer_cell_X001'
but neither worked.

If this is not too complicated, could you please give me a hint on how to proceed?

Also, is there a list somewhere with the codes used to access the different parts of the answer so I can learn to do this by myself? I am new to java scripting but would really like to learn...

Thanks a lot in advance!
Have a nice day,
Ana

Please Log in or Create an account to join the conversation.

More
1 week 4 days ago - 1 week 4 days ago #189693 by tpartner
You need to use :nth-child(2) in the selector as the table cells in the first answer column are actually the second child in each row (the sub-question text is in the first child).

- api.jquery.com/nth-child-selector/

<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function() {
		var thisQuestion = $('#question{QID}');
 
		// Insert selects into last column
		$('.answer-item:nth-child(2)', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
													<option value="">Please choose...</option>\
													<option value="1">Option 1</option>\
													<option value="2">Option 2</option>\
													<option value="2">Option 3</option>\
													<option value="2">Option 4</option>\
												</select>'); 
 
		// Listeners
		$('.inserted-select', thisQuestion).on('change', function(i) {
			var thistextInput = $(this).closest('.answer-item').find('input:text');
			if($(this).val() != '') {
				$(thistextInput).val($.trim($('option:selected', this).text())).trigger('change');
			}
			else {
				$(this).closest('.answer-item').find('input:text').val('').trigger('change');
			}
			checkconditions($(thistextInput).attr('value'), $(thistextInput).attr('name'), $(thistextInput).attr('type'));
		});
 
		// Returning to page
		$('.with-select input:text', thisQuestion).each(function(i) {
			var thisCell = $(this).closest('.answer-item');
			var inputText = $.trim($(this).val());
			var selectval = $('select.inserted-select option', thisCell).filter(function () { return $(this).html() == inputText; }).val();
			$('select.inserted-select', thisCell).val(selectval);
		});
 
		// Clean-up styles
		$('select.inserted-select', thisQuestion).css({
			'max-width': '100%'
		});
		$('.with-select input:text', thisQuestion).css({
			'position': 'absolute',
			'left': '-9999em'
		});
	});
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...2282.lss
File Size:17 KB

Also, is there a list somewhere with the codes used to access the different parts of the answer so I can learn to do this by myself? I am new to java scripting but would really like to learn...

You can use browser developer tools (F12) to explore the HTML elements.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Attachments:
Last edit: 1 week 4 days ago by tpartner.

Please Log in or Create an account to join the conversation.

More
1 week 4 days ago #189695 by asilbering
Thanks Tony!

Have a nice day,
Ana

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!