Skip to main content

Select Random Elements

  • Updated

We have 2 cases for this:

  1. Regular Select Random Elements
  2. Random Selection + SCHEMA for filtering

Case 1 Select Random Elements

If you want to have multiple questions on one page, and shuffle them, you can use this code, following this steps:

  1. Add a multiple choice question with all the options you need.
  2. Copy the JS code and edit the editable part to adjust to your needs.
// Select Random Elements

/*STARTS EDITABLE PART - Change call to function to correct one*/
let questionCode = "Q1"; //Change to current question code
let nOfElements = 5; //change to the expected number of elements to select
/* ENDS EDITABLE PART*/

let scripts = ["https://synocdn.com/js/survey/library/select_random_elements.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(() => {
    select_random_elements({
      question_code: questionCode,
      n: nOfElements
    });
    document.querySelector("body").style.opacity = "1";
  })
  .catch((error) => {
    console.error(`Failed to load script: ${error}`);
  });

This will gives you this as a result:

image.png

 

Case 2 Random Selection + SCHEMA for filtering

If you want to have multiple questions on one page, and shuffle them, you can use this code, following this steps:

  • Add a multiple choice question with all the options you need.
  • Add a open text question with the same code as our original question while adding xSHCEMA that question will be hidden automatically
  • image.png
  • Copy the JS code and edit the editable part to adjust to your needs.

 

// Select Random Elements

/*STARTS EDITABLE PART - Change call to function to correct one*/
let questionCode = "Q2"; //Change to current question code
let nOfElements = 5; //change to the expected number of elements to select
let hideQuestion = false; //change to true when live
let hideOnlySCHEMA = true; //this will hide the SCHEMA only in case this question needs to be answered by the respondent
/* ENDS EDITABLE PART*/

let scripts = ["https://synocdn.com/js/survey/library/select_random_elements.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(() => {
    select_random_elements({
      question_code: questionCode,
      n: nOfElements
    });
    const checkboxes = document.querySelectorAll('.form-check input[type="checkbox"]');
    const checkboxValues = Array.from(checkboxes).map(checkbox => checkbox.value).join(',');
    document.querySelector('.form-control').value = checkboxValues;
    if(hideOnlySCHEMA){
      document.querySelector(`#q_${questionCode}xSCHEMA_card`).classList.add("d-none");
    }
    if (hideQuestion) {
      $('body').hide();
      $('#p_next').click();
    } else{
      document.querySelector("body").style.opacity = "1";
    }
  })
  .catch((error) => {
    console.error(`Failed to load script: ${error}`);
  });

This will give you the following result:

image.png