Need help modifying a Matrix Javascript to work with a Side-by-Side item | XM Community
Skip to main content

I have a current Javascript I use to add additional rows to a matrix table, or rather display hidden rows one at a time as a button is clicked. Can someone please help me modify this to work on a Side by Side question.
Thanks in advance!
Qualtrics.SurveyEngine.addOnload(function()
{
var that=this.questionId;
jQuery("#"+this.questionId+" tr.Choice:not(:lt(3))").hide();
jQuery("").insertAfter("#"+this.questionId+" tr.ChoiceRow:last");
jQuery("#add").on('click',function(){
        var c= jQuery("tr.Choice:visible").length;
        jQuery("#"+that+" tr.Choice:eq("+c+")").show(); 
    });
 
});
 
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
 
});
 
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
 
});

The following code should work on all types of questions:
Qualtrics.SurveyEngine.addOnReady(function () {
    let show_row = 3;
    let choice_rows = this.getChoiceContainer().querySelectorAll("eclass*='Choice']");
    choice_rows>choice_rows.length - 1].insertAdjacentHTML(
        "afterend",
        ""
    );
    for (i = show_row; i < choice_rows.length; i++) {
        choice_rowsi].hide();
    }
    let add_row = this.getChoiceContainer().querySelector("#row_adder");
    add_row.onclick = new_row;


    function new_row() {
        if (show_row < choice_rows.length) {
            choice_rowsnshow_row].show();
            show_row++;
        } else {
            alert("You've reached the maximum number of permissible rows");
        }
    }
});

ahmedA this solution is terrific. Thank you! One more question. Is there a way for this to work with multiple questions using the Javascript on the same page?

Change all the variable names and the ids.

Pardon my ignorance, but where do I place the Question ID?

by id I meant where it says 

id='row_adder'

Make that id and all the other variables unique for each question on the same page.

Hi, @ahmedA
I tried above JS for Form Fields but it didn't work. I'd like to show an initial 3 Form field options and, if desired, the user can add Form Fields (up till 10).
What should I modify in the JS so it works for Form fields?
Thanks a lot in advance!

It's intended to work for questions that are structured like tables (we are hiding rows).
You could just change your question to a matrix with text entry or a side by side question.

ahmedA
Thanks for your prompt reply. However, I'd like to show larger text boxes than the matrix allows me. Ideally as the Essay Form Fields. Is there a way to set up a larger size for the text boxes (response part) in the matrix?

Have you tried the side by side question?

@ahmedA, perfect! Thanks a lot, this is exactly what I had in mind. Odd I didn´t find that solution myself. Thanks for helping me out.

Hi,

 

I also need to display additional text entries only if the respondent needs more of them.
I tried the above javascript code, and it does not work in the preview: only the 3 rows initially displayed are displayed, and there is no way to make the following rows being displayed.

Do you have an idea what might go wrong?

Thanks a lot for your help!

Leave a Reply


Terms & Conditions