Randomly Add Subset of Questions From JSON Question Bank to Survey JS Quiz

Question

I am in the process of creating a quiz using the survey js library. For this quiz I have a bank of questions that I'd like to randomly select from.

To do this, I have stored JSON objects - serialized to JSON questions. Here is the working sample - https://plnkr.co/edit/gnL4gv75uowDPyEU

Now, this works for adding every question to the page by utilizing a foreach loop. Instead, I'd like to randomly add just 2 of the questions out of the 4.

Conceptually I understand how to do this but I am relatively new to programming.

Here is my thought process for what needs to be done:

1. Get random number using the Fisher-Yates shuffle:

function shuffle(array) {
    var i = array.length,
        j = 0,
        temp;

    while (i--) {

        j = Math.floor(Math.random() * (i+1));

        // swap randomly chosen element with current element
        temp = array[i];
        array[i] = array[j];
        array[j] = temp;

    }

    return array;
}

var ranNums = shuffle([1,2,3,4]);

2. Add the question from JSON at the serialized random number to the page. Repeat this twice to add two questions.

This seems relatively simple but when I go to implement it I can't seem to figure out how to actually serialize the json. In addition, even once I figure out how to serialize the json questions and select it accordingly, I don't understand the necessary syntax to add the question. Can someone please help with this?

Answer 1

You can store JSON objects - serialized to JSON questions. These objects can be stored as JSON in DB or as a serialized JSON strings. You can deserialize JSON objects from string using the JSON.parse function and add deserialized object to an array with potential questions - questionJSONs. After that you can add questions from this array to your survey. Here is the working sample - https://plnkr.co/edit/gnL4gv75uowDPyEU

    var questionJSONs = [
        {
            name: "name",
            type: "text",
            title: "Please enter your name:",
            placeHolder: "Jon Snow",
            isRequired: true
        }, {
            name: "birthdate",
            type: "text",
            inputType: "date",
            title: "Your birthdate:",
            isRequired: true
        }, {
            name: "color",
            type: "text",
            inputType: "color",
            title: "Your favorite color:"
        }, {
            name: "email",
            type: "text",
            inputType: "email",
            title: "Your e-mail:",
            placeHolder: "jon.snow@nightwatch.org",
            isRequired: true,
            validators: [
                {
                    type: "email"
                }
            ]
        }
    ];

var json = {
    pages: [{name: "page1"}]
};

window.survey = new Survey.Model(json);
var page = survey.pages[0];
questionJSONs.forEach(function(questionJson) {
    var question = page.addNewQuestion(questionJson.type, questionJson.name);
    question.fromJSON(questionJson);
});

Answer 2

Using the advice from @TSV I was able to create a solution to this issue. It uses the fisher-yates shuffle to get a random array. Then, I splice this array to be the desired length. Here is a plunker for anyone with a similar problem - https://plnkr.co/edit/I4vXNTFEgIP9zy1s?open=lib%2Fscript.js

function shuffle(array) {
    var i = array.length,
        j = 0,
        temp;

    while (i--) {

        j = Math.floor(Math.random() * (i+1));

        // swap randomly chosen element with current element
        temp = array[i];
        array[i] = array[j];
        array[j] = temp;

    }

    return array;
}
var ranNums = shuffle([0,1,2,3]);

var randomQuestionSelection = ranNums.slice(0,2);

for(var i = 0; i < randomQuestionSelection.length; i++) {
  var randomQuestionJson = questionJSONs[randomQuestionSelection[i]];
  var question = page.addNewQuestion(randomQuestionJson.type, randomQuestionJson.name);
  question.fromJSON(randomQuestionJson);
}