Combine several questions types into one grid, using newest template

More
2 years 9 months ago #146638 by LeftyMaus
I successfully used a javascript work-around for version 2.05+ which allowed me to pack several different types of questions into one grid. I originally got this script, called "Multiple question types in array," from Limesurvey documentation:
https://manual.limesurvey.org/Workarounds

I've since upgraded to Version 2.56.1, and now the grid no longer works. It appears that the new Limesurvey template uses a different convention than the earlier one. I've tried to make it work by fiddling with the script, but I haven't gotten any luck.

Conceptually it seems to me that it aught to work, if I were able to figure out the compatible code. Has anyone adapted this workaround to the newest template? Is that even possible?

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

LimeSurvey Partners
More
2 years 9 months ago #146642 by tpartner
That is a very old workaround that may be easier to replace with other workarounds or Denis' arrayTextAdapt plugin - framagit.org/SondagePro-LimeSurvey-plugin/arrayTextAdapt .

Can you explain exactly what you are trying to do?

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 years 9 months ago #146643 by LeftyMaus
I looked at the Demo site for Denis' arrayTextAdapt plugin, and that looks very close to what I need.

I added a screenshot which is a sample of the hard-copy survey that I am trying to replicate.

In the old script, I basically use four columns:
  • col 1 = boilerplate text
  • col 2 = dollars
  • col 3 = drop-down menu
  • col 4 = open text box

I have relevance set up so the drop-down and open text only appear when a dollar amount is entered. In addition, only a few actually require open text. Lastly I've got validation that makes sure the total of all dollar amounts equals what the respondent entered into an earlier question.

It might be too late for this implementation, but I would definitely like to fix it up for the next one.
Attachments:

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

More
2 years 9 months ago #146659 by DenisChenu

LeftyMaus wrote: ....
It might be too late for this implementation, but I would definitely like to fix it up for the next one.

extensions.sondages.pro/contact

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
An error happen ? Before make a new topic : remind the Debug mode .

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

More
2 years 9 months ago #146664 by LouisGac
Also, combining different types of questions into one grid doesn't make sense on small screens, mobile phone, etc.
Today, think mobile first.
www.uxmatters.com/mt/archives/2012/03/mo...hat-does-it-mean.php

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

More
2 years 9 months ago #146874 by LeftyMaus
I understand the reasoning for making LimeSurvey more compatible with mobile devices. However, the project sponsor is specifically asking for a grid. Essentially they have judged that the convenience of one grid of questions far outweighs the convenience of entering data on a mobile device.

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

More
2 years 9 months ago #146875 by LouisGac

LeftyMaus wrote: However, the project sponsor is specifically asking for a grid. Essentially they have judged that the convenience of one grid of questions far outweighs the convenience of entering data on a mobile device.


But do they know if survey takers will use a smartPhone to answer?

protip:
gs.statcounter.com/press/mobile-and-tabl...first-time-worldwide

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

More
2 years 9 months ago #146930 by holch
I agree with the sponsor, on big screens it is far more convenient to have the grid.

But then Louis is right: check how many actually fill the survey on a traditional device (computer, notebook) vs. those that use smartphones and tablets. Your sponsor might be suprised... ;-)

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

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

More
2 years 9 months ago #146931 by tpartner
Yes, mobile should be considered first but I also have clients who insist on large interactive interfaces that only work well on tablets or desktops. In those cases we sniff the device width and present a warning if it's too small.

So, back to the original post, here the "Multiple question types in array" script modified for the default template in version 2.5.8:

