Hi, Qualtrics Community!

I really like the carousel question option, but survey testing revealed some problems. For instance:

• Auto-advance and the right chevron = 2 questions ahead. With auto-advanced activated, some survey testers selected the right chevron and inadvertently advanced 2 questions ahead.
• Next button and right chevron = feature conflation.  Some survey testers mistakenly clicked the “next” button (even when differently labeled to better describe button’s purpose or functionality) and advanced to the next question set, inadvertently skipping questions in the previous set.

The code below:

1. hides the "next" button until last carousel card / question is reached,
2. hides the right chevron (">") for 2 seconds if an answer selected (along with addressing the above bulleted items, this section of code may support pacing and attention  . . .),
3. re-hides the "next" button if end is reached and respondent then navigates to previous question(s) within the carousel.

We’ve tested the code and the bulleted problems above seem to be resolved. Does anyone in the community have further suggestions or any concerns?

Thank you for any feedback -- the full code is below.

Chipper

var intervalId;

Qualtrics.SurveyEngine.addOnReady(function() {
    if(!!+"${e://Field/hidePrev}") jQuery("#PreviousButton").hide();

    function hideEl(element) {
        if($(element)) $(element).hide();
    }   
    hideEl.defer('NextButton');

    // Set an interval to check the state of the carousel every 100 milliseconds
    intervalId = setInterval(function() {
        if(jQuery(".CarouselCard").last().hasClass("NoDisplay")){
            jQuery("#NextButton").hide();
        } else {
            jQuery("#NextButton").show();
        }
    }, 100);

    var questionId = 'QID9';
    var listItems = document.querySelectorAll('#' + questionId + ' .CarouselAnswerButtonContainer');

    listItems.forEach(function(listItem) {
        listItem.observe('click', function(event) {
            if (event.target.type === 'radio') {
                var arrows = document.getElementsByClassName("CarouselChevronContainer");
                if (arrows && arrows&1]) {
                    arrows 1].style.display = 'none';

                    // Add a delay before showing the chevron again
                    setTimeout(function() {
                        arrows 1].style.display = '';
                    }, 2000); // 2000 milliseconds = 2 seconds
                }
            }
        });
    });
});

Qualtrics.SurveyEngine.addOnUnload(function() {
    // Clear the interval when the page is unloaded
    clearInterval(intervalId);
});