Welcome to the LimeSurvey Community Forum

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

Combining autocomplete with variable length question

More
6 years 4 months ago #160481 by Joshi
Hey LS-Forum,

I´m new to LS and very impressed!

I wonder if there is any possibility to combine the autocomplete workaround ( manual.limesurvey.org/Workarounds:_Manip...wers_for_text_inputs ) with the workaround for Variable Length Array (Multi Flexible Text) question ( manual.limesurvey.org/Workarounds:_Manip...ble_Text.29_question ) so I can get something like this:
rfhinf067.hs-regensburg.de/survey/?p.id=1&c.id=1

These guys did a great job with R using the Shiny package, but they wrote that it´s not possible with LS – I’m pretty sure it is!  journal.r-project.org/archive/2016/RJ-2016-010/RJ-2016-010.pdf

Kind regards
Joshua
The topic has been locked.
More
6 years 4 months ago #160482 by jelo

Joshi wrote: but they wrote that it´s not possible with LS – I’m pretty sure it is!

The authors of the paper are correct since it is not possible with the LS alone. The scope of LS and Surveymonkey won't cover the kind of questions where social graph data is retrieved and displayed as a question stimulus with UI.

You might integrate a thirdparty app (e.g. sigmajs.org/ ) for displaying the stimulus and capture the answer via LimeSurvey. I'm not into SNA. So no first hand experience.

The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
The following user(s) said Thank You: Joshi
The topic has been locked.
More
6 years 4 months ago #160487 by Joshi
You're right; using the interactive graph as a question stimulus is pretty cool and unique.

In my case the first part of the question is more important: Can I combine autocomplete with multiple flexible text and a plus button?

what I have achieved so far is this: userpages.uni-koblenz.de/~organisation/l...x.php/277339?lang=de

You can type in the first letters of a name and get a list.

Thanks in advance!
Josh
The topic has been locked.
More
6 years 4 months ago #160489 by jelo

Joshi wrote: rfhinf067.hs-regensburg.de/survey/?p.id=1&c.id=1

This survey seems to be done with the codeface framework, which is available for free.
siemens.github.io/codeface/

Cannot comment on the workarounds.

The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
The topic has been locked.
More
6 years 4 months ago #160497 by Joshi
This is the part I meant:

The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 4 months ago #160510 by tpartner
I don't see why those two workarounds should't work together. Can you attach a small survey with the code that you have tried?

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 4 months ago #160520 by Joshi
Thank you very much!

Sorry guys, I´m just a pedagogue doing trial and error. Please be gracious with me :)

I use Version 2.72.3+171020
The topic has been locked.
More
6 years 4 months ago #160524 by Joshi
The autocomplete function is working now and there is also a simple validation included (my goal is it to validate from a csv list, but step by step).

And I can see the plus and minus symbol, but they don´t have any function yet.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 4 months ago - 6 years 4 months ago #160531 by Joffm
Hi, Joshi,
when I first told you about the "autocomplete" script I thought we were talking about "hundreds" of possible names, even because you used the "csv"- solution and not the static array.
Now I see your list of 32 participants, a number that I consider realistic in a course.

So your ideas are really sophisticated and elegant, but why don't you just use a multiple question?
Everything is included by default:
no doubles, maximum three, no names can be entered that are not in the list.

default template:


a little bit more css:



Furthermore it is easier to analyse later.

Best regards
Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 6 years 4 months ago by Joffm.
The topic has been locked.
More
6 years 4 months ago #160533 by Joshi
Hi Joffm,

thank you very much for your solution. You really got me wondering.

In a small course with only 30 students your suggestion is definitely the best way to collect relational (network) data.

But imagine you have a lecture with hundreds of students (or a company) and you want to ask them about 8 different connections ( en.wikipedia.org/wiki/Organizational_network_analysis ). The list will be very long. That´s why I´m trying to find a solution where you can easily type in a few letters and insert as many names as you want to.

I´ve been searching a good tool to collect network data for a while ( www.youtube.com/watch?v=_4rBYufn8No ). But at the end of the day I always find me fiddling with LimeSurvey workarounds, not really knowing what I´m actually doing. In my opinion a clever solution to handle relational data could open up totally new fields.

Thank you very much and kind regards
Joshi
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 4 months ago #160545 by Joffm
Hi, Joshi,

you're absolutely true.
That is why I referred to your example (about 30).