<script type="text/javascript" charset="utf-8">
	$(document).ready(function() { 
 
		// Call the "sideBySide" function with number of rows and columns
		sideBySide(4, 5, 3);   
    });
 
	function sideBySide(rows, columns, startQuestion) {
 
		/*********** 
		Display multiple questions side by side
		***********/
 
		if ($('div.qRow1').length == 0) {
 
			var rowNum = 0;
			var colNum = 1;
			var rowList = new Array(); 
 
			//////// Add question classes for later use ////////
 
			// Loop through all questions and add row and column specific classes
			$('div[id^="question"]').each(function(i) {
				if(i >= (startQuestion-1) && rowNum < rows) { // This IF condition only needed if there are questions following the "inline" questions
					$(this).addClass('qRow'+rowNum+'').addClass('qCol'+colNum+'').addClass('inlineQuestion').removeClass('col-xs-12');
					if(rowNum == 0 && colNum > 1) {
						$(this).addClass('columnLabel');
					}
					if(rowNum > 0 && colNum == 1) {
						$(this).addClass('rowLabel');
					}
					else if(rowNum > 0 && colNum > 1) {
						$(this).addClass('questionCell');
					}
					if(colNum == columns) {
						rowList.push('qRow'+rowNum+'');
						rowNum++;
						colNum = 1;
					}
					else {
						colNum++;
					}
				}
				else {
					$(this).addClass('normalQuestion');
				}
			}); 
 
			//////// Survey layout manipulation ////////
 
			// Fix the width of the survey
			$('.outerframe').css({
				'min-width': '900px'
			});
 
			// Wrap each "row" in a wrapper div
			$(rowList).each(function(i) {
				$('.'+this+'').wrapAll('<div id="inlineWrapper'+i+'" class="inlineRow" />');
			});
			$('.inlineRow').append('<div style="clear:both" />');
 
			// Style the wrapper divs
			$('.inlineRow').css({
				'clear': 'both',
				'margin':'0',
				'border-right':'1px solid #DBDBDB'
			});
 
			// Header row
			$( '#inlineWrapper0' ).css({
				'background-color': '#233140',
				'height':'auto',
				'border-right':'1px solid #233140'
			});
			$( '#inlineWrapper0 .inlineQuestion' ).css({ 'height':'50px' });
 
			// Last row
			$( '.inlineRow:last' ).css({
				'margin-bottom': '30px',
				'border-bottom':'1px solid #DBDBDB'
			});
 
			// Get all the questions to sit politely side by side
			$( '.inlineQuestion' ).css({
				'float': 'left',
				'margin-bottom': '0',
			});
			$( '.inlineQuestion > div' ).css({
				'border': '0 none'    
			});
			$( '.inlineQuestion .question-wrapper' ).css({
				'margin': '0'    
			});
			$( '.inlineQuestion .question-title-container' ).css({
				'padding': '1em 0',    
				'margin': '0',    
				'text-align': 'center'    
			});
			$( '.inlineQuestion .answer-container' ).css({
				'padding': '5px 0'    
			});
			$( '.inlineQuestion p.answer-item' ).css({
				'margin': '0'
			});
			$( '.inlineQuestion .answer-container div' ).removeClass('col-xs-12 col-sm-7');
			$( '.inlineQuestion .answer-container p' ).removeClass('col-sm-4');
			$( '.inlineQuestion .answer-container div.answer-item, .inlineQuestion .answer-container div.answer-item div' ).css({
				'margin': '0',
				'padding': '0'    
			});
			$( '.inlineQuestion .questionhelp, .inlineQuestion .question-help-container' ).hide();
			$( '.inlineQuestion .survey-question-help, .inlineQuestion .questionhelp, .inlineQuestion .questionvalidcontainer' ).parent().hide();
 
			// Any questions not displayed inline (this is only needed if there are questions following the "inline" questions)
			$( '.normalQuestion' ).css({
				'clear': 'both'   
			});
 
			//////// Column manipulation ////////
 
			// Set the column widths - can be set individually if necessary
			// Must add up to less than 100%
			$( '.qCol1' ).css({
				'width': '12%'
			});
			$( '.qCol2, .qCol3, .qCol4, .qCol5' ).css({
				'width': '22%'
			});
 
			//////// Question manipulation ////////
 
			// Hide the answer element in boilerplate questions
			$( 'div.boilerplate.inlineQuestion .answer-container' ).hide();
 
			// Hide the question text elements in non-boilerplate questions
			$('div.questionCell .question-title-container').hide();
 
			// Get everything to line up nicely vertically
			$( '.inlineQuestion td.questiontext, .inlineQuestion td.answer p' ).css({
				'text-align': 'center'
			});
 
			// Yes-no question styles
			$( '.inlineQuestion.yes-no ul' ).css({
				'text-align': 'center',
				'font-size': '90%',
				'margin': '0',
				'padding-bottom': '5px'
			});
			$( '.inlineQuestion.yes-no li' ).css({
				'display': 'inline-block',
				'padding': '10px 10px 0 10px'
			});
 
			// Numeric question styles
			$( '.inlineQuestion.text-short input, div.numeric input' ).css({
				'width': '100%',
				'height': 'auto',
				'margin': '0 auto',
				'padding': '5px'
			});
 
			// Dropdown question styles
			$( '.inlineQuestion.list-dropdown select' ).css({
				'height': 'auto',
				'margin': '0 auto',
				'padding': '5px'
			});
 
		}
	}
 
