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

Need help modifying a Matrix Javascript to work with a Side-by-Side item

  • 13 January 2021
  • 11 replies
  • 436 views
U
Rank
Userlevel 6
Badge +5

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*/
 
});

icon

Best answer by ahmedA 13 January 2021, 22:52

View original

11 replies

A
Rank
Userlevel 7
Badge +21

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


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

U
Rank
Userlevel 6
Badge +5

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?

A
Rank
Userlevel 7
Badge +21

Change all the variable names and the ids.

U
Rank
Userlevel 6
Badge +5

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

A
Rank
Userlevel 7
Badge +21

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.

E
Userlevel 1

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!

A
Rank
Userlevel 7
Badge +21

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.

E
Userlevel 1

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?

A
Rank
Userlevel 7
Badge +21

Have you tried the side by side question?

E
Userlevel 1

@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.

G
Badge

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