Card Sort Question

More
2 years 6 months ago #118815 by marba
marba replied the topic: Card Sort Question
hi there!

I've been exploring this workaround and it looks quite useful for my purpose.
However, I've been have one problem. When I import the template, the question runs normally. But if I use my own template, to where I copied everything necessary to the files template.js and template.css, it doesn't work any more.
So I know the problem is not in the question's code and formatting.

I am having the same problem with other workaround I used in other question.
Can having two workarounds, with its question functions, in the same template cause this problem?


thanks :cheer:

Please Log in to join the conversation.

More
2 years 6 months ago #118843 by tpartner
tpartner replied the topic: Card Sort Question
Depending on the scripts, there may be conflicts with multiple scripts on a page. Do you have any JavaScript errors in the console?

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: marba

Please Log in to join the conversation.

More
2 years 6 months ago - 2 years 6 months ago #118852 by marba
marba replied the topic: Card Sort Question
There are no JavaScript errors...
I've been trying different options and solutions, on how to put both together, and a bit by chance it started working.
The second script is the secondary-options (here: manual.limesurvey.org/Workarounds:_Manip..._options.22_question )

I just changed how I built the template: A ) copied the example template from the workaround "secondary options", and inserted the script for card sort; B ) copied the example template from the workaround "card sort", and inserted the script for secondary options... With the option B ), it's working! Although both example templates have the same structure...

I'm a total beginner, and perhaps I'm missing something. The important is that I have both scripts running; but any idea why this happened?

I attached both templates (Template-workaround = option A, not working; AM-questionnaire = option B, working)
Attachments:
Last Edit: 2 years 6 months ago by marba.

Please Log in to join the conversation.

More
2 years 3 months ago #122633 by SchaeferSimon
SchaeferSimon replied the topic: Card Sort Question
Hi,

I actually want to pick up this topic again. Since there are two issues.

1. I would like to use the bucket drop system to implement a Q-Sort system . A quite fundamental part of research in social sciences. It allows for a researcher to not only ask for the importance of specific items on a scale, but also allows to examine the interrelationship inbetween these items and the subjective importance they are given in relation to others.

Short practical example how it works out:

A participant is given the task to sort 54 value items according to how good they discribe himself. He has to sort them into categories ranging from 1 - very good to 9 - very bad. What differs Q-Sort from Likert scaling is, is that in the more extreme the categories get ( 1- very good; 9 - very bad) the less items can be put into a categorie. It therefore forces the participant to rank the items. In practise this would look like this:

1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 --> Rating 1 very good to 9 very bad
2 - 4 - 6 - 9 - 12 - 9 - 6 - 4 - 2. --> Items available to put into a category

Is it possible to implement this format into the bucket sorting system?


2. When I try to add these changes to the templates already in place by my university something seems to go wrong. In the screenshot attached you can see that I copied your examplatory question in my universities template (with amended .css & .js file) but there seems to be a code error. Is it possible to provide a template for the bucket sorting that does not coflict with other templates?



Thank you a lot for your help
Attachments:

Please Log in to join the conversation.

More
2 years 3 months ago - 2 years 3 months ago #122635 by tpartner
tpartner replied the topic: Card Sort Question
1. That could be done with some modifications to the workaround.
  • Add a class and/or data attribute to each droppable target defining a max number of draggables allowed.
  • After an item is dropped, loop through all droppable targets and either disable or enable them depending on whether they are "full".
  • Add CSS to indicate whether a droppable target is disabled (it will automatically be given a "disabled" class.

2. That looks like you have inserted a curly brace without a following space or line-break - manual.limesurvey.org/Expression_Manager...ax_Containing_Errors .

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

Please Log in to join the conversation.

More
2 years 3 months ago #122676 by SchaeferSimon
SchaeferSimon replied the topic: Card Sort Question
Thank you so much for your reply. Works out.

Please Log in to join the conversation.

More
1 year 5 months ago #135980 by eugecio
eugecio replied the topic: Card Sort Question
Hi! I want to pick up this topic again. I have an issue.

I can't make the array filter work in this question. I added as sub-questions all the options from a previous question, and it worked: only appears the option's name that the person selected on the previous question. But the problem is it also show the empty draggable items.





Also, Is there any option to instead of appears all the options they selected in the previous question, appears five of them as maximum?

Thanks
Attachments:

Please Log in to join the conversation.

More
1 year 5 months ago #135989 by tpartner
tpartner replied the topic: Card Sort Question
That workaround was never intended to work with filtering but you can try this (untested) solution...

Add this to the end of template.css:
.card-sort-question ul.subquestions-list {
	display: block;
	position: absolute;
	left: -9999em;
}

In template.js, change this:
	// Insert the "cards"
	$('li.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>');
	});

To this:
	// Insert the "cards"
	$('li.answer-item:visible', 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>');
	});

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
5 months 2 weeks ago #153922 by Arutneva
Arutneva replied the topic: Card Sort Question
Hi Tony, I followed the instructions on the link that you provide, but it does not seem that the javascript is working properly. Below is an image of how the page renders. I tried on Chrome and MS Edge. I'm using Version 2.63.1+170305
Any help would be appreciated. Thanks

