Check out the LimeSurvey source code on GitHub!
Welcome, Guest
Username: Password:

TOPIC: Multiple question types in array modifiy

Multiple question types in array modifiy 4 years 11 months ago #67811

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6323
  • Thank you received: 1407
  • Karma: 547
I'm afraid I can't help without seeing the survey. Can you attach a sample survey with your code?
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

Multiple question types in array modifiy 4 years 11 months ago #67922

  • Eddie_V
  • Eddie_V's Avatar
  • Offline
  • Senior Lime
  • Posts: 42
  • Thank you received: 2
  • Karma: 1
if you say that the code on the wiki is correct I will take your word for it. I will try myself to get it working some more, if I cannot get it to work I will take up your offer and supply you with a sample.

thnx in advance :)
The administrator has disabled public write access.

Multiple question types in array modifiy 4 years 7 months ago #73412

Hi everyone!
I've just finished reading all replies to this topic (I've learned a lot!!! Thanks!!) but still I feel the need to post my question (which is quite simple... at least it seems like ;) )

I'm trying to generate questions that have two types of answers: one is a list radio, and the other is a start rating (a workaround that can be found here).

Here some (MSWord-horrible-looking) example:



For this purpose I thought that the "multiple question types in array" workaround would be perfect, and although it is great, it doesn't work with the "star rating" workaround. The problem seems to be that in order to generate the star rating system, one needs to put the code/script in the "question-text" section leaving the "question-answer" section clean. Thus, the <td class="answer"> tag doesn't show in the actual code of the survey page and therefore the "array" workaround doesn't show the stars....

Does anybody know if there is a way to make this work, or if there is any other kind of solution to this puzzle?
Many many thanks!!!
The administrator has disabled public write access.

Multiple question types in array modifiy 4 years 7 months ago #73434

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6323
  • Thank you received: 1407
  • Karma: 547
Yeah, you put your finger on the problem. You need to modify the multiple-question workaround to show the question text for numeric questions and hide the answer elements for those questions.

Here is a version of the "multiple-question-types-in-array" workaround script with the following modifications:

1) It shows the question text for numeric questions and hides the answer elements for those questions.

2) It's set to show 3 rows and 3 columns as in your example.

3) I added some styles for the row colours.

4) The Star Rating workaround code is included.

