Display slider if audio was played back | XM Community
Skip to main content

Hi! In my survey I ask participants to rate several sounds on a scale using a slider. But I want that the slider (and in the best case also the next button) only appears after the sound has been played back for ~1.5 sec. Is there a way to do it?

For the play button I use the following code:

Please play back the sound and rate it according to the scale:
<audio id="myAudio1">
<source src="https://MyURL"
type='audio/wav'>
</audio>

<button onclick="aud_play_pause1()" type="button">PLAY</button>
<script>
function aud_play_pause1() {
  var myAudio1 = document.getElementById("myAudio1");
  if (myAudio1.paused) {
    myAudio1.play();
  } else {
    myAudio1.pause();
myAudio1.currentTime = 0;
  }
}

</script>

So the condition should be like <if myAudio1.currentTime == 1.5>. Sorry, I am not familiar with JavaScript.

Thanks in advance for your help!

Hi @overtone ,

 

For time being, I can tell you a workaround.

See, you added a play button, so the respondent cannot pause the audio in between, right. There’s no need to delay the slider and next button, just autoplay the audio in the beginning itself. I believe it will serve the purpose.

To autoplay the audio, just add “autoplay=true” at the end of audio tag like this:

 <audio id="myAudio1" autoplay=true>

 

Note - You’ll hear the audio twice in preview mode as it runs for both Desktop and Mobile version.

 

Hope this helps :)

 

Regards,

PD

Workaround 2:

Create a Text/ Graphic question just to store the audio with autoplay.

Then create a slider question and add the below code in your question and update the values as per your choice (It will hide the slider as well as the next button for the time mentioned in the code)

Qualtrics.SurveyEngine.addOnload(function()
{
    
    this.hideNextButton();
    var that = this;
    (function(){that.showNextButton();}).delay(5);

});

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

});

 

Regards,

PD

@Prateek.DangThank you so much for this workaround. The first step with the text question and autoplay works very well. But I couldn’t manage the second step with the slider question: Shall I add the code in the field “question behaviour” in the respective fields (obviously the Onload and OnReady function)?

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});

And the values I have to change in the code you suggested are only those related to the duration of the delay (which is obviously the 5 (sec?) and 5000 (ms?)? Thanks!

Hey @overtone  Apologies, I missed to add the sections. Here it is:

 

Qualtrics.SurveyEngine.addOnload(function()
{
    
    this.hideNextButton();
    var that = this;
    (function(){that.showNextButton();}).delay(5);

});

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

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/

});

 

Yes, only these values as both will delay the visibility by 5 sec.

 

Regards,

PD

Thank you for this, but the slider question appears without any delay. The delay for the “next button”, however, works. Any idea? Maybe there is an issue with the question ID?

Nope, there’s no issue with the question ID, everything’s working fine. Maybe someone can pitch in and help. Hi @ArunDubey sir.

Regards,

PD

OK, sorry, I figured out that it indeed works with the Edge and Chrome browsers but not with Mozilla Firefox… Is there any way to fix it? I imagine that the partcipants will use different browsers with different versions. How can I ensure that the script works on their side? Thanks!

Unfortunately, I cannot install firefox in my system to check and update the code accordingly. What you can do here is, you can mention it in the mail/ intro page (We use to mention latest browser versions info for all the browsers, BUT you can recommend using Chrome to the respondents as statistically most of the respondents use Chrome only).

 

OR,

If you do R&D and successfully tweak the code as per the firefox, then you can add “Meta Info” to capture respondent’s browser and can add the condition in JS to run the part of code as per the browser used. Hope this helps.

 

Regards,

PD

Leave a Reply


Terms & Conditions