Create a question with multi array (1-5)

More
3 years 8 months ago #98390 by gabrielet
Hi to all,

is a little bit i didn't write on this forum. How are you?
I'd like to create a particular questionon limesurvey like this:

Question
Bablblblbllblblblblblblblbllb ?

ORGANIZATION |1 - 2| - 3| - 4| - 5
organization bureau | | | |
Visiting and exctiments | | | |
Partecipation | | | |

JOBS DESK
Utility of the course | | | |
Time for project | | | |


This only an example. A question that have multi paragraph and group of response.

I dont want to create for question one for a paragraph...

Suggestions?

Thanks
Gabriele

Please Log in to join the conversation.

More
3 years 8 months ago - 3 years 8 months ago #98402 by tpartner
There is no built-in provision to add sub-headings to arrays but you can do it with a little JavaScript.

Add the following to the end of template.js:
function insertSubHeading(qID, rowNum, text) {
	var thisQuestion = $('#question'+qID+'');
	var cols = $('table.subquestions-list thead td, table.subquestions-list thead th', thisQuestion).length;
 
	$('#question'+qID+' table.subquestions-list tbody tr:eq('+(rowNum-2)+')').after('<tr class="subHeading"><th class="answertext">'+text+'</th><td colspan="'+(cols-1)+'"></td></tr>');
}


And, then to insert a subheading in row 3 of the array, add something like this to the question source. Replace the row number (3) and the text (SUBHEADING 1) as necessary
<script type="text/javascript" charset="utf-8">	
	$(document).ready(function(){
		insertSubHeading('{QID}', 3, 'SUBHEADING 1');
	});
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 3 years 8 months ago by tpartner.

Please Log in to join the conversation.

More
3 years 8 months ago - 3 years 8 months ago #98410 by DenisChenu
Hello,

A solution i use sometimes:
If question is not mandatory (but have solution for this too).

Add for subheading in sub question
<strong>My sub heading</strong>

And in js:
$("table.question tbody th > strong").each(function(){
$(this).closest("tr").addClass("sub-heading");
}

In css:
.sub-heading input{display:none}
.sub-heading{background:#ccc}

Denis

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
Last Edit: 3 years 8 months ago by DenisChenu.

Please Log in to join the conversation.

More
10 months 3 weeks ago #135341 by keunes
Neither option seems to work in Version 2.50+ Build 160425
Are there any changes to the code needed, or other suggestions?

Please Log in to join the conversation.

More
10 months 3 weeks ago #135352 by tpartner
Try this:

<script type="text/javascript" charset="utf-8">		
	$(document).ready(function(){
		// Call the function
		insertSubHeading('{QID}', 3, 'SUBHEADING 1');
	});
 
	function insertSubHeading(qID, rowNum, text) {
		// Identify some stuff
		var thisQuestion = $('#question'+qID+'');
		var cols = $('table.subquestion-list thead tr:eq(0) > *', thisQuestion).length;
 
		// Insert the new row
		$('#question'+qID+' table.subquestion-list tbody tr:eq('+(rowNum-1)+')').before('<tr class="subHeading"><th class="answertext">'+text+'</th><td colspan="'+(cols-1)+'"></td></tr>');	
 
		// Fix up the row classes
		var rowClass = 1;
		$('table.subquestion-list tbody tr', thisQuestion).each(function(i) {
			if($(this).hasClass('subHeading')) {
				rowClass = 1
			}
			else {
				rowClass++;
				$(this).removeClass('array1 array2')
				if(rowClass % 2 == 0) {
					$(this).addClass('array2');
				}
				else {
					$(this).addClass('array1');
				}
			}
		});
	}
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
10 months 3 weeks ago #135378 by keunes
Thanks again for the quick reply!
Adding this to the question field doesn't work; the code gets removed upon saving it seems.

I changed the following:
		insertSubHeading('{QID}', 1, 'Traditionele media');
		insertSubHeading('{QID}', 4, 'Digi media');

Is there anything that I need to differently?

Please Log in to join the conversation.

More
10 months 3 weeks ago #135379 by tpartner
That should work assuming your survey is set up to use JavaScript .

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
10 months 3 weeks ago #135382 by keunes
Yup, sorry, I didn't check my question preview properly. Tried to delete my answer from the forum but that didn't work.

So it does seem to work indeed, although the code does seem to get removed upon re-editing the question (it's not visible in when using 'Source' and after saving again the subheadings are removed indeed from the preview).

In any case I can get it working :)
To add a dash of colour to the subheadings I can add the following to my css file, right?
tr.Subheading { background-color: purple; color: #ffffff; }

Please Log in to join the conversation.

More
10 months 3 weeks ago #135384 by tpartner

So it does seem to work indeed, although the code does seem to get removed upon re-editing the question (it's not visible in when using 'Source' and after saving again the subheadings are removed indeed from the preview).

Bug here - www.limesurvey.org/forum/design-issues/1...rce-code-not-visible

To add a dash of colour to the subheadings I can add the following to my css file, right?

Yes, if you like purple. :)

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: keunes

Please Log in to join the conversation.

More
10 months 3 weeks ago - 10 months 3 weeks ago #135388 by keunes
I think I prefer the blue of the standard template ;)

Last comment for other users: I updated the code so that the heading will span across the table (ie: added colspan to th, removed td, right after the "// Insert the new row")
<script type="text/javascript" charset="utf-8">		
	$(document).ready(function(){
		// Call the function
		insertSubHeading('{QID}', 1, 'Traditionele platformen');
		insertSubHeading('{QID}', 8, 'Digitale platformen die niet horen bij bovenstaande &#39;traditionele media&#39;');
	});
 
	function insertSubHeading(qID, rowNum, text) {
		// Identify some stuff
		var thisQuestion = $('#question'+qID+'');
		var cols = $('table.subquestion-list thead tr:eq(0) > *', thisQuestion).length;
 
		// Insert the new row
		$('#question'+qID+' table.subquestion-list tbody tr:eq('+(rowNum-1)+')').before('<tr class="subHeading"><th class="answertext subHeading" colspan="'+(cols)+'">'+text+'</th></tr>');
 
 
		// Fix up the row classes
		var rowClass = 1;
		$('table.subquestion-list tbody tr', thisQuestion).each(function(i) {
			if($(this).hasClass('subHeading')) {
				rowClass = 1
			}
			else {
				rowClass++;
				$(this).removeClass('array1 array2')
				if(rowClass % 2 == 0) {
					$(this).addClass('array2');
				}
				else {
					$(this).addClass('array1');
				}
			}
		});
	}
</script>

And added the following to "css/flat_and_modern.css" (based on default template of v. 2.5):
/* Array table Subheading*/
 .subHeading {
     background-color: #233140;
     color: #ffffff;
     font-weight: normal;
     padding-top: 1em !important;
 }
Last Edit: 10 months 3 weeks ago by keunes. Reason: apply code style
The following user(s) said Thank You: tpartner

Please Log in to join the conversation.

More
10 months 3 weeks ago #135389 by tpartner
Thanks, I like it when people take my suggestions and modify them for their specific needs. That's why I heavily comment most of my posted code.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.