Welcome to the LimeSurvey Community Forum

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

dynamic rows in array

  • IoSmith
  • IoSmith's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
11 years 10 months ago #80949 by IoSmith
dynamic rows in array was created by IoSmith
Hi all.
Is it possible to have an array with several columns and the user to be able to add the rows he wants dynamically (during the filling out)?


If not, would it be possible in LS 2.0?
[off-forum] If not, is there a good module for this purpose for Drupal 7?
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
11 years 10 months ago #80954 by DenisChenu
Replied by DenisChenu on topic dynamic rows in array
Like : Expandable Array

Denis

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: IoSmith
The topic has been locked.
  • IoSmith
  • IoSmith's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
11 years 10 months ago - 11 years 10 months ago #80956 by IoSmith
Replied by IoSmith on topic dynamic rows in array
Thanks Denis! Actually the Variable Length Array (Multi Flexible Text) question is what i need.
:)
Last edit: 11 years 10 months ago by IoSmith.
The topic has been locked.
More
11 years 3 weeks ago #93402 by rvas
Replied by rvas on topic dynamic rows in array
Hi!

Is there any chance to have the same effect but also to allow the user to edit the text of each added row (like adding a text box as the row label that its contents can be captured)?

I have an array with 10 predefined rows and I would like the user to be able to add custom labelled rows and if e.g. he clicks the remove button (-) to delete only the ones added himself.

I tried to alter the code I found on the workarounds page but no luck :(

Thanks in advance!
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
11 years 2 weeks ago #93423 by DenisChenu
Replied by DenisChenu on topic dynamic rows in array
It's possible, but have to work hard on jquery/javascripting.
  1. Add a multi text question
  2. Hide this question in javascript
  3. Move each input.text of this question in answer part of the array
  4. Use/adapt existing workaround

Denis

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
11 years 2 weeks ago #93540 by rvas
Replied by rvas on topic dynamic rows in array
Thanks Denis for your tips.

I finally managed to:
1) Add a multi text question
2) Hide this question in javascript
3) Move each input.text of this question in answer part of the array
4) Copy the value from each sub-question row to the the relative input text
5) Hide the input text boxes from my pre-defined sub questions (1-10)
6) Automatically tick option from a hidden multiple-options question according to the given answers

The question at first appears to work, but I have some worries. This question is very crucial as will hold the data for future questions, therefore it is important that the values of text input boxes are captured correctly so that can be used in later questions.

At the moment, next questions show the original sub-question values entered from within Limesurvey Admin and not the modified ones from the text-input boxes. What do you think would be the best solution to properly link the values from the text-input boxes with the array and the hidden multiple-options question?

