Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Card Sort Question

marba
Offline
New Member

More

11 years 5 months ago #118815 by marba

Replied by marba on 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:

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

11 years 5 months ago #118843 by tpartner

Replied by tpartner on 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

The topic has been locked.

marba
Offline
New Member

More

11 years 5 months ago - 11 years 5 months ago #118852 by marba

Replied by marba on 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: www.limesurvey.org/manual/Workarounds:_M..._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)

Last edit: 11 years 5 months ago by marba.

The topic has been locked.

user47335_d
Offline
Banned

More

11 years 2 months ago #122633 by user47335_d

Replied by user47335_d on 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

Unbenannt.jpg

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

11 years 2 months ago - 11 years 2 months ago #122635 by tpartner

Replied by tpartner on 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 - www.limesurvey.org/manual/Expression_Man...ax_Containing_Errors .

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

Last edit: 11 years 2 months ago by tpartner.

The following user(s) said Thank You: PaulBroon

The topic has been locked.

user47335_d
Offline
Banned

More

11 years 2 months ago #122676 by user47335_d

Replied by user47335_d on topic Card Sort Question

Thank you so much for your reply. Works out.

The topic has been locked.

eugecio
Offline
New Member

More

10 years 4 months ago #135980 by eugecio

Replied by eugecio on 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.

Capturadepantalla2016-05-10alas1.04.04p.m..png

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

....04.04p.m..png

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

10 years 4 months ago #135989 by tpartner

Replied by tpartner on 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:

Code:

.card-sort-question ul.subquestions-list {
	display: block;
	position: absolute;
	left: -9999em;
}

In template.js, change this:

Code:

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

Code:

	// 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.

The topic has been locked.

Arutneva
Offline
New Member

More

9 years 4 months ago #153922 by Arutneva

Replied by Arutneva on 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

Capture.PNG

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

9 years 4 months ago #154199 by tpartner

Replied by tpartner on 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

The topic has been locked.

Liod_DS
Offline
Senior Member

More

9 years 3 months ago #155791 by Liod_DS

Replied by Liod_DS on topic Card Sort Question

hi !

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

the js gives no error, but i think he can't find

Code:

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

The topic has been locked.

holch
Offline
LimeSurvey Community Team

More

9 years 3 months ago #155797 by holch

Replied by holch on 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.

Help us to help you!

Provide your LS version and where it is installed (own server, uni/employer, SaaS hosting, etc.).
Always provide a LSS file (not LSQ or LSG).

Note: I answer at this forum in my spare time, I'm not a LimeSurvey GmbH employee.

The topic has been locked.

socius
Offline
Premium Member

More

9 years 1 week ago #158300 by socius

Replied by socius on 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

Code:

/* Card Sort */
/* https://www.limesurvey.org/manual/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;
}

...example_g1.png

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

9 years 1 week ago #158355 by tpartner

Replied by tpartner on topic Card Sort Question

Something like this should accomplish it (depending on other changes in your template):

Code:

/* 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;
}