5) To make the survey fully portable, I also added some small functions to automatically apply the Star Rating behaviour to all numeric questions.
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function(){
 
			// Call the "sideBySide" function with number of rows and columns
			sideBySide(3, 3); 
 
			// Apply the Star Rating workaround to all numeric questions
			$('div.numeric').each(function(i) {  
				var thisQID = $(this).attr('id').split('question')[1];
				handleRatingNumeric (surveyID(),  groupID(), thisQID);
			});
	});
 
	// A function to align different <a href='http://www.docs.limesurvey.org/tiki-index.php?page=Question+types&structure=English+Instructions+for+LimeSurvey'><a href='http://www.docs.limesurvey.org/tiki-index.php?page=Question+types&structure=English+Instructions+for+LimeSurvey'>question types</a></a> side-by-side
	function sideBySide(rows, columns) {
 
		/*********** 
		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(rowNum <= rows) { // This IF condition only needed if there are questions following the "inline" questions
					$(this).addClass('qRow'+rowNum+'').addClass('qCol'+colNum+'').addClass('inlineQuestion');
					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
			$('table.outerframe').css({
				'width': '900px'
			});
 
			// Wrap each "row" in a wrapper div
			$(rowList).each(function(i) {
				$('.'+this+'').wrapAll('<div id="inlineWrapper'+i+'" class="inlineRow" />');
			}); 
 
			// Style the wrapper divs
			$('.inlineRow').css({
				'width': '850px',
				'clear': 'both'
			});
			$( '.inlineRow:first' ).css({
				'margin-top': '10px'
			});
 
			// Get all the questions to sit politely side by side
			$( '.inlineQuestion' ).css({
				'float': 'left',
				'overflow':'hidden'
			});
			$( '.inlineQuestion .question-wrapper' ).css({
				'margin-bottom': '0'
			});
			$( '.inlineQuestion .questionhelp' ).hide();
			$( '.inlineQuestion .survey-question-help' ).parent().hide();
 
			// A little space under the last row
			$( '.inlineRow:last' ).css({
				'margin-bottom': '10px'
			});
 
			// 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': '40%'
			});
			$( '.qCol2, .qCol3' ).css({
				'width': '29%'
			});
 
			//////// 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.questionCell td.questiontext').parent().hide();
 
			// STAR RATING - Show the question text elements in numeric questions
			$('div.numeric td.questiontext').parent().show();
 
			// Push the question tables to 100%
			$( 'div.inlineRow table' ).css({
				'width': '100%'
			});
 
			// Get everything to line up nicely vertically
			$( '.inlineQuestion td.questiontext, .inlineQuestion td.answer p' ).css({
				//'text-align': 'center'
			});
 
			// Adjust cell heights so everything lines up nicely horizontally
			$( '.inlineQuestion td.answer, .inlineQuestion td.questiontext' ).css({
				'height':'35px',
				'overflow':'hidden',
				'padding':'0.5em'
			});
			$( '#inlineWrapper0 .inlineQuestion' ).css({ 'height':'50px' });
			$( '#inlineWrapper0 td.questiontext' ).css({
				'height':'50px'
			});
 
			// 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'
			});
 
		}
 
		// Fix up the row background colours
		var rowIndex = 0;
		$('.inlineRow').each(function(i, el){
			rowIndex ++;
 
			if(rowIndex % 2 == 0) {
				$(el).addClass('rowEven');
			}
			else {
				$(el).addClass('rowOdd');
			}
		});
 
		$('.inlineRow').append('<div style="width:100%; clear:both;"></div>');
 
		$('.rowOdd *, .rowEven *').css({
			'background-color': 'transparent'
		});
 
		$('.rowOdd').css({
			'background-color': '#EFEFEF'
		});
 
		$('.rowEven').css({
			'background-color': '#FAFAFA'
		});
 
		$('.inlineRow:first').css({
			'background-color': '#DADADA'
		});
	}
 
	// A function to apply the Star Rating workaround to a numeric input question
	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);
		});
 
	}
 
	// A function to return the survey ID
	function surveyID() {
		if($('input#fieldnames').length != 0) {
			var fieldNames = $('input#fieldnames').attr('value');
			var tmp = fieldNames.split('X');
			return tmp[0];
		}
	}
 
	// A function to return the group ID
	function groupID() {
		if($('input#fieldnames').length != 0) {
			var fieldNames = $('input#fieldnames').attr('value');
			var tmp = fieldNames.split('X');
			return tmp[1];
		}
	}
 
</script>

Here's a demo survey:

File Attachment:

File Name: limesurvey...2381.lss
File Size:49 KB


And, of course, you will need to use a template that has all of the Star Rating workaround stuff:

File Attachment:

File Name: starRatingTest.zip
File Size:56 KB


The result:
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 4 years 7 months ago by tpartner.
The administrator has disabled public write access.
The following user(s) said Thank You: iosononando

Multiple question types in array modifiy 4 years 7 months ago #73456

  • Mazi
  • Mazi's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6009
  • Thank you received: 371
  • Karma: 260
For Limesurvey 3.0 we should really re-think the question design and template options. In combination with the Database Storage Engine (DBSE) implementations we should be able to offer a more flexible approach...

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Multiple question types in array modifiy 4 years 7 months ago #73470

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 9358
  • Thank you received: 1341
  • Karma: 386
Seems to star rating system implemented for 5 point choice in yii, but it was very bad HTML rendered.

:)
Assistance on LimeSurvey forum and LimeSurvey core developpement are on my free time (Say thanks ?).
A bug not reported is a bug not corrected. | Please, read the documentation | La doc en français à besoin de vous
The administrator has disabled public write access.

Multiple question types in array modifiy 4 years 7 months ago #73503

This is fantastic!!! Thanks a lot!!!! I will put my hands on it right away! :D
The administrator has disabled public write access.

Multiple question types in array modifiy 4 years 7 months ago #73507

  • Mazi
  • Mazi's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6009
  • Thank you received: 371
  • Karma: 260
iosononando wrote:
This is fantastic!!! Thanks a lot!!!! I will put my hands on it right away! :D
You're welcome :-)

If our hints have been helpful and you enjoy limesurvey please consider a donation to the team .
We do all this in our free time and you don't have to pay a penny for this software.

Without your help we can't keep this project alive.

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Multiple question types in array modifiy 4 years 7 months ago #75086

  • erregi
  • erregi's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 5
  • Karma: 0
Hi all,

i've just tried the "Multiple question type in array" workaround.
It works if the multiple questions is the first element, but not working if there are other questions before the table. (see the attachments)

i've tryed for hours a solution without success! :(

Thanks in advance for the support!

Working (table as first answer):


Not Working (table as second answer):
Last Edit: 4 years 7 months ago by erregi.
The administrator has disabled public write access.

Multiple question types in array modifiy 4 years 7 months ago #75112

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6323
  • Thank you received: 1407
  • Karma: 547
erregi, please attach a sample survey with that group and your JavaScript in it and I'll see if I can come up with a fix.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

Multiple question types in array modifiy 4 years 7 months ago #75148

  • erregi
  • erregi's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 5
  • Karma: 0
please find attacched the survey.
The JS code is inside the question "0.1"

In this example i have only one question before the "table with questions" but i need to make it work in any position of a question group.

Thank You for your help!


File Attachment:

File Name: erregi_lim...8641.lss
File Size:79 KB
The administrator has disabled public write access.

Multiple question types in array modifiy 4 years 7 months ago #75157

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6323
  • Thank you received: 1407
  • Karma: 547
Adding an parameter for the start question number should do the trick.

So, this:
function sideBySide(rows, columns) {
Changes to this:
function sideBySide(rows, columns, startQuestion) {

And, this:
if(rowNum <= rows) {
Changes to this:
if(rowNum <= rows && i >= startQuestion-1) {

Then, calling the function if you have 2 questions before the "inline" questions (as in my sample survey below), this
sideBySide(5, 5);
Changes to this:
sideBySide(5, 5, 3);

The complete script would be:
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function() { 
 
		// Call the "sideBySide" function with number of rows, columns and the start question number
		sideBySide(5, 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) {
				/* This IF condition only needed if there are questions 
				preceding or following the "inline" questions*/
				if(rowNum <= rows && i >= startQuestion-1) {
					$(this).addClass('qRow'+rowNum+'').addClass('qCol'+colNum+'').addClass('inlineQuestion');
					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
			$('table.outerframe').css({
				'width': '900px'
			});
 
			// Wrap each "row" in a wrapper div
			$(rowList).each(function(i) {
				$('.'+this+'').wrapAll('<div id="inlineWrapper'+i+'" class="inlineRow" />');
			}); 
 
			// Style the wrapper divs
			$('.inlineRow').css({
				'width': '850px',
				'margin': '0 auto 0 auto',
				'clear': 'both'
			});
			$( '.inlineRow:first' ).css({
				'margin-top': '10px'
			});
 
			// Get all the questions to sit politely side by side
			$( '.inlineQuestion' ).css({
				'float': 'left',
 
				'height':'41px',
				'overflow':'hidden',
				'margin-bottom': '-5px'    
			});
			$( '.inlineQuestion .questionhelp' ).hide();
			$( '.inlineQuestion .survey-question-help' ).parent().hide();
 
			// A little space under the last row
			$( '.inlineRow:last .inlineQuestion' ).css({
				'margin-bottom': '10px'
			});
 
			/* 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 td.answer' ).parent().hide();
 
			// Hide the question text elements in non-boilerplate questions
			$('div.questionCell td.questiontext').parent().hide();
 
			// Push the question tables to 100%
			$( 'div.inlineRow table' ).css({
				'width': '100%'
			});
 
			// Get everything to line up nicely vertically
			$( '.inlineQuestion td.questiontext, .inlineQuestion td.answer p' ).css({
				'text-align': 'center'
			});
 
			// Adjust cell heights so everything lines up nicely horizontally
			$( '.inlineQuestion td.answer, .inlineQuestion td.questiontext' ).css({
				'height':'35px',
				'overflow':'hidden',
				'padding':'0.5em'
			});
			$( '#inlineWrapper0 .inlineQuestion' ).css({ 'height':'50px' });
			$( '#inlineWrapper0 td.questiontext' ).css({
				'height':'50px'
			});
 
			// Yes-no question styles
			$( 'div.yes-no ul' ).css({
				'text-align': 'center',
				'font-size': '90%',
				'margin': '0',
				'padding-bottom': '5px'
			});
			$( 'div.yes-no li' ).css({
				'padding-right': '1.5em'
			});
			$( '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' }); 
 
		}
	}
 
</script>

Here is your sample survey back with the modified code. I have added another question before the "inline" questions so the "inlines" star at question 3.

File Attachment:

File Name: limesurvey...1_TP.lss
File Size:81 KB
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.
The following user(s) said Thank You: erregi

Multiple question types in array modifiy 4 years 7 months ago #75160

  • erregi
  • erregi's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 5
  • Karma: 0
the script works if you have other questions BEFORE "the grid" but it doesn't work if you have other questions after it.

I made a new example with those elements(see the attachment):

2 questions
Grid with questions
2 questions

Thanks again for your Help!


File Attachment:

File Name: erregi_lim...3823.lss
File Size:90 KB
The administrator has disabled public write access.

Multiple question types in array modifiy 4 years 7 months ago #75161

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6323
  • Thank you received: 1407
  • Karma: 547
Change this line:
if(rowNum <= rows && i >= startQuestion-1) {

To this:
if(rowNum <= rows-1 && i >= startQuestion-1) {
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.
The following user(s) said Thank You: erregi

Aw: Re:Multiple question types in array modifiy 4 years 5 months ago #78609

  • barbarian
  • barbarian's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 13
  • Karma: 0
Hello!

I want to place one "short text question" and one "array" question (with four radio buttons) side-by-side, like Tpartner explained. But it doesn´t work for me, means it has no effect.
<script type="text/javascript" charset="utf-8">
 
    $(document).ready(function() {
 
        var qText = 18a;       
        var qArray = 18b;
 
        // Fix the width of the survey
        $( 'table.outerframe' ).css({'width': '900px'});
 
        // Wrap the 2 questions in a container div and style it
        $('#question'+qText+', #question'+qArray+'').wrapAll('<div class="inlineWrapper" />');
        $('.inlineWrapper').append('<div style="clear:both" />');
        $('.inlineWrapper').css({
            'width': '75%',
            'margin':'0 auto 10px auto',
            'background-color':'#FFFFFF'
        });
        $('.inlineWrapper *').css({
            'padding': '0',
            'margin':'0'
        });
 
        // Hide the question and the help text
        $('#question'+qText+' td.questiontext, #question'+qArray+' td.questiontext').parent().hide();
        $('#question'+qText+' > table:eq(1), #question'+qArray+' > table:eq(1)').hide();
        $('#question'+qText+' td.survey-question-help, #question'+qArray+' td.survey-question-help').parent().hide();
 
        //Hide the answer cell of the array
        $('#question'+qArray+' table.question thead tr').children(":first").hide();
        $('#question'+qArray+' table.question tbody tr').children(":first").hide();
        $('#question'+qArray+' col').attr('width', '');
 
        // Push all question tables to 100%
        $('#question'+qText+' table, #question'+qArray+' table').css({'width': '100%'});
 
        // Get the 2 questions to sit politely side by side
        $('#question'+qText+', #question'+qArray+'').css({'float':'left'});
        $('#question'+qText+'').css({'padding':'15px 0 5px 25px'});
        $('#question'+qText+'').css({'padding-top':'27px'}); // Adjust here for wrapped array labels
        $('#question'+qArray+'').css({'padding':'5px 0 10px 0'});
        $('#question'+qArray+' table.question td').css({'padding':'4px'});
        $('#question'+qText+' table:first').attr('align', 'left');
        $('#question'+qText+' label').css({
            'display':'inline', 
            'width':'auto', 
            'margin-right':'10px'
        });
 
        // Set the widths of the 2 questions
        $('#question'+qText+'').css({'width': '35%'});
        $('#question'+qArray+'').css({'width': '58%'});
 
    });
 
</script>
Maybe someone can help me please.
Using 1.92+
Last Edit: 4 years 5 months ago by barbarian.
The administrator has disabled public write access.
Time to create page: 0.418 seconds
Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form