surveylimesurvey

How to code in LimeSurvey so that a new row appears only when the previous row has been filled


I am using LimeSurvey and I want to include a question where the respondent can include up to 30 names as answer. However, I don't want to initially present the respondent with 30 boxes as it is overwhelming and requires a ton of scrolling to proceed if you only have a few names to enter. Is is possible to code the question so that a new box appears only after the previous box has been filled? Thanks.


Solution

  • EDIT: This answer was written because I could not find the answer presented by tpartner beforehand. The main difference is that mine is based on filling out the previous row and tpartner's on buttons to add or remove rows.

    The following code should work for all single-choice arrays (e.g. 5-point scale array) and is adaptable to other types if you know some Javascript/jQuery. I want to do more like that - just not today. So feel free to ask for implementations for other question types.

    The code can be added in the beginning of the template.js file using the template editor. The variables "quest" and "first" have to be adapted based on your survey.

    //Function to only display a new row if there is an answer in the previous row
    //NOTICE: Rows which are reset to "No answer" will not be hidden
    //NOTICE: This scipt was written based on LimeSurvey 2.00+ build 131107
    //NOTICE: It only works for single-choice arrays (e.g. 5-point scale array) or multiple short texts
    //BEGIN
    $(document).ready( function() {
        //SGQ code of the question to apply this to
        var quest = "12345X1234X12345";
        //A(nswer) code of the first row
        var first = "1";
    
        //hide all rows except the first
        $("tr[id^='javatbd" + quest + "']").css("display","none");
        $("tr[id='javatbd" + quest + first + "']").css("display","table-row");
    
        //display rows if previous is answered
        $("[name^='" + quest + "']").change(function() {
            if(this.value.trim().length >= 1)
                $("tr[id='javatbd" + this.name + "']").next().css("display","table-row");
        });
    });
    //END
    

    Best regards