instead of show progress is there any way to show below answered statement / total statement eg 1/5, 2/5 and so on in carousel question qualtrics | XM Community
Skip to main content

 

Hi ​@harendra.kumar ,

In Qualtrics, the carousel question type comes with a built-in progress bar that visually indicates progress through the statements.
While we can’t display 1/5, 2/5 style counter using JavaScript, replacing or hiding the default progress bar and is  not officially supported by Qualtrics and cannot be reliably achieved across all themes and devices.

Thank you.


Try adding the below to the Carousel question's JavaScript. It adds an element underneath the Card Frame that displays how many statements have received an answer out of the total number of statements.

Qualtrics.SurveyEngine.addOnReady(function () {

// Define selectors
const that = this;
    const frame = document.querySelector('.CarouselCardFrame');
    const container = document.querySelector('.CarouselCardContainer');
    const cards = container.querySelectorAll('.CarouselCard');
    const total = cards.length;

// Create and insert element directly under CarouselCardFrame
const display = document.createElement('div');
display.id = 'carousel-position-indicator';
display.style.textAlign = 'center';
display.style.marginTop = '10px';
display.style.fontWeight = 'bold';
frame.insertAdjacentElement('afterend', display);

function updateDisplay() {
const answered = that.getSelectedChoices().length;
display.textContent = 'Answered: ' + answered + '/' + total;
}

// Initial display
updateDisplay();

// Update when a choice is clicked
this.questionclick = function () {
updateDisplay();
};

});

 


Leave a Reply