Something else:
I think you used the example I sent. There is an array(text) because in this example I wanted to ask for two names horizontally.
I changed your sample a little bit, using "multiple short text" and implementing something like the (+) button) by subquestion relevance (the next line is only shown after something was entered. Well, it's just look and feel).

Now you can expand the number of entered names to more.

But there is still the problem that I can enter free text (names that are not in the list).

Best regards
Joffm

File Attachment:

File Name: limesurvey...8312.lss
File Size:18 KB


IMO LS is not the very best tool to collect data for ONA.

"Aber, macht, was Ihr wollt"

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: Joshi
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 4 months ago - 6 years 4 months ago #160556 by tpartner
I also think that you should be using a multiple-short-text type question.

To enforce selections from the list and to prevent duplicates, you can fire tests within the Autocomplete change() and select() events. Something like this:

Code:
<script type="text/javascript" src="{TEMPLATEURL}jquery.csv.js"></script>
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:complete',function() {
    var url = "{TEMPLATEURL}kursnamen.csv";
    var inputError = 'That is not a valid name';
    var duplicateError = 'That is a duplicated name';
 
    var Names = new Array();
 
    $.get(url,function(data){
      fullArray = $.csv.toArrays(data);
      $(fullArray).each(function(i, item){
        Names.push(item[0]);
      });
      $("#question{QID} input[type=text]").autocomplete({
        source: Names,
        select: function(event, ui) {
          // Test for duplicates
          var duplicates = false;
          var inputValue = $.trim(ui.item.value);
          $("#question{QID} input[type=text]").not($(this)).each(function(i) {
            if($.trim($(this).val()) == inputValue) {
              duplicates = true;
            }
          });
          if(duplicates == true) {
            flashError(this, duplicateError);
            return false;
          }
        },
        change: function(event, ui) {
          // Test for value in list
          if (!ui.item) {
            this.value = '';
            flashError(this, inputError);
          }
          $(this).trigger('keyup');
        }
      });
    });
 
    function flashError(el, errortext) {
      var thisBackground = $(el).css('background-color');
      $(el).css('background-color', 'pink').val(errortext);
      setTimeout(function() {
        $(el).css('background-color', thisBackground).val('').trigger('keyup');
      }, 1500);
    }
  });
 
</script>

Regarding the variable-length-array plugin, something like this placed in the source of a multiple-short-text will have the same functionality:

Code:
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:complete',function() {
 
    // A function to add or remove rows of a multiple-short-text question
    function varLengthArray(qID) {
 
 
      // The HTML content of the Add/Remove elements - modify as you wish
      var addContent = '[+]';
      var removeContent = '[-]';
 
      // Insert the buttons
      $('#question'+qID+' .subquestion-list').append('<div id="addButton'+qID+'" class="control-button">'+addContent+'</div><div id="removeButton'+qID+'" class="control-button">'+removeContent+'</div>');
 
      // Style the elements - you can modify here if you wish
      $('#question'+qID+' .control-button').css({
        'margin':'10px 0 0 10px',
        'padding':'1px',
        'text-align':'center',
        'font-weight':'bold',
        'width':'auto',
        'cursor':'pointer',
        'float':'left'
      });
 
      // Initially hide the Remove element
      $( 'div#removeButton'+qID ).hide();
 
      // Call the functions below when clicked
      $( 'div#addButton'+qID ).click(function (event) {
        addRow(qID);
      });
      $( 'div#removeButton'+qID ).click(function (event) {
        removeRow(qID);
      });
 
      // Function to add a row, also shows the Remove element and hides the
      function addRow(qID) {
        $('#question'+qID+' .answer-item:hidden:first').show();
        $('div#removeButton'+qID).show();
        if ($('#question'+qID+' .answer-item:visible').length == $('#question'+qID+' .answer-item').length)  {
          $('div#addButton'+qID).hide();
        }
      }
 
      // Function to remove a row and clear the input value
      function removeRow(qID) {
        $('#question'+qID+' .answer-item:visible:last').hide();
        $('#question'+qID+' .answer-item:hidden input[type="text"]').each(function(i) {
          $(this).val('').trigger('keyup');
        });
        $( 'div#addButton'+qID ).show();
        if ($('#question'+qID+' .answer-item:visible').length == 1)  {
          $('div#removeButton'+qID).hide();
        }
      }
 
      // Just some initialization stuff
      // Initially hide all except first row or any rows with populated inputs
      $('#question'+qID+' .answer-item input[type="text"]:not(:first)').each(function(i) {
        if($.trim($(this).val()) == '') {
          $(this).closest('.answer-item').hide();
        }
        if ($('#question'+qID+' .answer-item:visible').length > 1)  {
          $('div#removeButton'+qID).show();
        }
      });
    }
 
    // Call the function with a question ID
    varLengthArray({QID});
  });
 
</script>

Here is your sample survey with the question type changed and both of those scripts applied:

File Attachment:

File Name: limesurvey...3121.lss
File Size:22 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 6 years 4 months ago by tpartner.
The following user(s) said Thank You: Joshi, Joffm
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose