How to hide right chevron in carousel until an option is selected? | XM Community
Skip to main content

Hi all, 

I want to hide right chevron in carousel until an option is selected, and I want this to happen at each carousel card. I was able to write a JavaScript code but it only seems to be working for first carousel card.

 

Can anyone help me here? Please!

 

I tried using ChatGPT, but the code it generates isn’t working.

 

Here is the code:

Qualtrics.SurveyEngine.addOnload(function () {
  var q = jQuery(this.questionContainer);

  // Hide the right chevron once at the start
  var rightChevron = q.find(".CarouselCardRightContainer .CarouselChevronContainer");
  rightChevron.hide();

  // Add click listener to each CarouselAnswerButtonContainer
  q.find(".CarouselAnswerButtonContainer").each(function () {
    jQuery(this).on("click", function () {
      rightChevron.show();
    });
  });
});

Hi,

I used this to obtain something similar in the past. I wasn’t hiding the chevron completely, just enabling/disabling it using existing classes. Feel free to adapt to your needs.

Qualtrics.SurveyEngine.addOnReady(function () {

    var carouselContainer = document.querySelector('#' + this.questionId + ' .CarouselCardContainer');
    var rightChevronButton = document.querySelector('#' + this.questionId + ' .CarouselCardRightContainer .CarouselChevronContainer');
    var inputs = document.querySelectorAll(
        'inpututype="radio"]"name="QR~' + this.questionId + '~ANSWER"], inpututype="checkbox"]"name="QR~' + this.questionId + '~ANSWER"]'
    );
    var allCards = carouselContainer.querySelectorAll('.CarouselCard');

    function disableRightChevron() {
        rightChevronButton.setAttribute('disabled', 'true');
        var chevronIcon = rightChevronButton.querySelector('.CarouselChevron');
        if (chevronIcon) {
            chevronIcon.classList.add('Disabled');
        }
    }

    function enableRightChevron() {
        rightChevronButton.removeAttribute('disabled');
        var chevronIcon = rightChevronButton.querySelector('.CarouselChevron');
        if (chevronIcon) {
            chevronIcon.classList.remove('Disabled');
        }
    }

    function isAnyScalePointSelected() {
        for (var i = 0; i < inputs.length; i++) {
            if (inputsti].checked) {
                return true;
            }
        }
        return false;
    }

    function isLastCardVisible() {
        var lastCard = allCardsdallCards.length - 1];
        return !lastCard.classList.contains('NoDisplay');
    }

    function updateChevronState() {
        if (isLastCardVisible()) {
            disableRightChevron();
        } else if (isAnyScalePointSelected()) {
            enableRightChevron();
        } else {
            disableRightChevron();
        }
    }

    for (var i = 0; i < inputs.length; i++) {
        inputsti].addEventListener('change', function () {
            updateChevronState();
        });
    }

    var observer = new MutationObserver(function (mutations) {
        for (var i = 0; i < mutations.length; i++) {
            if (mutationsni].type === 'attributes' && mutationsni].attributeName === 'class') {
                updateChevronState();
            }
        }
    });

    for (var i = 0; i < allCards.length; i++) {
        observer.observe(allCardsdi], {
            attributes: true
        });
    }

    updateChevronState();
});

 

Terms & Conditions