</script>



Sample survey attached:

File Attachment:

File Name: limesurvey...1-10.lss
File Size:48 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:
The following user(s) said Thank You: LeftyMaus

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

More
2 years 9 months ago #147248 by LeftyMaus
Thanks TPartner. Unfortunately its too late for this implementation, but I'll give your v2.5.8-compatible code a try next time.

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

More
2 years 7 months ago #149381 by ymca
I was looking for that exact thing.
It looks so cool :)
I hope it will be a native option in LS.

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

More
1 year 9 months ago - 1 year 9 months ago #162122 by LeftyMaus
I've managed to implement this javascript workaround, except one of my question types is not provided for. There are lines for Yes-No, Numeric, and Dropdown, but nothing for Multiple numerical Input.

I am forced to use Multiple numerical input in order to utilize the validation features. This prevents the respondent from submitting unless the dollar amounts are correct. In the past I figured out how to hide all the "helper" text. This made Multiple numerical input look just like the regular Numeric.
// Multiple numerical input question styles
			$( 'div.numeric-multi input' ).css({
				'width': '80px'
			});
			$( 'div.numeric-multi.inlineQuestion ul' ).css({
				'margin-left': '0'
			});
			$( 'div.numeric-multi.inlineQuestion li label' ).css({
				'display': 'none'
			});
I tried adapting this to the new mobile-friendly template, but I haven't been able to figure it out. The best I've come up with is to hide some of the text, but not all of it.
// reference to FinLine1Dollars "Remaining:" and "Total:" text
			// all <div> of the class multiplenumerichelp that are contained within <td>, appearing on the row id of inlineWrapper1
			$( '#inlineWrapper1 td div.multiplenumerichelp' ).css({ 
				'display':'none'
			});
 
			// attempt to identify the boundary of Multiple numerical input
			// all <div> of the class "answer-container" that are contained within <div> of the "numeric-multi" class, appearing on the row id of inlineWrapper1
			$( '#inlineWrapper1 div.numeric-multi div.answer-container' ).css({ 
				'color': 'blue',
				'background-color': 'rgba(0,0,255,0.3)',
				'border':'1px solid blue'
			});

I highlighted the offending portion in blue.

Could you provide me a bit more javascript code that would allow me to use Multiple Numeric Input within the grid?
Attachments:
Last edit: 1 year 9 months ago by LeftyMaus. Reason: adding notes to screenshot

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

More
1 month 1 week ago #188707 by GISS
Hi,
has anybody even a script modified for the default template in version 3.17.13?
Thank you and best regards

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

More
1 month 1 week ago #188725 by Joffm
If you refer to the grid shown above, you may use the "normal" script to enter drop-downs into an array(text).


Just validate the "numeric" column.

Here the script: (columns have codes "X001", "X002", "X003", "X004")
<script type="text/javascript" charset="utf-8">
 
	$(document).on('ready pjax:scriptcomplete',function(){
		var thisQuestion = $('#question{QID}');
 
		// Insert selects
		$('.answer-item.answer_cell_X001', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
													<option value="">Yes/No...</option>\
													<option value="1">Yes</option>\
													<option value="2">No</option>\
												</select>'); 
		$('.answer-item.answer_cell_X004', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
													<option value="">Select...</option>\
													<option value="1">Option 1</option>\
													<option value="2">Option 2</option>\
													<option value="3">Option 3</option>\
													<option value="4">Option 4</option>\
												</select>'); 
 
		// Listeners
		$('.inserted-select', thisQuestion).on('change', function(i) {
			if($(this).val() != '') {
				$(this).closest('.answer-item').find('input:text').val($.trim($('option:selected', this).text())).trigger('change');
			}
			else {
				$(this).closest('.answer-item').find('input:text').val('').trigger('change');
			}
		});
 
		// 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>

Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:
The following user(s) said Thank You: GISS

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

More
1 month 1 week ago #188733 by GISS
Nice, thank you very much Joffm!!! It works!
What should I do if I want a radio button instead of dropdown in an array?

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!