How do you restrict the number of times an audio clip is played?

asimm123

Hi everyone! I'm trying to restrict the number of times (up to 6 times) people can listen to an audio clip within my survey. Additionally, I would like to track the number of times that same audio clip is played (i.e. 1-6 times). I've been browsing the online community for help, but can't seem to get the code to work properly in my survey. This is my first time using Qualtrics, so if anyone could provide any guidance at all, it would be very much appreciated!

AHammell

@asimm123 You have some extra stuff in your HTML that you don't need need. The HTML View for your question should only contain the following:

Remember to listen carefully and make sure that your computer volume is on, as you will only be able to listen to the clip once.&nbsp;<br>

<center><button id="audiobutton" type="button" onclick="">Play Audio</button>

<br>

<audio id="audiofile1" src="https://umich.qualtrics.com/CP/File.php?F=F_0uYH2HYrjamicNn"></audio></center>

In terms of the JavaScript, you'll want to be sure to add all of the JavaScript code that I included above.

(P.S. To embed code, use 3 " ` " symbols in a row and press "enter" :) )

AHammell

I may have something cooked up, but a couple of questions first:

• Do you need folks to be able to pause the audio?
• Do you need folks to be able to control any other parts of the audio file in any way (e.g. scrubbing and/or volume control)?

asimm123

@AHammell Hi! Thanks for your response! Ideally, participants will be able to click the "play" button on the audio clip; however, they won't be able to press that button again once it's played once. Pausing/other control features wouldn't be necessary :)

AHammell

Audio_Count_w_Javascript.qsf

AHammell

@asimm123 ; Alright, so I just attached a QSF file above, which you can download and import if you would like to see how exactly I implemented the following survey: https://umn.qualtrics.com/jfe/form/SV_bpcbr5HysOKGQfP

There are 3 components to making this work: 1) embedded data fields, 2) corresponding question HTML and 3) corresponding JavaScript.

For #1) Be sure to add two embedded data fields to the very top of your survey flow. In my example, I did "play_count" to help track the number of times the video was played and "pageload_count" to help track the number of times the page was load (this tracks whether or not the page was refreshed). The value of these fields will be modified with the corresponding JavaScript. Have "play_count" be set to "value will be set from Panel or URL." and have "pageload_count" be set to 0.

For #2) Go into the "HTML" view for your audio question and add the following HTML code:

<center><button id="audiobutton" type="button" onclick="">Play Audio</button>

<br>

<audio id="audiofile1" src="https://umn.qualtrics.com/CP/File.php?F=F_ezIjuufSai5bfXD"></audio></center>

The only thing you need to change here is the URL between the quotes after "src"-- change it to the URL of whatever audio that you have. (Note: If you're not sure what the URL is, you can upload your audio within Qualtrics "rich content editor" within the question. After you upload the audio, go to the question's "HTML View", and the URL for your audio file should be within the HTML, much like my code above).

For #3) Click on gear icon to the left of your audio question, then "Add JavaScript...", which will pop open the JavaScript window. This will be the JavaScript that you will need add to your audio question:

Qualtrics.SurveyEngine.addOnload(function()
{
	//create variable to track play count
	var playcount = 0; 
	//create variable to track page refresh count 
	var refreshcount = 0;
	//Get audio element
	//name "audiofile1" this whatever you name your audio element ID is within your HTML 
	var audio = document.getElementById("audiofile1"); 
	audio.volume = 1; //set audio volume to 1
	
// CREATE playAudio() FUNCTION
function playAudio() {
  playcount++; //increase playcount number by 1
  console.log(playcount); 
  var button = document.getElementById("audiobutton"); //grab button id
  button.style.visibility = "hidden"; //hide the button so that it can't be played anymore
  audio.play(); //play the audio one last time 
   //update play_count embedded data to current playcount number 
  Qualtrics.SurveyEngine.setEmbeddedData("play_count", playcount); 
};
	
audio.onended = function() {
	if (playcount < 6){
		var button = document.getElementById("audiobutton"); //grab button id
		button.style.visibility = "visible"; //show button again
	}
}; 
	


// TRIGGER playAudio() function on button press (note that the HTML element id for the button is called "audiobutton"
jQuery("#audiobutton").on("click", playAudio);


// TRACKING PAGE REFRESH
// NOTE: "playcount" variable refreshs to 0 if a respondent refreshes the page
	// WARNING: The three lines below will not work properly if this JavaScript is on the first page of the survey
	
// Pull number in pageload (default within embedded data element should be set to 0)
var pageload = Qualtrics.SurveyEngine.getEmbeddedData('pageload_count');
pageload = parseInt(pageload)+1; 
//save updated reload value to 'refresh_count' embedded data
Qualtrics.SurveyEngine.setEmbeddedData('pageload_count', pageload);


});

