Multiple Choice Matrix

In this section, we will talk about the following cases:

1. Array Filtering Rows
2. Array Filtering Columns
3. Vertical Exclusive Option
4. Horizontal Exclusive Option
5. Both Sides Exclusive Option
6. Exclusive Columns + Array filter
7. Exclusive Rows + Array filter
8. Exclusive Columns + Rows + Array filter
9. Hide images as answers

Case 1 Array Filtering Rows

---

As you know, an array filter works by only displaying options that were previously selected, and for this, we need a SCHEMA and a filter question.

You must have a multiple-choice question with a hidden SCHEMA attached to it

You must add the following code, changing only the values of the first two lines with your question codes:

/* START EDITING PART */
let questionSchema = "C1X1xSCHEMA"; // Create a new open text question and set the question code as "QuestionCode"xSCHEMA
const typeOfQuestion = "checkbox" //Use checkbox for multiple and radio for single
/* ENDS EDITING PART */

function setSCHEMA(questionSchema) {
  const checkboxesInput = document.querySelectorAll(`.form-check input[type="${typeOfQuestion}"]`);
  const checkboxesValues = Array.from(checkboxesInput).map(checkbox => checkbox.value).join(',');
  document.querySelector('.form-control').value = checkboxesValues;
  document.querySelector(`#q_${questionSchema}_card`).classList.add("d-none");
}

setSCHEMA(questionSchema);

This question will be used for logic in the next question.

Now you will need to add he following JS code to the matrix question, edit the editable variables to adjust to your case.

If you follow the steps correctly, you will get a result like this.

Case 2 Array Filtering Columns

---

As you know, an array filter works by only displaying options that were previously selected, and for this, we need a SCHEMA and a filter question.
You must have a multiple-choice question with a hidden SCHEMA attached to it
You must add the following code, changing only the values of the first two lines with your question codes:

/* START EDITING PART */
let questionSchema = "Q0xSCHEMA"; // Create a new open text question and set the question code as "QuestionCode"xSCHEMA
const typeOfQuestion = "checkbox" //Use checkbox for multiple and radio for single
/* ENDS EDITING PART */

function setSCHEMA(questionSchema) {
  const checkboxesInput = document.querySelectorAll(`.form-check input[type="${typeOfQuestion}"]`);
  const checkboxesValues = Array.from(checkboxesInput).map(checkbox => checkbox.value).join(',');
  document.querySelector('.form-control').value = checkboxesValues;
  document.querySelector(`#q_${questionSchema}_card`).classList.add("d-none");
}

setSCHEMA(questionSchema);

This question will be used for logic in the next question.

Now you will need to add he following JS code to the matrix question, edit the editable variables to adjust to your case.

If you follow the steps correctly, you will get a result like this.

Case 3 Vertical exclusive options

---

Sometimes we want to make columns exclusive, so only 1 response in 1 column, this is usually used if we’re asking for favorite brands, for example, in our survey.
For this use the code below in your question, replace the value for "ver", with the number of the column that has to be exclusive as well as the question code.

In this case we are using the column 5 as the exclusive option, the more common case, for this we will use this option:
let ver = [5];

Case 4 Horizontal exclusive options

---

Sometimes we want to make columns exclusive, so only 1 response in 1 column, this is usually used if we’re asking for favorite brands, for example, in our survey.
For this use the code below in your question, replace the value for "ver", with the number of the column that has to be exclusive as well as the question code.

In this case we are using the column 5 as the exclusive option, the more common case, for this we will use this option:
let ver = [5];

Case 9 Hide images as answers

---

Let’s say you need to create a matrix with brands(images) as columns, and attributes as rows.
This will most likely show an image in each field of the question. In order to hide the images, copy the following code to the top of the code:

let images= document.querySelectorAll("tbody > tr > td > div > div > label");

images.forEach(imagen => {
    if(imagen.querySelector('img')) {
        imagen.querySelector('img').classList.add("d-none")
    }
});

This is the survey ID / question code used for reference:
989665 / Q5