Welcome to the LimeSurvey Community Forum

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

Can I use Card sorting with limesurvey 2.73

  • DanielVN
  • DanielVN's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
6 years 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
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 1 month ago #164002 by tpartner
Replied by tpartner on topic Can I use Card sorting with limesurvey 2.73
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.
The topic has been locked.
  • DanielVN
  • DanielVN's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
6 years 1 month ago #164004 by DanielVN
Replied by DanielVN on topic Can I use Card sorting with limesurvey 2.73
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
The topic has been locked.
More
6 years 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
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 1 month ago #164017 by tpartner
Replied by tpartner on topic Can I use Card sorting with limesurvey 2.73
This function will work in 2.73:

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

Code:
@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.
The topic has been locked.
  • DanielVN
  • DanielVN's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
6 years 1 month ago #164028 by DanielVN
Replied by DanielVN on topic Can I use Card sorting with limesurvey 2.73
Thank you very much, Tpartner.

Works like a charm :)

Cheers
Daniel
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 1 month ago #164107 by tpartner
Replied by tpartner on topic Can I use Card sorting with limesurvey 2.73
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.
The topic has been locked.
More
5 years 5 months ago #174957 by RitaShen
Replied by RitaShen on topic Can I use Card sorting with limesurvey 3.x
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 ' /limeservice/instances/6/limesurvey/themes/survey/CardSort/ '

how to solve this problem?
many thanks

Rita
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 5 months ago #174960 by DenisChenu
Replied by DenisChenu on topic Can I use Card sorting with limesurvey 3.x
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 , plugin development .
I don't answer to private message.
The following user(s) said Thank You: tpartner
The topic has been locked.
More
5 years 2 months ago #179583 by RitaShen
Replied by RitaShen on topic Can I use Card sorting with limesurvey 3.x
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
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 2 months ago #179585 by DenisChenu
Replied by DenisChenu on topic Can I use Card sorting with limesurvey 3.x
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 , plugin development .
I don't answer to private message.
The topic has been locked.
More
5 years 2 months ago #179589 by RitaShen
Replied by RitaShen on topic Can I use Card sorting with limesurvey 3.x
Denis,

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

manual.limesurvey.org/LimeSurvey_PRO_vs_LimeSurvey_CE
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose