Welcome to the LimeSurvey Community Forum

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

Card Sort Question

More
8 years 8 months ago #122676 by SchaeferSimon
Replied by SchaeferSimon on topic Card Sort Question
Thank you so much for your reply. Works out.
The topic has been locked.
More
7 years 10 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.





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
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 10 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.
More
6 years 10 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

Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 10 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
6 years 9 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
6 years 9 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
6 years 6 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://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;
}
 
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 6 months 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.
The following user(s) said Thank You: socius
The topic has been locked.
More
6 years 6 months 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
6 years 5 months ago - 6 years 5 months 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: 6 years 5 months ago by socius. Reason: Added the LS version I use.
The topic has been locked.
More
6 years 5 months 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)
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose