Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Card Sort Question

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 6 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.
More
7 years 4 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
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 4 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.
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
The topic has been locked.
More
7 years 2 months 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;
}
 
Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 1 month 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;
}

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
The topic has been locked.
More
7 years 1 month ago #158370 by socius
Replied by socius on 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
The topic has been locked.
More
7 years 4 weeks ago - 7 years 4 weeks ago #159381 by socius
Replied by socius on topic Card Sort Question
Hi Tony,

Thanks @tpartner again for the card sort type and help with the css!

Now I have another question. I noticed that it is not yet possible to have more than one card sort questions on a single page - the "cards" get mixed up, i.e. the earlier card sort questions contain the cards of the questions later on that page. In my case this is just a problem when previewing the survey, since I think in practice it will be better to stick with one card sort per page.

But still: do you see a way to change the script to enable more than one card sorts on one page?

Thanks a lot and all the best, G

P.S.: I use LS 2.6.4-lts.
Last edit: 7 years 4 weeks ago by socius. Reason: Added the LS version I use.
The topic has been locked.
More
7 years 3 weeks ago #159413 by socius
Replied by socius on topic Card Sort Question
Hi!

I just pretested the card sort question type and had an idea about a combination of card sorting and "swiping".
Long lists of Checkboxes are not really attractive to the respondents, and (what can be even more problematic) you do not really know, whether "unchecked" means "no" - and not just "not in the mood for checking tens or hundreds of boxes".

I'd propose a question type that combines card sorting and swiping which would look like this: all the items in the center and two card stacks left and right of the items, such that respondents pull the items to the left (e.g. "No") or to the right ("Yes").



What do you think about this? I think that this is absolutely great (but I might be a bit biased here :-) - and I did not see this anywhere before (did someone of you?)


Now: at the moment this question looks like this: (s. zipped lsq file below)




Could some CSS expert (e.g. @tpartner ? ;-)) tweak the CSS (s. www.limesurvey.org/forum/can-i-do-this-w...tion?start=15#158355 ) such that this question looks somehow like the sketch above - that would be perfect! I'd really appreciate that. Has anybody of you experience with this question format? I think it could be great and nice&easy to answer for respondents - it's getting time for some A/B-testing, I guess.


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

(I use LS 2.6.4-lts)
Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 3 weeks ago #159446 by tpartner
Replied by tpartner on topic Card Sort Question
The card sorting workaround does not scale well for mobile devices. There are scrolling issues that make it difficult, if not impossible, to use on small touch screen.

In this case, where there are only two answers, I would suggest using a simple array type question with yes/no radio buttons. I think it's far easier for a respondent to click a radio than to drag and drop an item.
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: socius
The topic has been locked.
More
6 years 2 months ago #172351 by PaulBroon
Replied by PaulBroon on topic Card Sort Question
I was in need of the mentioned Q Sort question type and created a new workaround heavily based on your Card Sort workaround. I also added the solution to the workarounds page: www.limesurvey.org/manual/Workarounds:_M...Javascript#Q_Sorting

Thanks a lot for your template!
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source