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

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

  • January 13, 2021
  • 11 replies
  • 688 views
U
Level 3 ●●●
Forum|alt.badge.img+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*/
 
});

Best answer by ahmedA

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");
        }
    }
});

    11 replies

    A
    Level 7 ●●●●●●●
    Forum|alt.badge.img+22
    • ahmedA
    • Level 7 ●●●●●●●
    • Answer
    • January 13, 2021

    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
      Level 3 ●●●
      Forum|alt.badge.img+5
      • uhrxx005
      • Author
      • Level 3 ●●●
      • January 14, 2021

      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
        Level 7 ●●●●●●●
        Forum|alt.badge.img+22
        • ahmedA
        • Level 7 ●●●●●●●
        • January 14, 2021

        Change all the variable names and the ids.

          U
          Level 3 ●●●
          Forum|alt.badge.img+5
          • uhrxx005
          • Author
          • Level 3 ●●●
          • January 14, 2021

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

            A
            Level 7 ●●●●●●●
            Forum|alt.badge.img+22
            • ahmedA
            • Level 7 ●●●●●●●
            • January 14, 2021

            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

              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
                Level 7 ●●●●●●●
                Forum|alt.badge.img+22
                • ahmedA
                • Level 7 ●●●●●●●
                • June 5, 2021

                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

                  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
                    Level 7 ●●●●●●●
                    Forum|alt.badge.img+22
                    • ahmedA
                    • Level 7 ●●●●●●●
                    • June 6, 2021

                    Have you tried the side by side question?

                      E

                      @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
                        Forum|alt.badge.img
                        • gfal
                        • September 14, 2023

                        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!

                          Terms & ConditionsAccessibility statement