Can I use Card sorting with limesurvey 2.73

More
10 months 10 hours 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 or Create an account to join the conversation.

More
10 months 9 hours 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 or Create an account to join the conversation.

More
10 months 9 hours 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 or Create an account to join the conversation.

More
10 months 8 hours 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

Are you a student conducting a survey? If yes, tell me why you use LimeSurvey?
www.limesurvey.org/forum/development/116...y-you-use-limesurvey

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

More
10 months 6 hours 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 or Create an account to join the conversation.

More
10 months 4 hours 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 or Create an account to join the conversation.

More
9 months 4 weeks 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 or Create an account to join the conversation.

More
2 months 1 week ago #174957 by RitaShen
RitaShen replied the topic: Can I use Card sorting with limesurvey 3.x
hi Tony:

i'm using the limesurvey 3.14.11.
I've download the cardsort theme in 3.x version,
but I cannot successful upload the theme
it will show this:
Error: Can't find a manifest for CardSort in ' /LimeSurvey Professional (previously LimeService)/instances/6/limesurvey/themes/survey/CardSort/ '

how to solve this problem?
many thanks

Rita

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

More
2 months 1 week ago #174960 by DenisChenu
DenisChenu replied the topic: Can I use Card sorting with limesurvey 3.x
Currently you can upload only Survey theme, not question theme. You need to upload it manually via FTP/SFTP.

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).
An error happen ? Before make a new topic : remind the Debug mode .
The following user(s) said Thank You: tpartner

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!