Single Choice Matrix – Syno Knowledge base

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

Exclusive Answer
Hide Row Answers
Hide Columns Answers
Hide images as answers

Case 1 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 2 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 3 Hide column options

/* 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 4 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