Single Choice Matrix

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

1. Array Filtering Rows
2. Array Filtering Columns
3. Exclusive Answer
4. Hide Row Answers
5. Hide Columns Answers
6. 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 = "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.

/* START EDITING PART */
let questionCode = "Q1"; // Question code of the question the code will be added
let questionFilteredCode = "Q0"; // Question code of the question wanted to filter from
let questionFilteredCodeSchema = "Q0xSCHEMA"; // Question code of the question wanted to filter from
let inclusiveOrExclusive = "inclusive"; // Set as "inclusive" to get questions selected // Set as "exclusive" for questions not selected
/* ENDS EDITING PART */

let scripts = ["https://synocdn.com/js/survey/library/single_choice_matrix.js"];

let promises = scripts.map((script) => {
  return new Promise((resolve, reject) => {
    document.querySelector("body").style.opacity = "0";
    let s = document.createElement("script");
    s.src = script;
    s.onload = resolve;
    s.onerror = reject;
    document.head.appendChild(s);
  });
});

Promise.all(promises)
  .then(() => {
    /* Function to use */
    single_choice_matrix({
      question_code: questionCode,
      array_filter: {
        rows: {
          filter: questionFilteredCode,
          filter_schema: questionFilteredCodeSchema,
          type: inclusiveOrExclusive,
        },
      }
    });
    document.querySelector("body").style.opacity = "1";})
  /* If a library could not be imported throw an error */
  .catch((error) => {
    console.error(`Failed to load script: ${error}`);
  });

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.

/* START EDITING PART */
let questionCode = "Q2"; // Question code of the question the code will be added
let questionFilteredCode = "Q0"; // Question code of the question wanted to filter from
let questionFilteredCodeSchema = "Q0xSCHEMA"; // Question code of the question wanted to filter from
let inclusiveOrExclusive = "inclusive"; // Set as "inclusive" to get questions selected // Set as "exclusive" for questions not selected
/* ENDS EDITING PART */

let scripts = ["https://synocdn.com/js/survey/library/single_choice_matrix.js"];

let promises = scripts.map((script) => {
  return new Promise((resolve, reject) => {
    document.querySelector("body").style.opacity = "0";
    let s = document.createElement("script");
    s.src = script;
    s.onload = resolve;
    s.onerror = reject;
    document.head.appendChild(s);
  });
});

Promise.all(promises)
  .then(() => {
    /* Function to use */
    single_choice_matrix({
      question_code: questionCode,
      array_filter: {
        columns: {
          filter: questionFilteredCode,
          filter_schema: questionFilteredCodeSchema,
          type: inclusiveOrExclusive,
        },
      }
    });
    document.querySelector("body").style.opacity = "1";})
  /* If a library could not be imported throw an error */
  .catch((error) => {
    console.error(`Failed to load script: ${error}`);
  });

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

Case 3 Exclusive columns

---

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.

/* START EDITING PART */
let questionCode = "Q4"; // Question code of the question the code will be added
let ver = [5];
/* ENDS EDITING PART */

let scripts = ["https://synocdn.com/js/survey/library/single_choice_matrix.js"];

let promises = scripts.map((script) => {
  return new Promise((resolve, reject) => {
    document.querySelector("body").style.opacity = "0";
    let s = document.createElement("script");
    s.src = script;
    s.onload = resolve;
    s.onerror = reject;
    document.head.appendChild(s);
  });
});

Promise.all(promises)
  .then(() => {
    /* Function to use */
    single_choice_matrix({
      question_code: questionCode,
      exclusive_answers: {
        /* Define exclusive column codes vertically */
        vertical : ver
      }
    });
    document.querySelector("body").style.opacity = "1";})
  /* If a library could not be imported throw an error */
  .catch((error) => {
    console.error(`Failed to load script: ${error}`);
  });

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 Hide row options

---

In case you want to hide options, maybe in this wave you want to remove some brands or whatever your specific case is, you can use the following code to fulfill your needs.
Edit the editable variables to suit your needs.

/* START EDITING PART */
let questionCode = "Q5"; // Question code of the question the code will be added
let hideOptions = [1, 3, 5];
/* ENDS EDITING PART */

let scripts = ["https://synocdn.com/js/survey/library/single_choice_matrix.js"];

let promises = scripts.map((script) => {
  return new Promise((resolve, reject) => {
    document.querySelector("body").style.opacity = "0";
    let s = document.createElement("script");
    s.src = script;
    s.onload = resolve;
    s.onerror = reject;
    document.head.appendChild(s);
  });
});

Promise.all(promises)
  .then(() => {
    /* Function to use */
    single_choice_matrix({
      question_code: questionCode,
      /* If answer codes needs to be hidden */
      hide_answers: {
        /* Define row codes to be hidden */
        rows: hideOptions,
    }
    });
    document.querySelector("body").style.opacity = "1";})
  /* If a library could not be imported throw an error */
  .catch((error) => {
    console.error(`Failed to load script: ${error}`);
  });

In this case, we hide 3 options, you can see options 1, 3, and 5 hidden.
let hideOptions = [1, 3, 5];

Case 5 Hide column options

---

In case you want to hide options, maybe in this wave you want to remove some brands or whatever your specific case is, you can use the following code to fulfill your needs.
Edit the editable variables to suit your needs.

/* START EDITING PART */
let questionCode = "Q6"; // Question code of the question the code will be added
let hideOptions = [2, 4];
/* ENDS EDITING PART */

let scripts = ["https://synocdn.com/js/survey/library/single_choice_matrix.js"];

let promises = scripts.map((script) => {
  return new Promise((resolve, reject) => {
    document.querySelector("body").style.opacity = "0";
    let s = document.createElement("script");
    s.src = script;
    s.onload = resolve;
    s.onerror = reject;
    document.head.appendChild(s);
  });
});

Promise.all(promises)
  .then(() => {
    /* Function to use */
    single_choice_matrix({
      question_code: questionCode,
      /* If answer codes needs to be hidden */
      hide_answers: {
        /* Define row codes to be hidden */
        columns: hideOptions,
    }
    });
    document.querySelector("body").style.opacity = "1";})
  /* If a library could not be imported throw an error */
  .catch((error) => {
    console.error(`Failed to load script: ${error}`);
  });

In this case, we hide 2 options, you can see options 2 and 4 hidden.
let hideOptions = [2, 4];

Case 6 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