How to Require Audio Completion Before Proceeding in Qualtrics | XM Community
Skip to main content
Michael_Cooksey
Administrator
15 days ago
Question

How to Require Audio Completion Before Proceeding in Qualtrics

  • February 3, 2025
  • 1 reply
  • 34 views
S
Forum|alt.badge.img

Hi everyone,

I'm trying to ensure that participants listen to an entire audio clip before they can proceed to the next question in my Qualtrics survey. Ideally, the "Next" button should remain hidden until the audio finishes playing. I am not very familiar with coding. 

I added this JavaScript in the "Add JavaScript" section of my question:

Qualtrics.SurveyEngine.addOnReady(function() {
    jQuery("#NextButton").hide(); // Hide the Next button initially
    jQuery("#"+this.questionId+" audio").on("ended", function() { 
        jQuery("#NextButton").show(); // Show the Next button after audio ends
    });
});
Has anyone successfully implemented this feature in Qualtrics? Any suggestions or fixes would be greatly appreciated!

1 reply

RickB
Level 4 ●●●●
Forum|alt.badge.img+19
  • RickB
  • Level 4 ●●●●
  • 123 replies
  • February 4, 2025

Hey ​@Simrat1 ,

 

mabey this will work for you:

in the question tekt/graphic go to rich content editor en fill in there the html:
<audio id="audioPlayer" controls>

  <source src="your_audio_url.mp3" type="audio/mpeg">

  Your browser does not support the audio element.

</audio>
 

chance your_audio_url.mp3 with your actual audio file link.

Go to javascript and have this code: 

Qualtrics.SurveyEngine.addOnload(function() {

    var audio = document.getElementById("audioPlayer");

    

    var checkNextButton = setInterval(function() {

        var nextButton = document.getElementById("NextButton");

        if (nextButton) {

            

            nextButton.style.visibility = "hidden";  

            clearInterval(checkNextButton);

            

            audio.onplay = function() {

                nextButton.style.visibility = "hidden";

            };

            

            audio.onended = function() {

                nextButton.style.visibility = "visible";

            };

        }

    }, 200); 

});

I have only this question on a page and after this question i did a page break. I did not try it with more questions on 1 page. 

When it loads you will see for 1 sec the button but then it will be gone. 
 

after the audio you will see this:

 

Leave a Reply


Terms & Conditions