I have added comments in the JS code so that you can see what each line does. The JS code does a number of things:

• Tracks the number of times that the respondent plays the video (note, this number resets if the respondent reloads the page); this number will be saved within an embedded data field so that you can export it with the rest of your data
• Tracks the number of times that a respondent loads the page (anything greater than 1 indicates that they reloaded the page: 2 = they reloaded the page once, 3 = they reloaded the page twice, etc.); this number will be saved within an embedded data field so that you can export it with the rest of your data
• Hides the "play audio" button while the audio is playing
• Makes the "play audio" button reappear once the audio is done playing UNLESS the audio has been played 6 times

Again, feel free to download and import the QSF file I attached in the comment above to see how I implemented this survey. If you have any further questions or would like clarification on anything, let me know! :)

asimm123

@AHammell Thank you so much! This was super helpful :) If I have another question where I would like the participant to only be able to listen to the audio clip once, is there a way to modify this code to do that?

AHammell

Absolutely! All you need to do is delete the following code from the JavaScript (i.e. the code that makes the play button reappear):

audio.onended = function() {
	if (playcount < 6){
		var button = document.getElementById("audiobutton"); //grab button id
		button.style.visibility = "visible"; //show button again
	}
};

Alternatively, if you would like to change the max play count to any number other than 6, you can just replace the 6 in the JavaScript code chunk above to whatever number you would like the max play count to be.

Example if I wanted the max play count to be 10:

audio.onended = function() {
	if (playcount < 10){
		var button = document.getElementById("audiobutton"); //grab button id
		button.style.visibility = "visible"; //show button again
	}
};  

asimm123

@AHammell Thanks so much! I put your suggested code into the javascript, but for some reason, the audio clip seems to play on a loop once the "play" button is pressed. Do you have any idea where I could have gone wrong?

AHammell

@asimm123 Hm. Can you copy and paste your exact JavaScript and the "HTML View" code into here? That'll help me troubleshoot.

asimm123

@AHammell I'm not quite sure how to embed my JavaScript into the discussion like you did, and for some reason Qualtrics is blocking my copy/paste of my code.

HMTL View:

9. Remember to listen carefully and make sure that your computer volume is on, as you will only be able to listen to the clip once.&nbsp;<br><audio class="qmedia" controls="true" height="40" preload="auto" width="320"><source 

<center><button id="audiobutton" type="button" onclick="">Play Audio</button>

<br>

<audio id="audiofile1" src="https://umich.qualtrics.com/CP/File.php?F=F_0uYH2HYrjamicNn"></audio></center>

src="https://umich.qualtrics.com/CP/File.php?F=F_0uYH2HYrjamicNn" type="audio/mp3"><embed class="qmedia" flashconsts="file=https://umich.qualtrics.com/CP/File.php?F=F_0uYH2HYrjamicNn&amp;width=320&amp;height=20&amp;type=mp3&amp;autostart=false" height="20" pluginspage="http://adobe.com/flashplayer/"

javascript.png

I really appreciate your help and fast responses; this is my first time using Qualtrics/coding, so your feedback has been very informative :)

morganpatrick803

Hello @AHammell! Thank you very much for this helpful information. I'm wondering how to adjust the script you've provided if each of my questions has TWO audio files in it. Moreover, my audio files are in multiple choice answers, so I'm not sure if there is a way to edit the HTML of those answer choices. Grateful for your assistance!

Morgan

AHammell

@asimm123 So sorry I missed this response! Did you get it figured out?

@morganpatrick803 To clarify, are you saying that you will have two audio files within the same question, and each are tied to multiple choice response options?