Multiple Choice

Below are the cases for multiple choice JS

Regular Cases

1. Adding Hidden SCHEMA
2. Block Randomization Groups
3. Array filter from past user answered question
4. Array filter from a filter from a Matrix
5. Sets an amount of checks required
6. Sets a minimum and maximum amount of checks required
7. Array filter inherited randomization
8. Inherited randomization from Block Randomization
9. Quick Fix for Exclusive not working

Case 1 Adding Hidden SCHEMA

---

SCHEMAS are used for array filtering and inheriting randomization, they are a significant part of complex surveys.
For this, you need to add an additional SINGLE TEXT question with the following format:

questionCodexSCHEMA

For example, if you were to use Q1 as your initial question code, you would then add the SCHEMA Q1xSCHEMA, like in the example below
Afterwards, you need to add the following code and edit the editable part to suit your survey.

/* START EDITING PART */
let questionSchema = "Q1xSCHEMA"; // 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 code will add the values to the schema and hide it by default.

Case 2 Block Randomization Groups

---

Block randomization is used for randomizing certain groups of answers within a question. It allows you to exclude some answers from being randomized or to randomize them with another group of answers.

To apply this copy and paste the following JS code and adjust it to your needs:

/* START EDITING PART */
let questionCode = "Q2"; // Question code of the question the code will be added
let randomization = [[1,2],[3,4,5], [99]]; // Add the question answer codes wanted to randomize in one list ([1, 2]) and the ones not wanted to randomized add them to another list ([99])
let randomizeBetweenGroups = false; // Use false if you just want to randomize blocks, put true if you also want to randomize groups between each other (remove options like Other and None from the list if true)
/* ENDS EDITING PART */

let scripts = ["https://synocdn.com/js/survey/library/multiple_choice.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 */
    multiple_choice({
      question_code: questionCode,
      randomize: { 
        answer_groups: randomization,
        randomize_groups: randomizeBetweenGroups,
      }
    });
    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}`);
  });

This will give you the following result:
You can edit the editable part to have as many randomization groups as you want, for example, you can have something similar to this for the randomization variable:

let randomization = [[1, 2, 3, 4], [5, 6, 7], [8, 9], [99]];

Use the code and adjust it to your needs :nerd_face:

Case 3 Array filter from past user answered question

---

Array filtering is an essential part of many surveys, with this we can make sure respondents answer only relevant options.
For this we will need to take 2 steps:

1. Add a SCHEMA to the original question, the one from which we are getting the array filtering.
2. Add JS to the desired question while adjusting the code.

For this, you will need to add the following JS to the original question to add the SCHEMA, remember to add the open text option.

/* START EDITING PART */
let questionSchema = "Q3xSCHEMA"; // 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);

Afterward, you will need to add this JS code to the question that will receive the filtering.

/* START EDITING PART */
let questionCode = "Q3a"; // Question code of the question the code will be added
let questionFilteredCode = "Q3"; // Question code of the question wanted to filter from
let questionFilteredCodeSchema = "Q3xSCHEMA"; // 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/multiple_choice.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 */
    multiple_choice({
      question_code: questionCode,
      array_filter: { 
        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 your survey will look like this:

Case 4 Array filter from a filter from a Matrix

---

It’s common in surveys to have or contain matrix questions and then use the values answers to base the logic of the survey on it.
For this case we have to use JS to apply it, for this, we will need to follow:

1. Have the matrix question
2. Have a filter that will be hidden when live
1. For it, use the following code:

/* START EDITING PART */
const question_code = "Q4a"; // Question code of the question wanted to filter
const columns = [4,5]; // Array of columns wanted, could be just one: [1], or many: [1, 2, 3]
const test = true; // set this true if you are testing, this will show the filter, set it as false and it will hide it, set it false when live
/* ENDS EDITING PART */

const checkboxes = document.querySelectorAll(".form-check input");

if (response.answers.some(question => question.questionCode === question_code)) {
    if (!response.answers.some(question => question.questionCode === question_code && columns.includes(Number(question.columnCode)))) {
        checkboxes[checkboxes.length -1].checked = true;
    } else {
        let checky = Array.from(response.answers.filter(question => question.questionCode === question_code && columns.includes(Number(question.columnCode)))).map(item => Number(item.rowCode) - 1);
    
        checky.forEach(check => {
            checkboxes[check].checked = true;
        });
    }
} else {
    alert(`${question_code} question was not found`);
}

const checkboxesInput = document.querySelectorAll('.form-check input[type="checkbox"]');
const checkboxesValues = Array.from(checkboxesInput).map(checkbox => checkbox.value).join(',');
document.querySelector('.form-control').value = checkboxesValues;

if(!test){
    document.querySelector("body").classList.add("d-none");
    document.querySelector("#p_next").click();
}

1. Add JS to the multiple choice filtering the options
   1. Once case without limit of options
1. There are 2 options.

/* START EDITING PART */
let questionCode = "Q4c"; // Question code of the question the code will be added
let questionFilteredCode = "Q4b"; // Question code of the question wanted to filter from
let questionFilteredCodeSchema = "Q4bxSCHEMA"; // 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/multiple_choice.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 */
    multiple_choice({
      question_code: questionCode,
      array_filter: { 
        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}`);
  });

1. Case with min and max options:

/* START EDITING PART */
let questionCode = "Q4d"; // Question code of the question the code will be added
let questionFilteredCode = "Q4b"; // Question code of the question wanted to filter from
let questionFilteredCodeSchema = "Q4bxSCHEMA"; // 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
let minNumber = 1; /* Define a minimum checked answer_options */
let maxNumber = 2; /* Define a maximum checked answer_options */
/* ENDS EDITING PART */

let scripts = ["https://synocdn.com/js/survey/library/multiple_choice.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 */
    multiple_choice({
      question_code: questionCode,
      array_filter: { 
        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}`);
  });

let question_code = questionCode;
const question_card = document.querySelector(`#q_${question_code}_card`);
const answer_options_container = question_card.querySelector(`#p_${question_code}`); //container for question
const lang = document.querySelector('html').getAttribute('lang').substring(0, 2); //check the lang of the survey
const translations = {
    "en": "Please select {n} option(s)",
    "fr": "Veuillez sélectionner {n} option(s)",
    "de": "Bitte wählen Sie {n} Option(en)",
    "it": "Seleziona {n} opzione(i)",
    "es": "Por favor, selecciona {n} opción(es)",
    "no": "Vennligst velg {n} alternativ(er)",
    "sv": "Vänligen välj {n} alternativ",
    "da": "Vælg venligst {n} mulighed(er)",
    "fi": "Valitse {n} vaihtoehto(a)"
};

const message = translations[lang] ? translations[lang].replace("{n}", String(minNumber)) : translations["en"].replace("{n}", String(minNumber));

answer_options_container.insertAdjacentHTML(
    "beforebegin",
    `<span class="d-none custom-error pb-1 text-center" id="feedback_${question_code}">
      <span class="form-error-message text-danger">${message}</span>
    </span>`
);

let alloptions = $('div.form-check input:checkbox')
let regularoptions = $('div.form-check input:checkbox').not(':last');
let noneOfTheseCheckbox = $('div.form-check input:checkbox').last();

$('.form-check-label').last().css('background', '#ddedfd');

$('div.form-check input:checkbox').on('click', function () {
    let regularCount = regularoptions.filter(':checked').length;

    if (regularCount === maxNumber) {
        alloptions.not(':checked').prop('disabled', true);
    } else {
        alloptions.not(':checked').prop('disabled', false);
    };
});

//quick fix for exclusive options
noneOfTheseCheckbox.click(function () {

    let noneOfTheseStatus = noneOfTheseCheckbox.prop('checked')

    if (noneOfTheseStatus === true) {
        regularoptions.prop('disabled', true);
        regularoptions.prop('checked', false);
    } else if (noneOfTheseStatus === false) {
        regularoptions.prop('disabled', false);
    }
});

$('#p_next').click(function (event) {
    let regularCount = regularoptions.filter(':checked').length; // Check the number of checked regular options
    let noneOfTheseStatus = noneOfTheseCheckbox.prop('checked'); // Check the status of the exclusive option
    let feedback = document.querySelector(`#feedback_${question_code}`);//check the question code for the error message

    if (noneOfTheseStatus === false && (regularCount < minNumber || regularCount > maxNumber)) {
        // The condition is met, prevent default action
        event.preventDefault();
        feedback.classList.remove('d-none');
        feedback.classList.add('d-block');
        question_card.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
    }
});

You can see the order and results below:

Case 5 Sets an amount of checks required

---

If you need to limit the amount of options selected by a respondent you can use JS to validate it and force respondents to the requirements for your question.

For this, we have 2 possible scenarios:

1. Without an exclusive option
2. With exclusive option

Option 1 without exclusive

For this just add the following JS and edit the editable variables to suit your case:

/* START EDITING PART */
let questionCode = "Q5a"; // Question code of the question the code will be added
let checksRequired = 3; // Define a require amount of checks
/* ENDS EDITING PART */

let scripts = ["https://synocdn.com/js/survey/library/multiple_choice.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 */
    multiple_choice({
      question_code: questionCode,
      validation: {
        n_required: checksRequired
      }
    });
    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}`);
  });

//quick fix for exclusive options
let noneOfTheseCheckbox = $('div.form-check input:checkbox').last();
let regularoptions = $('div.form-check input:checkbox').not(':last');

noneOfTheseCheckbox.click(function () {
    
    let noneOfTheseStatus = noneOfTheseCheckbox.prop('checked')

    if (noneOfTheseStatus === true) {
        regularoptions.prop('disabled', true);
        regularoptions.prop('checked', false);
    } else if (noneOfTheseStatus === false) {
        regularoptions.prop('disabled', false);
    }
});

If you everything is correct, the remaining options will be disabled, like in this example below, were we force 3 required.

Option 2 with an exclusive option

For this the process is the same as above, just use this JS instead:

/* STARTS EDITABLE PART */
let question_code = "Q5b";
let minNumber = 3;
let maxNumber = 3;
/* ENDS EDITABLE PART */

const question_card = document.querySelector(`#q_${question_code}_card`);
const answer_options_container = question_card.querySelector(`#p_${question_code}`); //container for question
const lang = document.querySelector('html').getAttribute('lang').substring(0, 2); //check the lang of the survey
const translations = {
    "en": "Please select {n} option(s)",
    "fr": "Veuillez sélectionner {n} option(s)",
    "de": "Bitte wählen Sie {n} Option(en)",
    "it": "Seleziona {n} opzione(i)",
    "es": "Por favor, selecciona {n} opción(es)",
    "no": "Vennligst velg {n} alternativ(er)",
    "sv": "Vänligen välj {n} alternativ",
    "da": "Vælg venligst {n} mulighed(er)",
    "fi": "Valitse {n} vaihtoehto(a)"
};

const message = translations[lang] ? translations[lang].replace("{n}", String(minNumber)) : translations["en"].replace("{n}", String(minNumber));

answer_options_container.insertAdjacentHTML(
    "beforebegin",
    `<span class="d-none custom-error pb-1 text-center" id="feedback_${question_code}">
      <span class="form-error-message text-danger">${message}</span>
    </span>`
);

let alloptions = $('div.form-check input:checkbox')
let regularoptions = $('div.form-check input:checkbox').not(':last');
let noneOfTheseCheckbox = $('div.form-check input:checkbox').last();

$('.form-check-label').last().css('background', '#ddedfd');

$('div.form-check input:checkbox').on('click', function () {
    let regularCount = regularoptions.filter(':checked').length;

    if (regularCount === maxNumber) {
        alloptions.not(':checked').prop('disabled', true);
    } else {
        alloptions.not(':checked').prop('disabled', false);
    };
});

//quick fix for exclusive options
noneOfTheseCheckbox.click(function () {

    let noneOfTheseStatus = noneOfTheseCheckbox.prop('checked')

    if (noneOfTheseStatus === true) {
        regularoptions.prop('disabled', true);
        regularoptions.prop('checked', false);
    } else if (noneOfTheseStatus === false) {
        regularoptions.prop('disabled', false);
    }
});

$('#p_next').click(function (event) {
    let regularCount = regularoptions.filter(':checked').length; // Check the number of checked regular options
    let noneOfTheseStatus = noneOfTheseCheckbox.prop('checked'); // Check the status of the exclusive option
    let feedback = document.querySelector(`#feedback_${question_code}`);//check the question code for the error message

    if (noneOfTheseStatus === false && (regularCount < minNumber || regularCount > maxNumber)) {
        // The condition is met, prevent default action
        event.preventDefault();
        feedback.classList.remove('d-none');
        feedback.classList.add('d-block');
        question_card.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
    }
});

With this, the results will be similar to the above, but you can proceed with the survey in 2 ways, either by selecting the required amount of completes or selecting the exclusive option.

Case 6 Sets a minimum and maximum amount of checks required

---

Maybe in your question you want the respondent to have a minimum and a maximum of options to answer, for this, we can use JS and similar to case 5 we have 2 options.
For this, we have 2 possible scenarios:

1. Without an exclusive option
2. With exclusive option

Option 1 without exclusive

For this just add the following JS and edit the editable variables to suit your case:

/* START EDITING PART */
let questionCode = "Q6a"; // Question code of the question the code will be added
let min = 2; // Define a minimum amount of checkboxes to be check
let max = 3; // Define a maximum amount of checkboxes to be check
/* ENDS EDITING PART */

let scripts = ["https://synocdn.com/js/survey/library/multiple_choice.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 */
    multiple_choice({
      question_code: questionCode,
      validation: {
        min_limit: min,
        max_limit: max
      }
    });
    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 everything is correct, the remaining options will be disabled, like in this example below, were we force 2 at minimum and maximum 3 required, if you failed you will get an error alert:

Option 2 with an exclusive option

For this the process is the same as above, just use this JS instead:

/* STARTS EDITABLE PART */
let question_code = "Q6b";
let minNumber = 2;
let maxNumber = 3;
/* ENDS EDITABLE PART */

const question_card = document.querySelector(`#q_${question_code}_card`);
const answer_options_container = question_card.querySelector(`#p_${question_code}`); //container for question
const lang = document.querySelector('html').getAttribute('lang').substring(0, 2); //check the lang of the survey
const translations = {
    "en": "Please select {n} option(s)",
    "fr": "Veuillez sélectionner {n} option(s)",
    "de": "Bitte wählen Sie {n} Option(en)",
    "it": "Seleziona {n} opzione(i)",
    "es": "Por favor, selecciona {n} opción(es)",
    "no": "Vennligst velg {n} alternativ(er)",
    "sv": "Vänligen välj {n} alternativ",
    "da": "Vælg venligst {n} mulighed(er)",
    "fi": "Valitse {n} vaihtoehto(a)"
};

const message = translations[lang] ? translations[lang].replace("{n}", String(minNumber)) : translations["en"].replace("{n}", String(minNumber));

answer_options_container.insertAdjacentHTML(
    "beforebegin",
    `<span class="d-none custom-error pb-1 text-center" id="feedback_${question_code}">
      <span class="form-error-message text-danger">${message}</span>
    </span>`
);

let alloptions = $('div.form-check input:checkbox')
let regularoptions = $('div.form-check input:checkbox').not(':last');
let noneOfTheseCheckbox = $('div.form-check input:checkbox').last();

$('.form-check-label').last().css('background', '#ddedfd');

$('div.form-check input:checkbox').on('click', function () {
    let regularCount = regularoptions.filter(':checked').length;

    if (regularCount === maxNumber) {
        alloptions.not(':checked').prop('disabled', true);
    } else {
        alloptions.not(':checked').prop('disabled', false);
    };
});

//quick fix for exclusive options
noneOfTheseCheckbox.click(function () {

    let noneOfTheseStatus = noneOfTheseCheckbox.prop('checked')

    if (noneOfTheseStatus === true) {
        regularoptions.prop('disabled', true);
        regularoptions.prop('checked', false);
    } else if (noneOfTheseStatus === false) {
        regularoptions.prop('disabled', false);
    }
});

$('#p_next').click(function (event) {
    let regularCount = regularoptions.filter(':checked').length; // Check the number of checked regular options
    let noneOfTheseStatus = noneOfTheseCheckbox.prop('checked'); // Check the status of the exclusive option
    let feedback = document.querySelector(`#feedback_${question_code}`);//check the question code for the error message

    if (noneOfTheseStatus === false && (regularCount < minNumber || regularCount > maxNumber)) {
        // The condition is met, prevent default action
        event.preventDefault();
        feedback.classList.remove('d-none');
        feedback.classList.add('d-block');
        question_card.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
    }
});

With this, the results will be similar to the above, but you can proceed with the survey in 2 ways, either by selecting the required amount of options between the minimum and maximum or selecting the exclusive option.

Case 7 Array filter inherited Randomization

---

Sometimes you want to keep the same randomization order to keep consistency for respondents.
While Syno Survey does not have this function natively yet, we can use JS to have this function and add it to our surveys.
We need to follow these steps:

1. Add a SCHEMA to the question we will base the randomization on.
2. Add JS to the multiple choice question that will receive it

For this, you need to add an additional SINGLE TEXT question with the following format:

questionCodexSCHEMA

For example, if you were to use Q1 as your initial question code, you would then add the SCHEMA Q1xSCHEMA, like in the example below
Afterward, you need to add the following code and edit the editable part to suit your survey.

/* START EDITING PART */
let questionSchema = "Q1xSCHEMA"; // 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 code will add the values to the schema and hide it by default.

After it you should add the following JS code to the receiving question:

/* START EDITING PART */
let questionCode = "Q7b"; // Question code of the question the code will be added
let filterSchema = "Q7axSCHEMA"; // Question code of the filter schema
/* ENDS EDITING PART */

let scripts = ["https://synocdn.com/js/survey/library/multiple_choice.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 */
    multiple_choice({
      question_code: questionCode,
      randomize: { 
        filter_schema: filterSchema,
      }
    });
    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 everything was set up correctly the results will be as follows:

Case 8 Inherited randomization from block randomization

---

Sometimes you want to keep the same randomization order to keep consistency for respondents.
For this case, if you use block randomization the steps are the same as in Case 7, but with differences in the JS code.

While Syno Survey does not have this function natively yet, we can use JS to have this function and add it to our surveys.
We need to follow these steps:

1. Add a SCHEMA to the question we will base the randomization on.
2. Add JS to the multiple choice question that will receive it

For this, you need to add an additional SINGLE TEXT question with the following format:

questionCodexSCHEMA

For example, if you were to use Q1 as your initial question code, you would then add the SCHEMA Q1xSCHEMA, like in the example below
Afterward, you need to add the following code and edit the editable part to suit your survey.

Additionally the code will contain the randomization variable where you can edit it to suit the block randomization you need.

/* START EDITING PART */
let questionCode = "Q8a"; // Question code of the question the code will be added
let randomization = [[1,2],[3,4,5], [99]]; // Add the question answer codes wanted to randomize in one list ([1, 2]) and the ones not wanted to randomized add them to another list ([99])
let randomizeBetweenGroups = false; // Use false if you just want to randomize blocks, put true if you also want to randomize groups between each other (remove options like Other and None from the list if true)
let questionSchema = "Q8axSCHEMA"; // Create a new open text question and set the question code as "QuestionCode"xSCHEMA

/* ENDS EDITING PART */

let scripts = ["https://synocdn.com/js/survey/library/multiple_choice.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 */
    multiple_choice({
      question_code: questionCode,
      randomize: { 
        answer_groups: randomization,
        randomize_groups: randomizeBetweenGroups,
      }
    });
    document.querySelector("body").style.opacity = "1";
    const checkboxesInput = document.querySelectorAll('.form-check input[type="checkbox"]');
    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");
  })
  /* If a library could not be imported throw an error */
  .catch((error) => {
    console.error(`Failed to load script: ${error}`);
  });

This code will add the values to the schema and hide it by default.

After it you should add the following JS code to the receiving question:

/* START EDITING PART */
let questionCode = "Q8b"; // Question code of the question the code will be added
let filterSchema = "Q8axSCHEMA"; // Question code of the filter schema
/* ENDS EDITING PART */

let scripts = ["https://synocdn.com/js/survey/library/multiple_choice.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 */
    multiple_choice({
      question_code: questionCode,
      randomize: { 
        filter_schema: filterSchema,
      }
    });
    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 everything was set up correctly the results will be as follows:

Case 9 Quick Fix for Exclusive not working

---

Sometimes JS code can cause problems with the exclusive option, for this cases we have a quick fix JS that will add this function back.

Very important that you don’t need to make the last option exclusive since the JS will handle it.

Just copy and paste it to the questions you need it at the end, no need to edit anything:

//quick fix for exclusive options
$('.form-check-label').last().css('background','#ddedfd');
let noneOfTheseCheckbox = $('div.form-check input:checkbox').last();
let regularoptions = $('div.form-check input:checkbox').not(':last');

noneOfTheseCheckbox.click(function () {
    
    let noneOfTheseStatus = noneOfTheseCheckbox.prop('checked')

    if (noneOfTheseStatus === true) {
        regularoptions.prop('disabled', true);
        regularoptions.prop('checked', false);
    } else if (noneOfTheseStatus === false) {
        regularoptions.prop('disabled', false);
    }
});

And as you can see below, the results will be the same as if you were using the regular option: