Show Random Pages or Questions, Basic Solution

Goal

Show a limited number of random pages (or questions).

Effort:   ✔ ✔ ✔

Solution

This solution fills a Hidden Value Action with a list of random values users define. Later pages or questions use this list to determine if they should be shown or hidden based on whether it contains a specific value or not.

   Step 1:  Add a Hidden Value Action     

Add a Hidden Value Action with a title such as random-pages-to-show. Leave the Populate with fields empty.

   Step 2:  Add a Javascript Action     

(1) Add a Javascript Action to the same page below the Hidden Value Action.

(2) Copy and paste the code at the end of this article into the Javascript Action.

(3) Set the highlighted values in the script.  

(a) Create your own values in the highlighted VALUES section.  For example: you can change "Concept A" to "Nike".  The script will randomly save one or more of these Values to the Hidden Value Action added in Step 1.

// The values to choose from
const VALUES = [
  "Concept A",
  "Concept B",
  "Concept C",
  "Concept D",
]

(b) Set the number of random pages (or questions) you would like to show.  In this example it is set to show 2:

NUMBER_TO_SHOW = 2

(c) Locate the ID number our system generated for your Hidden Value Action and enter it where the number 18 is:

SAVE_VALUES_TO_QID = 18

   Step 3:  Add random pages (or questions)     

Add the pages (or questions) to be randomly shown.

Set the Display Logic for each to only show if the random-pages-to-show Hidden Value Action added in Step 1 contains one of the VALUES you added in Step 2. The text must match exactly, including case. For example the follow up page below will only be displayed if the Hidden Value Action from Step 1 contains Concept A.

Javascript code:

/* Alchemer v01

   Setup for Page, Page Group, or Question Randomization
*/

document.addEventListener("DOMContentLoaded", function() {
  
  // The values to choose from
  const VALUES = [
    "Concept A",
    "Concept B",
    "Concept C",
    "Concept D",
  ]
  
  // how many random values to choose
  const NUMBER_TO_SHOW = 2
   
  // The Hidden Value Action question ID to save the randomly chosen values which
  //   in list separated by vertical bars
  const SAVE_VALUES_TO_QID = 18

  // * * * * * * * * * * * * * * 
  // * no changes needed below *
  // * * * * * * * * * * * * * * 
  
  const LOG = true

  /***
   * Test boolean value, alert() and throw Error if it's false
   *
   * bool {t/f} value to test 
   * msg {string} message to alert and throw in new Error
   */
  const assert = (bool, msg) => {
    if (!bool) {
      console.error(msg)
      alert(msg)
      throw new Error(msg)
      }
  }

  /***
   * Get an element based on its Question ID 
   *
   * qid {integer/string} question ID 
   * section = "element" {string} the final section of the element id
   * return {element} looks for id's in the form: "sgE-1234567-12-123-element"
   */
  const getElemByQid = (qid, section = "element") => {
    const id = "sgE-" + SGAPI.survey.surveyObject.id + "-" + SGAPI.survey.pageId + "-" + qid + "-" + section
    const elem = document.getElementById(id)
    assert(elem, "Javascript: can't find element with id = " + id + ", section = " + section)
    return elem
  }
    
  /***
   * Check if random values have already been saved when page was previously shown
   *
   * return {t/f} 
   */
  const haveValuesBeenSaved = () => {
    savedValues = getElemByQid(SAVE_VALUES_TO_QID).value
    return savedValues && savedValues !== 'not-set'
  }
    
  /**
   * Shuffle / randomize an array in place
   *
   * array {array} - array is mutated
   * return {array} - shuffled array
   */
  function shuffle(array) {

    // Knuth shuffle (https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array)

    var currentIndex = array.length, temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

      // Pick a remaining element...
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      // And swap it with the current element.
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }

    return array;
  }
    
  /***
   * Get random values
   *
   * values {array of string} the values to select from
   * numberToShow {int} how many values to randomly choose
   * return {array of string} array of the randomly chosen values
   */
  const getRandomValues = (values, numberToShow) => {
    values = shuffle(values)
    const retVal = []
    for (let i = 0; i < numberToShow && i < values.length; i++)
      retVal.push(values[i])
    return retVal
  }
  
  /***
   * Save randomized values
   *
   * qid {int} question id
   * values {array of string} the values to save
   */
  const saveValues = (qid, values) => {
    getElemByQid(qid).value = 
      values.sort((a, b) => 
        a.localeCompare(b))
        .join('|')
    if (LOG) console.log("saving values to show = ", getElemByQid(qid).value)
  }

  /**
   * main()
   */

  if (!haveValuesBeenSaved()) {
    const values = getRandomValues(VALUES, NUMBER_TO_SHOW)
    saveValues(SAVE_VALUES_TO_QID, values)
  } else {
    if (LOG) console.log("random values already saved = ", getElemByQid(SAVE_VALUES_TO_QID).value)
  }
})