Adding a button to listen to a recording of the question | XM Community
Question

Adding a button to listen to a recording of the question

  • 17 January 2022
  • 6 replies
  • 660 views
H
Userlevel 1
Badge

Hello, I would like to introduce in my questionnaire the possibility to listen to the question, for example by clicking on a button next to each question which contains a recording of the question (which we could make previously for example)
Is this option available on qualtrics? Does someone know the code?
Thank you very much in advance  

6 replies

Tom_1842
Rank
Userlevel 7
Badge +27

Hi there, while you could insert Audio files using the Rich Content Editor's insert media, the below code will do what you are describing and with buttons.
In your question's HTML view, insert the below code, changing out the URL with the question recording:





Question Text

Then, add the following JavaScript in the Onload section of the question:
document.getElementById("playBtn").addEventListener("click",function(){
       document.getElementById("myAudio").play();
     });

document.getElementById("playBtn").addEventListener("touchstart",function(){
       document.getElementById("myAudio").play();
     });

document.getElementById("pauseBtn").addEventListener("click",function(){
       document.getElementById("myAudio").pause();
     });

document.getElementById("pauseBtn").addEventListener("touchstart",function(){
       document.getElementById("myAudio").pause();
     });

D
Badge

@Tom_1842 , can you highlight what part of that code is the URL? I am attempting to do the same thing as the original poster, but am unfamiliar with using code in question boxes. Thanks. 

Nam Nguyen
Rank
Userlevel 7
Badge +20

@dax75 
<audio src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3" id="myAudio">&nbsp;</audio>

<br>

<button id="playBtn">Play Audio</button>

<button id="pauseBtn">Pause Audio</button>

<br>

 

Some how the code got formatted into button

 

 

-Nam Nguyen-
Tom_1842
Rank
Userlevel 7
Badge +27

Thanks Nam! Some HTML from before the community migration is rendered, but you can get at the original HTML by inspecting the comment element with the browser.

The original code is below. You can add it to the question text using the Rich Content Editor's HTML/Source view <>:

<audio src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3" id="myAudio">&nbsp;</audio>
<br>
<button id="playBtn">Play Audio</button><button id="pauseBtn">Pause Audio</button>
<br>
<br>
Question Text

And the JavaScript for the question in the OnReady section:

document.getElementById("playBtn").addEventListener("click",function(){
document.getElementById("myAudio").play();
});

document.getElementById("playBtn").addEventListener("touchstart",function(){
document.getElementById("myAudio").play();
});

document.getElementById("pauseBtn").addEventListener("click",function(){
document.getElementById("myAudio").pause();
});

document.getElementById("pauseBtn").addEventListener("touchstart",function(){
document.getElementById("myAudio").pause();
});

You could also Insert Media through the Rich Content Editor. This will have an audio element with controls available for the respondent.

Another way to add an audio element so that controls are available for the respondent would be to use the below: 

<audio controls>
  <source src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<br>
<br>
Question Text

 

J
Badge

How would I use this to also add a button to each response option in a multiple choice item?

K
Badge +1

I am looking for a similar answer but I’d like coloured images for children to click on and hear the audio while remaining on the same page. So far I can get the images which will play media when you click but take you to a new page, or media that doesn’t look fun (or, has text buttons which they may not be able to read).

Leave a Reply


Terms & Conditions