Let question fade-in delayed | XM Community
Skip to main content

Hi @ community! 

 

I was wondering if there is a way to let a question fade in after a certain amount of time? 

I found the following post, where the author had a similar request, that a question appears after showing a video:
 


I implemented this (especially the response with the adjusted version for the slider) and it works just fine. However, what I would like to implement is, that the question fades in instead of just all of a sudden appearing. 

I’m using the following code from the question answer at the moment as I also have two questions with a slider: 

var q="#"+this.questionId;
jQuery(q).css("content-visibility","hidden");
setTimeout(function () {
jQuery(q).css("content-visibility","visible");
},5000);

How could I adjust this code, that it fades in a bit softer than just popping up? I found something online with a “fade.In(‘slow’)” attribute - but I don’t really know how to implement it. 

 

Thank you in advance! 

hi @JessiH can you try the below code

Qualtrics.SurveyEngine.addOnload(function() {
    var q = "#" + this.questionId;
    jQuery(q).hide(); // Hide the question initially
    setTimeout(function() {
        jQuery(q).fadeIn(1000); // Fade in the question over 1000 milliseconds (1 second)
    }, 2000); // Wait for 2000 milliseconds (5 seconds) before fading in
});

 

Thank you for your quick answer! It works perfectly for the matrix table question but I have the same problem as in the previous post I linked with the sliders - they’re kind of gone. I can just see the slider buttons, but not the line and can’t move them. Is there any solution for this or won’t this just not work? 

Besides that: any idea how I could also hide the next button from appearing before the questions appear? 

Hi @JessiH Sorry for late reply, got the below code from another community post and with some help of ChatGPT. Please try this.
 

Qualtrics.SurveyEngine.addOnload(function() {
    // Hide the "Next" button at the start of the survey
    this.hideNextButton();

    // Your existing code to delay the loading of a question and the display of the "Next" button
    var q = "#" + this.questionId;
    var nextButton = jQuery(this.questionContainer).find('.QuestionTools .NextButton');
    nextButton.hide(); // Hide the next button initially

    // Hide the question initially
    jQuery(q).css("opacity", "0");

    setTimeout(function() {
        // Fade in the question over 1000 milliseconds (1 second)
        jQuery(q).animate({ opacity: 1 }, 1000, function() {
            // Show the next button after fading in the question
            nextButton.show();
            this.showNextButton();
        }.bind(this));
    }.bind(this), 2000); // Wait for 2000 milliseconds (2 seconds) before fading in
});

Hi @JessiH Sorry for late reply, got the below code from another community post and with some help of ChatGPT. Please try this.
 

Qualtrics.SurveyEngine.addOnload(function() {
    // Hide the "Next" button at the start of the survey
    this.hideNextButton();

    // Your existing code to delay the loading of a question and the display of the "Next" button
    var q = "#" + this.questionId;
    var nextButton = jQuery(this.questionContainer).find('.QuestionTools .NextButton');
    nextButton.hide(); // Hide the next button initially

    // Hide the question initially
    jQuery(q).css("opacity", "0");

    setTimeout(function() {
        // Fade in the question over 1000 milliseconds (1 second)
        jQuery(q).animate({ opacity: 1 }, 1000, function() {
            // Show the next button after fading in the question
            nextButton.show();
            this.showNextButton();
        }.bind(this));
    }.bind(this), 2000); // Wait for 2000 milliseconds (2 seconds) before fading in
});

Hi @JessiH , did you try out this code that @omkarkewat shared? If so, let us know if it worked! Thanks Community Team.

Leave a Reply


Terms & Conditions