Can I use Card sorting with limesurvey 2.73

More
1 year 1 month ago #163995 by DanielVN
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.

LimeSurvey Partners
More
1 year 1 month ago #164002 by tpartner
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
1 year 1 month ago #164004 by DanielVN
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
1 year 1 month ago #164009 by jelo
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

The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users

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

More
1 year 1 month ago #164017 by tpartner
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
1 year 1 month ago #164028 by DanielVN
Thank you very much, Tpartner.

Works like a charm :)

Cheers
Daniel

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

More
1 year 1 month ago #164107 by tpartner
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
5 months 3 weeks ago #174957 by RitaShen
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
5 months 3 weeks ago #174960 by DenisChenu
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.

More
2 months 22 minutes ago #179583 by RitaShen
Hi Denis,

Since I'm use the LimeSurvey Pro, I do not have my own server.
can I ask how upload it manually via FTP/SFTP.

thanks

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

More
1 month 3 weeks ago #179585 by DenisChenu
tpartner and me didn't have any releation with LimeSurvey Pro , wgy you ask to me ?????
www.limesurvey.org/customer-support

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 .

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

More
1 month 3 weeks ago #179589 by RitaShen
Denis,

I'm using LimeSurvey Professional (use LimeSurvey's hosting services)

https://manual.limesurvey.org/LimeSurvey_PRO_vs_LimeSurvey_CE

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

More
1 month 3 weeks ago #179593 by DenisChenu

RitaShen wrote: Denis,

I'm using LimeSurvey Professional (use LimeSurvey's hosting services)

https://manual.limesurvey.org/LimeSurvey_PRO_vs_LimeSurvey_CE

Yes, and i use ONLY limesurvey CE …

And my advice are always for LimeSurvey CE, it can be applied to LimeSurvey hosting but if not : it's not my fault : open a LimeSurvey hosting issue …

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 .

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!