Below is my code together with some documentation for some commands implemented by me. It needs a lot of optimisation I know, but I'll leave that for after I manage to make it work as expected.
Code:
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
 
        // Identify the questions
        var QuestionID = 56;    // current question number
        var hiddenQuestion = 74;    // autocomplete hidden question number
        var thisQuestion = $('#question{QID}');     // hidden multi-text question ID
        var nextQuestion = $(thisQuestion).next('div[id^="question"]');     // current question ID
 
        // Set the minimum and maximum limit of our custom-defined rows
        var minSubq = 10;
        var MaxSubq = 15;
 
        // Hide the auto-complete question
        $('#question'+hiddenQuestion+'').hide();
 
        // Hide the multi-text question
        $(nextQuestion).hide();
 
        // The HTML content of the Add/Remove elements - modify as you wish
        var addContent = '[+]';
        var removeContent = '[-]';
 
        // Create the Add and Remove elements &amp; insert them
        var el1 = document.createElement('div');
        el1.setAttribute('id','addButton'+QuestionID);
        document.body.appendChild(el1);
        var el2 = document.createElement('div');
        el2.setAttribute('id','removeButton'+QuestionID);
        document.body.appendChild(el2);
        // Move them to after the array
        $( 'div#addButton'+QuestionID ).appendTo($( QuestionID + ' table.question' ).parent());
        $( 'div#removeButton'+QuestionID ).appendTo($( QuestionID + ' table.question' ).parent());
        // Insert their HTML
        $( 'div#addButton'+QuestionID ).html( addContent );
        $( 'div#removeButton'+QuestionID ).html( removeContent );
        // Style the elements - you can modify here if you wish
        $( 'div#addButton'+QuestionID ).css({
            'margin':'10px 0 0 10px',
            'padding':'1px',
            'text-align':'center',
            'font-weight':'bold',
            'width':'auto',
            'cursor':'pointer',
            'float':'left'
        });
        $( 'div#removeButton'+QuestionID ).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'+QuestionID ).hide();
 
        // Call the functions below when clicked
        $( 'div#addButton'+QuestionID ).click(function (event) {
            addRow(QuestionID);
        });
        $( 'div#removeButton'+QuestionID ).click(function (event) {
            removeRow(QuestionID);
        });
 
        var CurSubq = minSubq;  // Initially the current row equals to the last visible one 
 
        // Initially hide all rows that are above the lower limit
        for (var i=minSubq;i<=MaxSubq;i++) {
            $('tr[id*='+QuestionID+'SQ0'+i+']').hide();
        }
 
        // Function to add a row, also shows the Remove element and hides the 
        //Add element if all rows are shown
        function addRow(QuestionID) {
            CurSubq = CurSubq + 1;
            $('tr[id*='+QuestionID+'SQ0'+CurSubq+']').show();
            $( 'div#removeButton'+QuestionID ).show();
            if ( CurSubq >= MaxSubq )  {
                $( 'div#addButton'+QuestionID ).hide();
            }
        }
        // Function to remove a row
        function removeRow(QuestionID) {
            if (CurSubq>minSubq) {
                $('tr[id*='+QuestionID+'SQ0'+CurSubq+']').hide();
                CurSubq = CurSubq - 1;
                $( 'div#addButton'+QuestionID ).show();
            }        
            if ( CurSubq <= minSubq )  {
                $( 'div#removeButton'+QuestionID ).hide();
            }
        }
 
        // Add extra cells to the array rows
        $('.subquestions-list thead tr', thisQuestion).append('<th />');
        $('.subquestions-list tbody tr', thisQuestion).append('<td />');
 
        // Move the multi-text question text to the first column header cell of the array
        $('.subquestions-list thead tr th:first', thisQuestion).text($('.questiontext', nextQuestion).text());
 
        // Move the text inputs
        $('input.text', nextQuestion).each(function(i){
            var count = (i+1).toString();  // convert counter to string, but start from 1 instead of 0
            var pad = '00'; // define the pad (maximum number of integers)
            pad = pad.substring(0, pad.length - count.length) + count;  // e.g. convert 5 to 05, but leave 11 intact
            var SubqHTML = $('tr[id*='+QuestionID+'SQ0'+pad+'] th').html();    // get the inner html of our th
            SubqLabel = SubqHTML.substr(0, SubqHTML.indexOf('<'));   // keep only the part before the < characther
            SubqLabel = SubqLabel.replace(/^\s*|\s*$/g,"");   // remove any spaces left or right
            $(this).val(SubqLabel); // Set text input to have the Subquestions label
            $(this).css('text-align','right');
            $(this).hide(); // Hide the text input boxes
            if (i>=minSubq) {
                var removeSubqLabel = SubqHTML.substr(0,SubqHTML.indexOf(SubqLabel));   // Remove the label
                $('tr[id*='+QuestionID+'SQ0'+pad+'] th').html(removeSubqLabel); // Apply the new html without the label
                $(this).show(); // Show text input boxes
            }
            $('.subquestions-list tbody tr:eq('+i+') th:first', thisQuestion).append(this); // Append all the text-boxes to the TH of our array table
        });
 
        // Some cleanup styles (for the default template)
        $('col', thisQuestion).css({
            'width': 'auto'
        });
        $('.subquestions-list tbody th, .subquestions-list tbody td', thisQuestion).css({
            'padding': '4px 10px'
        });
 
        // Call the autoClick function
        // Params - Array ID, Hidden question ID, Column of array that auto-checks the hidden question
        autoClick(QuestionID, hiddenQuestion, 1);
        autoClick(QuestionID, hiddenQuestion, 2);
        autoClick(QuestionID, hiddenQuestion, 3);
        autoClick(QuestionID, hiddenQuestion, 4);
        autoClick(QuestionID, hiddenQuestion, 5);
        autoClick(QuestionID, hiddenQuestion, 6);
 
        // Autoclick the hidden questions entries according to the answers on the current question
        function autoClick(qArrayID, qHiddenID, column) {
 
            // Hide the hidden question
            $('#question'+qHiddenID+'').hide();
 
            // Find the survey and group IDs
            if($('input#fieldnames').length != 0) {
                var fieldNames = $('input#fieldnames').attr('value');
                var tmp = fieldNames.split('X');
                var sID = tmp[0];
                var gID = tmp[1];
            } 
 
            // Add some column-specific classes
            $('#question'+qArrayID+' table.question tr').each(function(i, el){
                $('> *', this).each(function(i, el){
                    $(el).addClass('col-'+i);
                });
            });
 
            // Add a class to answers that are to auto-check the hidden question
            $('#question'+qArrayID+' .col-'+column).addClass('autoClick');
 
            // A listener on the Q1 radio buttons 
            $('#question'+qArrayID+' table.question tbody td').click(function () {
                //var rowID = $(this).parents('tbody:eq(0)').attr('id');
                                var rowID = $(this).parents('tr:eq(0)').attr('id');
                var tmp2 = rowID.split('X'+qArrayID);
                var answerCode = tmp2[1];
 
                // This cell checks the corresponding option it qHidden
                if($(this).hasClass('autoClick')) {
                    $('#answer'+sID+'X'+gID+'X'+qHiddenID+answerCode).attr('checked', true);
                }
                // This cell unchecks the corresponding option it qHidden
                else {
                    $('#answer'+sID+'X'+gID+'X'+qHiddenID+answerCode).attr('checked', false);
                }
            });
        }
    });
</script>

Thanks in advance!
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
11 years 2 weeks ago #93542 by DenisChenu
Replied by DenisChenu on topic dynamic rows in array
Mauybe you can put a lsg file export, then i can have a look at the script and EM.

But, for another questio after the multi text question, use EM directly:

{SQTEXT_SQ1.NAOK}
{SQTEXT_SQ2.NAOK}
{SQTEXT_SQ3.NAOK}
{SQTEXT_SQ4.NAOK}

Denis

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.

Lime-years ahead

Online-surveys for every purse and purpose