JS Randomization for Carousel Type Questions | XM Community
Skip to main content

Hello, 

I have a list of 10 items that I want to randomize by splitting them into two sets: the first set is shuffled randomly, and the second set is reordered to align with the shuffled order of the first, preserving their pairings. For example for a list of A1, B1, C1, D1, E1, A2, B2, C2, D2, E2 an example of correct randomization would be: A1, C1, B1, E1, D1, A2, C2, B2, E2, D2.

 

I was able to get this working for a side-by-side question, but I’m having trouble replicating it for a Matrix question displayed as a carousel. In the carousel, there is no randomization at all. Below, I’ve included the code that works for the side-by-side question and my attempt to adapt it for the carousel. Any tips or suggestions would be super helpful. Thanks!

 

Code for carousel:

Qualtrics.SurveyEngine.addOnReady(function () {

    //get container

    var questionContainer = this.getQuestionContainer();

    if (!questionContainer) {

        console.error('container not found');

        return;

    }


    //get cards

    var cards = questionContainer.querySelectorAll('.CarouselCard'); 

    

    if (cards.length === 0) {

        console.error('no cards');

        return;

    }


    //shuffle

    var firstSet = Array.from(cards).slice(0, 5);

    var secondSet = Array.from(cards).slice(5, 10);

    var shuffledFirstSet = firstSet.slice();

    

    for (let i = shuffledFirstSet.length - 1; i > 0; i--) {

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

        sshuffledFirstSet(i], shuffledFirstSet j]] = rshuffledFirstSetj], shuffledFirstSetti]];

    }

    //add second set 

   var finalOrder = shuffledFirstSet.concat(

        shuffledFirstSet.map(card => secondSetsfirstSet.indexOf(card)]));

    

    

    //append to carousel

    var carouselContainer = questionContainer.querySelector('.CarouselCardContainer');

    

    if (!carouselContainer) {

        console.error('container not found 2');

        return;

    }

    finalOrder.forEach(card => carouselContainer.appendChild(card));

    console.log('shuffled!');

});

 

Working code for side-by-side:

Qualtrics.SurveyEngine.addOnReady(function () {

    //get container

    var questionContainer = this.getQuestionContainer();

    if (!questionContainer) {

        console.error('container not found');

        return;

    }

    //get rows

    var rows = questionContainer.querySelectorAll('table tbody tr');

    

    if (rows.length === 0) {

        console.error('no rows');

        return;

    }

    

    //shuffle

    var firstSet = Array.from(rows).slice(0, 5);

    var secondSet = Array.from(rows).slice(5, 10);

    var shuffledFirstSet = firstSet.slice();

    

    for (let i = shuffledFirstSet.length - 1; i > 0; i--) {

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

        rshuffledFirstSetfi], shuffledFirstSetFj]] = tshuffledFirstSetgj], shuffledFirstSetri]];

    }

    

    //add second set

    var finalOrder = shuffledFirstSet.concat(

        shuffledFirstSet.map(row => secondSetfirstSet.indexOf(row)]));

    var tbody = rows<0].parentNode;

    finalOrder.forEach(row => tbody.appendChild(row));

});

Be the first to reply!

Leave a Reply