Attachments:

Please Log in to join the conversation.

More
5 months 2 weeks ago #154199 by tpartner
tpartner replied the topic: Card Sort Question
That template and survey is for a previous LimeSurvey version.

Due to scrolling issues on mobile devices, I recommend that you use a simple array question to achieve the same goal.

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: Arutneva

Please Log in to join the conversation.

More
4 months 5 days ago #155791 by Liod_DS
Liod_DS replied the topic: Card Sort Question
hi !

i tried this workaround on my LS 2.65.1+170522installation, but like Arutneva nothing happened..

the js gives no error, but i think he can't find
var thisQuestionHelp = $('img[alt="Help"]', thisQuestion).parent();
the image for the "?" because now is not an img anymore...

l think there are some miss-reference like this on the code

I've followed the instructions and added the code on standard's template bottom, but i think it just don't work with this version..

so, before i start trying to adapt the code to work with the newest template, can i ask you if is it right what i wrote ? if not what i am doing wrong ? and if yes... any hint to where i can start to fix it ?

Anyway thanks a lot for the great work and the support you guys give us!

keep improving

Please Log in to join the conversation.

More
4 months 5 days ago #155797 by holch
holch replied the topic: Card Sort Question
As Tony said, the work around he provided was for a previous (older) version of Limesurvey. The newest 2.6x branch has a totally different template structure and it is no suprise that the old work around does NOT work for the newest branch.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Please Log in to join the conversation.

More
1 month 1 week ago #158300 by socius
socius replied the topic: Card Sort Question
Hi all,

thanks again @tpartner for the card-sort workaround! It seems perfect for replacing large arrays - and I assume that it keeps respondents from dropping out of the survey. I think it's more "fun" - let's see what the respondents say.

Now I would like to tweak the graphical appearance a bit the cards should be on top and the stacks should stand side by side to resemble a horizontal scale - but I unfortunately don't get this to work (I promise to get me some css skills soon).
(I use LS 2.6.4 LTS)

I amateurishly adapted the css a bit to get the cards to the top , but I can't get the stacks side by side (s. css and attached image). Could you point me to the classes in the css where I can achive that?

Additionally an another stupid question: I'd like to hide the question list below the cards - how can I do this? :-)


Thanks a lot for your time and help!
Best, G



/* Card Sort */
/* https://manual.limesurvey.org/Workarounds:_Manipulating_a_survey_at_runtime_using_Javascript#Card_Sorting */
 
.card-sort-question ul.subquestions-list {
	/*display: none;
	clear: both;*/
}
 
.card-sort-question .items-start {
	float: left;
	width: 100%;
/*	width: 340px;*/
/*	height: 317px;*/
	margin-top: 8px;
	border: 0px 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 {
    clear: left;
	margin-left: 8px;
/*	width: 340px;*/
/* 	width: 100%;*/
}
 
 
.card-sort-question .items-end {
	/*width: 338px;*/
	width: 140px;
	min-height: 60px;
	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 {
	/*width: 338px;*/
	padding-top: 8px;
	padding-bottom: 5px;
	background: #FFFFFF;
	font-size: 100%;
	font-weight: bold;
}
 
.card-sort-question .card  {
	display: inline-block;
	width: 140px;
	height: auto;
	margin: 5px 8px;
	padding: 3px;
    border: 1px solid #2F4354;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;
	border-radius: 8px;
    background-color: #ffcccc;
/*	background-color: #43b3d1;*/
/*	color: #2f4354;*/
/*	font-weight: bold; */
	text-align: center;
	line-height: normal;
}
 
.card-sort-question .items-end .card  {
	margin: 5px 7px;
/*	float: left; */
}
 
.card-sort-question  div.answer {
	clear: both;
	padding-top: 1px;
	margin-top: 0;
}
 
Attachments:

Please Log in to join the conversation.

More
1 month 1 week ago #158355 by tpartner
tpartner replied the topic: Card Sort Question
Something like this should accomplish it (depending on other changes in your template):

/* Card Sort */
 
.card-sort-question ul.subquestions-list {
	display: none;
	clear: both;
}
 
.card-sort-question .items-start {
	min-height: 30px;
	margin-top: 8px;
	min-width: 640px;
}
 
.card-sort-question .items-start.target-hover {
	background:#C9C9C9;
}
 
.card-sort-question .items-end-wrapper {
	min-width: 640px;
}
 
.card-sort-question .items-end-inner {
	float: left;
	width: 23%;
	margin: 20px 1% 0 1%;
}
 
.card-sort-question .items-end {
	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: 120px;
	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;
}


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

Please Log in to join the conversation.

More
1 month 1 week ago #158370 by socius
socius replied the topic: Card Sort Question
Thank you so much @tpartner! That's absolutely perfect! Awesome!!! :-) I hope the respondents love it as much as I do - or at least half as much...
Best, G

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now