Can I use Card sorting with limesurvey 2.73

More
1 week 3 days ago #163995 by DanielVN
DanielVN created the topic: Can I use Card sorting with limesurvey 2.73
Hi guys,

Recently I have updated limesurvey from 2.06 to 2.73 and currently i'm using the default template. I have a new questionnaire that I need script and I would like to include the card sorting question as described here ( manual.limesurvey.org/Workarounds:_Manip...ime_using_Javascript ).

Could you please advise if there is updated script that works with the new templates?

Thank you very much in advance.

Cheers,
Daniel

Please Log in to join the conversation.

More
1 week 3 days ago #164002 by tpartner
tpartner replied the topic: Can I use Card sorting with limesurvey 2.73
No, it's not responsive for mobile devices.

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
1 week 3 days ago #164004 by DanielVN
DanielVN replied the topic: Can I use Card sorting with limesurvey 2.73
Hi tpartner,

Thank you for your answer. The thing is that i don't need to use it on mobile devices. Is there a way to adapt the script for v2.73 as this is cool looking question and it would be shame if I will not be able to use it as i did before in v2.06?

Thanks
Daniel

Please Log in to join the conversation.

More
1 week 3 days ago #164009 by jelo
jelo replied the topic: Can I use Card sorting with limesurvey 2.73
If you plan to conduct a new survey soon, I would recommend sticking to the LS 2.06 LTS branch and install LS 3.0 parallel to that.

Why? LS 3.0 uses a different template engine than LS 2.73. LS 3.0 will be the new LTS. The new codebase is LS 3.0. You have the option to skip LS 2.73 completely.
This sounds confusing, right?
Others have question too: www.limesurvey.org/forum/installation-a-...garding-lts-versions

Please Log in to join the conversation.

More
1 week 2 days ago #164017 by tpartner
tpartner replied the topic: Can I use Card sorting with limesurvey 2.73
This function will work in 2.73:

function cardSort(qID) {
 
	// Define some stuff...
	var thisQuestion = $('#question'+qID);
	var thisQuestionHelp = $('.question-help-container', thisQuestion);	
	thisQuestion.addClass('card-sort-question');	
	$('body').addClass('with-card-sort-question');
 
	// Hide the "Help" section
	$('*', thisQuestionHelp).hide();
 
	//Insert the "card sort" elements
	$('.questions-list', thisQuestion).parent().prepend('<div class="droppable items-start"></div><div class="items-end-wrapper" />');
	$('ul:eq(0) li', thisQuestionHelp).each(function(i) {
		$('.items-end-wrapper', thisQuestion).append('<div class="items-end-inner">\
													<div class="items-end-text">'+$(this).html()+'</div>\
													<div class="droppable items-end items-end-'+(i+1)+'" data-items-end="'+(i+1)+'"></div>\
												</div>')});
 
	// Insert the "cards"
	$('.answer-item', thisQuestion).each(function(i) {
		var thisSGQA = $(this).attr('id').replace(/javatbd/, '');
		var thisCode = $(this).attr('id').split('X'+qID)[1];
		var thisHTML = $('label', this).html();
		$('div.items-start').append('<div class="card draggable" data-SGQA="'+thisSGQA+'" data-code="'+thisCode+'">\
										'+thisHTML+'\
									</div>');
	});			
 
	// Make the "cards" draggable
	$('.draggable').draggable({ 
		revert: "invalid", 
		zIndex: 2700, 
		helper: 'original',
		start: function( event, ui ) {
			$(ui.helper).addClass('ui-draggable-helper');
		},
		stop: function( event, ui ) {
		}
	});
 
	// Set the targets for the draggables
	$('.droppable.items-start').droppable({ 
		hoverClass: 'target-hover', 
		accept: '.draggable.moved' 
	});
	$('.droppable.items-end').droppable({ 
		hoverClass: 'target-hover', 
		accept: '.draggable' 
	});
 
	// After dropped
	$('.droppable').bind('drop', function(event, ui) {
 
		// Physically move the draggable to the target 
		// (the plugin just visually moves it)
		// (need to use a clone here to fake out iPad)
		var newDraggable = $(ui.draggable).clone();
		$(newDraggable).appendTo(this);
		$(ui.draggable).remove();
		if($(this).hasClass('items-end')) {
			$(newDraggable).addClass('moved');
		}
		else {
			$(newDraggable).removeClass('moved');
		}
		$(newDraggable).removeClass('ui-draggable-helper ui-draggable-dragging').css({
			'z-index':'',
			'top':'auto', 
			'left':'auto'
		});
 
		// Now, make this new clone draggable
		$(newDraggable).draggable({ 
			revert: "invalid", 
			zIndex: 2700, 
			helper: 'original',
			start: function( event, ui ) {
				$(ui.helper).addClass('ui-draggable-helper');
			},
			stop: function( event, ui ) {
			}
		});
	});
 
	// Initial "card" positions
	$('.question-item input.text', thisQuestion).each(function(i) {
		if($(this).val() > 0) {
			$('.items-end[data-items-end="'+$(this).val()+'"]').append($('.card[data-SGQA="'+$(this).attr('name')+'"]'));
			$('.card[data-SGQA="'+$(this).attr('name')+'"]').appendTo($('.items-end[data-items-end="'+$(this).val()+'"]')).addClass('moved');
		}
	});
 
	// Interrupt the Next/Submit function and load the inputs
	$('#movenextbtn, #movesubmitbtn').on('click', function(){
		$('.question-item input.text', thisQuestion).val(0);
		$('.droppable.items-end .card', thisQuestion).each(function(i) {
			var thisItemsEnd = $(this).closest('.droppable.items-end').attr('data-items-end');
			var thisID = $(this).attr('data-SGQA');
			$('#answer'+thisID+'').val(thisItemsEnd);
		});
	});
}


