Tweaking javascript code to pre-select matrix table options | XM Community
Skip to main content

Hi all -

Been doing some javascript to preselect multiple choice options, and now I have a few questions that are currently in matrix table forms. While I could separate them into their own distinct questions, from a user experience perspective I’d rather keep them in a matrix table. I wonder if it would be basically the same model, a la the below code, but would love input!

 

const choices = this.getChoices();
    if ("${e://Field/BIPOC}".includes("0%")) this.setChoiceValue(choicesh0], true);
    if ("${e://Field/Women".includes("0%")) this.setChoiceValue(choicese1], true);
    if ("${e://Field/LGBTQ}".includes("0%")) this.setChoiceValue(choicesa2], true);
    if ("${e://Field/PersonwithDisablities}".includes("0%")) this.setChoiceValue(choicesc3], true);
    if ("${e://Field/Veteran}".includes("0%")) this.setChoiceValue(choicesh4], true);
    if ("${e://Field/BIPOC}".includes("1-25%")) this.setChoiceValue(choicese5], true);
    if ("${e://Field/Women".includes("1-25%")) this.setChoiceValue(choicess6], true);
    (etc.)

 

 

Hi @DKICM You can use default choices to achieve your use case.

@DKICM,

For a matrix you have to provide the answer id in setChoiceValue as well. For example:

if ("${e://Field/BIPOC}".includes("0%")) this.setChoiceValue(1,1,true);
if ("${e://Field/BIPOC}".includes("1-25%")) this.setChoiceValue(1,2,true);

 

Thanks @TomG  - I tried that but am not having luck. See below for code and a simpler question this time. Any tips?

 

    const choices = this.getChoices();
    if ("${e://Field/ESGFirm}".includes("Yes")) this.setChoiceValue(0,0,true);
    if ("${e://Field/ESGFirm}".includes("No")) this.setChoiceValue(0,1,true);
    if ("${e://Field/ESGPortfolio}".includes("Yes")) this.setChoiceValue(1,0,true);
    if ("${e://Field/ESGPortfolio}".includes("No")) this.setChoiceValue(1,1,true);

 

 

 @DKICM,

Choice and answer ids start at 1, not 0.  I think you want:

Qualtrics.SurveyEngine.addOnload(function() {
	if ("${e://Field/ESGFirm}".includes("Yes")) this.setChoiceValue(1,1,true);
    if ("${e://Field/ESGFirm}".includes("No")) this.setChoiceValue(1,2,true);
    if ("${e://Field/ESGPortfolio}".includes("Yes")) this.setChoiceValue(2,1,true);
    if ("${e://Field/ESGPortfolio}".includes("No")) this.setChoiceValue(2,2,true);
});

 

Hey @TomG  - thanks! When using const choices, it starts at 0 - at least it does so with my multiple choice options. However, I tried starting at 1 and still no luck. Any other ideas?

Hey @TomG  - thanks! When using const choices, it starts at 0 - at least it does so with my multiple choice options. However, I tried starting at 1 and still no luck. Any other ideas?

The ids could be different depending on how the question has been edited. If you use Developer Tools to examine the radio button ids you can see what the values are. For example, if the id is QR~QID64~3~1 then the choice id (row) is 3 and the answer id (column) is 1.

 

Hi @TomG - thank you! Can you point me where I can find access to developer tools? I cant seem to locate where that would be!

The name my vary based on browser. Right click on the element you want to examine (i.e., a radio button). Then in Chrome select ‘Developer Tools’ > ‘Inspect’. In Firefox, select ‘Inspect (Q)’.

Thanks @TomG - in the end it was starting at 0. This is the solution applied to another shorter question:

 

    const choices = this.getChoices();const answers = this.getAnswers();
    if ("${e://Field/ESGFirm}".includes("Yes")) this.setChoiceValue(choices(0],answers,0],true);
    if ("${e://Field/ESGFirm}".includes("No")) this.setChoiceValue(choicesl0],answers[1],true);
    if ("${e://Field/ESGPortfolio}".includes("Yes")) this.setChoiceValue(choicese1],answersc0],true);
    if ("${e://Field/ESGPortfolio}".includes("No")) this.setChoiceValue(choiceso1],answersh1],true);

Leave a Reply


Terms & Conditions