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

uhrxx005uhrxx005 Community Member, XMPN Member Guru ✭✭

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

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("<input type='button' id='add' value='+' name='+' />").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

  • ahmedAahmedA IndiaCommunity Member Sage ✭✭✭
    Accepted Answer

    The following code should work on all types of questions:

    Qualtrics.SurveyEngine.addOnReady(function () {
        show_row = 3;
        choice_rows = this.getChoiceContainer().querySelectorAll("[class*='Choice']");
        choice_rows[choice_rows.length - 1].insertAdjacentHTML(
            "afterend",
            "<input type='button' id='row_adder' value='+' name='+' />"
        );
        for (i = show_row; i < choice_rows.length; i++) {
            choice_rows[i].hide();
        }
        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");
            }
        }
    });
    

Answers

  • uhrxx005uhrxx005 Community Member, XMPN Member Guru ✭✭

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

  • ahmedAahmedA IndiaCommunity Member Sage ✭✭✭
    edited January 14

    Change all the variable names and the ids.

  • uhrxx005uhrxx005 Community Member, XMPN Member Guru ✭✭

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

  • ahmedAahmedA IndiaCommunity Member Sage ✭✭✭
    edited January 14

    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.

Sign In to Comment