And, this CSS for the default template:

@media (max-width: 560px){
 
	.with-card-sort-question #outerframeContainer {
		padding: 0 5px;
	}
 
	.with-card-sort-question #main-col {
		padding: 0;
	}
 
	.with-card-sort-question div.answer {
		padding: 0 5px;
	}
}
 
.card-sort-question .questions-list {
	/*display: none;
	clear: both;*/
	position: absolute;
	left: -9999em;
}
 
.card-sort-question .items-start {
	float: left;
	width: 48%;
	max-width: 340px;
	height: 317px;
	margin-top: 8px;
	border: 1px solid #666;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	border-radius: 6px;
}
 
.card-sort-question .items-start.target-hover {
	background:#C9C9C9;
}
 
.card-sort-question .items-end-wrapper {
	float: left;
	margin-left: 3%;
	width: 48%;
	max-width: 340px;
}
 
.card-sort-question .items-end {
	width: 100%;
	min-height: 73px;
	margin-bottom: 10px;
	padding-bottom: 5px;
	border: 1px solid #666;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	border-radius: 6px;
	background: #EBEBEB;
}
 
.card-sort-question .items-end.target-hover {
	background: #C9C9C9;
}
 
.card-sort-question .items-end.ui-state-disabled {
    opacity: 1;
	filter:alpha(opacity=100);
}
 
.card-sort-question .items-end-text {
	padding-bottom: 5px;
	background: #FFFFFF;
	font-size: 110%;
	font-weight: bold;
}
 
.card-sort-question .card  {
	display: inline-block;
	width: 140px;
	height: auto;
	margin: 5px 8px;
	padding: 3px;
    border: 2px solid #2F4354;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;
	border-radius: 8px;
	background-color: #43b3d1;
	color: #2f4354;
	font-weight: bold;
	text-align: center;
	line-height: normal;
}
 
.card-sort-question .items-end .card  {
	margin: 5px 7px;
}
 
.card-sort-question  div.answer {
	clear: both;
	padding-top: 1px;
	margin-top: 0;
}

Sample survey and template attached:

File Attachment:

File Name: limesurvey...2232.lss
File Size:19 KB

File Attachment:

File Name: Demo_Card_...late.zip
File Size:884 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:

Please Log in to join the conversation.

More
1 week 2 days ago #164028 by DanielVN
DanielVN replied the topic: Can I use Card sorting with limesurvey 2.73
Thank you very much, Tpartner.

Works like a charm :)

Cheers
Daniel

Please Log in to join the conversation.

More
1 week 1 day ago #164107 by tpartner
tpartner replied the topic: Can I use Card sorting with limesurvey 2.73
Here is a custom question theme for Card Sorting in LimeSurvey 3.x. (note that this interface is not optimal for small screen sizes)

Implementation:

1) Extract the custom question theme linked below and upload it to /limesurvey/upload/themes/question/.

2) Create a multiple-short-text question, click Save.

3) Set the question setting "Question theme" to "cardSort", click Save.


4) In the question setting "Sorting area names" field, enter a comma-separated list of the names for the sorting "buckets", click Save.


5) Create sub-questions as required.

6) The styles for the theme can be modified in /limesurvey/upload/themes/question/cardSort/survey/questions/answer/multipleshorttext/assets/css/cardsort.css.



Custom question theme:

File Attachment:

File Name: cardSort.zip
File Size:421 KB


Sample survey:

File Attachment:

File Name: limesurvey...1831.lss
File Size:24 KB

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.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!